@sentry/junior-dashboard 0.274.0 → 0.275.0

package/src/client/conversations/ConversationReplyFooter.tsx

@@ -0,0 +1,342 @@
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import type {
+  ConversationDetailReport,
+  ConversationPendingMessagesReport,
+  InputImage,
+} from "@sentry/junior/api/schema";
+
+import { useDashboardCoreData } from "../api";
+import { useReviewItemData } from "../review-desk/queries";
+import { reviewItemWaitsForAnswer } from "../review-desk/reviewItemFormat";
+import { useConfirmUnsentAnswers } from "../review-desk/UnsentAnswers";
+import { readStoredComposerImages } from "./ComposerImages";
+import { ComposerDock } from "./ComposerDock";
+import {
+  ConversationComposer,
+  restoreStoredDraftText,
+  type ConversationComposerHandle,
+} from "./ConversationComposer";
+import type { ConversationMailboxMessage } from "./conversationOutbox";
+import { PendingAuthorization } from "./ConversationMeta";
+import { PendingMailboxStack } from "./PendingMailboxStack";
+import {
+  useAppendConversationMessage,
+  useCancelConversationPendingMessages,
+  useSteerConversationPendingMessages,
+  useStopConversationTurn,
+} from "./queries";
+
+/**
+ * Own mutation state and mailbox chrome outside the page tree that re-renders
+ * on every live transcript poll. Keeps composer props stable while typing.
+ *
+ * Memoized so metadata-only polls that keep mailbox identity stable skip the
+ * footer tree. Fast chat UIs isolate the composer the same way.
+ */
+export const ConversationReplyFooter = memo(ReplyFooter);
+
+function ReplyFooter(props: {
+  authors?: ConversationDetailReport["authors"];
+  committedMessageIds: readonly string[];
+  conversationId: string;
+  onPinRequest: () => void;
+  pendingAuthorization?: ConversationPendingMessagesReport["authorization"];
+  pendingGeneratedAtRef: { current: string | undefined };
+  pendingMessages: readonly ConversationMailboxMessage[];
+  /** The last Review item that Junior added in the transcript. */
+  reviewItemId?: string;
+  /**
+   * True when history is live and no Turn has started, so the next Turn will
+   * read a new send at once.
+   */
+  sendsInline: boolean;
+  /** True while the conversation has a Turn that a stop can end. */
+  stoppable: boolean;
+}) {
+  const appendMessage = useAppendConversationMessage(props.conversationId);
+  // A message closes the review items that it answers. Ask before it drops
+  // answers that the reader did not send.
+  const unsentAnswers = useConfirmUnsentAnswers();
+  const stopTurn = useStopConversationTurn(props.conversationId);
+  const stopTurnRef = useRef(stopTurn);
+  stopTurnRef.current = stopTurn;
+  const cancelPendingMessages = useCancelConversationPendingMessages(
+    props.conversationId,
+  );
+  const [editTargetInboundMessageId, setEditTargetInboundMessageId] =
+    useState<string>();
+  const [queueActionError, setQueueActionError] = useState<string>();
+  // While Junior waits for an answer, hide the message box and the queued
+  // messages, so the reader answers in the question and does not type the
+  // answer as a new message.
+  // Dismiss on the question closes the item and shows the message box again.
+  // The message box stays mounted, so its text and images stay, and it does
+  // not hide while it has focus.
+  const reviewItem = useReviewItemData(props.reviewItemId).data;
+  const [composerShownForItemId, setComposerShownForItemId] =
+    useState<string>();
+  const [composerFocused, setComposerFocused] = useState(false);
+  const question =
+    reviewItem &&
+    !props.stoppable &&
+    !composerFocused &&
+    reviewItemWaitsForAnswer(reviewItem) &&
+    composerShownForItemId !== reviewItem.id
+      ? reviewItem
+      : undefined;
+  // The message box can show only because it has focus. Using the queued
+  // messages moves focus out of it, so keep them shown for this item.
+  const keepComposerShown = () => {
+    if (composerFocused && reviewItem && reviewItemWaitsForAnswer(reviewItem)) {
+      setComposerShownForItemId(reviewItem.id);
+    }
+  };
+  // Keep submit identity stable across mutation status flips so the memoized
+  // composer does not re-render while the reader is still typing.
+  const appendMessageRef = useRef(appendMessage);
+  appendMessageRef.current = appendMessage;
+  const cancelPendingMessagesRef = useRef(cancelPendingMessages);
+  cancelPendingMessagesRef.current = cancelPendingMessages;
+  const onPinRequestRef = useRef(props.onPinRequest);
+  onPinRequestRef.current = props.onPinRequest;
+  const pendingMessageVersion = props.pendingMessages
+    .map((message) =>
+      [
+        message.inboundMessageId,
+        message.messageId,
+        message.clientStatus,
+        message.delivery,
+      ].join(":"),
+    )
+    .join("|");
+  const pendingMessageVersionRef = useRef(pendingMessageVersion);
+  useEffect(() => {
+    if (pendingMessageVersionRef.current === pendingMessageVersion) return;
+    pendingMessageVersionRef.current = pendingMessageVersion;
+    if (!window.matchMedia("(max-width: 767px)").matches) return;
+    onPinRequestRef.current();
+  }, [pendingMessageVersion]);
+  // No Turn runs and nothing waits in the queue, so the next send would
+  // leave the queue almost at once. Show it in the transcript instead. A
+  // conversation can be active before its Turn starts; that still counts.
+  const committedIds = new Set(props.committedMessageIds);
+  const sendInlineRef = useRef(false);
+  sendInlineRef.current =
+    props.sendsInline &&
+    !props.pendingMessages.some(
+      (message) => !committedIds.has(message.messageId),
+    );
+  const onSubmit = useCallback(
+    async (message: string, idempotencyKey: string, images?: InputImage[]) => {
+      await appendMessageRef.current.mutateAsync({
+        idempotencyKey,
+        inline: sendInlineRef.current,
+        message,
+        images,
+      });
+    },
+    [],
+  );
+  const onRetry = useCallback((message: ConversationMailboxMessage) => {
+    if (!message.idempotencyKey || (!message.text && !message.images?.length))
+      return;
+    void appendMessageRef.current.mutateAsync({
+      idempotencyKey: message.idempotencyKey,
+      message: message.text ?? "",
+      images: message.images,
+    });
+  }, []);
+  const onSubmitStart = useCallback(() => {
+    // Keep an in-flight remove intact so optimistic cache rollback stays coherent.
+    if (!cancelPendingMessagesRef.current.isPending) {
+      cancelPendingMessagesRef.current.reset();
+    }
+    if (!stopTurnRef.current.isPending) stopTurnRef.current.reset();
+    setQueueActionError(undefined);
+    onPinRequestRef.current();
+  }, []);
+  const cancellableMessageIds = props.pendingMessages
+    .filter((message) => message.clientStatus === undefined)
+    .map((message) => message.inboundMessageId);
+  const onCancelMessage = useCallback(
+    (message: ConversationMailboxMessage) => {
+      const receivedBefore = props.pendingGeneratedAtRef.current;
+      if (!receivedBefore) return;
+      cancelPendingMessagesRef.current.mutate({
+        inboundMessageIds: [message.inboundMessageId],
+        receivedBefore,
+      });
+    },
+    [props.pendingGeneratedAtRef],
+  );
+  const cancelTargetInboundMessageId =
+    cancelPendingMessages.variables?.inboundMessageIds[0];
+  const cancelError = Boolean(
+    cancelPendingMessages.error &&
+    cancelPendingMessages.variables?.inboundMessageIds.some((id) =>
+      cancellableMessageIds.includes(id),
+    ),
+  );
+
+  // Edit uses its own cancel mutation so remove errors stay on remove.
+  const editCancel = useCancelConversationPendingMessages(props.conversationId);
+  const editCancelRef = useRef(editCancel);
+  editCancelRef.current = editCancel;
+  const editingRef = useRef(false);
+  const composerRef = useRef<ConversationComposerHandle>(null);
+  const viewerEmail = useDashboardCoreData().data?.me.user.email;
+  const onEditMessage = useCallback(
+    async (message: ConversationMailboxMessage) => {
+      const receivedBefore = props.pendingGeneratedAtRef.current;
+      // The image read runs before the cancel starts, so isPending alone does
+      // not stop a second click.
+      if (!receivedBefore || editingRef.current) return;
+      editingRef.current = true;
+      const inboundMessageId = message.inboundMessageId;
+      setEditTargetInboundMessageId(inboundMessageId);
+      setQueueActionError(undefined);
+      try {
+        // Read images first. A failed read must leave the message queued.
+        const images = await readStoredComposerImages(
+          props.conversationId,
+          message.attachments,
+        );
+        // The reader left during the read. Keep the message in the queue.
+        if (!composerRef.current) return;
+        // Check before the cancel. After it, images that do not fit are lost.
+        if (!composerRef.current.canRestoreImages(images)) {
+          setQueueActionError("Remove some draft images to edit that message.");
+          return;
+        }
+        const result = await editCancelRef.current.mutateAsync({
+          inboundMessageIds: [inboundMessageId],
+          receivedBefore,
+        });
+        // Junior can read the message before the cancel lands. Then it is
+        // already in the Conversation and there is nothing to edit.
+        if (!result.cancelledInboundMessageIds.includes(inboundMessageId)) {
+          setQueueActionError("Junior already read that message.");
+          return;
+        }
+        const restored = { images, text: message.text ?? "" };
+        if (composerRef.current) {
+          composerRef.current.restoreMessage(restored);
+        } else {
+          // The reader left during the cancel. Keep the text in the saved
+          // draft so it is there when they come back.
+          restoreStoredDraftText(props.conversationId, restored.text);
+        }
+      } catch {
+        setQueueActionError("Could not edit the queued message. Try again.");
+      } finally {
+        editingRef.current = false;
+        setEditTargetInboundMessageId(undefined);
+      }
+    },
+    [props.conversationId, props.pendingGeneratedAtRef],
+  );
+
+  const steerPendingMessages = useSteerConversationPendingMessages(
+    props.conversationId,
+  );
+  const steerPendingMessagesRef = useRef(steerPendingMessages);
+  steerPendingMessagesRef.current = steerPendingMessages;
+  const onSteerMessage = useCallback((message: ConversationMailboxMessage) => {
+    if (steerPendingMessagesRef.current.isPending) return;
+    setQueueActionError(undefined);
+    steerPendingMessagesRef.current.mutate(
+      { inboundMessageIds: [message.inboundMessageId] },
+      {
+        onError: () =>
+          setQueueActionError(
+            "Could not send the queued message now. Try again.",
+          ),
+      },
+    );
+  }, []);
+  const steerTargetInboundMessageId = steerPendingMessages.isPending
+    ? steerPendingMessages.variables?.inboundMessageIds[0]
+    : undefined;
+
+  const onStop = useCallback(async () => {
+    const result = await stopTurnRef.current.mutateAsync();
+    const restored = result.stoppedMessages.map((message) => message.text);
+    return restored.length ? restored.join("\n") : undefined;
+  }, []);
+
+  const onMailboxLayoutChange = useCallback(() => {
+    if (!window.matchMedia("(max-width: 767px)").matches) return;
+    onPinRequestRef.current();
+  }, []);
+  // Mobile keyboard open shrinks the transcript. Focus must re-pin the latest
+  // message so the reader does not stay stuck above the docked composer.
+  const onComposerFocus = useCallback(() => {
+    if (!window.matchMedia("(max-width: 767px)").matches) return;
+    onPinRequestRef.current();
+  }, []);
+
+  return (
+    <ComposerDock
+      above={
+        <>
+          {props.pendingAuthorization ? (
+            <PendingAuthorization authorization={props.pendingAuthorization} />
+          ) : null}
+          {/* Queued messages hide with the message box, so the question is
+              the last thing above the dock. */}
+          <div
+            hidden={Boolean(question)}
+            onFocus={keepComposerShown}
+            onPointerDown={keepComposerShown}
+          >
+            <PendingMailboxStack
+              authors={props.authors}
+              cancelError={cancelError}
+              cancelPending={cancelPendingMessages.isPending}
+              cancelTargetInboundMessageId={cancelTargetInboundMessageId}
+              committedMessageIds={props.committedMessageIds}
+              conversationId={props.conversationId}
+              editTargetInboundMessageId={editTargetInboundMessageId}
+              messages={props.pendingMessages}
+              onCancelMessage={onCancelMessage}
+              onEditMessage={onEditMessage}
+              onLayoutChange={onMailboxLayoutChange}
+              onRetry={onRetry}
+              onSteerMessage={props.stoppable ? onSteerMessage : undefined}
+              steerTargetInboundMessageId={steerTargetInboundMessageId}
+              viewerEmail={viewerEmail}
+            />
+          </div>
+          {unsentAnswers.dialog}
+        </>
+      }
+    >
+      <div
+        hidden={Boolean(question)}
+        onBlur={(event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) {
+            setComposerFocused(false);
+          }
+        }}
+        onFocus={() => setComposerFocused(true)}
+      >
+        <ConversationComposer
+          confirmSubmit={unsentAnswers.confirmSubmit}
+          draftId={props.conversationId}
+          error={
+            queueActionError ??
+            (stopTurn.error ? "Could not stop Junior. Try again." : undefined)
+          }
+          ref={composerRef}
+          label="Continue this conversation"
+          submitLabel="Send"
+          onFocus={onComposerFocus}
+          onStop={props.stoppable ? onStop : undefined}
+          stopPending={stopTurn.isPending}
+          onSubmitStart={onSubmitStart}
+          onSubmit={onSubmit}
+        />
+      </div>
+    </ComposerDock>
+  );
+}

package/src/client/conversations/ConversationSidebar.tsx

@@ -36,7 +36,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "../components/ui/tooltip";
-import { ShimmerText } from "../components/ShimmerText";
+import { Spinner } from "../components/ui/spinner";
 import type { WaitingConversation } from "../review-desk/queries";
 
 type ConversationSidebarEntry =
@@ -443,12 +443,10 @@ function ConversationRowState(props: {
 }) {
   if (props.status === "active") {
     return (
-      <ShimmerText
-        active
-        className="font-sans text-xs text-dashboard-text-muted"
-      >
-        Running
-      </ShimmerText>
+      <Spinner
+        aria-label="Running"
+        className="size-3.5 text-dashboard-text-muted"
+      />
     );
   }
   if (props.status === "failed") {

package/src/client/conversations/TelemetryMetrics.tsx

@@ -115,7 +115,6 @@ function modelHeading(
 /** Rows shown before the rest of a list rolls into one "N more" line. */
 const MODEL_LIMIT = 4;
 const AUXILIARY_LIMIT = 3;
-const DETAILS_FOOTER = "Full breakdown in Details";
 
 type RankedRow = UsageCardRow & { amount: number };
 
@@ -222,7 +221,6 @@ function tokenCard(
   compactionCount: number | undefined,
   liveModelId: string | undefined,
   childAgentTotals: ConversationChildAgentTotals | undefined,
-  detailsHint: boolean,
 ): UsageCardProps {
   const models = modelRows(
     modelUsage,
@@ -232,7 +230,6 @@ function tokenCard(
     formatCompactNumber,
   );
   return {
-    footer: detailsHint && models.length ? DETAILS_FOOTER : undefined,
     note: compactionCount ? plural("compaction", compactionCount) : undefined,
     sections: models.length
       ? [
@@ -278,7 +275,6 @@ function costCard(
   auxiliaryCosts: ConversationAuxiliaryCosts | undefined,
   liveModelId: string | undefined,
   childAgentTotals: ConversationChildAgentTotals | undefined,
-  detailsHint: boolean,
 ): UsageCardProps | undefined {
   const total = totalConversationCost(summary, auxiliaryCosts);
   if (!total) return undefined;
@@ -315,10 +311,6 @@ function costCard(
     });
   }
   return {
-    footer:
-      detailsHint && (models.length || operations.length)
-        ? DETAILS_FOOTER
-        : undefined,
     sections,
     split: agentSplit(
       childAgentTotals,
@@ -354,8 +346,6 @@ export function CostMetric(props: {
   align?: "left" | "right";
   auxiliaryCosts?: ConversationAuxiliaryCosts;
   childAgentTotals?: ConversationChildAgentTotals;
-  /** Point to conversation details, which has the full breakdown. */
-  detailsHint?: boolean;
   live?: boolean;
   liveModelId?: string;
   modelUsage?: ConversationModelUsage[];
@@ -375,7 +365,6 @@ export function CostMetric(props: {
     props.auxiliaryCosts,
     props.liveModelId,
     props.childAgentTotals,
-    Boolean(props.detailsHint),
   );
   return (
     <MetricValue
@@ -398,8 +387,6 @@ export function TokenMetric(props: {
   align?: "left" | "right";
   childAgentTotals?: ConversationChildAgentTotals;
   compactionCount?: number;
-  /** Point to conversation details, which has the full breakdown. */
-  detailsHint?: boolean;
   live?: boolean;
   liveModelId?: string;
   modelUsage?: ConversationModelUsage[];
@@ -417,7 +404,6 @@ export function TokenMetric(props: {
             props.compactionCount,
             props.liveModelId,
             props.childAgentTotals,
-            Boolean(props.detailsHint),
           )}
         />
       }

package/src/client/conversations/TranscriptView.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import type { ConversationMailboxMessage } from "./conversationOutbox";
-import { ArrowDownToLine } from "lucide-react";
+import { ArrowDown } from "lucide-react";
 
 import type {
   ConversationTranscript,
@@ -8,11 +8,6 @@ import type {
 } from "../types";
 import { EmptyTelemetry } from "../components/EmptyTelemetry";
 import { Button } from "../components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../components/ui/tooltip";
 import { ConversationTranscriptView } from "./ConversationTranscript";
 import { ConversationEventLog } from "./ConversationEventLog";
 import {
@@ -191,33 +186,21 @@ function JumpToLatestButton(props: {
 }) {
   if (!props.visible) return null;
 
-  const label = props.hasPendingUpdate
-    ? "Jump to latest update"
-    : "Jump to latest";
-
   return (
-    <div className="pointer-events-none sticky bottom-3 z-20 flex h-0 justify-center px-3 md:fixed md:inset-x-auto md:bottom-6 md:right-8 md:h-auto md:justify-end md:px-0">
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <Button
-              aria-label={label}
-              className="pointer-events-auto relative -translate-y-full rounded-lg !border !border-dashboard-border-emphasis !bg-dashboard-surface-active text-dashboard-text shadow-[0_6px_24px_rgba(0,0,0,0.36)] hover:!border-dashboard-border-interactive hover:!bg-dashboard-surface-hover hover:!text-dashboard-text md:translate-y-0"
-              onClick={props.onClick}
-              size="icon"
-            >
-              <ArrowDownToLine aria-hidden="true" size={16} strokeWidth={2} />
-              {props.hasPendingUpdate ? (
-                <span
-                  aria-hidden="true"
-                  className="absolute right-1.5 top-1.5 size-2 bg-emerald-300"
-                />
-              ) : null}
-            </Button>
-          }
-        />
-        <TooltipContent size="compact">{label}</TooltipContent>
-      </Tooltip>
+    // Sticky offsets count from inside the scroll region's bottom padding
+    // (pb-4 / md:pb-6). The negative offsets cancel most of it, so the pill
+    // sits 12px (16px on md) above the composer, centered on the transcript.
+    <div className="pointer-events-none sticky -bottom-2.5 z-20 flex h-0 justify-center md:-bottom-5">
+      <Button
+        aria-label={
+          props.hasPendingUpdate ? "Jump to latest update" : "Jump to latest"
+        }
+        className="pointer-events-auto h-8 -translate-y-full gap-1.5 rounded-full pl-3 pr-3.5 text-xs shadow-[0_4px_16px_rgba(0,0,0,0.12)]"
+        onClick={props.onClick}
+      >
+        <ArrowDown aria-hidden="true" size={14} strokeWidth={2} />
+        Jump to latest
+      </Button>
     </div>
   );
 }

package/src/client/conversations/UsageCard.tsx

@@ -27,8 +27,6 @@ export type UsageCardSplit = {
 };
 
 export type UsageCardProps = {
-  /** Closing hint, such as where to find the full breakdown. */
-  footer?: string;
   /** Muted detail after the title, such as a compaction count. */
   note?: string;
   sections: UsageCardSection[];
@@ -64,8 +62,7 @@ export function UsageCard(props: UsageCardProps) {
       <span
         className={cn(
           "grid gap-2.5",
-          (props.sections.length > 0 || props.footer) &&
-            "border-b border-dashboard-border pb-3",
+          props.sections.length > 0 && "border-b border-dashboard-border pb-3",
         )}
       >
         <span className="flex items-baseline justify-between gap-3">
@@ -156,17 +153,6 @@ export function UsageCard(props: UsageCardProps) {
           ) : null}
         </span>
       ))}
-      {props.footer ? (
-        <span
-          className={cn(
-            "text-dashboard-text-faint",
-            props.sections.length > 0 &&
-              "border-t border-dashboard-border pt-3",
-          )}
-        >
-          {props.footer}
-        </span>
-      ) : null}
     </span>
   );
 }

package/src/client/conversations/conversationSections.ts

@@ -7,13 +7,18 @@ export type ConversationSection = {
 };
 
 const DAY_MS = 24 * 60 * 60 * 1000;
+// Sorts before every time section.
+const ATTENTION_SECTION = {
+  key: "attention",
+  label: "Needs attention",
+  order: Number.NEGATIVE_INFINITY,
+};
 
 /**
- * Group conversations by last activity: Today, Yesterday, Previous 7 days,
- * Previous 30 days, then one section per month.
+ * Group conversations into Needs attention, then by last activity: Today,
+ * Yesterday, Previous 7 days, Previous 30 days, then one section per month.
  *
- * Conversations in `attentionIds` lead their section, so unread and waiting
- * rows sit above read rows without leaving their time group.
+ * Conversations in `attentionIds` go to Needs attention, newest first.
  */
 export function buildConversationSections(
   conversations: Conversation[],
@@ -25,20 +30,19 @@ export function buildConversationSections(
 ): ConversationSection[] {
   const nowDay = calendarDay(options.nowMs, options.timeZone);
   const sections = new Map<string, ConversationSection & { order: number }>();
-  const byActivity = [...conversations].sort(
+  const sorted = [...conversations].sort(
     (left, right) => activityTime(right) - activityTime(left),
   );
-  const sorted = options.attentionIds
-    ? attentionFirst(byActivity, options.attentionIds)
-    : byActivity;
 
   for (const conversation of sorted) {
-    const section = conversationSection(
-      activityTime(conversation),
-      nowDay,
-      options.nowMs,
-      options.timeZone,
-    );
+    const section = options.attentionIds?.has(conversation.id)
+      ? ATTENTION_SECTION
+      : conversationSection(
+          activityTime(conversation),
+          nowDay,
+          options.nowMs,
+          options.timeZone,
+        );
     const existing = sections.get(section.key);
     if (existing) {
       existing.conversations.push(conversation);