@sentry/junior-dashboard 0.249.0 → 0.251.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/mock-reporting/fixtures.ts

@@ -125,6 +125,8 @@ const SANDBOX_CONVERSATION_ID = "slack:CQA999:1770010800.000400";
 const FAILED_CONVERSATION_ID = "slack:CQA777:1770014400.000500";
 const LONG_CONVERSATION_ID = "slack:CQA456:1770021600.000600";
 const SCHEDULER_CONVERSATION_ID = "scheduler:daily-ops-digest";
+/** Event automation run. Its trigger message id equals the conversation id. */
+const EVENT_AUTOMATION_RUN_CONVERSATION_ID = "agent-dispatch:event-1";
 export const DASHBOARD_QA_CONVERSATION_ID = "internal:dashboard-qa";
 export const ARCHIVED_CONVERSATION_ID = "internal:archived-restore-qa";
 const DASHBOARD_QA_PLAN_ID = "junior:internal:dashboard-qa:advisor-plan";
@@ -1395,6 +1397,75 @@ function simpleConversation(
   });
 }
 
+function eventAutomationRunConversation(
+  nowMs: number,
+): ConversationDetailReport {
+  const startedAt = iso(nowMs, -3 * 60 * 60_000);
+  const at = (offsetMs: number) => iso(Date.parse(startedAt), offsetMs);
+  return detail(nowMs, {
+    conversationId: EVENT_AUTOMATION_RUN_CONVERSATION_ID,
+    displayTitle: "Closed issue summary",
+    surface: "internal",
+    startedAt,
+    lastSeenAt: at(14_000),
+    lastProgressAt: at(14_000),
+    cumulativeDurationMs: 14_000,
+    sourceTask: {
+      id: "event-1",
+      kind: "event",
+      label: "Summarize the closed issue",
+      title: "Closed issue summary",
+      triggerMessageId: EVENT_AUTOMATION_RUN_CONVERSATION_ID,
+      triggerLabel: "Linear issue ACME-42 closed",
+      credentialMode: "creator",
+      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",
+        },
+        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"),
+      }),
+      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: "ACME-42 is closed. The saved-card checkout failure was fixed by the token refresh change and verified in production.",
+      }),
+      reportEvent(3, at(14_000), {
+        type: "turn_lifecycle",
+        turnId: "dispatch:event-1",
+        state: "succeeded",
+      }),
+    ],
+  });
+}
+
 function actor(
   email: string | undefined,
   fullName: string,
@@ -1488,6 +1559,7 @@ function mockConversations(nowMs: number): MockConversation[] {
         title: "Weekly project summary",
       },
     }),
+    eventAutomationRunConversation(nowMs),
     simpleConversation(nowMs, {
       conversationId: ARCHIVED_CONVERSATION_ID,
       displayTitle: "Archived restore target",