@sentry/junior-dashboard 0.277.0 → 0.278.0

package/src/client/conversations/ConversationWorkspaceLoading.tsx

@@ -1,10 +1,17 @@
+import type { CSSProperties } from "react";
+
 import { Skeleton } from "../components/ui/skeleton";
 import { dashboardContainerClass, cn } from "../styles";
 import { ChatLayout } from "./ChatLayout";
 import { ConversationHomeListLoading } from "./ConversationHomeList";
+import {
+  readSidebarWidth,
+  useConversationSidebarOpen,
+} from "./conversationSidebarLayout";
 
 /** Keep the conversation workspace geometry stable while its first data loads. */
 export function ConversationWorkspaceLoading(props: { detail: boolean }) {
+  const [sidebarOpen] = useConversationSidebarOpen();
   if (!props.detail) return <ConversationHomeLoading />;
   return (
     <div
@@ -12,12 +19,19 @@ export function ConversationWorkspaceLoading(props: { detail: boolean }) {
       aria-live="polite"
       className={cn(
         dashboardContainerClass,
-        "grid h-full min-h-0 overflow-hidden md:grid-cols-[20rem_minmax(0,1fr)]",
+        "grid h-full min-h-0 grid-cols-[minmax(0,1fr)] overflow-hidden",
+        sidebarOpen &&
+          "md:grid-cols-[var(--conversation-sidebar-width)_minmax(0,1fr)]",
       )}
       role="status"
+      style={
+        {
+          "--conversation-sidebar-width": `${readSidebarWidth()}px`,
+        } as CSSProperties
+      }
     >
       <span className="sr-only">Loading conversation</span>
-      <ConversationSidebarLoading />
+      {sidebarOpen ? <ConversationSidebarLoading /> : null}
       <ConversationDetailLoading />
     </div>
   );
@@ -90,7 +104,7 @@ function ConversationDetailLoading() {
     >
       <ChatLayout
         scrollAriaLabel="Conversation transcript"
-        scrollClassName="px-3 pb-1.5 md:px-7 md:pb-2"
+        scrollClassName="thin-scrollbar px-3 pb-1.5 md:px-7 md:pb-2"
         scroll={
           <section className="min-w-0">
             <div className="mb-4 grid gap-3 border-b border-dashboard-border-subtle py-4">

package/src/client/conversations/EventDetails.tsx

@@ -14,67 +14,17 @@ import { dashboardDisclosureChevronClass } from "../styles";
 import { RedactedMarker } from "./TranscriptRedacted";
 import { DetailsCard } from "./DetailsList";
 import { DisplayText } from "../display-text/DisplayText";
-import { eventLogModel } from "./eventLog";
-import { formatCostBreakdown } from "../format";
 import { EventUsage } from "./EventUsage";
 
 /** Present event content as readable sections, with the exact report available on demand. */
 export function EventDetails({ event }: { event: ConversationReportEvent }) {
   const data = event.data;
   const mentions = event.mentions ?? [];
-  const model = eventLogModel(event);
+  const model = event.model;
   const { usage, ...callAttributes } = event.modelCall ?? {};
   let content: ReactNode;
 
   switch (data.type) {
-    case "turn_routed": {
-      const {
-        type: _,
-        modelId: _modelId,
-        modelProfile: _profile,
-        reasoningLevel: _reasoning,
-        costUsd,
-        ...metadata
-      } = data;
-      content = (
-        <DetailSection title="Route selection">
-          <DetailValue
-            value={{
-              ...metadata,
-              ...(costUsd !== undefined
-                ? { routerCostUsd: formatCostBreakdown({ total: costUsd }) }
-                : undefined),
-            }}
-          />
-        </DetailSection>
-      );
-      break;
-    }
-    case "handoff": {
-      const {
-        type: _,
-        modelId: _modelId,
-        modelProfile: _profile,
-        reasoningLevel: _reasoning,
-        summary,
-        ...metadata
-      } = data;
-      content = (
-        <>
-          {Object.keys(metadata).length > 0 ? (
-            <DetailSection>
-              <DetailValue value={metadata} />
-            </DetailSection>
-          ) : null}
-          {summary ? (
-            <DetailSection title="Continuation summary">
-              <DisplayText mentions={mentions} text={summary} />
-            </DetailSection>
-          ) : null}
-        </>
-      );
-      break;
-    }
     case "message": {
       const { type: _, text, redacted, ...metadata } = data;
       content = (
@@ -172,20 +122,10 @@ export function EventDetails({ event }: { event: ConversationReportEvent }) {
 
   return (
     <div className="@container grid min-w-0 gap-3">
-      <DetailSection
-        title={
-          data.type === "handoff" ? "Target configuration" : "Configuration"
-        }
-      >
+      <DetailSection title="Configuration">
         <DetailValue
           value={{
             model: model?.modelId ?? "Not recorded",
-            ...(model
-              ? {
-                  modelProfile: model.modelProfile ?? "Not recorded",
-                  reasoningLevel: model.reasoningLevel ?? "Not recorded",
-                }
-              : undefined),
             ...callAttributes,
           }}
         />

package/src/client/conversations/TranscriptActivityGroup.tsx

@@ -42,6 +42,33 @@ export function isCollapsibleActivityEntry(
   return true;
 }
 
+/**
+ * Keys of message rows that fold into activity: each quiet reply and the
+ * Event messages that started its Turn. Event messages wait for the next
+ * reply; a message from a person clears them.
+ */
+export function quietTurnEntryKeys(
+  entries: readonly RenderedTranscriptEntry[],
+): Set<string> {
+  const keys = new Set<string>();
+  let eventKeys: string[] = [];
+  for (const entry of entries) {
+    if (entry.kind !== "message") continue;
+    const { message } = entry;
+    if (message.role === "user") {
+      eventKeys = message.eventType ? [...eventKeys, entry.key] : [];
+      continue;
+    }
+    if (message.role !== "assistant") continue;
+    if (message.quiet) {
+      keys.add(entry.key);
+      for (const key of eventKeys) keys.add(key);
+    }
+    eventKeys = [];
+  }
+  return keys;
+}
+
 function entryStartMs(entry: RenderedTranscriptEntry): number | undefined {
   if (entry.kind === "tool") {
     return entry.part.startedTimestamp ?? entry.timestamp;
@@ -104,25 +131,18 @@ export function activityGroupSummary(
     (entry) =>
       entry.kind === "context" && entry.part.event.type === "compaction",
   ).length;
-  const handoffs = entries.flatMap((entry) =>
-    entry.kind === "context" && entry.part.event.type === "handoff"
-      ? [entry.part.event]
-      : [],
-  );
   const structuredCount = entries.filter(
     (entry) => entry.kind === "structured_event",
   ).length;
   const attachmentsCount = entries.filter(
     (entry) => entry.kind === "attachments_delivered",
   ).length;
-  const eventCount = entries.filter((entry) => entry.kind === "message").length;
-  const [onlyHandoff] = handoffs;
-  const handoffSummary =
-    handoffs.length === 1 && onlyHandoff
-      ? `model handoff to ${onlyHandoff.modelId} (${onlyHandoff.modelProfile})`
-      : handoffs.length > 1
-        ? countLabel(handoffs.length, "model handoff", "model handoffs")
-        : undefined;
+  const eventCount = entries.filter(
+    (entry) => entry.kind === "message" && entry.message.role !== "assistant",
+  ).length;
+  const quietReplyCount = entries.filter(
+    (entry) => entry.kind === "message" && entry.message.role === "assistant",
+  ).length;
 
   const parts = [
     toolCount > 0
@@ -134,7 +154,6 @@ export function activityGroupSummary(
     compactionCount > 0
       ? countLabel(compactionCount, "context compacted", "context compacted")
       : undefined,
-    handoffSummary,
     structuredCount > 0
       ? countLabel(structuredCount, "1 structured event", "structured events")
       : undefined,
@@ -142,6 +161,9 @@ export function activityGroupSummary(
       ? countLabel(attachmentsCount, "1 file delivery", "file deliveries")
       : undefined,
     eventCount > 0 ? countLabel(eventCount, "1 event", "events") : undefined,
+    quietReplyCount > 0
+      ? countLabel(quietReplyCount, "1 quiet reply", "quiet replies")
+      : undefined,
   ].filter((value): value is string => value !== undefined);
 
   return parts.length > 0 ? parts.join(" · ") : activityGroupLabel(entries);

package/src/client/conversations/TranscriptContextEventView.tsx

@@ -16,24 +16,15 @@ export function TranscriptContextEventView(props: {
   timestamp?: number;
 }) {
   const event = props.part.event;
-  const handoff = event.type === "handoff";
-  const compactionDetail =
-    event.type === "compaction" && event.details
-      ? ` at approximately ${formatCompactNumber(event.details.estimatedInputTokens)} estimated tokens`
-      : "";
-  const compactionModel =
-    event.type === "compaction" && event.modelProfile && event.modelId
-      ? ` using the ${event.modelProfile} profile (${event.modelId})`
-      : "";
+  const compactionDetail = event.details
+    ? ` at approximately ${formatCompactNumber(event.details.estimatedInputTokens)} estimated tokens`
+    : "";
+  const compactionModel = event.modelId ? ` using ${event.modelId}` : "";
   return (
     <article className="min-w-0 py-0.5">
       <div className="flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1">
-        <strong
-          className={`font-sans text-xs font-semibold ${
-            handoff ? "text-sky-100" : "text-amber-100"
-          }`}
-        >
-          {handoff ? "Model handoff" : "Context compacted"}
+        <strong className="font-sans text-xs font-semibold text-amber-100">
+          Context compacted
         </strong>
         {typeof props.timestamp === "number" ? (
           <span className="text-xs text-dashboard-text-muted">
@@ -42,9 +33,7 @@ export function TranscriptContextEventView(props: {
         ) : null}
       </div>
       <div className="mt-1 text-xs leading-relaxed text-dashboard-text-muted">
-        {handoff
-          ? `Handed off to ${event.modelId} via the ${event.modelProfile} profile${event.reasoningLevel ? ` (${event.reasoningLevel})` : ""}.`
-          : `Earlier context was summarized${compactionDetail}${compactionModel} before execution continued.`}
+        {`Earlier context was summarized${compactionDetail}${compactionModel} before execution continued.`}
       </div>
       {event.summary ? (
         <Collapsible className="mt-2">

package/src/client/conversations/TranscriptRailEvent.tsx

@@ -14,7 +14,6 @@ import {
   MessageSquareText,
   Minimize2,
   Paperclip,
-  Send,
   Sparkles,
   TriangleAlert,
   Webhook,
@@ -27,7 +26,6 @@ import type { TranscriptViewStructuredEventPart } from "../types";
 type TranscriptRailEventKind =
   | "attachments_delivered"
   | "compaction"
-  | "handoff"
   | "message_context"
   | "event"
   | "structured_event"
@@ -119,12 +117,6 @@ function transcriptRailMarker(kind: TranscriptRailEventKind): {
       icon: Bot,
     };
   }
-  if (kind === "handoff") {
-    return {
-      className: "text-sky-200",
-      icon: Send,
-    };
-  }
   return {
     className: "text-amber-200",
     icon: Minimize2,

package/src/client/conversations/TranscriptView.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, type ReactNode, type Ref } from "react";
 import type { ConversationMailboxMessage } from "./conversationOutbox";
 import { ArrowDown } from "lucide-react";
 
@@ -8,12 +8,13 @@ import type {
 } from "../types";
 import { EmptyTelemetry } from "../components/EmptyTelemetry";
 import { Button } from "../components/ui/button";
+import { cn } from "../styles";
 import { ConversationTranscriptView } from "./ConversationTranscript";
 import { ConversationEventLog } from "./ConversationEventLog";
 import {
   transcriptBottomVersion,
   transcriptJuniorMessageVersion,
-  useAutoLoadPreviousPage,
+  useAutoLoadHistoryPage,
   usePinnedTranscriptBottom,
 } from "./transcriptBottomPinning";
 import type { TranscriptViewMode } from "./transcriptRenderModel";
@@ -22,6 +23,7 @@ import {
   type TranscriptUnreadRange,
 } from "./transcriptReadPosition";
 import { TranscriptSearchProvider } from "./transcriptSearch";
+import type { TranscriptHistory } from "./transcriptUnreadHistory";
 import {
   TurnContextPanelProvider,
   type TurnContextPanel,
@@ -36,6 +38,11 @@ export function Transcript(props: {
   /** The read position when the Conversation opened. */
   lastReadSeq?: number;
   loadingPreviousPage?: boolean;
+  /**
+   * Newer pages between the read position and the latest. They load on
+   * scroll. Jump to latest skips them.
+   */
+  newerHistory?: TranscriptHistory["newer"];
   pinRequestVersion?: number;
   onLoadPreviousPage?: () => void;
   /** Receive the last event sequence the reader saw in the transcript. */
@@ -68,6 +75,7 @@ export function Transcript(props: {
   const bottomPinning = usePinnedTranscriptBottom({
     conversationId: props.transcript?.conversationId,
     enabled: props.live ?? false,
+    endsAtLatest: !props.newerHistory,
     historyVersion: props.historyVersion ?? "empty",
     juniorMessageVersion: transcriptJuniorMessageVersion(props.transcript),
     pinRequestVersion: props.pinRequestVersion,
@@ -88,7 +96,8 @@ export function Transcript(props: {
     paused: view !== "rich" || search.trim().length > 0,
   });
   const loadPreviousPage = () => props.onLoadPreviousPage?.();
-  const previousPageRef = useAutoLoadPreviousPage({
+  const previousPageRef = useAutoLoadHistoryPage({
+    edge: "top",
     enabled: Boolean(
       props.onLoadPreviousPage &&
       props.hasPreviousPage &&
@@ -98,6 +107,13 @@ export function Transcript(props: {
     historyVersion: props.historyVersion ?? "empty",
     onLoad: loadPreviousPage,
   });
+  const newer = props.newerHistory;
+  const newerPageRef = useAutoLoadHistoryPage({
+    edge: "bottom",
+    enabled: Boolean(newer && !newer.loading && !newer.error),
+    historyVersion: props.historyVersion ?? "empty",
+    onLoad: () => newer?.load(),
+  });
 
   if (!props.transcript) {
     return (
@@ -120,22 +136,17 @@ export function Transcript(props: {
           </div>
         ) : null}
         {props.hasPreviousPage || props.loadingPreviousPage ? (
-          <div className="mb-3 flex items-center gap-3" ref={previousPageRef}>
-            <span className="h-px min-w-4 flex-1 bg-dashboard-fill-strong" />
-            <button
-              aria-label="Load earlier events"
-              className="shrink-0 cursor-pointer border-0 bg-transparent px-1 py-0.5 font-sans text-xs font-medium text-dashboard-text-muted transition-colors hover:text-dashboard-text focus-visible:outline focus-visible:outline-1 focus-visible:outline-dashboard-focus/55 disabled:cursor-not-allowed disabled:opacity-50"
-              disabled={props.loadingPreviousPage}
-              onClick={loadPreviousPage}
-              title="Load earlier events"
-              type="button"
-            >
-              {props.loadingPreviousPage
-                ? `Loading earlier ${historyLabel}…`
-                : `Show earlier ${historyLabel}`}
-            </button>
-            <span className="h-px min-w-4 flex-1 bg-dashboard-fill-strong" />
-          </div>
+          <HistoryPageControl
+            className="mb-3"
+            label="Load earlier events"
+            loading={props.loadingPreviousPage}
+            onClick={loadPreviousPage}
+            ref={previousPageRef}
+          >
+            {props.loadingPreviousPage
+              ? `Loading earlier ${historyLabel}…`
+              : `Show earlier ${historyLabel}`}
+          </HistoryPageControl>
         ) : null}
         {props.historyError ? (
           <div
@@ -164,6 +175,30 @@ export function Transcript(props: {
             />
           </TurnContextPanelProvider>
         )}
+        {newer ? (
+          <>
+            {newer.error ? (
+              <div
+                aria-live="polite"
+                className="mt-2 text-center font-sans text-xs text-amber-100/65"
+              >
+                Newer events could not be loaded.
+              </div>
+            ) : null}
+            {/* The bottom margin keeps the jump control off this row. */}
+            <HistoryPageControl
+              className="mb-12 mt-3"
+              label="Load newer events"
+              loading={newer.loading}
+              onClick={newer.load}
+              ref={newerPageRef}
+            >
+              {newer.loading
+                ? `Loading newer ${historyLabel}…`
+                : `Show newer ${historyLabel}`}
+            </HistoryPageControl>
+          </>
+        ) : null}
         <div
           aria-hidden="true"
           className="h-px"
@@ -171,7 +206,11 @@ export function Transcript(props: {
         />
         <JumpToLatestButton
           hasPendingUpdate={bottomPinning.hasPendingUpdate}
-          onClick={bottomPinning.jumpToBottom}
+          onClick={() => {
+            // The latest page is in the detail, so the jump needs no request.
+            newer?.showLatest();
+            bottomPinning.jumpToBottom();
+          }}
           visible={bottomPinning.showJumpToLatest}
         />
       </div>
@@ -179,6 +218,36 @@ export function Transcript(props: {
   );
 }
 
+/** A divider with one control that loads another page of history. */
+function HistoryPageControl(props: {
+  children: ReactNode;
+  className: string;
+  label: string;
+  loading?: boolean;
+  onClick: () => void;
+  ref?: Ref<HTMLDivElement>;
+}) {
+  return (
+    <div
+      className={cn("flex items-center gap-3", props.className)}
+      ref={props.ref}
+    >
+      <span className="h-px min-w-4 flex-1 bg-dashboard-fill-strong" />
+      <button
+        aria-label={props.label}
+        className="shrink-0 cursor-pointer border-0 bg-transparent px-1 py-0.5 font-sans text-xs font-medium text-dashboard-text-muted transition-colors hover:text-dashboard-text focus-visible:outline focus-visible:outline-1 focus-visible:outline-dashboard-focus/55 disabled:cursor-not-allowed disabled:opacity-50"
+        disabled={props.loading}
+        onClick={props.onClick}
+        title={props.label}
+        type="button"
+      >
+        {props.children}
+      </button>
+      <span className="h-px min-w-4 flex-1 bg-dashboard-fill-strong" />
+    </div>
+  );
+}
+
 function JumpToLatestButton(props: {
   hasPendingUpdate: boolean;
   onClick: () => void;

package/src/client/conversations/conversationSidebarLayout.ts

@@ -0,0 +1,61 @@
+import { useState, useSyncExternalStore } from "react";
+
+const OPEN_KEY = "junior:conversation:sidebar-open";
+const WIDTH_KEY = "junior:conversation:sidebar-width";
+const WIDE_QUERY = "(min-width: 768px)";
+
+/** Pixel limits for the conversation list beside a selected conversation. */
+export const SIDEBAR_WIDTH = { default: 320, max: 480, min: 240 } as const;
+
+/** Remember whether the conversation list is open in this browser. */
+export function useConversationSidebarOpen() {
+  const [open, setOpen] = useState(() => readStorage(OPEN_KEY) !== "false");
+
+  function updateOpen(next: boolean) {
+    setOpen(next);
+    writeStorage(OPEN_KEY, String(next));
+  }
+
+  return [open, updateOpen] as const;
+}
+
+/** Read the conversation list width saved in this browser. */
+export function readSidebarWidth(): number {
+  const saved = Number(readStorage(WIDTH_KEY));
+  if (!Number.isFinite(saved) || saved <= 0) return SIDEBAR_WIDTH.default;
+  return Math.min(SIDEBAR_WIDTH.max, Math.max(SIDEBAR_WIDTH.min, saved));
+}
+
+/** Save the conversation list width without a React render per drag step. */
+export function saveSidebarWidth(width: number) {
+  writeStorage(WIDTH_KEY, String(Math.round(width)));
+}
+
+/** Report whether the viewport has room for the list beside the transcript. */
+export function useSidebarFits(): boolean {
+  return useSyncExternalStore(
+    (onChange) => {
+      const media = window.matchMedia(WIDE_QUERY);
+      media.addEventListener("change", onChange);
+      return () => media.removeEventListener("change", onChange);
+    },
+    () => window.matchMedia(WIDE_QUERY).matches,
+    () => false,
+  );
+}
+
+function readStorage(key: string): string | null {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+function writeStorage(key: string, value: string) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+    // The layout still works for this page when browser storage is unavailable.
+  }
+}

package/src/client/conversations/eventLog.ts

@@ -10,31 +10,12 @@ import {
   summarizeCost,
 } from "../format";
 
-/** Read recorded event configuration, including reports from before model context was added. */
-export function eventLogModel(
-  event: ConversationReportEvent,
-): ConversationReportEvent["model"] {
-  if (event.model) return event.model;
-  const data = event.data;
-  if (data.type === "turn_routed" || data.type === "handoff") {
-    return {
-      modelId: data.modelId,
-      modelProfile: data.modelProfile,
-      reasoningLevel: data.reasoningLevel,
-    };
-  }
-  return undefined;
-}
-
-/** Keep call costs distinct from router cost and never repeat usage on tool results. */
+/** Show call usage once and never repeat it on tool results. */
 export function eventLogUsage(event: ConversationReportEvent): string {
   const usage = event.modelCall?.usage;
   const cost = summarizeCost(usage);
   const fields = [
     cost ? `${formatCostBreakdown(cost)} call` : undefined,
-    event.data.type === "turn_routed" && event.data.costUsd !== undefined
-      ? `${formatCostBreakdown({ total: event.data.costUsd })} router`
-      : undefined,
     ...(
       [
         ["inputTokens", "in"],
@@ -77,8 +58,6 @@ export function eventLogSummary(data: ConversationReportEventData): string {
       return data.state === "failed"
         ? `${data.state} · ${data.failureCode}${data.failureReason ? ` · ${data.failureReason}` : ""}`
         : `${data.state} · ${data.turnId}`;
-    case "turn_routed":
-      return `Route selected · ${data.source}${data.confidence !== undefined ? ` · ${Math.round(data.confidence * 100)}% confidence` : ""}`;
     case "turn_context":
       return `${data.pluginName} · ${data.kind} · v${data.version}`;
     case "guardian_action_reviewed":
@@ -91,8 +70,6 @@ export function eventLogSummary(data: ConversationReportEventData): string {
         .join(", ");
     case "compaction":
       return data.summary ?? "Agent history compacted";
-    case "handoff":
-      return "Handoff · New configuration applied";
     case "subagent":
       return `${data.agentName ?? data.subagentKind} · ${data.status} · ${data.childConversationId}`;
   }
@@ -132,16 +109,10 @@ export function eventLogRows(
   events: readonly ConversationReportEvent[],
 ): EventLogRow[] {
   return events.map((event) => {
-    const model = eventLogModel(event);
     return {
       event,
       summary: eventLogSummary(event.data).replace(/\s+/g, " ").slice(0, 300),
-      metadata: [
-        model?.modelId,
-        model?.modelProfile,
-        model?.reasoningLevel && `${model.reasoningLevel} reasoning`,
-        eventLogUsage(event),
-      ]
+      metadata: [event.model?.modelId, eventLogUsage(event)]
         .filter(Boolean)
         .join(" · "),
     };