@sentry/junior-dashboard 0.269.0 → 0.271.0

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

@@ -0,0 +1,159 @@
+import { ArrowRight, ChevronLeft, PanelRight } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { Link } from "react-router";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+
+import { StatusChip } from "../components/StatusChip";
+import { Button } from "../components/ui/button";
+import { ChatLayout } from "../conversations/ChatLayout";
+import { conversationPath } from "../conversations/conversationRoutes";
+import { DisplayText } from "../display-text/DisplayText";
+import { formatRelativeTime } from "../format";
+import { ReviewItemActions } from "./ReviewItemActions";
+import { ReviewItemContext } from "./ReviewItemContext";
+import { reviewItemStatusLabel } from "./reviewItemFormat";
+
+/** Space above the card when the view starts at its top. */
+const CARD_TOP_MARGIN_PX = 24;
+
+const textLinkClass =
+  "inline-flex items-center gap-1.5 font-sans text-sm font-medium text-dashboard-text no-underline hover:underline focus-visible:outline-dashboard-focus";
+
+/**
+ * Show one Review item where a person decides it: the end of the
+ * Conversation that added it, then its question and actions.
+ */
+export function ReviewItemView(props: {
+  backTo: string;
+  detailsOpen: boolean;
+  item: ReviewItemPayload;
+  next?: { title: string; to: string };
+  onDetailsClick(): void;
+  /** The title of the Conversation that added the item, when it is known. */
+  sourceTitle?: string;
+}) {
+  const { item } = props;
+  const open = item.status === "open";
+  const articleRef = useRef<HTMLElement>(null);
+  const cardRef = useRef<HTMLElement>(null);
+  // Open at the decision: the messages above it are context. Show the end
+  // of the page, or the top of the card when the card is taller than the
+  // view. Messages load and grow after the first paint, so keep the place
+  // until the reader scrolls or uses the page.
+  useEffect(() => {
+    const article = articleRef.current;
+    const card = cardRef.current;
+    const scroll = article?.closest<HTMLElement>("[data-chat-scroll]");
+    if (!article || !card || !scroll) return;
+    const observer = new ResizeObserver(() => {
+      const cardTop =
+        card.getBoundingClientRect().top -
+        scroll.getBoundingClientRect().top +
+        scroll.scrollTop;
+      scroll.scrollTop = Math.min(
+        scroll.scrollHeight - scroll.clientHeight,
+        cardTop - CARD_TOP_MARGIN_PX,
+      );
+    });
+    const stop = () => observer.disconnect();
+    const events = ["keydown", "pointerdown", "touchstart", "wheel"] as const;
+    observer.observe(article);
+    for (const name of events) {
+      scroll.addEventListener(name, stop, { passive: true });
+    }
+    return () => {
+      stop();
+      for (const name of events) scroll.removeEventListener(name, stop);
+    };
+  }, []);
+  const source = item.automationId ? "Automation" : props.sourceTitle;
+  // A notice has no question, so its text is what the card shows.
+  const bodyInCard = item.kind === "notice" || !item.request;
+  const conversationLink = (
+    <Link
+      className={textLinkClass}
+      to={conversationPath(item.addedByConversationId, {
+        turnId: item.addedByTurnId,
+      })}
+    >
+      Open conversation
+      <ArrowRight aria-hidden="true" size={14} />
+    </Link>
+  );
+  return (
+    <ChatLayout
+      header={
+        <header className="border-b border-dashboard-border bg-dashboard-bg">
+          <div className="flex min-w-0 items-start justify-between gap-4 px-4 py-3 md:px-7 md:py-5">
+            <div className="grid min-w-0 gap-1.5">
+              <Link
+                className="inline-flex items-center gap-1 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text md:hidden"
+                to={props.backTo}
+              >
+                <ChevronLeft aria-hidden="true" size={14} />
+                Inbox
+              </Link>
+              <h2 className="m-0 min-w-0 break-words font-display text-xl font-medium leading-tight tracking-tight">
+                {item.title}
+              </h2>
+              <p className="m-0 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-dashboard-text-muted">
+                <StatusChip size="compact" tone={open ? "accent" : "neutral"}>
+                  {reviewItemStatusLabel(item)}
+                </StatusChip>
+                <span>
+                  {source ? `${source} · ` : null}
+                  {formatRelativeTime(item.createdAt)}
+                  {item.visibility === "private" ? " · Private" : null}
+                </span>
+              </p>
+            </div>
+            <Button
+              aria-label="Review item details"
+              aria-pressed={props.detailsOpen}
+              className="shrink-0"
+              onClick={props.onDetailsClick}
+            >
+              <PanelRight aria-hidden="true" size={15} strokeWidth={2} />
+              Details
+            </Button>
+          </div>
+        </header>
+      }
+      scrollAriaLabel="Review item"
+      scrollClassName="px-4 pb-6 md:px-7"
+      scroll={
+        <article
+          aria-label={item.title}
+          ref={articleRef}
+          className="mx-auto grid w-full min-w-0 max-w-[52.5rem] gap-5 pt-5 md:pt-7"
+        >
+          <ReviewItemContext
+            fallback={
+              <div className="grid gap-3 font-sans text-sm leading-relaxed">
+                {bodyInCard ? null : <DisplayText text={item.body} />}
+                <div>{conversationLink}</div>
+              </div>
+            }
+            item={item}
+          />
+          <section
+            aria-label={open ? "Answer" : "Outcome"}
+            ref={cardRef}
+            className="grid min-w-0 gap-4 rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-panel p-4 font-sans text-sm md:p-5"
+          >
+            {bodyInCard ? <DisplayText text={item.body} /> : null}
+            <ReviewItemActions item={item} />
+          </section>
+          {props.next ? (
+            <div className="flex justify-end">
+              <Link className={textLinkClass} replace to={props.next.to}>
+                Next: {props.next.title}
+                <ArrowRight aria-hidden="true" size={14} />
+              </Link>
+            </div>
+          ) : null}
+        </article>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,148 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogTitle,
+} from "../components/ui/alert-dialog";
+
+type UnsentAnswers = {
+  conversationId: string;
+  /** Item title for each mounted answer form that has unsent answers. */
+  titles: Map<string, string>;
+};
+
+const UnsentAnswersContext = createContext<UnsentAnswers | undefined>(
+  undefined,
+);
+
+/**
+ * Track the answer forms in one Conversation that have unsent answers. A
+ * message in the Conversation closes some open action items, and the
+ * answers on those forms are then lost. The reply footer reads this to ask
+ * first.
+ */
+export function UnsentAnswersProvider(props: {
+  children: ReactNode;
+  conversationId: string;
+}) {
+  const value = useMemo(
+    () => ({ conversationId: props.conversationId, titles: new Map() }),
+    [props.conversationId],
+  );
+  return (
+    <UnsentAnswersContext.Provider value={value}>
+      {props.children}
+    </UnsentAnswersContext.Provider>
+  );
+}
+
+/**
+ * Report that the answer form of an item has unsent answers. It counts only
+ * when a message from the viewer closes the item. This follows
+ * `closeReviewItemsAnsweredByReply`: an open action item that the agent
+ * added in this Conversation, not assigned to Everyone, that the viewer can
+ * act on. Outside a Conversation it does nothing.
+ */
+export function useReportUnsentAnswer(
+  item: ReviewItemPayload,
+  unsent: boolean,
+) {
+  const context = useContext(UnsentAnswersContext);
+  const key = useId();
+  const closesOnReply =
+    item.kind === "action" &&
+    item.status === "open" &&
+    item.canAct &&
+    !item.assignedToEveryone &&
+    item.addedByConversationId === context?.conversationId;
+  const title = item.title;
+  useEffect(() => {
+    if (!context || !closesOnReply || !unsent) return;
+    context.titles.set(key, title);
+    return () => {
+      context.titles.delete(key);
+    };
+  }, [closesOnReply, context, key, title, unsent]);
+}
+
+/**
+ * Ask the reader before a message drops unsent answers. `confirmSubmit`
+ * returns undefined when nothing would be lost, so the send goes at once.
+ * Otherwise it opens `dialog` and resolves true when the reader sends anyway.
+ */
+export function useConfirmUnsentAnswers() {
+  const context = useContext(UnsentAnswersContext);
+  const [open, setOpen] = useState(false);
+  // Keep the titles through the close animation.
+  const [titles, setTitles] = useState<string[]>([]);
+  const resolveRef = useRef<(send: boolean) => void>(undefined);
+
+  const confirmSubmit = useCallback(() => {
+    // The transcript card and the side panel can show the same item.
+    const unsent = [...new Set(context?.titles.values())];
+    if (unsent.length === 0) return undefined;
+    setTitles(unsent);
+    setOpen(true);
+    return new Promise<boolean>((resolve) => {
+      resolveRef.current = resolve;
+    });
+  }, [context]);
+
+  // Resolve on close, so a dismissal by Escape also keeps the draft.
+  const close = (send: boolean) => {
+    resolveRef.current?.(send);
+    resolveRef.current = undefined;
+    setOpen(false);
+  };
+
+  const dialog = (
+    <AlertDialog
+      onOpenChange={(open) => {
+        if (!open) close(false);
+      }}
+      open={open}
+    >
+      <AlertDialogContent>
+        <AlertDialogTitle>Send without your answers?</AlertDialogTitle>
+        <AlertDialogDescription>
+          {titles.length === 1 ? (
+            <>
+              Your answers to{" "}
+              <strong className="font-medium text-dashboard-text">
+                {titles[0]}
+              </strong>{" "}
+              are not sent. This message closes that review item, and the
+              answers are lost.
+            </>
+          ) : (
+            `Your answers to ${titles.length} review items are not sent. This message closes those items, and the answers are lost.`
+          )}
+        </AlertDialogDescription>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Go back</AlertDialogCancel>
+          <AlertDialogAction onClick={() => close(true)} variant="danger">
+            Send message
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+
+  return { confirmSubmit, dialog };
+}

package/src/client/review-desk/queries.ts

@@ -25,17 +25,19 @@ const COUNT_REFRESH_MS = 60_000;
 
 /**
  * List the open Review items that the viewer can see, one page at a time.
- * A search also finds archived items, with the first page. `items` holds
- * the items of every loaded page, and `query` loads more.
+ * A search or `includeArchived` also finds archived items, with the first
+ * page. `items` holds the items of every loaded page, and `query` loads more.
  */
 export function useReviewItemsData(filters: {
   conversationId?: string;
+  includeArchived?: boolean;
   q?: string;
 }) {
   const params = new URLSearchParams();
   if (filters.conversationId) {
     params.set("conversationId", filters.conversationId);
   }
+  if (filters.includeArchived) params.set("include", "archived");
   if (filters.q) params.set("q", filters.q);
   const search = params.toString();
   const query = useInfiniteQuery({

package/src/client/review-desk/reviewItemFormat.ts

@@ -1,11 +1,27 @@
 import { z } from "zod";
-import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+import type {
+  ConversationReportEvent,
+  ReviewItemPayload,
+} from "@sentry/junior/api/schema";
 
 /** Return the review desk route that selects one item. */
 export function reviewItemPath(id: string): string {
   return `/review?item=${encodeURIComponent(id)}`;
 }
 
+/**
+ * Return the subject URL when it is safe to link. Agents and plugins supply
+ * it, and URL validation also accepts `javascript:` and `data:` URLs.
+ */
+export function reviewItemSubjectHref(url: string): string | undefined {
+  try {
+    const { protocol } = new URL(url);
+    return protocol === "https:" || protocol === "http:" ? url : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 /** Name the state of an item: what it needs while open, or how it closed. */
 export function reviewItemStatusLabel(item: ReviewItemPayload): string {
   if (item.status === "open") {
@@ -59,3 +75,69 @@ export function reviewItemIdFromToolCall(call: {
   if (toolName !== ADD_REVIEW_ITEM_TOOL_NAME) return undefined;
   return addedItemId(call.output);
 }
+
+/** Return the id of the last Review item that a tool call in the events added. */
+export function latestReviewItemId(
+  events: readonly ConversationReportEvent[] | undefined,
+): string | undefined {
+  for (let index = (events?.length ?? 0) - 1; index >= 0; index -= 1) {
+    const data = events![index]!.data;
+    if (data.type !== "tool_calls") continue;
+    for (let call = data.calls.length - 1; call >= 0; call -= 1) {
+      const id = reviewItemIdFromToolCall(data.calls[call]!);
+      if (id) return id;
+    }
+  }
+  return undefined;
+}
+
+/** True when an open item asks a question that the viewer can answer. */
+export function reviewItemWaitsForAnswer(item: ReviewItemPayload): boolean {
+  return (
+    item.status === "open" &&
+    item.kind === "action" &&
+    Boolean(item.request) &&
+    item.canAct
+  );
+}
+
+/** The Review items of the inbox, in the groups and order the list shows. */
+export type InboxGroups = {
+  archived: ReviewItemPayload[];
+  fyi: ReviewItemPayload[];
+  needsYou: ReviewItemPayload[];
+};
+
+/** Inbox order: action items first, then the oldest, then the item id. */
+function inboxOrder(a: ReviewItemPayload, b: ReviewItemPayload): number {
+  if (a.kind !== b.kind) return a.kind === "action" ? -1 : 1;
+  const age = Date.parse(a.createdAt) - Date.parse(b.createdAt);
+  if (age !== 0) return age;
+  return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
+}
+
+/**
+ * Split items into inbox groups. Open items show oldest first, so the item
+ * that waited longest is at the top. Archived items keep the API order.
+ */
+export function inboxGroups(items: readonly ReviewItemPayload[]): InboxGroups {
+  const open = items.filter((item) => item.status === "open");
+  return {
+    archived: items.filter((item) => item.status !== "open"),
+    fyi: open.filter((item) => item.kind === "notice").sort(inboxOrder),
+    needsYou: open.filter((item) => item.kind === "action").sort(inboxOrder),
+  };
+}
+
+/**
+ * The open item that follows `current` in inbox order. `current` can be an
+ * item that closed and left the open groups.
+ */
+export function nextInboxItem(
+  groups: InboxGroups,
+  current: ReviewItemPayload,
+): ReviewItemPayload | undefined {
+  return [...groups.needsYou, ...groups.fyi].find(
+    (item) => inboxOrder(current, item) < 0,
+  );
+}

package/src/client/components/charts/AGENTS.md

@@ -1,15 +0,0 @@
-# System cache reporting
-
-- `cache-input.ts` owns the cache input calculation.
-- `ConversationMetricDay` comes from stored Run metrics, not Sentry spans.
-  Its input, cached input, and cache-creation counters are disjoint. Add
-  them once for total input. Do not include output. Never use this transform
-  for Sentry span totals.
-- Period shares use summed token counts, not the mean of bucket shares.
-- A missing counter is not a zero. When an active bucket has no counter, omit
-  its share and the whole-period share.
-- Do not call these values a cache hit rate or a cache failure rate. Field
-  presence is not call-level coverage.
-- The page time control selects the buckets for the chart and `CacheWrites`.
-  Do not add a local time selector.
-- Add a reporting contract before you add per-call filters or drilldowns.

package/src/client/conversations/TranscriptText.tsx

@@ -1,47 +0,0 @@
-import { memo } from "react";
-import type { ActorIdentity } from "@sentry/junior/api/schema";
-
-import { HighlightedCode } from "../code";
-import { parseMarkdownBlocks, transcriptRoleKind } from "../format";
-import { TranscriptMarkdown } from "./TranscriptMarkdown";
-import { MentionPeopleProvider } from "./transcriptMentions";
-
-/**
- * Render transcript prose as Markdown with explicit fenced code blocks.
- * `mentions` are the people that the API resolved for this text.
- */
-export const TranscriptText = memo(function TranscriptText(props: {
-  mentions: readonly ActorIdentity[];
-  role?: string;
-  text: string;
-}) {
-  const roleKind = transcriptRoleKind(props.role ?? "");
-  const blocks = parseMarkdownBlocks(props.text);
-
-  return (
-    <MentionPeopleProvider mentions={props.mentions}>
-      <div className="grid min-w-0 gap-2">
-        {blocks.map((block, index) => {
-          if (block.language === "markdown" && !block.fenced) {
-            return (
-              <TranscriptMarkdown
-                compact={roleKind === "assistant" || roleKind === "user"}
-                key={index}
-                text={block.code}
-              />
-            );
-          }
-
-          return (
-            <div
-              className="min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5"
-              key={index}
-            >
-              <HighlightedCode code={block.code} language={block.language} />
-            </div>
-          );
-        })}
-      </div>
-    </MentionPeopleProvider>
-  );
-});

package/src/client/conversations/conversationActivityPreview.ts

@@ -1,16 +0,0 @@
-// Slack writes links as `<https://example.com>` or `<https://example.com|label>`.
-const SLACK_LINK_RE = /<((?:https?|mailto):[^\s|<>]+)(?:\|([^<>]*))?>/g;
-
-/** Reduce message Markdown to compact plain text for conversation previews. */
-export function formatConversationActivityPreview(text: string): string {
-  return text
-    .replace(SLACK_LINK_RE, (_, url: string, label?: string) =>
-      label?.trim() ? label.trim() : url,
-    )
-    .replace(/\[([^\]]+)\]\([^\s)]+(?:\s+"[^"]*")?\)/g, "$1")
-    .replace(/(^|\s)([*_~`]{1,3})(?=\S)/g, "$1")
-    .replace(/([*_~`]{1,3})(?=\s|$|[.,!?;:])/g, "")
-    .replace(/^\s*(?:#{1,6}|[-+*]|\d+\.)\s+/gm, "")
-    .replace(/\s+/g, " ")
-    .trim();
-}

package/src/client/conversations/transcriptMentions.tsx

@@ -1,134 +0,0 @@
-import { createContext, useContext, type ReactNode } from "react";
-import { Link } from "react-router";
-import type { ActorIdentity } from "@sentry/junior/api/schema";
-
-import { peoplePath } from "../format";
-import { cn } from "../styles";
-import { TRANSCRIPT_ANCHOR_CLASS } from "./transcriptMarkdownLinks";
-import { HighlightText } from "./transcriptSearch";
-
-type TranscriptMention = {
-  end: number;
-  id: string;
-  label?: string;
-  sigil: "@" | "#";
-  start: number;
-};
-
-// Matches the user and channel tokens that core keeps in message text.
-const SLACK_MENTION_RE = /<([@#])([A-Z0-9]+)(?:\|([^<>]*))?>/g;
-
-const TranscriptMentionPeople = createContext<
-  ReadonlyMap<string, ActorIdentity>
->(new Map());
-
-/**
- * Share the people that the API resolved for one block of display text.
- * Use `TranscriptText` or `MentionText`, which require the API mentions.
- */
-export function MentionPeopleProvider(props: {
-  children: ReactNode;
-  mentions: readonly ActorIdentity[];
-}) {
-  const people = new Map<string, ActorIdentity>();
-  for (const person of props.mentions) {
-    if (person.slackUserId) people.set(person.slackUserId, person);
-  }
-  return (
-    <TranscriptMentionPeople.Provider value={people}>
-      {props.children}
-    </TranscriptMentionPeople.Provider>
-  );
-}
-
-/** Render one line of display text with the people the API resolved for it. */
-export function MentionText(props: {
-  /**
-   * Link people to their page. Set false inside a button, which cannot hold
-   * a link.
-   */
-  links?: boolean;
-  mentions: readonly ActorIdentity[];
-  text: string;
-}) {
-  return (
-    <MentionPeopleProvider mentions={props.mentions}>
-      {renderMentionText(props.text, "mention-text", props.links)}
-    </MentionPeopleProvider>
-  );
-}
-
-/**
- * Render text with Slack `<@U123>` and `<#C123|name>` tokens as readable
- * mentions. It reads people from the nearest `MentionPeopleProvider`.
- */
-export function renderMentionText(
-  text: string,
-  keyBase: string,
-  links = true,
-): ReactNode[] {
-  const nodes: ReactNode[] = [];
-  let cursor = 0;
-  for (const mention of findMentions(text)) {
-    if (mention.start > cursor) {
-      nodes.push(
-        <HighlightText
-          key={`${keyBase}-m-${cursor}`}
-          text={text.slice(cursor, mention.start)}
-        />,
-      );
-    }
-    nodes.push(
-      <MentionView
-        key={`${keyBase}-m-${mention.start}`}
-        links={links}
-        mention={mention}
-      />,
-    );
-    cursor = mention.end;
-  }
-  if (cursor < text.length) {
-    nodes.push(
-      <HighlightText
-        key={`${keyBase}-m-${cursor}`}
-        text={text.slice(cursor)}
-      />,
-    );
-  }
-  return nodes;
-}
-
-function findMentions(text: string): TranscriptMention[] {
-  return [...text.matchAll(SLACK_MENTION_RE)].map((match) => ({
-    end: match.index + match[0].length,
-    id: match[2]!,
-    label: match[3]?.trim() || undefined,
-    sigil: match[1] as "@" | "#",
-    start: match.index,
-  }));
-}
-
-function MentionView(props: { links: boolean; mention: TranscriptMention }) {
-  const people = useContext(TranscriptMentionPeople);
-  const { id, label, sigil } = props.mention;
-  const person = sigil === "@" ? people.get(id) : undefined;
-  const name = person?.fullName ?? person?.slackUserName ?? label ?? id;
-  const text = <HighlightText text={`${sigil}${name.replace(/^[@#]/, "")}`} />;
-  if (props.links && person?.email) {
-    return (
-      <Link
-        // Previews sit in cards that disable pointer events on their text.
-        className={cn("pointer-events-auto", TRANSCRIPT_ANCHOR_CLASS)}
-        title={id}
-        to={peoplePath(person.email)}
-      >
-        {text}
-      </Link>
-    );
-  }
-  return (
-    <span className="font-medium text-dashboard-accent-text" title={id}>
-      {text}
-    </span>
-  );
-}