@sentry/junior-dashboard 0.269.0 → 0.270.0

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

@@ -1,38 +1,79 @@
+import { ArrowRight, Inbox } from "lucide-react";
 import { Link } from "react-router";
 import type { ReviewItemPayload } from "@sentry/junior/api/schema";
 
 import { StatusChip } from "../components/StatusChip";
-import { TranscriptMarkdown } from "../conversations/TranscriptMarkdown";
+import { DisplayText } from "../display-text/DisplayText";
+import { cn } from "../styles";
 import { ReviewItemActions } from "./ReviewItemActions";
 import { useReviewItemData } from "./queries";
-import { reviewItemPath, reviewItemStatusLabel } from "./reviewItemFormat";
+import {
+  assigneeLabel,
+  reviewItemPath,
+  reviewItemStatusLabel,
+} from "./reviewItemFormat";
 
 /**
  * Show one Review item as a card: its title, status, description, and the
- * viewer's actions, with a link to the review desk.
+ * viewer's actions, with a link to the review desk. The card uses the same
+ * frame as transcript object cards, so it reads as one record, not as prose.
  */
 export function ReviewItemCard(props: { item: ReviewItemPayload }) {
   const { item } = props;
+  const open = item.status === "open";
+  const assigned = item.assignees.length > 0 || item.assignedToEveryone;
   return (
     <section
       aria-label={`Review item: ${item.title}`}
-      className="grid gap-3 rounded-lg border border-violet-300/25 bg-violet-300/[0.06] p-3 font-sans text-sm text-dashboard-text"
+      className="my-1 w-full min-w-0 max-w-[37.5rem] overflow-hidden rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-panel font-sans text-sm text-dashboard-text"
     >
-      <header className="flex min-w-0 items-baseline justify-between gap-3">
-        <span className="min-w-0 truncate font-medium">{item.title}</span>
-        <StatusChip
-          className="shrink-0"
-          size="compact"
-          tone={item.status === "open" ? "accent" : "neutral"}
+      <header className="flex items-start gap-3 px-4 pb-3 pt-4 md:px-5">
+        {/* The accent tile marks an item that still needs a person. */}
+        <span
+          aria-hidden="true"
+          className={cn(
+            "grid size-9 shrink-0 place-items-center rounded-lg border",
+            open
+              ? "border-dashboard-accent/30 bg-dashboard-accent/10 text-dashboard-accent"
+              : "border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted",
+          )}
         >
-          {reviewItemStatusLabel(item)}
-        </StatusChip>
+          <Inbox size={18} />
+        </span>
+        <div className="grid min-w-0 flex-1 gap-1">
+          <div className="flex min-w-0 items-center justify-between gap-3">
+            <p className="m-0 text-xs text-dashboard-text-muted">Review item</p>
+            <StatusChip
+              className="shrink-0"
+              size="compact"
+              tone={open ? "accent" : "neutral"}
+            >
+              {reviewItemStatusLabel(item)}
+            </StatusChip>
+          </div>
+          <h3 className="m-0 break-words text-base font-semibold leading-snug">
+            {item.title}
+          </h3>
+        </div>
       </header>
-      <TranscriptMarkdown text={item.body} />
-      <ReviewItemActions item={item} />
-      <Link className="w-fit text-xs" to={reviewItemPath(item.id)}>
-        Open on the review desk
-      </Link>
+      <div className="grid min-w-0 gap-4 px-4 pb-4 md:px-5">
+        <DisplayText text={item.body} />
+        <div className="border-t border-dashboard-border pt-4">
+          <ReviewItemActions item={item} />
+        </div>
+      </div>
+      <footer className="flex flex-wrap items-center justify-between gap-3 border-t border-dashboard-border bg-dashboard-fill-faint px-4 py-3 text-xs md:px-5">
+        <Link
+          className="inline-flex items-center gap-2 font-medium text-dashboard-text no-underline hover:underline focus-visible:outline-dashboard-focus"
+          to={reviewItemPath(item.id)}
+        >
+          Open on the review desk
+          <ArrowRight aria-hidden="true" size={14} />
+        </Link>
+        <span className="min-w-0 truncate text-dashboard-text-muted">
+          {assigned ? `Assigned to ${assigneeLabel(item)}` : "Unassigned"}
+        </span>
+      </footer>
     </section>
   );
 }

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

@@ -4,7 +4,7 @@ import { Link } from "react-router";
 import type { ReviewItemPayload } from "@sentry/junior/api/schema";
 
 import { StatusChip } from "../components/StatusChip";
-import { TranscriptMarkdown } from "../conversations/TranscriptMarkdown";
+import { DisplayText } from "../display-text/DisplayText";
 import { conversationPath } from "../conversations/conversationRoutes";
 import { automationPath, formatRelativeTime } from "../format";
 import { ReviewItemActions } from "./ReviewItemActions";
@@ -54,7 +54,7 @@ export function ReviewItemDetail(props: { item: ReviewItemPayload }) {
           {item.visibility === "private" ? " · Private" : null}
         </p>
       </header>
-      <TranscriptMarkdown text={item.body} />
+      <DisplayText text={item.body} />
       <section
         aria-label={item.status === "open" ? "Actions" : "Outcome"}
         className="border-t border-dashboard-border-subtle pt-5"

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

@@ -1,5 +1,8 @@
 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 {
@@ -59,3 +62,28 @@ 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
+  );
+}

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>
-  );
-}