@sentry/junior-dashboard 0.265.0 → 0.266.0

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

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { Loader2Icon } from "lucide-react";
+import { cn } from "@dashboard/lib/utils";
+
+/** Render a loading spinner. It stops spinning when the user prefers reduced motion. */
+function Spinner({ className, ...props }: ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      data-slot="spinner"
+      role="status"
+      aria-label="Loading"
+      className={cn(
+        "size-4 animate-spin motion-reduce:animate-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

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/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/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 (

package/src/client/conversations/ConversationSidebar.tsx

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

package/src/client/conversations/ConversationUsageBreakdown.tsx

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

package/src/client/conversations/ConversationWatches.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import {
   Bot,
+  ChevronRight,
   CircleDot,
   Eye,
   FolderGit2,
@@ -14,7 +15,7 @@ import {
   Timer,
   Users,
 } from "lucide-react";
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import {
   conversationWatchesReportSchema,
   type ConversationWatch,
@@ -22,7 +23,8 @@ import {
 
 import { formatTime } from "../format";
 import { fetchDashboardJson } from "../http";
-import { DetailsList, DetailsRow, DetailsRowLine } from "./DetailsList";
+import { dashboardDisclosureChevronClass } from "../styles";
+import { DetailsList, DetailsRow } from "./DetailsList";
 
 /** Load the active Watches that one Conversation owns. */
 export function useConversationWatches(conversationId: string) {
@@ -39,8 +41,8 @@ export function useConversationWatches(conversationId: string) {
 }
 
 /**
- * Show what can wake this Conversation: each active Watch with the resource,
- * the reason, and the event types that deliver to it.
+ * Show what can wake this Conversation: one line per active Watch. A line
+ * expands to show the reason and the event types that deliver to it.
  */
 export function ConversationWatches(props: { watches: ConversationWatch[] }) {
   return (
@@ -66,65 +68,81 @@ const resourceIcons: Partial<Record<string, LucideIcon>> = {
 };
 
 /**
- * Show one Watch in up to three short lines: the resource and time left, the
- * reason it exists, then the event types that wake the Conversation.
+ * Show one Watch as a single line with its resource. Clicking the line shows
+ * why the Watch exists and which events wake the Conversation. The expiry is
+ * an internal limit, so the row does not show it.
  */
 function WatchRow(props: { watch: ConversationWatch }) {
   const { watch } = props;
+  const [expanded, setExpanded] = useState(false);
   const Icon = watch.redacted
     ? LockKeyhole
     : (resourceIcons[watch.resourceType] ?? Eye);
-  const isTimer = watch.firesAt !== undefined;
-  const until = watch.firesAt ?? watch.expiresAt;
   const resource = `${watch.namespace} ${watch.resourceType.replaceAll("_", " ")}`;
-  // A timer has one event, and the time already says when it fires.
-  const events = isTimer ? [] : watch.events;
+  // A timer has one event, and its fire time already says when it wakes.
+  const events = watch.firesAt ? [] : watch.events;
   const filters = Object.entries(watch.match ?? {});
-
-  return (
+  const row = (
     <DetailsRow
+      expanded={expanded}
       icon={<Icon aria-hidden="true" className="size-3.5" />}
       meta={
-        <time dateTime={until}>
-          {isTimer
-            ? `in ${formatRemaining(until)}`
-            : `${formatRemaining(until)} left`}
-        </time>
+        <span className="grid size-5 place-items-center">
+          <ChevronRight
+            aria-hidden="true"
+            className={dashboardDisclosureChevronClass}
+          />
+        </span>
       }
+      onToggle={() => setExpanded((value) => !value)}
       title={watch.label ?? `Private ${resource}`}
-      tooltip={`${isTimer ? "Fires" : "Expires"} ${formatTime(until, {
-        dateStyle: "medium",
-        timeStyle: "short",
-      })}`}
-    >
-      {watch.intent ? (
-        <DetailsRowLine className="line-clamp-2 break-words">
-          {watch.intent}
-        </DetailsRowLine>
-      ) : null}
-      {events.length > 0 || filters.length > 0 || watch.childAgent ? (
-        <DetailsRowLine className="flex flex-wrap items-center gap-1 pt-0.5">
-          {events.map((event) => (
-            <WatchChip key={event}>
-              {watchEventLabel(event, watch.resourceType)}
-            </WatchChip>
-          ))}
-          {filters.map(([key, value]) => (
-            <WatchChip filter key={`match:${key}`}>
-              {key.replaceAll("_", " ")}: {[value].flat().join(", ")}
-            </WatchChip>
-          ))}
-          {watch.childAgent ? (
-            <span className="inline-flex min-w-0 items-center gap-1 px-0.5">
-              <Bot aria-hidden="true" className="size-3 shrink-0" />
-              <span className="truncate">
-                via {watch.childAgent.name ?? "subagent"}
-              </span>
+    />
+  );
+  if (!expanded) return row;
+
+  return (
+    <>
+      {row}
+      {/* Indent under the title: icon column, column gap, and row padding. */}
+      <div className="grid min-w-0 gap-1.5 pb-2 pl-9 pr-1.5 pt-0.5 text-xs leading-4 text-dashboard-text-muted">
+        {watch.intent ? (
+          <p className="m-0 break-words">{watch.intent}</p>
+        ) : null}
+        {watch.firesAt ? (
+          <p className="m-0">
+            Fires{" "}
+            <time dateTime={watch.firesAt}>
+              {formatTime(watch.firesAt, {
+                dateStyle: "medium",
+                timeStyle: "short",
+              })}
+            </time>
+          </p>
+        ) : null}
+        {events.length > 0 || filters.length > 0 ? (
+          <div className="flex flex-wrap items-center gap-1">
+            {events.map((event) => (
+              <WatchChip key={event}>
+                {watchEventLabel(event, watch.resourceType)}
+              </WatchChip>
+            ))}
+            {filters.map(([key, value]) => (
+              <WatchChip filter key={`match:${key}`}>
+                {key.replaceAll("_", " ")}: {[value].flat().join(", ")}
+              </WatchChip>
+            ))}
+          </div>
+        ) : null}
+        {watch.childAgent ? (
+          <p className="m-0 flex min-w-0 items-center gap-1">
+            <Bot aria-hidden="true" className="size-3 shrink-0" />
+            <span className="truncate">
+              via {watch.childAgent.name ?? "subagent"}
             </span>
-          ) : null}
-        </DetailsRowLine>
-      ) : null}
-    </DetailsRow>
+          </p>
+        ) : null}
+      </div>
+    </>
   );
 }
 
@@ -153,13 +171,3 @@ function watchEventLabel(event: string, resourceType: string): string {
     parts[0] === resourceType && parts.length > 1 ? parts.slice(1) : parts;
   return rest.join(" ").replaceAll("_", " ");
 }
-
-/** Format the time until a Watch fires or expires as one compact unit. */
-function formatRemaining(value: string): string {
-  const ms = Math.max(0, Date.parse(value) - Date.now());
-  const minutes = Math.round(ms / 60_000);
-  if (minutes < 60) return `${Math.max(1, minutes)}m`;
-  const hours = Math.round(minutes / 60);
-  if (hours < 48) return `${hours}h`;
-  return `${Math.round(hours / 24)}d`;
-}