@sentry/junior-dashboard 0.264.0 → 0.265.0

package/src/client/conversations/ConversationEventLog.tsx

@@ -1,33 +1,37 @@
-import { ChevronRight } from "lucide-react";
-import { memo, useEffect, useId, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
-import { Drawer } from "../components/Drawer";
+import { Skeleton } from "../components/ui/skeleton";
+import { Toggle } from "../components/ui/toggle";
+import { useEventTime } from "./eventTime";
+import { SearchInput } from "../components/SearchInput";
 import { cn } from "../styles";
 import type { ConversationTranscript } from "../types";
 import {
-  eventLogModel,
-  eventLogSummary,
+  adjacentEventLogSeqs,
+  eventLogRows,
   eventLogTone,
-  eventLogUsage,
+  filterEventLogRows,
 } from "./eventLog";
-import { EventDetails } from "./EventDetails";
-import { ForkConversationButton } from "./ForkConversationButton";
+import { ConversationEventDetails } from "./ConversationEventDetails";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 
 const rowClass =
-  "grid grid-cols-[12ch_minmax(0,1fr)_1rem] items-center gap-x-3 px-3 @min-[48rem]:grid-cols-[12ch_19ch_minmax(0,1fr)_1rem]";
+  "grid grid-cols-[12ch_minmax(0,1fr)] items-baseline gap-x-3 px-4 @min-[32rem]:grid-cols-[12ch_17ch_minmax(0,1fr)]";
 
 /**
  * Show every reporting event in sequence order, outside the transcript reducer.
- * Pass `onSelectedSeqChange` to own the open entry, for example in the URL.
+ * Pass `onSelectedSeqChange` to own selection and render details beside the log.
+ * Standalone transcripts keep a local selection and show an overlay.
  */
 export const ConversationEventLog = memo(function ConversationEventLog(props: {
   conversation: ConversationTranscript;
+  onSearchChange(value: string): void;
   onSelectedSeqChange?(seq: number | undefined): void;
   selectedSeq?: number;
 }) {
   const { conversation } = props;
+  const time = useEventTime();
   const search = useTranscriptSearch();
   const [localSelectedSeq, setLocalSelectedSeq] = useState<number>();
   const selectedSeq = props.onSelectedSeqChange
@@ -35,31 +39,14 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
     : localSelectedSeq;
   const setSelectedSeq = props.onSelectedSeqChange ?? setLocalSelectedSeq;
   const listRef = useRef<HTMLOListElement>(null);
-  // Rows opened by a click are already visible. Scroll only for a linked entry.
+  // Clicked rows are visible. Reveal links and keyboard selections after layout.
   const revealedSeqRef = useRef<number>(undefined);
-  const titleId = useId();
   const events = conversation.events;
-  const rows = useMemo(
-    () =>
-      events.map((event) => ({
-        event,
-        model: eventLogModel(event),
-        usage: eventLogUsage(event),
-        summary: eventLogSummary(event.data).replace(/\s+/g, " ").slice(0, 300),
-      })),
-    [events],
-  );
+  const rows = useMemo(() => eventLogRows(events), [events]);
   // Large payloads are serialized only for an active search or the open entry.
   const visibleRows = useMemo(
-    () =>
-      search.active
-        ? rows.filter(({ event, summary, usage }) =>
-            `${summary} ${usage} ${JSON.stringify(event)}`
-              .toLowerCase()
-              .includes(search.normalizedQuery),
-          )
-        : rows,
-    [rows, search.active, search.normalizedQuery],
+    () => filterEventLogRows(rows, search.normalizedQuery),
+    [rows, search.normalizedQuery],
   );
   // Resolve the selection from current data so polling cannot leave stale details.
   const selected = events.find((event) => event.seq === selectedSeq);
@@ -72,7 +59,7 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
     );
     if (!row) return;
     revealedSeqRef.current = selectedSeq;
-    row.scrollIntoView({ block: "center" });
+    row.scrollIntoView({ block: "nearest" });
   }, [selectedSeq, visibleRows]);
 
   if (conversation.eventHistory.status === "expired") {
@@ -85,54 +72,89 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
 
   return (
     <section aria-label="Conversation event log" className="@container min-w-0">
-      <div className="mb-3 flex flex-wrap items-center justify-between gap-2 text-xs text-dashboard-text-muted">
-        <span role="status">
-          {search.active
-            ? `${visibleRows.length} of ${events.length} loaded events`
-            : `${events.length} loaded events`}
-        </span>
-        <span>Times in UTC · Select a row for details</span>
-      </div>
-      <div className="overflow-hidden rounded-md border border-dashboard-border bg-dashboard-surface-panel font-mono text-xs">
-        <div
-          aria-hidden="true"
-          className={cn(
-            rowClass,
-            "border-b border-dashboard-border bg-dashboard-surface-raised py-2 text-dashboard-text-muted",
-          )}
-        >
-          <span>Time (UTC)</span>
-          <span>Event</span>
-          <span className="hidden @min-[48rem]:block">Summary</span>
-          <span />
+      <div className="sticky top-0 z-10 bg-dashboard-bg">
+        <div className="flex flex-wrap items-center gap-2 border-b border-dashboard-border px-4 py-2">
+          <SearchInput
+            className="min-w-32 flex-1 @max-[28rem]:basis-full"
+            label="Search events"
+            onChange={props.onSearchChange}
+            placeholder="Search events…"
+            size="compact"
+            value={search.query}
+          />
+          <div className="ml-auto flex items-center gap-3 whitespace-nowrap text-xs text-dashboard-text-muted @max-[28rem]:w-full @max-[28rem]:justify-between">
+            <span role="status">
+              {search.active
+                ? `${visibleRows.length} of ${events.length} loaded events`
+                : `${events.length} loaded events`}
+            </span>
+            <Toggle
+              aria-label="Use local time"
+              onPressedChange={time.toggle}
+              pressed={time.local}
+              title={time.title}
+            >
+              <span className="max-w-32 truncate">{time.label}</span>
+            </Toggle>
+          </div>
         </div>
+        <EventLogColumns />
+      </div>
+      <div className="font-mono text-xs">
         <ol
           aria-label="Events"
           className="m-0 list-none divide-y divide-dashboard-border-subtle p-0"
           ref={listRef}
         >
-          {visibleRows.map(({ event, summary, model, usage }) => (
-            <li data-event-seq={event.seq} key={event.seq}>
+          {visibleRows.map(({ event, summary, metadata }, index) => (
+            <li
+              className="scroll-mt-32 scroll-mb-2"
+              data-event-seq={event.seq}
+              key={event.seq}
+            >
               <button
-                aria-haspopup="dialog"
+                aria-expanded={selectedSeq === event.seq}
                 aria-label={`Event ${event.seq}: ${event.data.type}`}
                 className={cn(
                   rowClass,
-                  "min-h-11 w-full cursor-pointer border-0 bg-transparent py-2 text-left leading-5 hover:bg-dashboard-fill-hover active:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus @min-[48rem]:min-h-8 @min-[48rem]:py-1",
-                  selectedSeq === event.seq && "bg-dashboard-fill-strong",
+                  "relative min-h-11 w-full cursor-pointer border-0 bg-transparent py-2 text-left leading-5 hover:bg-dashboard-fill-hover active:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus @min-[32rem]:min-h-9 @min-[32rem]:py-1.5",
+                  selectedSeq === event.seq &&
+                    "bg-dashboard-fill-strong before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-dashboard-accent before:content-['']",
                 )}
                 onClick={() => {
                   revealedSeqRef.current = event.seq;
                   setSelectedSeq(event.seq);
                 }}
+                onKeyDown={(keyEvent) => {
+                  if (
+                    keyEvent.altKey ||
+                    keyEvent.ctrlKey ||
+                    keyEvent.metaKey ||
+                    keyEvent.shiftKey ||
+                    (keyEvent.key !== "ArrowUp" && keyEvent.key !== "ArrowDown")
+                  )
+                    return;
+                  keyEvent.preventDefault();
+                  const next =
+                    visibleRows[
+                      index + (keyEvent.key === "ArrowDown" ? 1 : -1)
+                    ];
+                  if (!next) return;
+                  setSelectedSeq(next.event.seq);
+                  listRef.current
+                    ?.querySelector<HTMLButtonElement>(
+                      `[data-event-seq="${next.event.seq}"] button`,
+                    )
+                    ?.focus({ preventScroll: true });
+                }}
                 type="button"
               >
                 <time
                   className="tabular-nums text-dashboard-text-muted"
                   dateTime={event.createdAt}
-                  title={event.createdAt}
+                  title={time.formatTimestamp(event.createdAt)}
                 >
-                  {event.createdAt.slice(11, 23)}
+                  {time.formatClock(event.createdAt)}
                 </time>
                 <span
                   className={cn("truncate", eventLogTone(event.data))}
@@ -140,50 +162,19 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
                 >
                   <HighlightText text={event.data.type} />
                 </span>
-                <span className="col-span-2 row-start-2 grid min-w-0 gap-1 text-dashboard-text @min-[48rem]:col-span-1 @min-[48rem]:row-auto">
-                  <span className="flex min-w-0 flex-wrap items-baseline gap-x-2">
-                    <span
-                      className={cn(
-                        "break-all",
-                        model
-                          ? "font-semibold text-violet-300"
-                          : "text-dashboard-text-muted",
-                      )}
-                    >
-                      <HighlightText
-                        text={model?.modelId ?? "Model not recorded"}
-                      />
-                    </span>
-                    {model?.modelProfile ? (
-                      <span className="text-dashboard-text-muted">
-                        <HighlightText text={model.modelProfile} />
-                      </span>
-                    ) : null}
-                    {model?.reasoningLevel ? (
-                      <span className="text-dashboard-text-muted">
-                        <HighlightText
-                          text={`${model.reasoningLevel} reasoning`}
-                        />
-                      </span>
-                    ) : null}
-                  </span>
+                <span className="col-span-2 row-start-2 grid min-w-0 gap-0.5 text-dashboard-text @min-[32rem]:col-span-1 @min-[32rem]:row-auto">
                   <span className="truncate" title={summary}>
                     <HighlightText text={summary} />
                   </span>
-                  {usage ? (
+                  {metadata ? (
                     <span
-                      className="text-dashboard-text-muted"
-                      title="Usage for this event only; costs are estimated USD"
+                      className="truncate text-dashboard-text-muted"
+                      title={metadata}
                     >
-                      <HighlightText text={usage} />
+                      <HighlightText text={metadata} />
                     </span>
                   ) : null}
                 </span>
-                <ChevronRight
-                  aria-hidden="true"
-                  className="col-start-3 row-start-1 text-dashboard-text-muted @min-[48rem]:col-start-4"
-                  size={14}
-                />
               </button>
             </li>
           ))}
@@ -196,45 +187,75 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
           </p>
         ) : null}
       </div>
-      {selected
+      {selected && !props.onSelectedSeqChange
         ? createPortal(
-            <Drawer
-              closeLabel="Close event details"
-              header={
-                <>
-                  <h2
-                    className="m-0 break-words font-mono text-sm font-semibold text-dashboard-text"
-                    id={titleId}
-                  >
-                    {selected.data.type}
-                  </h2>
-                  <p className="mb-0 mt-1 font-mono text-xs text-dashboard-text-muted">
-                    {selected.createdAt}
-                  </p>
-                </>
-              }
+            <ConversationEventDetails
+              overlay
+              conversation={conversation}
+              event={selected}
               onClose={() => setSelectedSeq(undefined)}
-              openKey={`${conversation.conversationId}:${selected.seq}`}
-              titleId={titleId}
-              width="wide"
-            >
-              {conversation.canFork &&
-              selected.data.type === "message" &&
-              selected.data.role === "assistant" &&
-              !selected.data.redacted ? (
-                <div className="mb-3 flex items-center gap-2 text-sm">
-                  <ForkConversationButton
-                    conversationId={conversation.conversationId}
-                    messageId={selected.data.messageId}
-                  />
-                  <span>Fork after this reply</span>
-                </div>
-              ) : null}
-              <EventDetails key={selected.seq} event={selected} />
-            </Drawer>,
+              onSelect={setSelectedSeq}
+              {...adjacentEventLogSeqs(visibleRows, selected.seq)}
+            />,
             document.body,
           )
         : null}
     </section>
   );
 });
+
+const loadingRowWidths = ["w-3/5", "w-2/5", "w-4/5", "w-1/2", "w-2/3", "w-1/3"];
+
+/** Match the event log toolbar, columns, and rows while the transcript loads. */
+export function ConversationEventLogLoading() {
+  return (
+    <section aria-busy="true" className="@container min-w-0">
+      <span className="sr-only" role="status">
+        Loading events
+      </span>
+      <div className="sticky top-0 z-10 bg-dashboard-bg">
+        <div className="flex flex-wrap items-center gap-2 border-b border-dashboard-border px-4 py-2">
+          <Skeleton className="h-9 min-w-32 flex-1 @max-[28rem]:basis-full" />
+          <Skeleton className="ml-auto h-3 w-24" />
+        </div>
+        <EventLogColumns />
+      </div>
+      <ol className="m-0 list-none divide-y divide-dashboard-border-subtle p-0">
+        {loadingRowWidths.map((width, index) => (
+          <li
+            className={cn(
+              rowClass,
+              "min-h-11 items-center gap-y-2 py-2 @min-[32rem]:min-h-9 @min-[32rem]:py-1.5",
+            )}
+            key={index}
+          >
+            <Skeleton className="h-3 w-[10ch]" />
+            <Skeleton className="h-3 w-[12ch]" />
+            <Skeleton
+              className={cn(
+                "col-span-2 row-start-2 h-3 @min-[32rem]:col-span-1 @min-[32rem]:row-auto",
+                width,
+              )}
+            />
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}
+
+function EventLogColumns() {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        rowClass,
+        "border-b border-dashboard-border py-2 font-mono text-xs text-dashboard-text-muted",
+      )}
+    >
+      <span>Time</span>
+      <span>Event</span>
+      <span className="hidden @min-[32rem]:block">Summary</span>
+    </div>
+  );
+}

package/src/client/conversations/ConversationHeader.tsx

@@ -53,11 +53,16 @@ export function ConversationHeader(props: {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const mobileMenuRef = useRef<HTMLDivElement>(null);
-  const searchOpenVisible = searchOpen || props.search.length > 0;
+  const searchOpenVisible =
+    props.view === "rich" && (searchOpen || props.search.length > 0);
   const openMobileNavigation = useOpenMobileNavigation();
 
   useEffect(() => {
-    if (wasDetailsOpen.current && !detailsOpen) {
+    if (
+      wasDetailsOpen.current &&
+      !detailsOpen &&
+      document.activeElement === document.body
+    ) {
       const trigger = window.matchMedia("(max-width: 767px)").matches
         ? menuButtonRef.current
         : detailsButtonRef.current;
@@ -182,7 +187,7 @@ export function ConversationHeader(props: {
       <MobileHeaderLivePortal>{liveIndicator}</MobileHeaderLivePortal>
       <header
         className={cn(
-          "sticky top-0 z-10 -mx-4 border-b border-dashboard-border bg-dashboard-bg md:-mx-7",
+          "relative z-10 border-b border-dashboard-border bg-dashboard-bg",
           !showMobileHeader && "hidden md:block",
         )}
       >

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -10,8 +10,13 @@ import {
   X,
 } from "lucide-react";
 
-import { Button, ToggleButton } from "../components/Button";
-import { IconButtonTooltip } from "../components/Tooltip";
+import { Button } from "../components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
+import { ToggleGroup, ToggleGroupItem } from "../components/ui/toggle-group";
 import { cn } from "../styles";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 import { ShareConversationButton } from "./ShareConversationButton";
@@ -43,17 +48,19 @@ export function ConversationHeaderActions(props: {
   if (layout === "menu") {
     return (
       <div className="grid gap-0.5">
-        <MenuActionButton
-          label={props.searchOpen ? "Hide search" : "Search transcript"}
-          onClick={props.onSearchClick}
-          pressed={props.searchOpen}
-        >
-          {props.searchOpen ? (
-            <X aria-hidden="true" size={16} strokeWidth={2} />
-          ) : (
-            <Search aria-hidden="true" size={16} strokeWidth={2} />
-          )}
-        </MenuActionButton>
+        {props.view === "rich" ? (
+          <MenuActionButton
+            label={props.searchOpen ? "Hide search" : "Search transcript"}
+            onClick={props.onSearchClick}
+            pressed={props.searchOpen}
+          >
+            {props.searchOpen ? (
+              <X aria-hidden="true" size={16} strokeWidth={2} />
+            ) : (
+              <Search aria-hidden="true" size={16} strokeWidth={2} />
+            )}
+          </MenuActionButton>
+        ) : null}
         <MenuActionButton
           label="Conversation"
           onClick={() => props.onViewChange("rich")}
@@ -88,10 +95,12 @@ export function ConversationHeaderActions(props: {
 
   return (
     <div className="flex shrink-0 items-center gap-0.5">
-      <TranscriptSearchToggle
-        onClick={props.onSearchClick}
-        open={props.searchOpen}
-      />
+      {props.view === "rich" ? (
+        <TranscriptSearchToggle
+          onClick={props.onSearchClick}
+          open={props.searchOpen}
+        />
+      ) : null}
       {props.copyAction}
       <ArchiveConversationButton {...props.archive} layout="bar" />
       <Button
@@ -115,67 +124,55 @@ export function TranscriptViewToggle(props: {
   value: TranscriptViewMode;
 }) {
   return (
-    <div
+    <ToggleGroup
       aria-label="Transcript view"
       className={
         props.labelled
-          ? "inline-flex items-center gap-6"
-          : "inline-flex items-center gap-0.5 rounded-md border border-dashboard-border bg-dashboard-overlay-soft p-0.5"
+          ? "inline-flex gap-6"
+          : "inline-flex gap-0.5 rounded-md border border-dashboard-border bg-dashboard-overlay-soft p-0.5"
       }
-      role="group"
+      onValueChange={([next]) => {
+        if (next) props.onChange(next);
+      }}
+      value={[props.value]}
     >
-      <ViewModeButton
-        active={props.value === "rich"}
-        label="Conversation"
-        labelled={props.labelled}
-        onClick={() => props.onChange("rich")}
-      >
+      <ViewModeItem label="Conversation" labelled={props.labelled} value="rich">
         <MessagesSquare aria-hidden="true" size={14} strokeWidth={2} />
-      </ViewModeButton>
-      <ViewModeButton
-        active={props.value === "raw"}
-        label="Event log"
-        labelled={props.labelled}
-        onClick={() => props.onChange("raw")}
-      >
+      </ViewModeItem>
+      <ViewModeItem label="Event log" labelled={props.labelled} value="raw">
         <ScrollText aria-hidden="true" size={14} strokeWidth={2} />
-      </ViewModeButton>
-    </div>
+      </ViewModeItem>
+    </ToggleGroup>
   );
 }
 
-function ViewModeButton(props: {
-  active: boolean;
+function ViewModeItem(props: {
   children: ReactNode;
   label: string;
   labelled?: boolean;
-  onClick(): void;
+  value: TranscriptViewMode;
 }) {
-  const button = (
-    <ToggleButton
+  const item = (
+    <ToggleGroupItem
       aria-label={props.label}
-      className={cn(
-        "!no-underline",
+      className={
         props.labelled
-          ? "relative flex h-11 items-center gap-2 rounded-none px-0 py-0 text-sm after:absolute after:inset-x-0 after:bottom-0 after:h-0.5"
-          : "grid size-7 place-items-center rounded-md px-0 py-0",
-        props.active &&
-          (props.labelled
-            ? "text-dashboard-text after:bg-dashboard-text-solid"
-            : "bg-dashboard-fill-hover text-dashboard-text"),
-      )}
-      onClick={props.onClick}
-      pressed={props.active}
-      variant="text"
+          ? "relative h-11 min-w-0 gap-2 rounded-none border-0 px-0 text-sm hover:bg-transparent after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-pressed:border-0 data-pressed:bg-transparent data-pressed:after:bg-dashboard-text-solid"
+          : "size-7 min-w-0 border-0 px-0 data-pressed:border-0 data-pressed:bg-dashboard-fill-hover"
+      }
+      value={props.value}
     >
       {props.children}
       {props.labelled ? props.label : null}
-    </ToggleButton>
+    </ToggleGroupItem>
   );
   return props.labelled ? (
-    button
+    item
   ) : (
-    <IconButtonTooltip label={props.label}>{button}</IconButtonTooltip>
+    <Tooltip>
+      <TooltipTrigger render={item} />
+      <TooltipContent size="compact">{props.label}</TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -188,21 +185,26 @@ export function HeaderIconButton(props: {
   pressed?: boolean;
 }) {
   return (
-    <IconButtonTooltip label={props.label}>
-      <Button
-        ref={props.ref}
-        aria-label={props.label}
-        aria-pressed={props.pressed}
-        className={cn(
-          "text-dashboard-text-muted",
-          props.pressed && "bg-dashboard-fill-strong text-dashboard-text",
-        )}
-        onClick={props.onClick}
-        size="icon"
-      >
-        {props.children}
-      </Button>
-    </IconButtonTooltip>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            ref={props.ref}
+            aria-label={props.label}
+            aria-pressed={props.pressed}
+            className={cn(
+              "text-dashboard-text-muted",
+              props.pressed && "bg-dashboard-fill-strong text-dashboard-text",
+            )}
+            onClick={props.onClick}
+            size="icon"
+          >
+            {props.children}
+          </Button>
+        }
+      />
+      <TooltipContent size="compact">{props.label}</TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -273,16 +275,22 @@ function ArchiveConversationButton(
     );
   }
   return (
-    <IconButtonTooltip label={label}>
-      <Button
-        aria-label={label}
-        className="hidden shrink-0 text-dashboard-text-muted md:grid"
-        disabled={props.disabled}
-        onClick={props.onClick}
-        size="icon"
-      >
-        <Icon aria-hidden="true" size={15} strokeWidth={2} />
-      </Button>
-    </IconButtonTooltip>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            focusableWhenDisabled
+            aria-label={label}
+            className="hidden shrink-0 text-dashboard-text-muted md:grid"
+            disabled={props.disabled}
+            onClick={props.onClick}
+            size="icon"
+          >
+            <Icon aria-hidden="true" size={15} strokeWidth={2} />
+          </Button>
+        }
+      />
+      <TooltipContent size="compact">{label}</TooltipContent>
+    </Tooltip>
   );
 }

package/src/client/conversations/ConversationHomeList.tsx

@@ -9,7 +9,7 @@ import {
   visualStatusForConversation,
 } from "../format";
 import { EmptyTelemetry } from "../components/EmptyTelemetry";
-import { Skeleton } from "../components/Skeleton";
+import { Skeleton } from "../components/ui/skeleton";
 import {
   conversationParticipants,
   ParticipantAvatarStack,