@sentry/junior-dashboard 0.266.0 → 0.268.0

package/src/client/components/ui/empty.tsx

@@ -15,6 +15,35 @@ function Empty({ className, ...props }: ComponentProps<"div">) {
   );
 }
 
+/** Hold the icon that names the kind of empty state. */
+function EmptyMedia({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      aria-hidden="true"
+      data-slot="empty-media"
+      className={cn(
+        "grid size-8 shrink-0 place-items-center rounded-md bg-dashboard-fill-strong text-dashboard-text-subtle [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Name the empty state in a few words. */
+function EmptyTitle({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn(
+        "font-display text-base font-medium leading-tight text-dashboard-text",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
 /** Explain why the region is empty and what the user can do next. */
 function EmptyDescription({ className, ...props }: ComponentProps<"div">) {
   return (
@@ -29,4 +58,4 @@ function EmptyDescription({ className, ...props }: ComponentProps<"div">) {
   );
 }
 
-export { Empty, EmptyDescription };
+export { Empty, EmptyDescription, EmptyMedia, EmptyTitle };

package/src/client/components/ui/separator.tsx

@@ -0,0 +1,22 @@
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import { cn } from "@dashboard/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/client/components/ui/useSheet.ts

@@ -48,7 +48,11 @@ export function useSheet(
       open,
       modal: topmost ? "trap-focus" : false,
       disablePointerDismissal: !topmost,
-      onOpenChange(nextOpen, details) {
+      // Dialog and Drawer roots both use this handler, so read only `cancel`.
+      onOpenChange(
+        nextOpen: boolean,
+        details: Pick<Dialog.Root.ChangeEventDetails, "cancel">,
+      ) {
         if (!nextOpen && !topmost) {
           details.cancel();
           return;

package/src/client/conversations/ComposerImages.tsx

@@ -4,7 +4,31 @@ import {
   MAX_INPUT_IMAGE_BYTES,
   MAX_INPUT_IMAGES,
   type InputImage,
+  type MessageAttachment,
 } from "@sentry/junior/api/schema";
+import { Button } from "../components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
+import {
+  conversationAttachmentUrl,
+  inputImageSrc,
+} from "./TranscriptAttachment";
+
+/** Decoded size of base64 image data, as the server limit counts it. */
+function inputImageBytes(images: readonly InputImage[]): number {
+  return images.reduce((sum, image) => sum + (image.data.length * 3) / 4, 0);
+}
+
+/** True when these images fit the message image count and size limits. */
+export function composerImagesFit(images: readonly InputImage[]): boolean {
+  return (
+    images.length <= MAX_INPUT_IMAGES &&
+    inputImageBytes(images) <= MAX_INPUT_IMAGE_BYTES
+  );
+}
 
 /** Read a bounded image selection for the message request and local previews. */
 export async function readComposerImages(
@@ -13,10 +37,7 @@ export async function readComposerImages(
 ): Promise<InputImage[]> {
   if (current.length + files.length > MAX_INPUT_IMAGES)
     throw new Error("Attach up to 3 images.");
-  const currentBytes = current.reduce(
-    (sum, image) => sum + (image.data.length * 3) / 4,
-    0,
-  );
+  const currentBytes = inputImageBytes(current);
   if (
     currentBytes + files.reduce((sum, file) => sum + file.size, 0) >
     MAX_INPUT_IMAGE_BYTES
@@ -51,6 +72,28 @@ export async function readComposerImages(
   return [...current, ...images];
 }
 
+/** Read stored image attachments back into composer images for an edit. */
+export async function readStoredComposerImages(
+  conversationId: string,
+  attachments: readonly MessageAttachment[] | undefined,
+): Promise<InputImage[]> {
+  const images = (attachments ?? []).filter((attachment) =>
+    INPUT_IMAGE_TYPES.some((type) => type === attachment.contentType),
+  );
+  const files = await Promise.all(
+    images.map(async (attachment) => {
+      const response = await fetch(
+        conversationAttachmentUrl(conversationId, attachment.id),
+      );
+      if (!response.ok) throw new Error("Could not read the queued image.");
+      return new File([await response.blob()], attachment.filename, {
+        type: attachment.contentType,
+      });
+    }),
+  );
+  return await readComposerImages(files, []);
+}
+
 /** Show removable images before sending; bytes stay in memory until submit. */
 export function ComposerImages(props: {
   images: InputImage[];
@@ -67,17 +110,26 @@ export function ComposerImages(props: {
           <img
             alt={image.filename}
             className="h-20 w-24 rounded-md object-contain"
-            src={`data:${image.contentType};base64,${image.data}`}
+            src={inputImageSrc(image)}
           />
-          <button
-            aria-label={`Remove ${image.filename}`}
-            disabled={props.disabled}
-            className="absolute right-0 top-0 grid size-7 cursor-pointer place-items-center rounded-full border border-dashboard-border bg-dashboard-surface-raised text-dashboard-text hover:bg-dashboard-fill-hover disabled:cursor-default disabled:opacity-50"
-            onClick={() => props.onRemove(index)}
-            type="button"
-          >
-            <X aria-hidden="true" size={14} />
-          </button>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  aria-label={`Remove ${image.filename}`}
+                  className="absolute right-0 top-0 size-7 rounded-full border border-dashboard-border bg-dashboard-surface-raised text-dashboard-text data-disabled:hover:!bg-dashboard-surface-raised data-disabled:hover:!text-dashboard-text"
+                  disabled={props.disabled}
+                  focusableWhenDisabled
+                  onClick={() => props.onRemove(index)}
+                  size="icon"
+                  type="button"
+                >
+                  <X aria-hidden="true" size={14} />
+                </Button>
+              }
+            />
+            <TooltipContent size="compact">Remove image</TooltipContent>
+          </Tooltip>
         </div>
       ))}
     </div>

package/src/client/conversations/ConversationComposer.tsx

@@ -1,14 +1,20 @@
 import { INPUT_IMAGE_TYPES, type InputImage } from "@sentry/junior/api/schema";
-import { ComposerImages, readComposerImages } from "./ComposerImages";
+import {
+  ComposerImages,
+  composerImagesFit,
+  readComposerImages,
+} from "./ComposerImages";
 import {
   memo,
   useEffect,
   useId,
+  useImperativeHandle,
   useRef,
   useState,
   type FormEvent,
   type KeyboardEvent,
   type ReactNode,
+  type Ref,
 } from "react";
 import { ImagePlus, Send, Square } from "lucide-react";
 
@@ -56,6 +62,14 @@ export function conversationAttemptForSubmit(
   };
 }
 
+/** Imperative composer actions for the reply footer. */
+export type ConversationComposerHandle = {
+  /** True when the draft has room for these images right now. */
+  canRestoreImages(images: readonly InputImage[]): boolean;
+  /** Put queued text and images ahead of the draft. Queued images win. */
+  restoreMessage(message: { images?: InputImage[]; text: string }): void;
+};
+
 type ConversationComposerProps = {
   disabled?: boolean;
   draftId: string;
@@ -73,6 +87,8 @@ type ConversationComposerProps = {
    * the pending queue instead.
    */
   restoreDraftOnError?: boolean;
+  /** Lets the parent put a message taken out of the queue back in the draft. */
+  ref?: Ref<ConversationComposerHandle>;
   submitLabel: string;
   onFocus?: () => void;
   onSubmit(
@@ -93,7 +109,7 @@ type ConversationComposerProps = {
 export const ConversationComposer = memo(function ConversationComposer(
   props: ConversationComposerProps,
 ) {
-  const storageKey = `${DRAFT_STORAGE_PREFIX}${encodeURIComponent(props.draftId)}`;
+  const storageKey = draftStorageKey(props.draftId);
   const [initialDraft] = useState<ConversationDraft>(() =>
     readStoredDraft(storageKey),
   );
@@ -184,7 +200,18 @@ export const ConversationComposer = memo(function ConversationComposer(
     setReadingImages(true);
     setImageError(undefined);
     try {
-      replaceImages(await readComposerImages(files, imagesRef.current));
+      const before = imagesRef.current;
+      const added = (await readComposerImages(files, before)).slice(
+        before.length,
+      );
+      // An edit can restore images during the read. Add to those images
+      // instead of replacing them.
+      const next = [...imagesRef.current, ...added];
+      if (!composerImagesFit(next)) {
+        setImageError("Attach up to 3 images that total 3 MB or less.");
+      } else {
+        replaceImages(next);
+      }
       textareaRef.current?.focus({ preventScroll: true });
     } catch (error) {
       setImageError(
@@ -306,6 +333,12 @@ export const ConversationComposer = memo(function ConversationComposer(
   };
 
   // Put queued text back ahead of anything the reader already typed.
+  const prependDraftText = (text: string) => {
+    const next = withPrependedText(draftRef.current, text);
+    replaceMessage(next);
+    storeDraft(storageKey, next);
+  };
+
   const stopTurn = async () => {
     if (!props.onStop || stoppingRef.current) return;
     stoppingRef.current = true;
@@ -319,16 +352,33 @@ export const ConversationComposer = memo(function ConversationComposer(
       stoppingRef.current = false;
     }
     if (!restored) return;
-    const current = draftRef.current.text;
-    const next: ConversationDraft = {
-      ...draftRef.current,
-      text: current.trim() ? `${restored}\n${current}` : restored,
-    };
-    replaceMessage(next);
-    storeDraft(storageKey, next);
+    prependDraftText(restored);
     textareaRef.current?.focus({ preventScroll: true });
   };
 
+  useImperativeHandle(props.ref, () => ({
+    canRestoreImages: (images) =>
+      !images.length || composerImagesFit([...images, ...imagesRef.current]),
+    restoreMessage: (message) => {
+      // An image-only message has no text to put ahead of the draft.
+      if (message.text.trim()) prependDraftText(message.text);
+      const restoredImages = message.images ?? [];
+      if (restoredImages.length) {
+        // The queued images already left the queue, so they win. A draft
+        // image added during the cancel stays only while it still fits.
+        const merged = [...restoredImages];
+        for (const image of imagesRef.current) {
+          if (composerImagesFit([...merged, image])) merged.push(image);
+        }
+        if (merged.length < restoredImages.length + imagesRef.current.length) {
+          setImageError("Some draft images did not fit. Add them again.");
+        }
+        replaceImages(merged);
+      }
+      textareaRef.current?.focus({ preventScroll: true });
+    },
+  }));
+
   const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (
       event.key === "Enter" &&
@@ -484,7 +534,6 @@ export const ConversationComposer = memo(function ConversationComposer(
                 aria-label={props.stopPending ? "Stopping" : "Stop"}
                 disabled={props.stopPending || !online}
                 onClick={() => void stopTurn()}
-                title="Stop Junior"
               >
                 <Square aria-hidden="true" fill="currentColor" size={12} />
                 <span className="hidden md:inline">
@@ -501,7 +550,6 @@ export const ConversationComposer = memo(function ConversationComposer(
                 sendLocked ||
                 readingImages
               }
-              title={sendLocked ? "Sending message" : props.submitLabel}
               variant="primary"
               type="submit"
             >
@@ -571,6 +619,30 @@ function readStoredDraft(storageKey: string): ConversationDraft {
   return emptyDraft();
 }
 
+function draftStorageKey(draftId: string): string {
+  return `${DRAFT_STORAGE_PREFIX}${encodeURIComponent(draftId)}`;
+}
+
+function withPrependedText(
+  draft: ConversationDraft,
+  text: string,
+): ConversationDraft {
+  return {
+    ...draft,
+    text: draft.text.trim() ? `${text}\n${draft.text}` : text,
+  };
+}
+
+/**
+ * Put queued text ahead of the saved draft when the composer is not mounted.
+ * The composer reads the saved draft the next time it opens.
+ */
+export function restoreStoredDraftText(draftId: string, text: string): void {
+  if (!text.trim()) return;
+  const storageKey = draftStorageKey(draftId);
+  storeDraft(storageKey, withPrependedText(readStoredDraft(storageKey), text));
+}
+
 function storeDraft(storageKey: string, draft: ConversationDraft): void {
   if (typeof window === "undefined") return;
   try {

package/src/client/conversations/ConversationDetails.tsx

@@ -28,6 +28,7 @@ import {
   ConversationWatches,
   useConversationWatches,
 } from "./ConversationWatches";
+import { DetailsCard } from "./DetailsList";
 import { ShareConversationButton } from "./ShareConversationButton";
 import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 
@@ -158,13 +159,13 @@ export function ConversationDetails(props: {
                 </div>
               ) : null}
               {sections.map((section) => (
-                <DetailsSection
+                <DetailsCard
                   count={section.count}
                   key={section.key}
                   title={section.title}
                 >
                   {section.content}
-                </DetailsSection>
+                </DetailsCard>
               ))}
             </div>
           ) : (
@@ -201,31 +202,6 @@ function TabCount(props: { count: number | undefined }) {
   );
 }
 
-/** Group one kind of conversation detail in a compact card. */
-function DetailsSection(props: {
-  children: ReactNode;
-  count?: number;
-  title?: string;
-}) {
-  return (
-    <section className="grid min-w-0 gap-2.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel p-3">
-      {props.title ? (
-        <h3 className="m-0 flex items-center gap-1.5 font-sans text-xs font-medium text-dashboard-text-muted">
-          {props.title}
-          {props.count ? (
-            <span className="tabular-nums text-dashboard-text-faint">
-              {props.count.toLocaleString("en-US")}
-            </span>
-          ) : null}
-        </h3>
-      ) : null}
-      <div className="min-w-0 break-words font-sans text-xs leading-relaxed text-dashboard-text-muted">
-        {props.children}
-      </div>
-    </section>
-  );
-}
-
 /** Draw the Sentry glyph in the current text color, sized like a header icon. */
 function SentryGlyph() {
   return (

package/src/client/conversations/ConversationEventDetails.tsx

@@ -4,6 +4,10 @@ import { ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "../styles";
 import { DetailsPanel } from "../components/DetailsPanel";
 import { Button } from "../components/ui/button";
+import {
+  ButtonGroup,
+  ButtonGroupSeparator,
+} from "../components/ui/button-group";
 import { Skeleton } from "../components/ui/skeleton";
 import type { ConversationTranscript } from "../types";
 import { useEventTime } from "./eventTime";
@@ -11,8 +15,9 @@ import { EventDetails } from "./EventDetails";
 import { ForkConversationButton } from "./ForkConversationButton";
 
 // Step buttons keep focus at the ends of the log, so style the ARIA state.
+// They sit in one bordered group, so they are a little smaller than `size-9`.
 const stepButtonClass =
-  "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:!bg-transparent data-disabled:hover:!text-dashboard-text-muted";
+  "size-8 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:!bg-transparent data-disabled:hover:!text-dashboard-text-muted";
 
 /**
  * Show the selected event without blocking the main conversation's event log.
@@ -30,14 +35,21 @@ export function ConversationEventDetails(props: {
 }) {
   const { conversation, event, onSelect } = props;
   const time = useEventTime();
+  // The sequence number matches the `event` link parameter and the row label.
+  // The line stays on one row beside the actions. The tooltip keeps the
+  // milliseconds that the short timestamp leaves out.
   const timestamp = event ? (
-    <time
-      className="block break-words font-mono text-xs text-dashboard-text-muted"
-      dateTime={event.createdAt}
-      title={event.createdAt}
-    >
-      {time.formatTimestamp(event.createdAt)}
-    </time>
+    <p className="m-0 flex min-w-0 gap-x-1.5 whitespace-nowrap font-sans text-xs tabular-nums text-dashboard-text-muted">
+      <span className="shrink-0">#{event.seq}</span>
+      <span aria-hidden="true">·</span>
+      <time
+        className="min-w-0 truncate"
+        dateTime={event.createdAt}
+        title={time.formatTimestamp(event.createdAt)}
+      >
+        {time.formatShortTimestamp(event.createdAt)}
+      </time>
+    </p>
   ) : null;
   const title = event ? (
     <>
@@ -54,7 +66,10 @@ export function ConversationEventDetails(props: {
   );
   const actions =
     onSelect && event ? (
-      <>
+      <ButtonGroup
+        aria-label="Event navigation"
+        className="rounded-md border border-dashboard-border"
+      >
         <Button
           aria-label="Previous event"
           className={stepButtonClass}
@@ -68,6 +83,7 @@ export function ConversationEventDetails(props: {
         >
           <ChevronUp aria-hidden="true" size={15} />
         </Button>
+        <ButtonGroupSeparator />
         <Button
           aria-label="Next event"
           className={stepButtonClass}
@@ -81,7 +97,7 @@ export function ConversationEventDetails(props: {
         >
           <ChevronDown aria-hidden="true" size={15} />
         </Button>
-      </>
+      </ButtonGroup>
     ) : undefined;
 
   return (

package/src/client/conversations/ConversationHomeList.tsx

@@ -35,6 +35,7 @@ export function ConversationHomeList(props: {
   finishedConversationIds: ReadonlySet<string>;
   loading?: boolean;
   timeZone: string;
+  waitingConversationIds: ReadonlySet<string>;
 }) {
   const [archivedConversation, setArchivedConversation] =
     useState<Conversation>();
@@ -94,6 +95,7 @@ export function ConversationHomeList(props: {
             key={section.key}
             onArchiveError={handleArchiveError}
             onArchived={handleArchived}
+            waitingConversationIds={props.waitingConversationIds}
             section={section}
           />
         ))}
@@ -169,6 +171,7 @@ function ConversationCardSection(props: {
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
   section: ConversationSection;
+  waitingConversationIds: ReadonlySet<string>;
 }) {
   return (
     <section aria-labelledby={`conversation-section-${props.section.key}`}>
@@ -188,6 +191,7 @@ function ConversationCardSection(props: {
             key={conversation.id}
             onArchiveError={props.onArchiveError}
             onArchived={props.onArchived}
+            waitingOnViewer={props.waitingConversationIds.has(conversation.id)}
           />
         ))}
       </div>
@@ -200,6 +204,7 @@ function ConversationCard(props: {
   finishedSinceSeen: boolean;
   onArchiveError(conversation: Conversation, wasArchiving: boolean): void;
   onArchived(conversation: Conversation): void;
+  waitingOnViewer: boolean;
 }) {
   const conversation = props.conversation;
   const archive = useArchiveConversation(conversation.id, {
@@ -231,6 +236,7 @@ function ConversationCard(props: {
               finishedSinceSeen={props.finishedSinceSeen}
               isPrivate={isPrivate}
               status={status}
+              waitingOnViewer={props.waitingOnViewer}
             />
           </span>
           <h4 className="m-0 truncate font-display text-base font-medium leading-snug text-dashboard-text">

package/src/client/conversations/ConversationListStatusIcon.tsx

@@ -4,12 +4,26 @@ import { ActiveIndicator } from "../components/ActiveIndicator";
 import { cn } from "../styles";
 import type { VisualStatus } from "../types";
 
-/** Render a conversation status marker, with new completions taking priority. */
+/**
+ * Render a conversation status marker. "Waiting on you" replaces every other
+ * marker, then new completions take priority.
+ */
 export function ConversationListStatusIcon(props: {
   finishedSinceSeen: boolean;
   isPrivate: boolean;
   status: VisualStatus;
+  waitingOnViewer: boolean;
 }) {
+  if (props.waitingOnViewer) {
+    return (
+      <span
+        aria-label="Waiting on you"
+        className="size-2 shrink-0 rounded-full bg-violet-300 shadow-[0_0_6px_rgba(196,181,253,0.7)]"
+        role="img"
+      />
+    );
+  }
+
   if (props.finishedSinceSeen) {
     return (
       <span