@sentry/junior-dashboard 0.265.0 → 0.267.0

package/src/client/conversations/EventUsage.tsx

@@ -1,6 +1,15 @@
 import type { ConversationUsage } from "@sentry/junior/api/schema";
 
 import { formatCostBreakdown, summarizeCost } from "../format";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableFooter,
+  TableHeader,
+  TableRow,
+} from "../components/ui/table";
 import { cn } from "../styles";
 
 /** Align recorded token counts with their costs without adding overlapping counters. */
@@ -31,83 +40,53 @@ export function EventUsage({ usage }: { usage?: ConversationUsage }) {
     );
   }
 
+  const total = rows.find((row) => row.label === "Total");
   return (
     <>
-      <div className="min-w-0 overflow-x-auto">
-        <table
-          aria-label="Model call token and cost breakdown"
-          className="w-full min-w-72 table-fixed border-collapse text-xs leading-relaxed"
-        >
-          <colgroup>
-            <col />
-            <col className="w-24" />
-            <col className="w-24" />
-          </colgroup>
-          <thead>
-            <tr className="border-b border-dashboard-border text-dashboard-text-muted">
-              <th scope="col" className="py-2 text-left font-normal">
-                Usage
-              </th>
-              <th scope="col" className="py-2 text-right font-normal">
-                Tokens
-              </th>
-              <th scope="col" className="py-2 text-right font-normal">
-                Cost (USD)
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map((row) => (
-              <tr
-                key={row.label}
-                className={cn(
-                  "border-b border-dashboard-border-subtle last:border-b-0",
-                  row.label === "Total" &&
-                    "border-t border-dashboard-border font-semibold",
-                )}
-              >
-                <th
-                  scope="row"
-                  className={cn(
-                    "py-2 text-left font-normal",
-                    row.label === "Total"
-                      ? "font-semibold text-dashboard-text"
-                      : "text-dashboard-text-muted",
-                  )}
-                >
-                  {row.label}
-                </th>
-                <td className="py-2 text-right font-sans tabular-nums text-dashboard-text">
-                  {row.tokens === undefined ? (
-                    <span
-                      aria-label="Not recorded"
-                      className="text-dashboard-text-faint"
-                    >
-                      —
-                    </span>
-                  ) : (
-                    row.tokens.toLocaleString("en-US")
-                  )}
-                </td>
-                <td className="py-2 text-right font-sans tabular-nums text-dashboard-text">
-                  {row.cost === undefined ? (
-                    <span
-                      aria-label="Not recorded separately"
-                      className="text-dashboard-text-faint"
-                    >
-                      —
-                    </span>
-                  ) : (
-                    <span title={`${row.cost} USD`}>
-                      {formatCostBreakdown({ total: row.cost })}
-                    </span>
-                  )}
-                </td>
-              </tr>
+      <Table
+        aria-label="Model call token and cost breakdown"
+        className="min-w-72 table-fixed text-xs leading-relaxed"
+      >
+        <colgroup>
+          <col />
+          <col className="w-24" />
+          <col className="w-24" />
+        </colgroup>
+        <TableHeader>
+          <TableRow className="border-dashboard-border">
+            <TableHead
+              scope="col"
+              className="px-0 py-2 leading-relaxed font-normal"
+            >
+              Usage
+            </TableHead>
+            <TableHead
+              scope="col"
+              className="px-0 py-2 text-right leading-relaxed font-normal"
+            >
+              Tokens
+            </TableHead>
+            <TableHead
+              scope="col"
+              className="px-0 py-2 text-right leading-relaxed font-normal"
+            >
+              Cost (USD)
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows
+            .filter((row) => row !== total)
+            .map((row) => (
+              <UsageRow key={row.label} {...row} />
             ))}
-          </tbody>
-        </table>
-      </div>
+        </TableBody>
+        {total ? (
+          <TableFooter className="font-semibold">
+            <UsageRow {...total} total />
+          </TableFooter>
+        ) : null}
+      </Table>
       <p className="m-0 text-xs leading-relaxed text-dashboard-text-muted">
         This call only · Estimated costs
         <br />
@@ -116,3 +95,49 @@ export function EventUsage({ usage }: { usage?: ConversationUsage }) {
     </>
   );
 }
+
+function UsageRow(props: {
+  cost?: number;
+  label: string;
+  tokens?: number;
+  total?: boolean;
+}) {
+  return (
+    <TableRow>
+      <TableHead
+        scope="row"
+        className={cn(
+          "px-0 py-2 leading-relaxed",
+          props.total
+            ? "font-semibold text-dashboard-text"
+            : "font-normal text-dashboard-text-muted",
+        )}
+      >
+        {props.label}
+      </TableHead>
+      <TableCell className="px-0 py-2 text-right font-sans tabular-nums">
+        {props.tokens === undefined ? (
+          <span aria-label="Not recorded" className="text-dashboard-text-faint">
+            —
+          </span>
+        ) : (
+          props.tokens.toLocaleString("en-US")
+        )}
+      </TableCell>
+      <TableCell className="px-0 py-2 text-right font-sans tabular-nums">
+        {props.cost === undefined ? (
+          <span
+            aria-label="Not recorded separately"
+            className="text-dashboard-text-faint"
+          >
+            —
+          </span>
+        ) : (
+          <span title={`${props.cost} USD`}>
+            {formatCostBreakdown({ total: props.cost })}
+          </span>
+        )}
+      </TableCell>
+    </TableRow>
+  );
+}

package/src/client/conversations/ForkConversationButton.tsx

@@ -1,16 +1,22 @@
 import { GitFork } from "lucide-react";
-import { useId, useState } from "react";
-import { createPortal } from "react-dom";
+import { useId, useRef, useState } from "react";
 import { useNavigate } from "react-router";
 import { Button } from "../components/ui/button";
 import { Textarea } from "../components/ui/textarea";
-import { Field, FieldLabel } from "../components/ui/field";
+import { Field, FieldError, FieldLabel } from "../components/ui/field";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+} from "../components/ui/dialog";
+import { useSheet } from "../components/ui/useSheet";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "../components/ui/tooltip";
-import { Drawer } from "../components/Drawer";
 import { DashboardApiError } from "../http";
 import { conversationPath } from "./conversationRoutes";
 import { useForkConversation } from "./queries";
@@ -36,26 +42,22 @@ export function ForkConversationButton(props: ForkTarget) {
         />
         <TooltipContent size="compact">Fork after this message</TooltipContent>
       </Tooltip>
-      {open
-        ? createPortal(
-            <ForkConversationDialog
-              {...props}
-              onClose={() => setOpen(false)}
-            />,
-            document.body,
-          )
-        : null}
+      {open ? (
+        <ForkConversationDialog {...props} onClose={() => setOpen(false)} />
+      ) : null}
     </>
   );
 }
 
 function ForkConversationDialog(props: ForkTarget & { onClose(): void }) {
-  const titleId = useId();
   const inputId = useId();
+  const errorId = `${inputId}-error`;
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const [idempotencyKey] = useState(() => crypto.randomUUID());
   const [message, setMessage] = useState("");
   const navigate = useNavigate();
   const fork = useForkConversation(props.conversationId);
+  const sheet = useSheet(props.onClose, inputRef);
   const submit = () => {
     if (!message.trim() || fork.isPending) return;
     fork.mutate(
@@ -68,68 +70,72 @@ function ForkConversationDialog(props: ForkTarget & { onClose(): void }) {
       },
     );
   };
+  const error = fork.error
+    ? (fork.error instanceof DashboardApiError && fork.error.apiError) ||
+      "Could not fork the conversation. Try again."
+    : undefined;
   return (
-    <Drawer
-      closeLabel="Close fork dialog"
-      header={
-        <h2 id={titleId} className="m-0 text-lg font-semibold">
-          Fork Conversation
-        </h2>
-      }
-      titleId={titleId}
-      openKey={idempotencyKey}
-      onClose={() => {
-        if (!fork.isPending) props.onClose();
+    <Dialog
+      {...sheet.rootProps}
+      onOpenChange={(nextOpen, details) => {
+        // A pending fork must finish so its navigation is not lost.
+        if (!nextOpen && fork.isPending) {
+          details.cancel();
+          return;
+        }
+        sheet.rootProps.onOpenChange(nextOpen, details);
       }}
-      width="narrow"
     >
-      <form
-        className="grid gap-4 text-sm"
-        onSubmit={(event) => {
-          event.preventDefault();
-          submit();
-        }}
-      >
-        <p className="m-0">
-          Creates a fork of the conversation from this point.
-        </p>
-        <Field>
-          <FieldLabel htmlFor={inputId}>Message</FieldLabel>
-          <Textarea
-            id={inputId}
-            autoFocus
-            className="min-h-28 leading-relaxed"
-            placeholder="Message Junior…"
-            value={message}
-            disabled={fork.isPending}
-            onChange={(event) => setMessage(event.target.value)}
-            onKeyDown={(event) => {
-              // Same keys as the composer: Enter sends, Shift+Enter adds a line.
-              if (
-                event.key === "Enter" &&
-                !event.shiftKey &&
-                !event.nativeEvent.isComposing
-              ) {
-                event.preventDefault();
-                submit();
-              }
-            }}
-          />
-        </Field>
-        {fork.error ? (
-          <p role="alert" className="m-0 text-red-300">
-            {(fork.error instanceof DashboardApiError && fork.error.apiError) ||
-              "Could not fork the conversation. Try again."}
-          </p>
-        ) : null}
-        <Button
-          variant="primary"
-          type="submit"
-          disabled={!message.trim() || fork.isPending}
+      <DialogContent {...sheet.contentProps}>
+        <form
+          className="grid gap-4"
+          onSubmit={(event) => {
+            event.preventDefault();
+            submit();
+          }}
         >
-          {fork.isPending ? "Forking…" : "Fork and send"}
-        </Button>
-      </form>
-    </Drawer>
+          <DialogTitle>Fork Conversation</DialogTitle>
+          <Field>
+            <FieldLabel htmlFor={inputId}>Message</FieldLabel>
+            <Textarea
+              ref={inputRef}
+              id={inputId}
+              aria-describedby={error ? errorId : undefined}
+              aria-invalid={error ? true : undefined}
+              className="min-h-24 leading-relaxed"
+              placeholder="Message Junior…"
+              value={message}
+              disabled={fork.isPending}
+              onChange={(event) => setMessage(event.target.value)}
+              onKeyDown={(event) => {
+                // Same keys as the composer: Enter sends, Shift+Enter adds a line.
+                if (
+                  event.key === "Enter" &&
+                  !event.shiftKey &&
+                  !event.nativeEvent.isComposing
+                ) {
+                  event.preventDefault();
+                  submit();
+                }
+              }}
+            />
+            <FieldError id={errorId}>{error}</FieldError>
+          </Field>
+          <DialogFooter>
+            <DialogClose
+              disabled={fork.isPending}
+              render={<Button>Cancel</Button>}
+            />
+            <Button
+              variant="primary"
+              type="submit"
+              disabled={!message.trim() || fork.isPending}
+            >
+              {fork.isPending ? "Forking…" : "Fork and send"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
   );
 }