@sentry/junior-dashboard 0.265.0 → 0.267.0

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

@@ -37,6 +37,19 @@ function TableBody({ className, ...props }: ComponentProps<"tbody">) {
   );
 }
 
+function TableFooter({ className, ...props }: ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t border-dashboard-border font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
 function TableRow({ className, ...props }: ComponentProps<"tr">) {
   return (
     <tr
@@ -77,4 +90,12 @@ function TableCell({ className, ...props }: ComponentProps<"td">) {
   );
 }
 
-export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell };
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+};

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

@@ -132,7 +132,7 @@ function TooltipContent({
         collisionPadding={8}
         side={side}
         sideOffset={sideOffset}
-        className="isolate z-50 data-anchor-hidden:hidden"
+        className="isolate z-50 data-anchor-hidden:invisible"
       >
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"

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/ConversationChildAgents.tsx

@@ -7,7 +7,6 @@ import {
   CircleDot,
   CirclePause,
   CircleX,
-  LoaderCircle,
   LockKeyhole,
   type LucideIcon,
 } from "lucide-react";
@@ -17,6 +16,7 @@ import {
 } from "@sentry/junior/api/schema";
 
 import type { StatusChipTone } from "../components/StatusChip";
+import { Spinner } from "../components/ui/spinner";
 import {
   formatConversationCostTotal,
   formatRuntime,
@@ -115,7 +115,6 @@ const statusIcons: Partial<Record<string, LucideIcon>> = {
   error: CircleX,
   failed: CircleX,
   paused: CirclePause,
-  running: LoaderCircle,
 };
 
 const statusIconToneClass: Record<StatusChipTone, string> = {
@@ -129,7 +128,10 @@ const statusIconToneClass: Record<StatusChipTone, string> = {
 
 /** Mark a child agent status with one icon and an audible label. */
 function ChildAgentStatusIcon(props: { status: string }) {
-  const Icon = statusIcons[props.status] ?? Circle;
+  const Icon =
+    props.status === "running"
+      ? Spinner
+      : (statusIcons[props.status] ?? Circle);
   return (
     <span className="mt-px grid size-4 shrink-0 place-items-center">
       <Icon
@@ -137,8 +139,6 @@ function ChildAgentStatusIcon(props: { status: string }) {
         className={cn(
           "size-3.5",
           statusIconToneClass[subagentStatusTone(props.status)],
-          props.status === "running" &&
-            "animate-spin motion-reduce:animate-none",
         )}
       />
       <span className="sr-only">{props.status}</span>

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/ConversationHeader.tsx

@@ -10,6 +10,7 @@ import {
 import { Ellipsis, Menu } from "lucide-react";
 
 import { SearchInput } from "../components/SearchInput";
+import { Button } from "../components/ui/button";
 import { cn } from "../styles";
 import {
   MobileHeaderActionsPortal,
@@ -149,17 +150,17 @@ export function ConversationHeader(props: {
             view={props.view}
           />
           {openMobileNavigation ? (
-            <button
-              className="mt-0.5 flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-hover focus-visible:bg-dashboard-fill-hover focus-visible:outline-none"
+            <Button
+              className="mt-0.5"
               onClick={() => {
                 setMobileMenuOpen(false);
                 openMobileNavigation();
               }}
-              type="button"
+              size="menu"
             >
               <Menu aria-hidden="true" size={16} strokeWidth={2} />
               App menu
-            </button>
+            </Button>
           ) : null}
         </div>
       ) : null}

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -235,19 +235,16 @@ function MenuActionButton(props: {
   pressed?: boolean;
 }) {
   return (
-    <button
+    <Button
       aria-label={props.label}
       aria-pressed={props.pressed}
-      className={cn(
-        "flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-strong focus-visible:outline-none",
-        props.pressed && "bg-dashboard-fill-strong",
-      )}
+      className={props.pressed ? "bg-dashboard-fill-strong" : undefined}
       onClick={props.onClick}
-      type="button"
+      size="menu"
     >
       {props.children}
       <span>{props.label}</span>
-    </button>
+    </Button>
   );
 }
 
@@ -262,16 +259,15 @@ function ArchiveConversationButton(
   const Icon = props.archived ? ArchiveRestore : Archive;
   if (props.layout === "menu") {
     return (
-      <button
+      <Button
         aria-label={label}
-        className="flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-strong focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
         disabled={props.disabled}
         onClick={props.onClick}
-        type="button"
+        size="menu"
       >
         <Icon aria-hidden="true" size={16} strokeWidth={2} />
         <span>{label}</span>
-      </button>
+      </Button>
     );
   }
   return (