@sentry/junior-dashboard 0.259.0 → 0.261.0

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

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { DirectorySortSelect } from "../../components/controls/DirectorySortSelect";
+import { Field } from "../../components/Field";
+import { FilterGroup } from "../../components/FilterBar";
+import { Select } from "../../components/Select";
+
+/** Show shared select arrows at form, filter, and directory sizes. */
+export function SelectFixtures() {
+  const [sort, setSort] = useState("recent");
+
+  return (
+    <div className="grid min-w-0 gap-4">
+      <Field label="Schedule" htmlFor="gallery-select-form">
+        <Select id="gallery-select-form" defaultValue="weekly">
+          <option value="daily">Every day</option>
+          <option value="weekly">Every week</option>
+        </Select>
+      </Field>
+      <FilterGroup label="State">
+        <Select aria-label="State" variant="filter">
+          <option>All states</option>
+          <option>Active</option>
+          <option>Paused</option>
+        </Select>
+      </FilterGroup>
+      <DirectorySortSelect
+        ariaLabel="Gallery sort"
+        onChange={setSort}
+        options={[
+          { label: "Recently created", value: "recent" },
+          { label: "Oldest created", value: "oldest" },
+        ]}
+        value={sort}
+      />
+      <FilterGroup className="w-36" label="Opened">
+        <Select aria-label="Opened">
+          <option>Last 90 days</option>
+          <option>Any time</option>
+        </Select>
+      </FilterGroup>
+      <Field label="Disabled" htmlFor="gallery-select-disabled">
+        <Select id="gallery-select-disabled" disabled>
+          <option>Every week</option>
+        </Select>
+      </Field>
+      <Field
+        label="Destination"
+        htmlFor="gallery-select-invalid"
+        error="Choose a destination."
+      >
+        <Select
+          id="gallery-select-invalid"
+          aria-invalid
+          aria-describedby="gallery-select-invalid-error"
+        >
+          <option value="">Choose a destination</option>
+          <option value="conversation">This Conversation</option>
+        </Select>
+      </Field>
+    </div>
+  );
+}

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

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">