@sentry/junior-dashboard 0.259.0 → 0.261.0

package/src/client/pages/system/WorkspaceFormPage.tsx

@@ -2,9 +2,9 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router";
 import {
+  workspaceListSchema,
   workspaceSchema,
-  type BaselineSnapshotReport,
-  type WorkspaceReport,
+  type WorkspaceListReport,
 } from "@sentry/junior/api/schema";
 
 import { EmptyTelemetry } from "../../components/EmptyTelemetry";
@@ -16,10 +16,7 @@ import { fetchDashboardJson, post, put } from "../../http";
 import { SystemPageLayout } from "./SystemPageLayout";
 import { WorkspaceDetails } from "./WorkspaceDetails";
 import { WorkspaceEditor } from "./WorkspaceEditor";
-import {
-  readWorkspaceApiError,
-  workspacesQueryKey,
-} from "./WorkspacesPage";
+import { readWorkspaceApiError, workspacesQueryKey } from "./WorkspacesPage";
 import {
   canSaveWorkspaceDraft,
   createWorkspaceDraft,
@@ -56,6 +53,14 @@ export function WorkspaceFormPage() {
       ),
     retry: false,
   });
+  // Shares the list cache so the default size is usually loaded already.
+  const workspacesQuery = useQuery({
+    queryKey: workspacesQueryKey,
+    queryFn: ({ signal }) =>
+      fetchDashboardJson(workspaceListSchema, "/api/workspaces", signal),
+    retry: false,
+  });
+  const defaultVcpus = workspacesQuery.data?.defaultVcpus ?? null;
 
   // Seed the edit draft once per Workspace id. editWorkspaceDraft assigns fresh
   // repo keys, so calling it during every query-driven render remounts fields.
@@ -87,18 +92,17 @@ export function WorkspaceFormPage() {
     },
     onSuccess: async (workspace) => {
       await queryClient.cancelQueries({ queryKey: workspacesQueryKey });
-      queryClient.setQueryData<{
-        baselineSnapshot: BaselineSnapshotReport | null;
-        workspaces: WorkspaceReport[];
-      }>(workspacesQueryKey, (current) => ({
-        baselineSnapshot: current?.baselineSnapshot ?? null,
-        workspaces: [
-          workspace,
-          ...(current?.workspaces ?? []).filter(
-            (item) => item.id !== workspace.id,
-          ),
-        ].sort((left, right) => left.name.localeCompare(right.name)),
-      }));
+      queryClient.setQueryData<WorkspaceListReport>(
+        workspacesQueryKey,
+        (current) =>
+          current && {
+            ...current,
+            workspaces: [
+              workspace,
+              ...current.workspaces.filter((item) => item.id !== workspace.id),
+            ].sort((left, right) => left.name.localeCompare(right.name)),
+          },
+      );
       navigate("/system/workspaces");
     },
   });
@@ -135,7 +139,11 @@ export function WorkspaceFormPage() {
         />
 
         {editing && workspaceQuery.data ? (
-          <WorkspaceDetails range={range} workspace={workspaceQuery.data} />
+          <WorkspaceDetails
+            defaultVcpus={defaultVcpus}
+            range={range}
+            workspace={workspaceQuery.data}
+          />
         ) : null}
 
         {workspaceQuery.error ? (
@@ -150,6 +158,7 @@ export function WorkspaceFormPage() {
         ) : draft ? (
           <WorkspaceEditor
             busy={saveMutation.isPending}
+            defaultVcpus={defaultVcpus}
             canSave={canSaveWorkspaceDraft(draft, saveMutation.isPending)}
             draft={draft}
             editing={editing}

package/src/client/pages/system/WorkspaceList.tsx

@@ -6,9 +6,11 @@ import { Button } from "../../components/Button";
 import { EmptyTelemetry } from "../../components/EmptyTelemetry";
 import { SelectableRow } from "../../components/SelectableRow";
 import { Card } from "../../components/layout/Card";
+import { formatSandboxSize } from "./SandboxSizeSummary";
 
 type WorkspaceListProps = {
   busy: boolean;
+  defaultVcpus: number | null;
   onDelete(workspace: WorkspaceReport): void;
   workspaces: WorkspaceReport[];
 };
@@ -29,6 +31,7 @@ export function WorkspaceList(props: WorkspaceListProps) {
           {props.workspaces.map((workspace) => (
             <WorkspaceListItem
               busy={props.busy}
+              defaultVcpus={props.defaultVcpus}
               key={workspace.id}
               onDelete={props.onDelete}
               workspace={workspace}
@@ -42,6 +45,7 @@ export function WorkspaceList(props: WorkspaceListProps) {
 
 function WorkspaceListItem(props: {
   busy: boolean;
+  defaultVcpus: number | null;
   onDelete(workspace: WorkspaceReport): void;
   workspace: WorkspaceReport;
 }) {
@@ -72,7 +76,8 @@ function WorkspaceListItem(props: {
               </span>
               <span className="font-mono text-xs text-dashboard-text-muted">
                 {workspace.repos.length} repo
-                {workspace.repos.length === 1 ? "" : "s"}
+                {workspace.repos.length === 1 ? "" : "s"} ·{" "}
+                {formatSandboxSize(workspace.vcpus ?? props.defaultVcpus)}
               </span>
             </span>
             <span className="mt-1.5 block truncate font-mono text-xs text-dashboard-text-muted">

package/src/client/pages/system/WorkspacesPage.tsx

@@ -2,7 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Plus } from "lucide-react";
 import {
   workspaceListSchema,
-  type BaselineSnapshotReport,
+  type WorkspaceListReport,
   type WorkspaceReport,
 } from "@sentry/junior/api/schema";
 
@@ -17,7 +17,7 @@ import {
   deleteDashboardResource,
   fetchDashboardJson,
 } from "../../http";
-import { BaselineSnapshotCard } from "./BaselineSnapshotCard";
+import { BaseSandboxCard } from "./BaseSandboxCard";
 import { SystemPageLayout, SystemRouteLoading } from "./SystemPageLayout";
 import { WorkspaceList } from "./WorkspaceList";
 
@@ -55,15 +55,16 @@ export function WorkspacesPage() {
     },
     onSuccess: async (workspace) => {
       await queryClient.cancelQueries({ queryKey: workspacesQueryKey });
-      queryClient.setQueryData<{
-        baselineSnapshot: BaselineSnapshotReport | null;
-        workspaces: WorkspaceReport[];
-      }>(workspacesQueryKey, (current) => ({
-        baselineSnapshot: current?.baselineSnapshot ?? null,
-        workspaces: (current?.workspaces ?? []).filter(
-          (item) => item.id !== workspace.id,
-        ),
-      }));
+      queryClient.setQueryData<WorkspaceListReport>(
+        workspacesQueryKey,
+        (current) =>
+          current && {
+            ...current,
+            workspaces: current.workspaces.filter(
+              (item) => item.id !== workspace.id,
+            ),
+          },
+      );
     },
   });
 
@@ -80,6 +81,7 @@ export function WorkspacesPage() {
 
   const workspaces = workspacesQuery.data?.workspaces ?? [];
   const baselineSnapshot = workspacesQuery.data?.baselineSnapshot ?? null;
+  const defaultVcpus = workspacesQuery.data?.defaultVcpus ?? null;
   return (
     <SystemPageLayout>
       <PageHeader
@@ -111,11 +113,15 @@ export function WorkspacesPage() {
       ) : null}
 
       {!workspacesQuery.error ? (
-        <BaselineSnapshotCard snapshot={baselineSnapshot} />
+        <BaseSandboxCard
+          defaultVcpus={defaultVcpus}
+          snapshot={baselineSnapshot}
+        />
       ) : null}
 
       <WorkspaceList
         busy={deleteMutation.isPending}
+        defaultVcpus={defaultVcpus}
         onDelete={(workspace) => {
           if (
             window.confirm(

package/src/client/pages/system/workspaceDraft.ts

@@ -9,6 +9,8 @@ export type RepoDraft = {
 export type WorkspaceDraft = {
   name: string;
   setupScript: string;
+  /** Text input value. Empty means the app default. */
+  vcpus: string;
   repos: RepoDraft[];
 };
 
@@ -24,6 +26,7 @@ export function createWorkspaceDraft(): WorkspaceDraft {
   return {
     name: "",
     setupScript: "",
+    vcpus: "",
     repos: [createRepoDraft()],
   };
 }
@@ -32,6 +35,7 @@ export function editWorkspaceDraft(workspace: WorkspaceReport): WorkspaceDraft {
   return {
     name: workspace.name,
     setupScript: workspace.setupScript,
+    vcpus: workspace.vcpus === null ? "" : String(workspace.vcpus),
     repos:
       workspace.repos.length > 0
         ? workspace.repos.map((repo) => ({
@@ -48,6 +52,7 @@ export function workspaceDraftBody(draft: WorkspaceDraft) {
   return {
     name: draft.name.trim(),
     setupScript: draft.setupScript,
+    vcpus: draft.vcpus.trim() ? Number(draft.vcpus.trim()) : null,
     repos: draft.repos.map((repo) => ({
       provider: repo.provider.trim(),
       repo: repo.repo.trim(),
@@ -60,6 +65,9 @@ export function canSaveWorkspaceDraft(
   busy: boolean,
 ): boolean {
   if (busy || !draft.name.trim()) return false;
+  if (draft.vcpus.trim() && !/^[1-9]\d*$/.test(draft.vcpus.trim())) {
+    return false;
+  }
   if (draft.repos.some((repo) => !repo.provider.trim() || !repo.repo.trim())) {
     return false;
   }

package/src/client/theme.ts

@@ -0,0 +1,52 @@
+import { useSyncExternalStore } from "react";
+
+import {
+  DASHBOARD_THEME_CHANGE_EVENT,
+  DASHBOARD_THEME_STORAGE_KEY,
+  type DashboardThemeChoice,
+} from "../theme";
+
+function readThemeChoice(): DashboardThemeChoice {
+  try {
+    const choice = window.localStorage.getItem(DASHBOARD_THEME_STORAGE_KEY);
+    return choice === "light" || choice === "dark" ? choice : "system";
+  } catch {
+    return "system";
+  }
+}
+
+function subscribe(onChange: () => void): () => void {
+  window.addEventListener(DASHBOARD_THEME_CHANGE_EVENT, onChange);
+  window.addEventListener("storage", onChange);
+  return () => {
+    window.removeEventListener(DASHBOARD_THEME_CHANGE_EVENT, onChange);
+    window.removeEventListener("storage", onChange);
+  };
+}
+
+/**
+ * Save a theme choice for this browser. The shell theme script applies it
+ * and keeps following the system color scheme for `system`.
+ */
+function saveThemeChoice(choice: DashboardThemeChoice): void {
+  try {
+    if (choice === "system") {
+      window.localStorage.removeItem(DASHBOARD_THEME_STORAGE_KEY);
+    } else {
+      window.localStorage.setItem(DASHBOARD_THEME_STORAGE_KEY, choice);
+    }
+  } catch {
+    // Storage is blocked, so the dashboard keeps following the system.
+    return;
+  }
+  window.dispatchEvent(new Event(DASHBOARD_THEME_CHANGE_EVENT));
+}
+
+/** Read and update this browser's dashboard theme choice. */
+export function useDashboardThemeChoice(): [
+  DashboardThemeChoice,
+  (choice: DashboardThemeChoice) => void,
+] {
+  const choice = useSyncExternalStore(subscribe, readThemeChoice);
+  return [choice, saveThemeChoice];
+}

package/src/client/types.ts

@@ -9,6 +9,7 @@ import type {
 } from "@sentry/junior/api/schema";
 import type {
   ActorIdentity,
+  ConversationReportMessageEvent,
   ConversationStatsReport,
   ConversationSummaryReport,
   ConversationTurnFailureCode,
@@ -51,6 +52,8 @@ export type TranscriptViewSubagentPart = {
 };
 
 export type TranscriptViewContextEventPart = {
+  /** People mentioned in the summary, resolved by the API. */
+  mentions?: ActorIdentity[];
   event:
     | {
         createdAt: string;
@@ -81,6 +84,8 @@ export type TranscriptViewContextEventPart = {
 };
 
 export type TranscriptViewStructuredEventPart = {
+  /** People mentioned in the preview and details, resolved by the API. */
+  mentions?: ActorIdentity[];
   name: string;
   namespace: string;
   presentation: ConversationEventPresentation;
@@ -120,9 +125,11 @@ export type TranscriptViewMessage = {
   eventObjectType?: ObjectType;
   /** Short summary supplied by the Event publisher. */
   trustedSummary?: string;
+  /** Every Event when several arrived together in one message. */
+  events?: ConversationReportMessageEvent[];
   /** Whether the source message addressed Junior directly. */
   explicitMention?: boolean;
-  /** People mentioned in the message text. */
+  /** People mentioned in the event text, resolved by the API. */
   mentions?: ActorIdentity[];
   /** Whether a non-mention message was used as input to a turn. */
   context?: boolean;

package/src/mock-reporting/fixtures.ts

@@ -168,7 +168,7 @@ function reportEvent(
   seq: number,
   createdAt: string,
   data: ConversationReportEventData,
-  metadata?: Pick<ConversationReportEvent, "model" | "modelCall">,
+  metadata?: Pick<ConversationReportEvent, "mentions" | "model" | "modelCall">,
 ): ConversationReportEvent {
   return { seq, createdAt, data, ...metadata };
 }
@@ -1428,48 +1428,58 @@ function eventAutomationRunConversation(
       credentialUser: "Alex Rivera",
     },
     events: [
-      reportEvent(0, startedAt, {
-        type: "message",
-        messageId: EVENT_AUTOMATION_RUN_CONVERSATION_ID,
-        role: "user",
-        // Dispatch input is authored by the dispatch owner, not a person.
-        actorIdentity: {
-          fullName: "junior",
-          slackUserId: "junior",
-          slackUserName: "junior",
+      reportEvent(
+        0,
+        startedAt,
+        {
+          type: "message",
+          messageId: EVENT_AUTOMATION_RUN_CONVERSATION_ID,
+          role: "user",
+          // Dispatch input is authored by the dispatch owner, not a person.
+          actorIdentity: {
+            fullName: "junior",
+            slackUserId: "junior",
+            slackUserName: "junior",
+          },
+          text: [
+            "[task]",
+            "",
+            "This is a task, not a message from a person.",
+            "",
+            "About: Issue · ACME-42",
+            'Created by: <@U123>. "Me" and "my" in the instructions mean this person: mention them in the message. If the instructions do not say "me" or "my", do not mention this person.',
+            "Instructions: Summarize the closed issue",
+            "",
+            "Trusted summary: ACME-42 Checkout fails for saved cards was closed by Morgan Lee.",
+            "",
+            "End with `finishAutomationRun`.",
+          ].join("\n"),
         },
-        text: [
-          "[task]",
-          "",
-          "This is a task, not a message from a person.",
-          "",
-          "About: Issue · ACME-42",
-          'Created by: <@U123>. "Me" and "my" in the instructions mean this person: mention them in the message. If the instructions do not say "me" or "my", do not mention this person.',
-          "Instructions: Summarize the closed issue",
-          "",
-          "Trusted summary: ACME-42 Checkout fails for saved cards was closed by Morgan Lee.",
-          "",
-          "End with `finishAutomationRun`.",
-        ].join("\n"),
-        mentions: [MOCK_MENTION_MORGAN],
-      }),
+        { mentions: [MOCK_MENTION_MORGAN] },
+      ),
       reportEvent(1, at(1_000), {
         type: "turn_lifecycle",
         turnId: "dispatch:event-1",
         state: "started",
         inputMessageIds: [EVENT_AUTOMATION_RUN_CONVERSATION_ID],
       }),
-      reportEvent(2, at(13_000), {
-        type: "message",
-        messageId: `${EVENT_AUTOMATION_RUN_CONVERSATION_ID}:reply`,
-        role: "assistant",
-        text: "<@U123> ACME-42 is closed. The saved-card checkout failure was fixed by the token refresh change and verified in production. cc <@U456> and <@U999> in <#C42|proj-checkout>.",
+      reportEvent(
+        2,
+        at(13_000),
+        {
+          type: "message",
+          messageId: `${EVENT_AUTOMATION_RUN_CONVERSATION_ID}:reply`,
+          role: "assistant",
+          text: "<@U123> ACME-42 is closed. The saved-card checkout failure was fixed by the token refresh change and verified in production. cc <@U456> and <@U999> in <#C42|proj-checkout>.",
+        },
         // U456 has no People profile, and U999 is not resolved.
-        mentions: [
-          MOCK_MENTION_MORGAN,
-          { fullName: "Casey Nguyen", slackUserId: "U456" },
-        ],
-      }),
+        {
+          mentions: [
+            MOCK_MENTION_MORGAN,
+            { fullName: "Casey Nguyen", slackUserId: "U456" },
+          ],
+        },
+      ),
       reportEvent(3, at(14_000), {
         type: "turn_lifecycle",
         turnId: "dispatch:event-1",
@@ -1601,6 +1611,9 @@ function summaryFromConversation(
     activityEvent?.data.type === "message" && activityEvent.data.text
       ? {
           createdAt: activityEvent.createdAt,
+          ...(activityEvent.mentions
+            ? { mentions: activityEvent.mentions }
+            : undefined),
           role: activityEvent.data.role as "assistant" | "user",
           text: activityEvent.data.text,
         }

package/src/shell.ts

@@ -9,6 +9,7 @@ import {
   dashboardTailwindAsset,
 } from "./assets";
 import { dashboardRainbowProgressClass } from "./dashboardLoader";
+import { DASHBOARD_THEME_COLORS, DASHBOARD_THEME_SCRIPT } from "./theme";
 
 const DASHBOARD_CLIENT_VERSION = Date.now().toString(36);
 export const DASHBOARD_CLIENT_PATH = "/_junior/dashboard/client.js";
@@ -16,7 +17,7 @@ export const DASHBOARD_AVATAR_HEADER_PATH = "/_junior/dashboard/avatar.png";
 export const DASHBOARD_INSTALL_ICON_PATH = "/_junior/dashboard/icon-512.png";
 export const DASHBOARD_MANIFEST_PATH =
   "/_junior/dashboard/manifest.webmanifest";
-const DASHBOARD_THEME_COLOR = "#000000";
+const DASHBOARD_THEME_COLOR = DASHBOARD_THEME_COLORS.dark;
 const DASHBOARD_BACKGROUND_COLOR = "#000000";
 
 function escapeHtml(value: string): string {
@@ -224,6 +225,7 @@ export function renderDashboard(basePath: string, agentName: string): Response {
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
   <meta name="theme-color" content="${DASHBOARD_THEME_COLOR}" />
+  <script>${DASHBOARD_THEME_SCRIPT}</script>
   <meta name="mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@@ -334,6 +336,7 @@ export function renderForbiddenPage(agentName: string): Response {
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
   <title>${escapeHtml(agentName)} access denied</title>
+  <script>${DASHBOARD_THEME_SCRIPT}</script>
   <style>
     ${readDashboardTailwind()}
   </style>

package/src/tailwind.css

@@ -108,6 +108,115 @@
   --color-dashboard-scrollbar-thumb-hover: rgb(255 255 255 / 0.2);
 }
 
+/*
+ * Light theme. src/theme.ts sets data-theme on <html> before first paint from
+ * the saved choice or the system color scheme. Each dashboard token above gets
+ * a light value here.
+ */
+:root[data-theme="light"] {
+  --dashboard-color-scheme: light;
+
+  --color-dashboard-bg: #ffffff;
+  --color-dashboard-bg-elevated: #ffffff;
+  --color-dashboard-surface-panel: #f9f9fa;
+  --color-dashboard-surface-active: #e9e9ec;
+  --color-dashboard-surface-raised: #ffffff;
+  --color-dashboard-surface-hover: #f1f1f3;
+  --color-dashboard-control: #ffffff;
+  --color-dashboard-ink: #ffffff;
+
+  --color-dashboard-text: #18181b;
+  --color-dashboard-text-muted: #52525b;
+  --color-dashboard-text-subtle: #3f3f46;
+  --color-dashboard-text-faint: #71717a;
+  --color-dashboard-text-solid: #09090b;
+  --color-dashboard-text-inverse: #ffffff;
+
+  --color-dashboard-accent: #7553ff;
+  --color-dashboard-accent-text: #5b3bd9;
+  --color-dashboard-focus: #7553ff;
+
+  --color-dashboard-border-subtle: rgb(0 0 0 / 0.06);
+  --color-dashboard-border: rgb(0 0 0 / 0.09);
+  --color-dashboard-border-strong: rgb(0 0 0 / 0.11);
+  --color-dashboard-border-emphasis: rgb(0 0 0 / 0.16);
+  --color-dashboard-border-interactive: rgb(0 0 0 / 0.26);
+  --color-dashboard-border-heavy: rgb(0 0 0 / 0.32);
+
+  --color-dashboard-fill-faint: rgb(0 0 0 / 0.02);
+  --color-dashboard-fill-soft: rgb(0 0 0 / 0.035);
+  --color-dashboard-fill-hover: rgb(0 0 0 / 0.05);
+  --color-dashboard-fill-strong: rgb(0 0 0 / 0.08);
+
+  --color-dashboard-overlay-soft: rgb(0 0 0 / 0.06);
+  --color-dashboard-overlay: rgb(0 0 0 / 0.35);
+
+  --color-dashboard-scrollbar-track: rgb(0 0 0 / 0.02);
+  --color-dashboard-scrollbar-thumb: rgb(0 0 0 / 0.14);
+  --color-dashboard-scrollbar-thumb-hover: rgb(0 0 0 / 0.26);
+
+  /*
+   * Status and chart hues are tuned for the dark canvas: the UI uses their
+   * light shades (50-400). Mirror those shades (50 to 950, 100 to 900, and so
+   * on) so the same classes keep their contrast on the light canvas. Shades
+   * 500 and darker keep their values. Add a hue here when the UI starts to
+   * use it.
+   */
+  --color-amber-50: oklch(27.9% 0.077 45.635);
+  --color-amber-100: oklch(41.4% 0.112 45.904);
+  --color-amber-200: oklch(47.3% 0.137 46.201);
+  --color-amber-300: oklch(55.5% 0.163 48.998);
+  --color-amber-400: oklch(66.6% 0.179 58.318);
+  --color-cyan-50: oklch(30.2% 0.056 229.695);
+  --color-cyan-100: oklch(39.8% 0.07 227.392);
+  --color-cyan-200: oklch(45% 0.085 224.283);
+  --color-cyan-300: oklch(52% 0.105 223.128);
+  --color-cyan-400: oklch(60.9% 0.126 221.723);
+  --color-emerald-50: oklch(26.2% 0.051 172.552);
+  --color-emerald-100: oklch(37.8% 0.077 168.94);
+  --color-emerald-200: oklch(43.2% 0.095 166.913);
+  --color-emerald-300: oklch(50.8% 0.118 165.612);
+  --color-emerald-400: oklch(59.6% 0.145 163.225);
+  --color-fuchsia-50: oklch(29.3% 0.136 325.661);
+  --color-fuchsia-100: oklch(40.1% 0.17 325.612);
+  --color-fuchsia-200: oklch(45.2% 0.211 324.591);
+  --color-fuchsia-300: oklch(51.8% 0.253 323.949);
+  --color-fuchsia-400: oklch(59.1% 0.293 322.896);
+  --color-orange-50: oklch(26.6% 0.079 36.259);
+  --color-orange-100: oklch(40.8% 0.123 38.172);
+  --color-orange-200: oklch(47% 0.157 37.304);
+  --color-orange-300: oklch(55.3% 0.195 38.402);
+  --color-orange-400: oklch(64.6% 0.222 41.116);
+  --color-red-50: oklch(25.8% 0.092 26.042);
+  --color-red-100: oklch(39.6% 0.141 25.723);
+  --color-red-200: oklch(44.4% 0.177 26.899);
+  --color-red-300: oklch(50.5% 0.213 27.518);
+  --color-red-400: oklch(57.7% 0.245 27.325);
+  --color-rose-50: oklch(27.1% 0.105 12.094);
+  --color-rose-100: oklch(41% 0.159 10.272);
+  --color-rose-200: oklch(45.5% 0.188 13.697);
+  --color-rose-300: oklch(51.4% 0.222 16.935);
+  --color-rose-400: oklch(58.6% 0.253 17.585);
+  --color-sky-50: oklch(29.3% 0.066 243.157);
+  --color-sky-100: oklch(39.1% 0.09 240.876);
+  --color-sky-200: oklch(44.3% 0.11 240.79);
+  --color-sky-300: oklch(50% 0.134 242.749);
+  --color-sky-400: oklch(58.8% 0.158 241.966);
+  --color-slate-50: oklch(12.9% 0.042 264.695);
+  --color-slate-100: oklch(20.8% 0.042 265.755);
+  --color-slate-200: oklch(27.9% 0.041 260.031);
+  --color-slate-300: oklch(37.2% 0.044 257.287);
+  --color-slate-400: oklch(44.6% 0.043 257.281);
+  --color-violet-50: oklch(28.3% 0.141 291.089);
+  --color-violet-100: oklch(38% 0.189 293.745);
+  --color-violet-200: oklch(43.2% 0.232 292.759);
+  --color-violet-300: oklch(49.1% 0.27 292.581);
+  --color-violet-400: oklch(54.1% 0.281 293.009);
+}
+
+/* Style one-off values that the token and palette mirror cannot cover. */
+@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
+
 @layer base {
   :root {
     color-scheme: var(--dashboard-color-scheme, dark);

package/src/theme.ts

@@ -0,0 +1,49 @@
+/** Theme the dashboard shows: the saved choice, or the system color scheme. */
+export type DashboardThemeChoice = "dark" | "light" | "system";
+
+/** Browser storage key for the theme choice. No value means `system`. */
+export const DASHBOARD_THEME_STORAGE_KEY = "junior-dashboard-theme";
+
+/** Window event that tells the theme script to apply a new saved choice. */
+export const DASHBOARD_THEME_CHANGE_EVENT = "junior:dashboard-theme";
+
+/** Browser chrome color for each theme. Dark is the default. */
+export const DASHBOARD_THEME_COLORS = {
+  dark: "#000000",
+  light: "#ffffff",
+} as const;
+
+/**
+ * Inline head script that sets `data-theme` on `<html>` before first paint.
+ * It also follows system color scheme changes, choices from other tabs, and
+ * the change event, so it owns every theme update after page load.
+ */
+export const DASHBOARD_THEME_SCRIPT = `(function () {
+  var media = window.matchMedia("(prefers-color-scheme: light)");
+  function apply() {
+    var choice = null;
+    try {
+      choice = window.localStorage.getItem(${JSON.stringify(DASHBOARD_THEME_STORAGE_KEY)});
+    } catch (_error) {}
+    var theme =
+      choice === "light" || choice === "dark"
+        ? choice
+        : media.matches
+          ? "light"
+          : "dark";
+    document.documentElement.dataset.theme = theme;
+    var meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) {
+      meta.setAttribute(
+        "content",
+        theme === "light" ? ${JSON.stringify(DASHBOARD_THEME_COLORS.light)} : ${JSON.stringify(DASHBOARD_THEME_COLORS.dark)},
+      );
+    }
+  }
+  apply();
+  media.addEventListener("change", apply);
+  window.addEventListener("storage", function (event) {
+    if (event.key === null || event.key === ${JSON.stringify(DASHBOARD_THEME_STORAGE_KEY)}) apply();
+  });
+  window.addEventListener(${JSON.stringify(DASHBOARD_THEME_CHANGE_EVENT)}, apply);
+})();`;

package/src/client/pages/system/BaselineSnapshotCard.tsx

@@ -1,18 +0,0 @@
-import type { BaselineSnapshotReport } from "@sentry/junior/api/schema";
-
-import { SnapshotSummary } from "./SnapshotSummary";
-
-/** Show the install-wide baseline Sandbox snapshot used without a Workspace. */
-export function BaselineSnapshotCard(props: {
-  snapshot: BaselineSnapshotReport | null;
-}) {
-  return (
-    <SnapshotSummary
-      description="Default Sandboxes start from this install-wide snapshot when no Workspace is selected."
-      emptyDescription="No baseline snapshot is registered yet. The first base Sandbox prepare creates one."
-      headingId="baseline-snapshot-heading"
-      snapshot={props.snapshot}
-      title="Baseline snapshot"
-    />
-  );
-}