@sentry/junior-dashboard 0.269.0 → 0.270.0

package/src/client/{conversations/transcriptMarkdownLinks.ts → display-text/links.ts}

@@ -1,11 +1,11 @@
-export const TRANSCRIPT_ANCHOR_CLASS =
+export const ANCHOR_CLASS =
   "font-medium text-dashboard-accent-text underline decoration-dashboard-accent/35 underline-offset-2 transition-colors hover:text-dashboard-text hover:decoration-dashboard-text-solid";
 
 /**
- * Keep a transcript link destination only when it is an absolute `http:`,
+ * Keep a link destination only when it is an absolute `http:`,
  * `https:`, or `mailto:` URL. Return undefined to drop the link.
  */
-export function safeTranscriptHref(href: string): string | undefined {
+export function safeHref(href: string): string | undefined {
   const trimmed = href.trim();
   const hasControlCharacter = [...trimmed].some((character) => {
     const code = character.charCodeAt(0);
@@ -23,3 +23,16 @@ export function safeTranscriptHref(href: string): string | undefined {
     return undefined;
   }
 }
+
+/** Slack writes links as `<https://example.com>` or `<https://example.com|label>`. */
+export const SLACK_LINK_RE = /<((?:https?|mailto):[^\s|<>]+)(?:\|([^<>]*))?>/g;
+
+/**
+ * Rewrite labeled Slack links as Markdown links. Markdown already reads a
+ * bare `<https://example.com>` as a link.
+ */
+export function slackLinksToMarkdown(text: string): string {
+  return text.replace(SLACK_LINK_RE, (match, url: string, label?: string) =>
+    label?.trim() ? `[${label.trim()}](${url})` : match,
+  );
+}

package/src/client/{conversations/TranscriptMarkdown.tsx → display-text/markdown.tsx}

@@ -11,37 +11,53 @@ import {
   TableHeader,
   TableRow,
 } from "../components/ui/table";
-import { cn } from "../styles";
 import {
-  safeTranscriptHref,
-  TRANSCRIPT_ANCHOR_CLASS,
-} from "./transcriptMarkdownLinks";
-import { renderMentionText } from "./transcriptMentions";
-import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
+  HighlightText,
+  useTranscriptSearch,
+} from "../conversations/transcriptSearch";
+import { cn } from "../styles";
+import { ANCHOR_CLASS, safeHref, slackLinksToMarkdown } from "./links";
+import { renderTextTokens } from "./mentions";
 
 /**
- * Render transcript markdown as readable prose.
+ * Render display text Markdown as readable prose.
  *
  * The text is CommonMark plus GFM, with a hard break for each newline. Agent
- * replies also use Slack-style `•` bullets and bold-only section labels, so
- * those render as lists and headings too.
+ * replies also use Slack-style `•` bullets, `<url|label>` links, and
+ * bold-only section labels, so those render as lists, links, and headings
+ * too. Inline mode keeps only inline formatting, so the text fits in one
+ * line or in a button.
  */
-export function TranscriptMarkdown(props: {
-  compact?: boolean;
+export function MarkdownText(props: {
+  chat?: boolean;
+  inline?: boolean;
   text: string;
 }): ReactNode {
   if (!props.text.trim()) return null;
+  const source = normalizeSlackBullets(slackLinksToMarkdown(props.text));
+
+  if (props.inline) {
+    return (
+      <Markdown
+        components={INLINE_COMPONENTS}
+        remarkPlugins={[remarkGfm]}
+        urlTransform={safeHref}
+      >
+        {source}
+      </Markdown>
+    );
+  }
 
   return (
     <div
       className={cn(
         "min-w-0 break-words text-dashboard-text [overflow-wrap:anywhere]",
-        props.compact
+        props.chat
           ? "font-sans text-base leading-relaxed"
           : "font-sans text-sm leading-6 md:leading-7",
       )}
     >
-      <div className={cn("grid min-w-0", props.compact ? "gap-3" : "gap-2")}>
+      <div className={cn("grid min-w-0", props.chat ? "gap-3" : "gap-2")}>
         <Markdown
           components={COMPONENTS}
           remarkPlugins={[
@@ -50,9 +66,9 @@ export function TranscriptMarkdown(props: {
             remarkBareUrlStops,
             remarkSectionLabels,
           ]}
-          urlTransform={safeTranscriptHref}
+          urlTransform={safeHref}
         >
-          {normalizeSlackBullets(props.text)}
+          {source}
         </Markdown>
       </div>
     </div>
@@ -255,13 +271,61 @@ const COMPONENTS: Components = {
   ),
 };
 
-// Text nodes can hold Slack mention tokens and transcript search matches.
+// Text nodes can hold Slack mention tokens, emoji codes, and search matches.
 function renderText(children: ReactNode): ReactNode {
   return Children.map(children, (child, index) =>
-    typeof child === "string" ? renderMentionText(child, `t-${index}`) : child,
+    typeof child === "string" ? renderTextTokens(child, `t-${index}`) : child,
   );
 }
 
+// Inline mode ends each block with a newline. A one-line container shows it
+// as a space, and a `whitespace-pre-wrap` container keeps the line break.
+function InlineBlock(props: { children?: ReactNode }) {
+  return (
+    <>
+      {renderText(props.children)}
+      {"\n"}
+    </>
+  );
+}
+
+function InlineCell(props: { children?: ReactNode }) {
+  return <>{renderText(props.children)} </>;
+}
+
+function InlineContainer(props: { children?: ReactNode }) {
+  return <>{props.children}</>;
+}
+
+const INLINE_COMPONENTS: Components = {
+  // A link cannot sit in a button or in another link, so keep the label.
+  a: ({ children }) => <>{renderText(children)}</>,
+  blockquote: InlineContainer,
+  code: COMPONENTS.code,
+  del: COMPONENTS.del,
+  em: COMPONENTS.em,
+  h1: InlineBlock,
+  h2: InlineBlock,
+  h3: InlineBlock,
+  h4: InlineBlock,
+  h5: InlineBlock,
+  h6: InlineBlock,
+  hr: () => "\n",
+  img: ({ alt }) => alt ?? null,
+  li: InlineBlock,
+  ol: InlineContainer,
+  p: InlineBlock,
+  pre: InlineContainer,
+  strong: COMPONENTS.strong,
+  table: InlineContainer,
+  tbody: InlineContainer,
+  td: InlineCell,
+  th: InlineCell,
+  thead: InlineContainer,
+  tr: InlineBlock,
+  ul: InlineContainer,
+};
+
 function alignClass(align: unknown): string | undefined {
   if (align === "center") return "text-center";
   if (align === "right") return "text-right";
@@ -269,13 +333,13 @@ function alignClass(align: unknown): string | undefined {
 }
 
 function TranscriptAnchor(props: { children: ReactNode; href?: string }) {
-  // `safeTranscriptHref` removes unsafe destinations. Keep their label text.
+  // `safeHref` removes unsafe destinations. Keep their label text.
   if (!props.href) return <>{renderText(props.children)}</>;
 
   const opensNewTab = /^https?:/i.test(props.href);
   return (
     <a
-      className={TRANSCRIPT_ANCHOR_CLASS}
+      className={ANCHOR_CLASS}
       href={props.href}
       rel={opensNewTab ? "noreferrer" : undefined}
       target={opensNewTab ? "_blank" : undefined}

package/src/client/display-text/mentions.tsx

@@ -0,0 +1,148 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { Link } from "react-router";
+import type { ActorIdentity } from "@sentry/junior/api/schema";
+
+import { HighlightText } from "../conversations/transcriptSearch";
+import { peoplePath } from "../format";
+import { cn } from "../styles";
+import { replaceSlackEmoji } from "./emoji";
+import { ANCHOR_CLASS } from "./links";
+
+type Mention = {
+  end: number;
+  id: string;
+  label?: string;
+  sigil: "@" | "#";
+  start: number;
+};
+
+type MentionContext = {
+  links: boolean;
+  people: ReadonlyMap<string, ActorIdentity>;
+};
+
+// Matches the user and channel tokens that core keeps in message text.
+const SLACK_MENTION_RE = /<([@#])([A-Z0-9]+)(?:\|([^<>]*))?>/g;
+
+const MentionPeople = createContext<MentionContext>({
+  links: true,
+  people: new Map(),
+});
+
+/** Share the people that the API resolved for one display text. */
+export function MentionPeopleProvider(props: {
+  children: ReactNode;
+  links: boolean;
+  mentions: readonly ActorIdentity[];
+}) {
+  return (
+    <MentionPeople.Provider
+      value={{ links: props.links, people: mentionPeople(props.mentions) }}
+    >
+      {props.children}
+    </MentionPeople.Provider>
+  );
+}
+
+/**
+ * Render one text run with Slack `<@U123>` and `<#C123|name>` tokens as
+ * readable mentions, Slack `:name:` codes as emoji, and search matches
+ * highlighted. It reads people from the nearest `MentionPeopleProvider`.
+ */
+export function renderTextTokens(text: string, keyBase: string): 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={replaceSlackEmoji(text.slice(cursor, mention.start))}
+        />,
+      );
+    }
+    nodes.push(
+      <MentionView key={`${keyBase}-m-${mention.start}`} mention={mention} />,
+    );
+    cursor = mention.end;
+  }
+  if (cursor < text.length) {
+    nodes.push(
+      <HighlightText
+        key={`${keyBase}-m-${cursor}`}
+        text={replaceSlackEmoji(text.slice(cursor))}
+      />,
+    );
+  }
+  return nodes;
+}
+
+/** Return one text run as a string, with the names and emoji it renders. */
+export function plainTextTokens(
+  text: string,
+  mentions: readonly ActorIdentity[],
+): string {
+  const people = mentionPeople(mentions);
+  let result = "";
+  let cursor = 0;
+  for (const mention of findMentions(text)) {
+    result += replaceSlackEmoji(text.slice(cursor, mention.start));
+    result += mentionLabel(mention, people);
+    cursor = mention.end;
+  }
+  return result + replaceSlackEmoji(text.slice(cursor));
+}
+
+function mentionPeople(
+  mentions: readonly ActorIdentity[],
+): Map<string, ActorIdentity> {
+  const people = new Map<string, ActorIdentity>();
+  for (const person of mentions) {
+    if (person.slackUserId) people.set(person.slackUserId, person);
+  }
+  return people;
+}
+
+function mentionLabel(
+  mention: Mention,
+  people: ReadonlyMap<string, ActorIdentity>,
+): string {
+  const { id, label, sigil } = mention;
+  const person = sigil === "@" ? people.get(id) : undefined;
+  const name = person?.fullName ?? person?.slackUserName ?? label ?? id;
+  return `${sigil}${name.replace(/^[@#]/, "")}`;
+}
+
+function findMentions(text: string): Mention[] {
+  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: { mention: Mention }) {
+  const { links, people } = useContext(MentionPeople);
+  const { id, sigil } = props.mention;
+  const person = sigil === "@" ? people.get(id) : undefined;
+  const text = <HighlightText text={mentionLabel(props.mention, people)} />;
+  if (links && person?.email) {
+    return (
+      <Link
+        // Previews sit in cards that disable pointer events on their text.
+        className={cn("pointer-events-auto", ANCHOR_CLASS)}
+        title={id}
+        to={peoplePath(person.email)}
+      >
+        {text}
+      </Link>
+    );
+  }
+  return (
+    <span className="font-medium text-dashboard-accent-text" title={id}>
+      {text}
+    </span>
+  );
+}

package/src/client/display-text/plainText.ts

@@ -0,0 +1,29 @@
+import type { ActorIdentity } from "@sentry/junior/api/schema";
+
+import { plainTextTokens } from "./mentions";
+import { SLACK_LINK_RE } from "./links";
+
+/**
+ * Return display text as one plain string for places that cannot hold
+ * markup, such as a `title` attribute. It shows the same names and emoji as
+ * `DisplayText`, without the Markdown syntax.
+ */
+export function displayPlainText(
+  text: string,
+  mentions: readonly ActorIdentity[] = [],
+): string {
+  return plainTextTokens(stripMarkdown(text), mentions);
+}
+
+function stripMarkdown(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/pages/automations/AutomationFilters.tsx

@@ -57,13 +57,13 @@ export function AutomationFilters(props: {
       key: "type",
       label: "Type",
       value: filters.type === "all" ? "" : filters.type,
-      text: filters.type === "scheduled" ? "Scheduled" : "Event",
+      valueLabel: filters.type === "scheduled" ? "Scheduled" : "Event",
     },
     {
       key: "creator",
       label: "Creator",
       value: filters.creator,
-      text:
+      valueLabel:
         data?.creators.find((option) => option.value === filters.creator)
           ?.label ?? filters.creator,
     },
@@ -71,7 +71,7 @@ export function AutomationFilters(props: {
       key: "destination",
       label: "Destination",
       value: filters.destination,
-      text:
+      valueLabel:
         data?.destinations.find(
           (option) => option.value === filters.destination,
         )?.label ?? filters.destination,
@@ -80,7 +80,7 @@ export function AutomationFilters(props: {
       key: "state",
       label: "State",
       value: filters.state === "all" ? "" : filters.state,
-      text: stateOptions.find((option) => option.value === filters.state)
+      valueLabel: stateOptions.find((option) => option.value === filters.state)
         ?.label,
     },
   ].filter((filter) => filter.value);
@@ -163,11 +163,11 @@ export function AutomationFilters(props: {
               key={filter.key}
               aria-label={`Remove ${filter.key} filter`}
               className="min-h-9 max-w-full text-xs"
-              title={`${filter.label}: ${filter.text}`}
+              title={`${filter.label}: ${filter.valueLabel}`}
               onClick={() => onChange(filter.key, "")}
             >
               <span className="truncate">
-                {filter.label}: {filter.text}
+                {filter.label}: {filter.valueLabel}
               </span>
               <X aria-hidden="true" className="shrink-0" size={12} />
             </Button>

package/src/client/pages/automations/AutomationOverview.tsx

@@ -15,7 +15,7 @@ import {
   type TimeRangeDays,
 } from "../../components/controls/TimeRangeSelector";
 import { Card } from "../../components/layout/Card";
-import { TranscriptText } from "../../conversations/TranscriptText";
+import { DisplayText } from "../../display-text/DisplayText";
 import { automationPath, formatCostSummary, peoplePath } from "../../format";
 import { pathWithSearch } from "../../searchParams";
 import { dashboardInlineLinkClass } from "../../styles";
@@ -76,7 +76,7 @@ function AutomationSettings(props: { automation: AutomationSummary }) {
     <div className="min-w-0 [&>section:first-child]:border-t-0 [&>section:first-child]:pt-0">
       <AutomationFormSection title="What to do">
         <div className="text-base leading-relaxed [overflow-wrap:anywhere]">
-          <TranscriptText
+          <DisplayText
             mentions={automation.mentions ?? []}
             text={automation.instruction}
           />

package/src/client/pages/automations/AutomationVersionsTab.tsx

@@ -29,6 +29,7 @@ import { InlineError } from "../../components/InlineError";
 import { PageContentSkeleton } from "../../components/PageContentSkeleton";
 import { StatusChip } from "../../components/StatusChip";
 import { Card } from "../../components/layout/Card";
+import { DisplayText } from "../../display-text/DisplayText";
 import { formatRelativeTime } from "../../format";
 import { DashboardApiError, fetchDashboardJson, post } from "../../http";
 import { cn } from "../../styles";
@@ -364,7 +365,10 @@ function fieldValue(
       return definition.title ?? "First line of the instruction";
     case "instruction":
       return (
-        <span className="whitespace-pre-wrap">{definition.instruction}</span>
+        <DisplayText
+          mentions={automation.mentions}
+          text={definition.instruction}
+        />
       );
     case "when":
       if (version.kind === "scheduled") {
@@ -431,7 +435,7 @@ function LineDiff(props: { after: string; before: string }) {
                 {line.kind === "added" ? "Added: " : "Removed: "}
               </span>
             )}
-            {line.text || " "}
+            {line.value || " "}
           </span>
         </div>
       ))}
@@ -439,7 +443,7 @@ function LineDiff(props: { after: string; before: string }) {
   );
 }
 
-type DiffLine = { kind: "added" | "removed" | "same"; text: string };
+type DiffLine = { kind: "added" | "removed" | "same"; value: string };
 
 /** Line diff from the longest common subsequence. Instructions stay short. */
 function diffLines(before: string, after: string): DiffLine[] {
@@ -461,17 +465,17 @@ function diffLines(before: string, after: string): DiffLine[] {
   let j = 0;
   while (i < a.length && j < b.length) {
     if (a[i] === b[j]) {
-      lines.push({ kind: "same", text: a[i]! });
+      lines.push({ kind: "same", value: a[i]! });
       i++;
       j++;
     } else if (lengths[i + 1]![j]! >= lengths[i]![j + 1]!) {
-      lines.push({ kind: "removed", text: a[i++]! });
+      lines.push({ kind: "removed", value: a[i++]! });
     } else {
-      lines.push({ kind: "added", text: b[j++]! });
+      lines.push({ kind: "added", value: b[j++]! });
     }
   }
-  while (i < a.length) lines.push({ kind: "removed", text: a[i++]! });
-  while (j < b.length) lines.push({ kind: "added", text: b[j++]! });
+  while (i < a.length) lines.push({ kind: "removed", value: a[i++]! });
+  while (j < b.length) lines.push({ kind: "added", value: b[j++]! });
   return lines;
 }
 

package/src/client/pages/code/RepositoryTabs.tsx

@@ -16,6 +16,7 @@ import {
 } from "../../components/controls/TimeRangeSelector";
 import { Card } from "../../components/layout/Card";
 import { ConversationHomeList } from "../../conversations/ConversationHomeList";
+import { attentionFirst } from "../../conversations/conversationSections";
 import { buildConversations, getDashboardTimeZone } from "../../format";
 import { useDebouncedValue } from "../../debouncedValue";
 import { useWaitingConversationIds } from "../../review-desk/queries";
@@ -52,7 +53,11 @@ export function RepositoryConversationsTab(props: { repositoryId: string }) {
         </EmptyTelemetry>
       ) : (
         <ConversationHomeList
-          conversations={pageItems(conversations, page, PAGE_SIZE)}
+          conversations={pageItems(
+            attentionFirst(conversations, waitingConversationIds),
+            page,
+            PAGE_SIZE,
+          )}
           emptyLabel={
             search
               ? "No conversations match this search."

package/src/client/pages/memory/MemoryDetails.tsx

@@ -18,16 +18,12 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "../../components/ui/tooltip";
-import { TranscriptText } from "../../conversations/TranscriptText";
+import { DisplayText } from "../../display-text/DisplayText";
 import type {
   PluginUserPageRecord,
   PluginUserPageRecordAction,
 } from "../user/pluginUserPageData";
 
-// The memory plugin API does not resolve mentions yet, so memory text shows
-// Slack ids instead of names.
-const NO_MEMORY_MENTIONS: readonly [] = [];
-
 // The heading, origin, and scope rows already show these values.
 const SUMMARIZED_METADATA = new Set([
   "Learned",
@@ -81,15 +77,11 @@ export function MemoryDetails(props: {
           {record ? (
             <>
               <div className="grid gap-3 text-sm leading-relaxed">
-                <TranscriptText
-                  mentions={NO_MEMORY_MENTIONS}
-                  text={record.title}
-                />
+                {/* The memory plugin API does not resolve mentions yet, so
+                    memory text shows Slack ids instead of names. */}
+                <DisplayText text={record.title} />
                 {record.description ? (
-                  <TranscriptText
-                    mentions={NO_MEMORY_MENTIONS}
-                    text={record.description}
-                  />
+                  <DisplayText text={record.description} />
                 ) : null}
               </div>
               <MemoryFacts record={record} />

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

@@ -49,7 +49,6 @@ export function ConversationReviewBar(props: { conversationId: string }) {
           label="Review items"
           onClose={() => setOpen(false)}
           openKey={props.conversationId}
-          width="narrow"
         >
           <div className="grid gap-3">
             {items.map((item) => (

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

@@ -8,10 +8,11 @@ import {
 import { InlineError } from "../components/InlineError";
 import { UserInputForm } from "../components/UserInputForm";
 import { Button } from "../components/ui/button";
-import { TranscriptMarkdown } from "../conversations/TranscriptMarkdown";
+import { DisplayText } from "../display-text/DisplayText";
 import { formatRelativeTime } from "../format";
 import { DashboardApiError } from "../http";
 import { useReviewItemAction } from "./queries";
+import { useReportUnsentAnswer } from "./UnsentAnswers";
 
 function personLabel(person: { displayName?: string; email: string }) {
   return person.displayName ?? person.email;
@@ -79,6 +80,8 @@ export function ReviewItemActions(props: { item: ReviewItemPayload }) {
   const { item } = props;
   const action = useReviewItemAction();
   const [error, setError] = useState<string>();
+  const [unsent, setUnsent] = useState(false);
+  useReportUnsentAnswer(item, unsent);
 
   if (item.status !== "open") return <ClosedSummary item={item} />;
   if (!item.canAct) {
@@ -126,9 +129,10 @@ export function ReviewItemActions(props: { item: ReviewItemPayload }) {
       {item.kind === "action" && item.request ? (
         <div className="text-sm">
           <div className="font-medium">
-            <TranscriptMarkdown text={item.request.question} />
+            <DisplayText text={item.request.question} />
           </div>
           <UserInputForm
+            onUnsentChange={setUnsent}
             onSubmit={(answer) =>
               run({
                 action: "submit",