@sentry/junior-dashboard 0.265.0 → 0.267.0

package/src/client/conversations/ConversationWatches.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import {
   Bot,
+  ChevronRight,
   CircleDot,
   Eye,
   FolderGit2,
@@ -14,7 +15,7 @@ import {
   Timer,
   Users,
 } from "lucide-react";
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import {
   conversationWatchesReportSchema,
   type ConversationWatch,
@@ -22,7 +23,8 @@ import {
 
 import { formatTime } from "../format";
 import { fetchDashboardJson } from "../http";
-import { DetailsList, DetailsRow, DetailsRowLine } from "./DetailsList";
+import { dashboardDisclosureChevronClass } from "../styles";
+import { DetailsList, DetailsRow } from "./DetailsList";
 
 /** Load the active Watches that one Conversation owns. */
 export function useConversationWatches(conversationId: string) {
@@ -39,8 +41,8 @@ export function useConversationWatches(conversationId: string) {
 }
 
 /**
- * Show what can wake this Conversation: each active Watch with the resource,
- * the reason, and the event types that deliver to it.
+ * 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 (
@@ -66,65 +68,81 @@ const resourceIcons: Partial<Record<string, LucideIcon>> = {
 };
 
 /**
- * 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.
+ * 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 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;
+  // 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 ?? {});
-
-  return (
+  const row = (
     <DetailsRow
+      expanded={expanded}
       icon={<Icon aria-hidden="true" className="size-3.5" />}
       meta={
-        <time dateTime={until}>
-          {isTimer
-            ? `in ${formatRemaining(until)}`
-            : `${formatRemaining(until)} left`}
-        </time>
+        <span className="grid size-5 place-items-center">
+          <ChevronRight
+            aria-hidden="true"
+            className={dashboardDisclosureChevronClass}
+          />
+        </span>
       }
+      onToggle={() => setExpanded((value) => !value)}
       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>
+    />
+  );
+  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>
-          ) : null}
-        </DetailsRowLine>
-      ) : null}
-    </DetailsRow>
+          </p>
+        ) : null}
+      </div>
+    </>
   );
 }
 
@@ -153,13 +171,3 @@ function watchEventLabel(event: string, resourceType: string): string {
     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/DetailsList.tsx

@@ -3,12 +3,45 @@ import { useState, type ReactNode } from "react";
 
 import { cn, dashboardDisclosureChevronClass } from "../styles";
 
+/**
+ * Group one kind of detail in a compact card. Conversation details and event
+ * details share it, so both panels read the same way. A `label` names the
+ * card as a region.
+ */
+export function DetailsCard(props: {
+  children: ReactNode;
+  count?: number;
+  label?: string;
+  title?: string;
+}) {
+  return (
+    <section
+      aria-label={props.label}
+      className="grid min-w-0 gap-2.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel p-3"
+    >
+      {props.title ? (
+        <h3 className="m-0 flex min-w-0 items-center gap-1.5 break-words font-sans text-xs font-medium text-dashboard-text-muted">
+          {props.title}
+          {props.count ? (
+            <span className="tabular-nums text-dashboard-text-faint">
+              {props.count.toLocaleString("en-US")}
+            </span>
+          ) : null}
+        </h3>
+      ) : null}
+      <div className="min-w-0 break-words font-sans text-xs leading-relaxed text-dashboard-text-muted">
+        {props.children}
+      </div>
+    </section>
+  );
+}
+
 /** 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.
+ * 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[];
@@ -23,26 +56,21 @@ export function DetailsList<T>(props: {
       : 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">
+    // 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
-          className="border-t border-dashboard-border-subtle first:border-t-0"
-          key={props.itemKey(item)}
-        >
-          {props.renderItem(item)}
-        </li>
+        <li key={props.itemKey(item)}>{props.renderItem(item)}</li>
       ))}
       {hidden > 0 ? (
-        <li className="border-t border-dashboard-border-subtle">
+        <li>
           <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"
+            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-4 shrink-0 place-items-center">
+            <span className="grid size-5 shrink-0 place-items-center">
               <ChevronRight
                 aria-hidden="true"
                 className={dashboardDisclosureChevronClass}
@@ -59,20 +87,24 @@ export function DetailsList<T>(props: {
 /**
  * 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.
+ * 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(
-    "-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 &&
+    "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 = (
@@ -80,7 +112,7 @@ export function DetailsRow(props: {
       <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">
+      <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">
@@ -89,17 +121,33 @@ export function DetailsRow(props: {
       {props.children}
     </>
   );
-  return props.href ? (
-    <a
-      className={className}
-      href={props.href}
-      rel="noreferrer"
-      target="_blank"
-      title={props.tooltip}
-    >
-      {content}
-    </a>
-  ) : (
+  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>

package/src/client/conversations/EventDetails.tsx

@@ -12,6 +12,7 @@ import {
 import { dashboardDisclosureChevronClass } from "../styles";
 
 import { RedactedMarker } from "./TranscriptRedacted";
+import { DetailsCard } from "./DetailsList";
 import { TranscriptText } from "./TranscriptText";
 import { eventLogModel } from "./eventLog";
 import { formatCostBreakdown } from "../format";
@@ -61,7 +62,9 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
       content = (
         <>
           {Object.keys(metadata).length > 0 ? (
-            <DetailValue value={metadata} />
+            <DetailSection>
+              <DetailValue value={metadata} />
+            </DetailSection>
           ) : null}
           {summary ? (
             <DetailSection title="Continuation summary">
@@ -76,7 +79,9 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
       const { type: _, text, redacted, ...metadata } = data;
       content = (
         <>
-          <DetailValue value={metadata} />
+          <DetailSection>
+            <DetailValue value={metadata} />
+          </DetailSection>
           <DetailSection title="Message">
             {redacted ? (
               <RedactedMarker />
@@ -97,14 +102,14 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
               <DetailSection key={call.toolCallId} title={name}>
                 <DetailValue value={metadata} />
                 {input !== undefined ? (
-                  <DetailSection title="Input">
+                  <DetailSubsection title="Input">
                     <DetailValue value={input} />
-                  </DetailSection>
+                  </DetailSubsection>
                 ) : null}
                 {output !== undefined ? (
-                  <DetailSection title="Output">
+                  <DetailSubsection title="Output">
                     <DetailValue value={output} />
-                  </DetailSection>
+                  </DetailSubsection>
                 ) : null}
               </DetailSection>
             );
@@ -132,13 +137,15 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
       const { type: _, presentation, ...metadata } = data;
       content = (
         <>
-          <DetailValue value={metadata} />
+          <DetailSection>
+            <DetailValue value={metadata} />
+          </DetailSection>
           <DetailSection title={presentation.title}>
             {presentation.preview ? (
               <TranscriptText mentions={mentions} text={presentation.preview} />
             ) : null}
             {presentation.details?.map((detail, index) => (
-              <DetailSection key={index} title={detail.title}>
+              <DetailSubsection key={index} title={detail.title}>
                 {detail.description ? (
                   <TranscriptText
                     mentions={mentions}
@@ -149,7 +156,7 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
                 {detail.metadata ? (
                   <DetailValue value={detail.metadata} />
                 ) : null}
-              </DetailSection>
+              </DetailSubsection>
             ))}
           </DetailSection>
         </>
@@ -158,12 +165,16 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
     }
     default: {
       const { type: _, ...fields } = data;
-      content = <DetailValue value={fields} />;
+      content = (
+        <DetailSection>
+          <DetailValue value={fields} />
+        </DetailSection>
+      );
     }
   }
 
   return (
-    <div className="@container grid min-w-0 gap-6">
+    <div className="@container grid min-w-0 gap-3">
       <DetailSection
         title={
           data.type === "handoff" ? "Target configuration" : "Configuration"
@@ -197,7 +208,7 @@ 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">
+    <div className="relative min-w-0">
       <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
@@ -207,7 +218,7 @@ function RawEventJson({ event }: { event: ConversationReportEvent }) {
           Raw JSON
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <div className="absolute right-0 top-4">
+          <div className="absolute right-0 top-0">
             <CopyButton getText={() => json} label="Copy JSON" />
           </div>
           <div
@@ -224,12 +235,28 @@ function RawEventJson({ event }: { event: ConversationReportEvent }) {
   );
 }
 
-function DetailSection(props: { title: string; children: ReactNode }) {
+// Top-level groups use the conversation details card. A titled card is a
+// region, so readers can jump to a section such as "Message".
+function DetailSection(props: { title?: string; children: ReactNode }) {
+  return (
+    <DetailsCard label={props.title} title={props.title}>
+      <div className="grid min-w-0 gap-3 text-sm text-dashboard-text">
+        {props.children}
+      </div>
+    </DetailsCard>
+  );
+}
+
+// A group inside a card, such as a tool input. It does not nest another card.
+function DetailSubsection(props: { title: string; children: ReactNode }) {
   return (
-    <section aria-label={props.title} className="grid min-w-0 gap-2">
-      <h3 className="m-0 border-b border-dashboard-border pb-2 text-sm font-semibold text-dashboard-text">
+    <section
+      aria-label={props.title}
+      className="grid min-w-0 gap-1.5 border-t border-dashboard-border-subtle pt-3"
+    >
+      <h4 className="m-0 font-sans text-xs font-medium text-dashboard-text-muted">
         {props.title}
-      </h3>
+      </h4>
       {props.children}
     </section>
   );
@@ -275,8 +302,8 @@ function DetailValue({ value }: { value: unknown }) {
               key={key}
               className={
                 nested
-                  ? "grid min-w-0 gap-2 py-2"
-                  : "grid min-w-0 grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-baseline gap-x-4 py-2 @min-[30rem]:grid-cols-[minmax(0,10rem)_minmax(0,1fr)]"
+                  ? "grid min-w-0 gap-2 py-2 first:pt-0 last:pb-0"
+                  : "grid min-w-0 grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-baseline gap-x-4 py-2 first:pt-0 last:pb-0 @min-[30rem]:grid-cols-[minmax(0,10rem)_minmax(0,1fr)]"
               }
             >
               <dt className="break-words text-xs leading-relaxed text-dashboard-text-muted">