@sentry/junior-dashboard 0.274.0 → 0.276.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/ConversationTranscript.tsx

@@ -28,6 +28,11 @@ import { TranscriptToolView } from "./TranscriptToolView";
 import { TranscriptReasoningView } from "./TranscriptReasoningView";
 import { TranscriptAttachmentsDeliveredView } from "./TranscriptAttachmentsDeliveredView";
 import { TranscriptStructuredEventView } from "./TranscriptStructuredEventView";
+import {
+  TranscriptCapturedMemories,
+  TranscriptRecalledMemories,
+} from "./TranscriptMemoryPopover";
+import { isMemoryCaptureEvent } from "./conversationMemory";
 import { TranscriptFailureView } from "./TranscriptFailureView";
 import {
   structuredEventIcon,
@@ -248,16 +253,23 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
       renderMessage={(entry) =>
         props.conversation.sourceTask &&
         isAutomationTriggerMessage(props.conversation, entry.message) ? (
-          <TranscriptAutomationTriggerView
-            message={entry.message}
-            sourceTask={props.conversation.sourceTask}
-          />
+          <div className="grid min-w-0 gap-2">
+            <TranscriptAutomationTriggerView
+              message={entry.message}
+              sourceTask={props.conversation.sourceTask}
+            />
+            <TranscriptRecalledMemories message={entry.message} />
+          </div>
         ) : entry.message.eventType ? (
           <TranscriptRailEvent
             kind="event"
             objectType={entry.message.eventObjectType}
           >
             <TranscriptEventView message={entry.message} />
+            <TranscriptRecalledMemories
+              className="mt-1"
+              message={entry.message}
+            />
           </TranscriptRailEvent>
         ) : entry.message.context ? (
           <TranscriptRailEvent kind="message_context">
@@ -265,6 +277,10 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
               message={entry.message}
               conversation={props.conversation}
             />
+            <TranscriptRecalledMemories
+              className="mt-2"
+              message={entry.message}
+            />
           </TranscriptRailEvent>
         ) : (
           <TranscriptMessageView
@@ -285,10 +301,23 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
           icon={structuredEventIcon(entry.part.presentation.icon)}
           kind="structured_event"
         >
-          <TranscriptStructuredEventView
-            part={entry.part}
-            timestamp={entry.timestamp}
-          />
+          {isMemoryCaptureEvent(entry.part) ? (
+            <TranscriptCapturedMemories
+              fallback={
+                <TranscriptStructuredEventView
+                  part={entry.part}
+                  timestamp={entry.timestamp}
+                />
+              }
+              timestamp={entry.timestamp}
+              turnId={entry.part.turnId}
+            />
+          ) : (
+            <TranscriptStructuredEventView
+              part={entry.part}
+              timestamp={entry.timestamp}
+            />
+          )}
         </TranscriptRailEvent>
       )}
       renderSubagent={(entry) => (

package/src/client/conversations/ConversationWatches.tsx

@@ -69,9 +69,10 @@ const resourceIcons: Partial<Record<string, LucideIcon>> = {
 };
 
 /**
- * Show one Watch as a single line with its resource. Clicking the line shows
- * why the Watch exists and which events wake the Conversation. The expiry is
- * an internal limit, so the row does not show it.
+ * Show one Watch as a single line with its resource. When the resource has a
+ * web page, the line opens it and a chevron shows the details. Otherwise the
+ * line itself shows why the Watch exists and which events wake the
+ * Conversation. The expiry is an internal limit, so the row does not show it.
  */
 function WatchRow(props: { watch: ConversationWatch }) {
   const { watch } = props;
@@ -83,20 +84,41 @@ function WatchRow(props: { watch: ConversationWatch }) {
   // A timer has one event, and its fire time already says when it wakes.
   const events = watch.firesAt ? [] : watch.events;
   const filters = Object.entries(watch.match ?? {});
-  const row = (
+  const icon = <Icon aria-hidden="true" className="size-3.5" />;
+  const title = watch.label ?? `Private ${resource}`;
+  const chevron = (
+    <span className="grid size-5 place-items-center">
+      <ChevronRight
+        aria-hidden="true"
+        className={dashboardDisclosureChevronClass}
+      />
+    </span>
+  );
+  const toggle = () => setExpanded((value) => !value);
+  const row = watch.url ? (
+    // The row opens the watched resource, like a linked work row. The
+    // chevron beside it shows the details.
+    <div className="flex min-w-0 items-start gap-0.5">
+      <div className="min-w-0 flex-1">
+        <DetailsRow href={watch.url} icon={icon} title={title} />
+      </div>
+      <button
+        aria-expanded={expanded}
+        aria-label={`Details for ${title}`}
+        className="group grid size-8 shrink-0 place-items-center rounded-md text-dashboard-text-muted transition-colors hover:bg-dashboard-surface-hover hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+        onClick={toggle}
+        type="button"
+      >
+        {chevron}
+      </button>
+    </div>
+  ) : (
     <DetailsRow
       expanded={expanded}
-      icon={<Icon aria-hidden="true" className="size-3.5" />}
-      meta={
-        <span className="grid size-5 place-items-center">
-          <ChevronRight
-            aria-hidden="true"
-            className={dashboardDisclosureChevronClass}
-          />
-        </span>
-      }
-      onToggle={() => setExpanded((value) => !value)}
-      title={watch.label ?? `Private ${resource}`}
+      icon={icon}
+      meta={chevron}
+      onToggle={toggle}
+      title={title}
     />
   );
   if (!expanded) return row;

package/src/client/conversations/PendingMailboxStack.tsx

@@ -42,6 +42,7 @@ import {
 } from "./TranscriptHeadingRow";
 import { SlackMark } from "./SlackMark";
 import { DisplayText } from "../display-text/DisplayText";
+import { ReviewItemChangeLabel } from "../review-desk/ReviewItemChangeRow";
 import { displayPlainText } from "../display-text/plainText";
 
 // Rows are one line each, so the stack can show five before it collapses.
@@ -349,7 +350,16 @@ function PendingRow(props: {
                 className="m-0 min-w-0 truncate font-sans text-sm leading-snug text-dashboard-text-subtle"
                 title={displayPlainText(text, mentions)}
               >
-                <DisplayText inline mentions={mentions} text={text} />
+                {props.message.reviewItemChange ? (
+                  <ReviewItemChangeLabel
+                    fallback={
+                      <DisplayText inline mentions={mentions} text={text} />
+                    }
+                    record={props.message.reviewItemChange}
+                  />
+                ) : (
+                  <DisplayText inline mentions={mentions} text={text} />
+                )}
               </p>
             ) : null}
           </>