@sentry/junior-dashboard 0.267.0 → 0.269.0

package/src/client/conversations/TranscriptMessageContextView.tsx

@@ -3,7 +3,11 @@ import { useState } from "react";
 
 import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import { dashboardDisclosureChevronClass } from "../styles";
-import { formatMessageTimestamp, transcriptMessageActorLabel } from "../format";
+import {
+  formatMessageTimestamp,
+  transcriptMessageActor,
+  transcriptMessageActorLabel,
+} from "../format";
 import type { ConversationTranscript, TranscriptViewMessage } from "../types";
 import {
   TranscriptHeadingMeta,
@@ -61,8 +65,13 @@ export function TranscriptMessageContextView(props: {
           {!props.redacted && props.message.contexts?.length ? (
             <div className="mt-2">
               <TranscriptTurnContextView
+                actor={transcriptMessageActor(
+                  props.conversation,
+                  props.message,
+                )}
                 contexts={props.message.contexts}
                 messageId={props.message.messageId}
+                timestamp={props.message.timestamp}
               />
             </div>
           ) : null}
@@ -93,8 +102,10 @@ export function TranscriptMessageContextView(props: {
         {!props.redacted && props.message.contexts?.length ? (
           <div className="mt-2">
             <TranscriptTurnContextView
+              actor={transcriptMessageActor(props.conversation, props.message)}
               contexts={props.message.contexts}
               messageId={props.message.messageId}
+              timestamp={props.message.timestamp}
             />
           </div>
         ) : null}

package/src/client/conversations/TranscriptMessageView.tsx

@@ -9,6 +9,7 @@ import { memo, type ReactNode } from "react";
 
 import {
   formatMessageTimestamp,
+  transcriptMessageActor,
   transcriptMessageActorLabel,
   transcriptRoleKind,
 } from "../format";
@@ -130,8 +131,10 @@ function messageAction(
   if (message.role === "user" && message.contexts?.length) {
     return (
       <TranscriptTurnContextView
+        actor={transcriptMessageActor(conversation, message)}
         contexts={message.contexts}
         messageId={message.messageId}
+        timestamp={message.timestamp}
       />
     );
   }

package/src/client/conversations/TranscriptToolView.tsx

@@ -10,6 +10,8 @@ import {
 } from "../format";
 import type { TranscriptViewToolCallPart } from "../types";
 import { ShimmerText } from "../components/ShimmerText";
+import { TranscriptReviewItemCard } from "../review-desk/ReviewItemCard";
+import { reviewItemIdFromToolCall } from "../review-desk/reviewItemFormat";
 import { cn } from "../styles";
 import { ToolFrame } from "./ToolFrame";
 import { toolCallPreview } from "./toolCallPreview";
@@ -64,7 +66,17 @@ export const TranscriptToolView = memo(function TranscriptToolView(props: {
     </ToolFrame>
   );
 
-  return <div className="min-w-0">{frame}</div>;
+  const reviewItemId = reviewItemIdFromToolCall(props.part);
+  return (
+    <div className="min-w-0">
+      {frame}
+      {reviewItemId ? (
+        <div className="mt-2">
+          <TranscriptReviewItemCard itemId={reviewItemId} />
+        </div>
+      ) : null}
+    </div>
+  );
 });
 
 function ToolSignature(props: {

package/src/client/conversations/TranscriptTurnContextView.tsx

@@ -1,4 +1,5 @@
-import { Brain, Braces, ChevronRight, Layers } from "lucide-react";
+import type { ActorIdentity } from "@sentry/junior/api/schema";
+import { Layers } from "lucide-react";
 import {
   createContext,
   useContext,
@@ -7,10 +8,12 @@ import {
   type ReactNode,
 } from "react";
 import { createPortal } from "react-dom";
+import { Link } from "react-router";
 
+import { ActorAvatar } from "../components/ActorAvatar";
 import { DetailsPanel } from "../components/DetailsPanel";
+import { participantName } from "../components/ParticipantAvatarStack";
 import { Button } from "../components/ui/button";
-import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import { Drawer } from "../components/Drawer";
 import {
   Tooltip,
@@ -18,18 +21,26 @@ import {
   TooltipTrigger,
 } from "../components/ui/tooltip";
 import type { TranscriptViewTurnContext } from "../types";
-import { formatMessageTimestamp, formatTime } from "../format";
-import { memoryRecallContent, type MemoryRecallContent } from "./turnContext";
-import { cn, dashboardDisclosureChevronClass } from "../styles";
+import { formatMessageTimestamp, memoryPath, peoplePath } from "../format";
+import {
+  memoryRecallContent,
+  userCustomizationContent,
+  type MemoryRecallContent,
+} from "./turnContext";
+import { cn } from "../styles";
+import { DetailsCard } from "./DetailsList";
 import { HighlightText } from "./transcriptSearch";
-import { TranscriptSummaryTrigger } from "./TranscriptSummary";
 
-/** The turn context that a page panel shows, keyed by its message. */
-export type TurnContextSelection = {
+/** What one turn context view shows: who spoke, when, and the context. */
+export type TurnContext = {
+  actor?: ActorIdentity;
   contexts: TranscriptViewTurnContext[];
-  id: string;
+  timestamp?: number;
 };
 
+/** The turn context that a page panel shows, keyed by its message. */
+export type TurnContextSelection = TurnContext & { id: string };
+
 /** Let the page that owns a panel show turn context there. */
 export type TurnContextPanel = {
   openId?: string;
@@ -61,10 +72,9 @@ export function TurnContextPanelProvider(props: {
  * 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;
-}) {
+export function TranscriptTurnContextView(
+  props: TurnContext & { messageId?: string },
+) {
   const panel = useContext(TurnContextPanelContext);
   const [open, setOpen] = useState(false);
   const instanceId = useId();
@@ -90,7 +100,12 @@ export function TranscriptTurnContextView(props: {
               data-turn-context-id={id}
               onClick={() => {
                 if (!panel) return setOpen(true);
-                panel.onToggle({ contexts: props.contexts, id });
+                panel.onToggle({
+                  actor: props.actor,
+                  contexts: props.contexts,
+                  id,
+                  timestamp: props.timestamp,
+                });
               }}
               size="icon"
             >
@@ -117,7 +132,11 @@ export function TranscriptTurnContextView(props: {
               openKey={instanceId}
               titleId={instanceId}
             >
-              <TurnContextList contexts={props.contexts} />
+              <TurnContextBody
+                actor={props.actor}
+                contexts={props.contexts}
+                timestamp={props.timestamp}
+              />
             </Drawer>,
             document.body,
           )
@@ -127,10 +146,7 @@ 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;
-}) {
+export function TurnContextDetails(props: TurnContext & { onClose(): void }) {
   return (
     <DetailsPanel
       label="Turn context"
@@ -141,151 +157,133 @@ export function TurnContextDetails(props: {
         </h2>
       }
     >
-      <div className="px-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
-        <TurnContextList contexts={props.contexts} />
+      <div className="p-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
+        <TurnContextBody
+          actor={props.actor}
+          contexts={props.contexts}
+          timestamp={props.timestamp}
+        />
       </div>
     </DetailsPanel>
   );
 }
 
-function TurnContextList(props: { contexts: TranscriptViewTurnContext[] }) {
-  return props.contexts.map((context, index) => (
-    <TurnContext
-      context={context}
-      key={`${context.pluginName}:${context.kind}:${context.version}:${index}`}
-    />
-  ));
+/** Show who spoke, then their customization, then plugin context. */
+function TurnContextBody(props: TurnContext) {
+  const contexts = [...props.contexts].sort(
+    (a, b) =>
+      Number(Boolean(userCustomizationContent(b))) -
+      Number(Boolean(userCustomizationContent(a))),
+  );
+  return (
+    <div className="grid min-w-0 gap-3">
+      {props.actor ? (
+        <TurnContextActor actor={props.actor} timestamp={props.timestamp} />
+      ) : null}
+      {contexts.map((context, index) => (
+        <TurnContextCard
+          context={context}
+          key={`${context.pluginName}:${context.kind}:${context.version}:${index}`}
+        />
+      ))}
+    </div>
+  );
 }
 
-function TurnContext(props: { context: TranscriptViewTurnContext }) {
-  const memory = memoryRecallContent(props.context);
-
+function TurnContextActor(props: { actor: ActorIdentity; timestamp?: number }) {
+  const name = participantName(props.actor);
+  const email = props.actor.email?.trim();
+  const handle = props.actor.slackUserName?.trim();
+  const meta = [
+    email && email !== name ? email : undefined,
+    handle && handle !== name ? `@${handle}` : undefined,
+  ].filter(Boolean);
   return (
-    <section className="border-b border-dashboard-border-strong py-5 last:border-b-0">
-      <div className="mb-4 flex items-start justify-between gap-4">
-        <div className="flex min-w-0 items-center gap-2.5">
-          {memory ? (
-            <Brain
-              aria-hidden="true"
-              className="shrink-0 text-dashboard-accent-text/60"
-              size={15}
-            />
+    <section
+      aria-label="Speaker"
+      className="flex min-w-0 items-center gap-3 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel p-3"
+    >
+      <ActorAvatar name={name} size="detail" />
+      <div className="min-w-0 flex-1">
+        <div className="flex min-w-0 items-baseline justify-between gap-3">
+          {email ? (
+            <Link
+              className="min-w-0 truncate text-sm font-medium text-dashboard-text no-underline hover:underline"
+              to={peoplePath(email)}
+            >
+              {name}
+            </Link>
           ) : (
-            <Braces
-              aria-hidden="true"
-              className="shrink-0 text-dashboard-accent-text/60"
-              size={15}
-            />
+            <span className="min-w-0 truncate text-sm font-medium text-dashboard-text">
+              {name}
+            </span>
           )}
-          <h3 className="m-0 truncate text-sm font-semibold text-dashboard-text">
-            {memory ? "Recalled memories" : props.context.pluginName}
-          </h3>
+          {props.timestamp !== undefined ? (
+            <time
+              className="shrink-0 text-xs tabular-nums text-dashboard-text-muted"
+              dateTime={new Date(props.timestamp).toISOString()}
+            >
+              {formatMessageTimestamp(props.timestamp, true)}
+            </time>
+          ) : null}
         </div>
-        <span className="shrink-0 text-xs text-dashboard-text-muted">
-          {props.context.kind} · v{props.context.version}
-        </span>
+        {meta.length ? (
+          <p
+            className="m-0 mt-0.5 truncate text-xs text-dashboard-text-muted"
+            title={props.actor.slackUserId}
+          >
+            {meta.join(" · ")}
+          </p>
+        ) : null}
       </div>
-
-      {memory ? (
-        <MemoryRecall
-          loadedAt={props.context.loadedAt}
-          memories={memory.memories}
-        />
-      ) : (
-        <GenericContext context={props.context} />
-      )}
     </section>
   );
 }
 
-function MemoryRecall(props: {
-  loadedAt: string;
-  memories: MemoryRecallContent["memories"];
-}) {
+function TurnContextCard(props: { context: TranscriptViewTurnContext }) {
+  const memory = memoryRecallContent(props.context);
+  if (memory) {
+    return (
+      <DetailsCard count={memory.memories.length} title="Recalled memories">
+        <MemoryRecall memories={memory.memories} />
+      </DetailsCard>
+    );
+  }
+  const customization = userCustomizationContent(props.context);
+  if (customization) {
+    return (
+      <DetailsCard title="User customization">
+        <p className="m-0 whitespace-pre-wrap text-sm leading-relaxed text-dashboard-text">
+          <HighlightText text={customization.text} />
+        </p>
+      </DetailsCard>
+    );
+  }
   return (
-    <div className="overflow-hidden rounded-lg border border-dashboard-border-strong">
-      {props.memories.map((memory, index) => (
-        <Collapsible
-          className="border-t border-dashboard-border-strong first:border-t-0"
-          key={memory.id}
-        >
-          <TranscriptSummaryTrigger className="group flex items-start gap-2.5">
-            <ChevronRight
-              aria-hidden="true"
-              className={cn(
-                dashboardDisclosureChevronClass,
-                "mt-0.5 text-dashboard-text-muted",
-              )}
-            />
-            <span className="min-w-0 flex-1">
-              <span className="flex items-center justify-between gap-3">
-                <span className="text-xs font-medium text-dashboard-text-muted">
-                  Memory {index + 1}
-                </span>
-                <span className="shrink-0 text-xs text-dashboard-text-muted">
-                  {memory.kind} · {memory.scope}
-                </span>
-              </span>
-              <span className="mt-1 block truncate text-sm text-dashboard-text-muted">
-                <HighlightText text={memory.content} />
-              </span>
-            </span>
-          </TranscriptSummaryTrigger>
-
-          <CollapsibleContent hiddenUntilFound>
-            <div className="border-t border-dashboard-border bg-dashboard-fill-faint px-4 py-4">
-              <div className="whitespace-pre-wrap text-sm leading-6 text-dashboard-text">
-                <HighlightText text={memory.content} />
-              </div>
-
-              <dl className="mt-4 grid gap-2 text-xs">
-                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                  <dt className="text-dashboard-text-muted">Memory ID</dt>
-                  <dd className="m-0 break-all font-mono text-dashboard-text-muted">
-                    <HighlightText text={memory.id} />
-                  </dd>
-                </div>
-                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                  <dt className="text-dashboard-text-muted">Observed</dt>
-                  <dd className="m-0 text-dashboard-text-muted">
-                    {formatTime(new Date(memory.observedAtMs).toISOString())}
-                  </dd>
-                </div>
-                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                  <dt className="text-dashboard-text-muted">Scope</dt>
-                  <dd className="m-0 text-dashboard-text-muted">
-                    {memory.scope}
-                  </dd>
-                </div>
-                <div className="grid grid-cols-[5rem_minmax(0,1fr)] items-start gap-3">
-                  <dt className="text-dashboard-text-muted">Kind</dt>
-                  <dd className="m-0 text-dashboard-text-muted">
-                    {memory.kind}
-                  </dd>
-                </div>
-              </dl>
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
-      ))}
-      <p className="m-0 border-t border-dashboard-border-strong px-3 py-2 text-xs text-dashboard-text-muted">
-        {props.memories.length}{" "}
-        {props.memories.length === 1 ? "memory" : "memories"} · Loaded{" "}
-        {formatMessageTimestamp(Date.parse(props.loadedAt))}
-      </p>
-    </div>
+    <DetailsCard
+      title={`${props.context.pluginName} · ${props.context.kind} v${props.context.version}`}
+    >
+      <pre className="m-0 overflow-x-auto whitespace-pre-wrap break-words font-mono text-xs leading-relaxed">
+        <HighlightText text={JSON.stringify(props.context.content, null, 2)} />
+      </pre>
+    </DetailsCard>
   );
 }
 
-function GenericContext(props: { context: TranscriptViewTurnContext }) {
+// Each row links to the memory's page, which shows its details.
+function MemoryRecall(props: { memories: MemoryRecallContent["memories"] }) {
   return (
-    <div>
-      <pre className="m-0 overflow-x-auto whitespace-pre-wrap break-words rounded-lg bg-dashboard-fill-soft p-3 text-xs leading-relaxed text-dashboard-text-muted">
-        <HighlightText text={JSON.stringify(props.context.content, null, 2)} />
-      </pre>
-      <p className="m-0 mt-3 text-xs text-dashboard-text-muted">
-        Loaded {formatMessageTimestamp(Date.parse(props.context.loadedAt))}
-      </p>
-    </div>
+    <ul className="-mx-1.5 -mb-1.5 -mt-1 grid list-none gap-0.5 p-0">
+      {props.memories.map((memory) => (
+        <li key={memory.id}>
+          <Link
+            className="line-clamp-2 rounded-md px-1.5 py-1.5 text-sm leading-5 text-dashboard-text no-underline transition-colors hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+            to={memoryPath(memory.id)}
+          >
+            <HighlightText text={memory.content} />
+          </Link>
+        </li>
+      ))}
+    </ul>
   );
 }

package/src/client/conversations/turnContext.ts

@@ -33,3 +33,18 @@ export function memoryRecallContent(context: TranscriptViewTurnContext) {
   const parsed = memoryRecallContentSchema.safeParse(context.content);
   return parsed.success ? parsed.data : undefined;
 }
+
+const userCustomizationContentSchema = z.object({ text: z.string() }).strict();
+
+/** Parse the saved user customization that the runtime added to one Turn. */
+export function userCustomizationContent(context: TranscriptViewTurnContext) {
+  if (
+    context.pluginName !== "junior" ||
+    context.kind !== "user_customization" ||
+    context.version !== 1
+  ) {
+    return undefined;
+  }
+  const parsed = userCustomizationContentSchema.safeParse(context.content);
+  return parsed.success ? parsed.data : undefined;
+}

package/src/client/format.ts

@@ -19,8 +19,8 @@ import { getDashboardAgentName } from "./agentName";
 import { formatDuration } from "./components/Duration";
 import { conversationTranscriptMessages } from "./conversations/eventTranscript";
 
-/** Detect the viewer's own local timezone as the default display timezone. */
-function browserTimeZone(): string {
+/** Read the viewer's own browser timezone, used for absolute timestamps and charts. */
+export function getDashboardTimeZone(): string {
   try {
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
   } catch {
@@ -28,22 +28,6 @@ function browserTimeZone(): string {
   }
 }
 
-let dashboardTimeZone = browserTimeZone();
-
-/** Apply an operator-configured timezone override from the config API, if any. Otherwise the viewer's own browser timezone is used. */
-export function setDashboardTimeZone(timeZone: string | undefined): void {
-  dashboardTimeZone = timeZone || browserTimeZone();
-}
-
-/** Read the dashboard display timezone used for absolute timestamps and charts. */
-export function getDashboardTimeZone(): string {
-  return dashboardTimeZone;
-}
-
-function displayTimeZone(): string {
-  return dashboardTimeZone;
-}
-
 function isActiveSummary(summary: ConversationSummaryReport): boolean {
   return summary.status === "active";
 }
@@ -69,7 +53,7 @@ function parseTime(value: string | undefined): number | null {
   return Number.isFinite(time) ? time : null;
 }
 
-/** Format absolute dashboard timestamps in the configured display timezone. */
+/** Format absolute dashboard timestamps in the viewer's browser timezone. */
 export function formatTime(
   value: string | undefined,
   options?: Intl.DateTimeFormatOptions,
@@ -78,7 +62,7 @@ export function formatTime(
   if (time == null) return "none";
   return new Date(time).toLocaleString(undefined, {
     ...options,
-    timeZone: displayTimeZone(),
+    timeZone: getDashboardTimeZone(),
   });
 }
 
@@ -166,10 +150,10 @@ export function formatMessageTimestamp(
     ? date.toLocaleString(undefined, {
         dateStyle: "medium",
         timeStyle: "medium",
-        timeZone: displayTimeZone(),
+        timeZone: getDashboardTimeZone(),
       })
     : date.toLocaleTimeString(undefined, {
-        timeZone: displayTimeZone(),
+        timeZone: getDashboardTimeZone(),
       });
 }
 
@@ -210,7 +194,7 @@ export function formatTranscriptTimestampDetails(value: number): {
   return {
     local: date.toLocaleString(undefined, {
       ...options,
-      timeZone: displayTimeZone(),
+      timeZone: getDashboardTimeZone(),
     }),
     utc: date.toLocaleString(undefined, { ...options, timeZone: "UTC" }),
   };
@@ -360,6 +344,21 @@ export type MessageSummary = {
   total: number;
 };
 
+/**
+ * Return the person who wrote one transcript user message. Child agent input
+ * has no person. Other messages fall back to the conversation actor.
+ */
+export function transcriptMessageActor(
+  conversation: ConversationTranscript,
+  message: TranscriptViewMessage,
+): ActorIdentity | undefined {
+  if (transcriptRoleKind(message.role) !== "user") return undefined;
+  if (message.agentInvocationId) return undefined;
+  if (actorLabel(message.actorIdentity)) return message.actorIdentity;
+  if (actorLabel(conversation.actorIdentity)) return conversation.actorIdentity;
+  return undefined;
+}
+
 /** Return the best available actor label for one transcript message. */
 export function transcriptMessageActorLabel(
   conversation: ConversationTranscript,
@@ -371,11 +370,7 @@ export function transcriptMessageActorLabel(
     // The conversation actor started the child agent but did not write its
     // input, so do not fall back to that actor here.
     if (message.agentInvocationId) return "Agent invocation";
-    return (
-      actorLabel(message.actorIdentity) ??
-      actorLabel(conversation.actorIdentity) ??
-      "User"
-    );
+    return actorLabel(transcriptMessageActor(conversation, message)) ?? "User";
   }
   if (kind === "system") return "System";
   if (kind === "tool") return "Tool";
@@ -786,6 +781,11 @@ export function peoplePath(email: string): string {
   return `/people/${encodeURIComponent(email)}`;
 }
 
+/** Build the dashboard route for one memory's details. */
+export function memoryPath(memoryId: string): string {
+  return `/memories/${encodeURIComponent(memoryId)}`;
+}
+
 /** Build the canonical detail route for a persisted public location. */
 export function locationPath(locationId: string): string {
   return `/system/locations/${encodeURIComponent(locationId)}`;