@sentry/junior-dashboard 0.268.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/format.ts

@@ -19,8 +19,8 @@ import { getDashboardAgentName } from "./agentName";
 import { formatDuration } from "./components/Duration";
 import { conversationTranscriptMessages } from "./conversations/eventTranscript";
 
-/** Detect the viewer's own local timezone as the default display timezone. */
-function browserTimeZone(): string {
+/** Read the viewer's own browser timezone, used for absolute timestamps and charts. */
+export function getDashboardTimeZone(): string {
   try {
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
   } catch {
@@ -28,22 +28,6 @@ function browserTimeZone(): string {
   }
 }
 
-let dashboardTimeZone = browserTimeZone();
-
-/** Apply an operator-configured timezone override from the config API, if any. Otherwise the viewer's own browser timezone is used. */
-export function setDashboardTimeZone(timeZone: string | undefined): void {
-  dashboardTimeZone = timeZone || browserTimeZone();
-}
-
-/** Read the dashboard display timezone used for absolute timestamps and charts. */
-export function getDashboardTimeZone(): string {
-  return dashboardTimeZone;
-}
-
-function displayTimeZone(): string {
-  return dashboardTimeZone;
-}
-
 function isActiveSummary(summary: ConversationSummaryReport): boolean {
   return summary.status === "active";
 }
@@ -69,7 +53,7 @@ function parseTime(value: string | undefined): number | null {
   return Number.isFinite(time) ? time : null;
 }
 
-/** Format absolute dashboard timestamps in the configured display timezone. */
+/** Format absolute dashboard timestamps in the viewer's browser timezone. */
 export function formatTime(
   value: string | undefined,
   options?: Intl.DateTimeFormatOptions,
@@ -78,7 +62,7 @@ export function formatTime(
   if (time == null) return "none";
   return new Date(time).toLocaleString(undefined, {
     ...options,
-    timeZone: displayTimeZone(),
+    timeZone: getDashboardTimeZone(),
   });
 }
 
@@ -166,10 +150,10 @@ export function formatMessageTimestamp(
     ? date.toLocaleString(undefined, {
         dateStyle: "medium",
         timeStyle: "medium",
-        timeZone: displayTimeZone(),
+        timeZone: getDashboardTimeZone(),
       })
     : date.toLocaleTimeString(undefined, {
-        timeZone: displayTimeZone(),
+        timeZone: getDashboardTimeZone(),
       });
 }
 
@@ -210,7 +194,7 @@ export function formatTranscriptTimestampDetails(value: number): {
   return {
     local: date.toLocaleString(undefined, {
       ...options,
-      timeZone: displayTimeZone(),
+      timeZone: getDashboardTimeZone(),
     }),
     utc: date.toLocaleString(undefined, { ...options, timeZone: "UTC" }),
   };

package/src/client/pages/automations/AGENTS.md

@@ -0,0 +1,34 @@
+# Automation pages
+
+## Boundaries
+
+- Core owns validation, edit access, creator-only rules, revision checks,
+  Schedule previews, and the Event catalog. The page shows core errors. It
+  does not repeat these rules.
+- Preview requests never save or run work.
+- Completed scheduled Automations are read-only.
+
+## Editor rules
+
+- Send only changed fields. Keep unsupported triggers and stored
+  Destinations unless the user replaces them. Keep outcome order.
+- New messages can target only the current Destination or the creator.
+- A public reader sees outcomes as read-only and cannot turn on creator
+  credentials. Warn that an instruction or event selector change switches to
+  system credentials.
+- Pause, Resume, and Delete are creator-only. Hide them from other viewers.
+- Query refreshes must not replace an unsaved draft. After a stale save, let
+  the user keep their changes or load the latest version.
+- Block navigation with unsaved changes.
+- Lifecycle actions and "Make active" read the latest revision first.
+
+## Page rules
+
+- Each Automation has one page at `/automations/:id`. Keep the list query
+  string on the way back. Drop tab-only params: `result`, `run`, `version`.
+- `AutomationRecentRuns` shows terminal runs only. Do not infer queued or
+  running work from terminal records.
+- Delete keeps errors in the dialog and blocks dismissal while pending.
+
+Browser journeys: `e2e/automation-editor.spec.ts` and
+`e2e/automations.spec.ts`.

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

@@ -43,7 +43,7 @@ export function AutomationActions({
   const completed = automation.status === "completed";
   const paused = automation.status === "paused";
   const blocked = automation.status === "blocked";
-  const canPause = automation.ownedByViewer && !completed;
+  const canPause = !completed;
   const action = paused || blocked ? "resume" : "pause";
   const mutation = useMutation({
     mutationFn: async () => {
@@ -135,25 +135,23 @@ export function AutomationActions({
             </Popover>
           </>
         ) : null}
-        {automation.ownedByViewer ? (
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <Button
-                  focusableWhenDisabled
-                  aria-label="Delete automation"
-                  size="icon"
-                  variant="danger"
-                  onClick={(event) => onDelete(event.currentTarget)}
-                  disabled={mutation.isPending}
-                >
-                  <Trash2 aria-hidden="true" size={16} />
-                </Button>
-              }
-            />
-            <TooltipContent size="compact">Delete automation</TooltipContent>
-          </Tooltip>
-        ) : null}
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Button
+                focusableWhenDisabled
+                aria-label="Delete automation"
+                size="icon"
+                variant="danger"
+                onClick={(event) => onDelete(event.currentTarget)}
+                disabled={mutation.isPending}
+              >
+                <Trash2 aria-hidden="true" size={16} />
+              </Button>
+            }
+          />
+          <TooltipContent size="compact">Delete automation</TooltipContent>
+        </Tooltip>
       </div>
       {mutation.error ? (
         <div className="max-w-sm">

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

@@ -135,8 +135,7 @@ export function AutomationEditor(props: {
   const dropsCreatorCredentials =
     !owned &&
     original.credentialMode === "creator" &&
-    (changes.instruction !== undefined ||
-      (original.kind === "event" && changes.trigger !== undefined));
+    (changes.instruction !== undefined || changes[triggerField] !== undefined);
   const triggerError = fieldError(triggerField);
   const inputState = (key: string) => ({
     "aria-invalid": Boolean(fieldError(key)) || undefined,
@@ -426,8 +425,8 @@ export function AutomationEditor(props: {
             {dropsCreatorCredentials ? (
               <FormNotice title="Saving switches this automation to system credentials.">
                 Only {creator} can let a changed instruction
-                {original.kind === "event" ? " or trigger" : ""} use their
-                connected accounts.
+                {original.kind === "event" ? " or trigger" : " or schedule"} use
+                their connected accounts.
               </FormNotice>
             ) : null}
             {fieldError("credentialMode") ? (

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}
           />
@@ -197,9 +197,9 @@ function AutomationAbout(props: { automation: AutomationSummary }) {
         <p className="mt-3 mb-0 text-xs leading-relaxed text-dashboard-text-muted">
           {automation.destination.visibility === "private"
             ? null
-            : "You can edit its settings because it is in a public channel. "}
-          Only {automation.createdBy} can pause, resume, or delete it, change
-          where results go, or turn on their connected accounts.
+            : "You can edit, pause, or delete it because it is in a public channel. "}
+          Only {automation.createdBy} can change where results go, turn on their
+          connected accounts, or resume or run it while it uses them.
         </p>
       )}
     </RailCard>

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

@@ -140,8 +140,8 @@ export function AutomationAttention({
         <p className="m-0 break-words">
           {automation.statusReason ??
             "Check the last run to see what needs fixing."}{" "}
-          {!automation.ownedByViewer
-            ? `Ask ${automation.createdBy} to resume after this is fixed.`
+          {!automation.ownedByViewer && automation.credentialMode === "creator"
+            ? `It uses accounts connected by ${automation.createdBy}. Ask them to resume it, or switch it to Junior's credentials first.`
             : null}
         </p>
       ) : null}