@sentry/junior-dashboard 0.276.0 → 0.277.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.276.0",
+  "version": "0.277.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -40,10 +40,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.276.0"
+    "@sentry/junior-plugin-api": "0.277.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.276.0"
+    "@sentry/junior": "0.277.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -64,7 +64,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.276.0"
+    "@sentry/junior": "0.277.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

@@ -13,9 +13,16 @@ export const dashboardSessionSchema = z
   .object({ user: dashboardSessionUserSchema })
   .strict();
 
+/** Longest auto-archive grace period a user can pick: one week. */
+export const AUTO_ARCHIVE_MAX_GRACE_HOURS = 7 * 24;
+
 /** Signed-in viewer returned by `/api/me`. */
 export const dashboardIdentitySchema = z
   .object({
+    /** Auto-archive the viewer's conversations when their work is done. */
+    autoArchiveDefault: z.boolean().optional(),
+    /** Hours done work and the conversation stay quiet before auto-archive. */
+    autoArchiveGraceHours: z.number().int().positive().optional(),
     user: dashboardSessionUserSchema
       .extend({
         /** Junior API path of the viewer's Slack photo, then Google photo. */
@@ -29,9 +36,20 @@ export const dashboardIdentitySchema = z
 
 export const dashboardProfileUpdateSchema = z
   .object({
-    displayName: z.string().trim().min(1).max(80),
+    autoArchiveDefault: z.boolean().optional(),
+    autoArchiveGraceHours: z
+      .number()
+      .int()
+      .min(1)
+      .max(AUTO_ARCHIVE_MAX_GRACE_HOURS)
+      .optional(),
+    displayName: z.string().trim().min(1).max(80).optional(),
   })
-  .strict();
+  .strict()
+  .refine(
+    (body) => Object.values(body).some((value) => value !== undefined),
+    "Change at least one setting.",
+  );
 
 export const dashboardConfigSchema = z
   .object({

package/src/app.ts

@@ -5,8 +5,12 @@ import {
   createJuniorApi,
   jsonResponse,
   readViewerAvatarUrl,
+  DEFAULT_AUTO_ARCHIVE_SETTINGS,
+  readUserAutoArchiveSettings,
   resolveViewerUser,
+  updateUserAutoArchiveSettings,
   updateViewerDisplayName,
+  type AutoArchiveSettings,
   type ConversationWorkQueue,
   type JuniorApiVariables,
 } from "@sentry/junior/api";
@@ -38,7 +42,7 @@ import {
   type DashboardSession,
 } from "./auth";
 import { isAuthPath, type AuthenticatedRoute } from "./authenticated-routes";
-import { resetMockConversationArchiveState } from "./mock-reporting/fixtures";
+import { resetMockConversationViewerState } from "./mock-reporting/fixtures";
 import { resetMockReadPositions } from "./mock-reporting/read-positions";
 import { createMockReportingApi } from "./mock-reporting/routes";
 import {
@@ -62,8 +66,9 @@ const DEFAULT_BASE_PATH = "/";
 const DEFAULT_AUTH_PATH = "/api/auth";
 const LOGIN_NEXT_PARAM = "next";
 const LOCAL_VIEWER_EMAIL = "dev@example.com";
-/** Process-local display names for mock reporting only. */
+/** Process-local profile settings for mock reporting only. */
 const mockDisplayNamesByEmail = new Map<string, string>();
+const mockAutoArchiveSettingsByEmail = new Map<string, AutoArchiveSettings>();
 
 /**
  * Clear process-local mock reporting state so tests sharing a worker do not
@@ -74,7 +79,8 @@ const mockDisplayNamesByEmail = new Map<string, string>();
  */
 export function resetMockDashboardState(): void {
   mockDisplayNamesByEmail.clear();
-  resetMockConversationArchiveState();
+  resetMockConversationViewerState();
+  mockAutoArchiveSettingsByEmail.clear();
   resetMockReadPositions();
 }
 
@@ -255,6 +261,25 @@ function callbackUrl(
   return url.toString();
 }
 
+/**
+ * Restart sign-in with the same return path when the Google callback fails,
+ * for example on a stale OAuth state cookie. Without it, Better Auth sends
+ * the person to `/` and the page is lost.
+ */
+function signInRetryUrl(
+  request: Request,
+  basePath: string,
+  options: DashboardReturnPathOptions = {},
+): string {
+  const url = new URL(request.url);
+  const returnPath = requestedReturnPath(url, basePath, options);
+  url.search = "";
+  if (returnPath) {
+    url.searchParams.set(LOGIN_NEXT_PARAM, returnPath);
+  }
+  return url.toString();
+}
+
 function unauthorized(
   request: Request,
   basePath: string,
@@ -397,7 +422,11 @@ export function createDashboardApp(
     if (session && dashboardSessionIsAuthorized(session, allowedDomains)) {
       return Response.redirect(returnUrl, 302);
     }
-    return auth.signInWithGoogle(c.req.raw, returnUrl);
+    return auth.signInWithGoogle(
+      c.req.raw,
+      returnUrl,
+      signInRetryUrl(c.req.raw, basePath, { authenticatedRoutes }),
+    );
   });
 
   if (auth) {
@@ -508,7 +537,11 @@ export function createDashboardApp(
   };
 
   app.use("*", requireAuth);
-  app.use("/api/conversations/:conversationId", revalidateConversation);
+  // Core detail reads set a version ETag before they build the report. Mock
+  // reporting has no stored version, so it revalidates on content instead.
+  if (options.mockConversations) {
+    app.use("/api/conversations/:conversationId", revalidateConversation);
+  }
 
   for (const route of authenticatedRoutes) {
     const handler = (c: Context<{ Variables: Variables }>) => {
@@ -576,11 +609,23 @@ export function createDashboardApp(
     userId && !options.mockConversations
       ? await readViewerAvatarUrl(userId)
       : undefined;
+  async function readViewerAutoArchiveSettings(viewer: {
+    email: string;
+    id: string;
+  }): Promise<AutoArchiveSettings> {
+    return (
+      (options.mockConversations
+        ? mockAutoArchiveSettingsByEmail.get(viewer.email)
+        : await readUserAutoArchiveSettings(viewer.id)) ??
+      DEFAULT_AUTO_ARCHIVE_SETTINGS
+    );
+  }
   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, {
+      ...(viewer ? await readViewerAutoArchiveSettings(viewer) : undefined),
       user: {
         ...(avatarUrl ? { avatarUrl } : undefined),
         email: session.user.email,
@@ -618,22 +663,34 @@ export function createDashboardApp(
       );
     }
     const session = c.get("authSession");
+    const { displayName, ...autoArchive } = parsed.data;
+    // Parsed bodies omit settings the request did not send.
+    const changesAutoArchive = Object.keys(autoArchive).length > 0;
     // Mock reporting keeps profile edits process-local and out of SQL.
     if (options.mockConversations) {
-      mockDisplayNamesByEmail.set(viewer.email, parsed.data.displayName);
+      if (displayName !== undefined) {
+        mockDisplayNamesByEmail.set(viewer.email, displayName);
+      }
+      if (changesAutoArchive) {
+        mockAutoArchiveSettingsByEmail.set(viewer.email, {
+          ...(await readViewerAutoArchiveSettings(viewer)),
+          ...autoArchive,
+        });
+      }
       return jsonResponse(dashboardIdentitySchema, {
+        ...(await readViewerAutoArchiveSettings(viewer)),
         user: {
           email: session.user.email,
           emailVerified: session.user.emailVerified,
           isAdmin: viewer.isAdmin === true,
-          name: parsed.data.displayName,
+          name: mockDisplayNamesByEmail.get(viewer.email) ?? viewer.displayName,
         },
       });
     }
-    const updated = await updateViewerDisplayName(
-      viewer.id,
-      parsed.data.displayName,
-    );
+    const updated =
+      displayName === undefined
+        ? viewer
+        : await updateViewerDisplayName(viewer.id, displayName);
     if (!updated) {
       return jsonResponse(
         apiErrorSchema,
@@ -642,13 +699,24 @@ export function createDashboardApp(
       );
     }
     const avatarUrl = await viewerAvatarUrl(updated.id);
+    const savedAutoArchive = changesAutoArchive
+      ? await updateUserAutoArchiveSettings(viewer.id, autoArchive)
+      : await readUserAutoArchiveSettings(viewer.id);
+    if (!savedAutoArchive) {
+      return jsonResponse(
+        apiErrorSchema,
+        { error: "User not found." },
+        { status: 404 },
+      );
+    }
     return jsonResponse(dashboardIdentitySchema, {
+      ...savedAutoArchive,
       user: {
         ...(avatarUrl ? { avatarUrl } : undefined),
         email: session.user.email,
         emailVerified: session.user.emailVerified,
         isAdmin: updated.isAdmin === true,
-        name: updated.displayName,
+        name: updated.displayName ?? session.user.name,
       },
     });
   });

package/src/auth.ts

@@ -9,7 +9,11 @@ export type { DashboardSession };
 export interface DashboardAuth {
   handler(request: Request): Promise<Response>;
   getSession(request: Request): Promise<DashboardSession | null>;
-  signInWithGoogle(request: Request, callbackURL: string): Promise<Response>;
+  signInWithGoogle(
+    request: Request,
+    callbackURL: string,
+    errorCallbackURL: string,
+  ): Promise<Response>;
 }
 
 /** Read a personal bearer token from one dashboard API request. */

package/src/client/components/FormNotice.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import { TriangleAlert } from "lucide-react";
 import { cn } from "../styles";
+import { Alert, AlertTitle } from "./ui/alert";
 
 /** Keep form recovery text and actions visible without truncation. */
 export function FormNotice(props: {
@@ -10,31 +11,27 @@ export function FormNotice(props: {
 }) {
   const error = props.tone === "error";
   return (
-    <div
+    // Flex, not the Alert grid: the text column keeps its content width and
+    // its margin collapses with the first paragraph. The children hold links
+    // and buttons, so they skip AlertDescription and its link styles.
+    <Alert
       role={error ? "alert" : "status"}
       className={cn(
-        "flex min-w-0 gap-3 rounded-md border p-4",
+        "flex min-w-0 rounded-md p-4 has-[>svg]:gap-x-3",
         error
-          ? "border-rose-300/25 bg-rose-300/5"
-          : "border-amber-300/25 bg-amber-300/5",
+          ? "border-rose-300/25 bg-rose-300/5 *:[svg]:text-rose-300"
+          : "border-amber-300/25 bg-amber-300/5 *:[svg]:text-amber-300",
       )}
     >
-      <TriangleAlert
-        aria-hidden
-        size={18}
-        className={cn(
-          "mt-0.5 shrink-0",
-          error ? "text-rose-300" : "text-amber-300",
-        )}
-      />
+      <TriangleAlert aria-hidden className="size-4.5 shrink-0" />
       <div className="min-w-0">
-        <p className="m-0 text-sm font-medium">{props.title}</p>
+        <AlertTitle>{props.title}</AlertTitle>
         {props.children ? (
           <div className="mt-1 text-sm leading-relaxed text-dashboard-text-muted">
             {props.children}
           </div>
         ) : null}
       </div>
-    </div>
+    </Alert>
   );
 }

package/src/client/components/ProfileMenu.tsx

@@ -17,6 +17,7 @@ import { cn, dashboardInteractiveTextClass } from "../styles";
 import type { Identity } from "../types";
 import { ThemeSwitcher } from "./ThemeSwitcher";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+import { Button, buttonVariants } from "./ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 
 type ProfileMenuProps = {
@@ -131,8 +132,7 @@ function SpendAmount({ value }: { value?: number }) {
   );
 }
 
-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";
+const profileLinkClass = buttonVariants({ size: "menu" });
 
 /** Group the signed-in identity, personal profile, and session actions. */
 export function ProfileMenu({
@@ -218,17 +218,16 @@ export function ProfileMenu({
           {page.label}
         </Link>
       ))}
-      <button
-        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 hover:text-dashboard-text focus-visible:bg-dashboard-fill-strong focus-visible:text-dashboard-text focus-visible:outline-none"
+      <Button
         onClick={() => {
           close();
           void onSignOut();
         }}
-        type="button"
+        size="menu"
       >
         <LogOut aria-hidden="true" size={16} strokeWidth={2} />
         Log out
-      </button>
+      </Button>
     </>
   );
 

package/src/client/conversations/AutoArchiveToggle.tsx

@@ -0,0 +1,35 @@
+import { Checkbox } from "../components/ui/checkbox";
+import { InlineError } from "../components/InlineError";
+import { useSetConversationAutoArchive } from "./autoArchiveQueries";
+
+/** Let a participant turn auto-archive on or off for this conversation. */
+export function AutoArchiveToggle(props: {
+  autoArchive: boolean;
+  conversationId: string;
+}) {
+  const update = useSetConversationAutoArchive(props.conversationId);
+  return (
+    <div className="grid gap-1">
+      <label className="flex cursor-pointer items-start gap-2.5">
+        <Checkbox
+          checked={props.autoArchive}
+          className="mt-0.5"
+          disabled={update.isPending}
+          onCheckedChange={(checked) => update.mutate(checked)}
+        />
+        <span className="grid gap-0.5">
+          <span className="font-semibold text-dashboard-text">
+            Auto-archive when done
+          </span>
+          <span>
+            Archive this conversation for you when its linked work is merged or
+            closed and nobody replies during your wait time.
+          </span>
+        </span>
+      </label>
+      {update.isError ? (
+        <InlineError>Could not save auto-archive. Try again.</InlineError>
+      ) : null}
+    </div>
+  );
+}

package/src/client/conversations/ConversationArchiveNotices.tsx

@@ -5,7 +5,7 @@ import { Notice, NoticeAction } from "../components/Notice";
 import { cn } from "../styles";
 import type { Conversation } from "../types";
 import { conversationDisplayTitle } from "../format";
-import { useArchiveConversation } from "./queries";
+import { useArchiveConversation } from "./conversationArchive";
 
 /** Show archive errors and the most recent reversible archive action. */
 export function ConversationArchiveNotices(props: {

package/src/client/conversations/ConversationChildAgents.tsx

@@ -24,6 +24,7 @@ import {
   formatUsageTotal,
 } from "../format";
 import { fetchDashboardJson } from "../http";
+import { conversationSideReadQueryKey } from "./queries";
 import { cn } from "../styles";
 import type { SubagentTranscriptTarget } from "./SubagentTranscriptDrawer";
 
@@ -56,7 +57,7 @@ export function useConversationChildAgents(conversationId: string) {
         `/api/conversations/${encodeURIComponent(conversationId)}/agents`,
         signal,
       ),
-    queryKey: ["conversation", conversationId, "agents"],
+    queryKey: conversationSideReadQueryKey(conversationId, "agents"),
     retry: false,
   });
 }

package/src/client/conversations/ConversationDetails.tsx

@@ -39,6 +39,8 @@ type Brief = NonNullable<ConversationDetailReport["brief"]>;
  * it, and what it cost. Each fact shows here only, not in the title bar.
  */
 export function ConversationDetails(props: {
+  /** Viewer's auto-archive control. Null for non-participants. */
+  autoArchive: ReactNode;
   brief?: Brief;
   conversationId: string;
   /** True when a sidebar review chip opened details. */
@@ -50,8 +52,6 @@ export function ConversationDetails(props: {
   onOpenSubagent(target: SubagentTranscriptTarget): void;
   /** Show one memory where its Turn recalled or captured it. */
   onSelectMemory(entry: ConversationMemoryEntry & { turnId: string }): void;
-  /** The prompt that started each loaded Turn. */
-  memoryPrompts: Map<string, string>;
   overview: ReactNode;
   usage: ReactNode;
 }) {
@@ -98,7 +98,6 @@ export function ConversationDetails(props: {
               if (!panel) props.onClose();
               props.onSelectMemory(entry);
             }}
-            prompts={props.memoryPrompts}
           />
         </div>
       </DetailsPanel>
@@ -167,6 +166,10 @@ export function ConversationDetails(props: {
             ) : null}
           </DetailsCard>
         ) : null}
+        {/* Linked work decides when auto-archive runs, so it follows. */}
+        {props.autoArchive != null ? (
+          <DetailsCard>{props.autoArchive}</DetailsCard>
+        ) : null}
         {agents?.length ? (
           <DetailsCard count={agents.length} title="Subagents">
             <ConversationChildAgents

package/src/client/conversations/ConversationHeader.tsx

@@ -14,6 +14,7 @@ import {
   HeaderIconButton,
   TranscriptSearchToggle,
   type ConversationArchiveAction,
+  type ConversationPinAction,
 } from "./ConversationHeaderActions";
 import { ConversationOverflowMenu } from "./ConversationOverflowMenu";
 import { ShareConversationButton } from "./ShareConversationButton";
@@ -44,6 +45,7 @@ export function ConversationHeader(props: {
   location?: ReactNode;
   onSearchChange(value: string): void;
   onViewChange(value: TranscriptViewMode): void;
+  pin: ConversationPinAction;
   privacy: ReactNode;
   search: string;
   sentryConversationUrl?: string;
@@ -92,6 +94,7 @@ export function ConversationHeader(props: {
     <ConversationHeaderActions
       archive={props.archive}
       conversationId={props.conversationId}
+      pin={props.pin}
       copyAction={props.copyAction}
       detailsOpen={detailsOpen}
       onDetailsClick={() => {
@@ -116,6 +119,7 @@ export function ConversationHeader(props: {
   const showMobileHeader =
     searchOpenVisible ||
     props.archive.error ||
+    props.pin.error ||
     Boolean(props.linkedWork) ||
     Boolean(props.forks) ||
     Boolean(props.agentTree);
@@ -259,6 +263,11 @@ export function ConversationHeader(props: {
             Could not update archive state.
           </div>
         ) : null}
+        {props.pin.error ? (
+          <div className="px-4 pb-3 text-xs text-red-300 md:px-7">
+            Could not update pin.
+          </div>
+        ) : null}
       </header>
     </>
   );

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -4,6 +4,8 @@ import {
   ArchiveRestore,
   Info,
   MessagesSquare,
+  Pin,
+  PinOff,
   ScrollText,
   Search,
   X,
@@ -28,12 +30,20 @@ export type ConversationArchiveAction = {
   pending: boolean;
 };
 
+export type ConversationPinAction = {
+  disabled: boolean;
+  error: boolean;
+  onClick(): void;
+  pinned: boolean;
+};
+
 /**
  * Show conversation actions in the `⋯` menu. On desktop the title bar shows
  * search, share, and details, so the menu leaves them out.
  */
 export function ConversationHeaderActions(props: {
   archive: ConversationArchiveAction;
+  pin: ConversationPinAction;
   conversationId: string;
   copyAction?: ReactNode;
   detailsOpen: boolean;
@@ -83,6 +93,17 @@ export function ConversationHeaderActions(props: {
         />
       ) : null}
       {props.copyAction}
+      <MenuActionButton
+        disabled={props.pin.disabled}
+        label={props.pin.pinned ? "Unpin" : "Pin"}
+        onClick={props.pin.onClick}
+      >
+        {props.pin.pinned ? (
+          <PinOff aria-hidden="true" size={16} strokeWidth={2} />
+        ) : (
+          <Pin aria-hidden="true" size={16} strokeWidth={2} />
+        )}
+      </MenuActionButton>
       <ArchiveConversationButton {...props.archive} />
       {props.sentryConversationUrl ? (
         <a
@@ -211,6 +232,7 @@ export function TranscriptSearchToggle(props: {
 
 function MenuActionButton(props: {
   children: ReactNode;
+  disabled?: boolean;
   label: string;
   onClick(): void;
   pressed?: boolean;
@@ -220,6 +242,7 @@ function MenuActionButton(props: {
       aria-label={props.label}
       aria-pressed={props.pressed}
       className={props.pressed ? "bg-dashboard-fill-strong" : undefined}
+      disabled={props.disabled}
       onClick={props.onClick}
       size="menu"
     >

package/src/client/conversations/ConversationHomeList.tsx

@@ -20,7 +20,7 @@ import { ConversationSidebarAnnotations } from "./ConversationMeta";
 import { ConversationArchiveNotices } from "./ConversationArchiveNotices";
 import { ConversationListStatusIcon } from "./ConversationListStatusIcon";
 import { conversationPath } from "./conversationRoutes";
-import { useArchiveConversation } from "./queries";
+import { useArchiveConversation } from "./conversationArchive";
 import { DisplayText } from "../display-text/DisplayText";
 import {
   attentionConversationIds,