@sentry/junior-dashboard 0.275.0 → 0.277.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.275.0",
+  "version": "0.277.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -23,6 +23,7 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.9.0",
+    "@sentry/browser": "11.10.0",
     "@tanstack/react-query": "^5.100.14",
     "@uidotdev/usehooks": "2.4.1",
     "class-variance-authority": "^0.7.1",
@@ -39,10 +40,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.275.0"
+    "@sentry/junior-plugin-api": "0.277.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.275.0"
+    "@sentry/junior": "0.277.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -63,7 +64,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.275.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,13 +5,20 @@ import {
   createJuniorApi,
   jsonResponse,
   readViewerAvatarUrl,
+  DEFAULT_AUTO_ARCHIVE_SETTINGS,
+  readUserAutoArchiveSettings,
   resolveViewerUser,
+  updateUserAutoArchiveSettings,
   updateViewerDisplayName,
+  type AutoArchiveSettings,
   type ConversationWorkQueue,
   type JuniorApiVariables,
 } from "@sentry/junior/api";
 import { apiErrorSchema } from "@sentry/junior/api/schema";
-import { initSentry } from "@sentry/junior/instrumentation";
+import {
+  getBrowserSentryConfig,
+  initSentry,
+} from "@sentry/junior/instrumentation";
 import { JUNIOR_VERSION } from "@sentry/junior/version";
 import { DASHBOARD_VERSION_HEADER } from "./dashboard-version";
 import { revalidateConversation } from "./conversation-cache";
@@ -35,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 {
@@ -59,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
@@ -71,7 +79,8 @@ const mockDisplayNamesByEmail = new Map<string, string>();
  */
 export function resetMockDashboardState(): void {
   mockDisplayNamesByEmail.clear();
-  resetMockConversationArchiveState();
+  resetMockConversationViewerState();
+  mockAutoArchiveSettingsByEmail.clear();
   resetMockReadPositions();
 }
 
@@ -252,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,
@@ -394,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) {
@@ -505,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 }>) => {
@@ -527,10 +563,12 @@ export function createDashboardApp(
     }
   }
 
+  const renderPage = () =>
+    renderDashboard(basePath, agentName, getBrowserSentryConfig());
   for (const { nested, path } of dashboardPagePaths(basePath)) {
-    app.get(path, () => renderDashboard(basePath, agentName));
+    app.get(path, renderPage);
     if (nested) {
-      app.get(`${path}/*`, () => renderDashboard(basePath, agentName));
+      app.get(`${path}/*`, renderPage);
     }
   }
   for (const route of options.pluginRoutes ?? []) {
@@ -571,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,
@@ -613,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,
@@ -637,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/ConversationComposer.tsx

@@ -81,7 +81,10 @@ type ConversationComposerProps = {
    * crushed beside the mobile send button.
    */
   footerStart?: ReactNode;
+  /** Text only, for a narrow panel: no images, no key hint, icon-only send. */
+  compact?: boolean;
   label: string;
+  placeholder?: string;
   /**
    * Restore the submitted text after a failed accept when there is no mailbox
    * outbox (new conversation create). Existing conversations keep failures in
@@ -433,7 +436,12 @@ export const ConversationComposer = memo(function ConversationComposer(
         )}
         onDragOver={(event) => {
           if (!event.dataTransfer.types.includes("Files")) return;
+          // Always cancel a file drop, or the browser opens the file.
           event.preventDefault();
+          if (props.compact) {
+            event.dataTransfer.dropEffect = "none";
+            return;
+          }
           event.dataTransfer.dropEffect = "copy";
           setDragging(true);
         }}
@@ -444,12 +452,13 @@ export const ConversationComposer = memo(function ConversationComposer(
         onDrop={(event) => {
           if (!event.dataTransfer.types.includes("Files")) return;
           event.preventDefault();
+          if (props.compact) return;
           setDragging(false);
           void addImages(Array.from(event.dataTransfer.files));
         }}
         onPaste={(event) => {
           const files = Array.from(event.clipboardData.files);
-          if (!files.length) return;
+          if (props.compact || !files.length) return;
           event.preventDefault();
           void addImages(files);
         }}
@@ -510,7 +519,7 @@ export const ConversationComposer = memo(function ConversationComposer(
           }}
           onFocus={props.onFocus}
           onKeyDown={handleKeyDown}
-          placeholder="Message Junior…"
+          placeholder={props.placeholder ?? "Message Junior…"}
           ref={textareaRef}
           rows={1}
           spellCheck={autocorrect}
@@ -524,27 +533,29 @@ export const ConversationComposer = memo(function ConversationComposer(
           )}
         >
           <div className="flex min-w-0 items-center gap-3">
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <Button
-                    focusableWhenDisabled
-                    aria-label="Attach images"
-                    disabled={sendLocked || readingImages}
-                    onClick={() => fileInputRef.current?.click()}
-                    size="icon"
-                    type="button"
-                  >
-                    <ImagePlus aria-hidden="true" size={16} />
-                  </Button>
-                }
-              />
-              <TooltipContent size="compact">
-                Attach images (up to 3 MB total)
-              </TooltipContent>
-            </Tooltip>
+            {props.compact ? null : (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <Button
+                      focusableWhenDisabled
+                      aria-label="Attach images"
+                      disabled={sendLocked || readingImages}
+                      onClick={() => fileInputRef.current?.click()}
+                      size="icon"
+                      type="button"
+                    >
+                      <ImagePlus aria-hidden="true" size={16} />
+                    </Button>
+                  }
+                />
+                <TooltipContent size="compact">
+                  Attach images (up to 3 MB total)
+                </TooltipContent>
+              </Tooltip>
+            )}
             {props.footerStart}
-            {props.footerStart ? null : (
+            {props.footerStart || props.compact ? null : (
               <div className="hidden min-w-0 font-sans text-xs leading-relaxed text-dashboard-text-muted md:block">
                 Enter to send · Shift+Enter for a new line
               </div>
@@ -565,7 +576,10 @@ export const ConversationComposer = memo(function ConversationComposer(
             ) : null}
             <Button
               aria-label={sendLocked ? "Sending message" : props.submitLabel}
-              className="disabled:!border-transparent disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted disabled:!opacity-100"
+              className={cn(
+                "disabled:!border-transparent disabled:!bg-dashboard-fill-hover disabled:!text-dashboard-text-muted disabled:!opacity-100",
+                props.compact && "w-9 px-0",
+              )}
               disabled={
                 (!canSend && !images.length) ||
                 !online ||
@@ -576,9 +590,11 @@ export const ConversationComposer = memo(function ConversationComposer(
               type="submit"
             >
               <Send aria-hidden="true" size={14} />
-              <span className="hidden md:inline">
-                {sendLocked ? "Sending…" : props.submitLabel}
-              </span>
+              {props.compact ? null : (
+                <span className="hidden md:inline">
+                  {sendLocked ? "Sending…" : props.submitLabel}
+                </span>
+              )}
             </Button>
           </div>
         </div>