@sentry/junior-dashboard 0.275.0 → 0.277.0

package/src/client/conversations/QuickQuestion.tsx

@@ -0,0 +1,476 @@
+import { GitFork } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from "react";
+import { createPortal } from "react-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+
+import { getDashboardAgentName } from "../agentName";
+import { useDashboardCoreData } from "../api";
+import { DetailsPanel } from "../components/DetailsPanel";
+import { ShimmerText } from "../components/ShimmerText";
+import { Button } from "../components/ui/button";
+import { DisplayText } from "../display-text/DisplayText";
+import { DashboardApiError, post } from "../http";
+import {
+  acceptedConversationMessageSchema,
+  forkConversationResponseSchema,
+  type ConversationDetailReport,
+} from "@sentry/junior/api/schema";
+import { cn } from "../styles";
+import { ConversationComposer } from "./ConversationComposer";
+import { conversationPath } from "./conversationRoutes";
+import {
+  conversationDetailQueryKey,
+  conversationDetailQueryOptions,
+} from "./queries";
+import { TranscriptMessageShell } from "./TranscriptMessageShell";
+
+const HIGHLIGHT_NAME = "quick-question";
+const STARTER_PROMPTS = ["Explain this", "Is this right?", "What's the risk?"];
+
+type QuickQuestionMessage = { role: "user" | "assistant"; text: string };
+
+/** The selected text in one Junior reply. */
+type QuickQuestionSelection = {
+  messageId: string;
+  quote: string;
+  range: Range;
+};
+
+type QuickQuestionThread = QuickQuestionSelection & {
+  conversationId: string;
+  /** Hidden fork that the first question starts. */
+  forkId?: string;
+  id: string;
+  /** Questions sent from this page, shown until the fork history has them. */
+  asked: string[];
+  askedAtMs?: number;
+};
+
+/** Show or clear the selection highlight. Browsers without the API skip it. */
+function setHighlight(range: Range | undefined) {
+  if (typeof CSS === "undefined" || !("highlights" in CSS)) return;
+  if (range) CSS.highlights.set(HIGHLIGHT_NAME, new Highlight(range));
+  else CSS.highlights.delete(HIGHLIGHT_NAME);
+}
+
+/** Longest quote the API accepts. Longer selections are clipped. */
+const MAX_QUOTE_CHARS = 4_000;
+
+/**
+ * Read the selection when it lies in the text of one Junior reply that can
+ * end a fork. `TranscriptMessageView` marks that text.
+ */
+function readSelection(
+  root: HTMLElement | null,
+): QuickQuestionSelection | undefined {
+  const selection = window.getSelection();
+  if (!root || !selection || selection.isCollapsed || !selection.rangeCount)
+    return undefined;
+  const quote = selection.toString().trim().slice(0, MAX_QUOTE_CHARS).trim();
+  if (!quote) return undefined;
+  const range = selection.getRangeAt(0);
+  const node = range.commonAncestorContainer;
+  const element = node instanceof Element ? node : node.parentElement;
+  const message = element?.closest<HTMLElement>(
+    "[data-quick-question-message-id]",
+  );
+  const messageId = message?.dataset.quickQuestionMessageId;
+  if (!message || !messageId || !root.contains(message)) return undefined;
+  return { messageId, quote, range: range.cloneRange() };
+}
+
+/**
+ * Show a "Quick question" button above a text selection in a Junior reply.
+ * It hides on scroll, because its position would go stale.
+ */
+export function QuickQuestionSelectionButton(props: {
+  rootRef: RefObject<HTMLElement | null>;
+  onAsk(selection: QuickQuestionSelection): void;
+}) {
+  const { rootRef, onAsk } = props;
+  const [anchor, setAnchor] = useState<DOMRect>();
+  useEffect(() => {
+    const update = () =>
+      setAnchor(readSelection(rootRef.current)?.range.getBoundingClientRect());
+    const clearIfEmpty = () => {
+      if (!readSelection(rootRef.current)) setAnchor(undefined);
+    };
+    const hide = () => setAnchor(undefined);
+    document.addEventListener("mouseup", update);
+    document.addEventListener("keyup", update);
+    document.addEventListener("selectionchange", clearIfEmpty);
+    document.addEventListener("scroll", hide, true);
+    return () => {
+      document.removeEventListener("mouseup", update);
+      document.removeEventListener("keyup", update);
+      document.removeEventListener("selectionchange", clearIfEmpty);
+      document.removeEventListener("scroll", hide, true);
+    };
+  }, [rootRef]);
+  if (!anchor) return null;
+  // Show the button above the selection, or below it near the top edge.
+  const above = anchor.top >= 56;
+  return createPortal(
+    <div
+      className={cn(
+        "fixed z-50 -translate-x-1/2 rounded-lg border border-dashboard-border-emphasis bg-dashboard-surface-raised p-1 shadow-lg",
+        above && "-translate-y-full",
+      )}
+      style={{
+        left: anchor.left + anchor.width / 2,
+        top: above
+          ? anchor.top - 8
+          : Math.min(anchor.bottom + 8, window.innerHeight - 56),
+      }}
+    >
+      <Button
+        className="h-8 text-dashboard-text"
+        // Keep the selection while the button takes the click.
+        onMouseDown={(event) => event.preventDefault()}
+        onClick={() => {
+          const selection = readSelection(rootRef.current);
+          setAnchor(undefined);
+          if (!selection) return;
+          window.getSelection()?.removeAllRanges();
+          onAsk(selection);
+        }}
+        variant="quiet"
+      >
+        Quick question
+      </Button>
+    </div>,
+    document.body,
+  );
+}
+
+/**
+ * Ask in a Quick question. The first question starts the hidden, read-only
+ * fork. A retry with the same thread key finds that fork again.
+ */
+function useAskQuickQuestion() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (args: {
+      forkId?: string;
+      /** The composer key of this ask, so a retry cannot add the question twice. */
+      idempotencyKey: string;
+      messageId: string;
+      quote: string;
+      sourceConversationId: string;
+      text: string;
+      threadKey: string;
+    }) => {
+      const forkId =
+        args.forkId ??
+        (
+          await post(
+            forkConversationResponseSchema,
+            `/api/conversations/${encodeURIComponent(args.sourceConversationId)}/forks`,
+            {
+              idempotencyKey: args.threadKey,
+              messageId: args.messageId,
+              quickQuestion: { quote: args.quote },
+            },
+          )
+        ).conversationId;
+      return post(
+        acceptedConversationMessageSchema,
+        `/api/conversations/${encodeURIComponent(forkId)}/messages`,
+        { idempotencyKey: args.idempotencyKey, message: args.text },
+      );
+    },
+    onSuccess: (accepted) =>
+      queryClient.invalidateQueries({
+        queryKey: conversationDetailQueryKey(accepted.conversationId),
+      }),
+  });
+}
+
+/** Keep a Quick question as a fork that lists show. */
+function useKeepQuickQuestion() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (forkId: string) =>
+      post(
+        forkConversationResponseSchema,
+        `/api/conversations/${encodeURIComponent(forkId)}/quick-question/keep`,
+        {},
+      ),
+    onSuccess: () =>
+      queryClient.invalidateQueries({
+        queryKey: ["dashboard", "conversations"],
+      }),
+  });
+}
+
+/**
+ * Own one Quick question thread for a Conversation page. The page keeps it,
+ * so an answer that arrives while another panel shows is not lost. Closing
+ * leaves the hidden fork unlisted, so the question is gone for the reader.
+ */
+export function useQuickQuestionThread(conversationId: string) {
+  const [saved, setThread] = useState<QuickQuestionThread>();
+  // The page stays mounted across Conversations. A thread belongs to one.
+  const thread = saved?.conversationId === conversationId ? saved : undefined;
+  const ask = useAskQuickQuestion();
+  const { mutateAsync, reset } = ask;
+
+  const open = useCallback(
+    (selection: QuickQuestionSelection) => {
+      reset();
+      setHighlight(selection.range);
+      setThread({
+        ...selection,
+        asked: [],
+        conversationId,
+        id: crypto.randomUUID(),
+      });
+    },
+    [conversationId, reset],
+  );
+  const close = useCallback(() => {
+    reset();
+    setHighlight(undefined);
+    setThread(undefined);
+  }, [reset]);
+  // Leaving the Conversation discards its thread.
+  useEffect(
+    () => () => {
+      setHighlight(undefined);
+      setThread(undefined);
+    },
+    [conversationId],
+  );
+
+  const submit = useCallback(
+    async (text: string, idempotencyKey: string) => {
+      if (!thread) return;
+      const accepted = await mutateAsync({
+        forkId: thread.forkId,
+        idempotencyKey,
+        messageId: thread.messageId,
+        quote: thread.quote,
+        sourceConversationId: conversationId,
+        text,
+        threadKey: thread.id,
+      });
+      // A closed or replaced thread drops its late result.
+      setThread((current) =>
+        current?.id === thread.id
+          ? {
+              ...current,
+              asked: [...current.asked, text],
+              askedAtMs: Date.now(),
+              forkId: accepted.conversationId,
+            }
+          : current,
+      );
+    },
+    [conversationId, mutateAsync, thread],
+  );
+
+  return {
+    close,
+    error: ask.error,
+    open,
+    pending: ask.isPending,
+    submit,
+    thread,
+  };
+}
+
+/** Messages of the fork after the selected reply: the questions and answers. */
+function forkThreadMessages(
+  snapshot: ConversationDetailReport | undefined,
+  replyMessageId: string,
+): QuickQuestionMessage[] {
+  const messages = (snapshot?.events ?? []).flatMap(({ data }) =>
+    data.type === "message" &&
+    (data.role === "user" || data.role === "assistant") &&
+    data.text
+      ? [{ id: data.messageId, role: data.role, text: data.text }]
+      : [],
+  );
+  // The copied history ends with the selected reply. A page that does not
+  // reach back to it holds only new messages.
+  const reply = messages.findIndex((message) => message.id === replyMessageId);
+  return messages.slice(reply + 1);
+}
+
+/** Side panel for one Quick question thread. */
+export function QuickQuestionPanel(props: {
+  conversationId: string;
+  error: Error | null;
+  onClose(): void;
+  onSubmit(text: string, idempotencyKey: string): Promise<void>;
+  pending: boolean;
+  thread: QuickQuestionThread;
+}) {
+  const { thread } = props;
+  const scrollerRef = useRef<HTMLDivElement>(null);
+  const footerRef = useRef<HTMLDivElement>(null);
+  const me = useDashboardCoreData().data?.me.user;
+  const viewerName = me?.name?.trim() || me?.email || "You";
+  const agentName = getDashboardAgentName();
+  const fork = useQuery(
+    conversationDetailQueryOptions(thread.forkId, {
+      fastPollUntilMs: thread.askedAtMs && thread.askedAtMs + 10_000,
+    }),
+  ).data;
+  const saved = forkThreadMessages(fork, thread.messageId);
+  const unsaved = thread.asked
+    .slice(saved.filter((message) => message.role === "user").length)
+    .map((text) => ({ role: "user" as const, text }));
+  const messages = [...saved, ...unsaved];
+  // A failed Turn ends without an answer. The person can then ask again.
+  const thinking =
+    props.pending ||
+    unsaved.length > 0 ||
+    (fork?.status === "active" && messages.at(-1)?.role === "user");
+
+  useEffect(() => {
+    footerRef.current?.querySelector("textarea")?.focus();
+  }, [thread.id]);
+
+  // Keep the newest message in view.
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (scroller) scroller.scrollTop = scroller.scrollHeight;
+  }, [messages.length, thinking]);
+
+  return (
+    <DetailsPanel
+      label="Quick question"
+      sheetTitle="Quick question"
+      onClose={props.onClose}
+      title={
+        <h2 className="m-0 font-sans text-sm font-semibold text-dashboard-text">
+          Quick question
+        </h2>
+      }
+    >
+      <div className="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto]">
+        <div
+          className="grid content-start gap-5 overflow-y-auto px-5 py-4"
+          ref={scrollerRef}
+        >
+          <blockquote className="m-0 border-l-2 border-dashboard-accent pl-3 text-sm whitespace-pre-wrap text-dashboard-text">
+            {thread.quote}
+          </blockquote>
+          {messages.length === 0 && !props.pending ? (
+            <div className="flex flex-wrap gap-2">
+              {STARTER_PROMPTS.map((prompt) => (
+                <Button
+                  className="h-8 rounded-full"
+                  key={prompt}
+                  // Each click is a new ask. The panel shows the error.
+                  onClick={() =>
+                    void props
+                      .onSubmit(prompt, crypto.randomUUID())
+                      .catch(() => {})
+                  }
+                >
+                  {prompt}
+                </Button>
+              ))}
+            </div>
+          ) : (
+            messages.map((message, index) => (
+              <TranscriptMessageShell
+                actor={message.role === "user" ? viewerName : agentName}
+                avatarUrl={message.role === "user" ? me?.avatarUrl : undefined}
+                key={index}
+                role={message.role}
+              >
+                <span
+                  className={
+                    message.role === "user"
+                      ? "text-sm font-semibold text-dashboard-text"
+                      : "text-sm font-semibold text-dashboard-accent-text"
+                  }
+                >
+                  {message.role === "user" ? viewerName : agentName}
+                </span>
+                <DisplayText chat text={message.text} />
+              </TranscriptMessageShell>
+            ))
+          )}
+          {thinking ? (
+            <TranscriptMessageShell actor={agentName} role="assistant">
+              <span className="text-sm font-semibold text-dashboard-accent-text">
+                {agentName}
+              </span>
+              <ShimmerText active className="text-sm text-dashboard-text-muted">
+                Thinking…
+              </ShimmerText>
+            </TranscriptMessageShell>
+          ) : null}
+        </div>
+        <div
+          className="grid gap-1 border-t border-dashboard-border px-3 pt-3 pb-2"
+          ref={footerRef}
+        >
+          <ConversationComposer
+            compact
+            disabled={thinking}
+            draftId={`quick-question:${props.conversationId}`}
+            error={
+              props.error
+                ? (props.error instanceof DashboardApiError &&
+                    props.error.apiError) ||
+                  "Could not ask. Try again."
+                : undefined
+            }
+            key={thread.id}
+            label="Quick question"
+            onSubmit={props.onSubmit}
+            placeholder={
+              messages.length ? "Ask a follow-up…" : "Ask a quick question…"
+            }
+            restoreDraftOnError
+            submitLabel="Ask"
+          />
+          <div className="flex items-center justify-between gap-2 px-1 text-xs text-dashboard-text-muted">
+            <span>Closing discards this question.</span>
+            <KeepAsForkButton
+              disabled={thinking}
+              forkId={thread.forkId}
+              // A new thread needs a new keep request.
+              key={thread.id}
+            />
+          </div>
+        </div>
+      </div>
+    </DetailsPanel>
+  );
+}
+
+/** Keep the hidden fork: it shows in lists and is no longer read-only. */
+function KeepAsForkButton(props: { disabled: boolean; forkId?: string }) {
+  const navigate = useNavigate();
+  const keep = useKeepQuickQuestion();
+  const forkId = props.forkId;
+  return (
+    <Button
+      className="h-7 px-2 text-xs"
+      disabled={!forkId || props.disabled || keep.isPending}
+      onClick={() =>
+        forkId &&
+        keep.mutate(forkId, {
+          onSuccess: () => navigate(conversationPath(forkId)),
+        })
+      }
+      variant="quiet"
+    >
+      <GitFork aria-hidden="true" size={13} />
+      {keep.isError ? "Retry keep" : "Keep as fork"}
+    </Button>
+  );
+}

package/src/client/conversations/TelemetryMetrics.tsx

@@ -350,6 +350,7 @@ export function CostMetric(props: {
   liveModelId?: string;
   modelUsage?: ConversationModelUsage[];
   summary: CostUsageSummary | undefined;
+  tooltipPlacement?: "above" | "below";
 }) {
   // Model history can include calls not yet counted in saved Run totals.
   const summary = summarizeModelCost(props.modelUsage) ?? props.summary;
@@ -369,7 +370,7 @@ export function CostMetric(props: {
   return (
     <MetricValue
       align={props.align}
-      tooltipPlacement="above"
+      tooltipPlacement={props.tooltipPlacement ?? "above"}
       tooltip={
         !card && props.liveModelId
           ? [modelHeading(props.liveModelId, props.liveModelId)]

package/src/client/conversations/TranscriptActivityGroup.tsx

@@ -10,6 +10,7 @@ import {
 } from "../components/ui/tooltip";
 import { formatMs } from "../format";
 import { reviewItemIdFromToolCall } from "../review-desk/reviewItemFormat";
+import { isMemoryCaptureEvent } from "./conversationMemory";
 import type { RenderedTranscriptEntry } from "./transcriptRenderModel";
 import { cn } from "../styles";
 import { useTranscriptSearch } from "./transcriptSearch";
@@ -30,6 +31,10 @@ export function isCollapsibleActivityEntry(
   // Child agent rows stay in the main view, like their result events.
   if (entry.kind === "subagent") return false;
   if (entry.kind === "message") return false;
+  // A Turn's captured memories stay visible, so the reader sees what it saved.
+  if (entry.kind === "structured_event" && isMemoryCaptureEvent(entry.part)) {
+    return false;
+  }
   // A review card stays visible where the agent added the item.
   if (entry.kind === "tool" && reviewItemIdFromToolCall(entry.part)) {
     return false;

package/src/client/conversations/TranscriptEventView.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { Collapsible, CollapsibleContent } from "../components/ui/collapsible";
 import { cn, dashboardDisclosureChevronClass } from "../styles";
 import { DisplayText } from "../display-text/DisplayText";
+import { ReviewItemChangeRow } from "../review-desk/ReviewItemChangeRow";
 import { messageRawText } from "./transcriptRenderModel";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 import { RedactedMarker } from "./TranscriptRedacted";
@@ -82,8 +83,8 @@ export function TranscriptEventView(props: { message: TranscriptViewMessage }) {
     </span>
   );
 
-  return (
-    <div className="min-w-0 py-1">
+  const view = (
+    <>
       {text ? (
         <Collapsible
           className="min-w-0"
@@ -120,6 +121,28 @@ export function TranscriptEventView(props: { message: TranscriptViewMessage }) {
           ) : null}
         </>
       )}
+    </>
+  );
+
+  // A relay of a person change shows as its change row, like the person's
+  // own message, not as an Event line. A message with changes lists its own
+  // Events in `events`, so with none it only records changes.
+  const changes = props.message.reviewItemChanges ?? [];
+  const onlyChanges = changes.length > 0 && events.length === 0;
+  return (
+    <div className="min-w-0 py-1">
+      {onlyChanges ? null : view}
+      {changes.length ? (
+        <div className={cn("grid min-w-0 gap-2", !onlyChanges && "mt-2")}>
+          {changes.map((record, index) => (
+            <ReviewItemChangeRow
+              fallback={onlyChanges && changes.length === 1 ? view : null}
+              key={index}
+              record={record}
+            />
+          ))}
+        </div>
+      ) : null}
     </div>
   );
 }