@sentry/junior-dashboard 0.268.0 → 0.269.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.268.0",
+  "version": "0.269.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -39,10 +39,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.268.0"
+    "@sentry/junior-plugin-api": "0.269.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.268.0"
+    "@sentry/junior": "0.269.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -62,7 +62,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.268.0"
+    "@sentry/junior": "0.269.0"
   },
   "scripts": {
     "build": "pnpm --filter @sentry/junior-plugin-api build && pnpm --filter @sentry/junior build && pnpm run build:client && pnpm run build:css && pnpm run build:server",

package/src/api/schema.ts

@@ -18,6 +18,8 @@ export const dashboardIdentitySchema = z
   .object({
     user: dashboardSessionUserSchema
       .extend({
+        /** Junior API path of the viewer's Slack photo, then Google photo. */
+        avatarUrl: z.string().optional(),
         /** Junior-wide admin role. The server still checks it on every admin route. */
         isAdmin: z.boolean(),
       })
@@ -38,7 +40,6 @@ export const dashboardConfigSchema = z
     authPath: z.string(),
     basePath: z.string(),
     sentryConversationLinks: z.boolean(),
-    timeZone: z.string().optional(),
     version: z.string().min(1),
   })
   .strict();

package/src/app.ts

@@ -4,6 +4,7 @@ import {
   authenticatePersonalToken,
   createJuniorApi,
   jsonResponse,
+  readViewerAvatarUrl,
   resolveViewerUser,
   updateViewerDisplayName,
   type ConversationWorkQueue,
@@ -300,11 +301,6 @@ function mockViewerFromSession(session: DashboardSession) {
   };
 }
 
-/** Return an operator-configured timezone override, or undefined to let each viewer's browser use its own local timezone. */
-function dashboardTimeZone(): string | undefined {
-  return process.env.JUNIOR_TIMEZONE || undefined;
-}
-
 function pluginRoutePrefix(pluginName: string): string {
   return `/api/plugins/${pluginName}`;
 }
@@ -565,15 +561,21 @@ export function createDashboardApp(
       authPath,
       basePath,
       sentryConversationLinks: hasSentryConversationLinks(),
-      timeZone: dashboardTimeZone(),
       version: JUNIOR_VERSION,
     });
   });
-  app.get("/api/me", (c) => {
+  // Mock reporting has no SQL identities, so it has no profile photos.
+  const viewerAvatarUrl = async (userId: string | undefined) =>
+    userId && !options.mockConversations
+      ? await readViewerAvatarUrl(userId)
+      : undefined;
+  app.get("/api/me", async (c) => {
     const session = c.get("authSession");
     const viewer = c.get("viewer");
+    const avatarUrl = await viewerAvatarUrl(viewer?.id);
     return jsonResponse(dashboardIdentitySchema, {
       user: {
+        ...(avatarUrl ? { avatarUrl } : undefined),
         email: session.user.email,
         emailVerified: session.user.emailVerified,
         isAdmin: viewer?.isAdmin === true,
@@ -632,8 +634,10 @@ export function createDashboardApp(
         { status: 404 },
       );
     }
+    const avatarUrl = await viewerAvatarUrl(updated.id);
     return jsonResponse(dashboardIdentitySchema, {
       user: {
+        ...(avatarUrl ? { avatarUrl } : undefined),
         email: session.user.email,
         emailVerified: session.user.emailVerified,
         isAdmin: updated.isAdmin === true,

package/src/client/App.tsx

@@ -24,7 +24,6 @@ import {
   buildConversations,
   conversationDetailTitle,
   conversationDisplayTitle,
-  setDashboardTimeZone,
 } from "./format";
 import { isNewConversationPath } from "./conversations/conversationRoutes";
 import { useDashboardServerVersion } from "./dashboard-version";
@@ -84,9 +83,6 @@ export function DashboardShell() {
   const data = query.data;
   const serverVersion = useDashboardServerVersion(data?.config.version);
   const userPages = userPagesQuery.data ?? [];
-  if (data) {
-    setDashboardTimeZone(data.config.timeZone);
-  }
   const loading = !data && !query.error;
   const loggedIn = Boolean(data?.config.authRequired && data.me.user.email);
   const personalSpendQuery = usePersonalSpendData(loggedIn);
@@ -119,7 +115,7 @@ export function DashboardShell() {
     loggedIn,
     pathname: location.pathname,
     primaryUserPages,
-    reviewCount: reviewCountQuery.data?.mine,
+    reviewCount: reviewCountQuery.data?.needsViewer,
     userPagesPending: userPagesQuery.isPending,
   });
 

package/src/client/api.ts

@@ -33,23 +33,9 @@ import { fetchDashboardJson } from "./http";
 import type { DashboardCoreData, SystemData } from "./types";
 
 const dashboardMetadataStaleTimeMs = 5 * 60_000;
-const PERSONAL_SPEND_REFRESH_MS = 5 * 60_000;
-const MIN_PERSONAL_SPEND_REFRESH_MS = 1_000;
-
-/** Schedule the next spend refresh from the age of the server-cached report. */
-export function personalSpendRefreshDelay(
-  generatedAt: string | undefined,
-  nowMs = Date.now(),
-): number {
-  if (!generatedAt) return PERSONAL_SPEND_REFRESH_MS;
-  const generatedAtMs = Date.parse(generatedAt);
-  if (!Number.isFinite(generatedAtMs)) return PERSONAL_SPEND_REFRESH_MS;
-  const ageMs = Math.max(0, nowMs - generatedAtMs);
-  return Math.max(
-    MIN_PERSONAL_SPEND_REFRESH_MS,
-    PERSONAL_SPEND_REFRESH_MS - ageMs,
-  );
-}
+// The server reuses its cached report until the viewer's spend changes, so a
+// short poll shows a finished Turn without a full aggregate query each time.
+const PERSONAL_SPEND_REFRESH_MS = 10_000;
 
 /** Fetch dashboard shell data shared across browser routes. */
 export function useDashboardCoreData() {
@@ -314,8 +300,7 @@ export function usePersonalSpendData(enabled: boolean) {
         "/api/people/me/spend",
         signal,
       ),
-    refetchInterval: (query) =>
-      personalSpendRefreshDelay(query.state.data?.generatedAt),
+    refetchInterval: PERSONAL_SPEND_REFRESH_MS,
     retry: false,
     staleTime: 0,
   });

package/src/client/components/AGENTS.md

@@ -0,0 +1,65 @@
+# Dashboard UI kit
+
+Shared dashboard components live here. Feature pages compose them instead of
+copying Tailwind blocks. Follow `policies/frontend-components.md`.
+`pnpm dashboard-style:check` enforces the token rules.
+
+## shadcn/ui
+
+- Add components with
+  `pnpm --filter @sentry/junior-dashboard exec shadcn add <component>`. They go
+  to `ui/`.
+- `ui/` files are shadcn source on dashboard tokens. Remove unused exports.
+  Change a `ui/` file when every caller needs the same style.
+- Use `ui/` components directly. Add an app component only when it adds
+  structure or behavior, not to rename a `ui/` component or its props.
+- Do not apply the CLI's global border or body resets. Keep the Tailwind
+  radius scale.
+
+## Component rules
+
+- Use `ui/alert-dialog` for every confirmation. Never use `window.confirm`.
+- Use `ui/dialog` for a short task form. Never put a form in a `Drawer` or
+  `DetailsPanel`. Use `useSheet` for each dialog and mount it only while open.
+- Use `ui/trace` for transcript activity rows. Put only inline elements in
+  the row button.
+- Give an icon-only control a label with `TooltipContent size="compact"`.
+  Never use the native `title` attribute.
+- Set `focusableWhenDisabled` on a `ui/button` tooltip trigger that can be
+  disabled.
+- Build form fields from `ui/field`. Use the ids `<control id>-error` and
+  `<control id>-help`.
+- Put a checkbox or radio inside its `<label>`. Give each `RadioGroup` an
+  `aria-label`.
+- `ui/alert` sets `role="alert"`. Pass `role="status"` for a message that is
+  not an error.
+- A form page has one `Button variant="primary"`.
+- `ObjectIcon` owns native object icons. Do not replace it with a provider
+  logo.
+
+## Tokens
+
+- Keep every color in a token in `src/tailwind.css`, so each theme can
+  redefine it. Use `light:` only for values that no token covers.
+- Use `var(--color-*)` for chart series. Never use hex values.
+- Do not use `white/*` or `black/*` fills, borders, or rings, or hex surface
+  colors. Shadows may use black.
+- Use `outline-dashboard-focus` for keyboard focus only.
+- Use the named type scale. Keep `text-2xs` for compact badges and chart
+  annotations.
+- Labels use sentence case. Do not use uppercase or letter spacing.
+
+## Navigation
+
+- App navigation uses pills, page links use `SegmentedNav`, and panel
+  switches use `ui/tabs`. Keep the three levels distinct.
+
+## Ownership
+
+- Conversation mobile geometry has hard owners: `layout/VisualViewportShell`,
+  `conversations/ChatLayout`, and `conversations/ComposerDock`. Pages pass
+  children only. Do not add viewport, offset, or safe-area math in pages.
+- Home and create must not use `ComposerDock`.
+- Feature surfaces stay under `conversations/` or `pages/` until two real
+  callers share them. Add a named component on the second real use.
+- Keep Tailwind classes on the owning component.

package/src/client/components/ActorAvatar.tsx

@@ -17,7 +17,7 @@ export function ActorAvatar(props: {
   return (
     <Avatar aria-hidden="true" size={props.size === "list" ? "sm" : "default"}>
       <AvatarImage
-        alt=""
+        alt="User avatar"
         loading="lazy"
         referrerPolicy="no-referrer"
         src={props.imageUrl}

package/src/client/components/ParticipantAvatarStack.tsx

@@ -71,6 +71,7 @@ export function ParticipantAvatar(props: {
             tabIndex={0}
           >
             <ActorAvatar
+              imageUrl={props.participant.avatarUrl}
               name={participantName(props.participant)}
               size={props.size}
             />

package/src/client/components/ProfileMenu.tsx

@@ -8,7 +8,7 @@ import {
   ShieldCheck,
   UserRound,
 } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Link } from "react-router";
 import type { PersonalSpendReport } from "@sentry/junior/api/schema";
 import type { PluginUserPageLink } from "@sentry/junior-plugin-api";
@@ -18,6 +18,7 @@ import { pluginUserPagePath } from "../pages/user/PluginUserPage";
 import { cn, dashboardInteractiveTextClass } from "../styles";
 import type { Identity } from "../types";
 import { ThemeSwitcher } from "./ThemeSwitcher";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 
 type ProfileMenuProps = {
@@ -49,6 +50,83 @@ function initials(name: string | null | undefined, email: string): string {
   return email.slice(0, 1).toUpperCase();
 }
 
+/** Show the viewer's photo, with initials while it loads or when there is none. */
+function ProfileAvatar({
+  className,
+  user,
+}: {
+  className?: string;
+  user: Identity["user"];
+}) {
+  return (
+    <Avatar
+      aria-hidden="true"
+      className={cn("border-0 shadow-black/40", className)}
+    >
+      <AvatarImage alt="User avatar" src={user.avatarUrl} />
+      <AvatarFallback className="font-bold tracking-wide">
+        {initials(user.name, user.email!)}
+      </AvatarFallback>
+    </Avatar>
+  );
+}
+
+const SPEND_COUNT_UP_MS = 700;
+
+/**
+ * Show one spend total. When the total changes, count up from the last shown
+ * value and tint the figure until the count ends.
+ */
+function SpendAmount({ value }: { value?: number }) {
+  const [shown, setShown] = useState(value);
+  const [counting, setCounting] = useState(false);
+  const shownRef = useRef(value);
+
+  useEffect(() => {
+    const from = shownRef.current;
+    if (
+      value === undefined ||
+      from === undefined ||
+      from === value ||
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    ) {
+      shownRef.current = value;
+      setShown(value);
+      setCounting(false);
+      return;
+    }
+
+    const startedAt = performance.now();
+    let frame = 0;
+    const step = (time: number) => {
+      const progress = Math.min(1, (time - startedAt) / SPEND_COUNT_UP_MS);
+      const eased = 1 - (1 - progress) ** 3;
+      const next = progress < 1 ? from + (value - from) * eased : value;
+      shownRef.current = next;
+      setShown(next);
+      if (progress < 1) {
+        frame = requestAnimationFrame(step);
+      } else {
+        setCounting(false);
+      }
+    };
+    setCounting(true);
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+  }, [value]);
+
+  return (
+    <span
+      className={cn(
+        "transition-colors duration-700 motion-reduce:transition-none",
+        counting && "text-dashboard-accent-text",
+      )}
+    >
+      {shown === undefined ? "—" : formatCostSummary({ total: shown })}
+    </span>
+  );
+}
+
 const profileLinkClass =
   "flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm font-semibold text-dashboard-text no-underline transition-colors hover:bg-dashboard-fill-strong hover:text-dashboard-text focus-visible:bg-dashboard-fill-strong focus-visible:text-dashboard-text focus-visible:outline-none";
 
@@ -73,19 +151,10 @@ export function ProfileMenu({
     (page) => page.navigation === "profile",
   );
 
-  const avatar = (
-    <span
-      aria-hidden="true"
-      className="grid size-8 shrink-0 place-items-center rounded-full bg-dashboard-focus text-xs font-bold tracking-wide text-dashboard-text-inverse shadow-sm shadow-black/40"
-    >
-      {initials(identity.user.name, email)}
-    </span>
-  );
-
   const identityBlock = (
     <div className="border-b border-dashboard-border-strong px-2.5 py-2.5">
       <div className="flex min-w-0 items-center gap-2.5">
-        {avatar}
+        <ProfileAvatar className="size-8" user={identity.user} />
         <div className="min-w-0">
           <p className="m-0 truncate text-sm font-semibold text-dashboard-text">
             {name}
@@ -101,13 +170,13 @@ export function ProfileMenu({
         <span>
           7d{" "}
           <span className="font-semibold text-dashboard-text">
-            {sevenDaySpend}
+            <SpendAmount value={spend?.sevenDaysUsd} />
           </span>
         </span>
         <span>
           30d{" "}
           <span className="font-semibold text-dashboard-text">
-            {thirtyDaySpend}
+            <SpendAmount value={spend?.thirtyDaysUsd} />
           </span>
         </span>
       </div>
@@ -186,13 +255,13 @@ export function ProfileMenu({
         <span className="whitespace-nowrap">
           7d{" "}
           <span className="font-semibold text-dashboard-text">
-            {sevenDaySpend}
+            <SpendAmount value={spend?.sevenDaysUsd} />
           </span>
         </span>
         <span className="whitespace-nowrap">
           30d{" "}
           <span className="font-semibold text-dashboard-text">
-            {thirtyDaySpend}
+            <SpendAmount value={spend?.thirtyDaysUsd} />
           </span>
         </span>
       </div>
@@ -254,12 +323,7 @@ export function ProfileMenu({
         aria-label={`Signed in as ${name}`}
         className="flex min-w-0 items-center gap-2.5 px-1"
       >
-        <span
-          aria-hidden="true"
-          className="grid size-7 shrink-0 place-items-center rounded-full bg-dashboard-focus text-xs font-bold tracking-wide text-dashboard-text-inverse shadow-sm shadow-black/40"
-        >
-          {initials(identity.user.name, email)}
-        </span>
+        <ProfileAvatar user={identity.user} />
         <div className="min-w-0">
           <p className="m-0 truncate text-xs font-semibold text-dashboard-text">
             {name}
@@ -304,7 +368,7 @@ export function ProfileMenu({
               7d
             </span>
             <span className="text-xs font-semibold text-dashboard-text">
-              {sevenDaySpend}
+              <SpendAmount value={spend?.sevenDaysUsd} />
             </span>
           </span>
           <span
@@ -316,16 +380,11 @@ export function ProfileMenu({
               30d
             </span>
             <span className="text-xs font-semibold text-dashboard-text">
-              {thirtyDaySpend}
+              <SpendAmount value={spend?.thirtyDaysUsd} />
             </span>
           </span>
         </span>
-        <span
-          aria-hidden="true"
-          className="grid size-7 place-items-center rounded-full bg-dashboard-focus text-xs font-bold tracking-wide text-dashboard-text-inverse shadow-sm shadow-black/40"
-        >
-          {initials(identity.user.name, email)}
-        </span>
+        <ProfileAvatar user={identity.user} />
         <ChevronDown
           aria-hidden="true"
           className={cn(

package/src/client/components/UserInputForm.tsx

@@ -138,7 +138,7 @@ function TextField(props: {
 }
 
 /**
- * Render the answer controls of a `requestUserInput` request. A request with
+ * Render the answer controls of an action item request. A request with
  * one short choice field shows one button per choice, and a click is the
  * answer. Other requests show a form that the reader submits once. A failed
  * `onSubmit` lets the reader try again. `secondaryActions`, such as Dismiss,

package/src/client/components/charts/AGENTS.md

@@ -0,0 +1,15 @@
+# System cache reporting
+
+- `cache-input.ts` owns the cache input calculation.
+- `ConversationMetricDay` comes from stored Run metrics, not Sentry spans.
+  Its input, cached input, and cache-creation counters are disjoint. Add
+  them once for total input. Do not include output. Never use this transform
+  for Sentry span totals.
+- Period shares use summed token counts, not the mean of bucket shares.
+- A missing counter is not a zero. When an active bucket has no counter, omit
+  its share and the whole-period share.
+- Do not call these values a cache hit rate or a cache failure rate. Field
+  presence is not call-level coverage.
+- The page time control selects the buckets for the chart and `CacheWrites`.
+  Do not add a local time selector.
+- Add a reporting contract before you add per-call filters or drilldowns.

package/src/client/conversations/AGENTS.md

@@ -0,0 +1,42 @@
+# Transcript components
+
+Keep transcript layout in these feature components. Use the UI kit in
+`../components/` for shared controls and overlays.
+
+## Ownership
+
+- `TranscriptRows` and `TranscriptRow` own row gaps, padding, and indent.
+  Keep horizontal padding inside each row, so focus outlines are not clipped.
+- `TranscriptMessageShell` owns the avatar column and message gutter.
+- `TranscriptSummaryTrigger` owns disclosure padding and focus. Do not repeat
+  negative margins at call sites.
+- `ChatLayout` keeps the Conversation header outside the transcript scroll.
+- `eventLogRows` and `filterEventLogRows` own row text and search match. The
+  page step controls use them too.
+
+## Rules
+
+- Display text keeps Slack tokens such as `<@U123>`. The API returns
+  `mentions` beside the owning object. Render with `TranscriptText` or
+  `MentionText`. Do not resolve names in the dashboard, and do not rewrite
+  tokens into links on the server.
+- The Automation trigger card shows the credentials from the dispatch record
+  of the run, not the current setting. Keep the run input collapsed, because
+  it is not from a person.
+- Each `Transcript` sets the panel for its own rows. A nested transcript never
+  uses the panel of the page behind it.
+- The page has one right panel. Conversation details, event details, and turn
+  context never show at the same time. Closing a panel returns focus to the
+  control that opened it.
+- The URL owns the selected event in the main Conversation. Standalone
+  transcripts keep selection in `ConversationEventLog`.
+- A pending exit must not close a new panel or another Conversation.
+- A pending fork blocks dismissal of its dialog.
+- Raw JSON keeps the original ISO values. Persist the UTC/local mode, not the
+  timezone.
+
+## Checks
+
+- Review with `JUNIOR_DASHBOARD_MOCK_CONVERSATIONS=true pnpm dev`.
+- Keep visual checks out of automated assertions. Browser tests cover
+  opening, closing, and keyboard interaction.

package/src/client/conversations/ConversationPage.tsx

@@ -73,11 +73,6 @@ import {
   hasConversationUsageBreakdown,
 } from "./ConversationUsageBreakdown";
 import { PendingMailboxStack } from "./PendingMailboxStack";
-import { UserInputRequestCard } from "./UserInputRequestCard";
-import {
-  openUserInputRequest,
-  type OpenUserInputRequest,
-} from "./userInputRequest";
 import {
   buildConversations,
   conversationDetailTitle,
@@ -197,10 +192,6 @@ export function ConversationPage(props: {
     () => committedMessageIds(detail.data?.events),
     [detail.data?.events],
   );
-  const userInputRequest = useMemo(
-    () => openUserInputRequest(detail.data?.events),
-    [detail.data?.events],
-  );
   // Cancel needs the latest mailbox watermark, but not as a render prop. Live
   // polls refresh generatedAt every 2s even when the queue is unchanged.
   const pendingGeneratedAtRef = useRef(detail.pendingGeneratedAt);
@@ -494,7 +485,6 @@ export function ConversationPage(props: {
                 detail.inlineMessages.length === 0
               }
               stoppable={live}
-              userInputRequest={userInputRequest}
             />
           ) : undefined
         }
@@ -585,8 +575,6 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
   sendsInline: boolean;
   /** True while the conversation has a Turn that a stop can end. */
   stoppable: boolean;
-  /** Junior's open question, if no user message answers it yet. */
-  userInputRequest?: OpenUserInputRequest;
 }) {
   const appendMessage = useAppendConversationMessage(props.conversationId);
   const stopTurn = useStopConversationTurn(props.conversationId);
@@ -665,13 +653,6 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
   const cancellableMessageIds = props.pendingMessages
     .filter((message) => message.clientStatus === undefined)
     .map((message) => message.inboundMessageId);
-  const onAnswerUserInput = useCallback(async (answer: string) => {
-    onPinRequestRef.current();
-    await appendMessageRef.current.mutateAsync({
-      idempotencyKey: crypto.randomUUID(),
-      message: answer,
-    });
-  }, []);
   const onCancelMessage = useCallback(
     (message: ConversationMailboxMessage) => {
       const receivedBefore = props.pendingGeneratedAtRef.current;
@@ -796,14 +777,6 @@ const ConversationReplyFooter = memo(function ConversationReplyFooter(props: {
           {props.pendingAuthorization ? (
             <PendingAuthorization authorization={props.pendingAuthorization} />
           ) : null}
-          {/* A queued message already answers the question. */}
-          {props.userInputRequest && props.pendingMessages.length === 0 ? (
-            <UserInputRequestCard
-              key={props.userInputRequest.toolCallId}
-              onAnswer={onAnswerUserInput}
-              request={props.userInputRequest}
-            />
-          ) : null}
           <ConversationReviewBar conversationId={props.conversationId} />
           <PendingMailboxStack
             cancelError={cancelError}

package/src/client/format.ts

@@ -19,8 +19,8 @@ import { getDashboardAgentName } from "./agentName";
 import { formatDuration } from "./components/Duration";
 import { conversationTranscriptMessages } from "./conversations/eventTranscript";
 
-/** Detect the viewer's own local timezone as the default display timezone. */
-function browserTimeZone(): string {
+/** Read the viewer's own browser timezone, used for absolute timestamps and charts. */
+export function getDashboardTimeZone(): string {
   try {
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
   } catch {
@@ -28,22 +28,6 @@ function browserTimeZone(): string {
   }
 }
 
-let dashboardTimeZone = browserTimeZone();
-
-/** Apply an operator-configured timezone override from the config API, if any. Otherwise the viewer's own browser timezone is used. */
-export function setDashboardTimeZone(timeZone: string | undefined): void {
-  dashboardTimeZone = timeZone || browserTimeZone();
-}
-
-/** Read the dashboard display timezone used for absolute timestamps and charts. */
-export function getDashboardTimeZone(): string {
-  return dashboardTimeZone;
-}
-
-function displayTimeZone(): string {
-  return dashboardTimeZone;
-}
-
 function isActiveSummary(summary: ConversationSummaryReport): boolean {
   return summary.status === "active";
 }
@@ -69,7 +53,7 @@ function parseTime(value: string | undefined): number | null {
   return Number.isFinite(time) ? time : null;
 }
 
-/** Format absolute dashboard timestamps in the configured display timezone. */
+/** Format absolute dashboard timestamps in the viewer's browser timezone. */
 export function formatTime(
   value: string | undefined,
   options?: Intl.DateTimeFormatOptions,
@@ -78,7 +62,7 @@ export function formatTime(
   if (time == null) return "none";
   return new Date(time).toLocaleString(undefined, {
     ...options,
-    timeZone: displayTimeZone(),
+    timeZone: getDashboardTimeZone(),
   });
 }
 
@@ -166,10 +150,10 @@ export function formatMessageTimestamp(
     ? date.toLocaleString(undefined, {
         dateStyle: "medium",
         timeStyle: "medium",
-        timeZone: displayTimeZone(),
+        timeZone: getDashboardTimeZone(),
       })
     : date.toLocaleTimeString(undefined, {
-        timeZone: displayTimeZone(),
+        timeZone: getDashboardTimeZone(),
       });
 }
 
@@ -210,7 +194,7 @@ export function formatTranscriptTimestampDetails(value: number): {
   return {
     local: date.toLocaleString(undefined, {
       ...options,
-      timeZone: displayTimeZone(),
+      timeZone: getDashboardTimeZone(),
     }),
     utc: date.toLocaleString(undefined, { ...options, timeZone: "UTC" }),
   };