@sentry/junior-dashboard 0.256.0 → 0.257.0

package/src/auth.ts

@@ -1,25 +1,10 @@
-import { betterAuth } from "better-auth/minimal";
 import { dashboardSessionSchema } from "./api/schema";
 import type { DashboardSession } from "./api/schema";
-import { resolveDashboardBaseURL } from "./url";
-
-const DEFAULT_SESSION_MAX_AGE_SECONDS = 60 * 60 * 8;
 
 export type DashboardUser = DashboardSession["user"];
 export type { DashboardSession };
 
-export interface DashboardAuthConfig {
-  agentName?: string;
-  baseURL?: string;
-  authPath: string;
-  trustedOrigins: string[];
-  secret?: string;
-  googleClientId?: string;
-  googleClientSecret?: string;
-  googleHostedDomain?: string;
-  sessionMaxAgeSeconds?: number;
-}
-
+/** Google sign-in session that core shares with Slack. */
 export interface DashboardAuth {
   handler(request: Request): Promise<Response>;
   getSession(request: Request): Promise<DashboardSession | null>;
@@ -78,114 +63,3 @@ export function sanitizeDashboardSession(
     },
   });
 }
-
-function required(value: string | undefined, name: string): string {
-  if (!value?.trim()) {
-    throw new Error(`${name} is required for Junior dashboard auth`);
-  }
-  return value.trim();
-}
-
-function firstHostedDomain(domains: string[]): string | undefined {
-  return domains.length === 1 ? domains[0] : undefined;
-}
-
-/** Create the Better Auth bridge used by dashboard browser routes. */
-export function createDashboardAuth(
-  config: DashboardAuthConfig,
-): DashboardAuth {
-  const secret = required(
-    config.secret ??
-      process.env.BETTER_AUTH_SECRET ??
-      process.env.JUNIOR_SECRET,
-    "JUNIOR_SECRET or BETTER_AUTH_SECRET",
-  );
-  const baseURL = resolveDashboardBaseURL({ baseURL: config.baseURL });
-  const googleClientId = required(
-    config.googleClientId ?? process.env.GOOGLE_CLIENT_ID,
-    "GOOGLE_CLIENT_ID",
-  );
-  const googleClientSecret = required(
-    config.googleClientSecret ?? process.env.GOOGLE_CLIENT_SECRET,
-    "GOOGLE_CLIENT_SECRET",
-  );
-
-  const auth = betterAuth({
-    appName: `${config.agentName?.trim() || "Junior"} Dashboard`,
-    baseURL,
-    basePath: config.authPath,
-    secret,
-    trustedOrigins: config.trustedOrigins,
-    socialProviders: {
-      google: {
-        clientId: googleClientId,
-        clientSecret: googleClientSecret,
-        hd: config.googleHostedDomain,
-        prompt: "select_account",
-        mapProfileToUser(profile) {
-          return {
-            email: profile.email,
-            emailVerified: profile.email_verified,
-            image: profile.picture,
-            name: profile.name,
-          };
-        },
-      },
-    },
-    account: {
-      storeStateStrategy: "cookie",
-      storeAccountCookie: false,
-      updateAccountOnSignIn: false,
-    },
-    session: {
-      expiresIn: config.sessionMaxAgeSeconds ?? DEFAULT_SESSION_MAX_AGE_SECONDS,
-      disableSessionRefresh: true,
-      cookieCache: {
-        enabled: true,
-        strategy: "jwe",
-        maxAge: config.sessionMaxAgeSeconds ?? DEFAULT_SESSION_MAX_AGE_SECONDS,
-        refreshCache: false,
-      },
-    },
-  });
-
-  return {
-    handler(request) {
-      return auth.handler(request);
-    },
-    async getSession(request) {
-      const session = await auth.api.getSession({ headers: request.headers });
-      if (!session) {
-        return null;
-      }
-      return sanitizeDashboardSession(session as DashboardSession);
-    },
-    async signInWithGoogle(request, callbackURL) {
-      const result = await auth.api.signInSocial({
-        body: {
-          provider: "google",
-          callbackURL,
-        },
-        headers: request.headers,
-        returnHeaders: true,
-      });
-
-      if (!("url" in result.response) || !result.response.url) {
-        throw new Error("Google sign-in did not return a redirect URL");
-      }
-
-      result.headers.set("location", result.response.url);
-      return new Response(null, {
-        status: 302,
-        headers: result.headers,
-      });
-    },
-  };
-}
-
-/** Resolve a Google hosted-domain login hint when it is unambiguous. */
-export function resolveGoogleHostedDomainHint(
-  domains: string[],
-): string | undefined {
-  return firstHostedDomain(domains.map((domain) => domain.toLowerCase()));
-}

package/src/client/components/SearchInput.tsx

@@ -1,5 +1,5 @@
 import type { Ref } from "react";
-import { Search } from "lucide-react";
+import { Search, X } from "lucide-react";
 
 import { cn } from "../styles";
 
@@ -30,7 +30,7 @@ export function SearchInput(props: {
       <input
         aria-label={props.label}
         className={cn(
-          "w-full rounded-md border border-dashboard-border font-sans text-sm text-dashboard-text outline-none transition-colors placeholder:text-dashboard-text-muted/70 hover:border-dashboard-border-emphasis focus:border-dashboard-focus",
+          "w-full rounded-md border border-dashboard-border font-sans text-sm text-dashboard-text outline-none transition-colors placeholder:text-dashboard-text-muted/70 hover:border-dashboard-border-emphasis focus:border-dashboard-focus [&::-webkit-search-cancel-button]:appearance-none",
           searchInputClass[size],
         )}
         onChange={(event) => props.onChange(event.currentTarget.value)}
@@ -39,6 +39,23 @@ export function SearchInput(props: {
         type="search"
         value={props.value}
       />
+      {props.value ? (
+        <button
+          aria-label="Clear search"
+          className={cn(
+            "absolute top-1/2 grid size-6 -translate-y-1/2 cursor-pointer place-items-center rounded-md text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-strong hover:text-dashboard-text focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus",
+            clearButtonClass[size],
+          )}
+          onClick={(event) => {
+            props.onChange("");
+            // The button unmounts once the value is empty, so keep focus in the search box.
+            event.currentTarget.parentElement?.querySelector("input")?.focus();
+          }}
+          type="button"
+        >
+          <X aria-hidden="true" size={14} strokeWidth={2.5} />
+        </button>
+      ) : null}
     </div>
   );
 }
@@ -48,9 +65,14 @@ const searchIconClass: Record<SearchInputSize, string> = {
   default: "left-3",
 };
 
+const clearButtonClass: Record<SearchInputSize, string> = {
+  compact: "right-1.5",
+  default: "right-2",
+};
+
 const searchInputClass: Record<SearchInputSize, string> = {
   compact:
-    "h-9 bg-dashboard-overlay-soft pr-3 pl-8 focus:ring-1 focus:ring-dashboard-focus/25",
+    "h-9 bg-dashboard-overlay-soft pr-8 pl-8 focus:ring-1 focus:ring-dashboard-focus/25",
   default:
-    "h-10 bg-dashboard-overlay-soft pr-3 pl-9 focus:ring-1 focus:ring-dashboard-focus/25",
+    "h-10 bg-dashboard-overlay-soft pr-9 pl-9 focus:ring-1 focus:ring-dashboard-focus/25",
 };

package/src/client/conversations/ConversationTranscript.tsx

@@ -43,6 +43,7 @@ import { transcriptEmptyClass } from "./transcriptStyles";
 import { entryMatchesSearch, useTranscriptSearch } from "./transcriptSearch";
 import { TranscriptRow, TranscriptRows } from "./TranscriptRows";
 import { TranscriptTimestampProvider } from "./TranscriptTimestamp";
+import { TranscriptMentionPeopleProvider } from "./transcriptMentions";
 
 type TranscriptEntry = ReturnType<typeof groupTranscriptMessages>[number];
 type TranscriptContextEntry = Extract<TranscriptEntry, { kind: "context" }>;
@@ -85,14 +86,16 @@ export const ConversationTranscriptView = memo(
 
     return (
       <TranscriptTimestampProvider>
-        <section className="min-w-0 pt-1">
-          <SegmentEvents
-            onOpenSubagentTranscript={props.onOpenSubagentTranscript}
-            conversation={props.conversation}
-            messages={messages}
-            responding={props.responding}
-          />
-        </section>
+        <TranscriptMentionPeopleProvider messages={messages}>
+          <section className="min-w-0 pt-1">
+            <SegmentEvents
+              onOpenSubagentTranscript={props.onOpenSubagentTranscript}
+              conversation={props.conversation}
+              messages={messages}
+              responding={props.responding}
+            />
+          </section>
+        </TranscriptMentionPeopleProvider>
       </TranscriptTimestampProvider>
     );
   },

package/src/client/conversations/TranscriptEventView.tsx

@@ -1,5 +1,6 @@
 import { ChevronRight } from "lucide-react";
 
+import { renderMentionText } from "./transcriptMentions";
 import { messageRawText } from "./transcriptRenderModel";
 import { HighlightText } from "./transcriptSearch";
 import { RedactedMarker } from "./TranscriptRedacted";
@@ -16,7 +17,7 @@ export function TranscriptEventView(props: { message: TranscriptViewMessage }) {
   const heading = (
     <span className="flex min-h-6 min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
       <span className="min-w-0 break-words font-display text-sm font-semibold leading-6 text-dashboard-text">
-        <HighlightText text={summary} />
+        {renderMentionText(summary, "event-summary")}
       </span>
       {props.message.eventType ? (
         <span className="break-all rounded-md border border-dashboard-border px-1.5 py-0.5 font-mono text-2xs leading-none text-dashboard-text-muted">

package/src/client/conversations/TranscriptMarkdown.tsx

@@ -5,13 +5,14 @@ import {
   findTranscriptMarkdownLinks,
   TRANSCRIPT_ANCHOR_CLASS,
 } from "./transcriptMarkdownLinks";
+import { renderMentionText } from "./transcriptMentions";
 import { HighlightText, useTranscriptSearch } from "./transcriptSearch";
 
 type TableAlignment = "left" | "center" | "right" | null;
 
 type MarkdownBlock =
   | { type: "heading"; level: 1 | 2 | 3 | 4 | 5 | 6; text: string }
-  | { type: "list"; ordered: boolean; items: string[] }
+  | { type: "list"; ordered: boolean; items: string[]; start?: number }
   | {
       type: "table";
       alignments: TableAlignment[];
@@ -33,11 +34,11 @@ export function TranscriptMarkdown(props: {
       className={cn(
         "min-w-0 break-words text-dashboard-text [overflow-wrap:anywhere]",
         props.compact
-          ? "font-sans text-base leading-7"
+          ? "font-sans text-base leading-relaxed"
           : "font-sans text-sm leading-6 md:leading-7",
       )}
     >
-      <div className="grid min-w-0 gap-2">
+      <div className={cn("grid min-w-0", props.compact ? "gap-3" : "gap-2")}>
         {blocks.map((block, index) => (
           <MarkdownBlockView block={block} key={index} />
         ))}
@@ -50,7 +51,7 @@ function MarkdownBlockView(props: { block: MarkdownBlock }) {
   switch (props.block.type) {
     case "heading": {
       const className = cn(
-        "m-0 min-w-0 font-semibold tracking-[-0.01em] text-dashboard-text",
+        "m-0 min-w-0 font-semibold tracking-[-0.01em] text-dashboard-text [&:not(:first-child)]:mt-1 [&+*]:-mt-1",
         props.block.level <= 2 ? "text-[1.05em]" : "text-[1em]",
       );
       const content = renderInlineMarkdown(props.block.text);
@@ -74,9 +75,10 @@ function MarkdownBlockView(props: { block: MarkdownBlock }) {
       return (
         <ListTag
           className={cn(
-            "m-0 grid min-w-0 list-outside gap-1 pl-5 text-dashboard-text",
+            "m-0 grid min-w-0 list-outside gap-1.5 pl-6 text-dashboard-text marker:text-dashboard-text-muted",
             props.block.ordered ? "list-decimal" : "list-disc",
           )}
+          start={props.block.start}
         >
           {props.block.items.map((item, index) => (
             <li className="min-w-0 pl-1" key={index}>
@@ -122,6 +124,7 @@ function parseMarkdownProseBlocks(text: string): MarkdownBlock[] {
       const ordered = isOrderedListItem(line);
       const unordered = isUnorderedListItem(line);
       if (ordered || unordered) {
+        const start = ordered ? Number(/\d+/.exec(line)?.[0]) : undefined;
         const items: string[] = [];
         while (
           index < lines.length &&
@@ -131,13 +134,18 @@ function parseMarkdownProseBlocks(text: string): MarkdownBlock[] {
         ) {
           items.push(
             (lines[index] ?? "").replace(
-              ordered ? /^\s*\d+\.\s+/ : /^\s*[-*+]\s+/,
+              ordered ? ORDERED_LIST_MARKER : UNORDERED_LIST_MARKER,
               "",
             ),
           );
           index += 1;
         }
-        blocks.push({ items, ordered, type: "list" });
+        blocks.push({
+          items,
+          ordered,
+          start: start === 1 ? undefined : start,
+          type: "list",
+        });
         continue;
       }
 
@@ -323,6 +331,11 @@ function splitTableRow(line: string): string[] {
 }
 
 function matchHeading(line: string): MarkdownBlock | undefined {
+  // Agents often write a bold-only line as a section label. Give it heading
+  // spacing so the section reads as a group.
+  if (/^\s*(?:\*\*[^*]+\*\*|__[^_]+__):?\s*$/.test(line)) {
+    return { level: 3, text: line.trim(), type: "heading" };
+  }
   const match = /^(#{1,6})\s+(.+)$/.exec(line);
   if (!match) return undefined;
   return {
@@ -332,12 +345,16 @@ function matchHeading(line: string): MarkdownBlock | undefined {
   };
 }
 
+// Slack-style replies use "•" bullets and "1)" numbers; render them as lists.
+const UNORDERED_LIST_MARKER = /^\s*[-*+•◦]\s+(?=\S)/;
+const ORDERED_LIST_MARKER = /^\s*\d+[.)]\s+(?=\S)/;
+
 function isUnorderedListItem(line: string): boolean {
-  return /^\s*[-*+]\s+\S/.test(line);
+  return UNORDERED_LIST_MARKER.test(line);
 }
 
 function isOrderedListItem(line: string): boolean {
-  return /^\s*\d+\.\s+\S/.test(line);
+  return ORDERED_LIST_MARKER.test(line);
 }
 
 function renderInlineMarkdown(text: string): ReactNode[] {
@@ -435,10 +452,10 @@ function renderLinkText(text: string, keyBase: string): ReactNode[] {
   for (const link of links) {
     if (link.start > cursor) {
       nodes.push(
-        <HighlightText
-          key={`${keyBase}-s-${part++}`}
-          text={text.slice(cursor, link.start)}
-        />,
+        ...renderMentionText(
+          text.slice(cursor, link.start),
+          `${keyBase}-s-${part++}`,
+        ),
       );
     }
     nodes.push(
@@ -451,7 +468,7 @@ function renderLinkText(text: string, keyBase: string): ReactNode[] {
 
   if (cursor < text.length) {
     nodes.push(
-      <HighlightText key={`${keyBase}-s-${part}`} text={text.slice(cursor)} />,
+      ...renderMentionText(text.slice(cursor), `${keyBase}-s-${part}`),
     );
   }
   return nodes;

package/src/client/conversations/eventTranscript.ts

@@ -213,6 +213,7 @@ export function transcriptMessagesFromEvents(
         ...(data.actorIdentity
           ? { actorIdentity: data.actorIdentity }
           : undefined),
+        ...(data.mentions ? { mentions: data.mentions } : undefined),
         ...(data.eventType ? { eventType: data.eventType } : undefined),
         eventObjectType: data.eventObjectType,
         ...(data.trustedSummary

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/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/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. */