@sentry/junior-dashboard 0.269.0 → 0.271.0

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,10 +29,37 @@ 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";
 
-function OptionText(props: { description?: string; label: string }) {
+// 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";
+
+// Marks the choice that Junior recommends, next to its label.
+function SuggestedLabel(props: { className?: string }) {
+  return (
+    <span
+      className={cn(
+        "ml-2 text-xs font-normal text-dashboard-accent-text/80",
+        props.className,
+      )}
+    >
+      Suggested
+    </span>
+  );
+}
+
+function OptionText(props: {
+  description?: string;
+  label: string;
+  recommended?: boolean;
+}) {
   return (
     <span className="grid min-w-0 gap-0.5 break-words">
-      <span className="font-medium text-dashboard-text">{props.label}</span>
+      <span className="font-medium text-dashboard-text">
+        {props.label}
+        {props.recommended ? <SuggestedLabel /> : null}
+      </span>
       {props.description ? (
         <span className="text-xs text-dashboard-text-muted">
           {props.description}
@@ -41,9 +77,15 @@ function ChoiceField(props: {
 }) {
   const id = useId();
   const { field } = props;
+  // Radios already say that one choice counts. Say it for checkboxes only.
   const legend = (
     <legend className="mb-2 p-0 text-sm font-semibold text-dashboard-text">
       {field.label}
+      {field.kind === "multi_choice" ? (
+        <span className="ml-2 text-xs font-normal text-dashboard-text-muted">
+          Pick any
+        </span>
+      ) : null}
     </legend>
   );
   const description = field.description ? (
@@ -71,6 +113,7 @@ function ChoiceField(props: {
               <OptionText
                 description={option.description}
                 label={option.label}
+                recommended={option.recommended}
               />
             </label>
           ))}
@@ -100,7 +143,11 @@ function ChoiceField(props: {
                 )
               }
             />
-            <OptionText description={option.description} label={option.label} />
+            <OptionText
+              description={option.description}
+              label={option.label}
+              recommended={option.recommended}
+            />
           </label>
         ))}
       </div>
@@ -140,18 +187,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 +222,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 +263,70 @@ 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}
+                    {option.recommended ? <SuggestedLabel /> : null}
+                  </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}
+              {/* The button gap already spaces the label. */}
+              {option.recommended ? <SuggestedLabel className="ml-0" /> : null}
+            </Button>
+          ))}
+          {secondary}
+        </div>
       ) : (
         <form className="mt-4 grid gap-5" onSubmit={submit}>
           {props.request.fields.map((field) =>
@@ -259,9 +355,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 +365,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/components/layout/PageHeader.tsx

@@ -5,17 +5,20 @@ import {
   type TimeRangeDays,
 } from "../controls/TimeRangeSelector";
 import { useDocumentTitle } from "../../documentTitle";
+import { cn } from "../../styles";
 
 /**
  * Render a spacious analytics page heading with optional controls.
  *
  * Also names the browser tab after the page. Pass `documentTitle` when the tab
- * needs more context than the visible heading.
+ * needs more context than the visible heading. Pass `navigation` to put page
+ * links under the heading, with their underline on the header border.
  */
 export function PageHeader(props: {
   actions?: ReactNode;
-  description: ReactNode;
+  description?: ReactNode;
   documentTitle?: string;
+  navigation?: ReactNode;
   onRangeChange?(value: TimeRangeDays): void;
   range?: TimeRangeDays;
   rangeOptions?: TimeRangeDays[];
@@ -36,16 +39,28 @@ export function PageHeader(props: {
   const actions = props.actions ?? rangeActions;
 
   return (
-    <header className="flex min-w-0 items-center justify-between gap-6 border-b border-dashboard-border-subtle pb-4 sm:pb-6 max-md:flex-col max-md:items-stretch">
-      <div className="min-w-0">
-        <h2 className="m-0 font-display text-3xl font-light leading-none tracking-[-0.03em] text-dashboard-text sm:text-4xl">
-          {props.title}
-        </h2>
-        <div className="mt-2 max-w-2xl font-sans text-xs leading-relaxed text-dashboard-text-muted sm:text-sm">
-          {props.description}
+    <header
+      className={cn(
+        "min-w-0 border-b border-dashboard-border-subtle",
+        !props.navigation && "pb-4 sm:pb-6",
+      )}
+    >
+      <div className="flex min-w-0 items-center justify-between gap-6 max-md:flex-col max-md:items-stretch">
+        <div className="min-w-0">
+          <h2 className="m-0 font-display text-3xl font-light leading-none tracking-[-0.03em] text-dashboard-text sm:text-4xl">
+            {props.title}
+          </h2>
+          {props.description ? (
+            <div className="mt-2 max-w-2xl font-sans text-xs leading-relaxed text-dashboard-text-muted sm:text-sm">
+              {props.description}
+            </div>
+          ) : null}
         </div>
+        {actions ? <div className="shrink-0">{actions}</div> : null}
       </div>
-      {actions ? <div className="shrink-0">{actions}</div> : null}
+      {props.navigation ? (
+        <div className="mt-4 sm:mt-6">{props.navigation}</div>
+      ) : null}
     </header>
   );
 }

package/src/client/conversations/AGENTS.md

@@ -1,42 +1,17 @@
 # Transcript components
 
-Keep transcript layout in these feature components. Use the UI kit in
-`../components/` for shared controls and overlays.
-
-## Ownership
-
-- `TranscriptRows` and `TranscriptRow` own row gaps, padding, and indent.
-  Keep horizontal padding inside each row, so focus outlines are not clipped.
-- `TranscriptMessageShell` owns the avatar column and message gutter.
-- `TranscriptSummaryTrigger` owns disclosure padding and focus. Do not repeat
-  negative margins at call sites.
-- `ChatLayout` keeps the Conversation header outside the transcript scroll.
-- `eventLogRows` and `filterEventLogRows` own row text and search match. The
-  page step controls use them too.
-
-## 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.
-- Each `Transcript` sets the panel for its own rows. A nested transcript never
-  uses the panel of the page behind it.
-- The page has one right panel. Conversation details, event details, and turn
-  context never show at the same time. Closing a panel returns focus to the
-  control that opened it.
+- Keep horizontal padding inside each transcript row, so focus outlines are
+  not clipped. Do not add negative margins at `TranscriptSummaryTrigger` call
+  sites.
+- The Automation trigger card shows the credentials from the run's dispatch
+  record, not the current setting. Keep the run input collapsed, because it
+  is not from a person.
+- A nested `Transcript` never uses the panel of the page behind it.
+- The page shows one right panel at a time. Closing a panel returns focus to
+  the control that opened it.
 - The URL owns the selected event in the main Conversation. Standalone
-  transcripts keep selection in `ConversationEventLog`.
-- A pending exit must not close a new panel or another Conversation.
-- A pending fork blocks dismissal of its dialog.
+  transcripts keep it in `ConversationEventLog`.
+- A pending exit must not close a new panel or another Conversation. A
+  pending fork blocks dismissal of its dialog.
 - Raw JSON keeps the original ISO values. Persist the UTC/local mode, not the
   timezone.
-
-## Checks
-
-- Review with `JUNIOR_DASHBOARD_MOCK_CONVERSATIONS=true pnpm dev`.
-- Keep visual checks out of automated assertions. Browser tests cover
-  opening, closing, and keyboard interaction.

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