@sentry/junior-dashboard 0.269.0 → 0.270.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/junior-dashboard",
-  "version": "0.269.0",
+  "version": "0.270.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -39,10 +39,10 @@
     "remark-gfm": "^4.0.1",
     "shiki": "4.1.0",
     "zod": "^4.5.4",
-    "@sentry/junior-plugin-api": "0.269.0"
+    "@sentry/junior-plugin-api": "0.270.0"
   },
   "peerDependencies": {
-    "@sentry/junior": "0.269.0"
+    "@sentry/junior": "0.270.0"
   },
   "devDependencies": {
     "@oxlint/plugins": "1.79.0",
@@ -52,6 +52,7 @@
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "@vitest/coverage-v8": "4.1.12",
+    "emojibase-data": "^18.0.0",
     "eslint": "^10.8.0",
     "nitro": "3.0.260522-beta",
     "oxlint": "^1.79.0",
@@ -62,7 +63,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vitest": "^4.1.12",
-    "@sentry/junior": "0.269.0"
+    "@sentry/junior": "0.270.0"
   },
   "scripts": {
     "build": "pnpm --filter @sentry/junior-plugin-api build && pnpm --filter @sentry/junior build && pnpm run build:client && pnpm run build:css && pnpm run build:server",

package/src/client/App.tsx

@@ -124,10 +124,20 @@ export function DashboardShell() {
   }, [location.pathname]);
 
   async function signOut() {
-    await fetch(`${data?.config.authPath ?? "/api/auth"}/sign-out`, {
-      credentials: "same-origin",
-      method: "POST",
-    });
+    // Better Auth rejects a request body without a JSON content type. On
+    // Vercel, a bodiless POST still arrives with an empty body.
+    const response = await fetch(
+      `${data?.config.authPath ?? "/api/auth"}/sign-out`,
+      {
+        body: "{}",
+        credentials: "same-origin",
+        headers: { "content-type": "application/json" },
+        method: "POST",
+      },
+    );
+    if (!response.ok) {
+      throw new Error(`Sign-out returned ${response.status}`);
+    }
     window.location.assign(data?.config.basePath ?? "/");
   }
 

package/src/client/components/AutomationCard.tsx

@@ -4,6 +4,7 @@ import { StatusChip } from "./StatusChip";
 import { ArrowUpRight, CircleAlert, Clock3 } from "lucide-react";
 import { Link } from "react-router";
 import type { AutomationCard as AutomationCardValue } from "@sentry/junior/api/schema";
+import { DisplayText } from "../display-text/DisplayText";
 import { automationPath } from "../format";
 
 /** Show a saved automation inside a reply, with a preview and a detail link. */
@@ -43,7 +44,7 @@ export function AutomationCard({
           </StatusChip>
         )}
         <p className="m-0 line-clamp-3 break-words text-sm leading-relaxed text-dashboard-text-muted">
-          {card.instruction}
+          <DisplayText inline text={card.instruction} />
         </p>
         <div className="flex items-start gap-2 text-xs leading-relaxed text-dashboard-text">
           <Clock3

package/src/client/components/UserInputForm.tsx

@@ -1,8 +1,17 @@
-import { useId, useRef, useState, type FormEvent, type ReactNode } from "react";
+import { ArrowRight } from "lucide-react";
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type FormEvent,
+  type ReactNode,
+} from "react";
 import {
   buttonUserInputField,
   isEmptyUserInputAnswer,
   normalizeUserInputAnswer,
+  USER_INPUT_NOTE,
   type UserInputAnswer,
   type UserInputField,
   type UserInputRequest,
@@ -20,6 +29,12 @@ import { Textarea } from "./ui/textarea";
 const optionClass =
   "flex cursor-pointer items-start gap-3 rounded-md border border-dashboard-border bg-dashboard-surface-panel px-3 py-2.5 text-sm transition-colors hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover has-[[data-checked]]:border-dashboard-accent/60 has-[[data-checked]]:bg-dashboard-accent/10 has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-60";
 
+// A described choice is one button row, so its description stays beside its
+// label and one click is still the answer. The picked row keeps the accent
+// while the answer sends.
+const choiceButtonClass =
+  "group flex w-full cursor-pointer items-center gap-3 rounded-md border border-dashboard-border bg-dashboard-surface-raised px-3 py-2.5 text-left font-sans text-sm transition-colors hover:border-dashboard-border-emphasis hover:bg-dashboard-surface-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus disabled:cursor-not-allowed disabled:opacity-60 data-[picked]:border-dashboard-accent/60 data-[picked]:bg-dashboard-accent/10 data-[picked]:opacity-100";
+
 function OptionText(props: { description?: string; label: string }) {
   return (
     <span className="grid min-w-0 gap-0.5 break-words">
@@ -41,9 +56,13 @@ function ChoiceField(props: {
 }) {
   const id = useId();
   const { field } = props;
+  // Say how many choices count, so a reader knows when a field is done.
   const legend = (
     <legend className="mb-2 p-0 text-sm font-semibold text-dashboard-text">
       {field.label}
+      <span className="ml-2 text-xs font-normal text-dashboard-text-muted">
+        {field.kind === "choice" ? "Pick one" : "Pick any"}
+      </span>
     </legend>
   );
   const description = field.description ? (
@@ -140,18 +159,23 @@ function TextField(props: {
 /**
  * Render the answer controls of an action item request. A request with
  * one short choice field shows one button per choice, and a click is the
- * answer. Other requests show a form that the reader submits once. A failed
- * `onSubmit` lets the reader try again. `secondaryActions`, such as Dismiss,
- * sit in the same action row, after the answer controls.
+ * answer. Choices with descriptions stack as rows, so each description stays
+ * with its choice. Other requests show a form that the reader submits once.
+ * A failed `onSubmit` lets the reader try again. `secondaryActions`, such as
+ * Dismiss, sit after the answer controls. `onUnsentChange` reports whether
+ * the form has picks or text that the reader has not sent.
  */
 export function UserInputForm(props: {
   onSubmit(answer: UserInputAnswer): Promise<void>;
+  onUnsentChange?(unsent: boolean): void;
   request: UserInputRequest;
   requestId: string;
   secondaryActions?: ReactNode;
 }) {
   const [sending, setSending] = useState(false);
+  const [picked, setPicked] = useState<string>();
   const [failed, setFailed] = useState(false);
+  const choicesId = useId();
   const [values, setValues] = useState<Record<string, string[]>>({});
   const [other, setOther] = useState("");
   const buttonField = buttonUserInputField(props.request);
@@ -170,20 +194,35 @@ export function UserInputForm(props: {
     } catch {
       sendLock.current = false;
       setSending(false);
+      setPicked(undefined);
       setFailed(true);
     }
   }
 
+  /** Send one button choice as the whole answer. */
+  function pick(fieldId: string, label: string) {
+    setPicked(label);
+    void send({ requestId: props.requestId, values: { [fieldId]: [label] } });
+  }
+
   const answer: UserInputAnswer = {
     other,
     requestId: props.requestId,
     values,
   };
+  const normalized = normalizeUserInputAnswer(props.request, answer);
+  const answeredCount = Object.keys(normalized.values).length;
+  const fieldCount = props.request.fields.length;
+  // A button answer sends on click, so only the form can hold unsent input.
+  const unsent =
+    !buttonField && !sending && !isEmptyUserInputAnswer(normalized);
+  const onUnsentChange = props.onUnsentChange;
+  useEffect(() => {
+    onUnsentChange?.(unsent);
+  }, [onUnsentChange, unsent]);
   function submit(event: FormEvent) {
     event.preventDefault();
-    if (
-      !isEmptyUserInputAnswer(normalizeUserInputAnswer(props.request, answer))
-    ) {
+    if (!isEmptyUserInputAnswer(normalized)) {
       void send(answer);
     }
   }
@@ -196,41 +235,67 @@ export function UserInputForm(props: {
 
   return (
     <>
-      {buttonField ? (
+      {buttonField?.options.some((option) => option.description) ? (
         <>
-          <div className="mt-3 flex flex-wrap items-center gap-2">
-            {buttonField.options.map((option) => (
-              <Button
+          <div
+            aria-label={buttonField.label}
+            className="mt-3 grid gap-2"
+            role="group"
+          >
+            {buttonField.options.map((option, index) => (
+              <button
+                aria-describedby={
+                  option.description ? `${choicesId}-${index}` : undefined
+                }
+                aria-labelledby={`${choicesId}-${index}-label`}
+                className={choiceButtonClass}
+                data-picked={picked === option.label ? "" : undefined}
                 disabled={sending}
                 key={option.label}
-                onClick={() =>
-                  void send({
-                    requestId: props.requestId,
-                    values: { [buttonField.id]: [option.label] },
-                  })
-                }
-                title={option.description}
+                onClick={() => pick(buttonField.id, option.label)}
+                type="button"
               >
-                {option.label}
-              </Button>
+                <span className="grid min-w-0 flex-1 gap-0.5 break-words">
+                  <span
+                    className="font-medium text-dashboard-text"
+                    id={`${choicesId}-${index}-label`}
+                  >
+                    {option.label}
+                  </span>
+                  {option.description ? (
+                    <span
+                      className="text-xs text-dashboard-text-muted"
+                      id={`${choicesId}-${index}`}
+                    >
+                      {option.description}
+                    </span>
+                  ) : null}
+                </span>
+                <ArrowRight
+                  aria-hidden="true"
+                  className="shrink-0 text-dashboard-text-faint opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 group-data-[picked]:opacity-100"
+                  size={16}
+                />
+              </button>
             ))}
-            {secondary}
           </div>
-          {buttonField.options.some((option) => option.description) ? (
-            <ul className="mb-0 mt-2 list-none p-0 text-xs text-dashboard-text-muted">
-              {buttonField.options
-                .filter((option) => option.description)
-                .map((option) => (
-                  <li key={option.label}>
-                    <span className="font-medium text-dashboard-text">
-                      {option.label}
-                    </span>
-                    : {option.description}
-                  </li>
-                ))}
-            </ul>
+          {secondary ? (
+            <div className="mt-3 flex flex-wrap items-center">{secondary}</div>
           ) : null}
         </>
+      ) : buttonField ? (
+        <div className="mt-3 flex flex-wrap items-center gap-2">
+          {buttonField.options.map((option) => (
+            <Button
+              disabled={sending}
+              key={option.label}
+              onClick={() => pick(buttonField.id, option.label)}
+            >
+              {option.label}
+            </Button>
+          ))}
+          {secondary}
+        </div>
       ) : (
         <form className="mt-4 grid gap-5" onSubmit={submit}>
           {props.request.fields.map((field) =>
@@ -259,9 +324,9 @@ export function UserInputForm(props: {
           )}
           <TextField
             className="min-h-16"
-            description="Optional. Anything else, or an answer that is not listed."
+            description={USER_INPUT_NOTE.description}
             disabled={sending}
-            label="Other"
+            label={USER_INPUT_NOTE.label}
             onChange={setOther}
             value={other}
           />
@@ -269,6 +334,14 @@ export function UserInputForm(props: {
             <Button disabled={sending} type="submit" variant="primary">
               Send
             </Button>
+            {fieldCount > 1 ? (
+              <span
+                aria-live="polite"
+                className="text-xs text-dashboard-text-muted"
+              >
+                {answeredCount} of {fieldCount} answered
+              </span>
+            ) : null}
             {secondary}
           </div>
         </form>

package/src/client/conversations/AGENTS.md

@@ -16,10 +16,6 @@ Keep transcript layout in these feature components. Use the UI kit in
 
 ## Rules
 
-- Display text keeps Slack tokens such as `<@U123>`. The API returns
-  `mentions` beside the owning object. Render with `TranscriptText` or
-  `MentionText`. Do not resolve names in the dashboard, and do not rewrite
-  tokens into links on the server.
 - The Automation trigger card shows the credentials from the dispatch record
   of the run, not the current setting. Keep the run input collapsed, because
   it is not from a person.

package/src/client/conversations/ConversationBrief.tsx

@@ -1,6 +1,9 @@
 import { ChevronRight } from "lucide-react";
 import type { ReactNode } from "react";
-import type { ConversationDetailReport } from "@sentry/junior/api/schema";
+import type {
+  ActorIdentity,
+  ConversationDetailReport,
+} from "@sentry/junior/api/schema";
 
 import { Detail, DetailList } from "../components/DetailList";
 import { StatusChip, type StatusChipTone } from "../components/StatusChip";
@@ -11,7 +14,7 @@ import {
 } from "../components/ui/collapsible";
 import { formatTime } from "../format";
 import { cn, dashboardDisclosureChevronClass } from "../styles";
-import { MentionPeopleProvider, renderMentionText } from "./transcriptMentions";
+import { DisplayText } from "../display-text/DisplayText";
 
 type ConversationBriefReport = NonNullable<ConversationDetailReport["brief"]>;
 
@@ -31,31 +34,22 @@ const outcomeTones: Record<BriefContent["outcome"]["status"], StatusChipTone> =
 export function ConversationBrief(props: {
   brief: ConversationBriefReport;
   variant?: "summary" | "full";
-}) {
-  return (
-    <MentionPeopleProvider mentions={props.brief.mentions ?? []}>
-      <BriefContentView brief={props.brief} variant={props.variant} />
-    </MentionPeopleProvider>
-  );
-}
-
-function BriefContentView(props: {
-  brief: ConversationBriefReport;
-  variant?: "summary" | "full";
 }) {
   const { content } = props.brief;
+  const mentions = props.brief.mentions;
   if (props.variant === "summary") {
     return (
       <div className="grid min-w-0 gap-4">
-        <p className="m-0 text-sm leading-relaxed text-dashboard-text">
-          <BriefText text={content.summary} />
-        </p>
+        <DisplayText mentions={mentions} text={content.summary} />
         {content.openDecisions.length > 0 ? (
           <div className="grid gap-2">
             <h4 className="m-0 text-sm font-medium text-dashboard-text">
               Open decisions
             </h4>
-            <BriefOpenDecisions decisions={content.openDecisions} />
+            <BriefOpenDecisions
+              decisions={content.openDecisions}
+              mentions={mentions}
+            />
           </div>
         ) : null}
       </div>
@@ -75,16 +69,14 @@ function BriefContentView(props: {
           })}
         </span>
       </div>
-      <p className="m-0 text-sm leading-relaxed text-dashboard-text">
-        <BriefText text={content.summary} />
-      </p>
+      <DisplayText mentions={mentions} text={content.summary} />
       <BriefSection title="Intent & outcome">
         <DetailList>
           <Detail label="Intent">
-            <BriefText text={content.intent} />
+            <DisplayText mentions={mentions} text={content.intent} />
           </Detail>
           <Detail label="Outcome">
-            <BriefText text={content.outcome.text} />
+            <DisplayText mentions={mentions} text={content.outcome.text} />
           </Detail>
         </DetailList>
       </BriefSection>
@@ -93,12 +85,18 @@ function BriefContentView(props: {
           <DetailList>
             {content.decisions.length ? (
               <Detail label="Decisions">
-                <BriefDecisions decisions={content.decisions} />
+                <BriefDecisions
+                  decisions={content.decisions}
+                  mentions={mentions}
+                />
               </Detail>
             ) : null}
             {content.openDecisions.length ? (
               <Detail label="Open decisions">
-                <BriefOpenDecisions decisions={content.openDecisions} />
+                <BriefOpenDecisions
+                  decisions={content.openDecisions}
+                  mentions={mentions}
+                />
               </Detail>
             ) : null}
           </DetailList>
@@ -111,7 +109,7 @@ function BriefContentView(props: {
           <DetailList>
             {content.facts.length ? (
               <Detail label="Facts">
-                <BriefList items={content.facts} />
+                <BriefList items={content.facts} mentions={mentions} />
               </Detail>
             ) : null}
             {content.links.length ? (
@@ -184,7 +182,10 @@ function BriefSection(props: { children: ReactNode; title: string }) {
   );
 }
 
-function BriefDecisions(props: { decisions: BriefContent["decisions"] }) {
+function BriefDecisions(props: {
+  decisions: BriefContent["decisions"];
+  mentions?: readonly ActorIdentity[];
+}) {
   return (
     <ul className="m-0 grid list-none gap-2.5 p-0">
       {props.decisions.map((decision, index) => (
@@ -197,12 +198,21 @@ function BriefDecisions(props: { decisions: BriefContent["decisions"] }) {
               {decision.kind}
             </StatusChip>
             <span className="min-w-0">
-              <BriefText text={decision.text} />
+              <DisplayText
+                inline
+                mentions={props.mentions}
+                text={decision.text}
+              />
             </span>
           </div>
           {decision.by ? (
             <div className="mt-0.5 text-xs text-dashboard-text-muted">
-              by · <BriefText text={decision.by} />
+              by ·{" "}
+              <DisplayText
+                inline
+                mentions={props.mentions}
+                text={decision.by}
+              />
             </div>
           ) : null}
         </li>
@@ -213,17 +223,27 @@ function BriefDecisions(props: { decisions: BriefContent["decisions"] }) {
 
 function BriefOpenDecisions(props: {
   decisions: BriefContent["openDecisions"];
+  mentions?: readonly ActorIdentity[];
 }) {
   return (
     <ul className="m-0 grid list-none gap-2 p-0">
       {props.decisions.map((decision, index) => (
         <li key={`${decision.text}:${index}`}>
           <div>
-            <BriefText text={decision.text} />
+            <DisplayText
+              inline
+              mentions={props.mentions}
+              text={decision.text}
+            />
           </div>
           {decision.owner ? (
             <div className="mt-1 text-xs text-dashboard-text-muted">
-              Owner: <BriefText text={decision.owner} />
+              Owner:{" "}
+              <DisplayText
+                inline
+                mentions={props.mentions}
+                text={decision.owner}
+              />
             </div>
           ) : null}
         </li>
@@ -232,22 +252,21 @@ function BriefOpenDecisions(props: {
   );
 }
 
-function BriefList(props: { items: string[] }) {
+function BriefList(props: {
+  items: string[];
+  mentions?: readonly ActorIdentity[];
+}) {
   return (
     <ul className="my-0 grid gap-1.5 pl-4">
       {props.items.map((item, index) => (
         <li key={`${item}:${index}`}>
-          <BriefText text={item} />
+          <DisplayText inline mentions={props.mentions} text={item} />
         </li>
       ))}
     </ul>
   );
 }
 
-function BriefText(props: { text: string }) {
-  return <>{renderMentionText(props.text, "brief")}</>;
-}
-
 function displayLabel(value: string): string {
   return value.replaceAll("_", " ");
 }

package/src/client/conversations/ConversationComposer.tsx

@@ -90,6 +90,11 @@ type ConversationComposerProps = {
   /** Lets the parent put a message taken out of the queue back in the draft. */
   ref?: Ref<ConversationComposerHandle>;
   submitLabel: string;
+  /**
+   * Return a promise to ask the reader before a send. The draft stays when it
+   * resolves false. Return undefined to send at once.
+   */
+  confirmSubmit?: () => Promise<boolean> | undefined;
   onFocus?: () => void;
   onSubmit(
     message: string,
@@ -140,6 +145,8 @@ export const ConversationComposer = memo(function ConversationComposer(
   });
   // Blocks same-tick double fire. For create restore, also blocks until settle.
   const submittingRef = useRef(false);
+  // Blocks a second send while the reader answers `confirmSubmit`.
+  const confirmingRef = useRef(false);
   const stoppingRef = useRef(false);
   // Monotonic token so a late failed create never restores over a newer submit.
   const submitTokenRef = useRef(0);
@@ -255,18 +262,30 @@ export const ConversationComposer = memo(function ConversationComposer(
     syncTextareaHeight();
   };
 
+  const canSubmit = () =>
+    Boolean(draftRef.current.text.trim() || imagesRef.current.length) &&
+    online &&
+    !submittingRef.current &&
+    !confirmingRef.current &&
+    !sendLocked &&
+    !readingImagesRef.current;
+
   const submit = async (event?: FormEvent) => {
     event?.preventDefault();
+    if (!canSubmit()) return;
+    const confirmation = props.confirmSubmit?.();
+    if (confirmation) {
+      confirmingRef.current = true;
+      let confirmed: boolean;
+      try {
+        confirmed = await confirmation;
+      } finally {
+        confirmingRef.current = false;
+      }
+      if (!confirmed) return;
+    }
     const text = draftRef.current.text.trim();
     const submittedImages = imagesRef.current;
-    if (
-      (!text && !submittedImages.length) ||
-      !online ||
-      submittingRef.current ||
-      sendLocked ||
-      readingImagesRef.current
-    )
-      return;
 
     const attempt = conversationAttemptForSubmit(
       attemptRef.current,

package/src/client/conversations/ConversationEventLog.tsx

@@ -110,6 +110,7 @@ export const ConversationEventLog = memo(function ConversationEventLog(props: {
             <li
               className="scroll-mt-32 scroll-mb-2"
               data-event-seq={event.seq}
+              data-scroll-anchor={`event:${event.seq}`}
               key={event.seq}
             >
               <button