@sentry/junior-dashboard 0.275.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/UsageCard.tsx

@@ -66,13 +66,13 @@ export function UsageCard(props: UsageCardProps) {
         )}
       >
         <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>
@@ -124,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}>

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/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),
           },
         ]),
       );

package/src/client/review-desk/ReviewItemActions.tsx

@@ -26,7 +26,7 @@ function actionError(error: unknown): string {
 }
 
 /** Show the submitted answer as one line for each answered field. */
-function AnswerSummary(props: {
+export function AnswerSummary(props: {
   answer: NonNullable<ReviewItemPayload["answer"]>;
   request: NonNullable<ReviewItemPayload["request"]>;
 }) {

package/src/client/review-desk/ReviewItemChangeRow.tsx

@@ -0,0 +1,85 @@
+import { Inbox } from "lucide-react";
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+import type {
+  ReviewItemChangeRecord,
+  ReviewItemPayload,
+} from "@sentry/junior/api/schema";
+
+import { AnswerSummary } from "./ReviewItemActions";
+import { useReviewItemData } from "./queries";
+import { reviewItemPath } from "./reviewItemFormat";
+
+const CHANGE_VERBS = {
+  dismissed: "Dismissed",
+  submitted: "Answered",
+  taken: "Took",
+} as const satisfies Record<ReviewItemChangeRecord["kind"], string>;
+
+function ChangeRow(props: {
+  item: ReviewItemPayload;
+  record: ReviewItemChangeRecord;
+}) {
+  const { item, record } = props;
+  const verb = CHANGE_VERBS[record.kind];
+  return (
+    <section
+      aria-label={`${verb} ${item.title}`}
+      className="grid min-w-0 max-w-[37.5rem] gap-2 rounded-lg border border-dashboard-border bg-dashboard-surface-panel p-3 font-sans text-sm"
+    >
+      <div className="flex min-w-0 items-center gap-2">
+        <Inbox
+          aria-hidden="true"
+          className="shrink-0 text-dashboard-text-muted"
+          size={15}
+        />
+        <span className="shrink-0 text-dashboard-text-muted">{verb}</span>
+        <Link
+          className="min-w-0 flex-1 truncate font-medium text-dashboard-text no-underline hover:underline focus-visible:outline-dashboard-focus"
+          to={reviewItemPath(item.id)}
+        >
+          {item.title}
+        </Link>
+      </div>
+      {/* An answer is final, so the item's answer is this message's answer. */}
+      {record.kind === "submitted" && item.request && item.answer ? (
+        <AnswerSummary answer={item.answer} request={item.request} />
+      ) : null}
+    </section>
+  );
+}
+
+/**
+ * Show the Review item change that a message records as one row: what the
+ * message did and the item it did it to. The row shows the change from the
+ * message, not the item's current state, so a take stays a take after a
+ * later answer. Shows `fallback` when the viewer cannot read the item.
+ */
+export function ReviewItemChangeRow(props: {
+  fallback: ReactNode;
+  record: ReviewItemChangeRecord;
+}) {
+  const { data, isError } = useReviewItemData(props.record.reviewItemId);
+  if (isError) return props.fallback;
+  // The row replaces the text, so wait for the item before showing it.
+  if (!data) return null;
+  return <ChangeRow item={data} record={props.record} />;
+}
+
+/**
+ * Name the Review item change that a queued message records, on one line.
+ * Shows `fallback` until the item loads or when the viewer cannot read it.
+ */
+export function ReviewItemChangeLabel(props: {
+  fallback: ReactNode;
+  record: ReviewItemChangeRecord;
+}) {
+  const { data } = useReviewItemData(props.record.reviewItemId);
+  if (!data) return props.fallback;
+  return (
+    <>
+      {CHANGE_VERBS[props.record.kind]}{" "}
+      <span className="font-medium text-dashboard-text">{data.title}</span>
+    </>
+  );
+}