@sentry/junior-dashboard 0.275.0 → 0.277.0

package/src/client/conversations/TranscriptMemoryPopover.tsx

@@ -0,0 +1,174 @@
+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 { MemoryLinkIcons } from "./MemoryIcons";
+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 divide-y divide-dashboard-border-subtle p-0">
+          {props.memories.map((memory) => (
+            <li className="py-1 first:pt-0 last:pb-0" key={memory.id}>
+              <Link
+                className={cn(
+                  "group grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 rounded-md px-2.5 py-2 no-underline transition-colors hover:bg-dashboard-fill-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus",
+                  memory.id === highlightId && "bg-dashboard-fill-strong",
+                )}
+                ref={
+                  memory.id === highlightId
+                    ? (node) => node?.scrollIntoView({ block: "nearest" })
+                    : undefined
+                }
+                to={memoryPath(memory.id)}
+              >
+                <p className="m-0 line-clamp-4 whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text">
+                  {memory.content}
+                </p>
+                <MemoryLinkIcons private={memory.visibility === "private"} />
+              </Link>
+            </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/TranscriptTurnContextView.tsx

@@ -29,6 +29,7 @@ import {
 } from "./turnContext";
 import { cn } from "../styles";
 import { DetailsCard } from "./DetailsList";
+import { MemoryLinkIcons } from "./MemoryIcons";
 import { HighlightText } from "./transcriptSearch";
 
 /** What one turn context view shows: who spoke, when, and the context. */
@@ -270,17 +271,20 @@ function TurnContextCard(props: { context: TranscriptViewTurnContext }) {
   );
 }
 
-// Each row links to the memory's page, which shows its details.
+// Each row shows the full memory and links to the memory's page.
 function MemoryRecall(props: { memories: MemoryRecallContent["memories"] }) {
   return (
-    <ul className="-mx-1.5 -mb-1.5 -mt-1 grid list-none gap-0.5 p-0">
+    <ul className="-mx-1.5 -mb-1.5 -mt-1 grid list-none divide-y divide-dashboard-border-subtle p-0">
       {props.memories.map((memory) => (
-        <li key={memory.id}>
+        <li className="py-1 first:pt-0 last:pb-0" key={memory.id}>
           <Link
-            className="line-clamp-2 rounded-md px-1.5 py-1.5 text-sm leading-5 text-dashboard-text no-underline transition-colors hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
+            className="group grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 rounded-md px-1.5 py-1.5 no-underline transition-colors hover:bg-dashboard-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-dashboard-focus"
             to={memoryPath(memory.id)}
           >
-            <HighlightText text={memory.content} />
+            <span className="whitespace-pre-wrap break-words text-sm leading-relaxed text-dashboard-text">
+              <HighlightText text={memory.content} />
+            </span>
+            <MemoryLinkIcons private={memory.scope === "personal"} />
           </Link>
         </li>
       ))}

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/autoArchiveQueries.ts

@@ -0,0 +1,53 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  archiveDoneConversationsResponseSchema,
+  conversationAutoArchiveSchema,
+  type ConversationDetailReport,
+} from "@sentry/junior/api/schema";
+
+import { patch, post } from "../http";
+import { conversationDetailQueryKey } from "./queries";
+
+/** Turn auto-archive on or off for one conversation and the viewer. */
+export function useSetConversationAutoArchive(conversationId: string) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (autoArchive: boolean) =>
+      patch(
+        conversationAutoArchiveSchema,
+        `/api/conversations/${encodeURIComponent(conversationId)}/auto-archive`,
+        { autoArchive },
+      ),
+    onSuccess: (result) => {
+      queryClient.setQueryData<
+        ConversationDetailReport & { detailEtag?: string }
+      >(conversationDetailQueryKey(conversationId), (detail) =>
+        detail
+          ? {
+              ...detail,
+              autoArchive: result.autoArchive,
+              detailEtag: undefined,
+            }
+          : detail,
+      );
+    },
+  });
+}
+
+/** Archive all of the viewer's done conversations once. */
+export function useArchiveDoneConversations() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: () =>
+      post(
+        archiveDoneConversationsResponseSchema,
+        "/api/conversations/archive-done",
+        {},
+      ),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["dashboard", "conversations"],
+      });
+    },
+  });
+}

package/src/client/conversations/conversationArchive.ts

@@ -0,0 +1,255 @@
+import {
+  useMutation,
+  useMutationState,
+  useQueryClient,
+} from "@tanstack/react-query";
+import type {
+  ConversationDetailReport,
+  ConversationFeed,
+  ConversationSummaryReport,
+} from "@sentry/junior/api/schema";
+import { archiveConversationResponseSchema } from "@sentry/junior/api/schema";
+
+import { patch } from "../http";
+import {
+  conversationDetailQueryKey,
+  type ConversationSnapshot,
+} from "./queries";
+
+function archivedConversationQueryKey(conversationId: string) {
+  return ["dashboard", "archived-conversation", conversationId] as const;
+}
+
+/** Read active/archived status from a dashboard conversations query key. */
+function conversationFeedStatus(
+  queryKey: readonly unknown[],
+): "active" | "archived" | undefined {
+  const status = queryKey[queryKey.length - 1];
+  return status === "active" || status === "archived" ? status : undefined;
+}
+
+type ArchivedConversationSnapshot = {
+  conversation: ConversationSummaryReport;
+  feedQueryHashes: string[];
+};
+
+const archiveConversationMutationKey = [
+  "dashboard",
+  "archive-conversation",
+] as const;
+
+type ArchiveConversationVariables = {
+  archived: boolean;
+  lastSeenAt: string;
+};
+
+type ArchiveConversationMutationContext = {
+  archivedQueryKey: ReturnType<typeof archivedConversationQueryKey>;
+  archivedSnapshot?: ArchivedConversationSnapshot;
+  detailQueryKey: ReturnType<typeof conversationDetailQueryKey>;
+  previousArchivedSnapshot?: ArchivedConversationSnapshot;
+  previousDetail?: ConversationDetailReport;
+  previousFeeds: Array<[readonly unknown[], ConversationFeed | undefined]>;
+};
+
+export type PendingArchiveConversationUpdate = {
+  archived: boolean;
+  conversation?: ConversationSummaryReport;
+  conversationId: string;
+};
+
+/** Read pending archive state so refetches cannot visually replace optimistic UI. */
+export function usePendingArchiveConversationUpdates() {
+  return useMutationState({
+    filters: {
+      mutationKey: archiveConversationMutationKey,
+      status: "pending",
+    },
+    select: (mutation) => {
+      const variables = mutation.state
+        .variables as ArchiveConversationVariables;
+      const context = mutation.state.context as
+        | ArchiveConversationMutationContext
+        | undefined;
+      const conversationId = mutation.options.mutationKey?.[2];
+      return {
+        archived: variables.archived,
+        conversation: context?.archivedSnapshot?.conversation,
+        conversationId:
+          typeof conversationId === "string" ? conversationId : "",
+      } satisfies PendingArchiveConversationUpdate;
+    },
+  });
+}
+
+/** Archive or restore one conversation with an immediate reversible cache update. */
+export function useArchiveConversation(
+  conversationId: string,
+  options?: {
+    onError?(): void;
+    onSuccess?(archivedAt: string | null): void;
+  },
+) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: [...archiveConversationMutationKey, conversationId],
+    mutationFn: (args: ArchiveConversationVariables) =>
+      patch(
+        archiveConversationResponseSchema,
+        `/api/conversations/${encodeURIComponent(conversationId)}/archive`,
+        args,
+      ),
+    onMutate: async (args) => {
+      const conversationQueries = { queryKey: ["dashboard", "conversations"] };
+      const detailQueryKey = conversationDetailQueryKey(conversationId);
+      const archivedQueryKey = archivedConversationQueryKey(conversationId);
+      await Promise.all([
+        queryClient.cancelQueries(conversationQueries),
+        queryClient.cancelQueries({ queryKey: detailQueryKey }),
+      ]);
+      const previousFeeds =
+        queryClient.getQueriesData<ConversationFeed>(conversationQueries);
+      const previousDetail =
+        queryClient.getQueryData<ConversationDetailReport>(detailQueryKey);
+      const previousArchivedSnapshot =
+        queryClient.getQueryData<ArchivedConversationSnapshot>(
+          archivedQueryKey,
+        );
+      const archivedAt = args.archived ? new Date().toISOString() : null;
+      // Match the API: archive also unpins.
+      const viewerMarks = args.archived
+        ? { archivedAt, pinnedAt: null }
+        : { archivedAt };
+      // Snapshot from any loaded feed, including archived-only fixtures that
+      // were never archived through this client session.
+      const archivedSnapshot =
+        buildArchivedConversationSnapshot(previousFeeds, conversationId) ??
+        previousArchivedSnapshot;
+
+      previousFeeds.forEach(([queryKey, feed]) => {
+        if (!feed) return;
+        const conversationExists = feed.conversations.some(
+          (conversation) => conversation.conversationId === conversationId,
+        );
+        const feedStatus = conversationFeedStatus(queryKey);
+        const shouldRestore =
+          !args.archived &&
+          !conversationExists &&
+          Boolean(archivedSnapshot) &&
+          feedStatus !== "archived";
+        const conversations = shouldRestore
+          ? [
+              ...feed.conversations,
+              // The archive cleared the pin, so the restored row is unpinned.
+              {
+                ...archivedSnapshot!.conversation,
+                archivedAt: null,
+                pinnedAt: null,
+              },
+            ].sort((a, b) => b.lastSeenAt.localeCompare(a.lastSeenAt))
+          : feed.conversations.map((conversation) =>
+              conversation.conversationId === conversationId
+                ? { ...conversation, ...viewerMarks }
+                : conversation,
+            );
+        queryClient.setQueryData<ConversationFeed>(queryKey, {
+          ...feed,
+          conversations,
+        });
+      });
+      queryClient.setQueryData<ConversationSnapshot>(
+        detailQueryKey,
+        (detail) =>
+          detail
+            ? { ...detail, ...viewerMarks, detailEtag: undefined }
+            : detail,
+      );
+      if (archivedSnapshot) {
+        queryClient.setQueryData(archivedQueryKey, archivedSnapshot);
+      }
+      return {
+        archivedQueryKey,
+        archivedSnapshot,
+        detailQueryKey,
+        previousArchivedSnapshot,
+        previousDetail,
+        previousFeeds,
+      } satisfies ArchiveConversationMutationContext;
+    },
+    onError: (_error, _args, context) => {
+      context?.previousFeeds.forEach(([queryKey, feed]) => {
+        queryClient.setQueryData(queryKey, feed);
+      });
+      if (context) {
+        queryClient.setQueryData(
+          context.detailQueryKey,
+          context.previousDetail,
+        );
+        if (context.previousArchivedSnapshot) {
+          queryClient.setQueryData(
+            context.archivedQueryKey,
+            context.previousArchivedSnapshot,
+          );
+        } else {
+          queryClient.removeQueries({
+            exact: true,
+            queryKey: context.archivedQueryKey,
+          });
+        }
+      }
+      options?.onError?.();
+    },
+    onSuccess: (result, args) => {
+      queryClient.setQueryData<ConversationSnapshot>(
+        conversationDetailQueryKey(conversationId),
+        (detail) =>
+          detail
+            ? {
+                ...detail,
+                archivedAt: result.archivedAt,
+                detailEtag: undefined,
+              }
+            : detail,
+      );
+      if (!args.archived) {
+        queryClient.removeQueries({
+          exact: true,
+          queryKey: archivedConversationQueryKey(conversationId),
+        });
+      }
+      options?.onSuccess?.(result.archivedAt);
+    },
+    onSettled: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: ["dashboard", "conversations"],
+        }),
+        queryClient.invalidateQueries({
+          queryKey: ["dashboard", "locations"],
+        }),
+        queryClient.invalidateQueries({ queryKey: ["dashboard", "people"] }),
+        queryClient.invalidateQueries({
+          exact: true,
+          queryKey: conversationDetailQueryKey(conversationId),
+        }),
+      ]);
+    },
+  });
+}
+
+function buildArchivedConversationSnapshot(
+  feeds: Array<[readonly unknown[], ConversationFeed | undefined]>,
+  conversationId: string,
+): ArchivedConversationSnapshot | undefined {
+  let conversation: ConversationSummaryReport | undefined;
+  const feedQueryHashes: string[] = [];
+  for (const [queryKey, feed] of feeds) {
+    const feedConversation = feed?.conversations.find(
+      (item) => item.conversationId === conversationId,
+    );
+    if (!feedConversation) continue;
+    conversation ??= feedConversation;
+    feedQueryHashes.push(JSON.stringify(queryKey));
+  }
+  return conversation ? { conversation, feedQueryHashes } : undefined;
+}