@sentry/junior-dashboard 0.276.0 → 0.278.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.276.0",
+  "version": "0.278.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -34,16 +34,17 @@
     "react-dom": "^19.2.6",
     "react-is": "^19.2.6",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^4.17.0",
     "react-router": "^7.18.2",
     "recharts": "3.8.0",
     "remark-breaks": "^4.0.0",
     "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.278.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.276.0"
+    "@sentry/junior": "0.278.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -64,7 +65,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.276.0"
+    "@sentry/junior": "0.278.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 token 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/App.tsx

@@ -34,6 +34,7 @@ import { useDashboardServerVersion } from "./dashboard-version";
 import { ConversationWorkspace } from "./conversations/ConversationWorkspace";
 import { ConversationWorkspaceLoading } from "./conversations/ConversationWorkspaceLoading";
 import { useConversationData } from "./conversations/queries";
+import { readConversationStartPosition } from "./conversations/transcriptReadPosition";
 import { codeRepositoryTabs } from "./pages/code/codeRepositoryRoutes";
 import { RepositoryPage } from "./pages/code/RepositoryPage";
 import { CodePage } from "./pages/code/CodePage";
@@ -154,8 +155,12 @@ export function DashboardShell() {
     location.pathname.startsWith("/conversations/");
   const conversationId = conversationIdFromPath(location.pathname);
   const conversationsQuery = useConversationsData();
-  // Detail query shares the page cache so titles outside the top-50 feed stay accurate.
-  const conversationDetail = useConversationData(conversationId);
+  // The shell owns the open Conversation's data, and the page reads it. On a
+  // direct load, this fetch runs beside the dashboard core reads, before the
+  // page mounts. One fetch for each visit also brings the unread page.
+  const conversationDetail = useConversationData(conversationId, {
+    unreadPageAtOpen: readConversationStartPosition() === "unread",
+  });
   const mobileConversation = useMemo(() => {
     if (!conversationId) return undefined;
     return buildConversations(
@@ -439,7 +444,7 @@ export function DashboardShell() {
                 loading ? (
                   <ConversationWorkspaceLoading detail={false} />
                 ) : data ? (
-                  <ConversationWorkspace />
+                  <ConversationWorkspace detail={conversationDetail} />
                 ) : (
                   <LoadingView
                     label={query.error?.message ?? "Dashboard unavailable"}
@@ -481,7 +486,7 @@ export function DashboardShell() {
                 loading ? (
                   <ConversationWorkspaceLoading detail />
                 ) : data ? (
-                  <ConversationWorkspace />
+                  <ConversationWorkspace detail={conversationDetail} />
                 ) : (
                   <LoadingView
                     label={query.error?.message ?? "Dashboard unavailable"}

package/src/client/components/DetailsPanel.tsx

@@ -124,7 +124,7 @@ export function DetailsPanel(props: {
           </Button>
         </div>
       </header>
-      <div className="min-h-0 overflow-y-auto overscroll-contain">
+      <div className="thin-scrollbar min-h-0 overflow-y-auto overscroll-contain">
         {props.children}
       </div>
     </aside>

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/components/ui/resizable.tsx

@@ -0,0 +1,50 @@
+import * as ResizablePrimitive from "react-resizable-panels";
+import { cn } from "@dashboard/lib/utils";
+
+/** Lay out resizable panels in one row or column. */
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Hold one resizable region inside a panel group. */
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+/** Drag or use arrow keys to resize the panels on each side. */
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean;
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
+      )}
+    </ResizablePrimitive.Separator>
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/src/client/conversations/AutoArchiveToggle.tsx

@@ -0,0 +1,71 @@
+import { useId } from "react";
+import { CircleHelp } from "lucide-react";
+
+import { Checkbox } from "../components/ui/checkbox";
+import { InlineError } from "../components/InlineError";
+import {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTrigger,
+} from "../components/ui/popover";
+import { useSetConversationAutoArchive } from "./autoArchiveQueries";
+
+const AUTO_ARCHIVE_HELP =
+  "Archive this conversation for you when its linked work is merged or closed and nobody replies during your wait time.";
+
+/** 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);
+  const helpId = useId();
+  return (
+    <div className="grid gap-1">
+      <div className="flex items-center gap-1.5">
+        <label className="flex cursor-pointer items-center gap-2.5">
+          <Checkbox
+            aria-describedby={helpId}
+            checked={props.autoArchive}
+            disabled={update.isPending}
+            onCheckedChange={(checked) => update.mutate(checked)}
+          />
+          <span className="font-semibold text-dashboard-text">
+            Auto archive
+          </span>
+        </label>
+        {/* A popover, not a tooltip: touch screens open it with a tap. */}
+        <Popover>
+          <PopoverTrigger
+            delay={0}
+            openOnHover
+            render={
+              <button
+                aria-label="About auto archive"
+                className="grid place-items-center rounded-sm text-dashboard-text-muted hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus"
+                type="button"
+              >
+                <CircleHelp aria-hidden="true" size={14} strokeWidth={2} />
+              </button>
+            }
+          />
+          <PopoverContent
+            aria-label="About auto archive"
+            className="w-64 px-3 py-2 text-xs"
+            side="top"
+          >
+            <PopoverDescription>{AUTO_ARCHIVE_HELP}</PopoverDescription>
+          </PopoverContent>
+        </Popover>
+        {/* Keep the help text for screen readers when the popover is closed. */}
+        <span className="sr-only" id={helpId}>
+          {AUTO_ARCHIVE_HELP}
+        </span>
+      </div>
+      {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,9 +45,11 @@ export function ConversationHeader(props: {
   location?: ReactNode;
   onSearchChange(value: string): void;
   onViewChange(value: TranscriptViewMode): void;
+  pin: ConversationPinAction;
   privacy: ReactNode;
   search: string;
   sentryConversationUrl?: string;
+  sidebarToggle?: ReactNode;
   title: string;
   view: TranscriptViewMode;
 }) {
@@ -92,6 +95,7 @@ export function ConversationHeader(props: {
     <ConversationHeaderActions
       archive={props.archive}
       conversationId={props.conversationId}
+      pin={props.pin}
       copyAction={props.copyAction}
       detailsOpen={detailsOpen}
       onDetailsClick={() => {
@@ -116,6 +120,7 @@ export function ConversationHeader(props: {
   const showMobileHeader =
     searchOpenVisible ||
     props.archive.error ||
+    props.pin.error ||
     Boolean(props.linkedWork) ||
     Boolean(props.forks) ||
     Boolean(props.agentTree);
@@ -161,8 +166,11 @@ export function ConversationHeader(props: {
           !showMobileHeader && "hidden md:block",
         )}
       >
-        <div className="hidden h-12 min-w-0 items-center justify-between gap-4 pl-7 pr-4 md:flex">
+        <div className="hidden h-13 min-w-0 items-center justify-between gap-4 px-4 md:flex">
           <div className="flex min-w-0 items-center gap-2">
+            {props.sidebarToggle ? (
+              <div className="shrink-0">{props.sidebarToggle}</div>
+            ) : null}
             {props.agentTree ? (
               <div className="min-w-0 shrink-[2]">{props.agentTree}</div>
             ) : props.location ? (
@@ -216,9 +224,9 @@ export function ConversationHeader(props: {
             </ConversationOverflowMenu>
             <HeaderIconButton
               ref={detailsButtonRef}
+              expanded={detailsOpen}
               label="Conversation details"
               onClick={props.onDetailsClick}
-              pressed={detailsOpen}
             >
               <PanelRight aria-hidden="true" size={15} strokeWidth={2} />
             </HeaderIconButton>
@@ -259,6 +267,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>
     </>
   );