@sentry/junior-dashboard 0.267.0 → 0.269.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.267.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.267.0"
+    "@sentry/junior-plugin-api": "0.269.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.267.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.267.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";
@@ -66,6 +65,8 @@ import {
 } from "./pages/user/PluginUserPage";
 import { AdminPage } from "./pages/admin/AdminPage";
 import { buildPrimaryNavItems } from "./primaryNav";
+import { ReviewDeskPage } from "./review-desk/ReviewDeskPage";
+import { useReviewItemCountData } from "./review-desk/queries";
 import type { DashboardCoreData } from "./types";
 
 const dashboardNoise = {
@@ -82,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);
@@ -111,11 +109,13 @@ export function DashboardShell() {
     ? (conversationDetailTitle(conversationDetail.data) ??
       conversationDisplayTitle(mobileConversation))
     : undefined;
+  const reviewCountQuery = useReviewItemCountData(loggedIn);
   const primaryNavItems = buildPrimaryNavItems({
     loading,
     loggedIn,
     pathname: location.pathname,
     primaryUserPages,
+    reviewCount: reviewCountQuery.data?.needsViewer,
     userPagesPending: userPagesQuery.isPending,
   });
 
@@ -362,6 +362,22 @@ export function DashboardShell() {
             }
             path="/"
           />
+          <Route
+            element={
+              loading ? (
+                <PageRouteLoading
+                  description="Items that need a person, and who can act on them."
+                  label="Loading review desk"
+                  title="Review desk"
+                />
+              ) : loggedIn ? (
+                <ReviewDeskPage />
+              ) : (
+                <Navigate replace to="/" />
+              )
+            }
+            path="/review"
+          />
           <Route element={<CodePage />} path="/code" />
           {codeRepositoryTabs.map((tab) => (
             <Route

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

@@ -13,7 +13,8 @@ type ParticipantAvatarStackProps = {
   size: "detail" | "list";
 };
 
-function participantName(participant: ActorIdentity): string {
+/** Name an actor for display: full name first, then handle, email, or ID. */
+export function participantName(participant: ActorIdentity): string {
   return (
     participant.fullName?.trim() ||
     participant.slackUserName?.trim() ||
@@ -70,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(