@sentry/junior-dashboard 0.248.0 → 0.249.0

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 }) {

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

@@ -7,12 +7,18 @@ import {
   ConversationFixture,
   MessageAttachmentsFixture,
 } from "./ConversationFixture";
+import {
+  SubagentCardFixture,
+  ToolCallGallery,
+} from "./TranscriptActivityFixtures";
 import { ObjectCard } from "../../conversations/ObjectCard";
 import { AutomationCard } from "../../components/AutomationCard";
 import {
   Activity,
+  ArchiveRestore,
   Bot,
   ChevronRight,
+  CircleAlert,
   Copy,
   MessageSquare,
   Timer,
@@ -35,6 +41,7 @@ import { DashboardChromeProvider } from "../../components/layout/DashboardChrome
 import { DashboardHeader } from "../../components/layout/DashboardHeader";
 import { PageHeader } from "../../components/layout/PageHeader";
 import { MetricList, MetricValue } from "../../components/Metric";
+import { Notice, NoticeAction } from "../../components/Notice";
 import { PageContentSkeleton } from "../../components/PageContentSkeleton";
 import { ActorAvatar } from "../../components/ActorAvatar";
 import { ParticipantAvatarStack } from "../../components/ParticipantAvatarStack";
@@ -45,9 +52,7 @@ import { TextArea, TextInput } from "../../components/TextInput";
 import { TranscriptMarkdown } from "../../conversations/TranscriptMarkdown";
 import { TranscriptText } from "../../conversations/TranscriptText";
 import { TranscriptMessageShell } from "../../conversations/TranscriptMessageShell";
-import { TranscriptToolView } from "../../conversations/TranscriptToolView";
 import { cn, dashboardContainerClass } from "../../styles";
-import type { TranscriptViewToolCallPart } from "../../types";
 
 export type GallerySectionId = "foundations" | "charts" | "transcripts";
 
@@ -134,123 +139,6 @@ Findings:
 
 See https://docs.sentry.io for product docs.`;
 
-type ToolCallFixture = {
-  description: string;
-  part: TranscriptViewToolCallPart;
-  timestamp: number;
-};
-
-const TOOL_CALL_TIMESTAMP = Date.UTC(2026, 4, 1, 16);
-
-const TOOL_CALL_FIXTURES = [
-  {
-    description: "Default completed tool with normalized arguments",
-    part: {
-      id: "gallery-search",
-      input: {
-        query: "release regression",
-        limit: 25,
-        options: { includeArchived: false },
-      },
-      name: "searchIssues",
-      output: { matches: 3 },
-      resultTimestamp: TOOL_CALL_TIMESTAMP + 1_842,
-      status: "completed",
-      type: "tool_call",
-    },
-    timestamp: TOOL_CALL_TIMESTAMP,
-  },
-  {
-    description: "Running webSearch with name-only shimmer",
-    part: {
-      id: "gallery-running",
-      input: {
-        query: "service:checkout status:error",
-        max_results: 50,
-      },
-      name: "webSearch",
-      status: "running",
-      type: "tool_call",
-    },
-    timestamp: TOOL_CALL_TIMESTAMP + 3_000,
-  },
-  {
-    description: "Failed tool",
-    part: {
-      id: "gallery-error",
-      input: {
-        command: "jr-rpc config get github.repo",
-        timeout_ms: 10_000,
-      },
-      name: "bash",
-      output: { error: "configuration unavailable" },
-      resultTimestamp: TOOL_CALL_TIMESTAMP + 6_416,
-      status: "error",
-      type: "tool_call",
-    },
-    timestamp: TOOL_CALL_TIMESTAMP + 6_000,
-  },
-  {
-    description: "Known loadSkill signature",
-    part: {
-      id: "gallery-load-skill",
-      input: { skill_name: "junior-qa" },
-      name: "loadSkill",
-      output: { skill_name: "junior-qa" },
-      resultTimestamp: TOOL_CALL_TIMESTAMP + 8_105,
-      status: "completed",
-      type: "tool_call",
-    },
-    timestamp: TOOL_CALL_TIMESTAMP + 8_000,
-  },
-  {
-    description: "Known executeTool signature with nested arguments",
-    part: {
-      id: "gallery-execute-tool",
-      input: {
-        tool_name: "github_search",
-        arguments: { query: "is:pr is:open", limit: 25 },
-      },
-      name: "executeTool",
-      output: { matches: 3 },
-      resultTimestamp: TOOL_CALL_TIMESTAMP + 10_723,
-      status: "completed",
-      type: "tool_call",
-    },
-    timestamp: TOOL_CALL_TIMESTAMP + 10_000,
-  },
-  {
-    description: "Long generic arguments exercise both truncation limits",
-    part: {
-      id: "gallery-long",
-      input: {
-        project: "payments-checkout-platform",
-        query:
-          "Find every regression associated with the most recent production deployment and include the complete evidence trail",
-        environment: "production",
-        includeResolved: false,
-        ignoredAfterFourEntries: "not shown in the collapsed preview",
-      },
-      name: "investigateDeploy",
-      output: { channel_id: "C123" },
-      resultTimestamp: TOOL_CALL_TIMESTAMP + 13_250,
-      status: "completed",
-      type: "tool_call",
-    },
-    timestamp: TOOL_CALL_TIMESTAMP + 12_000,
-  },
-  {
-    description: "Completed tool without argument or result payloads",
-    part: {
-      id: "gallery-empty",
-      name: "systemTime",
-      status: "completed",
-      type: "tool_call",
-    },
-    timestamp: TOOL_CALL_TIMESTAMP + 15_000,
-  },
-] as const satisfies readonly ToolCallFixture[];
-
 /** Config-gated component gallery with one page per category. */
 export function ComponentsPage() {
   return (
@@ -433,6 +321,14 @@ function FoundationsGalleryPage() {
               { className: "bg-dashboard-text-muted", label: "muted" },
               { className: "bg-dashboard-text-subtle", label: "subtle" },
               { className: "bg-dashboard-text-faint", label: "faint" },
+            ]}
+          />
+          <TokenSwatchRow
+            label="Accent"
+            swatches={[
+              { className: "bg-dashboard-accent", label: "accent" },
+              { className: "bg-dashboard-accent-text", label: "accent text" },
+              { className: "bg-dashboard-accent/10", label: "accent / 10" },
               { className: "bg-dashboard-focus", label: "focus" },
             ]}
           />
@@ -590,6 +486,23 @@ function FoundationsGalleryPage() {
           </StatusChip>
         </div>
       </Fixture>
+      <Fixture title="Notices">
+        <div className="grid max-w-md gap-2">
+          <Notice
+            action={<NoticeAction>Undo</NoticeAction>}
+            detail="Investigate checkout latency"
+            icon={ArchiveRestore}
+            title="Conversation archived"
+          />
+          <Notice
+            action={<NoticeAction tone="error">Dismiss</NoticeAction>}
+            detail="Investigate checkout latency"
+            icon={CircleAlert}
+            title="Could not archive"
+            tone="error"
+          />
+        </div>
+      </Fixture>
       <Fixture title="Actor avatars">
         <div className="flex items-center gap-4">
           <ActorAvatar
@@ -808,7 +721,9 @@ function TranscriptsGalleryPage() {
       <Fixture title="Automation in a reply">
         <div className="max-w-[52.5rem]">
           <TranscriptMessageShell actor="Junior" role="assistant">
-            <span className="text-sm font-semibold text-cyan-100">Junior</span>
+            <span className="text-sm font-semibold text-dashboard-accent-text">
+              Junior
+            </span>
             <TranscriptText
               role="assistant"
               text={
@@ -878,34 +793,13 @@ function TranscriptsGalleryPage() {
       <Fixture title="Tool calls">
         <ToolCallGallery />
       </Fixture>
+      <Fixture title="Subagent cards">
+        <SubagentCardFixture />
+      </Fixture>
     </GalleryShell>
   );
 }
 
-/** Render typed transcript tool states for visual regression and interaction checks. */
-export function ToolCallGallery() {
-  return (
-    <div className="min-w-0 overflow-hidden rounded-lg border border-dashboard-border bg-dashboard-fill-faint">
-      <div className="border-b border-dashboard-border-subtle px-2.5 py-1.5 font-mono text-xs text-dashboard-text-muted">
-        Activity lane · click a row for arguments and result
-      </div>
-      <div className="grid min-w-0 gap-1 px-2 py-1.5">
-        {TOOL_CALL_FIXTURES.map((fixture) => (
-          <div className="grid min-w-0 gap-1" key={fixture.part.id}>
-            <div className="font-mono text-2xs uppercase tracking-[0.08em] text-dashboard-text-muted">
-              {fixture.description}
-            </div>
-            <TranscriptToolView
-              part={fixture.part}
-              timestamp={fixture.timestamp}
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
 function GalleryShell(props: {
   children: ReactNode;
   description: string;
@@ -938,7 +832,7 @@ function GalleryShell(props: {
 function Fixture(props: { children: ReactNode; title: string }) {
   return (
     <Card className="grid min-w-0 gap-3 p-4 sm:p-5" padding="none">
-      <div className="border-b border-dashboard-border-subtle pb-3 font-mono text-xs font-medium uppercase tracking-[0.14em] text-dashboard-text-muted">
+      <div className="border-b border-dashboard-border-subtle pb-3 font-sans text-xs font-medium text-dashboard-text-muted">
         {props.title}
       </div>
       <div className="min-w-0">{props.children}</div>
@@ -952,7 +846,7 @@ function TokenSwatchRow(props: {
 }) {
   return (
     <div className="grid gap-2">
-      <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">
         {props.label}
       </div>
       <div className="flex flex-wrap gap-3">

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

@@ -0,0 +1,206 @@
+import { TranscriptSubagentView } from "../../conversations/TranscriptSubagentView";
+import { TranscriptToolView } from "../../conversations/TranscriptToolView";
+import type {
+  TranscriptViewSubagentPart,
+  TranscriptViewToolCallPart,
+} from "../../types";
+
+type ToolCallFixture = {
+  description: string;
+  part: TranscriptViewToolCallPart;
+  timestamp: number;
+};
+
+const TOOL_CALL_TIMESTAMP = Date.UTC(2026, 4, 1, 16);
+
+const TOOL_CALL_FIXTURES = [
+  {
+    description: "Default completed tool with normalized arguments",
+    part: {
+      id: "gallery-search",
+      input: {
+        query: "release regression",
+        limit: 25,
+        options: { includeArchived: false },
+      },
+      name: "searchIssues",
+      output: { matches: 3 },
+      resultTimestamp: TOOL_CALL_TIMESTAMP + 1_842,
+      status: "completed",
+      type: "tool_call",
+    },
+    timestamp: TOOL_CALL_TIMESTAMP,
+  },
+  {
+    description: "Running webSearch with name-only shimmer",
+    part: {
+      id: "gallery-running",
+      input: {
+        query: "service:checkout status:error",
+        max_results: 50,
+      },
+      name: "webSearch",
+      status: "running",
+      type: "tool_call",
+    },
+    timestamp: TOOL_CALL_TIMESTAMP + 3_000,
+  },
+  {
+    description: "Failed tool",
+    part: {
+      id: "gallery-error",
+      input: {
+        command: "jr-rpc config get github.repo",
+        timeout_ms: 10_000,
+      },
+      name: "bash",
+      output: { error: "configuration unavailable" },
+      resultTimestamp: TOOL_CALL_TIMESTAMP + 6_416,
+      status: "error",
+      type: "tool_call",
+    },
+    timestamp: TOOL_CALL_TIMESTAMP + 6_000,
+  },
+  {
+    description: "Known loadSkill signature",
+    part: {
+      id: "gallery-load-skill",
+      input: { skill_name: "junior-qa" },
+      name: "loadSkill",
+      output: { skill_name: "junior-qa" },
+      resultTimestamp: TOOL_CALL_TIMESTAMP + 8_105,
+      status: "completed",
+      type: "tool_call",
+    },
+    timestamp: TOOL_CALL_TIMESTAMP + 8_000,
+  },
+  {
+    description: "Known executeTool signature with nested arguments",
+    part: {
+      id: "gallery-execute-tool",
+      input: {
+        tool_name: "github_search",
+        arguments: { query: "is:pr is:open", limit: 25 },
+      },
+      name: "executeTool",
+      output: { matches: 3 },
+      resultTimestamp: TOOL_CALL_TIMESTAMP + 10_723,
+      status: "completed",
+      type: "tool_call",
+    },
+    timestamp: TOOL_CALL_TIMESTAMP + 10_000,
+  },
+  {
+    description: "Long generic arguments exercise both truncation limits",
+    part: {
+      id: "gallery-long",
+      input: {
+        project: "payments-checkout-platform",
+        query:
+          "Find every regression associated with the most recent production deployment and include the complete evidence trail",
+        environment: "production",
+        includeResolved: false,
+        ignoredAfterFourEntries: "not shown in the collapsed preview",
+      },
+      name: "investigateDeploy",
+      output: { channel_id: "C123" },
+      resultTimestamp: TOOL_CALL_TIMESTAMP + 13_250,
+      status: "completed",
+      type: "tool_call",
+    },
+    timestamp: TOOL_CALL_TIMESTAMP + 12_000,
+  },
+  {
+    description: "Completed tool without argument or result payloads",
+    part: {
+      id: "gallery-empty",
+      name: "systemTime",
+      status: "completed",
+      type: "tool_call",
+    },
+    timestamp: TOOL_CALL_TIMESTAMP + 15_000,
+  },
+] as const satisfies readonly ToolCallFixture[];
+
+const SUBAGENT_STARTED = Date.UTC(2026, 4, 1, 16);
+
+const SUBAGENT_FIXTURES: readonly TranscriptViewSubagentPart[] = [
+  {
+    agentName: "planner",
+    childConversationId: "gallery-planner",
+    id: "gallery-planner",
+    status: "running",
+    subagentKind: "agent",
+    type: "subagent",
+    title: "Review the dashboard plan",
+  },
+  {
+    agentName: "reviewer",
+    childConversationId: "gallery-reviewer",
+    finishedTimestamp: SUBAGENT_STARTED + 16_000,
+    id: "gallery-reviewer",
+    status: "completed",
+    subagentKind: "agent",
+    type: "subagent",
+    title: "Check the pull request against the repository rules",
+  },
+  {
+    agentName: "github",
+    childConversationId: "gallery-github",
+    finishedTimestamp: SUBAGENT_STARTED + 4_000,
+    id: "gallery-github",
+    status: "blocked",
+    subagentKind: "agent",
+    type: "subagent",
+  },
+  {
+    agentName: "deploy",
+    childConversationId: "gallery-deploy",
+    finishedTimestamp: SUBAGENT_STARTED + 92_000,
+    id: "gallery-deploy",
+    status: "error",
+    subagentKind: "agent",
+    type: "subagent",
+    task: "Roll back payments-v42 in us-west1 and confirm the canary error rate.",
+  },
+];
+
+/** Render typed transcript tool states for visual regression and interaction checks. */
+export function ToolCallGallery() {
+  return (
+    <div className="min-w-0 overflow-hidden rounded-lg border border-dashboard-border bg-dashboard-fill-faint">
+      <div className="border-b border-dashboard-border-subtle px-2.5 py-1.5 font-sans text-xs text-dashboard-text-muted">
+        Activity lane · click a row for arguments and result
+      </div>
+      <div className="grid min-w-0 gap-1 px-2 py-1.5">
+        {TOOL_CALL_FIXTURES.map((fixture) => (
+          <div className="grid min-w-0 gap-1" key={fixture.part.id}>
+            <div className="font-sans font-medium text-2xs text-dashboard-text-muted">
+              {fixture.description}
+            </div>
+            <TranscriptToolView
+              part={fixture.part}
+              timestamp={fixture.timestamp}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** Show subagent cards in each lifecycle status, with and without a title. */
+export function SubagentCardFixture() {
+  return (
+    <div className="grid min-w-0 gap-2">
+      {SUBAGENT_FIXTURES.map((part) => (
+        <TranscriptSubagentView
+          key={part.id}
+          onOpenTranscript={() => undefined}
+          part={part}
+          timestamp={SUBAGENT_STARTED}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -92,12 +92,12 @@ function LocationDetail(props: { detail: LocationDetailReport }) {
       <LocationActivityChart days={detail.activityDays} />
 
       <Card>
-        <div className="flex items-center gap-3 border-b border-white/[0.06] px-4 py-4">
-          <span className="grid size-9 place-items-center rounded border border-cyan-400/15 bg-cyan-400/[0.06] text-cyan-300">
+        <div className="flex items-center gap-3 border-b border-dashboard-border-subtle px-4 py-4">
+          <span className="grid size-9 place-items-center rounded-md border border-dashboard-accent/15 bg-dashboard-accent/[0.06] text-dashboard-accent">
             <MapPin aria-hidden="true" size={16} />
           </span>
           <div>
-            <h3 className="m-0 font-mono text-xs font-medium uppercase tracking-[0.14em] text-dashboard-text-muted">
+            <h3 className="m-0 font-sans text-xs font-medium text-dashboard-text-muted">
               People seen here
             </h3>
             <p className="mt-1 mb-0 font-mono text-xs text-dashboard-text-muted">
@@ -127,7 +127,7 @@ function LocationDetail(props: { detail: LocationDetailReport }) {
                 </>
               );
               const className =
-                "min-w-0 border-b border-r border-white/[0.055] px-4 py-3.5 transition-colors hover:bg-white/[0.03]";
+                "min-w-0 border-b border-r border-dashboard-border-subtle px-4 py-3.5 transition-colors hover:bg-dashboard-fill-soft";
               return item.actor.email ? (
                 <Link
                   className={`${className} text-inherit no-underline`}

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

@@ -76,7 +76,7 @@ export function LocationDirectory(props: {
                 <>Last active {formatRelativeTime(location.lastSeenAt)}</>
               }
               icon={<Hash aria-hidden="true" size={16} strokeWidth={1.8} />}
-              iconClassName="bg-cyan-400/[0.06] text-cyan-300 group-hover:border-cyan-400/25"
+              iconClassName="bg-dashboard-accent/[0.06] text-dashboard-accent group-hover:border-dashboard-accent/25"
               title={location.label}
             />
             <DirectoryMetric

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

@@ -9,14 +9,14 @@ export function PrivateActivityCard(props: { item: ConversationStatsItem }) {
   return (
     <Card className="opacity-80" padding="sm">
       <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 max-sm:grid-cols-[auto_minmax(0,1fr)]">
-        <span className="grid size-9 shrink-0 place-items-center rounded border border-white/[0.08] bg-white/[0.025] text-dashboard-text-muted">
+        <span className="grid size-9 shrink-0 place-items-center rounded-md border border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted">
           <LockKeyhole aria-hidden="true" size={15} />
         </span>
         <div className="min-w-0">
           <div className="font-display text-base font-medium text-dashboard-text">
             Private activity
           </div>
-          <div className="mt-1 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+          <div className="mt-1 font-sans text-xs leading-relaxed text-dashboard-text-muted">
             DMs, private channels, and unknown visibility stay combined and
             unlinked.
           </div>
@@ -25,7 +25,7 @@ export function PrivateActivityCard(props: { item: ConversationStatsItem }) {
           <div className="font-display text-2xl font-light text-dashboard-text">
             {formatCompactNumber(props.item.conversations)}
           </div>
-          <div className="font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+          <div className="font-sans font-medium text-xs text-dashboard-text-muted">
             conversations
           </div>
         </div>

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

@@ -66,7 +66,7 @@ export function MemoryCostChart(props: {
         <h2 className="m-0 font-display text-xl font-medium text-dashboard-text">
           {formatCostSummary({ total })}
         </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">
           System-wide estimate across {formatRunCount(runs)} spanning extraction
           and recall.
         </p>
@@ -128,9 +128,7 @@ export function MemoryCostChart(props: {
                 date={day.date}
                 summary={`extraction ${formatCostSummary({ total: day.extraction.costUsd })}, ${formatRunCount(day.extraction.events)}; recall ${formatCostSummary({ total: day.recall.costUsd })}, ${formatRunCount(day.recall.events)}`}
               >
-                <g
-                  tabIndex={0}
-                >
+                <g tabIndex={0}>
                   <rect
                     fill="#67e8f9"
                     height={extractionHeight}
@@ -180,7 +178,7 @@ export function MemoryCostChart(props: {
           />
         </ChartSvg>
         {runs === 0 ? (
-          <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 memory extraction or recall ran in this period.
           </div>
         ) : null}

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

@@ -83,7 +83,7 @@ export function MemoryDetailsDrawer(props: {
     >
       <section className="grid gap-5">
         <div>
-          <div className="mb-2 font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
+          <div className="mb-2 font-sans font-medium text-xs text-dashboard-text-muted">
             Memory
           </div>
           <TranscriptText text={record.title} />
@@ -94,14 +94,14 @@ export function MemoryDetailsDrawer(props: {
           ) : null}
         </div>
 
-        <div className="flex items-start gap-3 rounded border border-cyan-300/12 bg-cyan-300/[0.035] p-3">
+        <div className="flex items-start gap-3 rounded-md border border-dashboard-accent/12 bg-dashboard-accent/[0.035] p-3">
           <BrainCircuit
             aria-hidden="true"
-            className="mt-0.5 shrink-0 text-cyan-200/70"
+            className="mt-0.5 shrink-0 text-dashboard-accent-text/70"
             size={15}
           />
           <div>
-            <div className="font-mono text-xs uppercase tracking-[0.12em] text-cyan-200/65">
+            <div className="font-sans font-medium text-xs text-dashboard-accent-text/65">
               Why Junior remembers this
             </div>
             <div className="mt-1 font-mono text-xs leading-relaxed text-dashboard-text">
@@ -126,7 +126,7 @@ export function MemoryDetailsDrawer(props: {
 
         {forgetAction ? (
           <button
-            className="inline-flex w-fit cursor-pointer items-center gap-2 rounded border border-rose-300/15 bg-rose-300/[0.035] px-3 py-2 font-mono text-xs uppercase tracking-[0.08em] text-rose-200/75 transition-colors hover:border-rose-300/30 hover:bg-rose-300/[0.07] hover:text-rose-100"
+            className="inline-flex w-fit cursor-pointer items-center gap-2 rounded-md border border-rose-300/15 bg-rose-300/[0.035] px-3 py-2 font-sans font-medium text-xs text-rose-200/75 transition-colors hover:border-rose-300/30 hover:bg-rose-300/[0.07] hover:text-rose-100"
             disabled={props.action.isPending}
             onClick={() => {
               if (