@sentry/junior-dashboard 0.265.0 → 0.267.0

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/eventLog.ts

@@ -111,6 +111,7 @@ export function eventLogTone(data: ConversationReportEventData): string {
   }
   if (
     (data.type === "guardian_action_reviewed" && data.decision === "ask") ||
+    (data.type === "turn_lifecycle" && data.state === "blocked") ||
     (data.type === "subagent" &&
       (data.status === "aborted" || data.status === "blocked"))
   ) {

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<

package/src/client/conversations/queries.ts

@@ -26,6 +26,7 @@ import {
   conversationEventPageSchema,
   conversationPendingMessagesReportSchema,
   forkConversationResponseSchema,
+  steerConversationPendingMessagesResponseSchema,
   stopConversationTurnResponseSchema,
 } from "@sentry/junior/api/schema";
 
@@ -42,8 +43,11 @@ import {
   conversationOutboxMessageForSubmit,
   conversationOutboxQueryKey,
   failConversationOutboxMessage,
+  isInlineOutboxMessage,
   mergeConversationMailboxMessages,
   acceptConversationOutboxMessage,
+  reuseConversationMailboxMessages,
+  splitInlineMailboxMessages,
   upsertConversationOutboxMessage,
   type ConversationMailboxMessage,
   type ConversationOutboxMessage,
@@ -130,6 +134,11 @@ export function usePendingArchiveConversationUpdates() {
   });
 }
 
+// Right after a send, Junior usually reads the message within a few seconds.
+// Poll fast for that window only, then fall back to the normal live interval.
+const FAST_POLL_INTERVAL_MS = 500;
+const FAST_POLL_WINDOW_MS = 6_000;
+
 type ConversationSnapshot = ConversationDetailReport & {
   mailbox?: ConversationPendingMessagesReport;
   detailEtag?: string;
@@ -149,7 +158,11 @@ async function readConversationSnapshot(
 /** Refresh history and mailbox as one visible snapshot, including idle input. */
 export function conversationDetailQueryOptions(
   conversationId: string | undefined,
-  options?: { awaitingMessage?: boolean },
+  options?: {
+    awaitingMessage?: boolean;
+    /** Poll fast until this time so a new send reaches history quickly. */
+    fastPollUntilMs?: number;
+  },
 ) {
   return queryOptions({
     enabled: Boolean(conversationId),
@@ -171,12 +184,14 @@ export function conversationDetailQueryOptions(
       );
     },
     refetchInterval: (query) =>
-      options?.awaitingMessage ||
-      query.state.data?.status === "active" ||
-      Boolean(query.state.data?.mailbox?.messages.length) ||
-      Boolean(query.state.data?.mailbox?.authorization)
-        ? 2_000
-        : 10_000,
+      options?.fastPollUntilMs && Date.now() < options.fastPollUntilMs
+        ? FAST_POLL_INTERVAL_MS
+        : options?.awaitingMessage ||
+            query.state.data?.status === "active" ||
+            Boolean(query.state.data?.mailbox?.messages.length) ||
+            Boolean(query.state.data?.mailbox?.authorization)
+          ? 2_000
+          : 10_000,
     retry: false,
   });
 }
@@ -213,6 +228,8 @@ export function useCreateConversation() {
             ...conversationOutboxMessageForSubmit({
               ...args,
               actorIdentity: outboxActorIdentity(queryClient),
+              // A new Conversation has no Turn or queue yet.
+              inline: true,
               messageId: accepted.messageId,
             }),
             status: "accepted",
@@ -261,6 +278,8 @@ export function useForkConversation(sourceConversationId: string) {
               idempotencyKey: args.idempotencyKey,
               message: args.message,
               actorIdentity: outboxActorIdentity(queryClient),
+              // A new fork has no Turn or queue yet.
+              inline: true,
               messageId: accepted.messageId,
             }),
             status: "accepted",
@@ -278,15 +297,20 @@ export function useAppendConversationMessage(conversationId: string) {
   const queryClient = useQueryClient();
   const outboxQueryKey = conversationOutboxQueryKey(conversationId);
   return useMutation({
-    mutationFn: (args: {
+    mutationFn: ({
+      inline: _inline,
+      ...body
+    }: {
       idempotencyKey: string;
+      /** Show the send in the transcript instead of the queue. */
+      inline?: boolean;
       message: string;
       images?: InputImage[];
     }) =>
       post(
         acceptedConversationMessageSchema,
         `/api/conversations/${encodeURIComponent(conversationId)}/messages`,
-        args,
+        body,
       ),
     onMutate: async (args) => {
       // Use the durable id from the first render. No server read is needed,
@@ -396,6 +420,52 @@ export function useCancelConversationPendingMessages(conversationId: string) {
   });
 }
 
+/** Ask Junior to read the viewer's own queued web messages now. */
+export function useSteerConversationPendingMessages(conversationId: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (args: { inboundMessageIds: string[] }) =>
+      post(
+        steerConversationPendingMessagesResponseSchema,
+        `/api/conversations/${encodeURIComponent(conversationId)}/pending-messages/steer`,
+        args,
+      ),
+    onSuccess: async (result) => {
+      const steered = new Set(result.steeredInboundMessageIds);
+      if (steered.size === 0) return;
+      // A live poll that read the mailbox before the steer would restore
+      // `defer`. Cancel it; onSettled refetches after the write.
+      await queryClient.cancelQueries({
+        exact: true,
+        queryKey: conversationDetailQueryKey(conversationId),
+      });
+      queryClient.setQueryData<ConversationSnapshot>(
+        conversationDetailQueryKey(conversationId),
+        (current) =>
+          current?.mailbox
+            ? {
+                ...current,
+                mailbox: {
+                  ...current.mailbox,
+                  messages: current.mailbox.messages.map((message) =>
+                    steered.has(message.inboundMessageId)
+                      ? { ...message, delivery: "interrupt" as const }
+                      : message,
+                  ),
+                },
+              }
+            : current,
+      );
+    },
+    onSettled: async () => {
+      await queryClient.invalidateQueries({
+        exact: true,
+        queryKey: conversationDetailQueryKey(conversationId),
+      });
+    },
+  });
+}
+
 /**
  * Local cache of queued rows that a stop removed. The worker drops them only
  * when it observes the stop, so the mailbox can still list them for a while.
@@ -627,11 +697,20 @@ export function useConversationData(conversationId: string | undefined) {
     staleTime: Infinity,
     gcTime: Infinity,
   });
-  const awaitingMessage = outbox.data.some(
+  const awaitingRows = outbox.data.filter(
     (message) => message.status !== "failed",
   );
+  const latestSendAtMs = Math.max(
+    0,
+    ...awaitingRows.map((message) => Date.parse(message.createdAt)),
+  );
   const detail = useQuery(
-    conversationDetailQueryOptions(conversationId, { awaitingMessage }),
+    conversationDetailQueryOptions(conversationId, {
+      awaitingMessage: awaitingRows.length > 0,
+      fastPollUntilMs: latestSendAtMs
+        ? latestSendAtMs + FAST_POLL_WINDOW_MS
+        : undefined,
+    }),
   );
   // Defer the whole server snapshot, not history alone. Queue removal and the
   // matching transcript must paint together while composer input stays urgent.
@@ -647,17 +726,23 @@ export function useConversationData(conversationId: string | undefined) {
   // contains its real Message id. History and mailbox arrive in one render.
   useEffect(() => {
     if (!mailbox || !detailData) return;
-    const observedIds = new Set(
+    const queuedIds = new Set(
       mailbox.messages.map((message) => message.messageId),
     );
+    const historyIds = new Set<string>();
     for (const event of detailData.events) {
-      if (event.data.type === "message") observedIds.add(event.data.messageId);
+      if (event.data.type === "message") historyIds.add(event.data.messageId);
     }
     queryClient.setQueryData<ConversationOutboxMessage[]>(
       conversationOutboxQueryKey(conversationId),
       (current) => {
+        // An inline row stays until history has it. The mailbox copy alone
+        // would put it back in the queue.
         const next = current?.filter(
-          (message) => !observedIds.has(message.messageId),
+          (message) =>
+            !historyIds.has(message.messageId) &&
+            (isInlineOutboxMessage(message) ||
+              !queuedIds.has(message.messageId)),
         );
         return next?.length === current?.length ? current : next;
       },
@@ -727,23 +812,37 @@ export function useConversationData(conversationId: string | undefined) {
   const pendingMessagesRef = useRef<ConversationMailboxMessage[] | undefined>(
     undefined,
   );
-  const pendingMessages = useMemo(() => {
+  const inlineMessagesRef = useRef<ConversationMailboxMessage[] | undefined>(
+    undefined,
+  );
+  const { inlineMessages, pendingMessages } = useMemo(() => {
     // Hide stopped rows from both sources, or the outbox copy of a stopped
     // send would look unseen and come back.
     const stopped = stoppedMessageIds.data;
-    const next = mergeConversationMailboxMessages(
-      stopped.length
-        ? mailbox?.messages.filter(
-            (message) => !stopped.includes(message.inboundMessageId),
-          )
-        : mailbox?.messages,
-      stopped.length
-        ? outbox.data.filter((message) => !stopped.includes(message.messageId))
-        : outbox.data,
+    const server = stopped.length
+      ? mailbox?.messages.filter(
+          (message) => !stopped.includes(message.inboundMessageId),
+        )
+      : mailbox?.messages;
+    const local = stopped.length
+      ? outbox.data.filter((message) => !stopped.includes(message.messageId))
+      : outbox.data;
+    const split = splitInlineMailboxMessages(
+      mergeConversationMailboxMessages(server, local),
+      server,
+      local,
+    );
+    const queued = reuseConversationMailboxMessages(
       pendingMessagesRef.current,
+      split.queued,
+    );
+    const inline = reuseConversationMailboxMessages(
+      inlineMessagesRef.current,
+      split.inline,
     );
-    pendingMessagesRef.current = next;
-    return next;
+    pendingMessagesRef.current = queued;
+    inlineMessagesRef.current = inline;
+    return { inlineMessages: inline, pendingMessages: queued };
   }, [outbox.data, mailbox?.messages, stoppedMessageIds.data]);
   const invalidHistoryCursor = isInvalidCursorError(history.error);
   const shouldRefreshDetail = Boolean(
@@ -797,6 +896,8 @@ export function useConversationData(conversationId: string | undefined) {
     isLoadingPreviousPage,
     pendingAuthorization: mailbox?.authorization,
     pendingGeneratedAt: mailbox?.generatedAt,
+    /** The reader's own sends that the transcript shows before history has them. */
+    inlineMessages,
     pendingMessages,
     loadCompleteTranscript: () => {
       if (!conversationId || !detailData) {