@sentry/junior-dashboard 0.248.0 → 0.250.0

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

@@ -1,17 +1,62 @@
+import type { ReactNode } from "react";
 import type {
+  AutomationExecutionDay,
+  AutomationExecutionStatusDay,
+  CodeActivityDay,
   ConversationMetricDay,
+  DailyConversationActivity,
+  GuardianMetricDay,
   LocationActivityDayReport,
   PeopleActivityDayReport,
+  PluginOperationalReport,
 } from "@sentry/junior/api/schema";
 import { InputCacheChart } from "../../components/charts/InputCacheChart";
 import { SystemMetricCharts } from "../../components/charts/SystemMetricCharts";
+import { WorkspaceUsageChart } from "../../components/charts/WorkspaceUsageChart";
+import { AutomationCostChart } from "../automations/AutomationCostChart";
+import { AutomationExecutionChart } from "../automations/AutomationExecutionChart";
+import { AutomationExecutionStatusChart } from "../automations/AutomationExecutionStatusChart";
+import { CodeActivityChart } from "../code/CodeActivityChart";
+import { LocationActivityChart } from "../locations/LocationActivityChart";
 import { LocationDirectoryActivityChart } from "../locations/LocationDirectoryActivityChart";
+import { MemoryCostChart } from "../memory/MemoryCostChart";
+import { MemoryTimeline } from "../memory/MemoryTimeline";
+import type { MemoryCostDay, MemoryDay } from "../memory/memoryDashboard";
 import { ContributionGrid } from "../people/ContributionGrid";
 import { PeopleActivityChart } from "../people/PeopleActivityChart";
 import { ConversationActivityChart } from "../system/ConversationActivityChart";
+import { GuardianActivity } from "../system/GuardianActivity";
+import { PluginBarChart } from "../system/PluginBarChart";
 import { Card } from "../../components/layout/Card";
 import { CardHeader } from "../../components/layout/CardHeader";
 
+type PluginWidget = NonNullable<PluginOperationalReport["widgets"]>[number];
+
+// The gallery browser scenario saves one image for each id.
+const CHART_FIXTURE_IDS = [
+  "conversation-activity",
+  "conversation-activity-hourly",
+  "input-cache",
+  "system-metrics",
+  "people-activity",
+  "location-directory-activity",
+  "location-activity",
+  "code-activity",
+  "code-activity-dense",
+  "code-activity-empty",
+  "workspace-usage",
+  "automation-executions",
+  "automation-execution-status",
+  "automation-cost",
+  "memory-timeline",
+  "memory-cost",
+  "guardian-activity",
+  "plugin-bar-chart",
+  "contribution-grid",
+] as const;
+
+type ChartFixtureId = (typeof CHART_FIXTURE_IDS)[number];
+
 const METRIC_DAYS: ConversationMetricDay[] = fixtureDates(14).map(
   (date, index) => ({
     conversations: 4 + ((index * 5) % 17),
@@ -22,6 +67,16 @@ const METRIC_DAYS: ConversationMetricDay[] = fixtureDates(14).map(
   }),
 );
 
+const HOURLY_METRIC_DAYS: ConversationMetricDay[] = fixtureHours(24).map(
+  (date, index) => ({
+    conversations: index % 5 === 0 ? 0 : 1 + ((index * 7) % 9),
+    costUsd: 0.05 + ((index * 3) % 7) * 0.04,
+    date,
+    durationMs: 30_000 + ((index * 11) % 7) * 9_000,
+    tokens: 2_000 + ((index * 13) % 11) * 400,
+  }),
+);
+
 const PEOPLE_DAYS: PeopleActivityDayReport[] = fixtureDates(30).map(
   (date, index) => ({
     activePeople: 4 + ((index * 7) % 13),
@@ -38,44 +93,233 @@ const LOCATION_DAYS: LocationActivityDayReport[] = fixtureDates(30).map(
   }),
 );
 
+const LOCATION_DETAIL_DAYS: DailyConversationActivity[] = fixtureDates(90).map(
+  (date, index) => {
+    const conversations = index % 11 === 0 ? 0 : 2 + ((index * 7) % 15);
+    return {
+      active: Math.min(conversations, index % 4),
+      conversations,
+      date,
+      durationMs: conversations * 60_000,
+      failed: index % 13 === 0 ? 1 : 0,
+    };
+  },
+);
+
+const CODE_DAYS: CodeActivityDay[] = codeDays(30);
+
+const DENSE_CODE_DAYS: CodeActivityDay[] = codeDays(90);
+
+const EMPTY_CODE_DAYS: CodeActivityDay[] = fixtureDates(30).map((date) => ({
+  closed: 0,
+  created: 0,
+  date,
+  merged: 0,
+}));
+
+const WORKSPACE_USAGE_DAYS = fixtureDates(30).map((date, index) => ({
+  count: index % 6 === 0 ? 0 : 1 + ((index * 5) % 9),
+  date,
+}));
+
+const AUTOMATION_DAYS: AutomationExecutionDay[] = fixtureDates(30).map(
+  (date, index) => ({
+    costUsd: index % 7 === 0 ? 0 : 0.04 + ((index * 5) % 9) * 0.11,
+    date,
+    event: (index * 3) % 5,
+    scheduled: index % 7 === 0 ? 0 : 1 + ((index * 7) % 6),
+  }),
+);
+
+const AUTOMATION_STATUS_DAYS: AutomationExecutionStatusDay[] = fixtureDates(
+  30,
+).map((date, index) => ({
+  blocked: index % 9 === 0 ? 1 : 0,
+  completed: index % 7 === 0 ? 0 : 1 + ((index * 5) % 4),
+  date,
+  failed: index % 5 === 0 ? 1 : 0,
+}));
+
+const MEMORY_DAYS: MemoryDay[] = fixtureDates(30).map((date, index) => ({
+  date,
+  personal: index % 8 === 0 ? 0 : (index * 3) % 7,
+  public: (index * 5) % 4,
+}));
+
+const MEMORY_EXTRACTION_DAYS: MemoryCostDay[] = fixtureDates(30).map(
+  (date, index) => ({
+    costUsd: index % 8 === 0 ? 0 : 0.02 + ((index * 7) % 9) * 0.015,
+    date,
+    events: index % 8 === 0 ? 0 : 1 + ((index * 3) % 6),
+  }),
+);
+
+const MEMORY_RECALL_DAYS: MemoryCostDay[] = fixtureDates(30).map(
+  (date, index) => ({
+    costUsd: 0.01 + ((index * 5) % 7) * 0.008,
+    date,
+    events: 2 + ((index * 5) % 9),
+  }),
+);
+
+const GUARDIAN_DAYS: GuardianMetricDay[] = fixtureDates(30).map(
+  (date, index) => {
+    const allow = 6 + ((index * 7) % 19);
+    const ask = (index * 3) % 5;
+    const deny = index % 6 === 0 ? 2 : 0;
+    return {
+      allow,
+      ask,
+      costUsd: (allow + ask + deny) * 0.0021,
+      date,
+      deny,
+      requests: allow + ask + deny,
+    };
+  },
+);
+
+const PLUGIN_WIDGET: PluginWidget = {
+  categories: fixtureDates(14).map((date, index) => ({
+    id: date,
+    label: date,
+    values: {
+      failed: index % 4 === 0 ? 2 : 0,
+      succeeded: 3 + ((index * 5) % 11),
+    },
+  })),
+  description: "Deliveries reported by the plugin.",
+  id: "deliveries",
+  series: [
+    { key: "succeeded", label: "Succeeded", tone: "good" },
+    { key: "failed", label: "Failed", tone: "danger" },
+  ],
+  title: "Deliveries",
+  type: "bar_chart",
+};
+
 const CONTRIBUTION_DAYS = fixtureDates(70).map((date, index) => ({
   conversations: index % 9 === 0 ? 0 : 1 + ((index * 7) % 18),
   date,
   durationMs: index % 9 === 0 ? 0 : 45_000 + ((index * 13) % 20) * 18_000,
 }));
 
-/** Render chart examples with cache drops and missing counters for visual review. */
+/** Render every dashboard chart with fixed data for visual review. */
 export function ChartFixtures() {
   return (
     <>
-      <ConversationActivityChart days={METRIC_DAYS} />
-      <InputCacheChart
-        bucketUnit="day"
-        days={METRIC_DAYS.map((day, index) => ({
-          ...day,
-          inputTokens: 2_000,
-          cachedInputTokens: index === 9 ? 8_000 : 180_000,
-          cacheCreationTokens:
-            index === 5 ? undefined : index === 9 ? 190_000 : 10_000,
-        }))}
-      />
-      <SystemMetricCharts days={METRIC_DAYS} />
-      <PeopleActivityChart days={PEOPLE_DAYS} />
-      <LocationDirectoryActivityChart days={LOCATION_DAYS} />
-      <Card>
-        <CardHeader
-          description="Daily conversation intensity over ten weeks."
-          title="Contribution activity"
+      <ChartFixture id="conversation-activity">
+        <ConversationActivityChart days={METRIC_DAYS} />
+      </ChartFixture>
+      <ChartFixture id="conversation-activity-hourly">
+        <ConversationActivityChart
+          bucketUnit="hour"
+          days={HOURLY_METRIC_DAYS}
         />
-        <ContributionGrid days={CONTRIBUTION_DAYS} />
-      </Card>
+      </ChartFixture>
+      <ChartFixture id="input-cache">
+        <InputCacheChart
+          bucketUnit="day"
+          days={METRIC_DAYS.map((day, index) => ({
+            ...day,
+            inputTokens: 2_000,
+            cachedInputTokens: index === 9 ? 8_000 : 180_000,
+            cacheCreationTokens:
+              index === 5 ? undefined : index === 9 ? 190_000 : 10_000,
+          }))}
+        />
+      </ChartFixture>
+      <ChartFixture id="system-metrics">
+        <SystemMetricCharts days={METRIC_DAYS} />
+      </ChartFixture>
+      <ChartFixture id="people-activity">
+        <PeopleActivityChart days={PEOPLE_DAYS} />
+      </ChartFixture>
+      <ChartFixture id="location-directory-activity">
+        <LocationDirectoryActivityChart days={LOCATION_DAYS} />
+      </ChartFixture>
+      <ChartFixture id="location-activity">
+        <LocationActivityChart days={LOCATION_DETAIL_DAYS} />
+      </ChartFixture>
+      <ChartFixture id="code-activity">
+        <CodeActivityChart days={CODE_DAYS} range={30} />
+      </ChartFixture>
+      <ChartFixture id="code-activity-dense">
+        <CodeActivityChart days={DENSE_CODE_DAYS} range={90} />
+      </ChartFixture>
+      <ChartFixture id="code-activity-empty">
+        <CodeActivityChart days={EMPTY_CODE_DAYS} range={30} />
+      </ChartFixture>
+      <ChartFixture id="workspace-usage">
+        <WorkspaceUsageChart
+          days={WORKSPACE_USAGE_DAYS}
+          range={30}
+          workspaceName="junior"
+        />
+      </ChartFixture>
+      <ChartFixture id="automation-executions">
+        <AutomationExecutionChart days={AUTOMATION_DAYS} range={30} />
+      </ChartFixture>
+      <ChartFixture id="automation-execution-status">
+        <AutomationExecutionStatusChart
+          days={AUTOMATION_STATUS_DAYS}
+          range={30}
+        />
+      </ChartFixture>
+      <ChartFixture id="automation-cost">
+        <AutomationCostChart days={AUTOMATION_DAYS} range={30} />
+      </ChartFixture>
+      <ChartFixture id="memory-timeline">
+        <MemoryTimeline days={MEMORY_DAYS} range={30} />
+      </ChartFixture>
+      <ChartFixture id="memory-cost">
+        <MemoryCostChart
+          extractionDays={MEMORY_EXTRACTION_DAYS}
+          range={30}
+          recallDays={MEMORY_RECALL_DAYS}
+        />
+      </ChartFixture>
+      <ChartFixture id="guardian-activity">
+        <GuardianActivity days={GUARDIAN_DAYS} />
+      </ChartFixture>
+      <ChartFixture id="plugin-bar-chart">
+        <PluginBarChart widget={PLUGIN_WIDGET} />
+      </ChartFixture>
+      <ChartFixture id="contribution-grid">
+        <Card>
+          <CardHeader
+            description="Daily conversation intensity over ten weeks."
+            title="Contribution activity"
+          />
+          <ContributionGrid days={CONTRIBUTION_DAYS} />
+        </Card>
+      </ChartFixture>
     </>
   );
 }
 
+function ChartFixture(props: { children: ReactNode; id: ChartFixtureId }) {
+  return <div data-gallery-chart={props.id}>{props.children}</div>;
+}
+
+function codeDays(count: number): CodeActivityDay[] {
+  return fixtureDates(count).map((date, index) => ({
+    closed: index % 9 === 0 ? 1 : 0,
+    created: index % 4 === 0 ? 0 : 1 + ((index * 5) % 3),
+    date,
+    merged: index % 3 === 0 ? 1 + (index % 2) : 0,
+  }));
+}
+
 function fixtureDates(count: number): string[] {
   const start = Date.UTC(2026, 4, 1);
   return Array.from({ length: count }, (_, index) =>
     new Date(start + index * 86_400_000).toISOString().slice(0, 10),
   );
 }
+
+function fixtureHours(count: number): string[] {
+  const start = Date.UTC(2026, 4, 1);
+  return Array.from({ length: count }, (_, index) =>
+    new Date(start + index * 3_600_000).toISOString().slice(0, 13),
+  );
+}

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