@sentry/junior-dashboard 0.264.0 → 0.265.0

package/src/client/components/ui/trace.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { cn } from "@dashboard/lib/utils";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@dashboard/components/ui/collapsible";
+import { ChevronRightIcon } from "lucide-react";
+
+function TraceIcon({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-icon"
+      aria-hidden="true"
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Keep one trace row and its details in one open state. */
+function TraceCollapsible({
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof Collapsible>, "open"> &
+  (
+    | { open?: undefined }
+    | {
+        open: boolean;
+        onOpenChange: NonNullable<
+          React.ComponentProps<typeof Collapsible>["onOpenChange"]
+        >;
+      }
+  )) {
+  return (
+    <Collapsible
+      data-slot="trace-collapsible"
+      className={cn("flex w-full min-w-0 flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+/** Render the row button with a chevron that turns while open. */
+function TraceCollapsibleTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleTrigger>) {
+  return (
+    <CollapsibleTrigger
+      data-slot="trace-collapsible-trigger"
+      className={cn(
+        "group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-left text-dashboard-text-muted transition-colors outline-none hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus disabled:cursor-default disabled:hover:bg-transparent",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <TraceIcon className="transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90 motion-reduce:transition-none">
+        <ChevronRightIcon className="size-3 text-dashboard-text-faint" />
+      </TraceIcon>
+    </CollapsibleTrigger>
+  );
+}
+
+/** Reveal row details in a card under the row title. */
+function TraceCollapsibleContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleContent>) {
+  return (
+    <CollapsibleContent
+      data-slot="trace-collapsible-content"
+      className="h-(--collapsible-panel-height) min-w-0 overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none"
+      {...props}
+    >
+      <div
+        data-slot="trace-collapsible-content-inner"
+        className={cn(
+          "mt-1.5 ml-6 min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </CollapsibleContent>
+  );
+}
+
+export { TraceCollapsible, TraceCollapsibleTrigger, TraceCollapsibleContent };

package/src/client/conversations/ChatLayout.tsx

@@ -5,12 +5,14 @@ import { cn } from "../styles";
 /**
  * Own the conversation chat frame: one scroll region above one dock.
  *
- * Pages pass `scroll` and `dock` only. Do not invent footer padding, safe-area,
+ * Pages pass `header`, `scroll`, and `dock`. Do not invent footer padding, safe-area,
  * or shell height math outside this component and `ComposerDock`.
  */
 export function ChatLayout(props: {
   className?: string;
   dock?: ReactNode;
+  /** Keep conversation chrome outside the scrolling content. */
+  header?: ReactNode;
   /** When true, keep a taller minimum scroll region for long transcripts. */
   scrollMinTall?: boolean;
   scroll: ReactNode;
@@ -20,11 +22,13 @@ export function ChatLayout(props: {
   return (
     <div
       className={cn(
-        "grid h-full min-h-0 min-w-0 grid-rows-[minmax(0,1fr)_minmax(0,auto)]",
-        props.scrollMinTall && "grid-rows-[minmax(7rem,1fr)_minmax(0,auto)]",
+        "grid h-full min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)_minmax(0,auto)]",
+        props.scrollMinTall &&
+          "grid-rows-[auto_minmax(7rem,1fr)_minmax(0,auto)]",
         props.className,
       )}
     >
+      <div className="min-w-0">{props.header}</div>
       <div
         aria-label={props.scrollAriaLabel}
         className={cn(

package/src/client/conversations/ConversationBrief.tsx

@@ -4,7 +4,13 @@ import type { ConversationDetailReport } from "@sentry/junior/api/schema";
 
 import { Detail, DetailList } from "../components/DetailList";
 import { StatusChip, type StatusChipTone } from "../components/StatusChip";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../components/ui/collapsible";
 import { formatTime } from "../format";
+import { cn, dashboardDisclosureChevronClass } from "../styles";
 import { MentionPeopleProvider, renderMentionText } from "./transcriptMentions";
 
 type ConversationBriefReport = NonNullable<ConversationDetailReport["brief"]>;
@@ -160,16 +166,21 @@ function BriefContentView(props: {
 
 function BriefSection(props: { children: ReactNode; title: string }) {
   return (
-    <details className="group min-w-0 border-t border-dashboard-border pt-3">
-      <summary className="flex cursor-pointer list-none items-center gap-2 text-sm font-medium text-dashboard-text [&::-webkit-details-marker]:hidden focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus">
+    <Collapsible className="min-w-0 border-t border-dashboard-border pt-3">
+      <CollapsibleTrigger className="group flex w-full cursor-pointer items-center gap-2 text-left text-sm font-medium text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus">
         <ChevronRight
           aria-hidden="true"
-          className="size-3.5 shrink-0 text-dashboard-text-muted transition-transform group-open:rotate-90"
+          className={cn(
+            dashboardDisclosureChevronClass,
+            "text-dashboard-text-muted",
+          )}
         />
         {props.title}
-      </summary>
-      <div className="mt-3">{props.children}</div>
-    </details>
+      </CollapsibleTrigger>
+      <CollapsibleContent hiddenUntilFound>
+        <div className="mt-3">{props.children}</div>
+      </CollapsibleContent>
+    </Collapsible>
   );
 }
 

package/src/client/conversations/ConversationComposer.tsx

@@ -12,7 +12,12 @@ import {
 } from "react";
 import { ImagePlus, Send, Square } from "lucide-react";
 
-import { Button } from "../components/Button";
+import { Button } from "../components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import { useDashboardOnline } from "../connection";
 import { cn, dashboardComposerSurfaceClass } from "../styles";
 
@@ -447,16 +452,25 @@ export const ConversationComposer = memo(function ConversationComposer(
           )}
         >
           <div className="flex min-w-0 items-center gap-3">
-            <Button
-              aria-label="Attach images"
-              disabled={sendLocked || readingImages}
-              onClick={() => fileInputRef.current?.click()}
-              size="icon"
-              title="Attach images (up to 3 MB total)"
-              type="button"
-            >
-              <ImagePlus aria-hidden="true" size={16} />
-            </Button>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    focusableWhenDisabled
+                    aria-label="Attach images"
+                    disabled={sendLocked || readingImages}
+                    onClick={() => fileInputRef.current?.click()}
+                    size="icon"
+                    type="button"
+                  >
+                    <ImagePlus aria-hidden="true" size={16} />
+                  </Button>
+                }
+              />
+              <TooltipContent size="compact">
+                Attach images (up to 3 MB total)
+              </TooltipContent>
+            </Tooltip>
             {props.footerStart}
             {props.footerStart ? null : (
               <div className="hidden min-w-0 font-sans text-xs leading-relaxed text-dashboard-text-muted md:block">
@@ -488,7 +502,7 @@ export const ConversationComposer = memo(function ConversationComposer(
                 readingImages
               }
               title={sendLocked ? "Sending message" : props.submitLabel}
-              tone="primary"
+              variant="primary"
               type="submit"
             >
               <Send aria-hidden="true" size={14} />

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>
+  );
+}