@sentry/junior-dashboard 0.277.0 → 0.278.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.277.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.277.0"
+    "@sentry/junior-plugin-api": "0.278.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.277.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.277.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/app.ts

@@ -537,7 +537,7 @@ export function createDashboardApp(
   };
 
   app.use("*", requireAuth);
-  // Core detail reads set a version ETag before they build the report. Mock
+  // 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);

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/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

@@ -1,32 +1,68 @@
+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">
-      <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">
+      <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 when done
-          </span>
-          <span>
-            Archive this conversation for you when its linked work is merged or
-            closed and nobody replies during your wait time.
+            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>
-      </label>
+      </div>
       {update.isError ? (
         <InlineError>Could not save auto-archive. Try again.</InlineError>
       ) : null}

package/src/client/conversations/ConversationHeader.tsx

@@ -49,6 +49,7 @@ export function ConversationHeader(props: {
   privacy: ReactNode;
   search: string;
   sentryConversationUrl?: string;
+  sidebarToggle?: ReactNode;
   title: string;
   view: TranscriptViewMode;
 }) {
@@ -165,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 ? (
@@ -220,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>

package/src/client/conversations/ConversationHeaderActions.tsx

@@ -179,6 +179,8 @@ function ViewModeItem(props: {
 /** Shared icon control used by conversation and subagent transcript headers. */
 export function HeaderIconButton(props: {
   children: ReactNode;
+  controls?: string;
+  expanded?: boolean;
   ref?: Ref<HTMLButtonElement>;
   label: string;
   onClick(): void;
@@ -192,6 +194,8 @@ export function HeaderIconButton(props: {
         render={
           <Button
             ref={props.ref}
+            aria-controls={props.controls}
+            aria-expanded={props.expanded}
             aria-label={props.label}
             aria-pressed={props.pressed}
             className={cn(

package/src/client/conversations/ConversationMeta.tsx

@@ -469,7 +469,7 @@ function SourceTask(props: {
   );
 }
 
-/** Resolve the model still running an open turn, including mid-turn handoffs. */
+/** Resolve the model that an open turn last called. */
 export function liveModelId(
   detail: ConversationDetailReport | undefined,
 ): string | undefined {
@@ -484,12 +484,7 @@ export function liveModelId(
       if (openTurns.size === 0) modelId = undefined;
       continue;
     }
-    if (openTurns.size === 0) continue;
-    if (data.type === "turn_routed" && openTurns.has(data.turnId)) {
-      modelId = data.modelId;
-      continue;
-    }
-    if (data.type === "handoff") modelId = data.modelId;
+    if (openTurns.size > 0 && event.model) modelId = event.model.modelId;
   }
   return openTurns.size > 0 ? modelId : undefined;
 }