@sentry/junior-dashboard 0.276.0 → 0.278.0

package/src/client/conversations/ConversationTranscript.tsx

@@ -22,6 +22,7 @@ import { TranscriptSubagentView } from "./TranscriptSubagentView";
 import { TranscriptContextEventView } from "./TranscriptContextEventView";
 import {
   isCollapsibleActivityEntry,
+  quietTurnEntryKeys,
   TranscriptActivityGroup,
 } from "./TranscriptActivityGroup";
 import { TranscriptToolView } from "./TranscriptToolView";
@@ -232,9 +233,7 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
       keyPrefix={props.conversation.conversationId}
       unread={props.unread}
       renderContext={(entry) => (
-        <TranscriptRailEvent
-          kind={entry.part.event.type === "handoff" ? "handoff" : "compaction"}
-        >
+        <TranscriptRailEvent kind="compaction">
           <TranscriptContextEventView
             part={entry.part}
             timestamp={entry.timestamp}
@@ -359,6 +358,12 @@ function TranscriptEntryList(props: {
 }) {
   const search = useTranscriptSearch();
   const activityKeys = useRef(new Map<string, string>());
+  const quietKeys = useMemo(
+    () => quietTurnEntryKeys(props.entries),
+    [props.entries],
+  );
+  const collapsible = (entry: TranscriptEntry) =>
+    isCollapsibleActivityEntry(entry) || quietKeys.has(entry.key);
   const claimedActivityKeys = new Set<string>();
   const rows: ReactNode[] = [];
   // Search results are not a reading order, so they get no marker.
@@ -394,11 +399,11 @@ function TranscriptEntryList(props: {
   for (let index = 0; index < props.entries.length; ) {
     const entry = props.entries[index]!;
 
-    if (isCollapsibleActivityEntry(entry)) {
+    if (collapsible(entry)) {
       const activityEntries: RenderedTranscriptEntry[] = [];
       while (
         index < props.entries.length &&
-        isCollapsibleActivityEntry(props.entries[index]!)
+        collapsible(props.entries[index]!)
       ) {
         activityEntries.push(props.entries[index]!);
         index += 1;
@@ -523,9 +528,7 @@ function RedactedTranscriptView(props: {
       entries={groupTranscriptMessages(props.messages)}
       keyPrefix={`${props.conversation.conversationId}:redacted`}
       renderContext={(entry) => (
-        <TranscriptRailEvent
-          kind={entry.part.event.type === "handoff" ? "handoff" : "compaction"}
-        >
+        <TranscriptRailEvent kind="compaction">
           <TranscriptContextEventView
             part={entry.part}
             timestamp={entry.timestamp}

package/src/client/conversations/ConversationWatches.tsx

@@ -15,7 +15,7 @@ import {
   Timer,
   Users,
 } from "lucide-react";
-import { useState, type ReactNode } from "react";
+import type { ReactNode } from "react";
 import {
   conversationWatchesReportSchema,
   type ConversationWatch,
@@ -24,6 +24,12 @@ import {
 import { DisplayText } from "../display-text/DisplayText";
 import { formatTime } from "../format";
 import { fetchDashboardJson } from "../http";
+import { conversationSideReadQueryKey } from "./queries";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../components/ui/collapsible";
 import { dashboardDisclosureChevronClass } from "../styles";
 import { DetailsList, DetailsRow } from "./DetailsList";
 
@@ -36,7 +42,7 @@ export function useConversationWatches(conversationId: string) {
         `/api/conversations/${encodeURIComponent(conversationId)}/watches`,
         signal,
       ),
-    queryKey: ["conversation", conversationId, "watches"],
+    queryKey: conversationSideReadQueryKey(conversationId, "watches"),
     retry: false,
   });
 }
@@ -76,7 +82,6 @@ const resourceIcons: Partial<Record<string, LucideIcon>> = {
  */
 function WatchRow(props: { watch: ConversationWatch }) {
   const { watch } = props;
-  const [expanded, setExpanded] = useState(false);
   const Icon = watch.redacted
     ? LockKeyhole
     : (resourceIcons[watch.resourceType] ?? Eye);
@@ -94,7 +99,6 @@ function WatchRow(props: { watch: ConversationWatch }) {
       />
     </span>
   );
-  const toggle = () => setExpanded((value) => !value);
   const row = watch.url ? (
     // The row opens the watched resource, like a linked work row. The
     // chevron beside it shows the details.
@@ -102,32 +106,22 @@ function WatchRow(props: { watch: ConversationWatch }) {
       <div className="min-w-0 flex-1">
         <DetailsRow href={watch.url} icon={icon} title={title} />
       </div>
-      <button
-        aria-expanded={expanded}
+      <CollapsibleTrigger
         aria-label={`Details for ${title}`}
         className="group grid size-8 shrink-0 place-items-center rounded-md text-dashboard-text-muted transition-colors hover:bg-dashboard-surface-hover hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
-        onClick={toggle}
-        type="button"
       >
         {chevron}
-      </button>
+      </CollapsibleTrigger>
     </div>
   ) : (
-    <DetailsRow
-      expanded={expanded}
-      icon={icon}
-      meta={chevron}
-      onToggle={toggle}
-      title={title}
-    />
+    <DetailsRow disclosure icon={icon} meta={chevron} title={title} />
   );
-  if (!expanded) return row;
 
   return (
-    <>
+    <Collapsible className="min-w-0">
       {row}
       {/* Indent under the title: icon column, column gap, and row padding. */}
-      <div className="grid min-w-0 gap-1.5 pb-2 pl-9 pr-1.5 pt-0.5 text-xs leading-4 text-dashboard-text-muted">
+      <CollapsibleContent className="grid min-w-0 gap-1.5 pb-2 pl-9 pr-1.5 pt-0.5 text-xs leading-4 text-dashboard-text-muted">
         {watch.intent ? (
           <p className="m-0 break-words">
             <DisplayText inline text={watch.intent} />
@@ -166,8 +160,8 @@ function WatchRow(props: { watch: ConversationWatch }) {
             </span>
           </p>
         ) : null}
-      </div>
-    </>
+      </CollapsibleContent>
+    </Collapsible>
   );
 }
 

package/src/client/conversations/ConversationWorkspace.tsx

@@ -1,27 +1,35 @@
 import type { InputImage } from "@sentry/junior/api/schema";
-import { useEffect, useMemo, useState } from "react";
-import { Globe2, LockKeyhole } from "lucide-react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Globe2, LockKeyhole, PanelLeft } from "lucide-react";
 import { useNavigate, useParams } from "react-router";
+import type { PanelImperativeHandle } from "react-resizable-panels";
 
 import { useConversationsData } from "../api";
 import { ConversationSidebar } from "./ConversationSidebar";
 import { SearchInput } from "../components/SearchInput";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "../components/ui/resizable";
 import { ToggleGroup, ToggleGroupItem } from "../components/ui/toggle-group";
 import { pageCount, pageItems, PagePagination } from "../components/Pagination";
 import { ConversationHomeList } from "./ConversationHomeList";
 import { ConversationComposer } from "./ConversationComposer";
+import { HeaderIconButton } from "./ConversationHeaderActions";
 import {
-  useCreateConversation,
   usePendingArchiveConversationUpdates,
   type PendingArchiveConversationUpdate,
-} from "./queries";
+} from "./conversationArchive";
+import { useCreateConversation, type ConversationData } from "./queries";
 import { conversationPath, NEW_CONVERSATION_PATH } from "./conversationRoutes";
 import {
   attentionConversationIds,
-  attentionFirst,
+  pinnedAndAttentionFirst,
 } from "./conversationSections";
 import { buildConversations, getDashboardTimeZone } from "../format";
 import { useDebouncedValue } from "../debouncedValue";
+import { cn } from "../styles";
 import type { Conversation } from "../types";
 import { ConversationPage } from "./ConversationPage";
 import {
@@ -30,13 +38,29 @@ import {
 } from "../review-desk/queries";
 import { UnsentAnswersProvider } from "../review-desk/UnsentAnswers";
 import { useConversationFinishedIndicators } from "./useConversationFinishedIndicators";
+import {
+  readSidebarWidth,
+  saveSidebarWidth,
+  SIDEBAR_WIDTH,
+  useConversationSidebarOpen,
+  useSidebarFits,
+} from "./conversationSidebarLayout";
 
 const CONVERSATION_PAGE_SIZE = 20;
+const SIDEBAR_PANEL_ID = "conversation-list";
 
 /** Render the conversation home page or one selected conversation. */
-export function ConversationWorkspace() {
+export function ConversationWorkspace(props: {
+  /** The selected Conversation's data, from the shell. */
+  detail: ConversationData;
+}) {
   const [page, setPage] = useState(1);
   const [query, setQuery] = useState("");
+  const [sidebarOpen, setSidebarOpen] = useConversationSidebarOpen();
+  const sidebarFits = useSidebarFits();
+  const sidebarPanel = useRef<PanelImperativeHandle>(null);
+  const sidebarGroup = useRef<HTMLDivElement>(null);
+  const sidebarId = useId();
   const search = useDebouncedValue(query.trim());
   const params = useParams();
   const navigate = useNavigate();
@@ -73,7 +97,7 @@ export function ConversationWorkspace() {
   const pagedConversations = useMemo(
     () =>
       pageItems(
-        attentionFirst(
+        pinnedAndAttentionFirst(
           conversations,
           attentionConversationIds(
             waitingConversationIds,
@@ -146,45 +170,109 @@ export function ConversationWorkspace() {
     );
   }
 
+  const toggleSidebar = () => {
+    const panel = sidebarPanel.current;
+    if (!panel) return;
+    if (panel.isCollapsed()) panel.resize(readSidebarWidth());
+    else panel.collapse();
+  };
+
   return (
-    <div className="grid h-full min-h-0 w-full overflow-hidden bg-dashboard-bg md:grid-cols-[20rem_minmax(0,1fr)]">
-      <div className="hidden h-full min-h-0 overflow-hidden md:block">
-        <ConversationSidebar
-          conversations={conversations}
-          error={feed.error?.message}
-          finishedConversationIds={finishedConversationIds}
-          heldConversationId={heldConversationId}
-          loading={feed.isPending}
-          onNewConversation={openCreate}
-          onQueryChange={setQuery}
-          query={query}
-          selectedId={selectedId}
-          timeZone={getDashboardTimeZone()}
-          waitingConversations={waitingConversations}
-        />
-      </div>
-      <section
-        aria-label="Selected conversation"
-        className="grid min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden bg-dashboard-bg"
-      >
-        <UnsentAnswersProvider conversationId={selectedId} key={selectedId}>
-          <ConversationPage
-            conversationId={selectedId}
-            data={
-              feed.data
-                ? {
-                    conversations: feed.data,
-                  }
-                : undefined
-            }
-            onRead={markRead}
-            pendingArchiveUpdate={pendingArchiveUpdates.find(
-              (update) => update.conversationId === selectedId,
-            )}
+    <ResizablePanelGroup
+      className="min-h-0 overflow-hidden bg-dashboard-bg"
+      elementRef={sidebarGroup}
+      onLayoutChanged={(layout) => {
+        // Save after the drag ends. A drag that collapses the list passes
+        // the minimum width first, and that width is not the reader's pick.
+        const percent = layout[SIDEBAR_PANEL_ID] ?? 0;
+        const groupWidth = sidebarGroup.current?.offsetWidth ?? 0;
+        if (percent > 0) saveSidebarWidth((percent / 100) * groupWidth);
+      }}
+    >
+      {sidebarFits ? (
+        <>
+          <ResizablePanel
+            collapsible
+            defaultSize={sidebarOpen ? readSidebarWidth() : 0}
+            groupResizeBehavior="preserve-pixel-size"
+            id={SIDEBAR_PANEL_ID}
+            maxSize={SIDEBAR_WIDTH.max}
+            minSize={SIDEBAR_WIDTH.min}
+            onResize={(size) => {
+              // Dragging past the minimum width collapses the list too, so the
+              // panel size is the one source for the open state.
+              const open = size.inPixels > 0;
+              if (open !== sidebarOpen) setSidebarOpen(open);
+            }}
+            panelRef={sidebarPanel}
+          >
+            <div
+              className={cn(
+                "h-full min-h-0 overflow-hidden",
+                !sidebarOpen && "hidden",
+              )}
+              id={sidebarId}
+            >
+              <ConversationSidebar
+                conversations={conversations}
+                error={feed.error?.message}
+                finishedConversationIds={finishedConversationIds}
+                heldConversationId={heldConversationId}
+                loading={feed.isPending}
+                onNewConversation={openCreate}
+                onQueryChange={setQuery}
+                query={query}
+                selectedId={selectedId}
+                timeZone={getDashboardTimeZone()}
+                waitingConversations={waitingConversations}
+              />
+            </div>
+          </ResizablePanel>
+          <ResizableHandle
+            aria-label="Resize conversation list"
+            className="w-px bg-transparent transition-colors after:w-2 focus-visible:ring-dashboard-border-interactive data-[separator=active]:bg-dashboard-border-interactive data-[separator=hover]:bg-dashboard-border-interactive"
           />
-        </UnsentAnswersProvider>
-      </section>
-    </div>
+        </>
+      ) : null}
+      <ResizablePanel id="selected-conversation">
+        <section
+          aria-label="Selected conversation"
+          className="grid h-full min-h-0 grid-rows-[minmax(0,1fr)] overflow-hidden bg-dashboard-bg"
+        >
+          <UnsentAnswersProvider conversationId={selectedId} key={selectedId}>
+            <ConversationPage
+              conversationId={selectedId}
+              detail={props.detail}
+              data={
+                feed.data
+                  ? {
+                      conversations: feed.data,
+                    }
+                  : undefined
+              }
+              onRead={markRead}
+              pendingArchiveUpdate={pendingArchiveUpdates.find(
+                (update) => update.conversationId === selectedId,
+              )}
+              sidebarToggle={
+                <HeaderIconButton
+                  controls={sidebarId}
+                  expanded={sidebarOpen}
+                  label={
+                    sidebarOpen
+                      ? "Hide conversation list"
+                      : "Show conversation list"
+                  }
+                  onClick={toggleSidebar}
+                >
+                  <PanelLeft aria-hidden="true" size={15} strokeWidth={2} />
+                </HeaderIconButton>
+              }
+            />
+          </UnsentAnswersProvider>
+        </section>
+      </ResizablePanel>
+    </ResizablePanelGroup>
   );
 }
 

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/DetailsList.tsx

@@ -1,6 +1,7 @@
 import { ChevronRight } from "lucide-react";
 import { useState, type ReactNode } from "react";
 
+import { CollapsibleTrigger } from "../components/ui/collapsible";
 import { cn, dashboardDisclosureChevronClass } from "../styles";
 
 /**
@@ -87,21 +88,20 @@ export function DetailsList<T>(props: {
 /**
  * Lay out one details list row: an icon, a title, and short trailing text on
  * the first line, then optional lines under the title. A row with `href`
- * opens that link in a new tab. A row with `onToggle` is a disclosure button
- * that shows or hides content the caller renders under it.
+ * opens that link in a new tab. A `disclosure` row is the trigger of the
+ * enclosing `Collapsible`, so it shows or hides the content under it.
  */
 export function DetailsRow(props: {
   children?: ReactNode;
-  expanded?: boolean;
+  disclosure?: boolean;
   href?: string;
   icon: ReactNode;
   meta?: ReactNode;
-  onToggle?(): void;
   title: ReactNode;
   /** Native hover text with detail that the row does not show. */
   tooltip?: string;
 }) {
-  const interactive = props.href !== undefined || props.onToggle !== undefined;
+  const interactive = props.href !== undefined || props.disclosure === true;
   const className = cn(
     "grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-x-2.5 gap-y-1 rounded-md px-1.5 py-1.5 text-left text-inherit no-underline",
     interactive &&
@@ -134,17 +134,11 @@ export function DetailsRow(props: {
       </a>
     );
   }
-  if (props.onToggle) {
+  if (props.disclosure) {
     return (
-      <button
-        aria-expanded={props.expanded ?? false}
-        className={className}
-        onClick={props.onToggle}
-        title={props.tooltip}
-        type="button"
-      >
+      <CollapsibleTrigger className={className} title={props.tooltip}>
         {content}
-      </button>
+      </CollapsibleTrigger>
     );
   }
   return (

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/MemoryIcons.tsx

@@ -0,0 +1,23 @@
+import { ArrowUpRight, Lock } from "lucide-react";
+
+/** Mark a memory that only its owner can see. */
+export function PrivateMemoryIcon() {
+  return <Lock aria-label="Private" role="img" size={13} strokeWidth={1.8} />;
+}
+
+/**
+ * End a memory row that links to the memory's page. Its parent link needs
+ * the `group` class, so the arrow follows the row hover.
+ */
+export function MemoryLinkIcons(props: { private: boolean }) {
+  return (
+    <span className="flex items-center gap-1.5 pt-1 text-dashboard-text-faint">
+      {props.private ? <PrivateMemoryIcon /> : null}
+      <ArrowUpRight
+        aria-hidden="true"
+        className="transition-colors group-hover:text-dashboard-text"
+        size={14}
+      />
+    </span>
+  );
+}

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);