@sentry/junior-dashboard 0.264.0 → 0.265.0

package/src/client/conversations/TranscriptMessageContextView.tsx

@@ -50,7 +50,10 @@ export function TranscriptMessageContextView(props: {
         </div>
         {!props.redacted && props.message.contexts?.length ? (
           <div className="mt-2">
-            <TranscriptTurnContextView contexts={props.message.contexts} />
+            <TranscriptTurnContextView
+              contexts={props.message.contexts}
+              messageId={props.message.messageId}
+            />
           </div>
         ) : null}
       </details>
@@ -78,7 +81,10 @@ export function TranscriptMessageContextView(props: {
         </div>
         {!props.redacted && props.message.contexts?.length ? (
           <div className="mt-2">
-            <TranscriptTurnContextView contexts={props.message.contexts} />
+            <TranscriptTurnContextView
+              contexts={props.message.contexts}
+              messageId={props.message.messageId}
+            />
           </div>
         ) : null}
       </article>

package/src/client/conversations/TranscriptMessageView.tsx

@@ -122,7 +122,12 @@ function messageAction(
   conversation: ConversationTranscript,
 ): ReactNode {
   if (message.role === "user" && message.contexts?.length) {
-    return <TranscriptTurnContextView contexts={message.contexts} />;
+    return (
+      <TranscriptTurnContextView
+        contexts={message.contexts}
+        messageId={message.messageId}
+      />
+    );
   }
   if (
     conversation.canFork &&

package/src/client/conversations/TranscriptReasoningView.tsx

@@ -1,15 +1,18 @@
+import { useState } from "react";
 import { Lightbulb } from "lucide-react";
 
+import {
+  TraceCollapsible,
+  TraceCollapsibleContent,
+  TraceCollapsibleTrigger,
+} from "../components/ui/trace";
 import { formatMessageTimestamp } from "../format";
 import type { TranscriptViewReasoningPart } from "../types";
-import { cn } from "../styles";
 import {
   TranscriptHeadingMeta,
   TranscriptHeadingRow,
 } from "./TranscriptHeadingRow";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
-import { TranscriptSummary } from "./TranscriptSummary";
-import { transcriptActivityBodyClass } from "./ToolFrame";
 
 /** Render reasoning collapsed with a short preview until expanded or searched. */
 export function TranscriptReasoningView(props: {
@@ -17,74 +20,57 @@ export function TranscriptReasoningView(props: {
   timestamp?: number;
 }) {
   const { active: searchActive } = useTranscriptSearch();
+  const [open, setOpen] = useState(false);
+  const expanded = searchActive || open;
   const rendered = props.part.redacted ? "Reasoning redacted" : props.part.text;
   const timestamp = formatMessageTimestamp(props.timestamp);
-  const summary = (
-    <>
-      <span
-        aria-label="Reasoning"
-        className="inline-flex size-4 shrink-0 items-center justify-center text-violet-200/80"
-        title="Reasoning"
-      >
-        <Lightbulb aria-hidden="true" size={14} strokeWidth={2} />
-      </span>
-      <TranscriptHeadingRow
-        left={
-          searchActive ? (
-            <span className="block min-w-0 text-dashboard-text-muted">
-              Reasoning
-            </span>
-          ) : (
-            <>
-              <span className="block min-w-0 truncate italic text-dashboard-text-muted group-open/reasoning:hidden">
-                {rendered}
-              </span>
-              <span className="hidden min-w-0 text-dashboard-text-muted group-open/reasoning:inline">
-                Reasoning
-              </span>
-            </>
-          )
-        }
-        right={
-          timestamp ? (
-            <TranscriptHeadingMeta className="min-w-0 break-words text-xs tabular-nums text-dashboard-text-muted max-md:hidden">
-              {timestamp}
-            </TranscriptHeadingMeta>
-          ) : undefined
-        }
-        rightClassName="min-w-0 max-md:hidden"
-      />
-    </>
-  );
-  const content = (
-    <div className={cn(transcriptActivityBodyClass, "px-3 py-2.5")}>
-      <div className="min-w-0 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text-subtle">
-        <HighlightText text={rendered} />
-      </div>
-    </div>
-  );
-
-  if (searchActive) {
-    return (
-      <div className={reasoningFrameClass()}>
-        <div className="grid list-none grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 py-1.5">
-          {summary}
-        </div>
-        {content}
-      </div>
-    );
-  }
 
   return (
-    <details className={cn("group/reasoning", reasoningFrameClass())}>
-      <TranscriptSummary className="-mx-2 grid grid-cols-[1rem_minmax(0,1fr)] items-center gap-2">
-        {summary}
-      </TranscriptSummary>
-      {content}
-    </details>
+    <TraceCollapsible
+      className="text-xs leading-tight"
+      // Search holds rows open, so the row button is off until search ends.
+      disabled={searchActive}
+      open={expanded}
+      onOpenChange={setOpen}
+    >
+      <TraceCollapsibleTrigger className="-mx-2 w-auto">
+        <span className="grid min-w-0 flex-1 grid-cols-[1rem_minmax(0,1fr)] items-center gap-2">
+          <span
+            aria-label="Reasoning"
+            className="inline-flex size-4 shrink-0 items-center justify-center text-violet-200/80"
+            title="Reasoning"
+          >
+            <Lightbulb aria-hidden="true" size={14} strokeWidth={2} />
+          </span>
+          <TranscriptHeadingRow
+            left={
+              expanded ? (
+                <span className="block min-w-0 text-dashboard-text-muted">
+                  Reasoning
+                </span>
+              ) : (
+                <span className="block min-w-0 truncate italic text-dashboard-text-muted">
+                  {rendered}
+                </span>
+              )
+            }
+            right={
+              timestamp ? (
+                <TranscriptHeadingMeta className="min-w-0 break-words text-xs tabular-nums text-dashboard-text-muted max-md:hidden">
+                  {timestamp}
+                </TranscriptHeadingMeta>
+              ) : undefined
+            }
+            rightClassName="min-w-0 max-md:hidden"
+          />
+        </span>
+      </TraceCollapsibleTrigger>
+      {/* Keep closed reasoning in the page, so browser find can reach it. */}
+      <TraceCollapsibleContent className="px-3 py-2.5" hiddenUntilFound>
+        <div className="min-w-0 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text-subtle">
+          <HighlightText text={rendered} />
+        </div>
+      </TraceCollapsibleContent>
+    </TraceCollapsible>
   );
 }
-
-function reasoningFrameClass(): string {
-  return "min-w-0 text-xs leading-tight";
-}

package/src/client/conversations/TranscriptTimestamp.tsx

@@ -1,6 +1,10 @@
 import { createContext, useContext, useState, type ReactNode } from "react";
 
-import { Tooltip } from "../components/Tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import {
   formatMessageTimestamp,
   formatRelativeMessageTimestamp,
@@ -51,18 +55,16 @@ export function TranscriptTimestamp(props: { value: number | undefined }) {
 
   const details = formatTranscriptTimestampDetails(props.value!);
   return (
-    <Tooltip
-      content={
+    <Tooltip>
+      <TooltipTrigger render={button} />
+      <TooltipContent>
         <span className="grid grid-cols-[auto_auto] gap-x-3">
           <span>Local</span>
           <span>{details.local}</span>
           <span>UTC</span>
           <span>{details.utc}</span>
         </span>
-      }
-      placement="above"
-    >
-      {button}
+      </TooltipContent>
     </Tooltip>
   );
 }

package/src/client/conversations/TranscriptToolView.tsx

@@ -96,7 +96,7 @@ function ToolSignature(props: {
         <HighlightText text={props.name} />
       </ShimmerText>
       {props.preview && !searchActive ? (
-        <code className="min-w-0 truncate font-[inherit] text-dashboard-text-muted group-open:hidden">
+        <code className="min-w-0 truncate font-[inherit] text-dashboard-text-muted group-aria-expanded/trace-collapsible-trigger:hidden">
           (<HighlightText text={props.preview} />)
         </code>
       ) : null}

package/src/client/conversations/TranscriptTurnContextView.tsx

@@ -1,7 +1,14 @@
 import { Brain, Braces, ChevronRight, Layers } from "lucide-react";
-import { useId, useState } from "react";
+import {
+  createContext,
+  useContext,
+  useId,
+  useState,
+  type ReactNode,
+} from "react";
 import { createPortal } from "react-dom";
 
+import { DetailsPanel } from "../components/DetailsPanel";
 import { Drawer } from "../components/Drawer";
 import type { TranscriptViewTurnContext } from "../types";
 import { formatMessageTimestamp, formatTime } from "../format";
@@ -10,57 +17,91 @@ import { cn } from "../styles";
 import { HighlightText } from "./transcriptSearch";
 import { TranscriptSummary } from "./TranscriptSummary";
 
-/** Show structured context attached to one transcript user message. */
+/** The turn context that a page panel shows, keyed by its message. */
+export type TurnContextSelection = {
+  contexts: TranscriptViewTurnContext[];
+  id: string;
+};
+
+/** Let the page that owns a panel show turn context there. */
+export type TurnContextPanel = {
+  openId?: string;
+  onToggle(selection: TurnContextSelection): void;
+};
+
+const TurnContextPanelContext = createContext<TurnContextPanel | undefined>(
+  undefined,
+);
+
+/**
+ * Route turn context in one transcript to its owner's panel. Without a
+ * `panel`, turn context opens in a modal drawer. Each transcript sets this, so
+ * a nested transcript does not use the panel of the page behind it.
+ */
+export function TurnContextPanelProvider(props: {
+  children: ReactNode;
+  panel?: TurnContextPanel;
+}) {
+  return (
+    <TurnContextPanelContext value={props.panel}>
+      {props.children}
+    </TurnContextPanelContext>
+  );
+}
+
+/**
+ * Show structured context attached to one transcript user message. The panel
+ * keys context by `messageId`, so every control for one message, including a
+ * remounted one, shows the same open state.
+ */
 export function TranscriptTurnContextView(props: {
   contexts: TranscriptViewTurnContext[];
+  messageId?: string;
 }) {
+  const panel = useContext(TurnContextPanelContext);
   const [open, setOpen] = useState(false);
-  const titleId = useId();
+  const instanceId = useId();
+  const id = props.messageId ?? instanceId;
+  const expanded = panel ? panel.openId === id : open;
 
   return (
     <>
       <button
-        aria-haspopup="dialog"
-        aria-expanded={open}
+        aria-haspopup={panel ? undefined : "dialog"}
+        aria-expanded={expanded}
         aria-label="View turn context"
         className={cn(
           "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus",
-          open && "bg-dashboard-fill-hover text-dashboard-text",
+          expanded && "bg-dashboard-fill-hover text-dashboard-text",
         )}
-        onClick={() => setOpen(true)}
+        data-turn-context-id={id}
+        onClick={() => {
+          if (!panel) return setOpen(true);
+          panel.onToggle({ contexts: props.contexts, id });
+        }}
         title="View context"
         type="button"
       >
         <Layers aria-hidden="true" size={14} strokeWidth={1.8} />
       </button>
 
-      {open
+      {!panel && open
         ? createPortal(
             <Drawer
               closeLabel="Close turn context"
               header={
-                <>
-                  <h2
-                    className="m-0 text-sm font-semibold text-dashboard-text"
-                    id={titleId}
-                  >
-                    Turn context
-                  </h2>
-                  <p className="m-0 mt-1 text-xs text-dashboard-text-muted">
-                    Context supplied with this message
-                  </p>
-                </>
+                <h2
+                  className="m-0 text-sm font-semibold text-dashboard-text"
+                  id={instanceId}
+                >
+                  Turn context
+                </h2>
               }
               onClose={() => setOpen(false)}
-              openKey={titleId}
-              titleId={titleId}
+              openKey={instanceId}
+              titleId={instanceId}
             >
-              {props.contexts.map((context, index) => (
-                <TurnContext
-                  context={context}
-                  key={`${context.pluginName}:${context.kind}:${context.version}:${index}`}
-                />
-              ))}
+              <TurnContextList contexts={props.contexts} />
             </Drawer>,
             document.body,
           )
@@ -69,6 +110,37 @@ export function TranscriptTurnContextView(props: {
   );
 }
 
+/** Show turn context in the page panel: an aside, or a sheet on small screens. */
+export function TurnContextDetails(props: {
+  contexts: TranscriptViewTurnContext[];
+  onClose(): void;
+}) {
+  return (
+    <DetailsPanel
+      label="Turn context"
+      onClose={props.onClose}
+      title={
+        <h2 className="m-0 text-base font-semibold text-dashboard-text">
+          Turn context
+        </h2>
+      }
+    >
+      <div className="px-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
+        <TurnContextList contexts={props.contexts} />
+      </div>
+    </DetailsPanel>
+  );
+}
+
+function TurnContextList(props: { contexts: TranscriptViewTurnContext[] }) {
+  return props.contexts.map((context, index) => (
+    <TurnContext
+      context={context}
+      key={`${context.pluginName}:${context.kind}:${context.version}:${index}`}
+    />
+  ));
+}
+
 function TurnContext(props: { context: TranscriptViewTurnContext }) {
   const memory = memoryRecallContent(props.context);
 

package/src/client/conversations/TranscriptView.tsx

@@ -1,20 +1,31 @@
+import { useState } from "react";
 import { ArrowDownToLine } from "lucide-react";
 
 import type {
   ConversationTranscript,
   TranscriptViewSubagentPart,
 } from "../types";
-import { Button } from "../components/Button";
+import { Button } from "../components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 import { ConversationTranscriptView } from "./ConversationTranscript";
 import { ConversationEventLog } from "./ConversationEventLog";
 import {
   transcriptBottomVersion,
   transcriptJuniorMessageVersion,
+  useAutoLoadPreviousPage,
   usePinnedTranscriptBottom,
 } from "./transcriptBottomPinning";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
 import { transcriptEmptyClass } from "./transcriptStyles";
 import { TranscriptSearchProvider } from "./transcriptSearch";
+import {
+  TurnContextPanelProvider,
+  type TurnContextPanel,
+} from "./TranscriptTurnContextView";
 
 /** Render one conversation transcript as ordered message and tool events. */
 export function Transcript(props: {
@@ -28,16 +39,20 @@ export function Transcript(props: {
   onSelectedEventSeqChange?(seq: number | undefined): void;
   responding?: boolean;
   search?: string;
+  onSearchChange?(value: string): void;
   selectedEventSeq?: number;
   onOpenSubagentTranscript?: (args: {
     part: TranscriptViewSubagentPart;
     conversation: ConversationTranscript;
   }) => void;
   transcript?: ConversationTranscript;
+  /** Show turn context in the owner's panel. Without it, a drawer opens. */
+  turnContextPanel?: TurnContextPanel;
   view?: TranscriptViewMode;
 }) {
   const view = props.view ?? "rich";
-  const search = props.search ?? "";
+  const [localSearch, setLocalSearch] = useState("");
+  const search = props.search ?? localSearch;
   const historyLabel = view === "raw" ? "events" : "messages";
   const redacted = props.transcript?.eventHistory.status === "redacted";
   const bottomPinning = usePinnedTranscriptBottom({
@@ -54,6 +69,21 @@ export function Transcript(props: {
     },
   });
 
+  const loadPreviousPage = () => {
+    bottomPinning.preserveViewportForPrepend();
+    props.onLoadPreviousPage?.();
+  };
+  const previousPageRef = useAutoLoadPreviousPage({
+    enabled: Boolean(
+      props.onLoadPreviousPage &&
+      props.hasPreviousPage &&
+      !props.loadingPreviousPage &&
+      !props.historyError,
+    ),
+    historyVersion: props.historyVersion ?? "empty",
+    onLoad: loadPreviousPage,
+  });
+
   if (!props.transcript) {
     return (
       <div className={transcriptEmptyClass()}>
@@ -71,16 +101,13 @@ export function Transcript(props: {
           </div>
         ) : null}
         {props.hasPreviousPage || props.loadingPreviousPage ? (
-          <div className="mb-3 flex items-center gap-3">
+          <div className="mb-3 flex items-center gap-3" ref={previousPageRef}>
             <span className="h-px min-w-4 flex-1 bg-dashboard-fill-strong" />
             <button
               aria-label="Load earlier events"
               className="shrink-0 cursor-pointer border-0 bg-transparent px-1 py-0.5 font-sans text-xs font-medium text-dashboard-text-muted transition-colors hover:text-dashboard-text focus-visible:outline focus-visible:outline-1 focus-visible:outline-dashboard-focus/55 disabled:cursor-not-allowed disabled:opacity-50"
               disabled={props.loadingPreviousPage}
-              onClick={() => {
-                bottomPinning.preserveViewportForPrepend();
-                props.onLoadPreviousPage?.();
-              }}
+              onClick={loadPreviousPage}
               title="Load earlier events"
               type="button"
             >
@@ -103,15 +130,18 @@ export function Transcript(props: {
           <ConversationEventLog
             key={props.transcript.conversationId}
             conversation={props.transcript}
+            onSearchChange={props.onSearchChange ?? setLocalSearch}
             onSelectedSeqChange={props.onSelectedEventSeqChange}
             selectedSeq={props.selectedEventSeq}
           />
         ) : (
-          <ConversationTranscriptView
-            onOpenSubagentTranscript={props.onOpenSubagentTranscript}
-            conversation={props.transcript}
-            responding={props.responding ?? props.live ?? false}
-          />
+          <TurnContextPanelProvider panel={props.turnContextPanel}>
+            <ConversationTranscriptView
+              onOpenSubagentTranscript={props.onOpenSubagentTranscript}
+              conversation={props.transcript}
+              responding={props.responding ?? props.live ?? false}
+            />
+          </TurnContextPanelProvider>
         )}
         <div
           aria-hidden="true"
@@ -141,21 +171,27 @@ function JumpToLatestButton(props: {
 
   return (
     <div className="pointer-events-none sticky bottom-3 z-20 flex h-0 justify-center px-3 md:fixed md:inset-x-auto md:bottom-6 md:right-8 md:h-auto md:justify-end md:px-0">
-      <Button
-        aria-label={label}
-        className="pointer-events-auto relative -translate-y-full rounded-lg !border !border-dashboard-border-emphasis !bg-dashboard-surface-active text-dashboard-text shadow-[0_6px_24px_rgba(0,0,0,0.36)] hover:!border-dashboard-border-interactive hover:!bg-dashboard-surface-hover hover:!text-dashboard-text md:translate-y-0"
-        onClick={props.onClick}
-        size="icon"
-        title={label}
-      >
-        <ArrowDownToLine aria-hidden="true" size={16} strokeWidth={2} />
-        {props.hasPendingUpdate ? (
-          <span
-            aria-hidden="true"
-            className="absolute right-1.5 top-1.5 size-2 bg-emerald-300"
-          />
-        ) : null}
-      </Button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              aria-label={label}
+              className="pointer-events-auto relative -translate-y-full rounded-lg !border !border-dashboard-border-emphasis !bg-dashboard-surface-active text-dashboard-text shadow-[0_6px_24px_rgba(0,0,0,0.36)] hover:!border-dashboard-border-interactive hover:!bg-dashboard-surface-hover hover:!text-dashboard-text md:translate-y-0"
+              onClick={props.onClick}
+              size="icon"
+            >
+              <ArrowDownToLine aria-hidden="true" size={16} strokeWidth={2} />
+              {props.hasPendingUpdate ? (
+                <span
+                  aria-hidden="true"
+                  className="absolute right-1.5 top-1.5 size-2 bg-emerald-300"
+                />
+              ) : null}
+            </Button>
+          }
+        />
+        <TooltipContent size="compact">{label}</TooltipContent>
+      </Tooltip>
     </div>
   );
 }

package/src/client/conversations/eventLog.ts

@@ -118,3 +118,60 @@ export function eventLogTone(data: ConversationReportEventData): string {
   }
   return "text-dashboard-text-subtle";
 }
+
+/** One event log entry with its display text. */
+export type EventLogRow = {
+  event: ConversationReportEvent;
+  summary: string;
+  metadata: string;
+};
+
+/** Build the display text for each event log entry. */
+export function eventLogRows(
+  events: readonly ConversationReportEvent[],
+): EventLogRow[] {
+  return events.map((event) => {
+    const model = eventLogModel(event);
+    return {
+      event,
+      summary: eventLogSummary(event.data).replace(/\s+/g, " ").slice(0, 300),
+      metadata: [
+        model?.modelId,
+        model?.modelProfile,
+        model?.reasoningLevel && `${model.reasoningLevel} reasoning`,
+        eventLogUsage(event),
+      ]
+        .filter(Boolean)
+        .join(" · "),
+    };
+  });
+}
+
+/**
+ * Keep the rows that match a trimmed, lowercase search query. The match
+ * includes the full event payload, so large payloads are serialized here.
+ */
+export function filterEventLogRows(
+  rows: EventLogRow[],
+  normalizedQuery: string,
+): EventLogRow[] {
+  if (!normalizedQuery) return rows;
+  return rows.filter(({ event, summary, metadata }) =>
+    `${summary} ${metadata} ${JSON.stringify(event)}`
+      .toLowerCase()
+      .includes(normalizedQuery),
+  );
+}
+
+/** Find the visible rows before and after the selected event. */
+export function adjacentEventLogSeqs(
+  rows: readonly EventLogRow[],
+  seq: number | undefined,
+): { previous?: number; next?: number } {
+  const index = rows.findIndex((row) => row.event.seq === seq);
+  if (index === -1) return {};
+  return {
+    previous: rows[index - 1]?.event.seq,
+    next: rows[index + 1]?.event.seq,
+  };
+}

package/src/client/conversations/eventTime.ts

@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+import { useLocalStorage } from "@uidotdev/usehooks";
+
+const storageKey = "junior:event-log:time-mode";
+
+/** Share the browser-only UTC/local preference between event rows and details. */
+export function useEventTime() {
+  const [mode, setMode] = useLocalStorage<"utc" | "local">(storageKey, "utc");
+  const local = mode === "local";
+  const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const timeZone = local ? localTimeZone : "UTC";
+  const formatters = useMemo(() => {
+    const clock: Intl.DateTimeFormatOptions = {
+      timeZone,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      fractionalSecondDigits: 3,
+      hourCycle: "h23",
+      numberingSystem: "latn",
+    };
+    return {
+      clock: new Intl.DateTimeFormat("en-GB", clock),
+      timestamp: new Intl.DateTimeFormat(undefined, {
+        ...clock,
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        timeZoneName: "short",
+      }),
+      // A log can span both standard time and daylight-saving time.
+      zone: new Intl.DateTimeFormat(undefined, {
+        timeZone,
+        timeZoneName: "shortGeneric",
+      }),
+    };
+  }, [timeZone]);
+  const label = local
+    ? (formatters.zone
+        .formatToParts()
+        .find((part) => part.type === "timeZoneName")?.value ?? localTimeZone)
+    : "UTC";
+
+  return {
+    local,
+    label,
+    title: local
+      ? `${localTimeZone} · Switch to UTC`
+      : `UTC · Switch to local time (${localTimeZone})`,
+    toggle() {
+      setMode(local ? "utc" : "local");
+    },
+    formatClock(value: string) {
+      return formatters.clock.format(new Date(value));
+    },
+    formatTimestamp(value: string) {
+      return local ? formatters.timestamp.format(new Date(value)) : value;
+    },
+  };
+}