@sentry/junior-dashboard 0.265.0 → 0.267.0

package/src/client/conversations/ConversationPage.tsx

@@ -19,6 +19,7 @@ import {
   useAppendConversationMessage,
   useArchiveConversation,
   useCancelConversationPendingMessages,
+  useSteerConversationPendingMessages,
   useConversationData,
   useStopConversationTurn,
   type PendingArchiveConversationUpdate,
@@ -32,7 +33,13 @@ import {
   CONVERSATION_EVENT_PARAM,
   parseConversationEventSeq,
 } from "./conversationRoutes";
-import { ConversationComposer } from "./ConversationComposer";
+import {
+  ConversationComposer,
+  restoreStoredDraftText,
+  type ConversationComposerHandle,
+} from "./ConversationComposer";
+import { readStoredComposerImages } from "./ComposerImages";
+import { useDashboardCoreData } from "../api";
 import { ConversationHeader } from "./ConversationHeader";
 import { ConversationDetails } from "./ConversationDetails";
 import { ConversationEventDetails } from "./ConversationEventDetails";
@@ -66,6 +73,11 @@ import {
   hasConversationUsageBreakdown,
 } from "./ConversationUsageBreakdown";
 import { PendingMailboxStack } from "./PendingMailboxStack";
+import { UserInputRequestCard } from "./UserInputRequestCard";
+import {
+  openUserInputRequest,
+  type OpenUserInputRequest,
+} from "./userInputRequest";
 import {
   buildConversations,
   conversationDetailTitle,
@@ -184,6 +196,10 @@ export function ConversationPage(props: {
     () => committedMessageIds(detail.data?.events),
     [detail.data?.events],
   );
+  const userInputRequest = useMemo(
+    () => openUserInputRequest(detail.data?.events),
+    [detail.data?.events],
+  );
   // Cancel needs the latest mailbox watermark, but not as a render prop. Live
   // polls refresh generatedAt every 2s even when the queue is unchanged.
   const pendingGeneratedAtRef = useRef(detail.pendingGeneratedAt);
@@ -434,6 +450,7 @@ export function ConversationPage(props: {
                     loadingPreviousPage={detail.isLoadingPreviousPage}
                     onLoadPreviousPage={detail.loadPreviousPage}
                     onSelectedEventSeqChange={setSelectedEventSeq}
+                    pendingMessages={detail.inlineMessages}
                     pinRequestVersion={pinRequestVersion}
                     responding={
                       !detail.error && conversationIsResponding(transcript)
@@ -466,7 +483,17 @@ export function ConversationPage(props: {
               // every 2s; a prop would bust footer memo while the reader types.
               pendingGeneratedAtRef={pendingGeneratedAtRef}
               pendingMessages={detail.pendingMessages}
+              // Without live history, an inline send would never leave the
+              // transcript tail. A started Turn reads a new send only later.
+              // Keep those sends in the queue. An earlier inline send that
+              // history does not have yet can start that Turn first.
+              sendsInline={
+                detail.data.eventHistory.status === "available" &&
+                !conversationIsResponding(detail.data) &&
+                detail.inlineMessages.length === 0
+              }
               stoppable={live}
+              userInputRequest={userInputRequest}
             />
           ) : undefined
         }
@@ -548,8 +575,15 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
   pendingAuthorization?: ConversationPendingMessagesReport["authorization"];
   pendingGeneratedAtRef: { current: string | undefined };
   pendingMessages: readonly ConversationMailboxMessage[];
+  /**
+   * 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;
+  /** Junior's open question, if no user message answers it yet. */
+  userInputRequest?: OpenUserInputRequest;
 }) {
   const appendMessage = useAppendConversationMessage(props.conversationId);
   const stopTurn = useStopConversationTurn(props.conversationId);
@@ -558,6 +592,9 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
   const cancelPendingMessages = useCancelConversationPendingMessages(
     props.conversationId,
   );
+  const [editTargetInboundMessageId, setEditTargetInboundMessageId] =
+    useState<string>();
+  const [queueActionError, setQueueActionError] = useState<string>();
   // 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);
@@ -583,10 +620,21 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
     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,
       });
@@ -608,11 +656,19 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
       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 onAnswerUserInput = useCallback(async (answer: string) => {
+    onPinRequestRef.current();
+    await appendMessageRef.current.mutateAsync({
+      idempotencyKey: crypto.randomUUID(),
+      message: answer,
+    });
+  }, []);
   const onCancelMessage = useCallback(
     (message: ConversationMailboxMessage) => {
       const receivedBefore = props.pendingGeneratedAtRef.current;
@@ -633,6 +689,86 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
     ),
   );
 
+  // 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);
@@ -657,22 +793,40 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
           {props.pendingAuthorization ? (
             <PendingAuthorization authorization={props.pendingAuthorization} />
           ) : null}
+          {/* A queued message already answers the question. */}
+          {props.userInputRequest && props.pendingMessages.length === 0 ? (
+            <UserInputRequestCard
+              key={props.userInputRequest.toolCallId}
+              onAnswer={onAnswerUserInput}
+              request={props.userInputRequest}
+            />
+          ) : null}
           <PendingMailboxStack
             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}
           />
         </>
       }
     >
       <ConversationComposer
         draftId={props.conversationId}
-        error={stopTurn.error ? "Could not stop Junior. Try again." : undefined}
+        error={
+          queueActionError ??
+          (stopTurn.error ? "Could not stop Junior. Try again." : undefined)
+        }
+        ref={composerRef}
         label="Continue this conversation"
         submitLabel="Send"
         onFocus={onComposerFocus}

package/src/client/conversations/ConversationSidebar.tsx

@@ -19,6 +19,7 @@ import {
 } from "./conversationSections";
 import { EmptyTelemetry } from "../components/EmptyTelemetry";
 import { SearchInput } from "../components/SearchInput";
+import { Button } from "../components/ui/button";
 import { Skeleton } from "../components/ui/skeleton";
 import {
   Tooltip,
@@ -112,14 +113,14 @@ export function ConversationSidebar(props: {
               <Tooltip>
                 <TooltipTrigger
                   render={
-                    <button
+                    <Button
                       aria-label="New conversation"
-                      className="grid size-7 cursor-pointer place-items-center rounded-md text-dashboard-text-muted transition hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
+                      className="size-7"
                       onClick={props.onNewConversation}
-                      type="button"
+                      size="icon"
                     >
                       <SquarePen aria-hidden="true" size={15} />
-                    </button>
+                    </Button>
                   }
                 />
                 <TooltipContent size="compact">New conversation</TooltipContent>

package/src/client/conversations/ConversationTranscript.tsx

@@ -1,7 +1,16 @@
 import { memo, useMemo, useRef, type ReactNode } from "react";
+import { History } from "lucide-react";
+import type { ConversationMailboxMessage } from "./conversationOutbox";
 
+import { EmptyTelemetry } from "../components/EmptyTelemetry";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyMedia,
+  EmptyTitle,
+} from "../components/ui/empty";
 import { Card } from "../components/layout/Card";
-import { unavailableTranscriptLabel } from "../format";
+import { formatTime, unavailableTranscriptLabel } from "../format";
 import { ConversationBrief } from "./ConversationBrief";
 import { transcriptMessagesFromEvents } from "./eventTranscript";
 import type {
@@ -39,7 +48,6 @@ import {
   groupTranscriptMessages,
   type RenderedTranscriptEntry,
 } from "./transcriptRenderModel";
-import { transcriptEmptyClass } from "./transcriptStyles";
 import { entryMatchesSearch, useTranscriptSearch } from "./transcriptSearch";
 import { TranscriptRow, TranscriptRows } from "./TranscriptRows";
 import { TranscriptTimestampProvider } from "./TranscriptTimestamp";
@@ -74,13 +82,20 @@ export const ConversationTranscriptView = memo(
       conversation: ConversationTranscript;
     }) => void;
     conversation: ConversationTranscript;
+    /** Sends that history does not have yet. History wins on message id. */
+    pendingMessages?: readonly ConversationMailboxMessage[];
     responding?: boolean;
   }) {
     // Cards can change while their Message events stay unchanged.
     const { events, annotations } = props.conversation;
     const messages = useMemo(
-      () => transcriptMessagesFromEvents(events, annotations),
-      [events, annotations],
+      () =>
+        transcriptMessagesFromEvents(
+          events,
+          annotations,
+          props.pendingMessages,
+        ),
+      [events, annotations, props.pendingMessages],
     );
 
     return (
@@ -110,7 +125,10 @@ function SegmentEvents(props: {
   return (
     <TranscriptRows>
       {props.conversation.eventHistory.status === "expired" ? (
-        <ExpiredTranscriptView conversation={props.conversation} />
+        <ExpiredTranscriptView
+          brief={props.conversation.brief}
+          expiredAt={props.conversation.eventHistory.expiredAt}
+        />
       ) : props.conversation.eventHistory.status === "available" ? (
         <VisibleTranscriptEntries
           onOpenSubagentTranscript={props.onOpenSubagentTranscript}
@@ -131,9 +149,9 @@ function SegmentEvents(props: {
           conversation={props.conversation}
         />
       ) : (
-        <div className={transcriptEmptyClass()}>
+        <EmptyTelemetry>
           {unavailableTranscriptLabel(props.conversation)}
-        </div>
+        </EmptyTelemetry>
       )}
       {props.responding ? (
         <TranscriptRow indent>
@@ -145,21 +163,37 @@ function SegmentEvents(props: {
 }
 
 function ExpiredTranscriptView(props: {
-  conversation: ConversationTranscript;
+  brief: ConversationTranscript["brief"];
+  expiredAt: string;
 }) {
   return (
     <>
-      {props.conversation.brief ? (
+      {props.brief ? (
         <Card as="section" padding="md" variant="section">
           <h3 className="mt-0 mb-3 font-display text-lg font-medium text-dashboard-text">
             Brief
           </h3>
-          <ConversationBrief brief={props.conversation.brief} />
+          <ConversationBrief brief={props.brief} />
         </Card>
       ) : null}
-      <div className={transcriptEmptyClass()}>
-        {unavailableTranscriptLabel(props.conversation)}
-      </div>
+      <Empty className="flex items-start gap-3 border-dashed border-dashboard-border-emphasis bg-dashboard-fill-soft">
+        <EmptyMedia>
+          <History />
+        </EmptyMedia>
+        <div className="min-w-0">
+          <EmptyTitle>Transcript expired</EmptyTitle>
+          <EmptyDescription className="mt-1 text-sm">
+            The retention policy removed these events on{" "}
+            <time dateTime={props.expiredAt}>
+              {formatTime(props.expiredAt, {
+                dateStyle: "medium",
+                timeStyle: "short",
+              })}
+            </time>
+            .{props.brief ? " The brief above is still available." : null}
+          </EmptyDescription>
+        </div>
+      </Empty>
     </>
   );
 }
@@ -348,9 +382,7 @@ function TranscriptEntryList(props: {
   }
 
   if (search.active && rows.length === 0) {
-    return (
-      <div className={transcriptEmptyClass()}>No events match your search.</div>
-    );
+    return <EmptyTelemetry>No events match your search.</EmptyTelemetry>;
   }
 
   // Let rows participate in the parent transcript stack so messages, tool

package/src/client/conversations/ConversationUsageBreakdown.tsx

@@ -13,6 +13,16 @@ import {
   totalConversationCost,
 } from "../format";
 import { ShimmerText } from "../components/ShimmerText";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../components/ui/table";
+import { cn } from "../styles";
 import type { Conversation } from "../types";
 import { liveModelId } from "./ConversationMeta";
 import {
@@ -70,7 +80,7 @@ function tokenTypeParts(
   return parts.length ? parts : undefined;
 }
 
-const CELL = "text-right align-top font-sans tabular-nums";
+const CELL = "px-0 text-right align-top font-sans tabular-nums";
 
 /**
  * One usage table. Every table in the breakdown shares column widths, so the
@@ -85,85 +95,118 @@ function BreakdownTable(props: {
   total?: { cost: string; count: string; label: string };
 }) {
   return (
-    <div className="min-w-0 overflow-x-auto">
-      <table
-        aria-label={props.label}
-        className="w-full min-w-72 table-fixed border-collapse text-xs leading-relaxed"
-      >
-        <colgroup>
-          <col />
-          <col className="w-20" />
-          <col className="w-20" />
-        </colgroup>
-        <thead>
-          <tr className="border-b border-dashboard-border text-dashboard-text-muted">
-            <th scope="col" className="py-2 text-left font-normal">
-              {props.label}
-            </th>
-            <th scope="col" className="py-2 text-right font-normal">
-              {props.countLabel}
-            </th>
-            <th scope="col" className="py-2 text-right font-normal">
-              Cost
-            </th>
-          </tr>
-        </thead>
-        {props.rows.map((row) => (
-          <tbody
+    <Table
+      aria-label={props.label}
+      className="min-w-72 table-fixed text-xs leading-relaxed"
+    >
+      <colgroup>
+        <col />
+        <col className="w-20" />
+        <col className="w-20" />
+      </colgroup>
+      <TableHeader>
+        <TableRow className="border-dashboard-border">
+          <TableHead
+            scope="col"
+            className="px-0 py-2 leading-relaxed font-normal"
+          >
+            {props.label}
+          </TableHead>
+          <TableHead
+            scope="col"
+            className="px-0 py-2 text-right leading-relaxed font-normal"
+          >
+            {props.countLabel}
+          </TableHead>
+          <TableHead
+            scope="col"
+            className="px-0 py-2 text-right leading-relaxed font-normal"
+          >
+            Cost
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      {props.rows.map((row) => {
+        const padding = row.parts ? "pt-2 pb-0.5" : "py-2";
+        return (
+          <TableBody
             className="border-b border-dashboard-border-subtle last-of-type:border-b-0"
             key={row.key}
           >
-            <tr className="text-dashboard-text">
-              <th
+            {/* The tbody draws the group border, so its rows have none. */}
+            <TableRow className="border-0">
+              <TableHead
                 scope="row"
-                className={`pr-3 text-left font-normal ${row.parts ? "pt-2 pb-0.5" : "py-2"}`}
+                className={cn(
+                  "pl-0 pr-3 align-top leading-relaxed font-normal text-dashboard-text",
+                  padding,
+                )}
               >
                 <span className="block truncate">{row.label}</span>
-              </th>
-              <td className={`${CELL} ${row.parts ? "pt-2 pb-0.5" : "py-2"}`}>
-                {row.count}
-              </td>
-              <td className={`${CELL} ${row.parts ? "pt-2 pb-0.5" : "py-2"}`}>
-                {row.cost}
-              </td>
-            </tr>
+              </TableHead>
+              <TableCell className={cn(CELL, padding)}>{row.count}</TableCell>
+              <TableCell className={cn(CELL, padding)}>{row.cost}</TableCell>
+            </TableRow>
             {row.parts?.map((part, index, parts) => {
-              const padding = index === parts.length - 1 ? "pb-2" : "";
+              const partPadding =
+                index === parts.length - 1 ? "pt-0 pb-2" : "py-0";
               return (
-                <tr
-                  className="text-2xs leading-5 text-dashboard-text-faint"
+                <TableRow
+                  className="border-0 text-2xs leading-5"
                   key={part.label}
                 >
-                  <th
+                  <TableHead
                     scope="row"
-                    className={`truncate pl-3 pr-3 text-left font-normal ${padding}`}
+                    className={cn(
+                      "truncate pl-3 pr-3 align-top text-2xs leading-5 font-normal text-dashboard-text-faint",
+                      partPadding,
+                    )}
                   >
                     {part.label}
-                  </th>
-                  <td className={`${CELL} ${padding}`}>{part.count}</td>
-                  <td className={`${CELL} ${padding}`}>{part.cost}</td>
-                </tr>
+                  </TableHead>
+                  <TableCell
+                    className={cn(
+                      CELL,
+                      "text-dashboard-text-faint",
+                      partPadding,
+                    )}
+                  >
+                    {part.count}
+                  </TableCell>
+                  <TableCell
+                    className={cn(
+                      CELL,
+                      "text-dashboard-text-faint",
+                      partPadding,
+                    )}
+                  >
+                    {part.cost}
+                  </TableCell>
+                </TableRow>
               );
             })}
-          </tbody>
-        ))}
-        {props.total ? (
-          <tfoot>
-            <tr className="border-t border-dashboard-border font-semibold text-dashboard-text">
-              <th scope="row" className="py-2 text-left font-semibold">
-                {props.total.label}
-              </th>
-              <td className="py-2 text-right font-sans tabular-nums">
-                {props.total.count}
-              </td>
-              <td className="py-2 text-right font-sans tabular-nums">
-                {props.total.cost}
-              </td>
-            </tr>
-          </tfoot>
-        ) : null}
-      </table>
-    </div>
+          </TableBody>
+        );
+      })}
+      {props.total ? (
+        <TableFooter className="font-semibold">
+          <TableRow>
+            <TableHead
+              scope="row"
+              className="px-0 py-2 leading-relaxed font-semibold text-dashboard-text"
+            >
+              {props.total.label}
+            </TableHead>
+            <TableCell className="px-0 py-2 text-right font-sans tabular-nums">
+              {props.total.count}
+            </TableCell>
+            <TableCell className="px-0 py-2 text-right font-sans tabular-nums">
+              {props.total.cost}
+            </TableCell>
+          </TableRow>
+        </TableFooter>
+      ) : null}
+    </Table>
   );
 }