@sentry/junior-dashboard 0.266.0 → 0.267.0

package/src/client/conversations/TranscriptMessageView.tsx

@@ -1,5 +1,8 @@
 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";
@@ -69,6 +72,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":

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/TranscriptTurnContextView.tsx

@@ -9,8 +9,14 @@ import {
 import { createPortal } from "react-dom";
 
 import { DetailsPanel } from "../components/DetailsPanel";
+import { Button } from "../components/ui/button";
 import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 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";
@@ -67,24 +73,33 @@ 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({ contexts: props.contexts, id });
+              }}
+              size="icon"
+            >
+              <Layers aria-hidden="true" size={14} strokeWidth={1.8} />
+            </Button>
+          }
+        />
+        <TooltipContent size="compact">View turn context</TooltipContent>
+      </Tooltip>
 
       {!panel && open
         ? createPortal(

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,244 @@
+import { useId, useRef, useState, type FormEvent } from "react";
+import {
+  buttonUserInputField,
+  formatUserInputAnswer,
+  isEmptyUserInputAnswer,
+  normalizeUserInputAnswer,
+  type UserInputAnswer,
+  type UserInputField,
+} from "@sentry/junior/api/schema";
+
+import { Button } from "../components/ui/button";
+import { Textarea } from "../components/ui/textarea";
+import { TranscriptText } from "./TranscriptText";
+import type { OpenUserInputRequest } from "./userInputRequest";
+
+const labelClass = "font-sans text-xs font-medium text-dashboard-text-muted";
+
+function ChoiceField(props: {
+  disabled: boolean;
+  field: Extract<UserInputField, { kind: "choice" | "multi_choice" }>;
+  onChange(values: string[]): void;
+  values: string[];
+}) {
+  const name = useId();
+  const multi = props.field.kind === "multi_choice";
+  return (
+    <fieldset className="m-0 min-w-0 border-0 p-0">
+      <legend className={labelClass}>{props.field.label}</legend>
+      {props.field.description ? (
+        <p className="m-0 text-xs text-dashboard-text-muted">
+          {props.field.description}
+        </p>
+      ) : null}
+      <div className="mt-1 grid gap-1">
+        {props.field.options.map((option) => (
+          <label
+            className="flex cursor-pointer items-start gap-2 text-sm"
+            key={option.label}
+          >
+            <input
+              checked={props.values.includes(option.label)}
+              className="mt-0.5 size-4 shrink-0 accent-dashboard-focus"
+              disabled={props.disabled}
+              name={name}
+              onChange={() =>
+                props.onChange(
+                  !multi
+                    ? [option.label]
+                    : props.values.includes(option.label)
+                      ? props.values.filter((value) => value !== option.label)
+                      : [...props.values, option.label],
+                )
+              }
+              type={multi ? "checkbox" : "radio"}
+            />
+            <span className="min-w-0 break-words">
+              {option.label}
+              {option.description ? (
+                <span className="block text-xs text-dashboard-text-muted">
+                  {option.description}
+                </span>
+              ) : null}
+            </span>
+          </label>
+        ))}
+      </div>
+    </fieldset>
+  );
+}
+
+function TextField(props: {
+  description?: string;
+  disabled: boolean;
+  label: string;
+  onChange(value: string): void;
+  value: string;
+}) {
+  const id = useId();
+  return (
+    <div className="grid gap-1">
+      <label className={labelClass} htmlFor={id}>
+        {props.label}
+      </label>
+      {props.description ? (
+        <p className="m-0 text-xs text-dashboard-text-muted">
+          {props.description}
+        </p>
+      ) : null}
+      <Textarea
+        className="min-h-16 leading-relaxed"
+        disabled={props.disabled}
+        id={id}
+        onChange={(event) => props.onChange(event.target.value)}
+        value={props.value}
+      />
+    </div>
+  );
+}
+
+/**
+ * Show Junior's open request above the composer. A request with one short
+ * choice field shows one button per choice, and a click is the answer. Other
+ * requests show a form that the reader submits once. Both send the formatted
+ * answer as the reader's next message. Typing a reply also answers it.
+ */
+export function UserInputRequestCard(props: {
+  onAnswer(answer: string): Promise<void>;
+  request: OpenUserInputRequest;
+}) {
+  const [sending, setSending] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [values, setValues] = useState<Record<string, string[]>>({});
+  const [other, setOther] = useState("");
+  const buttonField = buttonUserInputField(props.request);
+
+  // A ref blocks a second click before React renders the disabled controls.
+  // The lock stays after a sent answer; only a failed send can retry.
+  const sendLock = useRef(false);
+
+  async function send(answer: UserInputAnswer) {
+    if (sendLock.current) return;
+    sendLock.current = true;
+    setSending(true);
+    setFailed(false);
+    try {
+      await props.onAnswer(formatUserInputAnswer(props.request, answer));
+    } catch {
+      sendLock.current = false;
+      setSending(false);
+      setFailed(true);
+    }
+  }
+
+  const answer: UserInputAnswer = {
+    other,
+    requestId: props.request.toolCallId,
+    values,
+  };
+  function submit(event: FormEvent) {
+    event.preventDefault();
+    if (
+      !isEmptyUserInputAnswer(normalizeUserInputAnswer(props.request, answer))
+    ) {
+      void send(answer);
+    }
+  }
+
+  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>
+      {buttonField ? (
+        <>
+          <div className="mt-2 flex flex-wrap gap-2">
+            {buttonField.options.map((option) => (
+              <Button
+                disabled={sending}
+                key={option.label}
+                onClick={() =>
+                  void send({
+                    requestId: props.request.toolCallId,
+                    values: { [buttonField.id]: [option.label] },
+                  })
+                }
+                title={option.description}
+              >
+                {option.label}
+              </Button>
+            ))}
+          </div>
+          {buttonField.options.some((option) => option.description) ? (
+            <ul className="mb-0 mt-2 list-none p-0 text-xs text-dashboard-text-muted">
+              {buttonField.options
+                .filter((option) => option.description)
+                .map((option) => (
+                  <li key={option.label}>
+                    <span className="font-medium text-dashboard-text">
+                      {option.label}
+                    </span>
+                    : {option.description}
+                  </li>
+                ))}
+            </ul>
+          ) : null}
+        </>
+      ) : (
+        <form
+          className="mt-2 grid max-h-96 gap-3 overflow-y-auto"
+          onSubmit={submit}
+        >
+          {props.request.fields.map((field) =>
+            field.kind === "text" ? (
+              <TextField
+                description={field.description}
+                disabled={sending}
+                key={field.id}
+                label={field.label}
+                onChange={(value) =>
+                  setValues((current) => ({ ...current, [field.id]: [value] }))
+                }
+                value={values[field.id]?.[0] ?? ""}
+              />
+            ) : (
+              <ChoiceField
+                disabled={sending}
+                field={field}
+                key={field.id}
+                onChange={(picked) =>
+                  setValues((current) => ({ ...current, [field.id]: picked }))
+                }
+                values={values[field.id] ?? []}
+              />
+            ),
+          )}
+          <TextField
+            description="Anything else, or an answer that is not listed."
+            disabled={sending}
+            label="Other"
+            onChange={setOther}
+            value={other}
+          />
+          <div>
+            <Button disabled={sending} type="submit" variant="primary">
+              Send
+            </Button>
+          </div>
+        </form>
+      )}
+      {failed ? (
+        <p className="mb-0 mt-2 text-xs text-rose-300" role="alert">
+          Could not send your answer. Try again.
+        </p>
+      ) : null}
+    </section>
+  );
+}

package/src/client/conversations/conversationOutbox.ts

@@ -9,6 +9,11 @@ export type ConversationOutboxMessage = {
   actorIdentity?: ActorIdentity;
   createdAt: string;
   idempotencyKey: string;
+  /**
+   * Sent while Junior was idle and the queue was empty. The transcript shows
+   * the row in place, so it does not pass through the queue first.
+   */
+  inline?: boolean;
   message: string;
   images?: InputImage[];
   messageId: string;
@@ -31,6 +36,7 @@ export function conversationOutboxQueryKey(conversationId: string | undefined) {
 export function conversationOutboxMessageForSubmit(input: {
   actorIdentity?: ActorIdentity;
   idempotencyKey: string;
+  inline?: boolean;
   message: string;
   images?: InputImage[];
   messageId: string;
@@ -41,6 +47,7 @@ export function conversationOutboxMessageForSubmit(input: {
     actorIdentity: input.actorIdentity,
     createdAt,
     idempotencyKey: input.idempotencyKey,
+    ...(input.inline ? { inline: true } : undefined),
     message: input.message,
     ...(input.images?.length ? { images: input.images } : undefined),
     messageId: input.messageId,
@@ -153,6 +160,45 @@ function sameActorIdentity(
   );
 }
 
+/** True while an outbox row belongs in the transcript instead of the queue. */
+export function isInlineOutboxMessage(
+  message: ConversationOutboxMessage,
+): boolean {
+  // A failed send moves to the queue, which owns the retry action.
+  return Boolean(message.inline) && message.status !== "failed";
+}
+
+/**
+ * Split pending rows between the queue and the transcript.
+ *
+ * Inline rows prefer the server copy once the mailbox has it, so attachments
+ * and identity match what the queue would show.
+ */
+export function splitInlineMailboxMessages(
+  merged: readonly ConversationMailboxMessage[],
+  server: readonly ConversationPendingMessage[] | undefined,
+  outbox: readonly ConversationOutboxMessage[],
+): {
+  inline: ConversationMailboxMessage[];
+  queued: ConversationMailboxMessage[];
+} {
+  const inlineRows = outbox.filter(isInlineOutboxMessage);
+  if (inlineRows.length === 0) {
+    return { inline: [], queued: merged as ConversationMailboxMessage[] };
+  }
+  const inlineIds = new Set(inlineRows.map((message) => message.messageId));
+  const serverById = new Map(
+    (server ?? []).map((message) => [message.messageId, message]),
+  );
+  return {
+    inline: inlineRows.map(
+      (message) =>
+        serverById.get(message.messageId) ?? mailboxMessageFromOutbox(message),
+    ),
+    queued: merged.filter((message) => !inlineIds.has(message.messageId)),
+  };
+}
+
 /** Append or replace one outbox row by idempotency key. */
 export function upsertConversationOutboxMessage(
   current: readonly ConversationOutboxMessage[] | undefined,

package/src/client/conversations/eventTime.ts

@@ -28,6 +28,15 @@ export function useEventTime() {
         day: "numeric",
         timeZoneName: "short",
       }),
+      // The details header is narrow, so it leaves out milliseconds.
+      shortTimestamp: new Intl.DateTimeFormat(undefined, {
+        ...clock,
+        fractionalSecondDigits: undefined,
+        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,
@@ -54,7 +63,10 @@ export function useEventTime() {
       return formatters.clock.format(new Date(value));
     },
     formatTimestamp(value: string) {
-      return local ? formatters.timestamp.format(new Date(value)) : value;
+      return formatters.timestamp.format(new Date(value));
+    },
+    formatShortTimestamp(value: string) {
+      return formatters.shortTimestamp.format(new Date(value));
     },
   };
 }

package/src/client/conversations/eventTranscript.ts

@@ -2,6 +2,7 @@ import { resolveMessageCards } from "@sentry/junior/api/schema";
 import type {
   ConversationPendingMessage,
   ConversationReportEvent,
+  InputImage,
 } from "@sentry/junior/api/schema";
 
 import type {
@@ -10,6 +11,11 @@ import type {
   TranscriptViewPart,
 } from "../types";
 
+/** A mailbox row, or a local send that can still carry its own images. */
+type PendingTranscriptInput = ConversationPendingMessage & {
+  images?: InputImage[];
+};
+
 type ToolCall =
   | Extract<
       ConversationReportEvent["data"],
@@ -67,7 +73,7 @@ function historyMessageIds(
 
 /** Project one accepted mailbox row into a pending transcript message. */
 export function pendingTranscriptMessage(
-  message: ConversationPendingMessage,
+  message: PendingTranscriptInput,
   index: number,
 ): TranscriptViewMessage {
   return {
@@ -77,6 +83,7 @@ export function pendingTranscriptMessage(
       ? [{ type: "text", redacted: true }]
       : [{ type: "text", text: message.text ?? "" }],
     ...(message.attachments ? { attachments: message.attachments } : undefined),
+    ...(message.images?.length ? { images: message.images } : undefined),
     pending: true,
     role: "user",
     source: message.source,
@@ -97,7 +104,7 @@ export function pendingTranscriptMessage(
  */
 export function mergePendingTranscriptMessages(
   messages: TranscriptViewMessage[],
-  pending: readonly ConversationPendingMessage[] | undefined,
+  pending: readonly PendingTranscriptInput[] | undefined,
 ): TranscriptViewMessage[] {
   if (!pending?.length) return messages;
   const extras = unresolvedPendingTranscriptMessages(messages, pending);
@@ -112,7 +119,7 @@ export function mergePendingTranscriptMessages(
  */
 export function unresolvedPendingTranscriptMessages(
   messages: readonly TranscriptViewMessage[],
-  pending: readonly ConversationPendingMessage[] | undefined,
+  pending: readonly PendingTranscriptInput[] | undefined,
 ): TranscriptViewMessage[] {
   if (!pending?.length) return [];
   const committedIds = historyMessageIds(messages);
@@ -124,7 +131,7 @@ export function unresolvedPendingTranscriptMessages(
 /** Reduce the ordered reporting event API into dashboard-only transcript rows. */
 export function conversationTranscriptMessages(
   conversation: ConversationTranscript,
-  pendingMessages?: readonly ConversationPendingMessage[],
+  pendingMessages?: readonly PendingTranscriptInput[],
 ): TranscriptViewMessage[] {
   return transcriptMessagesFromEvents(
     conversation.events,
@@ -137,7 +144,7 @@ export function conversationTranscriptMessages(
 export function transcriptMessagesFromEvents(
   events: ConversationReportEvent[],
   annotations: ConversationTranscript["annotations"],
-  pendingMessages?: readonly ConversationPendingMessage[],
+  pendingMessages?: readonly PendingTranscriptInput[],
 ): TranscriptViewMessage[] {
   const replacedToolIds = specialToolIds(events);
   const tools = new Map<