@sentry/junior-dashboard 0.275.0 → 0.276.0

package/src/client/conversations/ConversationMeta.tsx

@@ -6,7 +6,6 @@ import {
   CircleX,
   GitMerge,
   GitPullRequest,
-  Globe2,
   LockKeyhole,
   TriangleAlert,
 } from "lucide-react";
@@ -72,35 +71,24 @@ export function PendingAuthorization(props: {
   );
 }
 
-/** Show whether the selected conversation is public or private. */
+/**
+ * Mark a private conversation with a lock icon. Public is the default, so it
+ * gets no marker, which keeps the title bar short.
+ */
 export function ConversationPrivacyChip(props: {
   visibility: Conversation["visibility"];
 }) {
-  if (!props.visibility) return null;
-  const isPublic = props.visibility === "public";
-  const Icon = isPublic ? Globe2 : LockKeyhole;
-  const shortLabel = isPublic ? "Public" : "Private";
-  const fullLabel = isPublic ? "Public conversation" : "Private conversation";
-  const detail = isPublic
-    ? "Anyone in this workspace can see this transcript."
-    : "Only members of this conversation can see this transcript.";
+  if (props.visibility !== "private") return null;
+  const label =
+    "Private conversation. Only members of this conversation can see this transcript.";
   return (
     <span
-      className={
-        isPublic
-          ? "inline-flex max-w-full items-center gap-1 rounded-full border border-dashboard-border-emphasis bg-dashboard-fill-soft px-2 py-0.5 font-sans text-2xs font-medium text-dashboard-text-muted"
-          : "inline-flex max-w-full items-center gap-1 rounded-full border border-dashboard-border-strong bg-dashboard-fill-soft px-2 py-0.5 font-sans text-2xs font-medium text-dashboard-text-muted"
-      }
+      className="inline-flex items-center text-dashboard-text-muted"
       role="note"
-      title={`${fullLabel}. ${detail}`}
+      title={label}
     >
-      <Icon aria-hidden="true" className="size-3 shrink-0" />
-      <span aria-hidden="true" className="truncate">
-        {shortLabel}
-      </span>
-      <span className="sr-only">
-        {fullLabel}. {detail}
-      </span>
+      <LockKeyhole aria-hidden="true" className="size-3.5 shrink-0" />
+      <span className="sr-only">{label}</span>
     </span>
   );
 }
@@ -568,6 +556,37 @@ export function conversationLocation(
   );
 }
 
+/**
+ * Show the estimated cost of a conversation with its breakdown tooltip.
+ * Returns null until there is a cost or a live run to show.
+ */
+export function conversationCost(
+  conversation: Conversation | undefined,
+  detail: ConversationDetailReport | undefined,
+  tooltipPlacement?: "above" | "below",
+): ReactNode {
+  if (!conversation) return null;
+  const costSummary = summarizeCost(
+    detail?.cumulativeUsage ?? conversation.cumulativeUsage,
+  );
+  const auxiliaryCosts = detail?.auxiliaryCosts ?? conversation.auxiliaryCosts;
+  const live = (detail?.status ?? conversation.status) === "active";
+  if (!costSummary && !auxiliaryCosts && !live) return null;
+  return (
+    <CostMetric
+      auxiliaryCosts={auxiliaryCosts}
+      childAgentTotals={
+        detail?.childAgentTotals ?? conversation.childAgentTotals
+      }
+      live={live}
+      liveModelId={liveModelId(detail)}
+      modelUsage={detail?.modelUsage}
+      summary={costSummary}
+      tooltipPlacement={tooltipPlacement}
+    />
+  );
+}
+
 function conversationStatItems(props: {
   conversation: Conversation | undefined;
   detail?: ConversationDetailReport;
@@ -580,7 +599,6 @@ function conversationStatItems(props: {
     props.detail?.cumulativeUsage ?? props.conversation.cumulativeUsage;
   const tokenSummary =
     summarizeModelUsage(props.detail?.modelUsage) ?? summarizeUsage(usage);
-  const costSummary = summarizeCost(usage);
   const durationLabel = formatConversationDuration(props.conversation);
   const live = (props.detail?.status ?? props.conversation.status) === "active";
   const activeModelId = liveModelId(props.detail);
@@ -589,8 +607,9 @@ function conversationStatItems(props: {
     props.detail?.childAgentTotals ?? props.conversation.childAgentTotals;
   const lastActivityAt = props.conversation.lastSeenAt;
   const location = conversationLocation(props.conversation, props.detail);
+  const cost = conversationCost(props.conversation, props.detail);
   const rawStats: Array<ConversationStatItem | undefined> = [
-    // The desktop title bar shows the location. Mobile hides that bar.
+    // The desktop title bar shows the location and cost. Mobile hides that bar.
     location
       ? {
           content: location,
@@ -660,26 +679,12 @@ function conversationStatItems(props: {
           label: "Tokens",
         }
       : undefined,
-    costSummary ||
-    props.detail?.auxiliaryCosts ||
-    props.conversation.auxiliaryCosts ||
-    live
+    cost
       ? {
-          content: (
-            <CostMetric
-              auxiliaryCosts={
-                props.detail?.auxiliaryCosts ??
-                props.conversation.auxiliaryCosts
-              }
-              childAgentTotals={childAgentTotals}
-              live={live}
-              liveModelId={activeModelId}
-              modelUsage={props.detail?.modelUsage}
-              summary={costSummary}
-            />
-          ),
+          content: cost,
           key: "cost",
           label: "Cost",
+          mobileOnly: true,
         }
       : undefined,
     childAgentTotals

package/src/client/conversations/ConversationPage.tsx

@@ -31,6 +31,14 @@ import {
 import { ConversationHeader } from "./ConversationHeader";
 import { ConversationReplyFooter } from "./ConversationReplyFooter";
 import { ConversationDetails } from "./ConversationDetails";
+import { turnPrompts } from "./ConversationMemories";
+import {
+  ConversationMemoryContext,
+  memoryAnchorKey,
+  useConversationMemories,
+  type ConversationMemoryState,
+  type OpenMemoryPopover,
+} from "./conversationMemory";
 import { ConversationEventDetails } from "./ConversationEventDetails";
 import { ConversationEventLogLoading } from "./ConversationEventLog";
 import {
@@ -50,6 +58,7 @@ import { ConversationAgentTree } from "./ConversationAgentTree";
 import { conversationLinks } from "./ConversationLinkedWork";
 import {
   ConversationAnnotations,
+  conversationCost,
   conversationLocation,
   ConversationPrivacyChip,
   ConversationStats,
@@ -74,6 +83,11 @@ import {
   ParticipantAvatarStack,
 } from "../components/ParticipantAvatarStack";
 import { ChatLayout } from "./ChatLayout";
+import {
+  QuickQuestionPanel,
+  QuickQuestionSelectionButton,
+  useQuickQuestionThread,
+} from "./QuickQuestion";
 import { latestReviewItemId } from "../review-desk/reviewItemFormat";
 import { Transcript } from "./TranscriptView";
 import {
@@ -155,7 +169,24 @@ export function ConversationPage(props: {
     );
   }, [setSearchParams]);
   const [turnContext, setTurnContext] = useState<TurnContextSelection>();
-  const showDetails = detailsOpen && !eventOpen && !turnContext;
+  const [memoryPopover, setMemoryPopover] = useState<OpenMemoryPopover>();
+  // A memory chosen in details waits here until its transcript row renders.
+  const [memoryJump, setMemoryJump] = useState<OpenMemoryPopover>();
+  // The page stays mounted across Conversations. Memory state belongs to one.
+  const [memoryConversationId, setMemoryConversationId] = useState(
+    props.conversationId,
+  );
+  if (memoryConversationId !== props.conversationId) {
+    setMemoryConversationId(props.conversationId);
+    setMemoryPopover(undefined);
+    setMemoryJump(undefined);
+  }
+  const quickQuestion = useQuickQuestionThread(props.conversationId);
+  // Event details and turn context also show over a Quick question.
+  const showQuickQuestion =
+    Boolean(quickQuestion.thread) && !eventOpen && !turnContext;
+  const showDetails =
+    detailsOpen && !eventOpen && !turnContext && !quickQuestion.thread;
   const [viewState, setView] = useState<TranscriptViewMode>(() =>
     eventOpen ? "raw" : "rich",
   );
@@ -167,6 +198,15 @@ export function ConversationPage(props: {
   const summaries = props.data?.conversations.conversations ?? [];
   const conversations = buildConversations(summaries);
   const detail = useConversationData(conversationId);
+  const memoryList = useConversationMemories(conversationId).data;
+  const memoryState = useMemo<ConversationMemoryState>(
+    () => ({
+      list: memoryList,
+      open: memoryPopover,
+      setOpen: setMemoryPopover,
+    }),
+    [memoryList, memoryPopover],
+  );
   const archive = useArchiveConversation(conversationId);
   const markRead = useMarkConversationRead(conversationId);
   const readAtOpen = useReadPositionAtOpen(detail.data, detail.fetchedDetail);
@@ -288,6 +328,38 @@ export function ConversationPage(props: {
     if (linkedTurnSeq !== undefined) setSelectedEventSeq(linkedTurnSeq);
     else if (linkedTurnNotFound) setSelectedEventSeq(undefined);
   }, [linkedTurnNotFound, linkedTurnSeq, setSelectedEventSeq]);
+  // Show a chosen memory at its transcript row. Wait for the first page, then
+  // load earlier pages until the row renders, or stop when history ends.
+  const memoryPrompts = useMemo(
+    () => turnPrompts(transcript?.events),
+    [transcript?.events],
+  );
+  useEffect(() => {
+    if (!memoryJump || !transcript) return;
+    const anchor = pageRef.current?.querySelector(
+      `[data-memory-anchor="${CSS.escape(memoryAnchorKey(memoryJump))}"]`,
+    );
+    if (anchor) {
+      anchor.scrollIntoView({ block: "center" });
+      setMemoryPopover(memoryJump);
+      setMemoryJump(undefined);
+    } else if (
+      detail.hasPreviousPage &&
+      !detail.isLoadingPreviousPage &&
+      !detail.historyError
+    ) {
+      loadPreviousPageRef.current();
+    } else if (!detail.isLoadingPreviousPage) {
+      setMemoryJump(undefined);
+    }
+  }, [
+    detail.hasPreviousPage,
+    detail.historyError,
+    detail.isLoadingPreviousPage,
+    memoryJump,
+    transcript,
+    view,
+  ]);
   // Keep the panel while the transcript or a linked event loads, and for the
   // render before a found Turn link becomes an event link.
   const eventLoading =
@@ -362,7 +434,7 @@ export function ConversationPage(props: {
       ref={pageRef}
       className={cn(
         "grid h-full min-h-0 min-w-0",
-        (showDetails || showEvent || turnContext) &&
+        (showDetails || showEvent || turnContext || showQuickQuestion) &&
           "xl:grid-cols-[minmax(0,1fr)_25rem]",
       )}
     >
@@ -373,10 +445,12 @@ export function ConversationPage(props: {
               agentTree ? <ConversationAgentTree nodes={agentTree} /> : null
             }
             conversationId={conversationId}
+            cost={conversationCost(conversation, detail.data, "below")}
             detailsOpen={showDetails}
             onDetailsClick={() => {
               if (eventOpen) setSelectedEventSeq(undefined);
               setTurnContext(undefined);
+              quickQuestion.close();
               if (showDetails) closeDetails();
               else setDetailsChoice(true);
             }}
@@ -470,31 +544,35 @@ export function ConversationPage(props: {
                       data.
                     </div>
                   ) : null}
-                  <Transcript
-                    hasPreviousPage={detail.hasPreviousPage}
-                    historyError={detail.historyError}
-                    historyVersion={detail.historyVersion}
-                    lastReadSeq={readAtOpen.lastReadSeq}
-                    live={live}
-                    loadingPreviousPage={detail.isLoadingPreviousPage}
-                    onLoadPreviousPage={detail.loadPreviousPage}
-                    onRead={markRead}
-                    onSelectedEventSeqChange={setSelectedEventSeq}
-                    pendingMessages={detail.inlineMessages}
-                    pinRequestVersion={pinRequestVersion}
-                    responding={
-                      !detail.error && conversationIsResponding(transcript)
-                    }
-                    onOpenSubagentTranscript={onOpenSubagentTranscript}
-                    search={search}
-                    onSearchChange={setSearch}
-                    selectedEventSeq={selectedEventSeq}
-                    startAtUnread={readConversationStartPosition() === "unread"}
-                    transcript={transcript}
-                    turnContextPanel={turnContextPanel}
-                    unread={readAtOpen.unread}
-                    view={view}
-                  />
+                  <ConversationMemoryContext value={memoryState}>
+                    <Transcript
+                      hasPreviousPage={detail.hasPreviousPage}
+                      historyError={detail.historyError}
+                      historyVersion={detail.historyVersion}
+                      lastReadSeq={readAtOpen.lastReadSeq}
+                      live={live}
+                      loadingPreviousPage={detail.isLoadingPreviousPage}
+                      onLoadPreviousPage={detail.loadPreviousPage}
+                      onRead={markRead}
+                      onSelectedEventSeqChange={setSelectedEventSeq}
+                      pendingMessages={detail.inlineMessages}
+                      pinRequestVersion={pinRequestVersion}
+                      responding={
+                        !detail.error && conversationIsResponding(transcript)
+                      }
+                      onOpenSubagentTranscript={onOpenSubagentTranscript}
+                      search={search}
+                      onSearchChange={setSearch}
+                      selectedEventSeq={selectedEventSeq}
+                      startAtUnread={
+                        readConversationStartPosition() === "unread"
+                      }
+                      transcript={transcript}
+                      turnContextPanel={turnContextPanel}
+                      unread={readAtOpen.unread}
+                      view={view}
+                    />
+                  </ConversationMemoryContext>
                 </>
               )}
             </div>
@@ -532,37 +610,51 @@ export function ConversationPage(props: {
         }
       />
       {showDetails ? (
-        <ConversationDetails
-          brief={detail.data?.brief}
-          conversationId={conversationId}
-          highlightReview={reviewOpen}
-          identity={identity}
-          onClose={closeDetails}
-          onOpenSubagent={setSubagentTarget}
-          links={conversationLinks(detail.data)}
-          overview={
-            hasConversationStats({
-              conversation,
-              detail: detail.data,
-            }) ? (
-              <ConversationStats
-                conversation={conversation}
-                detail={detail.data}
-              />
-            ) : null
-          }
-          usage={
-            hasConversationUsageBreakdown({
-              conversation,
-              detail: detail.data,
-            }) ? (
-              <ConversationUsageBreakdown
-                conversation={conversation}
-                detail={detail.data}
-              />
-            ) : null
-          }
-        />
+        <ConversationMemoryContext value={memoryState}>
+          <ConversationDetails
+            brief={detail.data?.brief}
+            conversationId={conversationId}
+            highlightReview={reviewOpen}
+            identity={identity}
+            onClose={closeDetails}
+            onOpenSubagent={setSubagentTarget}
+            memoryPrompts={memoryPrompts}
+            onSelectMemory={(entry) => {
+              // Memory rows show only in the Conversation view, and search
+              // can hide them.
+              if (view !== "rich") onViewChange("rich");
+              setSearch("");
+              setMemoryJump({
+                memoryId: entry.memory.id,
+                source: entry.source,
+                turnId: entry.turnId,
+              });
+            }}
+            links={conversationLinks(detail.data)}
+            overview={
+              hasConversationStats({
+                conversation,
+                detail: detail.data,
+              }) ? (
+                <ConversationStats
+                  conversation={conversation}
+                  detail={detail.data}
+                />
+              ) : null
+            }
+            usage={
+              hasConversationUsageBreakdown({
+                conversation,
+                detail: detail.data,
+              }) ? (
+                <ConversationUsageBreakdown
+                  conversation={conversation}
+                  detail={detail.data}
+                />
+              ) : null
+            }
+          />
+        </ConversationMemoryContext>
       ) : null}
       {showEvent ? (
         <ConversationEventDetails
@@ -584,6 +676,24 @@ export function ConversationPage(props: {
           />
         </TranscriptSearchProvider>
       ) : null}
+      {showQuickQuestion && quickQuestion.thread ? (
+        <QuickQuestionPanel
+          conversationId={conversationId}
+          error={quickQuestion.error}
+          onClose={quickQuestion.close}
+          onSubmit={quickQuestion.submit}
+          pending={quickQuestion.pending}
+          thread={quickQuestion.thread}
+        />
+      ) : null}
+      <QuickQuestionSelectionButton
+        onAsk={(selection) => {
+          if (eventOpen) setSelectedEventSeq(undefined);
+          setTurnContext(undefined);
+          quickQuestion.open(selection);
+        }}
+        rootRef={pageRef}
+      />
       <SubagentTranscriptDrawer
         onClose={() => setSubagentTarget(undefined)}
         target={subagentTarget}

package/src/client/conversations/ConversationTranscript.tsx

@@ -28,6 +28,11 @@ import { TranscriptToolView } from "./TranscriptToolView";
 import { TranscriptReasoningView } from "./TranscriptReasoningView";
 import { TranscriptAttachmentsDeliveredView } from "./TranscriptAttachmentsDeliveredView";
 import { TranscriptStructuredEventView } from "./TranscriptStructuredEventView";
+import {
+  TranscriptCapturedMemories,
+  TranscriptRecalledMemories,
+} from "./TranscriptMemoryPopover";
+import { isMemoryCaptureEvent } from "./conversationMemory";
 import { TranscriptFailureView } from "./TranscriptFailureView";
 import {
   structuredEventIcon,
@@ -248,16 +253,23 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
       renderMessage={(entry) =>
         props.conversation.sourceTask &&
         isAutomationTriggerMessage(props.conversation, entry.message) ? (
-          <TranscriptAutomationTriggerView
-            message={entry.message}
-            sourceTask={props.conversation.sourceTask}
-          />
+          <div className="grid min-w-0 gap-2">
+            <TranscriptAutomationTriggerView
+              message={entry.message}
+              sourceTask={props.conversation.sourceTask}
+            />
+            <TranscriptRecalledMemories message={entry.message} />
+          </div>
         ) : entry.message.eventType ? (
           <TranscriptRailEvent
             kind="event"
             objectType={entry.message.eventObjectType}
           >
             <TranscriptEventView message={entry.message} />
+            <TranscriptRecalledMemories
+              className="mt-1"
+              message={entry.message}
+            />
           </TranscriptRailEvent>
         ) : entry.message.context ? (
           <TranscriptRailEvent kind="message_context">
@@ -265,6 +277,10 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
               message={entry.message}
               conversation={props.conversation}
             />
+            <TranscriptRecalledMemories
+              className="mt-2"
+              message={entry.message}
+            />
           </TranscriptRailEvent>
         ) : (
           <TranscriptMessageView
@@ -285,10 +301,23 @@ const VisibleTranscriptEntries = memo(function VisibleTranscriptEntries(props: {
           icon={structuredEventIcon(entry.part.presentation.icon)}
           kind="structured_event"
         >
-          <TranscriptStructuredEventView
-            part={entry.part}
-            timestamp={entry.timestamp}
-          />
+          {isMemoryCaptureEvent(entry.part) ? (
+            <TranscriptCapturedMemories
+              fallback={
+                <TranscriptStructuredEventView
+                  part={entry.part}
+                  timestamp={entry.timestamp}
+                />
+              }
+              timestamp={entry.timestamp}
+              turnId={entry.part.turnId}
+            />
+          ) : (
+            <TranscriptStructuredEventView
+              part={entry.part}
+              timestamp={entry.timestamp}
+            />
+          )}
         </TranscriptRailEvent>
       )}
       renderSubagent={(entry) => (

package/src/client/conversations/ConversationWatches.tsx

@@ -69,9 +69,10 @@ const resourceIcons: Partial<Record<string, LucideIcon>> = {
 };
 
 /**
- * Show one Watch as a single line with its resource. Clicking the line shows
- * why the Watch exists and which events wake the Conversation. The expiry is
- * an internal limit, so the row does not show it.
+ * Show one Watch as a single line with its resource. When the resource has a
+ * web page, the line opens it and a chevron shows the details. Otherwise the
+ * line itself shows why the Watch exists and which events wake the
+ * Conversation. The expiry is an internal limit, so the row does not show it.
  */
 function WatchRow(props: { watch: ConversationWatch }) {
   const { watch } = props;
@@ -83,20 +84,41 @@ function WatchRow(props: { watch: ConversationWatch }) {
   // A timer has one event, and its fire time already says when it wakes.
   const events = watch.firesAt ? [] : watch.events;
   const filters = Object.entries(watch.match ?? {});
-  const row = (
+  const icon = <Icon aria-hidden="true" className="size-3.5" />;
+  const title = watch.label ?? `Private ${resource}`;
+  const chevron = (
+    <span className="grid size-5 place-items-center">
+      <ChevronRight
+        aria-hidden="true"
+        className={dashboardDisclosureChevronClass}
+      />
+    </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.
+    <div className="flex min-w-0 items-start gap-0.5">
+      <div className="min-w-0 flex-1">
+        <DetailsRow href={watch.url} icon={icon} title={title} />
+      </div>
+      <button
+        aria-expanded={expanded}
+        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>
+    </div>
+  ) : (
     <DetailsRow
       expanded={expanded}
-      icon={<Icon aria-hidden="true" className="size-3.5" />}
-      meta={
-        <span className="grid size-5 place-items-center">
-          <ChevronRight
-            aria-hidden="true"
-            className={dashboardDisclosureChevronClass}
-          />
-        </span>
-      }
-      onToggle={() => setExpanded((value) => !value)}
-      title={watch.label ?? `Private ${resource}`}
+      icon={icon}
+      meta={chevron}
+      onToggle={toggle}
+      title={title}
     />
   );
   if (!expanded) return row;

package/src/client/conversations/PendingMailboxStack.tsx

@@ -42,6 +42,7 @@ import {
 } from "./TranscriptHeadingRow";
 import { SlackMark } from "./SlackMark";
 import { DisplayText } from "../display-text/DisplayText";
+import { ReviewItemChangeLabel } from "../review-desk/ReviewItemChangeRow";
 import { displayPlainText } from "../display-text/plainText";
 
 // Rows are one line each, so the stack can show five before it collapses.
@@ -349,7 +350,16 @@ function PendingRow(props: {
                 className="m-0 min-w-0 truncate font-sans text-sm leading-snug text-dashboard-text-subtle"
                 title={displayPlainText(text, mentions)}
               >
-                <DisplayText inline mentions={mentions} text={text} />
+                {props.message.reviewItemChange ? (
+                  <ReviewItemChangeLabel
+                    fallback={
+                      <DisplayText inline mentions={mentions} text={text} />
+                    }
+                    record={props.message.reviewItemChange}
+                  />
+                ) : (
+                  <DisplayText inline mentions={mentions} text={text} />
+                )}
               </p>
             ) : null}
           </>