@sentry/junior-dashboard 0.259.0 → 0.260.0

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

@@ -0,0 +1,76 @@
+import type { ReactNode } from "react";
+import type { BaselineSnapshotReport } from "@sentry/junior/api/schema";
+
+import { Card } from "../../components/layout/Card";
+import { formatMs, formatRelativeTime, formatTime } from "../../format";
+import { formatSandboxSize } from "./SandboxSizeSummary";
+
+/**
+ * Show the base Sandbox: the default size and the baseline snapshot.
+ * Workspaces inherit the base setup and use the default size unless they set
+ * vCPUs.
+ */
+export function BaseSandboxCard(props: {
+  defaultVcpus: number | null;
+  snapshot: BaselineSnapshotReport | null;
+}) {
+  const snapshot = props.snapshot;
+  return (
+    <Card as="section" className="mb-0" padding="md" variant="section">
+      <div aria-labelledby="base-sandbox-heading" className="grid gap-4">
+        <div className="min-w-0 grid gap-1">
+          <h2
+            className="m-0 text-base font-semibold text-dashboard-text"
+            id="base-sandbox-heading"
+          >
+            Base Sandbox
+          </h2>
+          <p className="m-0 text-sm leading-relaxed text-dashboard-text-muted">
+            The base snapshot is inherited by all Workspaces.
+          </p>
+        </div>
+
+        <dl className="m-0 grid grid-cols-[max-content_minmax(0,1fr)] gap-x-6 gap-y-2 text-sm">
+          <Fact label="Size">{formatSandboxSize(props.defaultVcpus)}</Fact>
+          {snapshot ? (
+            <>
+              {snapshot.dependencyCount == null ? null : (
+                <Fact label="Dependencies">{snapshot.dependencyCount}</Fact>
+              )}
+              <Fact label="Build time">
+                {formatMs(snapshot.buildDurationMs)}
+              </Fact>
+              <Fact label="Generated">
+                <span title={formatTime(snapshot.generatedAt)}>
+                  {formatRelativeTime(snapshot.generatedAt)}
+                </span>
+              </Fact>
+              <Fact label="Snapshot">
+                <span className="break-all font-mono text-xs">
+                  {snapshot.id}
+                </span>
+              </Fact>
+            </>
+          ) : (
+            <Fact label="Snapshot">
+              <span className="text-dashboard-text-muted">
+                Not built yet. The first Sandbox without a Workspace builds it.
+              </span>
+            </Fact>
+          )}
+        </dl>
+      </div>
+    </Card>
+  );
+}
+
+function Fact(props: { children: ReactNode; label: string }) {
+  return (
+    <div className="contents">
+      <dt className="text-dashboard-text-muted">{props.label}</dt>
+      <dd className="m-0 min-w-0 tabular-nums text-dashboard-text">
+        {props.children}
+      </dd>
+    </div>
+  );
+}

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

@@ -65,7 +65,7 @@ export function ConversationActivityChart(props: {
               >
                 <g tabIndex={0}>
                   <rect
-                    fill="#22d3ee"
+                    fill="var(--color-cyan-400)"
                     height={renderedHeight}
                     opacity={day.conversations ? 0.78 : 0.08}
                     rx="2"
@@ -89,7 +89,7 @@ export function ConversationActivityChart(props: {
             format={formatActivityChartAverage}
             layout={layout}
             maximum={maximum}
-            stroke="#22d3ee"
+            stroke="var(--color-cyan-400)"
             unit={timeRangeBucketAverageUnit(bucketUnit)}
           />
           <ActivityChartDateLabels

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

@@ -15,12 +15,18 @@ import { formatCostSummary } from "../../format";
 
 type Widget = NonNullable<PluginOperationalReport["widgets"]>[number];
 
-const colors = ["#67e8f9", "#6ee7b7", "#fbbf24", "#fb7185", "#a78bfa"] as const;
+const colors = [
+  "var(--color-cyan-300)",
+  "var(--color-emerald-300)",
+  "var(--color-amber-400)",
+  "var(--color-rose-400)",
+  "var(--color-violet-400)",
+] as const;
 const toneColors = {
-  danger: "#fb7185",
-  good: "#6ee7b7",
-  neutral: "#67e8f9",
-  warning: "#fbbf24",
+  danger: "var(--color-rose-400)",
+  good: "var(--color-emerald-300)",
+  neutral: "var(--color-cyan-300)",
+  warning: "var(--color-amber-400)",
 } as const;
 
 function seriesColor(series: Widget["series"][number], index: number): string {
@@ -97,7 +103,7 @@ export function PluginBarChart(props: {
             return (
               <g key={index}>
                 <line
-                  stroke="rgba(255,255,255,0.07)"
+                  stroke="var(--color-dashboard-border-subtle)"
                   strokeDasharray="3 5"
                   x1={layout.left}
                   x2={layout.width - layout.right}

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

@@ -0,0 +1,47 @@
+import { Cpu } from "lucide-react";
+
+import { Detail, DetailList } from "../../components/DetailList";
+import { Card } from "../../components/layout/Card";
+
+/** Vercel Sandbox gives each vCPU 2 GB of memory. */
+const MEMORY_GB_PER_VCPU = 2;
+
+/** Format a Sandbox vCPU count with its memory. Null means the Vercel default. */
+export function formatSandboxSize(vcpus: number | null): string {
+  if (vcpus === null) return "Vercel default";
+  return `${vcpus} vCPU${vcpus === 1 ? "" : "s"} · ${vcpus * MEMORY_GB_PER_VCPU} GB`;
+}
+
+/** Show one Sandbox size in the shared System summary surface. */
+export function SandboxSizeSummary(props: {
+  description: string;
+  headingId: string;
+  title: string;
+  value: string;
+}) {
+  return (
+    <Card as="section" className="mb-0" padding="md" variant="section">
+      <div aria-labelledby={props.headingId} className="grid gap-4">
+        <div className="min-w-0 grid gap-1">
+          <h2
+            className="m-0 text-base font-semibold text-dashboard-text"
+            id={props.headingId}
+          >
+            {props.title}
+          </h2>
+          <p className="m-0 text-sm leading-relaxed text-dashboard-text-muted">
+            {props.description}
+          </p>
+        </div>
+        <DetailList>
+          <Detail label="Size">
+            <span className="inline-flex items-center gap-2">
+              <Cpu aria-hidden="true" size={14} />
+              {props.value}
+            </span>
+          </Detail>
+        </DetailList>
+      </div>
+    </Card>
+  );
+}

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

@@ -6,16 +6,19 @@ import { WorkspaceUsageChart } from "../../components/charts/WorkspaceUsageChart
 import { workspaceUsageDays } from "../../components/charts/workspaceUsage";
 import type { TimeRangeDays } from "../../components/controls/TimeRangeSelector";
 import { Card } from "../../components/layout/Card";
+import { formatSandboxSize, SandboxSizeSummary } from "./SandboxSizeSummary";
 import { SnapshotSummary } from "./SnapshotSummary";
 
 /** Load Workspace usage stats and render snapshot plus switch volume. */
 export function WorkspaceDetails(props: {
+  defaultVcpus: number | null;
   range: TimeRangeDays;
   workspace: WorkspaceReport;
 }) {
   const statsQuery = useStatsData();
   return (
     <WorkspaceDetailsContent
+      defaultVcpus={props.defaultVcpus}
       error={Boolean(statsQuery.error)}
       loading={statsQuery.isPending}
       range={props.range}
@@ -25,8 +28,9 @@ export function WorkspaceDetails(props: {
   );
 }
 
-/** Present snapshot metadata and switch volume for one Workspace recipe. */
+/** Present snapshot metadata, Sandbox size, and switch volume for one Workspace recipe. */
 export function WorkspaceDetailsContent(props: {
+  defaultVcpus: number | null;
   error: boolean;
   loading: boolean;
   range: TimeRangeDays;
@@ -42,6 +46,12 @@ export function WorkspaceDetailsContent(props: {
         snapshot={props.workspace.snapshot}
         title="Current snapshot"
       />
+      <SandboxSizeSummary
+        description="Sandboxes for this Workspace start with this size."
+        headingId="workspace-sandbox-size-heading"
+        title="Sandbox size"
+        value={formatSandboxSize(props.workspace.vcpus ?? props.defaultVcpus)}
+      />
       {!props.stats ? (
         <Card padding="sm">
           <EmptyTelemetry>

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

@@ -6,6 +6,7 @@ import { Field } from "../../components/Field";
 import { InlineError } from "../../components/InlineError";
 import { TextArea, TextInput } from "../../components/TextInput";
 import { Card } from "../../components/layout/Card";
+import { formatSandboxSize } from "./SandboxSizeSummary";
 import {
   createRepoDraft,
   type RepoDraft,
@@ -15,6 +16,7 @@ import {
 type WorkspaceEditorProps = {
   busy: boolean;
   canSave: boolean;
+  defaultVcpus: number | null;
   draft: WorkspaceDraft;
   error?: string;
   editing: boolean;
@@ -200,6 +202,23 @@ export function WorkspaceEditor(props: WorkspaceEditorProps) {
           />
         </Field>
 
+        <Field
+          help="Sandbox vCPUs for this Workspace. Each vCPU adds 2 GB of memory. Leave empty to use the app default."
+          htmlFor="workspace-vcpus"
+          label="vCPUs"
+        >
+          <TextInput
+            autoComplete="off"
+            id="workspace-vcpus"
+            inputMode="numeric"
+            onChange={(event) =>
+              props.onChange({ ...props.draft, vcpus: event.target.value })
+            }
+            placeholder={formatSandboxSize(props.defaultVcpus)}
+            value={props.draft.vcpus}
+          />
+        </Field>
+
         {props.error ? <InlineError>{props.error}</InlineError> : null}
 
         <div className="flex flex-wrap items-center gap-3 border-t border-dashboard-border-subtle pt-5">

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;