@sentry/junior-dashboard 0.256.0 → 0.258.0

package/src/client/conversations/transcriptMentions.tsx

@@ -0,0 +1,104 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { Link } from "react-router";
+import type { ActorIdentity } from "@sentry/junior/api/schema";
+
+import { peoplePath } from "../format";
+import type { TranscriptViewMessage } from "../types";
+import { TRANSCRIPT_ANCHOR_CLASS } from "./transcriptMarkdownLinks";
+import { HighlightText } from "./transcriptSearch";
+
+type TranscriptMention = {
+  end: number;
+  id: string;
+  label?: string;
+  sigil: "@" | "#";
+  start: number;
+};
+
+// Matches the user and channel tokens that core keeps in message text.
+const SLACK_MENTION_RE = /<([@#])([A-Z0-9]+)(?:\|([^<>]*))?>/g;
+
+const TranscriptMentionPeople = createContext<
+  ReadonlyMap<string, ActorIdentity>
+>(new Map());
+
+/** Share the people that the API resolved for mentions in one transcript. */
+export function TranscriptMentionPeopleProvider(props: {
+  children: ReactNode;
+  messages: readonly TranscriptViewMessage[];
+}) {
+  const people = new Map<string, ActorIdentity>();
+  for (const message of props.messages) {
+    for (const person of message.mentions ?? []) {
+      if (person.slackUserId) people.set(person.slackUserId, person);
+    }
+  }
+  return (
+    <TranscriptMentionPeople.Provider value={people}>
+      {props.children}
+    </TranscriptMentionPeople.Provider>
+  );
+}
+
+/** Render text with Slack `<@U123>` and `<#C123|name>` tokens as readable mentions. */
+export function renderMentionText(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={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={text.slice(cursor)}
+      />,
+    );
+  }
+  return nodes;
+}
+
+function findMentions(text: string): TranscriptMention[] {
+  return [...text.matchAll(SLACK_MENTION_RE)].map((match) => ({
+    end: match.index + match[0].length,
+    id: match[2]!,
+    label: match[3]?.trim() || undefined,
+    sigil: match[1] as "@" | "#",
+    start: match.index,
+  }));
+}
+
+function MentionView(props: { mention: TranscriptMention }) {
+  const people = useContext(TranscriptMentionPeople);
+  const { id, label, sigil } = props.mention;
+  const person = sigil === "@" ? people.get(id) : undefined;
+  const name = person?.fullName ?? person?.slackUserName ?? label ?? id;
+  const text = <HighlightText text={`${sigil}${name.replace(/^[@#]/, "")}`} />;
+  if (person?.email) {
+    return (
+      <Link
+        className={TRANSCRIPT_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/pages/automations/AutomationOutcomeFields.tsx

@@ -141,10 +141,10 @@ export function AutomationOutcomeFields(props: {
                       disabled={index === 0}
                       onClick={() => {
                         const next = [...props.value];
-                        [next[index - 1], next[index]] = [
-                          next[index],
-                          next[index - 1],
-                        ];
+                        const previous = next[index - 1];
+                        if (!previous) return;
+                        next[index - 1] = outcome;
+                        next[index] = previous;
                         props.onChange(next);
                       }}
                     >

package/src/client/pages/automations/automationDraft.ts

@@ -53,7 +53,7 @@ export function scheduleDraft(
       ...fields,
       timezone: value.schedule.timezone,
       time: `${String(time.hour).padStart(2, "0")}:${String(time.minute).padStart(2, "0")}`,
-      weekdays: days?.map((day) => weekdays[day]),
+      weekdays: days?.flatMap((day) => weekdays[day] ?? []),
     };
   }
   if (value.nextRunAtMs) {

package/src/client/pages/dev/ComponentsPage.tsx

@@ -1,4 +1,5 @@
 import { FormNotice } from "../../components/FormNotice";
+import { SearchInput } from "../../components/SearchInput";
 import { Select } from "../../components/Select";
 import { ObjectFixtures } from "./ObjectFixtures";
 import { ChartFixtures } from "./ChartFixtures";
@@ -191,6 +192,7 @@ function FoundationsGalleryPage() {
   const [navigationOpen, setNavigationOpen] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [nestedDrawerOpen, setNestedDrawerOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("deploy failure");
 
   return (
     <GalleryShell
@@ -471,6 +473,12 @@ function FoundationsGalleryPage() {
             disabled
             value="read only"
           />
+          <SearchInput
+            label="Search conversations"
+            onChange={setSearchQuery}
+            placeholder="Search conversations…"
+            value={searchQuery}
+          />
         </div>
       </Fixture>
       <Fixture title="Status labels">

package/src/client/pages/people/ProfileCodeActivity.tsx

@@ -10,6 +10,7 @@ import { SectionIntro } from "../../components/layout/SectionIntro";
 import { StatCard } from "../../components/metrics/StatCard";
 import { formatCompactNumber, formatCostSummary } from "../../format";
 import { CodeActivityChart } from "../code/CodeActivityChart";
+import { ProfileCodeChanges } from "./ProfileCodeChanges";
 
 function mergeRate(value: number | undefined): string {
   return value === undefined ? "—" : `${Math.round(value * 100)}%`;
@@ -28,13 +29,14 @@ function costUsd(value: number | undefined): string {
 function hasCodeActivity(report: CodePersonReport): boolean {
   const summary = report.summary;
   return (
+    report.changes.length > 0 ||
     summary.created + summary.merged + summary.closed > 0 ||
     (summary.costUsd ?? 0) > 0 ||
     report.activityDays.some((day) => day.created + day.merged + day.closed > 0)
   );
 }
 
-/** Render person-scoped native code change activity. */
+/** Render person-scoped native code change activity and recent code changes. */
 export function ProfileCodeActivity(props: {
   range: TimeRangeDays;
   report: CodePersonReport;
@@ -86,6 +88,12 @@ export function ProfileCodeActivity(props: {
         })}
         range={props.range}
       />
+      {props.report.changes.length > 0 ? (
+        <ProfileCodeChanges
+          changes={props.report.changes}
+          generatedAt={props.report.generatedAt}
+        />
+      ) : null}
     </section>
   );
 }

package/src/client/pages/people/ProfileCodeChanges.tsx

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import type { CodeChangeSummaryReport } from "@sentry/junior/api/schema";
+
+import { EmptyTelemetry } from "../../components/EmptyTelemetry";
+import { FilterGroup } from "../../components/FilterBar";
+import { Select } from "../../components/Select";
+import { Card } from "../../components/layout/Card";
+import { CodeChangeRow } from "../code/CodeChangeRow";
+
+const DAY_MS = 24 * 60 * 60 * 1_000;
+
+const STATE_OPTIONS = [
+  { label: "Open", value: "open" },
+  { label: "Merged", value: "merged" },
+  { label: "Closed", value: "closed" },
+  { label: "All", value: "" },
+] as const;
+
+const OPENED_OPTIONS = [
+  { label: "Any time", value: "" },
+  { label: "Last 24 hours", value: "1" },
+  { label: "Last 7 days", value: "7" },
+  { label: "Last 30 days", value: "30" },
+  { label: "Last 90 days", value: "90" },
+] as const;
+
+/**
+ * List one person's recent code changes. Open changes show first, and the
+ * person can filter by state and by the date the change was opened.
+ */
+export function ProfileCodeChanges(props: {
+  changes: CodeChangeSummaryReport[];
+  generatedAt: string;
+}) {
+  const [state, setState] = useState("open");
+  const [openedDays, setOpenedDays] = useState("");
+  const openedSinceMs = openedDays
+    ? Date.parse(props.generatedAt) - Number(openedDays) * DAY_MS
+    : undefined;
+  const inDateRange = props.changes.filter(
+    (change) =>
+      openedSinceMs === undefined ||
+      Date.parse(change.openedAt) >= openedSinceMs,
+  );
+  const changes = inDateRange.filter(
+    (change) => !state || change.state === state,
+  );
+  const count = (value: string) =>
+    value
+      ? inDateRange.filter((change) => change.state === value).length
+      : inDateRange.length;
+  return (
+    <Card as="section">
+      <div className="flex flex-wrap items-end justify-between gap-4 border-b border-dashboard-border-subtle px-4 py-3">
+        <div className="font-display text-lg text-dashboard-text">
+          Recent changes
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <FilterGroup className="w-36" label="State">
+            <Select
+              aria-label="Filter changes by state"
+              onChange={(event) => setState(event.currentTarget.value)}
+              value={state}
+            >
+              {STATE_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label} ({count(option.value)})
+                </option>
+              ))}
+            </Select>
+          </FilterGroup>
+          <FilterGroup className="w-36" label="Opened">
+            <Select
+              aria-label="Filter changes by opened date"
+              onChange={(event) => setOpenedDays(event.currentTarget.value)}
+              value={openedDays}
+            >
+              {OPENED_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </Select>
+          </FilterGroup>
+        </div>
+      </div>
+      {changes.length > 0 ? (
+        <div>
+          {changes.map((change) => (
+            <CodeChangeRow change={change} key={change.id} />
+          ))}
+        </div>
+      ) : (
+        <div className="p-4">
+          <EmptyTelemetry>
+            {state && inDateRange.length > 0
+              ? `No ${state} changes. Set State to All to see ${inDateRange.length} more.`
+              : "No changes match these filters."}
+          </EmptyTelemetry>
+        </div>
+      )}
+    </Card>
+  );
+}

package/src/client/pages/system/PluginBarChart.tsx

@@ -23,6 +23,12 @@ const toneColors = {
   warning: "#fbbf24",
 } as const;
 
+function seriesColor(series: Widget["series"][number], index: number): string {
+  return series.tone
+    ? toneColors[series.tone]
+    : (colors[index % colors.length] ?? colors[0]);
+}
+
 /** Render a validated plugin-owned categorical bar chart. */
 export function PluginBarChart(props: {
   range?: TimeRangeDays;
@@ -69,9 +75,7 @@ export function PluginBarChart(props: {
           <ChartLegend
             ariaLabel="Chart legend"
             items={widget.series.map((series, index) => ({
-              color: series.tone
-                ? toneColors[series.tone]
-                : colors[index % colors.length],
+              color: seriesColor(series, index),
               key: series.key,
               label: series.label,
             }))}
@@ -122,11 +126,7 @@ export function PluginBarChart(props: {
                 >
                   <rect
                     aria-label={`${formatActivityCategoryTooltipLabel(category.label)}, ${series.label}: ${formatted}`}
-                    fill={
-                      series.tone
-                        ? toneColors[series.tone]
-                        : colors[seriesIndex % colors.length]
-                    }
+                    fill={seriesColor(series, seriesIndex)}
                     height={renderedHeight}
                     opacity={value ? 0.82 : 0.1}
                     rx="1.5"

package/src/client/types.ts

@@ -122,6 +122,8 @@ export type TranscriptViewMessage = {
   trustedSummary?: string;
   /** Whether the source message addressed Junior directly. */
   explicitMention?: boolean;
+  /** People mentioned in the message text. */
+  mentions?: ActorIdentity[];
   /** Whether a non-mention message was used as input to a turn. */
   context?: boolean;
   /** Stable history/message id used to drop pending rows after commit. */

package/src/client.tsx

@@ -22,18 +22,18 @@ class DashboardErrorBoundary extends Component<
   { children: ReactNode },
   ErrorBoundaryState
 > {
-  state: ErrorBoundaryState = { error: null };
+  override state: ErrorBoundaryState = { error: null };
 
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
     return { error };
   }
 
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     const stack = error.stack ?? errorInfo.componentStack;
     window.__JUNIOR_DASHBOARD_SHOW_ERROR__?.(stack ? new Error(stack) : error);
   }
 
-  render() {
+  override render() {
     if (this.state.error) {
       return <DashboardErrorPanel error={this.state.error} />;
     }

package/src/mock-reporting/fixtures.ts

@@ -1397,6 +1397,13 @@ function simpleConversation(
   });
 }
 
+const MOCK_MENTION_MORGAN: ActorIdentity = {
+  email: "dev@example.com",
+  fullName: "Morgan Lee",
+  slackUserId: "U123",
+  slackUserName: "morgan",
+};
+
 function eventAutomationRunConversation(
   nowMs: number,
 ): ConversationDetailReport {
@@ -1444,6 +1451,7 @@ function eventAutomationRunConversation(
           "",
           "End with `finishAutomationRun`.",
         ].join("\n"),
+        mentions: [MOCK_MENTION_MORGAN],
       }),
       reportEvent(1, at(1_000), {
         type: "turn_lifecycle",
@@ -1455,7 +1463,12 @@ function eventAutomationRunConversation(
         type: "message",
         messageId: `${EVENT_AUTOMATION_RUN_CONVERSATION_ID}:reply`,
         role: "assistant",
-        text: "ACME-42 is closed. The saved-card checkout failure was fixed by the token refresh change and verified in production.",
+        text: "<@U123> ACME-42 is closed. The saved-card checkout failure was fixed by the token refresh change and verified in production. cc <@U456> and <@U999> in <#C42|proj-checkout>.",
+        // U456 has no People profile, and U999 is not resolved.
+        mentions: [
+          MOCK_MENTION_MORGAN,
+          { fullName: "Casey Nguyen", slackUserId: "U456" },
+        ],
       }),
       reportEvent(3, at(14_000), {
         type: "turn_lifecycle",
@@ -2682,6 +2695,7 @@ export function readMockPeopleCode(
   const overview = readMockCodeOverview();
   return {
     activityDays: overview.activityDays,
+    changes: overview.changes,
     generatedAt: overview.generatedAt,
     summary: overview.summary,
     windowEnd: overview.windowEnd,