@sentry/junior-dashboard 0.266.0 → 0.267.0

package/src/client/conversations/PendingMailboxStack.tsx

@@ -6,47 +6,91 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
+import { INPUT_IMAGE_TYPES } from "@sentry/junior/api/schema";
 import {
   AlertCircle,
   Clock3,
+  FileText,
+  Pencil,
   SkipForward,
-  X,
+  Trash2,
+  Zap,
   type LucideIcon,
 } from "lucide-react";
 
+import { Button } from "../components/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "../components/ui/tooltip";
+import { ActorAvatar } from "../components/ActorAvatar";
+import { ImageAttachment } from "../components/ImageAttachment";
+import { ParticipantAvatar } from "../components/ParticipantAvatarStack";
 import { Spinner } from "../components/ui/spinner";
-import { actorLabel } from "../format";
 import type { ConversationMailboxMessage } from "./conversationOutbox";
+import {
+  conversationAttachmentUrl,
+  inputImageSrc,
+} from "./TranscriptAttachment";
 import {
   TranscriptHeadingMeta,
   TranscriptHeadingRow,
 } from "./TranscriptHeadingRow";
 import { SlackMark } from "./SlackMark";
 
-const MAX_EXPANDED_PENDING_ROWS = 3;
-const COLLAPSED_PENDING_ROW_COUNT = 2;
+// Rows are one line each, so the stack can show five before it collapses.
+const MAX_EXPANDED_PENDING_ROWS = 5;
+const COLLAPSED_PENDING_ROW_COUNT = 4;
+
+// The steer button and the steered status share an icon, so a steered row
+// shows the icon of the action that the reader used.
+const STEER_ICON = Zap;
 
 function pendingDeliveryMeta(
-  message: Pick<ConversationMailboxMessage, "clientStatus" | "delivery">,
-): { icon: LucideIcon | typeof Spinner; label: string } {
+  message: Pick<
+    ConversationMailboxMessage,
+    "clientStatus" | "delivery" | "source"
+  >,
+): { icon: LucideIcon | typeof Spinner; label: string; tooltip: string } {
   if (message.clientStatus === "failed") {
-    return { icon: AlertCircle, label: "Failed to send" };
+    return {
+      icon: AlertCircle,
+      label: "Failed to send",
+      tooltip: "Failed to send",
+    };
   }
   if (message.clientStatus === "sending") {
-    return { icon: Spinner, label: "Sending" };
+    return { icon: Spinner, label: "Sending", tooltip: "Sending" };
+  }
+  // Only a dashboard steer turns a web message into an interrupt. Other
+  // sources, such as a Slack mention, arrive as interrupts.
+  if (message.delivery === "interrupt" && message.source !== "web") {
+    return {
+      icon: SkipForward,
+      label: "Next step",
+      tooltip: "Junior reads it at its next step",
+    };
   }
   if (message.delivery === "interrupt") {
-    return { icon: SkipForward, label: "Interrupt" };
+    return {
+      icon: STEER_ICON,
+      label: "Steered",
+      tooltip: "Steered: Junior reads it at its next step",
+    };
   }
-  return { icon: Clock3, label: "Queued" };
+  return {
+    icon: Clock3,
+    label: "Queued",
+    tooltip: "Queued: Junior reads it after the current reply",
+  };
 }
 
-function PendingMetaIcon(props: { children: ReactElement; label: string }) {
+function PendingMetaIcon(props: {
+  children: ReactElement;
+  label: string;
+  tooltip?: string;
+}) {
   return (
     <Tooltip>
       <TooltipTrigger
@@ -59,24 +103,69 @@ function PendingMetaIcon(props: { children: ReactElement; label: string }) {
           </span>
         }
       />
-      <TooltipContent>{props.label}</TooltipContent>
+      <TooltipContent size="compact">
+        {props.tooltip ?? props.label}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+/** One icon-only row action. The tooltip says what the action does. */
+function PendingActionButton(props: {
+  disabled: boolean;
+  icon: LucideIcon;
+  label: string;
+  onClick(): void;
+  pending: boolean;
+  tooltip: string;
+  variant?: "danger";
+}) {
+  const Icon = props.icon;
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            aria-label={props.label}
+            className="size-6"
+            disabled={props.disabled}
+            // A disabled action still shows its tooltip on hover and focus.
+            focusableWhenDisabled
+            onClick={props.onClick}
+            size="icon"
+            type="button"
+            variant={props.variant}
+          >
+            {props.pending ? (
+              <Spinner aria-hidden="true" className="size-3.25" />
+            ) : (
+              <Icon aria-hidden="true" size={14} strokeWidth={2.2} />
+            )}
+          </Button>
+        }
+      />
+      <TooltipContent size="compact">{props.tooltip}</TooltipContent>
     </Tooltip>
   );
 }
 
 function PendingMetaIcons(props: {
-  cancelDisabled: boolean;
+  actionsDisabled: boolean;
   cancelError: boolean;
   cancelPending: boolean;
+  editPending: boolean;
   message: ConversationMailboxMessage;
   onCancel?: () => void;
+  onEdit?: () => void;
+  onSteer?: () => void;
   showSlack: boolean;
+  steerPending: boolean;
 }) {
   const delivery = pendingDeliveryMeta(props.message);
   const DeliveryIcon = delivery.icon;
 
   return (
-    <TranscriptHeadingMeta className="flex min-w-0 items-center justify-end gap-1.5 text-xs leading-none text-dashboard-text-muted">
+    <TranscriptHeadingMeta className="flex min-w-0 items-center justify-end gap-1 text-xs leading-none text-dashboard-text-muted">
       {props.showSlack ? (
         <Tooltip>
           <TooltipTrigger
@@ -86,65 +175,138 @@ function PendingMetaIcons(props: {
               </span>
             }
           />
-          <TooltipContent>Slack</TooltipContent>
+          <TooltipContent size="compact">From Slack</TooltipContent>
         </Tooltip>
       ) : null}
-      <PendingMetaIcon label={delivery.label}>
+      <PendingMetaIcon label={delivery.label} tooltip={delivery.tooltip}>
         <DeliveryIcon
           aria-hidden="true"
           className="size-3.25"
           strokeWidth={2.2}
         />
       </PendingMetaIcon>
+      {props.onSteer ? (
+        <PendingActionButton
+          disabled={props.actionsDisabled}
+          icon={STEER_ICON}
+          label="Steer queued message"
+          onClick={props.onSteer}
+          pending={props.steerPending}
+          tooltip="Steer: Junior reads it at its next step"
+        />
+      ) : null}
+      {props.onEdit ? (
+        <PendingActionButton
+          disabled={props.actionsDisabled}
+          icon={Pencil}
+          label="Edit queued message"
+          onClick={props.onEdit}
+          pending={props.editPending}
+          tooltip="Edit: move it back to the composer"
+        />
+      ) : null}
       {props.onCancel ? (
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <button
-                aria-label={
-                  props.cancelError
-                    ? "Could not remove. Try again."
-                    : "Remove queued message"
-                }
-                className="inline-flex size-5 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-amber-50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-amber-200/55 disabled:cursor-default disabled:opacity-50"
-                disabled={props.cancelDisabled}
-                onClick={props.onCancel}
-                type="button"
-              >
-                {props.cancelPending ? (
-                  <Spinner aria-hidden="true" className="size-3.25" />
-                ) : (
-                  <X aria-hidden="true" size={14} strokeWidth={2.2} />
-                )}
-              </button>
-            }
-          />
-          <TooltipContent>Remove queued message</TooltipContent>
-        </Tooltip>
+        <PendingActionButton
+          disabled={props.actionsDisabled}
+          icon={Trash2}
+          label={
+            props.cancelError
+              ? "Could not delete. Try again."
+              : "Delete queued message"
+          }
+          onClick={props.onCancel}
+          pending={props.cancelPending}
+          tooltip={
+            props.cancelError
+              ? "Could not delete. Try again."
+              : "Delete from the queue"
+          }
+          variant="danger"
+        />
       ) : null}
     </TranscriptHeadingMeta>
   );
 }
 
+function PendingAuthorAvatar(props: { message: ConversationMailboxMessage }) {
+  // Pending rows can come from web or Slack. Redacted rows hide the author.
+  if (!props.message.actorIdentity) {
+    return <ActorAvatar name="?" size="list" />;
+  }
+  return (
+    <ParticipantAvatar participant={props.message.actorIdentity} size="list" />
+  );
+}
+
+/** Show small previews so the reader can tell which images a queued message has. */
+function PendingAttachmentThumbnails(props: {
+  conversationId?: string;
+  message: ConversationMailboxMessage;
+}) {
+  const thumbnailClassName = "size-6 rounded object-cover";
+  const triggerClassName =
+    "block size-6 flex-none overflow-hidden rounded border border-dashboard-border bg-dashboard-fill-faint transition-colors hover:border-dashboard-border-interactive focus-visible:outline-2 focus-visible:outline-dashboard-focus";
+  const localImages = props.message.images ?? [];
+  const attachments = props.message.attachments ?? [];
+  if (localImages.length === 0 && attachments.length === 0) return null;
+
+  return (
+    <span className="flex flex-none items-center gap-1">
+      {localImages.map((image, index) => (
+        <ImageAttachment
+          filename={image.filename}
+          imageClassName={thumbnailClassName}
+          key={`local:${index}`}
+          src={inputImageSrc(image)}
+          triggerClassName={triggerClassName}
+        />
+      ))}
+      {attachments.map((attachment) => {
+        const isImage = INPUT_IMAGE_TYPES.some(
+          (type) => type === attachment.contentType,
+        );
+        if (isImage && props.conversationId) {
+          return (
+            <ImageAttachment
+              filename={attachment.filename}
+              imageClassName={thumbnailClassName}
+              key={attachment.id}
+              loading="lazy"
+              src={conversationAttachmentUrl(
+                props.conversationId,
+                attachment.id,
+              )}
+              triggerClassName={triggerClassName}
+            />
+          );
+        }
+        return (
+          <PendingMetaIcon key={attachment.id} label={attachment.filename}>
+            <FileText aria-hidden="true" size={14} />
+          </PendingMetaIcon>
+        );
+      })}
+    </span>
+  );
+}
+
 function PendingRow(props: {
-  cancelDisabled: boolean;
+  actionsDisabled: boolean;
   cancelError: boolean;
   cancelPending: boolean;
+  canEdit: boolean;
+  canSteer: boolean;
+  conversationId?: string;
+  editPending: boolean;
   message: ConversationMailboxMessage;
   onCancel?(message: ConversationMailboxMessage): void;
+  onEdit?(message: ConversationMailboxMessage): void;
   onRetry?(message: ConversationMailboxMessage): void;
+  onSteer?(message: ConversationMailboxMessage): void;
+  steerPending: boolean;
 }) {
-  const filenames = [
-    ...(props.message.images ?? []),
-    ...(props.message.attachments ?? []),
-  ]
-    .map((attachment) => attachment.filename)
-    .join(", ");
-  const text = [props.message.text, filenames].filter(Boolean).join(" · ");
+  const text = props.message.text ?? "";
   const redacted = Boolean(props.message.redacted);
-  // Pending rows can come from web or Slack. Avoid rebuilding a full
-  // transcript projection just to label the stack above the composer.
-  const roleLabel = actorLabel(props.message.actorIdentity) ?? "User";
   const showSlack = props.message.source === "slack";
   const canRetry =
     props.message.clientStatus === "failed" &&
@@ -152,36 +314,59 @@ function PendingRow(props: {
     Boolean(props.onRetry);
 
   return (
-    <article className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-1 px-3 py-2 text-dashboard-text md:px-3.5">
+    <article className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-1 px-3 py-1.5 text-dashboard-text md:px-3.5">
       <TranscriptHeadingRow
+        className="items-center"
         left={
-          <span className="inline-block max-w-full truncate font-sans text-sm font-semibold leading-tight text-dashboard-text">
-            {roleLabel}
-          </span>
+          <>
+            <PendingAuthorAvatar message={props.message} />
+            {redacted ? null : (
+              <PendingAttachmentThumbnails
+                conversationId={props.conversationId}
+                message={props.message}
+              />
+            )}
+            {redacted ? (
+              <p className="m-0 font-sans text-sm leading-snug text-dashboard-text-muted">
+                [redacted]
+              </p>
+            ) : text ? (
+              // One line keeps the queue short. The title shows the full text.
+              <p
+                className="m-0 min-w-0 truncate font-sans text-sm leading-snug text-dashboard-text-subtle"
+                title={text}
+              >
+                {text}
+              </p>
+            ) : null}
+          </>
         }
-        leftClassName="text-sm leading-snug text-dashboard-text"
+        leftClassName="flex-1 text-sm leading-snug text-dashboard-text"
         right={
           <PendingMetaIcons
-            cancelDisabled={props.cancelDisabled}
+            actionsDisabled={props.actionsDisabled}
             cancelError={props.cancelError}
             cancelPending={props.cancelPending}
+            editPending={props.editPending}
             message={props.message}
             onCancel={
               props.onCancel ? () => props.onCancel?.(props.message) : undefined
             }
+            onEdit={
+              props.canEdit && props.onEdit
+                ? () => props.onEdit?.(props.message)
+                : undefined
+            }
+            onSteer={
+              props.canSteer && props.onSteer
+                ? () => props.onSteer?.(props.message)
+                : undefined
+            }
             showSlack={showSlack}
+            steerPending={props.steerPending}
           />
         }
       />
-      {redacted ? (
-        <p className="m-0 font-sans text-sm leading-snug text-dashboard-text-muted">
-          [redacted]
-        </p>
-      ) : (
-        <p className="m-0 line-clamp-3 font-sans text-sm leading-snug text-dashboard-text-subtle">
-          {text}
-        </p>
-      )}
       {canRetry ? (
         <div className="flex min-w-0 items-center gap-2">
           <p className="m-0 font-sans text-xs text-red-300/80">
@@ -198,7 +383,7 @@ function PendingRow(props: {
       ) : null}
       {props.cancelError ? (
         <p className="m-0 font-sans text-xs text-amber-100/75">
-          Could not remove. Try again.
+          Could not delete. Try again.
         </p>
       ) : null}
     </article>
@@ -242,6 +427,12 @@ function ExpandQueuedMessagesButton(props: {
   );
 }
 
+function sameEmail(left: string | undefined, right: string | undefined) {
+  return Boolean(
+    left && right && left.trim().toLowerCase() === right.trim().toLowerCase(),
+  );
+}
+
 /** Render accepted mailbox rows as a compact stack attached above the composer. */
 export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
   cancelError?: boolean;
@@ -249,11 +440,23 @@ export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
   cancelTargetInboundMessageId?: string;
   /** Message ids already present in committed history. */
   committedMessageIds?: readonly string[];
+  /** Conversation that owns stored attachment previews. */
+  conversationId?: string;
+  /** Inbound id of the row that an edit is taking out of the queue. */
+  editTargetInboundMessageId?: string;
   messages: readonly ConversationMailboxMessage[];
   onCancelMessage?: (message: ConversationMailboxMessage) => void;
+  /** Take the viewer's own queued web message back into the composer. */
+  onEditMessage?: (message: ConversationMailboxMessage) => void;
   /** Fires after expand/collapse changes the stack height above the composer. */
   onLayoutChange?: () => void;
   onRetry?(message: ConversationMailboxMessage): void;
+  /** Ask Junior to read the viewer's own queued web message now. */
+  onSteerMessage?: (message: ConversationMailboxMessage) => void;
+  /** Inbound id of the row that a steer is sending now. */
+  steerTargetInboundMessageId?: string;
+  /** Email of the signed-in reader. Only their own web rows can be edited. */
+  viewerEmail?: string;
 }): ReactNode {
   const [expanded, setExpanded] = useState(false);
   const onLayoutChangeRef = useRef(props.onLayoutChange);
@@ -283,6 +486,43 @@ export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
   const visibleRows = showCollapsed ? previewRows : rows;
   const hiddenCount = Math.max(0, rows.length - COLLAPSED_PENDING_ROW_COUNT);
   const toggleExpanded = () => setExpanded((value) => !value);
+  const actionsDisabled =
+    Boolean(props.cancelPending) ||
+    Boolean(props.editTargetInboundMessageId) ||
+    Boolean(props.steerTargetInboundMessageId);
+  const renderRow = (message: ConversationMailboxMessage) => {
+    const isTarget =
+      props.cancelTargetInboundMessageId === message.inboundMessageId;
+    // Only accepted server rows can leave the queue. Local rows are still sending.
+    const accepted = message.clientStatus === undefined;
+    const ownWebRow =
+      accepted &&
+      message.source === "web" &&
+      !message.redacted &&
+      sameEmail(message.actorIdentity?.email, props.viewerEmail);
+    return (
+      <PendingRow
+        actionsDisabled={actionsDisabled}
+        cancelError={Boolean(props.cancelError && isTarget)}
+        cancelPending={Boolean(props.cancelPending && isTarget)}
+        canEdit={ownWebRow}
+        canSteer={ownWebRow && message.delivery === "defer"}
+        conversationId={props.conversationId}
+        editPending={
+          props.editTargetInboundMessageId === message.inboundMessageId
+        }
+        key={message.messageId}
+        message={message}
+        onCancel={accepted ? props.onCancelMessage : undefined}
+        onEdit={props.onEditMessage}
+        onRetry={props.onRetry}
+        onSteer={props.onSteerMessage}
+        steerPending={
+          props.steerTargetInboundMessageId === message.inboundMessageId
+        }
+      />
+    );
+  };
 
   return (
     <div
@@ -290,52 +530,10 @@ export const PendingMailboxStack = memo(function PendingMailboxStack(props: {
       className="mx-2 overflow-hidden rounded-t-lg bg-amber-300/[0.055] md:mx-3"
     >
       {showCollapsed ? (
-        // Desktop keeps a two-row preview; mobile collapses to the control only.
-        <div className="hidden md:block">
-          {previewRows.map((message) => (
-            <PendingRow
-              cancelDisabled={Boolean(props.cancelPending)}
-              cancelError={Boolean(
-                props.cancelError &&
-                props.cancelTargetInboundMessageId === message.inboundMessageId,
-              )}
-              cancelPending={Boolean(
-                props.cancelPending &&
-                props.cancelTargetInboundMessageId === message.inboundMessageId,
-              )}
-              key={message.messageId}
-              message={message}
-              onCancel={
-                message.clientStatus === undefined
-                  ? props.onCancelMessage
-                  : undefined
-              }
-              onRetry={props.onRetry}
-            />
-          ))}
-        </div>
+        // Desktop keeps a short preview; mobile collapses to the control only.
+        <div className="hidden md:block">{previewRows.map(renderRow)}</div>
       ) : (
-        visibleRows.map((message) => (
-          <PendingRow
-            cancelDisabled={Boolean(props.cancelPending)}
-            cancelError={Boolean(
-              props.cancelError &&
-              props.cancelTargetInboundMessageId === message.inboundMessageId,
-            )}
-            cancelPending={Boolean(
-              props.cancelPending &&
-              props.cancelTargetInboundMessageId === message.inboundMessageId,
-            )}
-            key={message.messageId}
-            message={message}
-            onCancel={
-              message.clientStatus === undefined
-                ? props.onCancelMessage
-                : undefined
-            }
-            onRetry={props.onRetry}
-          />
-        ))
+        visibleRows.map(renderRow)
       )}
       {canCollapse ? (
         <ExpandQueuedMessagesButton

package/src/client/conversations/README.md

@@ -12,13 +12,12 @@ shared controls and overlays.
   `TranscriptMessageHeading` aligns authors, timestamps, and the context action.
   The action stays visible on touch devices and while open. Mouse users see it
   on message hover; keyboard users see it on focus.
-- `TranscriptSummary` owns disclosure padding, hover, and keyboard focus. Use
-  `flush` when the text already sits on the transcript edge. It extends the
-  padded control around that text. Do not repeat negative margins at call sites.
-  The caller owns the native `details` element and its content.
-  `TranscriptSummaryTrigger` gives a `ui/collapsible` trigger the same look.
-  Its caller owns the `Collapsible` and its content. Transcript search holds
-  event and context rows open.
+- `TranscriptSummaryTrigger` owns disclosure padding, hover, and keyboard
+  focus for a `ui/collapsible` trigger. Use `flush` when the text already sits
+  on the transcript edge. It extends the padded control around that text. Do
+  not repeat negative margins at call sites. The caller owns the `Collapsible`
+  and its content. Transcript search holds event and context rows open, and
+  shows activity group rows without the group.
 - Activity rows (tools, reasoning, and grouped rail events) share one
   layout: a 1rem icon column, an 8px gap, then the title and metadata.
   Tool and reasoning rows use `ui/trace`. Transcript search forces them open.
@@ -114,9 +113,12 @@ The timezone toggle uses `useEventTime` to share a UTC/local preference through
 `@uidotdev/usehooks` and browser local storage. It applies to event row clocks
 and detail timestamps. Local mode follows the browser timezone. The button uses
 a generic zone name because a log can span standard and daylight-saving time.
-Detail timestamps use the zone name for each event date. The mode, not
-the timezone identifier, persists across visits and tabs. This hook belongs to
-the client-rendered event viewer. Raw JSON retains the original ISO values.
+Detail timestamps use a readable date to the second and the zone name for each
+event date, in both modes. The header keeps them on one line beside the
+actions. Their tooltip adds milliseconds, and the `time` element keeps the
+original ISO value. The mode, not the timezone identifier, persists across
+visits and tabs. This hook belongs to the client-rendered event viewer. Raw
+JSON retains the original ISO values.
 
 ## Event details
 
@@ -125,10 +127,14 @@ places `ConversationEventDetails` beside the log in the page panel. Selecting
 another row changes the event and resets its scroll position and disclosures.
 Closing returns focus to that row. Switching Conversations removes the panel.
 
-The previous and next controls select the adjacent visible row. They follow
+The previous and next controls select the adjacent visible row. They form one
+`ui/button-group` named "Event navigation". They follow
 the event search, like Up and Down. They are necessary below 1280px, where the
 sheet covers the log. At the ends of the list, the control is disabled but
-keeps focus. The sheet title is the event type.
+keeps focus. The sheet title is the event type. The header shows the event
+type, then the sequence number and timestamp. The body groups fields in the
+same `DetailsCard` that Conversation details use. Groups inside a card, such
+as tool input and output, use a divider, not another card.
 
 A linked event can be older than the loaded pages. While the event loads, the
 panel stays open. Only its header shows placeholders, so it does not compete
@@ -137,6 +143,17 @@ the log toolbar, columns, and row skeletons in the event log view.
 
 Standalone transcripts, such as a subagent drawer, keep selection in
 `ConversationEventLog`. Their event details use a nested drawer on desktop and
-`BottomSheet` on smaller screens. This keeps the main log free of modal behavior
+`BottomSheet` on smaller screens. The nested drawer stacks in front of the
+subagent drawer. The subagent drawer shows its event log without a body inset,
+so rows meet the drawer edges and the toolbar sticks to the top. This keeps the main log free of modal behavior
 while a nested transcript retains its parent drawer's focus rules. These event
 details have the same previous and next controls.
+
+`SubagentTranscriptDrawer` uses the wide `Drawer` at all widths. Below 768px
+the drawer fills the screen, so the long transcript gets the most room. Its
+header holds search, view, and copy actions. `BottomSheet` has no place for
+them.
+
+`ForkConversationButton` opens a `ui/dialog` form, not a drawer. The dialog
+stays above event details in a docked panel or a sheet. Cancel returns focus
+to the fork button. A pending fork blocks dismissal until the request ends.