@sentry/junior-dashboard 0.232.0 → 0.234.0

package/src/client/api.ts

@@ -16,6 +16,7 @@ import {
   personalSpendReportSchema,
   automationExecutionListSchema,
   automationListSchema,
+  automationSummarySchema,
   automationRunListSchema,
 } from "@sentry/junior/api/schema";
 import {
@@ -122,7 +123,7 @@ export function useAutomationsData(enabled: boolean, search: string) {
     queryFn: ({ signal }) =>
       fetchDashboardJson(
         automationListSchema,
-        `/api/automations${search ? `?q=${encodeURIComponent(search)}` : ""}`,
+        `/api/automations${search ? `?${search}` : ""}`,
         signal,
       ),
     placeholderData: keepPreviousData,
@@ -130,6 +131,21 @@ export function useAutomationsData(enabled: boolean, search: string) {
   });
 }
 
+/** Load details by ID, independent of list filters and pagination. */
+export function useAutomationData(enabled: boolean, id: string | undefined) {
+  return useQuery({
+    enabled: enabled && Boolean(id),
+    queryKey: ["dashboard", "automations", "detail", id],
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        automationSummarySchema,
+        `/api/automations/${encodeURIComponent(id!)}`,
+        signal,
+      ),
+    retry: false,
+  });
+}
+
 /** Fetch newest runs across all viewer-visible automations. */
 export function useAutomationRunsData(enabled: boolean) {
   return useQuery({

package/src/client/components/ActorAvatar.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { cn } from "../styles";
+
+/** Show an actor's image, with initials when the image is missing or fails. */
+export function ActorAvatar(props: {
+  name: string;
+  imageUrl?: string;
+  size: "detail" | "list";
+}) {
+  const [failedUrl, setFailedUrl] = useState<string>();
+  const words = props.name.trim().split(/\s+/).filter(Boolean);
+  const initials =
+    words.length > 1
+      ? `${words[0]![0]}${words.at(-1)![0]}`
+      : props.name.slice(0, 2);
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "relative inline-grid shrink-0 place-items-center overflow-hidden rounded-full border-2 border-dashboard-bg bg-dashboard-focus font-sans font-bold leading-none text-dashboard-text-inverse shadow-sm",
+        props.size === "list" ? "size-6 text-2xs" : "size-7 text-xs",
+      )}
+    >
+      {initials.toUpperCase()}
+      {props.imageUrl && props.imageUrl !== failedUrl ? (
+        <img
+          alt=""
+          className="absolute inset-0 size-full object-cover"
+          loading="lazy"
+          onError={() => setFailedUrl(props.imageUrl)}
+          referrerPolicy="no-referrer"
+          src={props.imageUrl}
+        />
+      ) : null}
+    </span>
+  );
+}

package/src/client/components/Button.tsx

@@ -4,7 +4,7 @@ import { Link, type LinkProps } from "react-router";
 import { cn } from "../styles";
 
 type ButtonSize = "default" | "icon";
-type ButtonTone = "default" | "danger";
+type ButtonTone = "default" | "danger" | "primary";
 type ToggleButtonVariant = "pill" | "segment" | "text";
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -44,15 +44,17 @@ export function Button({
                 ? "text-dashboard-text-muted hover:!bg-rose-300/10 hover:!text-rose-300 focus-visible:outline-rose-300/55 disabled:hover:!text-dashboard-text-muted"
                 : "text-dashboard-text-muted hover:!bg-dashboard-fill-strong hover:!text-dashboard-text focus-visible:outline-cyan-300/55 disabled:hover:!text-dashboard-text-muted",
             )
-          : isDanger
-            ? cn(
-                dangerButtonClassName,
-                "disabled:hover:border-dashboard-border-strong disabled:hover:text-dashboard-text-muted",
-              )
-            : cn(
-                buttonClassName,
-                "disabled:hover:border-dashboard-border-emphasis disabled:hover:bg-dashboard-surface-raised disabled:hover:text-dashboard-text",
-              ),
+          : tone === "primary"
+            ? "inline-flex h-9 items-center justify-center gap-2 rounded border border-dashboard-text-solid bg-dashboard-text-solid px-3 font-sans text-sm font-semibold text-dashboard-text-inverse hover:bg-dashboard-text-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
+            : isDanger
+              ? cn(
+                  dangerButtonClassName,
+                  "disabled:hover:border-dashboard-border-strong disabled:hover:text-dashboard-text-muted",
+                )
+              : cn(
+                  buttonClassName,
+                  "disabled:hover:border-dashboard-border-emphasis disabled:hover:bg-dashboard-surface-raised disabled:hover:text-dashboard-text",
+                ),
         props.disabled ? "" : "cursor-pointer",
         className,
       )}

package/src/client/components/Field.tsx

@@ -20,6 +20,7 @@ export function Field(props: {
   children: ReactNode;
   className?: string;
   help?: ReactNode;
+  error?: string;
   htmlFor?: string;
   label: ReactNode;
   size?: FieldSize;
@@ -31,8 +32,20 @@ export function Field(props: {
         {props.label}
       </label>
       {props.children}
+      {props.error ? (
+        <p
+          id={props.htmlFor ? `${props.htmlFor}-error` : undefined}
+          role="alert"
+          className="m-0 text-xs leading-relaxed text-rose-300"
+        >
+          {props.error}
+        </p>
+      ) : null}
       {props.help ? (
-        <p className="m-0 text-xs leading-relaxed text-dashboard-text-muted sm:text-sm">
+        <p
+          id={props.htmlFor ? `${props.htmlFor}-help` : undefined}
+          className="m-0 text-xs leading-relaxed text-dashboard-text-muted sm:text-sm"
+        >
           {props.help}
         </p>
       ) : null}

package/src/client/components/FormNotice.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { TriangleAlert } from "lucide-react";
+import { cn } from "../styles";
+
+/** Keep form recovery text and actions visible without truncation. */
+export function FormNotice(props: {
+  title: string;
+  children?: ReactNode;
+  tone?: "error" | "warning";
+}) {
+  const error = props.tone === "error";
+  return (
+    <div
+      role={error ? "alert" : "status"}
+      className={cn(
+        "flex min-w-0 gap-3 rounded-md border p-4",
+        error
+          ? "border-rose-300/25 bg-rose-300/5"
+          : "border-amber-300/25 bg-amber-300/5",
+      )}
+    >
+      <TriangleAlert
+        aria-hidden
+        size={18}
+        className={cn(
+          "mt-0.5 shrink-0",
+          error ? "text-rose-300" : "text-amber-300",
+        )}
+      />
+      <div className="min-w-0">
+        <p className="m-0 text-sm font-medium">{props.title}</p>
+        {props.children ? (
+          <div className="mt-1 text-sm leading-relaxed text-dashboard-text-muted">
+            {props.children}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/client/components/ParticipantAvatarStack.tsx

@@ -3,6 +3,7 @@ import type { ActorIdentity } from "@sentry/junior/api/schema";
 import { actorLabel } from "../format";
 import { cn } from "../styles";
 import type { Conversation } from "../types";
+import { ActorAvatar } from "./ActorAvatar";
 import { Tooltip } from "./Tooltip";
 
 const MAX_VISIBLE_PARTICIPANTS = 3;
@@ -28,15 +29,6 @@ function participantDescription(participant: ActorIdentity): string {
   return email && email !== name ? `${name}, ${email}` : name;
 }
 
-function participantInitials(participant: ActorIdentity): string {
-  const name = participantName(participant);
-  const words = name.split(/\s+/).filter(Boolean);
-  if (words.length > 1) {
-    return `${words[0]![0] ?? ""}${words.at(-1)?.[0] ?? ""}`.toUpperCase();
-  }
-  return name.slice(0, 2).toUpperCase();
-}
-
 function participantKey(participant: ActorIdentity, index: number): string {
   return (
     participant.email?.trim().toLowerCase() ||
@@ -72,14 +64,14 @@ function Avatar(props: {
     >
       <span
         aria-label={label}
-        className={cn(
-          "relative inline-grid shrink-0 place-items-center rounded-full border-2 border-dashboard-bg bg-dashboard-focus font-sans font-bold leading-none text-dashboard-text-inverse shadow-sm focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus",
-          props.size === "list" ? "size-6 text-2xs" : "size-7 text-xs",
-        )}
+        className="relative inline-flex rounded-full focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
         onKeyDown={(event) => event.stopPropagation()}
         tabIndex={0}
       >
-        {participantInitials(props.participant)}
+        <ActorAvatar
+          name={participantName(props.participant)}
+          size={props.size}
+        />
       </span>
     </Tooltip>
   );

package/src/client/components/README.md

@@ -6,7 +6,7 @@ instead of copying Tailwind blocks.
 ## Layers
 
 1. **Primitives** — `Button` / `ToggleButton`, `Field`, `TextInput`,
-   `StatusChip`, `StatusDot`, `Notice`, `Drawer`, `Tooltip`, `Skeleton`,
+   `StatusChip`, `StatusDot`, `Notice`, `FormNotice`, `Select`, `Drawer`, `Tooltip`, `Skeleton`,
    `PageContentSkeleton`, `SegmentedTabs`, and other small reusable controls.
    Use `SegmentedTabs` for equal-width panel navigation. Pass the selected value,
    items, change handler, and selected panel content. It owns tab/panel labels
@@ -14,7 +14,9 @@ instead of copying Tailwind blocks.
    `ToggleButton` variants (`pill`, `segment`, `text`) over one-off pressed
    styles. Prefer `Field` sizes (`default`, `compact`) over handwritten labels.
    Prefer `StatusDot` for dense table or list status markers and `StatusChip`
-   when the label itself must stay visible. Prefer `PageContentSkeleton`
+   when the label itself must stay visible. `StatusChip` uses a small dot and
+   sentence-case text, without a border, fill, or all-caps styling. It is not
+   an interactive control. Prefer `PageContentSkeleton`
    variants over ad-hoc pulse blocks in route modules. Use `PageRouteLoading`
    when a standard page must keep its real header above a body skeleton. Use a
    feature-owned loading component for distinct geometry, such as conversations.
@@ -54,3 +56,10 @@ instead of copying Tailwind blocks.
 - One-off page glue may stay inline when extraction only adds indirection.
 
 See `policies/frontend-components.md`.
+
+Use `TextInput size="comfortable"` for larger mobile form controls.
+Form pages use `Button tone="primary"` for their one main save action. Use
+`TextArea prose` for instructions rather than code. `Field error` renders an
+error at `<htmlFor>-error`; the owning control must set `aria-invalid` and
+`aria-describedby`. `Select` matches native text controls. Use `FormNotice` for
+wrapping form recovery text; use `Notice` for compact transient messages.

package/src/client/components/Select.tsx

@@ -0,0 +1,18 @@
+import type { SelectHTMLAttributes } from "react";
+import { cn } from "../styles";
+
+/** Match native form choices to the dashboard text controls. */
+export function Select({
+  className,
+  ...props
+}: SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select
+      {...props}
+      className={cn(
+        "block min-h-11 w-full min-w-0 rounded border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-base text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-10 sm:text-sm",
+        className,
+      )}
+    />
+  );
+}

package/src/client/components/StatusChip.tsx

@@ -13,21 +13,20 @@ export type StatusChipTone =
 export type StatusChipSize = "default" | "compact";
 
 const toneClass: Record<StatusChipTone, string> = {
-  accent: "border-violet-300/20 bg-violet-300/[0.07] text-violet-100",
-  danger: "border-rose-400/25 bg-rose-400/10 text-rose-200",
-  info: "border-cyan-300/20 bg-cyan-300/[0.07] text-cyan-100",
-  neutral: "border-dashboard-border bg-dashboard-fill-faint text-dashboard-text-muted",
-  success: "border-emerald-400/25 bg-emerald-400/10 text-emerald-200",
-  warning: "border-amber-400/25 bg-amber-400/10 text-amber-100",
+  accent: "text-violet-300",
+  danger: "text-rose-300",
+  info: "text-cyan-300",
+  neutral: "text-dashboard-text-muted",
+  success: "text-emerald-300",
+  warning: "text-amber-300",
 };
 
 const sizeClass: Record<StatusChipSize, string> = {
-  compact:
-    "gap-1.5 px-2 py-1 font-mono text-2xs uppercase tracking-[0.08em]",
-  default: "px-2 py-1 font-mono text-xs uppercase tracking-[0.1em]",
+  compact: "text-xs",
+  default: "text-sm",
 };
 
-/** Render a compact status or kind label with shared tone and size contracts. */
+/** Show status as quiet text, not a button-shaped badge. */
 export function StatusChip(props: {
   children: ReactNode;
   className?: string;
@@ -37,13 +36,17 @@ export function StatusChip(props: {
   return (
     <span
       className={cn(
-        "inline-flex w-fit items-center rounded border",
+        "inline-flex w-fit items-center gap-1.5 font-sans font-medium normal-case leading-snug tracking-normal",
         sizeClass[props.size ?? "default"],
         toneClass[props.tone ?? "neutral"],
         props.className,
       )}
     >
-      {props.children}
+      <span
+        aria-hidden="true"
+        className="size-1.5 shrink-0 rounded-full bg-current"
+      />
+      <span className="block first-letter:uppercase">{props.children}</span>
     </span>
   );
 }

package/src/client/components/TextInput.tsx

@@ -3,36 +3,56 @@ import type { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { cn } from "../styles";
 
 const textControlClassName =
-  "block w-full rounded border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-sm text-dashboard-text focus:border-dashboard-focus focus:outline-none disabled:cursor-not-allowed disabled:opacity-50";
+  "block w-full rounded border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-sm text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-50";
 
 export type TextInputProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,
   "size"
 > & {
   className?: string;
+  size?: "default" | "comfortable";
 };
 
 /** Render the dashboard's standard single-line text control. */
-export function TextInput({ className, type = "text", ...props }: TextInputProps) {
+export function TextInput({
+  className,
+  type = "text",
+  size = "default",
+  ...props
+}: TextInputProps) {
   return (
     <input
       {...props}
-      className={cn(textControlClassName, className)}
+      className={cn(
+        textControlClassName,
+        size === "comfortable" && "min-h-11 text-base sm:min-h-10 sm:text-sm",
+        className,
+      )}
       type={type}
     />
   );
 }
 
 export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  prose?: boolean;
   className?: string;
 };
 
 /** Render the dashboard's standard multi-line text control. */
-export function TextArea({ className, ...props }: TextAreaProps) {
+export function TextArea({
+  className,
+  prose = false,
+  ...props
+}: TextAreaProps) {
   return (
     <textarea
       {...props}
-      className={cn(textControlClassName, "min-h-36 font-mono", className)}
+      className={cn(
+        textControlClassName,
+        "min-h-36",
+        prose ? "font-sans leading-relaxed" : "font-mono",
+        className,
+      )}
     />
   );
 }

package/src/client/conversations/ConversationEventLog.tsx

@@ -5,7 +5,12 @@ import { createPortal } from "react-dom";
 import { Drawer } from "../components/Drawer";
 import { cn } from "../styles";
 import type { ConversationTranscript } from "../types";
-import { eventLogSummary, eventLogTone } from "./eventLog";
+import {
+  eventLogModel,
+  eventLogSummary,
+  eventLogTone,
+  eventLogUsage,
+} from "./eventLog";
 import { EventDetails } from "./EventDetails";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 
@@ -25,6 +30,8 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
     () =>
       events.map((event) => ({
         event,
+        model: eventLogModel(event),
+        usage: eventLogUsage(event),
         summary: eventLogSummary(event.data).replace(/\s+/g, " ").slice(0, 300),
       })),
     [events],
@@ -33,8 +40,8 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
   const visibleRows = useMemo(
     () =>
       search.active
-        ? rows.filter(({ event, summary }) =>
-            `${summary} ${JSON.stringify(event)}`
+        ? rows.filter(({ event, summary, usage }) =>
+            `${summary} ${usage} ${JSON.stringify(event)}`
               .toLowerCase()
               .includes(search.normalizedQuery),
           )
@@ -79,7 +86,7 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
           aria-label="Events"
           className="m-0 list-none divide-y divide-dashboard-border-subtle p-0"
         >
-          {visibleRows.map(({ event, summary }) => (
+          {visibleRows.map(({ event, summary, model, usage }) => (
             <li key={event.seq}>
               <button
                 aria-haspopup="dialog"
@@ -105,11 +112,44 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
                 >
                   <HighlightText text={event.data.type} />
                 </span>
-                <span
-                  className="col-span-2 row-start-2 truncate text-dashboard-text @min-[48rem]:col-span-1 @min-[48rem]:row-auto"
-                  title={summary}
-                >
-                  <HighlightText text={summary} />
+                <span className="col-span-2 row-start-2 grid min-w-0 gap-1 text-dashboard-text @min-[48rem]:col-span-1 @min-[48rem]:row-auto">
+                  <span className="flex min-w-0 flex-wrap items-baseline gap-x-2">
+                    <span
+                      className={cn(
+                        "break-all",
+                        model
+                          ? "font-semibold text-violet-300"
+                          : "text-dashboard-text-muted",
+                      )}
+                    >
+                      <HighlightText
+                        text={model?.modelId ?? "Model not recorded"}
+                      />
+                    </span>
+                    {model?.modelProfile ? (
+                      <span className="text-dashboard-text-muted">
+                        <HighlightText text={model.modelProfile} />
+                      </span>
+                    ) : null}
+                    {model?.reasoningLevel ? (
+                      <span className="text-dashboard-text-muted">
+                        <HighlightText
+                          text={`${model.reasoningLevel} reasoning`}
+                        />
+                      </span>
+                    ) : null}
+                  </span>
+                  <span className="truncate" title={summary}>
+                    <HighlightText text={summary} />
+                  </span>
+                  {usage ? (
+                    <span
+                      className="text-dashboard-text-muted"
+                      title="Usage for this event only; costs are estimated USD"
+                    >
+                      <HighlightText text={usage} />
+                    </span>
+                  ) : null}
                 </span>
                 <ChevronRight
                   aria-hidden="true"

package/src/client/conversations/EventDetails.tsx

@@ -3,13 +3,64 @@ import type { ReactNode } from "react";
 
 import { RedactedMarker } from "./TranscriptRedacted";
 import { TranscriptText } from "./TranscriptText";
+import { eventLogModel } from "./eventLog";
+import { formatCostBreakdown } from "../format";
+import { EventUsage } from "./EventUsage";
 
 /** Present event content as readable sections, with the exact report available on demand. */
 export function EventDetails({ event }: { event: ConversationReportEvent }) {
   const data = event.data;
+  const model = eventLogModel(event);
+  const { usage, ...callAttributes } = event.modelCall ?? {};
   let content: ReactNode;
 
   switch (data.type) {
+    case "turn_routed": {
+      const {
+        type: _,
+        modelId: _modelId,
+        modelProfile: _profile,
+        reasoningLevel: _reasoning,
+        costUsd,
+        ...metadata
+      } = data;
+      content = (
+        <DetailSection title="Route selection">
+          <DetailValue
+            value={{
+              ...metadata,
+              ...(costUsd !== undefined
+                ? { routerCostUsd: formatCostBreakdown({ total: costUsd }) }
+                : undefined),
+            }}
+          />
+        </DetailSection>
+      );
+      break;
+    }
+    case "handoff": {
+      const {
+        type: _,
+        modelId: _modelId,
+        modelProfile: _profile,
+        reasoningLevel: _reasoning,
+        summary,
+        ...metadata
+      } = data;
+      content = (
+        <>
+          {Object.keys(metadata).length > 0 ? (
+            <DetailValue value={metadata} />
+          ) : null}
+          {summary ? (
+            <DetailSection title="Continuation summary">
+              <TranscriptText text={summary} />
+            </DetailSection>
+          ) : null}
+        </>
+      );
+      break;
+    }
     case "message": {
       const { type: _, text, redacted, ...metadata } = data;
       content = (
@@ -98,7 +149,30 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
   }
 
   return (
-    <div className="grid min-w-0 gap-6">
+    <div className="@container grid min-w-0 gap-6">
+      <DetailSection
+        title={
+          data.type === "handoff" ? "Target configuration" : "Configuration"
+        }
+      >
+        <DetailValue
+          value={{
+            model: model?.modelId ?? "Not recorded",
+            ...(model
+              ? {
+                  modelProfile: model.modelProfile ?? "Not recorded",
+                  reasoningLevel: model.reasoningLevel ?? "Not recorded",
+                }
+              : undefined),
+            ...callAttributes,
+          }}
+        />
+      </DetailSection>
+      {event.modelCall ? (
+        <DetailSection title="Call usage">
+          <EventUsage usage={usage} />
+        </DetailSection>
+      ) : null}
       {content}
       <details className="border-t border-dashboard-border pt-4">
         <summary className="cursor-pointer text-xs text-dashboard-text-muted hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-dashboard-focus">
@@ -114,8 +188,8 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
 
 function DetailSection(props: { title: string; children: ReactNode }) {
   return (
-    <section aria-label={props.title} className="grid min-w-0 gap-3">
-      <h3 className="m-0 break-words text-sm font-semibold text-dashboard-text">
+    <section aria-label={props.title} className="grid min-w-0 gap-2">
+      <h3 className="m-0 border-b border-dashboard-border pb-2 text-sm font-semibold text-dashboard-text">
         {props.title}
       </h3>
       {props.children}
@@ -131,7 +205,8 @@ function fieldLabel(key: string): string {
   return (words.charAt(0).toUpperCase() + words.slice(1))
     .replace(/\bid\b/gi, "ID")
     .replace(/\bids\b/gi, "IDs")
-    .replace(/\busd\b/gi, "USD");
+    .replace(/\busd\b/gi, "USD")
+    .replace(/\bapi\b/gi, "API");
 }
 
 // Keep arbitrary tool and context payloads readable without guessing their schema.
@@ -150,9 +225,11 @@ function DetailValue({ value }: { value: unknown }) {
     );
   }
   if (typeof value === "object" && value !== null) {
-    const fields = Object.entries(value);
+    const fields = Object.entries(value).filter(
+      ([, entry]) => entry !== undefined,
+    );
     return fields.length ? (
-      <dl className="m-0 grid min-w-0 gap-3">
+      <dl className="m-0 grid min-w-0 divide-y divide-dashboard-border-subtle">
         {fields.map(([key, entry]) => {
           const nested = typeof entry === "object" && entry !== null;
           return (
@@ -160,15 +237,21 @@ function DetailValue({ value }: { value: unknown }) {
               key={key}
               className={
                 nested
-                  ? "grid min-w-0 gap-2"
-                  : "grid min-w-0 grid-cols-[minmax(0,8rem)_minmax(0,1fr)] gap-3"
+                  ? "grid min-w-0 gap-2 py-2"
+                  : "grid min-w-0 grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-baseline gap-x-4 py-2 @min-[30rem]:grid-cols-[minmax(0,10rem)_minmax(0,1fr)]"
               }
             >
-              <dt className="break-words text-sm text-dashboard-text-muted">
+              <dt className="break-words text-xs leading-relaxed text-dashboard-text-muted">
                 {fieldLabel(key)}
               </dt>
               <dd className="m-0 min-w-0">
-                <DetailValue value={entry} />
+                {nested ? (
+                  <div className="border-l border-dashboard-border pl-3">
+                    <DetailValue value={entry} />
+                  </div>
+                ) : (
+                  <DetailValue value={entry} />
+                )}
               </dd>
             </div>
           );
@@ -179,7 +262,7 @@ function DetailValue({ value }: { value: unknown }) {
     );
   }
   return (
-    <span className="block whitespace-pre-wrap break-words font-mono text-sm leading-relaxed text-dashboard-text [overflow-wrap:anywhere]">
+    <span className="block whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-dashboard-text [overflow-wrap:anywhere]">
       {value === null ? "null" : value === "" ? "Empty text" : String(value)}
     </span>
   );