@sentry/junior-dashboard 0.262.0 → 0.264.0

package/src/client/components/BottomSheet.tsx

@@ -1,31 +1,29 @@
 import type { ReactNode } from "react";
 
-import { Sheet, SheetBody, SheetContent } from "./Sheet";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "./ui/sheet";
+import { useSheet } from "./ui/useSheet";
 
-/** Show details in a Base UI sheet with a swipe handle and no header controls. */
+/** Show app details in the shadcn sheet with a visible title and close control. */
 export function BottomSheet(props: {
   children: ReactNode;
   label: string;
   onClose(): void;
 }) {
+  const sheet = useSheet(props.onClose);
   return (
-    <Sheet onClose={props.onClose} side="bottom">
-      <SheetContent label={props.label} side="bottom">
-        <div className="rounded-t-2xl px-4 pt-1 md:px-5">
-          <div
-            aria-hidden="true"
-            data-drawer-handle=""
-            className="flex touch-none cursor-grab justify-center py-3 active:cursor-grabbing"
-          >
-            <span className="h-1 w-9 rounded-full bg-dashboard-border-interactive" />
-          </div>
-        </div>
-        <SheetBody
-          data-base-ui-swipe-ignore=""
-          className="min-h-0 overflow-y-auto overscroll-contain"
-        >
+    <Sheet {...sheet.rootProps}>
+      <SheetContent
+        {...sheet.contentProps}
+        aria-label={props.label}
+        side="bottom"
+        className="mx-auto max-h-full w-full max-w-2xl gap-0 rounded-t-2xl outline-none data-[side=bottom]:h-[85dvh]"
+      >
+        <SheetHeader className="border-b border-dashboard-border">
+          <SheetTitle>{props.label}</SheetTitle>
+        </SheetHeader>
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
           {props.children}
-        </SheetBody>
+        </div>
       </SheetContent>
     </Sheet>
   );

package/src/client/components/Drawer.tsx

@@ -3,10 +3,10 @@ import { useRef, type ReactNode } from "react";
 
 import { cn } from "../styles";
 import { Button } from "./Button";
-import { Sheet, SheetBody, SheetClose, SheetContent } from "./Sheet";
+import { Sheet, SheetClose, SheetContent } from "./ui/sheet";
+import { useSheet } from "./ui/useSheet";
 
-/** Render a side drawer with shared modal focus and dismissal behavior. */
-export function Drawer(props: {
+type DrawerProps = {
   actions?: ReactNode;
   children: ReactNode;
   closeLabel: string;
@@ -15,20 +15,30 @@ export function Drawer(props: {
   openKey: string;
   titleId: string;
   width?: "default" | "wide" | "narrow";
-}) {
+};
+
+/** Render a side drawer with shared modal focus and dismissal behavior. */
+export function Drawer(props: DrawerProps) {
+  return <DrawerContent key={props.openKey} {...props} />;
+}
+
+function DrawerContent(props: DrawerProps) {
   const closeRef = useRef<HTMLButtonElement>(null);
+  const sheet = useSheet(props.onClose, closeRef);
   return (
-    <Sheet key={props.openKey} onClose={props.onClose} side="right">
+    <Sheet {...sheet.rootProps}>
       <SheetContent
-        initialFocusRef={closeRef}
-        titleId={props.titleId}
+        {...sheet.contentProps}
+        aria-labelledby={props.titleId}
         side="right"
+        showCloseButton={false}
         className={cn(
+          "grid min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)] gap-0 outline-none data-[side=right]:w-full data-[side=right]:sm:max-w-none",
           props.width === "wide"
-            ? "md:w-[min(760px,94vw)]"
+            ? "data-[side=right]:md:w-[min(760px,94vw)]"
             : props.width === "narrow"
-              ? "md:w-[min(440px,94vw)]"
-              : "md:w-[min(560px,94vw)]",
+              ? "data-[side=right]:md:w-[min(440px,94vw)]"
+              : "data-[side=right]:md:w-[min(560px,94vw)]",
         )}
       >
         <header className="relative grid grid-cols-[minmax(0,1fr)_auto] gap-3 border-b border-dashboard-border bg-dashboard-bg-elevated px-4 py-3 pt-[max(0.75rem,env(safe-area-inset-top))] md:px-5">
@@ -49,9 +59,9 @@ export function Drawer(props: {
             </SheetClose>
           </div>
         </header>
-        <SheetBody className="min-h-0 overflow-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-5">
+        <div className="min-h-0 overflow-auto px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] md:px-5">
           {props.children}
-        </SheetBody>
+        </div>
       </SheetContent>
     </Sheet>
   );

package/src/client/components/README.md

@@ -4,6 +4,36 @@ Shared dashboard components live here. Feature pages compose these surfaces
 instead of copying Tailwind blocks. See `policies/frontend-components.md` for
 the policy. `pnpm dashboard-style:check` enforces the token rules below.
 
+## shadcn/ui
+
+`packages/junior-dashboard/components.json` configures shadcn/ui for this package.
+It uses Base UI (`base-nova`), Tailwind 4, and Lucide. Add components from the
+repository root:
+
+```sh
+pnpm --filter @sentry/junior-dashboard exec shadcn add <component>
+```
+
+The CLI writes components to `src/client/components/ui/`. Its `@dashboard/*`
+alias points to `src/client/*`. The existing `@/*` alias still points to core.
+`src/client/lib/utils.ts` provides the shadcn `cn` helper. Existing components
+keep the class join helper in `src/client/styles.ts` until they are migrated.
+
+The shadcn color tokens in `src/tailwind.css` use the dashboard tokens in both
+themes. Primary actions use `text-solid` with inverse text. Danger uses the
+same theme-aware rose shade as existing danger controls. The `dark:` variant
+follows `data-theme`. Keep the existing Tailwind radius scale. Do not apply the CLI's global border or body resets to existing
+components. Check each added component against the rules below and add its
+gallery fixture before use.
+
+`ui/sheet.tsx` is the shadcn Base UI Dialog Sheet. It supports all four edges,
+uses the dashboard overlay and close button, and stops motion when reduced
+motion is set. The copied source license is in `ui/sheet.LICENSE`.
+`Drawer` and `BottomSheet` compose this component for app details.
+`ui/useSheet.ts` owns their close lifecycle, shared document scroll lock, and
+focus rules when a resize puts one modal below another. Conversation browser
+scenarios cover dismissal, nested focus, and layout changes.
+
 ## Foundations
 
 Tokens live in the `@theme` block of `src/tailwind.css`. Keep every color in a
@@ -80,15 +110,13 @@ token so each theme can redefine it.
   sentence-case text, with no border or fill. It is not a control.
 - **Messages.** Use `Notice` for compact transient messages and `FormNotice`
   for wrapping form recovery text.
-- **Overlays.** `Sheet` is a local adaptation of shadcn/ui's Base UI Sheet.
-  It uses Base UI Drawer for focus, dismissal, and native swipe support. The
-  app's shared scroll lock keeps it in sync with the mobile conversation shell.
-  `SheetContent` owns side placement, backdrop fade, and slide transitions.
-  `Drawer` adds a visible header and close control. `BottomSheet` adds a swipe
-  handle and keeps content scrolling separate from gestures. Both skip motion
-  when reduced motion is set. Docked conversation details use a non-modal aside
-  so the chat stays usable. The copied component's license is in `Sheet.LICENSE`.
-  `Tooltip` and `IconButtonTooltip` own hover text.
+- **Overlays.** `ui/sheet.tsx` is the shadcn/ui Base UI Sheet. It uses Base UI
+  Dialog for focus and dismissal. `Drawer` adds a visible header and close
+  control. `BottomSheet` puts details below a title and close control. Both use
+  the app's shared scroll lock, skip motion when reduced motion is set, and
+  close with the close button, backdrop, or Escape. Docked conversation details
+  use a non-modal aside so the chat stays usable. `Tooltip` and
+  `IconButtonTooltip` own hover text.
 - **Identity.** `ActorAvatar`, `ParticipantAvatarStack`, and `ObjectIcon`.
   `ObjectIcon` owns native Ticket, Code change, Automation, Deployment, and
   Item icons. It uses the shared type and status mapping and the original

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

@@ -0,0 +1,141 @@
+// Adapted from shadcn/ui Base UI Sheet. See sheet.LICENSE.
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import { cn } from "@dashboard/lib/utils";
+
+import { Button } from "../Button";
+import { XIcon } from "lucide-react";
+
+/** Own the open state and modal focus rules for a shadcn sheet. */
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+/** Open the sheet from a button and restore focus when it closes. */
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+/** Close the sheet through Base UI dismissal and focus handling. */
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-dashboard-overlay transition-opacity duration-180 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Place the sheet on one edge with themed chrome and a close control. */
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) {
+  // Keep portal order tied to the app tree when a resize mounts another sheet.
+  const portalRef = React.useRef<HTMLDivElement>(null);
+  return (
+    <>
+      <div ref={portalRef} className="contents" />
+      <SheetPortal container={portalRef}>
+        <SheetOverlay />
+        <SheetPrimitive.Popup
+          data-slot="sheet-content"
+          data-dashboard-modal=""
+          data-side={side}
+          className={cn(
+            "fixed z-50 flex flex-col gap-4 border-dashboard-border-strong bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition-[opacity,transform] duration-180 ease-[cubic-bezier(0.2,0.8,0.2,1)] motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <SheetPrimitive.Close
+              data-slot="sheet-close"
+              render={<Button className="absolute top-3 right-3" size="icon" />}
+            >
+              <XIcon aria-hidden="true" size={15} strokeWidth={2.25} />
+              <span className="sr-only">Close</span>
+            </SheetPrimitive.Close>
+          )}
+        </SheetPrimitive.Popup>
+      </SheetPortal>
+    </>
+  );
+}
+
+/** Group the sheet title and description clear of the close control. */
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1 p-4 pr-14", className)}
+      {...props}
+    />
+  );
+}
+
+/** Keep sheet actions at the bottom of the content. */
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+/** Give the sheet its accessible name. */
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-lg font-semibold text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+/** Describe the sheet for assistive technology. */
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

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

@@ -0,0 +1,74 @@
+import type { Dialog } from "@base-ui/react/dialog";
+import {
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type RefObject,
+} from "react";
+
+import {
+  acquireBodyScrollLock,
+  releaseBodyScrollLock,
+} from "../../bodyScrollLock";
+
+// A resize can mount conversation details below an already open side drawer.
+// Document order keeps the front modal in charge across these separate roots.
+function subscribeToSheets(onChange: () => void) {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.body, { childList: true, subtree: true });
+  return () => observer.disconnect();
+}
+
+/** Keep an app sheet mounted through dismissal and share the document scroll lock. */
+export function useSheet(
+  onClose: () => void,
+  initialFocusRef?: RefObject<HTMLElement | null>,
+) {
+  const [open, setOpen] = useState(false);
+  const closingRef = useRef(false);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const topmost = useSyncExternalStore(
+    subscribeToSheets,
+    () => {
+      const modals = document.querySelectorAll("[data-dashboard-modal]");
+      const last = modals[modals.length - 1];
+      return popupRef.current ? last === popupRef.current : !last;
+    },
+    () => true,
+  );
+  useEffect(() => {
+    acquireBodyScrollLock();
+    setOpen(true);
+    return releaseBodyScrollLock;
+  }, []);
+
+  return {
+    rootProps: {
+      open,
+      modal: topmost ? "trap-focus" : false,
+      disablePointerDismissal: !topmost,
+      onOpenChange(nextOpen, details) {
+        if (!nextOpen && !topmost) {
+          details.cancel();
+          return;
+        }
+        closingRef.current = !nextOpen;
+        setOpen(nextOpen);
+      },
+      onOpenChangeComplete(nextOpen) {
+        if (!nextOpen && closingRef.current) onClose();
+      },
+    } satisfies Dialog.Root.Props,
+    contentProps: {
+      ref: popupRef,
+      "aria-modal": topmost ? true : undefined,
+      finalFocus: () => Boolean(closingRef.current && topmost),
+      initialFocus: () => {
+        const modals = document.querySelectorAll("[data-dashboard-modal]");
+        if (modals[modals.length - 1] !== popupRef.current) return false;
+        return initialFocusRef?.current ?? true;
+      },
+    } satisfies Dialog.Popup.Props,
+  };
+}

package/src/client/conversations/ConversationChildAgents.tsx

@@ -1,14 +1,24 @@
 import { useQuery } from "@tanstack/react-query";
-import { Bot, CircleAlert, LockKeyhole } from "lucide-react";
+import {
+  Bot,
+  Circle,
+  CircleAlert,
+  CircleCheck,
+  CircleDot,
+  CirclePause,
+  CircleX,
+  LoaderCircle,
+  LockKeyhole,
+  type LucideIcon,
+} from "lucide-react";
 import {
   conversationChildAgentsReportSchema,
   type ConversationChildAgent,
 } from "@sentry/junior/api/schema";
 
-import { StatusChip, type StatusChipTone } from "../components/StatusChip";
+import type { StatusChipTone } from "../components/StatusChip";
 import {
   formatConversationCostTotal,
-  formatRelativeTime,
   formatRuntime,
   formatTime,
   formatUsageTotal,
@@ -85,9 +95,12 @@ export function ConversationChildAgents(props: {
   }
 
   return (
-    <ol aria-label="Subagents" className="m-0 grid list-none gap-2 p-0">
+    <ol
+      aria-label="Subagents"
+      className="m-0 grid list-none gap-px overflow-hidden rounded-lg border border-dashboard-border-subtle bg-dashboard-border-subtle p-0"
+    >
       {query.data.agents.map((agent) => (
-        <li key={agent.conversationId}>
+        <li className="bg-dashboard-surface-panel" key={agent.conversationId}>
           <ChildAgentRow agent={agent} onOpen={props.onOpenAgent} />
         </li>
       ))}
@@ -95,9 +108,48 @@ export function ConversationChildAgents(props: {
   );
 }
 
+const statusIcons: Partial<Record<string, LucideIcon>> = {
+  active: CircleDot,
+  blocked: CircleAlert,
+  completed: CircleCheck,
+  error: CircleX,
+  failed: CircleX,
+  paused: CirclePause,
+  running: LoaderCircle,
+};
+
+const statusIconToneClass: Record<StatusChipTone, string> = {
+  accent: "text-violet-300",
+  danger: "text-rose-300",
+  info: "text-cyan-300",
+  neutral: "text-dashboard-text-faint",
+  success: "text-emerald-300",
+  warning: "text-amber-300",
+};
+
+/** Mark a child agent status with one icon and an audible label. */
+function ChildAgentStatusIcon(props: { status: string }) {
+  const Icon = statusIcons[props.status] ?? Circle;
+  return (
+    <span className="mt-px grid size-4 shrink-0 place-items-center">
+      <Icon
+        aria-hidden="true"
+        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>
+    </span>
+  );
+}
+
 /**
- * Show who ran, what it was asked to do, and what it cost. The row text is the
- * accessible name, so status, title, task, and error stay audible.
+ * Show one child agent as a dense row: status, task title, and run time first,
+ * then agent name and cost. The row text is the accessible name, so status,
+ * title, and error stay audible.
  */
 function ChildAgentRow(props: {
   agent: ConversationChildAgent;
@@ -107,24 +159,20 @@ function ChildAgentRow(props: {
   const tone = subagentStatusTone(agent.status);
   const task = agent.task?.trim();
   const headline = agent.title ?? task;
-  // A title is often a short form of the task. Skip the task when it adds nothing.
-  const detail = agent.title && task && task !== agent.title ? task : undefined;
   const runtime = formatRuntime(agent.cumulativeDurationMs);
+  const name = agent.redacted ? "Private subagent" : (agent.name ?? "subagent");
   // Totals include this subagent's own subagents. Say so, so the row does not
   // read as the work of this subagent alone.
   const nested = agent.childAgentTotals?.count;
-  const stats = [
+  const meta = [
     formatUsageTotal(agent.cumulativeUsage),
     formatConversationCostTotal(agent.cumulativeUsage, agent.auxiliaryCosts),
-    runtime ? `${runtime} runtime` : "",
-    nested
-      ? `incl. ${nested} nested ${nested === 1 ? "subagent" : "subagents"}`
-      : "",
+    nested ? `+${nested} nested` : "",
   ].filter(Boolean);
 
   return (
     <button
-      className="grid w-full min-w-0 cursor-pointer gap-1.5 rounded-lg border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5 text-left text-inherit transition-colors duration-200 hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
+      className="grid w-full min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-x-2.5 gap-y-0.5 px-3 py-2.5 text-left text-inherit transition-colors hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
       onClick={() =>
         props.onOpen({
           conversationId: agent.conversationId,
@@ -137,59 +185,40 @@ function ChildAgentRow(props: {
           status: agent.status,
         })
       }
+      title={[
+        task && task !== headline ? task : "",
+        `Updated ${formatTime(agent.updatedAt, {
+          dateStyle: "medium",
+          timeStyle: "short",
+        })}`,
+      ]
+        .filter(Boolean)
+        .join("\n")}
       type="button"
     >
-      <span className="flex min-w-0 items-center gap-2 text-xs">
-        {agent.redacted ? (
-          <span className="flex min-w-0 items-center gap-1.5 text-dashboard-text-muted">
-            <LockKeyhole aria-hidden="true" className="size-3 shrink-0" />
-            Private subagent
-          </span>
-        ) : (
-          <span className="min-w-0 truncate font-medium text-dashboard-text-muted">
-            {agent.name ?? "subagent"}
-          </span>
-        )}
-        <StatusChip className="ml-auto shrink-0" size="compact" tone={tone}>
-          {agent.status}
-        </StatusChip>
-        <time
-          className="shrink-0 text-dashboard-text-faint"
-          dateTime={agent.updatedAt}
-          title={`Updated ${formatTime(agent.updatedAt, {
-            dateStyle: "medium",
-            timeStyle: "short",
-          })}`}
-        >
-          {formatRelativeTime(agent.updatedAt)}
-        </time>
+      <ChildAgentStatusIcon status={agent.status} />
+      <span className="min-w-0 truncate text-sm font-medium leading-5 text-dashboard-text">
+        {headline ?? name}
       </span>
-      {headline ? (
-        <span className="line-clamp-2 break-words text-sm font-semibold leading-snug text-dashboard-text">
-          {headline}
-        </span>
-      ) : null}
-      {detail ? (
-        <span className="line-clamp-2 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text-muted">
-          {detail}
+      <span className="shrink-0 text-xs leading-5 tabular-nums text-dashboard-text-muted">
+        {runtime}
+      </span>
+      <span className="col-start-2 col-end-4 flex min-w-0 items-center gap-1.5 text-xs leading-4 text-dashboard-text-muted">
+        {agent.redacted ? (
+          <LockKeyhole aria-hidden="true" className="size-3 shrink-0" />
+        ) : null}
+        <span className="min-w-0 truncate">
+          {[headline ? name : "", ...meta].filter(Boolean).join(" · ")}
         </span>
-      ) : null}
+      </span>
       {agent.error ? (
         <span
           className={cn(
-            "flex min-w-0 items-start gap-1.5 text-xs leading-relaxed",
+            "col-start-2 col-end-4 line-clamp-2 min-w-0 whitespace-pre-wrap break-words pt-0.5 text-xs leading-4",
             errorToneClass[tone] ?? "text-dashboard-text-muted",
           )}
         >
-          <CircleAlert aria-hidden="true" className="mt-0.5 size-3 shrink-0" />
-          <span className="line-clamp-3 min-w-0 whitespace-pre-wrap break-words">
-            {agent.error}
-          </span>
-        </span>
-      ) : null}
-      {stats.length > 0 ? (
-        <span className="block text-xs tabular-nums text-dashboard-text-muted">
-          {stats.join(" · ")}
+          {agent.error}
         </span>
       ) : null}
     </button>