@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/conversations/ConversationDetails.tsx

@@ -1,34 +1,52 @@
 import { useState, type ReactNode } from "react";
 
-import { IconButtonTooltip } from "../components/Tooltip";
+import { DetailsPanel, useDetailsPanel } from "../components/DetailsPanel";
 import {
-  ConversationDetailsFrame,
-  useConversationDetailsPanel,
-} from "./ConversationDetailsFrame";
-import { SegmentedTabs } from "../components/SegmentedTabs";
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../components/ui/tabs";
 import {
   ConversationChildAgents,
   useConversationChildAgents,
 } from "./ConversationChildAgents";
+import {
+  ConversationLinkedWork,
+  type ConversationLink,
+} from "./ConversationLinkedWork";
 import {
   ConversationMemories,
   useConversationMemories,
 } from "./ConversationMemories";
+import {
+  ConversationWatches,
+  useConversationWatches,
+} from "./ConversationWatches";
 import { ShareConversationButton } from "./ShareConversationButton";
 import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 
 type DetailsTab = "agents" | "summary" | "memories";
 
+/** Keep the tabs fixed while each panel scrolls to the frame edge. */
+const detailsPanelClass =
+  "min-h-0 overflow-y-auto overscroll-contain rounded-none px-4 pb-[max(1rem,env(safe-area-inset-bottom))] focus-visible:-outline-offset-2";
+
 /**
- * Show conversation details: the brief and facts first, then linked work,
- * participants, and the usage breakdown. Share and Sentry links stay in the
- * header so every tab can reach them.
+ * Show conversation details: the brief, participants, and run facts first,
+ * then watches, linked work, and the usage breakdown. Share and Sentry links
+ * stay in the header so every tab can reach them.
  */
 export function ConversationDetails(props: {
-  annotations: ReactNode;
   brief: ReactNode;
   conversationId: string;
   identity: ReactNode;
+  links: ConversationLink[];
   onClose(): void;
   /** Open one child agent transcript. A details sheet closes first. */
   onOpenSubagent(target: SubagentTranscriptTarget): void;
@@ -37,29 +55,47 @@ export function ConversationDetails(props: {
   usage: ReactNode;
 }) {
   const [tab, setTab] = useState<DetailsTab>("summary");
-  const panel = useConversationDetailsPanel();
+  const panel = useDetailsPanel();
   // Load both lists with details so each tab can show its count.
   const memories = useConversationMemories(props.conversationId);
   const agents = useConversationChildAgents(props.conversationId);
-  const tabs = [
-    { label: "Summary", value: "summary" },
-    {
-      count: memories.data?.memories.length,
-      label: "Memories",
-      value: "memories",
-    },
-    { count: agents.data?.agents.length, label: "Subagents", value: "agents" },
-  ] as const;
+  const watches = useConversationWatches(props.conversationId).data?.watches;
 
+  // People first, then run facts. Watches come before linked work: they say
+  // what can wake this agent later, so readers see them without another tab.
   const sections = [
-    { content: props.overview, key: "overview", title: undefined },
     { content: props.identity, key: "participants", title: "Participants" },
-    { content: props.annotations, key: "linked-work", title: "Linked work" },
+    { content: props.overview, key: "overview", title: undefined },
+    {
+      content: watches?.length ? (
+        <ConversationWatches watches={watches} />
+      ) : null,
+      count: watches?.length,
+      key: "watching",
+      title: "Watching",
+    },
+    {
+      content: props.links.length ? (
+        <ConversationLinkedWork links={props.links} />
+      ) : null,
+      count: props.links.length,
+      key: "linked-work",
+      title: "Linked work",
+    },
     { content: props.usage, key: "usage", title: "Usage" },
   ].filter((section) => section.content != null);
 
   return (
-    <ConversationDetailsFrame
+    <DetailsPanel
+      label="Conversation details"
+      title={
+        <h2
+          aria-label="Conversation details"
+          className="m-0 text-base font-semibold text-dashboard-text"
+        >
+          Details
+        </h2>
+      }
       actions={
         <>
           <ShareConversationButton
@@ -68,32 +104,79 @@ export function ConversationDetails(props: {
             layout="icon"
           />
           {props.sentryConversationUrl ? (
-            <IconButtonTooltip label="Open in Sentry" placement="below">
-              <a
-                aria-label="Open in Sentry"
-                className="grid size-9 place-items-center rounded-md text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-strong hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
-                href={props.sentryConversationUrl}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                <SentryGlyph />
-              </a>
-            </IconButtonTooltip>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <a
+                    aria-label="Open in Sentry"
+                    className="grid size-9 place-items-center rounded-md text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-strong hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
+                    href={props.sentryConversationUrl}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    <SentryGlyph />
+                  </a>
+                }
+              />
+              <TooltipContent size="compact" side="bottom">
+                Open in Sentry
+              </TooltipContent>
+            </Tooltip>
           ) : null}
         </>
       }
       onClose={props.onClose}
     >
-      <SegmentedTabs
-        scroll
-        items={tabs}
-        label="Conversation details"
-        onChange={setTab}
+      <Tabs
+        className="h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-0"
+        onValueChange={(value: DetailsTab) => setTab(value)}
         value={tab}
       >
-        {tab === "memories" ? (
+        <TabsList
+          activateOnFocus
+          aria-label="Conversation details"
+          className="m-4"
+        >
+          <TabsTrigger value="summary">
+            <span className="truncate">Summary</span>
+          </TabsTrigger>
+          <TabsTrigger value="memories">
+            <span className="truncate">Memories</span>
+            <TabCount count={memories.data?.memories.length} />
+          </TabsTrigger>
+          <TabsTrigger value="agents">
+            <span className="truncate">Subagents</span>
+            <TabCount count={agents.data?.agents.length} />
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent className={detailsPanelClass} value="summary">
+          {props.brief != null || sections.length > 0 ? (
+            <div className="grid min-w-0 gap-3">
+              {props.brief != null ? (
+                <div className="min-w-0 break-words px-1 pb-1 font-sans text-sm leading-relaxed text-dashboard-text-muted">
+                  {props.brief}
+                </div>
+              ) : null}
+              {sections.map((section) => (
+                <DetailsSection
+                  count={section.count}
+                  key={section.key}
+                  title={section.title}
+                >
+                  {section.content}
+                </DetailsSection>
+              ))}
+            </div>
+          ) : (
+            <p className="m-0 font-sans text-sm leading-relaxed text-dashboard-text-muted">
+              No additional conversation details.
+            </p>
+          )}
+        </TabsContent>
+        <TabsContent className={detailsPanelClass} value="memories">
           <ConversationMemories conversationId={props.conversationId} />
-        ) : tab === "agents" ? (
+        </TabsContent>
+        <TabsContent className={detailsPanelClass} value="agents">
           <ConversationChildAgents
             conversationId={props.conversationId}
             onOpenAgent={(target) => {
@@ -102,36 +185,38 @@ export function ConversationDetails(props: {
               props.onOpenSubagent(target);
             }}
           />
-        ) : props.brief != null || sections.length > 0 ? (
-          <div className="grid min-w-0 gap-3">
-            {props.brief != null ? (
-              <div className="min-w-0 break-words px-1 pb-1 font-sans text-sm leading-relaxed text-dashboard-text-muted">
-                {props.brief}
-              </div>
-            ) : null}
-            {sections.map((section) => (
-              <DetailsSection key={section.key} title={section.title}>
-                {section.content}
-              </DetailsSection>
-            ))}
-          </div>
-        ) : (
-          <p className="m-0 font-sans text-sm leading-relaxed text-dashboard-text-muted">
-            No additional conversation details.
-          </p>
-        )}
-      </SegmentedTabs>
-    </ConversationDetailsFrame>
+        </TabsContent>
+      </Tabs>
+    </DetailsPanel>
+  );
+}
+
+/** Show a panel's entry count. Zero and unknown counts are hidden. */
+function TabCount(props: { count: number | undefined }) {
+  if (!props.count) return null;
+  return (
+    <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">
+      {props.count.toLocaleString("en-US")}
+    </span>
   );
 }
 
 /** Group one kind of conversation detail in a compact card. */
-function DetailsSection(props: { children: ReactNode; title?: string }) {
+function DetailsSection(props: {
+  children: ReactNode;
+  count?: number;
+  title?: string;
+}) {
   return (
     <section 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 font-sans text-xs font-medium text-dashboard-text-muted">
+        <h3 className="m-0 flex items-center gap-1.5 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">

package/src/client/conversations/ConversationEventDetails.tsx

@@ -0,0 +1,141 @@
+import type { ConversationReportEvent } from "@sentry/junior/api/schema";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "../styles";
+import { DetailsPanel } from "../components/DetailsPanel";
+import { Button } from "../components/ui/button";
+import { Skeleton } from "../components/ui/skeleton";
+import type { ConversationTranscript } from "../types";
+import { useEventTime } from "./eventTime";
+import { EventDetails } from "./EventDetails";
+import { ForkConversationButton } from "./ForkConversationButton";
+
+// Step buttons keep focus at the ends of the log, so style the ARIA state.
+const stepButtonClass =
+  "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:!bg-transparent data-disabled:hover:!text-dashboard-text-muted";
+
+/**
+ * Show the selected event without blocking the main conversation's event log.
+ * Without an event, show a loading state while a linked event loads.
+ * `previous` and `next` are the adjacent visible rows of the event log.
+ */
+export function ConversationEventDetails(props: {
+  conversation?: ConversationTranscript;
+  event?: ConversationReportEvent;
+  next?: number;
+  onClose(): void;
+  onSelect?(seq: number): void;
+  overlay?: boolean;
+  previous?: number;
+}) {
+  const { conversation, event, onSelect } = props;
+  const time = useEventTime();
+  const timestamp = event ? (
+    <time
+      className="block break-words font-mono text-xs text-dashboard-text-muted"
+      dateTime={event.createdAt}
+      title={event.createdAt}
+    >
+      {time.formatTimestamp(event.createdAt)}
+    </time>
+  ) : null;
+  const title = event ? (
+    <>
+      <h2 className="m-0 mb-1 break-words font-mono text-sm font-semibold text-dashboard-text">
+        {event.data.type}
+      </h2>
+      {timestamp}
+    </>
+  ) : (
+    <div className="grid gap-2 py-0.5">
+      <Skeleton className="h-3.5 w-28" />
+      <Skeleton className="h-3 w-40" />
+    </div>
+  );
+  const actions =
+    onSelect && event ? (
+      <>
+        <Button
+          aria-label="Previous event"
+          className={stepButtonClass}
+          disabled={props.previous === undefined}
+          focusableWhenDisabled
+          onClick={() => {
+            if (props.previous !== undefined) onSelect(props.previous);
+          }}
+          size="icon"
+          title="Previous event"
+        >
+          <ChevronUp aria-hidden="true" size={15} />
+        </Button>
+        <Button
+          aria-label="Next event"
+          className={stepButtonClass}
+          disabled={props.next === undefined}
+          focusableWhenDisabled
+          onClick={() => {
+            if (props.next !== undefined) onSelect(props.next);
+          }}
+          size="icon"
+          title="Next event"
+        >
+          <ChevronDown aria-hidden="true" size={15} />
+        </Button>
+      </>
+    ) : undefined;
+
+  return (
+    <DetailsPanel
+      actions={actions}
+      label="Event details"
+      onClose={props.onClose}
+      overlay={props.overlay}
+      sheetTitle={event?.data.type}
+      title={title}
+    >
+      {/* Own the scroll here, so a new event starts at the top with closed
+          disclosures, and the sheet actions stay below the content. */}
+      <div
+        className={cn(
+          "h-full min-w-0 overflow-y-auto overscroll-contain p-4 pb-[max(1rem,env(safe-area-inset-bottom))]",
+          props.overlay && "xl:p-0",
+        )}
+        key={event?.seq ?? "loading"}
+      >
+        {event && conversation ? (
+          <>
+            <div className="mb-4 xl:hidden">{timestamp}</div>
+            {conversation.canFork &&
+            event.data.type === "message" &&
+            event.data.role === "assistant" &&
+            !event.data.redacted ? (
+              <div className="mb-3 flex items-center gap-2 text-sm">
+                <ForkConversationButton
+                  conversationId={conversation.conversationId}
+                  messageId={event.data.messageId}
+                />
+                <span>Fork after this reply</span>
+              </div>
+            ) : null}
+            <EventDetails event={event} />
+          </>
+        ) : (
+          <EventDetailsLoading />
+        )}
+      </div>
+    </DetailsPanel>
+  );
+}
+
+/**
+ * Keep the body quiet while the event loads. The header placeholders carry the
+ * state, so the panel does not compete with the log skeleton.
+ */
+function EventDetailsLoading() {
+  return (
+    <div aria-busy="true" role="status">
+      <span className="sr-only">Loading event</span>
+      <Skeleton className="h-3 w-40 xl:hidden" />
+    </div>
+  );
+}