@sentry/junior-dashboard 0.274.0 → 0.276.0

package/src/client/conversations/TranscriptMemoryPopover.tsx

@@ -0,0 +1,179 @@
+import { Brain } from "lucide-react";
+import type { ReactElement, ReactNode } from "react";
+import { Link } from "react-router";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../components/ui/popover";
+import { formatMessageTimestamp, memoryPath } from "../format";
+import { cn } from "../styles";
+import type { TranscriptViewMessage } from "../types";
+import {
+  anchorMemories,
+  memoryAnchorKey,
+  useConversationMemoryState,
+  type ConversationMemory,
+  type ConversationMemoryState,
+  type MemoryAnchor,
+} from "./conversationMemory";
+import { memoryRecallContent } from "./turnContext";
+
+function memoryCount(count: number): string {
+  return `${count} ${count === 1 ? "memory" : "memories"}`;
+}
+
+/**
+ * Open one transcript spot's memories in a popover, so the transcript keeps
+ * its length. The page owns which popover is open, so the details panel can
+ * open one too.
+ */
+function MemoryPopover(props: {
+  anchor: MemoryAnchor;
+  label: string;
+  memories: ConversationMemory[];
+  state: ConversationMemoryState;
+  trigger: ReactElement;
+}) {
+  const { anchor, state } = props;
+  const open =
+    state.open?.source === anchor.source && state.open.turnId === anchor.turnId;
+  const highlightId = open ? state.open?.memoryId : undefined;
+  return (
+    <Popover
+      onOpenChange={(next) => state.setOpen(next ? anchor : undefined)}
+      open={open}
+    >
+      <PopoverTrigger
+        data-memory-anchor={memoryAnchorKey(anchor)}
+        render={props.trigger}
+      />
+      <PopoverContent
+        align="start"
+        aria-label={props.label}
+        className="max-h-[min(28rem,var(--available-height))] w-96 p-1.5"
+      >
+        <ul className="m-0 grid list-none gap-0.5 p-0">
+          {props.memories.map((memory) => (
+            <li
+              className={cn(
+                "grid gap-1.5 rounded-md px-2.5 py-2",
+                memory.id === highlightId && "bg-dashboard-fill-strong",
+              )}
+              key={memory.id}
+              ref={
+                memory.id === highlightId
+                  ? (node) => node?.scrollIntoView({ block: "nearest" })
+                  : undefined
+              }
+            >
+              <p className="m-0 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text">
+                {memory.content}
+              </p>
+              <div className="flex items-center gap-3 text-xs text-dashboard-text-muted">
+                {memory.visibility === "private" ? <span>Private</span> : null}
+                <Link
+                  className="text-dashboard-text-muted no-underline hover:text-dashboard-text hover:underline"
+                  to={memoryPath(memory.id)}
+                >
+                  Open
+                </Link>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+/**
+ * Show the memories that a prompt recalled, under that prompt. One prompt can
+ * start more than one Turn, and each Turn recalls, so each gets a chip.
+ */
+export function TranscriptRecalledMemories(props: {
+  className?: string;
+  message: TranscriptViewMessage;
+}) {
+  const state = useConversationMemoryState();
+  const anchors = [
+    ...new Set(
+      props.message.contexts
+        ?.filter((context) => memoryRecallContent(context))
+        .map((context) => context.turnId),
+    ),
+  ].flatMap((turnId) => {
+    const anchor = { source: "recalled", turnId } as const;
+    const memories = anchorMemories(state?.list, anchor);
+    return memories.length > 0 ? [{ anchor, memories }] : [];
+  });
+  if (!state || anchors.length === 0) return null;
+  return (
+    <div className={cn("flex flex-wrap gap-2", props.className)}>
+      {anchors.map(({ anchor, memories }) => {
+        const label = `Recalled ${memoryCount(memories.length)}`;
+        return (
+          <MemoryPopover
+            anchor={anchor}
+            key={anchor.turnId}
+            label={label}
+            memories={memories}
+            state={state}
+            trigger={
+              <button
+                className="inline-flex h-6 cursor-pointer items-center gap-1.5 rounded-md border border-dashboard-border-subtle bg-transparent px-2 font-sans text-xs text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-dashboard-text focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus aria-expanded:bg-dashboard-fill-strong aria-expanded:text-dashboard-text"
+                type="button"
+              >
+                <Brain aria-hidden="true" size={13} strokeWidth={1.8} />
+                {label}
+              </button>
+            }
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Show the memories that one Turn captured. Without memory state or a list
+ * for the Turn, such as in a nested transcript, show `fallback`.
+ */
+export function TranscriptCapturedMemories(props: {
+  fallback: ReactNode;
+  timestamp?: number;
+  turnId?: string;
+}) {
+  const state = useConversationMemoryState();
+  const anchor = props.turnId
+    ? ({ source: "captured", turnId: props.turnId } as const)
+    : undefined;
+  const memories = anchor ? anchorMemories(state?.list, anchor) : [];
+  if (!state || !anchor || memories.length === 0) return props.fallback;
+  const label = `Captured ${memoryCount(memories.length)}`;
+  const timestamp = formatMessageTimestamp(props.timestamp);
+  return (
+    <MemoryPopover
+      anchor={anchor}
+      label={label}
+      memories={memories}
+      state={state}
+      trigger={
+        <button
+          className="-mx-2 -my-1.5 grid w-[calc(100%+1rem)] cursor-pointer grid-cols-[minmax(0,1fr)_auto] items-start gap-2 rounded-md border-0 bg-transparent px-2 py-1.5 text-left font-sans transition-colors hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus aria-expanded:bg-dashboard-fill-hover max-md:grid-cols-[minmax(0,1fr)]"
+          type="button"
+        >
+          <span className="text-sm font-medium leading-6 text-dashboard-text">
+            {label}
+          </span>
+          {timestamp ? (
+            <span className="text-xs leading-6 tabular-nums text-dashboard-text-muted max-md:hidden">
+              {timestamp}
+            </span>
+          ) : null}
+        </button>
+      }
+    />
+  );
+}

package/src/client/conversations/TranscriptMessageView.tsx

@@ -5,6 +5,7 @@ import {
 } from "./TranscriptAttachment";
 import { ObjectCard } from "./ObjectCard";
 import { AutomationCard } from "../components/AutomationCard";
+import { ReviewItemChangeRow } from "../review-desk/ReviewItemChangeRow";
 import { memo, type ReactNode } from "react";
 
 import {
@@ -23,6 +24,7 @@ import { RedactedMarker } from "./TranscriptRedacted";
 import { SlackMark } from "./SlackMark";
 import { DisplayText } from "../display-text/DisplayText";
 import { TranscriptTurnContextView } from "./TranscriptTurnContextView";
+import { TranscriptRecalledMemories } from "./TranscriptMemoryPopover";
 import { TranscriptTimestamp } from "./TranscriptTimestamp";
 import { showsSlackSourceIcon } from "./transcriptSource";
 
@@ -35,6 +37,28 @@ export const TranscriptMessageView = memo(
     const rawText = messageRawText(props.message);
     const roleKind = transcriptRoleKind(props.message.role);
     const chatText = roleKind === "assistant" || roleKind === "user";
+    const text = (
+      <div
+        className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2"
+        // `QuickQuestion` reads it: selections here can start a question.
+        data-quick-question-message-id={
+          canForkAfter(props.message, props.conversation)
+            ? props.message.messageId
+            : undefined
+        }
+      >
+        {props.message.parts.map((part, index) =>
+          part.type === "text" ? (
+            <DisplayText
+              chat={chatText}
+              key={index}
+              mentions={props.message.mentions}
+              text={part.text ?? ""}
+            />
+          ) : null,
+        )}
+      </div>
+    );
 
     return (
       <TranscriptMessageShell
@@ -59,18 +83,16 @@ export const TranscriptMessageView = memo(
           message={props.message}
           conversation={props.conversation}
         />
-        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2">
-          {props.message.parts.map((part, index) =>
-            part.type === "text" ? (
-              <DisplayText
-                chat={chatText}
+        {props.message.reviewItemChanges?.length
+          ? props.message.reviewItemChanges.map((record, index) => (
+              <ReviewItemChangeRow
+                fallback={text}
                 key={index}
-                mentions={props.message.mentions}
-                text={part.text ?? ""}
+                record={record}
               />
-            ) : null,
-          )}
-        </div>
+            ))
+          : text}
+        <TranscriptRecalledMemories message={props.message} />
         {props.message.attachments?.length ? (
           <TranscriptAttachments
             attachments={props.message.attachments}
@@ -146,12 +168,7 @@ function messageAction(
       />
     );
   }
-  if (
-    conversation.canFork &&
-    message.role === "assistant" &&
-    message.messageId &&
-    !message.pending
-  ) {
+  if (canForkAfter(message, conversation)) {
     return (
       <ForkConversationButton
         conversationId={conversation.conversationId}
@@ -162,6 +179,19 @@ function messageAction(
   return undefined;
 }
 
+/** A delivered Junior reply ends the history of a fork or Quick question. */
+function canForkAfter(
+  message: TranscriptViewMessage,
+  conversation: ConversationTranscript,
+): message is TranscriptViewMessage & { messageId: string } {
+  return Boolean(
+    conversation.canFork &&
+    message.role === "assistant" &&
+    message.messageId &&
+    !message.pending,
+  );
+}
+
 function TranscriptMessageHeader(props: {
   action?: ReactNode;
   message: TranscriptViewMessage;

package/src/client/conversations/TranscriptRows.tsx

@@ -35,7 +35,14 @@ export function TranscriptUnreadMarker() {
   );
 }
 
-/** Leave room for control outlines inside the mobile row's paint bounds. */
+/**
+ * Lay out one transcript row at its real size.
+ *
+ * Rows do not use `content-visibility: auto`. A skipped row has an estimated
+ * size, and it changes size when the reader scrolls near it. Above the
+ * reader, each change needs a scroll correction while they scroll, and on
+ * phones those corrections make the transcript jump.
+ */
 export function TranscriptRow(props: {
   /** Stable row id that holds the reader's place while layout changes. */
   anchorKey?: string;
@@ -46,7 +53,7 @@ export function TranscriptRow(props: {
 }) {
   return (
     <div
-      className="mobile-transcript-row -mx-2 px-2 py-1.5"
+      className="py-1.5"
       data-scroll-anchor={props.anchorKey}
       data-transcript-seq={props.seq}
     >

package/src/client/conversations/TranscriptView.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import type { ConversationMailboxMessage } from "./conversationOutbox";
-import { ArrowDownToLine } from "lucide-react";
+import { ArrowDown } from "lucide-react";
 
 import type {
   ConversationTranscript,
@@ -8,11 +8,6 @@ import type {
 } from "../types";
 import { EmptyTelemetry } from "../components/EmptyTelemetry";
 import { Button } from "../components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../components/ui/tooltip";
 import { ConversationTranscriptView } from "./ConversationTranscript";
 import { ConversationEventLog } from "./ConversationEventLog";
 import {
@@ -191,33 +186,21 @@ function JumpToLatestButton(props: {
 }) {
   if (!props.visible) return null;
 
-  const label = props.hasPendingUpdate
-    ? "Jump to latest update"
-    : "Jump to latest";
-
   return (
-    <div className="pointer-events-none sticky bottom-3 z-20 flex h-0 justify-center px-3 md:fixed md:inset-x-auto md:bottom-6 md:right-8 md:h-auto md:justify-end md:px-0">
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <Button
-              aria-label={label}
-              className="pointer-events-auto relative -translate-y-full rounded-lg !border !border-dashboard-border-emphasis !bg-dashboard-surface-active text-dashboard-text shadow-[0_6px_24px_rgba(0,0,0,0.36)] hover:!border-dashboard-border-interactive hover:!bg-dashboard-surface-hover hover:!text-dashboard-text md:translate-y-0"
-              onClick={props.onClick}
-              size="icon"
-            >
-              <ArrowDownToLine aria-hidden="true" size={16} strokeWidth={2} />
-              {props.hasPendingUpdate ? (
-                <span
-                  aria-hidden="true"
-                  className="absolute right-1.5 top-1.5 size-2 bg-emerald-300"
-                />
-              ) : null}
-            </Button>
-          }
-        />
-        <TooltipContent size="compact">{label}</TooltipContent>
-      </Tooltip>
+    // Sticky offsets count from inside the scroll region's bottom padding
+    // (pb-4 / md:pb-6). The negative offsets cancel most of it, so the pill
+    // sits 12px (16px on md) above the composer, centered on the transcript.
+    <div className="pointer-events-none sticky -bottom-2.5 z-20 flex h-0 justify-center md:-bottom-5">
+      <Button
+        aria-label={
+          props.hasPendingUpdate ? "Jump to latest update" : "Jump to latest"
+        }
+        className="pointer-events-auto h-8 -translate-y-full gap-1.5 rounded-full pl-3 pr-3.5 text-xs shadow-[0_4px_16px_rgba(0,0,0,0.12)]"
+        onClick={props.onClick}
+      >
+        <ArrowDown aria-hidden="true" size={14} strokeWidth={2} />
+        Jump to latest
+      </Button>
     </div>
   );
 }

package/src/client/conversations/UsageCard.tsx

@@ -27,8 +27,6 @@ export type UsageCardSplit = {
 };
 
 export type UsageCardProps = {
-  /** Closing hint, such as where to find the full breakdown. */
-  footer?: string;
   /** Muted detail after the title, such as a compaction count. */
   note?: string;
   sections: UsageCardSection[];
@@ -64,18 +62,17 @@ export function UsageCard(props: UsageCardProps) {
       <span
         className={cn(
           "grid gap-2.5",
-          (props.sections.length > 0 || props.footer) &&
-            "border-b border-dashboard-border pb-3",
+          props.sections.length > 0 && "border-b border-dashboard-border pb-3",
         )}
       >
         <span className="flex items-baseline justify-between gap-3">
-          <span className="min-w-0 truncate">
+          <span className="min-w-0 truncate font-medium text-dashboard-text">
             {props.title}
             {props.note ? (
               <span className="text-dashboard-text-faint"> · {props.note}</span>
             ) : null}
           </span>
-          <span className="whitespace-nowrap text-lg font-semibold tabular-nums text-dashboard-text">
+          <span className="whitespace-nowrap text-base font-semibold tabular-nums text-dashboard-text">
             {props.total}
           </span>
         </span>
@@ -127,7 +124,7 @@ export function UsageCard(props: UsageCardProps) {
               <span
                 className={cn(
                   "flex min-w-0 items-baseline gap-2",
-                  row.code && "font-mono text-dashboard-text",
+                  row.code && "font-mono",
                 )}
               >
                 <span className="min-w-0 truncate" title={row.label}>
@@ -156,17 +153,6 @@ export function UsageCard(props: UsageCardProps) {
           ) : null}
         </span>
       ))}
-      {props.footer ? (
-        <span
-          className={cn(
-            "text-dashboard-text-faint",
-            props.sections.length > 0 &&
-              "border-t border-dashboard-border pt-3",
-          )}
-        >
-          {props.footer}
-        </span>
-      ) : null}
     </span>
   );
 }

package/src/client/conversations/conversationMemory.ts

@@ -0,0 +1,138 @@
+import { useQuery } from "@tanstack/react-query";
+import { createContext, useContext } from "react";
+import { z } from "zod";
+
+import { fetchDashboardJson } from "../http";
+
+const conversationMemoryListSchema = z
+  .object({
+    events: z.array(
+      z
+        .object({
+          memoryIds: z.array(z.string().min(1)).min(1),
+          source: z.enum(["captured", "recalled"]),
+          turnId: z.string().min(1).optional(),
+        })
+        .strict(),
+    ),
+    memories: z.array(
+      z
+        .object({
+          content: z.string().min(1),
+          id: z.string().min(1),
+          visibility: z.enum(["private", "public"]),
+        })
+        .strict(),
+    ),
+  })
+  .strict();
+
+export type ConversationMemoryList = z.output<
+  typeof conversationMemoryListSchema
+>;
+export type ConversationMemory = ConversationMemoryList["memories"][number];
+type MemorySource = ConversationMemoryList["events"][number]["source"];
+
+/** One transcript spot that recalled or captured memories. */
+export type MemoryAnchor = { source: MemorySource; turnId: string };
+
+/** Load what one Conversation recalled and captured. */
+export function useConversationMemories(conversationId: string) {
+  return useQuery({
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        conversationMemoryListSchema,
+        `/api/plugins/memory/conversations/${encodeURIComponent(conversationId)}/memories`,
+        signal,
+      ),
+    queryKey: ["conversation", conversationId, "memories"],
+    retry: false,
+  });
+}
+
+/** Name the transcript element that opens one anchor's popover. */
+export function memoryAnchorKey(anchor: MemoryAnchor): string {
+  return `${anchor.source}:${anchor.turnId}`;
+}
+
+/** List the memories that one transcript spot recalled or captured. */
+export function anchorMemories(
+  list: ConversationMemoryList | undefined,
+  anchor: MemoryAnchor,
+): ConversationMemory[] {
+  const event = list?.events.find(
+    (candidate) =>
+      candidate.source === anchor.source && candidate.turnId === anchor.turnId,
+  );
+  if (!event || !list) return [];
+  const byId = new Map(list.memories.map((memory) => [memory.id, memory]));
+  return event.memoryIds.flatMap((id) => {
+    const memory = byId.get(id);
+    return memory ? [memory] : [];
+  });
+}
+
+/** One row of the Conversation memory list. */
+export type ConversationMemoryEntry = {
+  memory: ConversationMemory;
+  source: MemorySource;
+  turnId?: string;
+};
+
+/**
+ * Flatten recalls and captures into one list in Conversation order. A memory
+ * shows once per source, at the first Turn that recalled or captured it.
+ */
+export function conversationMemoryEntries(
+  list: ConversationMemoryList | undefined,
+): ConversationMemoryEntry[] {
+  if (!list) return [];
+  const byId = new Map(list.memories.map((memory) => [memory.id, memory]));
+  const seen = new Set<string>();
+  const entries: ConversationMemoryEntry[] = [];
+  for (const event of list.events) {
+    for (const id of event.memoryIds) {
+      const key = `${event.source}:${id}`;
+      const memory = byId.get(id);
+      if (seen.has(key) || !memory) continue;
+      seen.add(key);
+      entries.push({
+        memory,
+        source: event.source,
+        ...(event.turnId ? { turnId: event.turnId } : undefined),
+      });
+    }
+  }
+  return entries;
+}
+
+/** The open memory popover, and the memory it highlights. */
+export type OpenMemoryPopover = MemoryAnchor & { memoryId?: string };
+
+/** Shared memory popover state for one Conversation page. */
+export type ConversationMemoryState = {
+  list?: ConversationMemoryList;
+  open?: OpenMemoryPopover;
+  setOpen(open: OpenMemoryPopover | undefined): void;
+};
+
+/**
+ * Let the transcript and the details panel share memory popovers. Only the
+ * Conversation page sets it, so nested transcripts show plain events.
+ */
+export const ConversationMemoryContext = createContext<
+  ConversationMemoryState | undefined
+>(undefined);
+
+/** Read the memory popover state of the current Conversation page. */
+export function useConversationMemoryState() {
+  return useContext(ConversationMemoryContext);
+}
+
+/** True for the memory plugin event that a Turn's capture emits. */
+export function isMemoryCaptureEvent(part: {
+  name: string;
+  namespace: string;
+}): boolean {
+  return part.namespace === "memory" && part.name === "memories_captured";
+}

package/src/client/conversations/conversationSections.ts

@@ -7,13 +7,18 @@ export type ConversationSection = {
 };
 
 const DAY_MS = 24 * 60 * 60 * 1000;
+// Sorts before every time section.
+const ATTENTION_SECTION = {
+  key: "attention",
+  label: "Needs attention",
+  order: Number.NEGATIVE_INFINITY,
+};
 
 /**
- * Group conversations by last activity: Today, Yesterday, Previous 7 days,
- * Previous 30 days, then one section per month.
+ * Group conversations into Needs attention, then by last activity: Today,
+ * Yesterday, Previous 7 days, Previous 30 days, then one section per month.
  *
- * Conversations in `attentionIds` lead their section, so unread and waiting
- * rows sit above read rows without leaving their time group.
+ * Conversations in `attentionIds` go to Needs attention, newest first.
  */
 export function buildConversationSections(
   conversations: Conversation[],
@@ -25,20 +30,19 @@ export function buildConversationSections(
 ): ConversationSection[] {
   const nowDay = calendarDay(options.nowMs, options.timeZone);
   const sections = new Map<string, ConversationSection & { order: number }>();
-  const byActivity = [...conversations].sort(
+  const sorted = [...conversations].sort(
     (left, right) => activityTime(right) - activityTime(left),
   );
-  const sorted = options.attentionIds
-    ? attentionFirst(byActivity, options.attentionIds)
-    : byActivity;
 
   for (const conversation of sorted) {
-    const section = conversationSection(
-      activityTime(conversation),
-      nowDay,
-      options.nowMs,
-      options.timeZone,
-    );
+    const section = options.attentionIds?.has(conversation.id)
+      ? ATTENTION_SECTION
+      : conversationSection(
+          activityTime(conversation),
+          nowDay,
+          options.nowMs,
+          options.timeZone,
+        );
     const existing = sections.get(section.key);
     if (existing) {
       existing.conversations.push(conversation);

package/src/client/conversations/eventTranscript.ts

@@ -97,6 +97,9 @@ export function pendingTranscriptMessage(
       ? { actorIdentityId: message.actorIdentityId }
       : undefined),
     ...(message.mentions ? { mentions: message.mentions } : undefined),
+    ...(message.reviewItemChange
+      ? { reviewItemChanges: [message.reviewItemChange] }
+      : undefined),
   };
 }
 
@@ -240,6 +243,9 @@ export function transcriptMessagesFromEvents(
         ...(data.explicitMention !== undefined
           ? { explicitMention: data.explicitMention }
           : undefined),
+        ...(data.reviewItemChanges
+          ? { reviewItemChanges: data.reviewItemChanges }
+          : undefined),
         ...(data.source ? { source: data.source } : undefined),
       };
       messages.push(message);
@@ -327,6 +333,7 @@ export function transcriptMessagesFromEvents(
           kind: data.kind,
           loadedAt: event.createdAt,
           pluginName: data.pluginName,
+          turnId: data.turnId,
           version: data.version,
         });
       }
@@ -411,6 +418,7 @@ export function transcriptMessagesFromEvents(
             name: data.name,
             version: data.version,
             presentation: data.presentation,
+            ...(data.turnId ? { turnId: data.turnId } : undefined),
           },
         ]),
       );