@sentry/junior-dashboard 0.266.0 → 0.268.0

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<

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) {