@sentry/junior-dashboard 0.248.0 → 0.250.0

package/src/client/pages/ConnectionsPage.tsx

@@ -0,0 +1,207 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Plug } from "lucide-react";
+import type { z } from "zod";
+import {
+  connectionListSchema,
+  disconnectConnectionResponseSchema,
+  startConnectionResponseSchema,
+  type connectionSchema,
+} from "@sentry/junior/api/schema";
+import { del, fetchDashboardJson, post } from "../http";
+import { dashboardContainerClass } from "../styles";
+import { getDashboardAgentName } from "../agentName";
+import { useDocumentTitle } from "../documentTitle";
+import { Button } from "../components/Button";
+import { InlineError } from "../components/InlineError";
+import { Card } from "../components/layout/Card";
+
+type Connection = z.infer<typeof connectionSchema>;
+
+const connectionsQueryKey = ["dashboard", "connections"] as const;
+
+function connectionPath(provider: string): string {
+  return `/api/connections/${encodeURIComponent(provider)}`;
+}
+
+/** Connect and disconnect the viewer's plugin accounts. */
+export function ConnectionsPage() {
+  useDocumentTitle("Connected accounts");
+  const queryClient = useQueryClient();
+  const connectionsQuery = useQuery({
+    queryKey: connectionsQueryKey,
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(connectionListSchema, "/api/connections", signal),
+    // OAuth finishes in another tab. Refresh when the viewer returns.
+    refetchOnWindowFocus: true,
+    retry: false,
+  });
+  const connectMutation = useMutation({
+    mutationFn: (input: { provider: string; popup: Window | null }) =>
+      post(startConnectionResponseSchema, connectionPath(input.provider), {}),
+    onSuccess: ({ authorizationUrl }, { popup }) => {
+      // A blocked popup returns null, so use this tab. A tab the viewer
+      // 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: (connection: Connection) =>
+      del(
+        disconnectConnectionResponseSchema,
+        connectionPath(connection.provider),
+      ),
+    onSuccess: (_result, connection) => {
+      queryClient.setQueryData<{ connections: Connection[] }>(
+        connectionsQueryKey,
+        (current) =>
+          current && {
+            connections: current.connections.map((item) =>
+              item.provider === connection.provider
+                ? {
+                    provider: item.provider,
+                    displayName: item.displayName,
+                    description: item.description,
+                    connected: false,
+                  }
+                : item,
+            ),
+          },
+      );
+    },
+  });
+  const connections = connectionsQuery.data?.connections ?? [];
+  const busy = connectMutation.isPending || disconnectMutation.isPending;
+  const pendingProvider = connectMutation.isPending
+    ? connectMutation.variables?.provider
+    : disconnectMutation.isPending
+      ? disconnectMutation.variables?.provider
+      : undefined;
+  const listFailed = !connectionsQuery.data && connectionsQuery.isError;
+  const displayedError = connectMutation.isError
+    ? "Could not start the connection. Try again."
+    : disconnectMutation.isError
+      ? "Could not disconnect the account. Try again."
+      : listFailed
+        ? "Could not load connected accounts. Try again."
+        : undefined;
+
+  return (
+    <div className={`${dashboardContainerClass} px-4 py-8 md:px-8`}>
+      <section className="mx-auto w-full max-w-3xl">
+        <h1 className="m-0 text-2xl font-bold">Connected accounts</h1>
+        <p className="mt-2 mb-0 max-w-2xl text-sm text-dashboard-text-muted">
+          Connect an account so {getDashboardAgentName()} can act as you in
+          conversations you start here.
+        </p>
+
+        <Card className="mb-0 mt-6" padding="md" variant="raised">
+          {displayedError ? (
+            <InlineError className={listFailed ? undefined : "mb-4"}>
+              {displayedError}
+            </InlineError>
+          ) : null}
+          {listFailed ? null : (
+            <div className="space-y-2">
+              {connectionsQuery.isPending ? (
+                <p className="m-0 text-sm text-dashboard-text-muted">
+                  Loading connected accounts…
+                </p>
+              ) : connections.length === 0 ? (
+                <p className="m-0 text-sm text-dashboard-text-muted">
+                  No installed plugins support account connections.
+                </p>
+              ) : (
+                connections.map((connection) => (
+                  <div
+                    className="flex items-center gap-3 rounded-md border border-dashboard-border-strong p-3"
+                    key={connection.provider}
+                  >
+                    <Plug
+                      className="shrink-0 text-dashboard-accent"
+                      size={16}
+                    />
+                    <div className="min-w-0 flex-1">
+                      <p className="m-0 truncate text-sm font-semibold">
+                        {connection.displayName}
+                      </p>
+                      <p className="mt-1 mb-0 line-clamp-2 break-words text-xs text-dashboard-text-muted">
+                        {connection.connected ? (
+                          connection.account ? (
+                            <>
+                              Connected as{" "}
+                              {connection.account.url ? (
+                                <a
+                                  className="text-dashboard-text"
+                                  href={connection.account.url}
+                                  rel="noreferrer"
+                                  target="_blank"
+                                >
+                                  {connection.account.label}
+                                </a>
+                              ) : (
+                                connection.account.label
+                              )}
+                            </>
+                          ) : (
+                            "Connected"
+                          )
+                        ) : (
+                          connection.description
+                        )}
+                      </p>
+                    </div>
+                    {connection.connected ? (
+                      <Button
+                        aria-busy={pendingProvider === connection.provider}
+                        aria-label={`Disconnect ${connection.displayName}`}
+                        disabled={busy}
+                        onClick={() => {
+                          connectMutation.reset();
+                          disconnectMutation.mutate(connection);
+                        }}
+                        tone="danger"
+                      >
+                        {pendingProvider === connection.provider
+                          ? "Disconnecting…"
+                          : "Disconnect"}
+                      </Button>
+                    ) : (
+                      <Button
+                        aria-busy={pendingProvider === connection.provider}
+                        aria-label={`Connect ${connection.displayName}`}
+                        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: connection.provider,
+                            popup,
+                          });
+                        }}
+                      >
+                        {pendingProvider === connection.provider
+                          ? "Connecting…"
+                          : "Connect"}
+                      </Button>
+                    )}
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+        </Card>
+      </section>
+    </div>
+  );
+}

package/src/client/pages/PersonalTokensPage.tsx

@@ -110,11 +110,11 @@ export function PersonalTokensPage() {
 
         <Card className="mb-0 mt-6" padding="md" variant="raised">
           {createdToken ? (
-            <div className="mt-5 rounded border border-emerald-400/40 bg-emerald-400/5 p-3">
+            <div className="mt-5 rounded-md border border-emerald-400/40 bg-emerald-400/5 p-3">
               <p className="mt-0 mb-2 text-sm font-semibold">
                 Copy this token now. It won't be shown again.
               </p>
-              <code className="block overflow-x-auto rounded bg-black p-2 text-xs text-emerald-300">
+              <code className="block overflow-x-auto rounded-md bg-dashboard-ink p-2 text-xs text-emerald-300">
                 {createdToken.token}
               </code>
               <Button
@@ -166,10 +166,10 @@ export function PersonalTokensPage() {
             ) : (
               tokens.map((token) => (
                 <div
-                  className="flex items-center gap-3 rounded border border-white/10 p-3"
+                  className="flex items-center gap-3 rounded-md border border-dashboard-border-strong p-3"
                   key={token.id}
                 >
-                  <KeyRound className="text-[#beaaff]" size={16} />
+                  <KeyRound className="text-dashboard-accent" size={16} />
                   <div className="min-w-0 flex-1">
                     <p className="m-0 truncate text-sm font-semibold">
                       {token.name}

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

@@ -31,7 +31,7 @@ export function AdminPage(props: { pages: PluginUserPageLink[] }) {
         {adminPages.length === 0 ? (
           <Card padding="md">
             <div className="flex items-center gap-4">
-              <div className="grid size-10 shrink-0 place-items-center rounded border border-white/[0.07] bg-white/[0.025] text-dashboard-text-muted">
+              <div className="grid size-10 shrink-0 place-items-center rounded-md border border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted">
                 <Boxes aria-hidden="true" size={17} />
               </div>
               <p className="m-0 text-sm text-dashboard-text-muted">
@@ -50,7 +50,7 @@ export function AdminPage(props: { pages: PluginUserPageLink[] }) {
                 <Card padding="md">
                   <div className="flex items-center gap-3">
                     <div className="min-w-0 flex-1">
-                      <div className="font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
+                      <div className="font-sans font-medium text-xs text-dashboard-text-muted">
                         {page.pluginDisplayName}
                       </div>
                       <h2 className="mt-1 mb-0 font-display text-base font-medium text-dashboard-text">

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

@@ -45,7 +45,7 @@ export function AutomationCostChart(props: {
         <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
           {formatCostSummary({ total }) || "$0.00"}
         </h2>
-        <p className="mt-1 mb-0 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <p className="mt-1 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           Spend from conversations linked to completed automation executions.
         </p>
       </div>
@@ -112,7 +112,7 @@ export function AutomationCostChart(props: {
           />
         </ChartSvg>
         {!hasCost ? (
-          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-mono text-xs text-dashboard-text-muted">
+          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No linked spend in this period.
           </div>
         ) : null}

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

@@ -17,6 +17,7 @@ import {
 import { conversationPath } from "../../conversations/conversationRoutes";
 import { formatTime, peoplePath } from "../../format";
 import { TranscriptText } from "../../conversations/TranscriptText";
+import { cn, dashboardInlineLinkClass } from "../../styles";
 
 /** Show one automation's instruction and metadata in a right-side slide-out. */
 export function AutomationDetailsDrawer(props: {
@@ -30,7 +31,7 @@ export function AutomationDetailsDrawer(props: {
   const { automation } = props;
   const createdBy = automation.createdByEmail ? (
     <Link
-      className="font-semibold text-dashboard-text underline decoration-white/20 underline-offset-2 transition-colors hover:decoration-white/60"
+      className={cn("font-semibold", dashboardInlineLinkClass)}
       to={peoplePath(automation.createdByEmail)}
     >
       {automation.ownedByViewer ? "you" : automation.createdBy}
@@ -175,10 +176,7 @@ function AutomationExecutionSummary(props: {
   return (
     <div className="text-sm text-dashboard-text-muted">
       {automation.totalRuns > 0 ? (
-        <Link
-          className="text-dashboard-text underline decoration-white/20 underline-offset-2 hover:decoration-white/60"
-          to={executionsPath}
-        >
+        <Link className={dashboardInlineLinkClass} to={executionsPath}>
           {runCount} runs / {rangeLabel}
         </Link>
       ) : (
@@ -189,10 +187,7 @@ function AutomationExecutionSummary(props: {
       <span className="mx-2 opacity-45">·</span>
       <span>
         {automation.totalRuns > 0 ? (
-          <Link
-            className="text-dashboard-text underline decoration-white/20 underline-offset-2 hover:decoration-white/60"
-            to={executionsPath}
-          >
+          <Link className={dashboardInlineLinkClass} to={executionsPath}>
             {automation.totalRuns} total
           </Link>
         ) : (
@@ -201,7 +196,7 @@ function AutomationExecutionSummary(props: {
         {automation.lastRunAt ? " · Last run " : " · Never run"}
         {automation.lastRunAt && automation.lastConversationId ? (
           <Link
-            className="text-dashboard-text underline decoration-white/20 underline-offset-2 hover:decoration-white/60"
+            className={dashboardInlineLinkClass}
             to={conversationPath(automation.lastConversationId)}
           >
             {formatAutomationRunTime(automation.lastRunAt)}

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

@@ -425,7 +425,7 @@ export function AutomationEditor(props: {
           <div className="flex shrink-0 gap-2">
             <Link
               to={props.returnPath}
-              className="inline-flex min-h-11 items-center rounded border border-dashboard-border-emphasis px-3 text-sm text-dashboard-text no-underline sm:min-h-9"
+              className="inline-flex min-h-11 items-center rounded-md border border-dashboard-border-emphasis px-3 text-sm text-dashboard-text no-underline sm:min-h-9"
             >
               Cancel
             </Link>

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

@@ -45,7 +45,7 @@ export function AutomationExecutionChart(props: {
         <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
           {totals.reduce((sum, value) => sum + value, 0).toLocaleString()} runs
         </h2>
-        <p className="mt-1 mb-0 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <p className="mt-1 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           Completed automation executions over time.
         </p>
       </div>
@@ -104,7 +104,7 @@ export function AutomationExecutionChart(props: {
           />
         </ChartSvg>
         {!hasExecutions ? (
-          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-mono text-xs text-dashboard-text-muted">
+          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No automation executions in this period.
           </div>
         ) : null}

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

@@ -44,7 +44,7 @@ export function AutomationExecutionStatusChart(props: {
         <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
           Executions over time
         </h2>
-        <p className="mt-1 mb-0 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <p className="mt-1 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           {bucketUnit === "hour"
             ? "Terminal runs for this automation each hour."
             : bucketUnit === "6hour"
@@ -121,7 +121,7 @@ export function AutomationExecutionStatusChart(props: {
           />
         </ChartSvg>
         {!hasExecutions ? (
-          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-mono text-xs text-dashboard-text-muted">
+          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No automation executions in this period.
           </div>
         ) : null}

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

@@ -87,7 +87,7 @@ export function AutomationExecutionsPage(props: { enabled: boolean }) {
               : "Automation executions could not be loaded. Try again."}
           </InlineError>
           <Link
-            className="mt-3 inline-flex items-center gap-2 font-mono text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
+            className="mt-3 inline-flex items-center gap-2 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
             to={
               automationId ? automationPath(automationId) : "/automations/list"
             }
@@ -122,7 +122,7 @@ function AutomationExecutionsView(props: {
     <>
       <div>
         <Link
-          className="mb-3 inline-flex items-center gap-2 font-mono text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
+          className="mb-3 inline-flex items-center gap-2 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
           to={props.backTo}
         >
           <ArrowLeft aria-hidden="true" size={14} />
@@ -177,7 +177,7 @@ function AutomationExecutionsView(props: {
             <div className="min-w-[36rem]">
               <div
                 className={cn(
-                  "sticky top-0 z-[1] hidden items-center gap-4 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-4 py-2.5 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted md:grid",
+                  "sticky top-0 z-[1] hidden items-center gap-4 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-4 py-2.5 font-sans font-medium text-xs text-dashboard-text-muted md:grid",
                   EXECUTION_GRID,
                 )}
                 role="row"
@@ -290,7 +290,7 @@ function MetricCell(props: { label: string; value: string }) {
     <div className="min-w-0 max-md:flex max-md:items-center max-md:gap-2">
       <div
         aria-hidden="true"
-        className="mb-1 hidden font-mono text-2xs uppercase tracking-[0.1em] text-dashboard-text-muted max-md:mb-0 max-md:block"
+        className="mb-1 hidden font-sans font-medium text-2xs text-dashboard-text-muted max-md:mb-0 max-md:block"
       >
         {props.label}
       </div>

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

@@ -58,7 +58,7 @@ export function AutomationRow(props: {
           <button
             aria-expanded={props.selected}
             aria-label={`View automation details: ${automation.title}`}
-            className="block w-full min-w-0 cursor-pointer rounded border-0 bg-transparent p-0 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+            className="block w-full min-w-0 cursor-pointer rounded-md border-0 bg-transparent p-0 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
             onClick={props.onSelect}
             type="button"
           >
@@ -88,7 +88,7 @@ export function AutomationRow(props: {
           <div className="mt-2.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-dashboard-text-muted">
             {automation.createdByEmail ? (
               <Link
-                className="inline-flex min-w-0 max-w-full items-center gap-2 rounded text-dashboard-text no-underline hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+                className="inline-flex min-w-0 max-w-full items-center gap-2 rounded-md text-dashboard-text no-underline hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
                 title={automation.createdBy}
                 to={peoplePath(automation.createdByEmail)}
               >
@@ -320,12 +320,12 @@ function AutomationActions(props: {
           <Link
             role="menuitem"
             to={props.editPath}
-            className="flex min-h-11 items-center rounded px-3 text-sm text-dashboard-text no-underline hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-dashboard-focus"
+            className="flex min-h-11 items-center rounded-md px-3 text-sm text-dashboard-text no-underline hover:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-dashboard-focus"
           >
             Edit automation
           </Link>
           <button
-            className="flex min-h-11 w-full cursor-pointer items-center gap-2 rounded border-0 bg-transparent px-3 text-sm text-rose-300 hover:bg-dashboard-fill-hover focus-visible:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
+            className="flex min-h-11 w-full cursor-pointer items-center gap-2 rounded-md border-0 bg-transparent px-3 text-sm text-rose-300 hover:bg-dashboard-fill-hover focus-visible:bg-dashboard-fill-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus"
             onClick={() => {
               close();
               props.onDelete();

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

@@ -156,7 +156,7 @@ export function AutomationRunsPage(props: { enabled: boolean }) {
                 <div className="min-w-[44rem]">
                   <div
                     className={cn(
-                      "sticky top-0 z-[1] hidden items-center gap-4 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-4 py-2.5 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted md:grid",
+                      "sticky top-0 z-[1] hidden items-center gap-4 border-b border-dashboard-border-subtle bg-dashboard-overlay-soft px-4 py-2.5 font-sans font-medium text-xs text-dashboard-text-muted md:grid",
                       RUN_GRID,
                     )}
                     role="row"
@@ -278,7 +278,7 @@ function MetricCell(props: { label: string; value: string }) {
     <div className="min-w-0 max-md:flex max-md:items-center max-md:gap-2">
       <div
         aria-hidden="true"
-        className="mb-1 hidden font-mono text-2xs uppercase tracking-[0.1em] text-dashboard-text-muted max-md:mb-0 max-md:block"
+        className="mb-1 hidden font-sans font-medium text-2xs text-dashboard-text-muted max-md:mb-0 max-md:block"
       >
         {props.label}
       </div>
@@ -297,7 +297,7 @@ function AutomationKindIcon(props: { kind: AutomationRun["kind"] }) {
   return (
     <span
       aria-label={label}
-      className="inline-flex size-3.5 shrink-0 items-center justify-center text-cyan-300/80"
+      className="inline-flex size-3.5 shrink-0 items-center justify-center text-dashboard-accent/80"
       role="img"
       title={label}
     >

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

@@ -152,7 +152,7 @@ export function AutomationScheduleFields(props: {
                       })
                     }
                     className={cn(
-                      "min-h-11 cursor-pointer rounded border px-1 text-xs font-medium capitalize focus-visible:outline-2 focus-visible:outline-dashboard-focus sm:min-h-10 sm:text-sm",
+                      "min-h-11 cursor-pointer rounded-md border px-1 text-xs font-medium capitalize focus-visible:outline-2 focus-visible:outline-dashboard-focus sm:min-h-10 sm:text-sm",
                       value.weekdays?.includes(day)
                         ? "border-dashboard-focus/50 bg-dashboard-focus/10 text-dashboard-focus"
                         : "border-dashboard-border-emphasis text-dashboard-text-muted hover:bg-dashboard-fill-hover",

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

@@ -77,7 +77,7 @@ export function AutomationVersionsPage(props: { enabled: boolean }) {
 function BackLink(props: { to: string }) {
   return (
     <Link
-      className="mb-3 inline-flex items-center gap-2 font-mono text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
+      className="mb-3 inline-flex items-center gap-2 font-sans text-xs text-dashboard-text-muted no-underline hover:text-dashboard-text"
       to={props.to}
     >
       <ArrowLeft aria-hidden="true" size={14} />

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

@@ -40,7 +40,10 @@ export function CodeActivityChart(props: {
   const gap = Math.max(1, barWidth * 0.2);
   const groupWidth = barWidth * 3 + gap * 2;
   const totals = days.map((day) => day.created + day.merged + day.closed);
-  const maximum = Math.max(1, ...days.flatMap((day) => [day.created, day.merged, day.closed]));
+  const maximum = Math.max(
+    1,
+    ...days.flatMap((day) => [day.created, day.merged, day.closed]),
+  );
   const average = activityChartAverage(days.map((day) => day.created));
   const hasActivity = totals.some((total) => total > 0);
 
@@ -51,7 +54,7 @@ export function CodeActivityChart(props: {
           <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
             Changes over time
           </h2>
-          <p className="mt-1 mb-0 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+          <p className="mt-1 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
             Code changes created, merged, and closed each day.
           </p>
         </div>
@@ -106,9 +109,7 @@ export function CodeActivityChart(props: {
                 date={day.date}
                 summary={`${day.created} created, ${day.merged} merged, ${day.closed} closed`}
               >
-                <g
-                  tabIndex={0}
-                >
+                <g tabIndex={0}>
                   {series.map((entry, seriesIndex) => {
                     const height = (entry.value / maximum) * layout.plotHeight;
                     const x = groupX + seriesIndex * (barWidth + gap);
@@ -151,7 +152,7 @@ export function CodeActivityChart(props: {
           />
         </ChartSvg>
         {!hasActivity ? (
-          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-mono text-xs text-dashboard-text-muted">
+          <div className="pointer-events-none absolute inset-0 grid place-items-center pt-12 font-sans text-xs text-dashboard-text-muted">
             No code changes in this period.
           </div>
         ) : null}

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

@@ -18,7 +18,7 @@ export function CodeChangeRow(props: { change: CodeChangeSummaryReport }) {
         <div className="truncate font-display text-sm text-dashboard-text">
           {change.url ? (
             <a
-              className="text-inherit no-underline hover:text-cyan-100"
+              className="text-inherit no-underline hover:text-dashboard-accent-text"
               href={change.url}
               rel="noreferrer"
               target="_blank"

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

@@ -96,7 +96,7 @@ function CodeOverview(props: {
                 <col className="w-28" />
                 <col className="w-28" />
               </colgroup>
-              <thead className="font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+              <thead className="font-sans font-medium text-xs text-dashboard-text-muted">
                 <tr className="border-b border-dashboard-border-subtle">
                   <th className="px-4 py-2.5 font-medium">Repository</th>
                   <th className="px-4 py-2.5 text-right font-medium whitespace-nowrap">
@@ -119,7 +119,7 @@ function CodeOverview(props: {
                     <td className="min-w-0 px-4 py-3">
                       <div className="truncate font-display text-sm text-dashboard-text">
                         <Link
-                          className="text-inherit no-underline hover:text-cyan-100"
+                          className="text-inherit no-underline hover:text-dashboard-accent-text"
                           to={codeRepositoryPath(repository.id)}
                         >
                           {repository.name}
@@ -129,13 +129,13 @@ function CodeOverview(props: {
                         {repository.provider}
                       </div>
                     </td>
-                    <td className="px-4 py-3 text-right font-mono text-sm whitespace-nowrap text-dashboard-text">
+                    <td className="px-4 py-3 text-right font-sans text-sm tabular-nums whitespace-nowrap text-dashboard-text">
                       {repository.created}
                     </td>
-                    <td className="px-4 py-3 text-right font-mono text-sm whitespace-nowrap text-dashboard-text">
+                    <td className="px-4 py-3 text-right font-sans text-sm tabular-nums whitespace-nowrap text-dashboard-text">
                       {formatMergeRate(repository.mergeRate)}
                     </td>
-                    <td className="px-4 py-3 text-right font-mono text-sm whitespace-nowrap text-dashboard-text">
+                    <td className="px-4 py-3 text-right font-sans text-sm tabular-nums whitespace-nowrap text-dashboard-text">
                       {formatCodeCost(repository.medianCostUsd)}
                     </td>
                   </tr>

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

@@ -35,13 +35,13 @@ import {
   RepositoryChangesTab,
   RepositoryConversationsTab,
 } from "./RepositoryTabs";
+import { cn, dashboardInlineLinkClass } from "../../styles";
 
 const RECENT_ROWS = 5;
 const DESCRIPTION = "Conversations and code changes from Junior.";
 
 /** Inline link style used by `ConversationSummary` location links. */
-const inlineLinkClass =
-  "font-semibold text-dashboard-text underline decoration-white/20 underline-offset-2 transition-colors hover:decoration-white/60";
+const inlineLinkClass = cn("font-semibold", dashboardInlineLinkClass);
 
 /** Render one repository tab under the shared header and tab bar. */
 export function RepositoryPage(props: { tab: CodeRepositoryTab }) {