@sentry/junior-dashboard 0.266.0 → 0.268.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

@@ -1,11 +1,15 @@
 import { ForkConversationButton } from "./ForkConversationButton";
-import { TranscriptAttachments } from "./TranscriptAttachment";
+import {
+  TranscriptAttachments,
+  TranscriptLocalImages,
+} from "./TranscriptAttachment";
 import { ObjectCard } from "./ObjectCard";
 import { AutomationCard } from "../components/AutomationCard";
 import { memo, type ReactNode } from "react";
 
 import {
   formatMessageTimestamp,
+  transcriptMessageActor,
   transcriptMessageActorLabel,
   transcriptRoleKind,
 } from "../format";
@@ -69,6 +73,9 @@ export const TranscriptMessageView = memo(
             conversationId={props.conversation.conversationId}
           />
         ) : null}
+        {props.message.images?.length ? (
+          <TranscriptLocalImages images={props.message.images} />
+        ) : null}
         {props.message.cards?.map((card) => {
           switch (card.kind) {
             case "object":
@@ -124,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/TranscriptSummary.tsx

@@ -1,37 +1,12 @@
-import type { ComponentProps, ComponentPropsWithoutRef } from "react";
+import type { ComponentProps } from "react";
 
 import { CollapsibleTrigger } from "../components/ui/collapsible";
 import { cn } from "../styles";
 
-const summaryClass =
-  "cursor-pointer rounded-md px-2 py-1.5 transition-colors hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus";
-
-/** Keep hover and keyboard focus around a padded transcript cell. */
-export function TranscriptSummary({
-  className,
-  flush = false,
-  ...props
-}: ComponentPropsWithoutRef<"summary"> & {
-  /** Extend padding around text that already sits on the transcript edge. */
-  flush?: boolean;
-}) {
-  return (
-    <summary
-      {...props}
-      className={cn(
-        summaryClass,
-        "list-none [&::-webkit-details-marker]:hidden",
-        flush && "-mx-2 -my-1.5",
-        className,
-      )}
-    />
-  );
-}
-
 /**
- * Give a `Collapsible` trigger the same padding, hover, and focus as
- * `TranscriptSummary`. The caller sets the display. Put only inline elements,
- * such as `span`, inside the trigger.
+ * Give a `Collapsible` trigger the padding, hover, and keyboard focus of a
+ * transcript disclosure. The caller sets the display. Put only inline
+ * elements, such as `span`, inside the trigger.
  */
 export function TranscriptSummaryTrigger({
   className,
@@ -46,8 +21,7 @@ export function TranscriptSummaryTrigger({
     <CollapsibleTrigger
       {...props}
       className={cn(
-        summaryClass,
-        "text-left disabled:cursor-default disabled:hover:bg-transparent",
+        "cursor-pointer rounded-md px-2 py-1.5 text-left transition-colors 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",
         flush ? "-mx-2 -my-1.5 w-[calc(100%+1rem)]" : "w-full",
         className,
       )}

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,23 +8,39 @@ 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 { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
+import { participantName } from "../components/ParticipantAvatarStack";
+import { Button } from "../components/ui/button";
 import { Drawer } from "../components/Drawer";
+import {
+  Tooltip,
+  TooltipContent,
+  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;
@@ -55,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();
@@ -67,24 +83,38 @@ export function TranscriptTurnContextView(props: {
 
   return (
     <>
-      <button
-        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",
-          expanded && "bg-dashboard-fill-hover text-dashboard-text",
-        )}
-        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>
+      <Tooltip>
+        <TooltipTrigger
+          // The open panel keeps focus here. Close the tooltip on click so
+          // Escape reaches the panel.
+          closeOnClick
+          render={
+            <Button
+              aria-haspopup={panel ? undefined : "dialog"}
+              aria-expanded={expanded}
+              aria-label="View turn context"
+              className={cn(
+                "size-6 shrink-0",
+                expanded && "bg-dashboard-fill-strong text-dashboard-text",
+              )}
+              data-turn-context-id={id}
+              onClick={() => {
+                if (!panel) return setOpen(true);
+                panel.onToggle({
+                  actor: props.actor,
+                  contexts: props.contexts,
+                  id,
+                  timestamp: props.timestamp,
+                });
+              }}
+              size="icon"
+            >
+              <Layers aria-hidden="true" size={14} strokeWidth={1.8} />
+            </Button>
+          }
+        />
+        <TooltipContent size="compact">View turn context</TooltipContent>
+      </Tooltip>
 
       {!panel && open
         ? createPortal(
@@ -102,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,
           )
@@ -112,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"
@@ -126,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/TranscriptView.tsx

@@ -1,10 +1,12 @@
 import { useState } from "react";
+import type { ConversationMailboxMessage } from "./conversationOutbox";
 import { ArrowDownToLine } from "lucide-react";
 
 import type {
   ConversationTranscript,
   TranscriptViewSubagentPart,
 } from "../types";
+import { EmptyTelemetry } from "../components/EmptyTelemetry";
 import { Button } from "../components/ui/button";
 import {
   Tooltip,
@@ -20,7 +22,6 @@ import {
   usePinnedTranscriptBottom,
 } from "./transcriptBottomPinning";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
-import { transcriptEmptyClass } from "./transcriptStyles";
 import { TranscriptSearchProvider } from "./transcriptSearch";
 import {
   TurnContextPanelProvider,
@@ -37,6 +38,8 @@ export function Transcript(props: {
   pinRequestVersion?: number;
   onLoadPreviousPage?: () => void;
   onSelectedEventSeqChange?(seq: number | undefined): void;
+  /** The reader's own sends to show at the end until history has them. */
+  pendingMessages?: readonly ConversationMailboxMessage[];
   responding?: boolean;
   search?: string;
   onSearchChange?(value: string): void;
@@ -86,9 +89,9 @@ export function Transcript(props: {
 
   if (!props.transcript) {
     return (
-      <div className={transcriptEmptyClass()}>
+      <EmptyTelemetry>
         No transcript is available for this conversation.
-      </div>
+      </EmptyTelemetry>
     );
   }
 
@@ -139,6 +142,7 @@ export function Transcript(props: {
             <ConversationTranscriptView
               onOpenSubagentTranscript={props.onOpenSubagentTranscript}
               conversation={props.transcript}
+              pendingMessages={props.pendingMessages}
               responding={props.responding ?? props.live ?? false}
             />
           </TurnContextPanelProvider>

package/src/client/conversations/UserInputRequestCard.tsx

@@ -0,0 +1,39 @@
+import { formatUserInputAnswer } from "@sentry/junior/api/schema";
+
+import { UserInputForm } from "../components/UserInputForm";
+import { TranscriptText } from "./TranscriptText";
+import type { OpenUserInputRequest } from "./userInputRequest";
+
+/**
+ * Show Junior's open request above the composer. The answer goes as the
+ * reader's next message. Typing a reply also answers it.
+ */
+export function UserInputRequestCard(props: {
+  onAnswer(answer: string): Promise<void>;
+  request: OpenUserInputRequest;
+}) {
+  return (
+    <section
+      aria-label="Junior asks"
+      className="mb-2 rounded-lg border border-cyan-300/20 bg-cyan-300/[0.07] px-3 py-2.5 font-sans text-sm text-dashboard-text"
+    >
+      <div className="max-h-48 overflow-y-auto">
+        <TranscriptText
+          mentions={[]}
+          role="assistant"
+          text={props.request.question}
+        />
+      </div>
+      {/* Above the composer, a long form scrolls so the transcript stays visible. */}
+      <div className="max-h-96 overflow-y-auto">
+        <UserInputForm
+          onSubmit={(answer) =>
+            props.onAnswer(formatUserInputAnswer(props.request, answer))
+          }
+          request={props.request}
+          requestId={props.request.toolCallId}
+        />
+      </div>
+    </section>
+  );
+}