@sentry/junior-dashboard 0.259.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/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 = {

package/src/client/pages/locations/LocationActivityChart.tsx

@@ -43,7 +43,13 @@ export function LocationActivityChart(props: {
           <ChartLegend
             ariaLabel="Conversation activity period"
             inline
-            items={[{ color: "#22d3ee", key: "period", label: "90 days" }]}
+            items={[
+              {
+                color: "var(--color-cyan-400)",
+                key: "period",
+                label: "90 days",
+              },
+            ]}
           />
         }
       />
@@ -55,8 +61,12 @@ export function LocationActivityChart(props: {
         >
           <defs>
             <linearGradient id="location-bars" x1="0" x2="0" y1="0" y2="1">
-              <stop offset="0%" stopColor="#22d3ee" />
-              <stop offset="100%" stopColor="#f59e0b" stopOpacity="0.65" />
+              <stop offset="0%" stopColor="var(--color-cyan-400)" />
+              <stop
+                offset="100%"
+                stopColor="var(--color-amber-500)"
+                stopOpacity="0.65"
+              />
             </linearGradient>
           </defs>
           <ActivityChartGrid layout={layout} maximum={maximum} />
@@ -98,7 +108,7 @@ export function LocationActivityChart(props: {
             format={formatActivityChartAverage}
             layout={layout}
             maximum={maximum}
-            stroke="#22d3ee"
+            stroke="var(--color-cyan-400)"
           />
           <ActivityChartDateLabels
             dates={props.days.map((day) => day.date)}

package/src/client/pages/locations/LocationDirectoryActivityChart.tsx

@@ -24,8 +24,7 @@ export function LocationDirectoryActivityChart(props: {
   days: LocationActivityDayReport[];
 }) {
   const bucketUnit = props.bucketUnit ?? "day";
-  const perBucket =
-    `Conversations per ${timeRangeBucketPerLabel(bucketUnit)}`;
+  const perBucket = `Conversations per ${timeRangeBucketPerLabel(bucketUnit)}`;
 
   const layout = createActivityChartLayout(260);
   const maximum = Math.max(
@@ -42,17 +41,23 @@ export function LocationDirectoryActivityChart(props: {
   return (
     <Card>
       <CardHeader
-        description={
-          `${timeRangeBucketAdjective(bucketUnit)} public volume compared with private activity in aggregate.`
-        }
+        description={`${timeRangeBucketAdjective(bucketUnit)} public volume compared with private activity in aggregate.`}
         title={perBucket}
         trailing={
           <ChartLegend
             ariaLabel="Conversation visibility legend"
             inline
             items={[
-              { color: "#22d3ee", key: "public", label: "public" },
-              { color: "#fbbf24", key: "private", label: "private" },
+              {
+                color: "var(--color-cyan-400)",
+                key: "public",
+                label: "public",
+              },
+              {
+                color: "var(--color-amber-400)",
+                key: "private",
+                label: "private",
+              },
             ]}
           />
         }
@@ -70,13 +75,13 @@ export function LocationDirectoryActivityChart(props: {
               [
                 {
                   count: day.publicConversations,
-                  fill: "#22d3ee",
+                  fill: "var(--color-cyan-400)",
                   key: "public",
                   x: groupX,
                 },
                 {
                   count: day.privateConversations,
-                  fill: "#fbbf24",
+                  fill: "var(--color-amber-400)",
                   key: "private",
                   x: groupX + barWidth + gap,
                 },

package/src/client/pages/memory/MemoryCostChart.tsx

@@ -74,13 +74,13 @@ export function MemoryCostChart(props: {
           ariaLabel="Memory cost legend"
           items={[
             {
-              color: "#67e8f9",
+              color: "var(--color-cyan-300)",
               key: "extraction",
               label: "Extraction",
               value: formatCostSummary({ total: extractionTotal }),
             },
             {
-              color: "#e879f9",
+              color: "var(--color-fuchsia-400)",
               key: "recall",
               label: "Recall",
               value: formatCostSummary({ total: recallTotal }),
@@ -130,7 +130,7 @@ export function MemoryCostChart(props: {
               >
                 <g tabIndex={0}>
                   <rect
-                    fill="#67e8f9"
+                    fill="var(--color-cyan-300)"
                     height={extractionHeight}
                     opacity={day.extraction.costUsd > 0 ? 0.82 : 0.1}
                     rx="1"
@@ -139,7 +139,7 @@ export function MemoryCostChart(props: {
                     y={layout.top + layout.plotHeight - extractionHeight}
                   />
                   <rect
-                    fill="#e879f9"
+                    fill="var(--color-fuchsia-400)"
                     height={recallHeight}
                     opacity={day.recall.costUsd > 0 ? 0.82 : 0.1}
                     rx="1"
@@ -169,7 +169,7 @@ export function MemoryCostChart(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/memory/MemoryDetailsDrawer.tsx

@@ -10,6 +10,10 @@ import type {
   PluginUserPageRecordAction,
 } from "../user/pluginUserPageData";
 
+// The memory plugin API does not resolve mentions yet, so memory text shows
+// Slack ids instead of names.
+const NO_MEMORY_MENTIONS: readonly [] = [];
+
 type MemoryActionMutation = UseMutationResult<
   void,
   Error,
@@ -86,10 +90,13 @@ export function MemoryDetailsDrawer(props: {
           <div className="mb-2 font-sans font-medium text-xs text-dashboard-text-muted">
             Memory
           </div>
-          <TranscriptText text={record.title} />
+          <TranscriptText mentions={NO_MEMORY_MENTIONS} text={record.title} />
           {record.description ? (
             <div className="mt-3">
-              <TranscriptText text={record.description} />
+              <TranscriptText
+                mentions={NO_MEMORY_MENTIONS}
+                text={record.description}
+              />
             </div>
           ) : null}
         </div>

package/src/client/pages/memory/MemoryTimeline.tsx

@@ -15,8 +15,8 @@ import { Card } from "../../components/layout/Card";
 import type { MemoryDay } from "./memoryDashboard";
 
 const series = [
-  { color: "#67e8f9", key: "personal", label: "Personal" },
-  { color: "#6ee7b7", key: "public", label: "Public" },
+  { color: "var(--color-cyan-300)", key: "personal", label: "Personal" },
+  { color: "var(--color-emerald-300)", key: "public", label: "Public" },
 ] as const;
 
 /** Render viewer memory creation as a stacked personal/public timeline. */

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

@@ -124,10 +124,10 @@ export function ContributionGrid(props: { days: ContributionDay[] }) {
               className={cn(
                 "size-3 border border-dashboard-overlay",
                 level === 0 && "bg-dashboard-surface-hover",
-                level === 1 && "bg-[#133225]",
-                level === 2 && "bg-[#176a4a]",
-                level === 3 && "bg-[#22a06b]",
-                level === 4 && "bg-[#8bdc97]",
+                level === 1 && "bg-[#133225] light:bg-[#9be9a8]",
+                level === 2 && "bg-[#176a4a] light:bg-[#40c463]",
+                level === 3 && "bg-[#22a06b] light:bg-[#30a14e]",
+                level === 4 && "bg-[#8bdc97] light:bg-[#216e39]",
               )}
               key={level}
             />
@@ -156,8 +156,8 @@ function activityRuntime(day: ContributionDay): string {
 function activityClass(count: number, max: number): string {
   if (count <= 0) return "bg-dashboard-surface-hover";
   const ratio = count / max;
-  if (ratio >= 0.75) return "bg-[#8bdc97]";
-  if (ratio >= 0.45) return "bg-[#22a06b]";
-  if (ratio >= 0.2) return "bg-[#176a4a]";
-  return "bg-[#133225]";
+  if (ratio >= 0.75) return "bg-[#8bdc97] light:bg-[#216e39]";
+  if (ratio >= 0.45) return "bg-[#22a06b] light:bg-[#30a14e]";
+  if (ratio >= 0.2) return "bg-[#176a4a] light:bg-[#40c463]";
+  return "bg-[#133225] light:bg-[#9be9a8]";
 }

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

@@ -44,8 +44,7 @@ export function PeopleActivityChart(props: {
   days: PeopleActivityDayReport[];
 }) {
   const bucketUnit = props.bucketUnit ?? "day";
-  const chartTitle =
-    `Active people per ${timeRangeBucketPerLabel(bucketUnit)}`;
+  const chartTitle = `Active people per ${timeRangeBucketPerLabel(bucketUnit)}`;
 
   const layout = createActivityChartLayout(260);
   const values = props.days.map((day) => day.activePeople);
@@ -70,7 +69,13 @@ export function PeopleActivityChart(props: {
           <ChartLegend
             ariaLabel="People activity legend"
             inline
-            items={[{ color: "#fbbf24", key: "people", label: "people" }]}
+            items={[
+              {
+                color: "var(--color-amber-400)",
+                key: "people",
+                label: "people",
+              },
+            ]}
           />
         }
       />
@@ -82,13 +87,21 @@ export function PeopleActivityChart(props: {
         >
           <defs>
             <linearGradient id="people-area" x1="0" x2="0" y1="0" y2="1">
-              <stop offset="0%" stopColor="#f59e0b" stopOpacity="0.3" />
-              <stop offset="100%" stopColor="#f59e0b" stopOpacity="0" />
+              <stop
+                offset="0%"
+                stopColor="var(--color-amber-500)"
+                stopOpacity="0.3"
+              />
+              <stop
+                offset="100%"
+                stopColor="var(--color-amber-500)"
+                stopOpacity="0"
+              />
             </linearGradient>
             <linearGradient id="people-line" x1="0" x2="1" y1="0" y2="0">
-              <stop offset="0%" stopColor="#f59e0b" />
-              <stop offset="55%" stopColor="#fbbf24" />
-              <stop offset="100%" stopColor="#22d3ee" />
+              <stop offset="0%" stopColor="var(--color-amber-500)" />
+              <stop offset="55%" stopColor="var(--color-amber-400)" />
+              <stop offset="100%" stopColor="var(--color-cyan-400)" />
             </linearGradient>
           </defs>
           <ActivityChartGrid layout={layout} maximum={maximum} />
@@ -122,7 +135,7 @@ export function PeopleActivityChart(props: {
                 <circle
                   cx={point.x}
                   cy={point.y}
-                  fill="#fbbf24"
+                  fill="var(--color-amber-400)"
                   opacity={props.days.length > 30 ? 0.35 : 0.75}
                   r={props.days.length > 30 ? 3 : 4}
                   tabIndex={0}
@@ -136,7 +149,7 @@ export function PeopleActivityChart(props: {
             format={formatActivityChartAverage}
             layout={layout}
             maximum={maximum}
-            stroke="#fbbf24"
+            stroke="var(--color-amber-400)"
           />
           <ActivityChartDateLabels
             dates={props.days.map((day) => day.date)}