@sentry/junior-dashboard 0.258.0 → 0.260.0

package/src/client/conversations/TranscriptText.tsx

@@ -1,11 +1,17 @@
 import { memo } from "react";
+import type { ActorIdentity } from "@sentry/junior/api/schema";
 
 import { HighlightedCode } from "../code";
 import { parseMarkdownBlocks, transcriptRoleKind } from "../format";
 import { TranscriptMarkdown } from "./TranscriptMarkdown";
+import { MentionPeopleProvider } from "./transcriptMentions";
 
-/** Render transcript prose as Markdown with explicit fenced code blocks. */
+/**
+ * Render transcript prose as Markdown with explicit fenced code blocks.
+ * `mentions` are the people that the API resolved for this text.
+ */
 export const TranscriptText = memo(function TranscriptText(props: {
+  mentions: readonly ActorIdentity[];
   role?: string;
   text: string;
 }) {
@@ -13,27 +19,29 @@ export const TranscriptText = memo(function TranscriptText(props: {
   const blocks = parseMarkdownBlocks(props.text);
 
   return (
-    <div className="grid min-w-0 gap-2">
-      {blocks.map((block, index) => {
-        if (block.language === "markdown" && !block.fenced) {
+    <MentionPeopleProvider mentions={props.mentions}>
+      <div className="grid min-w-0 gap-2">
+        {blocks.map((block, index) => {
+          if (block.language === "markdown" && !block.fenced) {
+            return (
+              <TranscriptMarkdown
+                compact={roleKind === "assistant" || roleKind === "user"}
+                key={index}
+                text={block.code}
+              />
+            );
+          }
+
           return (
-            <TranscriptMarkdown
-              compact={roleKind === "assistant" || roleKind === "user"}
+            <div
+              className="min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5"
               key={index}
-              text={block.code}
-            />
+            >
+              <HighlightedCode code={block.code} language={block.language} />
+            </div>
           );
-        }
-
-        return (
-          <div
-            className="min-w-0 overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-surface-panel px-3 py-2.5"
-            key={index}
-          >
-            <HighlightedCode code={block.code} language={block.language} />
-          </div>
-        );
-      })}
-    </div>
+        })}
+      </div>
+    </MentionPeopleProvider>
   );
 });

package/src/client/conversations/conversationActivityPreview.ts

@@ -1,6 +1,12 @@
+// Slack writes links as `<https://example.com>` or `<https://example.com|label>`.
+const SLACK_LINK_RE = /<((?:https?|mailto):[^\s|<>]+)(?:\|([^<>]*))?>/g;
+
 /** Reduce message Markdown to compact plain text for conversation previews. */
 export function formatConversationActivityPreview(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, "")

package/src/client/conversations/eventTranscript.ts

@@ -37,6 +37,7 @@ function eventMessage(
     role,
     sourceSeq: event.seq,
     timestamp: eventTimestamp(event),
+    ...(event.mentions ? { mentions: event.mentions } : undefined),
   };
 }
 
@@ -213,12 +214,12 @@ 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
           ? { trustedSummary: data.trustedSummary }
           : undefined),
+        ...(data.events ? { events: data.events } : undefined),
         ...(data.explicitMention !== undefined
           ? { explicitMention: data.explicitMention }
           : undefined),
@@ -388,6 +389,7 @@ export function transcriptMessagesFromEvents(
         eventMessage(event, "system", [
           {
             type: "structured_event",
+            ...(event.mentions ? { mentions: event.mentions } : undefined),
             namespace: data.namespace,
             name: data.name,
             version: data.version,
@@ -415,6 +417,7 @@ export function transcriptMessagesFromEvents(
         eventMessage(event, "system", [
           {
             type: "context_event",
+            ...(event.mentions ? { mentions: event.mentions } : undefined),
             event:
               data.type === "handoff"
                 ? {

package/src/client/conversations/transcriptMentions.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router";
 import type { ActorIdentity } from "@sentry/junior/api/schema";
 
 import { peoplePath } from "../format";
-import type { TranscriptViewMessage } from "../types";
+import { cn } from "../styles";
 import { TRANSCRIPT_ANCHOR_CLASS } from "./transcriptMarkdownLinks";
 import { HighlightText } from "./transcriptSearch";
 
@@ -22,16 +22,17 @@ const TranscriptMentionPeople = createContext<
   ReadonlyMap<string, ActorIdentity>
 >(new Map());
 
-/** Share the people that the API resolved for mentions in one transcript. */
-export function TranscriptMentionPeopleProvider(props: {
+/**
+ * Share the people that the API resolved for one block of display text.
+ * Use `TranscriptText` or `MentionText`, which require the API mentions.
+ */
+export function MentionPeopleProvider(props: {
   children: ReactNode;
-  messages: readonly TranscriptViewMessage[];
+  mentions: readonly ActorIdentity[];
 }) {
   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);
-    }
+  for (const person of props.mentions) {
+    if (person.slackUserId) people.set(person.slackUserId, person);
   }
   return (
     <TranscriptMentionPeople.Provider value={people}>
@@ -40,7 +41,22 @@ export function TranscriptMentionPeopleProvider(props: {
   );
 }
 
-/** Render text with Slack `<@U123>` and `<#C123|name>` tokens as readable mentions. */
+/** Render one line of display text with the people the API resolved for it. */
+export function MentionText(props: {
+  mentions: readonly ActorIdentity[];
+  text: string;
+}) {
+  return (
+    <MentionPeopleProvider mentions={props.mentions}>
+      {renderMentionText(props.text, "mention-text")}
+    </MentionPeopleProvider>
+  );
+}
+
+/**
+ * Render text with Slack `<@U123>` and `<#C123|name>` tokens as readable
+ * mentions. It reads people from the nearest `MentionPeopleProvider`.
+ */
 export function renderMentionText(text: string, keyBase: string): ReactNode[] {
   const nodes: ReactNode[] = [];
   let cursor = 0;
@@ -88,7 +104,8 @@ function MentionView(props: { mention: TranscriptMention }) {
   if (person?.email) {
     return (
       <Link
-        className={TRANSCRIPT_ANCHOR_CLASS}
+        // Previews sit in cards that disable pointer events on their text.
+        className={cn("pointer-events-auto", TRANSCRIPT_ANCHOR_CLASS)}
         title={id}
         to={peoplePath(person.email)}
       >

package/src/client/pages/admin/AdminPage.tsx

@@ -6,15 +6,23 @@ import { Card } from "../../components/layout/Card";
 import { PageHeader } from "../../components/layout/PageHeader";
 import { dashboardContainerClass } from "../../styles";
 import { pluginUserPagePath } from "../user/PluginUserPage";
+import {
+  ServiceAccountsSection,
+  useServiceAccounts,
+} from "./ServiceAccountsSection";
 
 /**
- * List admin-only plugin pages for a Junior admin.
+ * Show service accounts and admin-only plugin pages to a Junior admin.
  *
- * The server hides admin pages from other viewers and refuses to serve them,
- * so this page only arranges links.
+ * The server hides admin pages and service accounts from other viewers and
+ * refuses their requests, so this page only arranges them.
  */
 export function AdminPage(props: { pages: PluginUserPageLink[] }) {
   const adminPages = props.pages.filter((page) => page.navigation === "admin");
+  const serviceAccounts = useServiceAccounts();
+  const nothingToSet =
+    adminPages.length === 0 &&
+    serviceAccounts.data?.serviceAccounts.length === 0;
   return (
     <div className={`${dashboardContainerClass} px-4 py-8 md:px-8`}>
       <section className="mx-auto grid w-full max-w-3xl gap-6">
@@ -28,7 +36,8 @@ export function AdminPage(props: { pages: PluginUserPageLink[] }) {
           }
           title="Admin"
         />
-        {adminPages.length === 0 ? (
+        <ServiceAccountsSection accountsQuery={serviceAccounts} />
+        {nothingToSet ? (
           <Card padding="md">
             <div className="flex items-center gap-4">
               <div className="grid size-10 shrink-0 place-items-center rounded-md border border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted">
@@ -39,7 +48,7 @@ export function AdminPage(props: { pages: PluginUserPageLink[] }) {
               </p>
             </div>
           </Card>
-        ) : (
+        ) : adminPages.length === 0 ? null : (
           <div className="grid gap-3">
             {adminPages.map((page) => (
               <Link

package/src/client/pages/admin/ServiceAccountsSection.tsx

@@ -0,0 +1,231 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  type UseQueryResult,
+} from "@tanstack/react-query";
+import { KeyRound } from "lucide-react";
+import type { z } from "zod";
+import {
+  disconnectServiceAccountResponseSchema,
+  serviceAccountListSchema,
+  startServiceAccountSignInResponseSchema,
+  type serviceAccountSchema,
+} from "@sentry/junior/api/schema";
+import { getDashboardAgentName } from "../../agentName";
+import { Button } from "../../components/Button";
+import { InlineError } from "../../components/InlineError";
+import { StatusChip } from "../../components/StatusChip";
+import { Card } from "../../components/layout/Card";
+import { formatRelativeTime } from "../../format";
+import { del, fetchDashboardJson, post } from "../../http";
+
+type ServiceAccount = z.infer<typeof serviceAccountSchema>;
+
+const serviceAccountsQueryKey = ["dashboard", "service-accounts"] as const;
+
+function serviceAccountPath(provider: string): string {
+  return `/api/service-accounts/${encodeURIComponent(provider)}`;
+}
+
+/** Load the plugins that support a service account, with their status. */
+export function useServiceAccounts() {
+  return useQuery({
+    queryKey: serviceAccountsQueryKey,
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(
+        serviceAccountListSchema,
+        "/api/service-accounts",
+        signal,
+      ),
+    // OAuth finishes in another tab. Refresh when the admin returns.
+    refetchOnWindowFocus: true,
+    retry: false,
+  });
+}
+
+function statusText(account: ServiceAccount): string {
+  const usage = !account.userOAuth
+    ? `Everyone uses this account. People cannot connect their own ${account.displayName} account.`
+    : `People who have not connected their own ${account.displayName} account use this account.`;
+  if (!account.connected) {
+    const blocked = !account.userOAuth
+      ? ` ${account.displayName} is not available until you connect it.`
+      : "";
+    return `Not connected.${blocked} ${usage} Sign in as the shared account, not as yourself.`;
+  }
+  const by = account.connectedBy ?? "the CLI";
+  return `Connected by ${by} ${formatRelativeTime(account.connectedAt)}. ${usage}`;
+}
+
+/**
+ * Connect and disconnect the shared provider accounts that Junior uses for
+ * people who have not connected their own account.
+ */
+export function ServiceAccountsSection(props: {
+  accountsQuery: UseQueryResult<z.infer<typeof serviceAccountListSchema>>;
+}) {
+  const { accountsQuery } = props;
+  const queryClient = useQueryClient();
+  const connectMutation = useMutation({
+    mutationFn: (input: { provider: string; popup: Window | null }) =>
+      post(
+        startServiceAccountSignInResponseSchema,
+        serviceAccountPath(input.provider),
+        {},
+      ),
+    onSuccess: ({ authorizationUrl }, { popup }) => {
+      // A blocked popup returns null, so use this tab. A tab the admin
+      // closed means they cancelled; keep them on the dashboard.
+      if (!popup) {
+        window.location.assign(authorizationUrl);
+        return;
+      }
+      if (popup.closed) return;
+      popup.opener = null;
+      popup.location.href = authorizationUrl;
+    },
+    onError: (_error, { popup }) => {
+      popup?.close();
+    },
+  });
+  const disconnectMutation = useMutation({
+    mutationFn: (account: ServiceAccount) =>
+      del(
+        disconnectServiceAccountResponseSchema,
+        serviceAccountPath(account.provider),
+      ),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: serviceAccountsQueryKey }),
+  });
+
+  const accounts = accountsQuery.data?.serviceAccounts ?? [];
+  if (accountsQuery.isSuccess && accounts.length === 0) {
+    return null;
+  }
+  const busy = connectMutation.isPending || disconnectMutation.isPending;
+  const pendingProvider = connectMutation.isPending
+    ? connectMutation.variables?.provider
+    : disconnectMutation.isPending
+      ? disconnectMutation.variables?.provider
+      : undefined;
+  const listFailed = !accountsQuery.data && accountsQuery.isError;
+  const displayedError = connectMutation.isError
+    ? "Could not start the sign-in. Try again."
+    : disconnectMutation.isError
+      ? "Could not disconnect the account. Try again."
+      : listFailed
+        ? "Could not load service accounts. Try again."
+        : undefined;
+
+  return (
+    <Card as="section" padding="md">
+      <h2 className="m-0 font-display text-base font-medium text-dashboard-text">
+        Service accounts
+      </h2>
+      <p className="mt-1 mb-4 text-sm text-dashboard-text-muted">
+        A shared account that Junior uses for a plugin. It can do only what its
+        plugin allows, usually read. Everyone who can talk to{" "}
+        {getDashboardAgentName()} can use it, so give it only access that all of
+        them may have.
+      </p>
+      {displayedError ? (
+        <InlineError className={listFailed ? undefined : "mb-4"}>
+          {displayedError}
+        </InlineError>
+      ) : null}
+      {listFailed ? null : accountsQuery.isPending ? (
+        <p className="m-0 text-sm text-dashboard-text-muted">
+          Loading service accounts…
+        </p>
+      ) : (
+        <div className="space-y-2">
+          {accounts.map((account) => (
+            <div
+              className="flex items-center gap-3 rounded-md border border-dashboard-border-strong p-3"
+              key={account.provider}
+            >
+              <KeyRound
+                aria-hidden="true"
+                className="shrink-0 text-dashboard-accent"
+                size={16}
+              />
+              <div className="min-w-0 flex-1">
+                <div className="flex flex-wrap items-center gap-2">
+                  <p className="m-0 truncate text-sm font-semibold">
+                    {account.displayName}
+                  </p>
+                  <StatusChip
+                    size="compact"
+                    tone={
+                      account.connected
+                        ? "success"
+                        : !account.userOAuth
+                          ? "warning"
+                          : "neutral"
+                    }
+                  >
+                    {account.connected ? "connected" : "not connected"}
+                  </StatusChip>
+                  {!account.userOAuth ? (
+                    <StatusChip size="compact" tone="neutral">
+                      shared only
+                    </StatusChip>
+                  ) : null}
+                </div>
+                <p className="mt-1 mb-0 break-words text-xs text-dashboard-text-muted">
+                  {statusText(account)}
+                </p>
+                <p className="mt-1 mb-0 break-words font-mono text-xs text-dashboard-text-faint">
+                  {account.tools.join(", ")}
+                </p>
+              </div>
+              {account.connected ? (
+                <Button
+                  aria-busy={
+                    disconnectMutation.isPending &&
+                    pendingProvider === account.provider
+                  }
+                  aria-label={`Disconnect the ${account.displayName} service account`}
+                  disabled={busy}
+                  onClick={() => {
+                    connectMutation.reset();
+                    disconnectMutation.mutate(account);
+                  }}
+                  tone="danger"
+                >
+                  Disconnect
+                </Button>
+              ) : null}
+              <Button
+                aria-busy={
+                  connectMutation.isPending &&
+                  pendingProvider === account.provider
+                }
+                aria-label={`${account.connected ? "Reconnect" : "Connect"} the ${account.displayName} service account`}
+                disabled={busy}
+                onClick={() => {
+                  disconnectMutation.reset();
+                  // Open the tab during the click so popup blockers allow
+                  // it, then point it at the provider.
+                  const popup = window.open("about:blank", "_blank");
+                  connectMutation.mutate({
+                    provider: account.provider,
+                    popup,
+                  });
+                }}
+              >
+                {connectMutation.isPending &&
+                pendingProvider === account.provider
+                  ? "Connecting…"
+                  : account.connected
+                    ? "Reconnect"
+                    : "Connect"}
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </Card>
+  );
+}

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

@@ -18,7 +18,7 @@ import {
 import { Card } from "../../components/layout/Card";
 import { formatCostSummary } from "../../format";
 
-const COST_COLOR = "#67e8f9";
+const COST_COLOR = "var(--color-cyan-300)";
 
 /** Render linked conversation spend for completed automation executions. */
 export function AutomationCostChart(props: {
@@ -103,7 +103,7 @@ export function AutomationCostChart(props: {
             format={(value) => formatCostSummary({ total: value })}
             layout={layout}
             maximum={maximum}
-            stroke="#e2e8f0"
+            stroke="var(--color-slate-200)"
           />
           <ActivityChartDateLabels
             dates={days.map((day) => day.date)}

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

@@ -88,7 +88,10 @@ export function AutomationDetailsDrawer(props: {
           <h3 className="mt-0 mb-2 text-sm font-medium text-dashboard-text-muted">
             What to do
           </h3>
-          <TranscriptText text={automation.instruction} />
+          <TranscriptText
+            mentions={automation.mentions ?? []}
+            text={automation.instruction}
+          />
         </div>
         <AutomationLifecycle
           key={`${automation.kind}:${automation.id}`}

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

@@ -18,7 +18,7 @@ import {
 import { Card } from "../../components/layout/Card";
 import { formatActivityChartAverage } from "../../format";
 
-const EXECUTION_COLOR = "#fbbf24";
+const EXECUTION_COLOR = "var(--color-amber-400)";
 
 /** Render completed automation executions over a trailing window. */
 export function AutomationExecutionChart(props: {
@@ -95,7 +95,7 @@ export function AutomationExecutionChart(props: {
             format={formatActivityChartAverage}
             layout={layout}
             maximum={maximum}
-            stroke="#e2e8f0"
+            stroke="var(--color-slate-200)"
           />
           <ActivityChartDateLabels
             dates={days.map((day) => day.date)}

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

@@ -15,9 +15,9 @@ import {
 import { Card } from "../../components/layout/Card";
 
 const series = [
-  { color: "#6ee7b7", key: "completed", label: "Completed" },
-  { color: "#fda4af", key: "failed", label: "Failed" },
-  { color: "#fcd34d", key: "blocked", label: "Blocked" },
+  { color: "var(--color-emerald-300)", key: "completed", label: "Completed" },
+  { color: "var(--color-rose-300)", key: "failed", label: "Failed" },
+  { color: "var(--color-amber-300)", key: "blocked", label: "Blocked" },
 ] as const;
 
 /** Render one automation's terminal executions by status over a trailing window. */

package/src/client/pages/code/CodeActivityChart.tsx

@@ -19,9 +19,9 @@ import { ChartLegend } from "../../components/charts/ChartLegend";
 import { Card } from "../../components/layout/Card";
 import { formatActivityChartAverage } from "../../format";
 
-const CREATED_COLOR = "#67e8f9";
-const MERGED_COLOR = "#6ee7b7";
-const CLOSED_COLOR = "#fb7185";
+const CREATED_COLOR = "var(--color-cyan-300)";
+const MERGED_COLOR = "var(--color-emerald-300)";
+const CLOSED_COLOR = "var(--color-rose-400)";
 
 /** Render created, merged, and closed code changes over a trailing window. */
 export function CodeActivityChart(props: {
@@ -143,7 +143,7 @@ export function CodeActivityChart(props: {
             format={formatActivityChartAverage}
             layout={layout}
             maximum={maximum}
-            stroke="#e2e8f0"
+            stroke="var(--color-slate-200)"
           />
           <ActivityChartDateLabels
             dates={days.map((day) => day.date)}

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

@@ -50,6 +50,7 @@ import { StatCard } from "../../components/metrics/StatCard";
 import { StatusChip } from "../../components/StatusChip";
 import { StatusDot } from "../../components/StatusDot";
 import { TextArea, TextInput } from "../../components/TextInput";
+import { ThemeSwitcher } from "../../components/ThemeSwitcher";
 import { TranscriptMarkdown } from "../../conversations/TranscriptMarkdown";
 import { TranscriptText } from "../../conversations/TranscriptText";
 import { TranscriptMessageShell } from "../../conversations/TranscriptMessageShell";
@@ -231,7 +232,6 @@ function FoundationsGalleryPage() {
       <Fixture title="Conversation navigation">
         <DashboardChromeProvider>
           <DashboardHeader
-            compact
             mobileNavigationOpen={navigationOpen}
             navItems={[
               { key: "code", label: "Code", to: "/code" },
@@ -301,6 +301,9 @@ function FoundationsGalleryPage() {
           </Drawer>
         ) : null}
       </Fixture>
+      <Fixture title="Theme">
+        <ThemeSwitcher className="max-w-64" />
+      </Fixture>
       <Fixture title="Color tokens">
         <div className="grid gap-4">
           <TokenSwatchRow
@@ -733,6 +736,7 @@ function TranscriptsGalleryPage() {
               Junior
             </span>
             <TranscriptText
+              mentions={[]}
               role="assistant"
               text={
                 "Your reminder is set.\n\nI'll remind you to drink water every 30 minutes until you ask me to stop."
@@ -793,10 +797,10 @@ function TranscriptsGalleryPage() {
         <TranscriptMarkdown text={GFM_SAMPLE} />
       </Fixture>
       <Fixture title="TranscriptText assistant">
-        <TranscriptText role="assistant" text={MIXED_ASSISTANT} />
+        <TranscriptText mentions={[]} role="assistant" text={MIXED_ASSISTANT} />
       </Fixture>
       <Fixture title="TranscriptText user">
-        <TranscriptText role="user" text={EVENT_NOTIFICATION} />
+        <TranscriptText mentions={[]} role="user" text={EVENT_NOTIFICATION} />
       </Fixture>
       <Fixture title="Tool calls">
         <ToolCallGallery />

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

@@ -107,6 +107,35 @@ const EVENTS: ConversationReportEventData[] = [
     trustedSummary: "GitHub PR getsentry/junior#1200 received a review.",
     text: "The preview is ready for visual review.",
   },
+  {
+    type: "message",
+    messageId: "gallery-event-batch",
+    role: "user",
+    eventType: "pull_request.review.approved",
+    eventObjectType: "code_change",
+    trustedSummary: "GitHub PR getsentry/junior#1200 was approved by dcramer.",
+    events: [
+      {
+        eventType: "pull_request.review.approved",
+        label: "GitHub PR getsentry/junior#1200",
+        trustedSummary:
+          "GitHub PR getsentry/junior#1200 was approved by dcramer.",
+      },
+      {
+        eventType: "pull_request.review.commented",
+        label: "GitHub PR getsentry/junior#1200",
+        trustedSummary:
+          "GitHub PR getsentry/junior#1200 received a review comment from cursor[bot].",
+      },
+      {
+        eventType: "pull_request.review_comment.created",
+        label: "GitHub PR getsentry/junior#1200",
+        trustedSummary:
+          "GitHub PR getsentry/junior#1200 received an inline review comment from cursor[bot].",
+      },
+    ],
+    text: "[task]\n\nThis is a task, not a message from a person.\n\nYou received 3 events.",
+  },
 ];
 
 const CONVERSATION: ConversationDetailReport = {