@miragon/pulse-analytics-connector 0.0.0-bootstrap.0 → 0.21.0

package/src/widgets/analytics-dashboard/execution-performance-kpi.tsx

@@ -0,0 +1,94 @@
+import { WidgetShell, formatDuration, formatNumber } from "@miragon/pulse-widget-shell/widgets"
+import { KpiGrid, KpiGridSkeleton, type KpiCell } from "@miragon/mcp-toolkit-ui"
+import { useDashboardSelfFetch, type DashboardScopeProps, type DashboardView } from "./lib.js"
+import { QueryGate } from "../query-gate.js"
+import { useT, type T } from "../../messages/use-t.js"
+import { RATE_UP_IS_WORSE, deltaVerdict, type DeltaVerdict } from "../comparison-shared.js"
+
+/** Incidents per 100 starts, one decimal: "3,4" / "3.4" (no %: a rate may pass 100). */
+const rate = (value: number | null) => formatNumber(value, { maximumFractionDigits: 1 })
+
+const VERDICT_KEY: Record<DeltaVerdict, string> = {
+  worse: "aComparison.deltaWorse",
+  better: "aComparison.deltaBetter",
+  notReliable: "aComparison.deltaNotReliable",
+}
+
+/**
+ * The incident rate judged against the period before (U14/U17): a rate on its
+ * own is no verdict, so the cell itself carries no tone. Its trend line names
+ * the previous period's rate; only a change from the comparisons' threshold
+ * on (1 incident per 100 starts) is "worse" (danger arrow) or "better"
+ * (success arrow), a smaller one is flat and neutral, and over fewer starts
+ * than the comparison floor it reads "not reliable" without a colour.
+ *
+ * Only with the process held fixed: over several processes the rate is a
+ * total over their mix, so it moves when the mix moves while no process
+ * changed, and can even invert the per-process truth (Simpson's paradox, the
+ * reason every comparison requires a `processDefinitionKey`). An unscoped
+ * dashboard names the previous rate as a plain reference: no verdict, no
+ * direction, no colour.
+ */
+export function incidentRateTrend(
+  t: T,
+  data: Pick<DashboardView, "incidentRatePct" | "previous" | "processDefinitionKey">,
+): Pick<KpiCell, "trend" | "trendDirection" | "trendTone"> {
+  const previous = data.previous
+  if (!previous || data.incidentRatePct === null) return {}
+  if (previous.incidentRatePct === null) return { trend: t("aExecPerf.previousNoStarts") }
+  const value = rate(previous.incidentRatePct)
+  if (!data.processDefinitionKey) return { trend: t("aExecPerf.previous", { value }) }
+  const change = data.incidentRatePct - previous.incidentRatePct
+  const verdict = deltaVerdict(change, RATE_UP_IS_WORSE, previous.suppressed)
+  if (!verdict) {
+    return {
+      trend: t("aExecPerf.previous", { value }),
+      trendDirection: "flat",
+      trendTone: "neutral",
+    }
+  }
+  return {
+    trend: t("aExecPerf.previousJudged", { value, verdict: t(VERDICT_KEY[verdict]) }),
+    trendDirection: change > 0 ? "up" : change < 0 ? "down" : "flat",
+    trendTone: verdict === "worse" ? "danger" : verdict === "better" ? "success" : "neutral",
+  }
+}
+
+export function ExecutionPerformanceKpi({
+  data: initialData,
+  processDefinitionKey,
+  period,
+  engine,
+}: { data: DashboardView | null } & DashboardScopeProps) {
+  const t = useT()
+  const fallbackQuery = useDashboardSelfFetch(initialData, { processDefinitionKey, period, engine })
+
+  return (
+    <QueryGate
+      initialData={initialData}
+      query={fallbackQuery}
+      skeleton={<KpiGridSkeleton cells={4} boxed />}
+    >
+      {(data) => (
+        <WidgetShell>
+          <KpiGrid
+            boxed
+            header={{ label: t("aExecPerf.headerLabel") }}
+            cells={[
+              { label: t("aExecPerf.avgDuration"), value: formatDuration(data.avgDurationMs) },
+              { label: t("aExecPerf.median"), value: formatDuration(data.medianDurationMs) },
+              { label: t("aExecPerf.p95"), value: formatDuration(data.p95DurationMs) },
+              {
+                label: t("aExecPerf.incidentRate"),
+                // Incidents per 100 starts: one instance may carry several, so
+                // the rate can pass 100 and reads as a number, not a share.
+                value: rate(data.incidentRatePct),
+                ...incidentRateTrend(t, data),
+              },
+            ]}
+          />
+        </WidgetShell>
+      )}
+    </QueryGate>
+  )
+}

package/src/widgets/analytics-dashboard/execution-summary-kpi.tsx

@@ -0,0 +1,122 @@
+import {
+  HandOffButton,
+  ViewMeta,
+  WidgetShell,
+  formatLookback,
+  formatNumber,
+} from "@miragon/pulse-widget-shell/widgets"
+import type { AnalyticsDashboardData } from "@miragon/pulse-analytics-client"
+import { KpiGrid, KpiGridSkeleton, WidgetHeader } from "@miragon/mcp-toolkit-ui"
+import { useDashboardSelfFetch, type DashboardScopeProps, type DashboardView } from "./lib.js"
+import { QueryGate } from "../query-gate.js"
+import { useT } from "../../messages/use-t.js"
+import { engineIdsOf, useHandOff, type HandOff } from "../hand-off.js"
+import { enginesMeta } from "../view-meta.js"
+import { processNameOf } from "../../bpmn-names.js"
+
+/**
+ * Assess the dashboard on screen — its echoed scope (process, period,
+ * engines) as ids, its headline numbers as facts named for what they measure:
+ * window flows (`…InWindow`; incidents, not failed instances) apart from the
+ * live gauges (`…Now`). A figure that was not measured is null and left out,
+ * never stated as 0 (#336).
+ */
+export function executionSummaryHandOff(data: AnalyticsDashboardData): HandOff {
+  return {
+    intent: "askAi.executionSummary",
+    ids: {
+      engine: engineIdsOf(data.engines),
+      processDefinitionKey: data.processDefinitionKey ?? undefined,
+      period: data.period,
+    },
+    facts: {
+      startedInWindow: data.totalCount,
+      completedInWindow: data.completedCount,
+      incidentsCreatedInWindow: data.incidentsCreated,
+      incidentsResolvedInWindow: data.incidentsResolved,
+      incidentRatePct: data.incidentRatePct,
+      avgDurationMs: data.avgDurationMs,
+      p95DurationMs: data.p95DurationMs,
+      runningNow: data.runningNow,
+      openIncidentsNow: data.openIncidentsNow,
+    },
+    tools: ["analytics_analyze_process_performance", "analytics_find_failed_instances"],
+  }
+}
+
+export function ExecutionSummaryKpi({
+  data: initialData,
+  processDefinitionKey,
+  period,
+  engine,
+}: { data: DashboardView | null } & DashboardScopeProps) {
+  const fallbackQuery = useDashboardSelfFetch(initialData, { processDefinitionKey, period, engine })
+  const t = useT()
+  const { ask } = useHandOff()
+
+  return (
+    <QueryGate
+      initialData={initialData}
+      query={fallbackQuery}
+      header={<WidgetHeader title={t("aExecSummary.title")} />}
+      skeleton={<KpiGridSkeleton cells={5} boxed />}
+    >
+      {(data) => (
+        <WidgetShell>
+          <WidgetHeader
+            title={t("aExecSummary.title")}
+            sub={
+              <ViewMeta
+                subject={
+                  data.processDefinitionKey &&
+                  (processNameOf(data.names, data.processDefinitionKey) ??
+                    data.processDefinitionKey)
+                }
+                period={formatLookback(data.period)}
+                engines={enginesMeta(data.engines, data.reportingEngines)}
+                asOf={data.asOf}
+              />
+            }
+            actions={
+              <HandOffButton
+                action="assess"
+                variant="primary"
+                prompt={ask(executionSummaryHandOff(data))}
+              />
+            }
+          />
+          {/* Counts of what happened stay neutral (CI §3.3, U14): starts,
+              completions, new incidents and what runs now are volumes. The
+              one state is an incident open right now, its danger dot next to
+              the label; the digit itself is never coloured. */}
+          <KpiGrid
+            boxed
+            header={{ label: t("aExecSummary.headerExecutionSummary") }}
+            cells={[
+              { label: t("aExecSummary.cellStarted"), value: formatNumber(data.totalCount) },
+              {
+                label: t("aExecSummary.cellCompleted"),
+                value: formatNumber(data.completedCount),
+              },
+              {
+                label: t("aExecSummary.cellIncidentsCreated"),
+                value: formatNumber(data.incidentsCreated),
+              },
+              {
+                // A live gauge without a series is "not reported": formatNumber
+                // renders it as an em-dash, never as a plausible 0.
+                label: t("aExecSummary.cellRunningNow"),
+                value: formatNumber(data.runningNow),
+              },
+              {
+                label: t("aExecSummary.cellOpenIncidentsNow"),
+                value: formatNumber(data.openIncidentsNow),
+                tone: (data.openIncidentsNow ?? 0) > 0 ? "danger" : undefined,
+              },
+            ]}
+          />
+        </WidgetShell>
+      )}
+    </QueryGate>
+  )
+}

package/src/widgets/analytics-dashboard/lib.ts

@@ -0,0 +1,43 @@
+import { useToolQuery } from "@miragon/mcp-toolkit-ui"
+import type {
+  AnalyticsDashboardData,
+  EngineFilterInput,
+  Period,
+} from "@miragon/pulse-analytics-client"
+import { ANALYTICS_DASHBOARD_DATA } from "../../tool-names.js"
+import type { Named } from "../../bpmn-names.js"
+
+/** The dashboard payload the widgets read: the figures plus the names behind their ids. */
+export type DashboardView = Named<AnalyticsDashboardData>
+
+/** The cell props every split dashboard widget takes — the scope its self-fetch reads. */
+export interface DashboardScopeProps {
+  processDefinitionKey?: string
+  period?: Period
+  /** Configured engine id(s); omitted = every configured engine (the feed resolves it). */
+  engine?: EngineFilterInput
+}
+
+// Centralised so all four split dashboard widgets share one self-fetch contract.
+// The cache key includes every scope prop so per-cell instances (e.g. one tab
+// per period or per engine) don't collide on a single shared cache entry — and
+// an engine-scoped cell never reads a fleet-wide entry. Self-fetches the
+// app-only *_data feed — calling the show_* tool from inside the iframe is
+// host-defined behavior (hosts honoring resultCanProduceWidget may render a
+// second widget per refresh).
+export function useDashboardSelfFetch(
+  initialData: DashboardView | null,
+  props: DashboardScopeProps,
+) {
+  const { processDefinitionKey, period, engine } = props
+  const queryArgs: DashboardScopeProps = {}
+  if (processDefinitionKey) queryArgs.processDefinitionKey = processDefinitionKey
+  if (period) queryArgs.period = period
+  if (engine !== undefined) queryArgs.engine = engine
+  return useToolQuery<DashboardView>(
+    ["analytics:dashboard", processDefinitionKey ?? null, period ?? null, engine ?? null],
+    ANALYTICS_DASHBOARD_DATA,
+    queryArgs,
+    { enabled: !initialData },
+  )
+}

package/src/widgets/bpmn-heatmap.test.tsx

@@ -0,0 +1,75 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest"
+import type { ComponentType } from "react"
+import { cleanup, render, screen } from "@testing-library/react"
+import { LocaleProvider, queryClient } from "@miragon/mcp-toolkit-ui"
+import { WidgetFixtureHost } from "@miragon/mcp-toolkit-ui/app"
+import { AnalyticsBpmnHeatmap, type AnalyticsBpmnHeatmapData } from "./bpmn-heatmap.js"
+
+// The kit's viewer meets a diagram bpmn-js cannot import: the import-error
+// alert is what this suite reads.
+const viewer = vi.hoisted(() => ({
+  MockViewer: class {
+    importXML(): Promise<never> {
+      return Promise.reject(new Error("unparsable content <bpmn:foo> detected"))
+    }
+    get(): unknown {
+      return { zoom: () => 1 }
+    }
+    destroy() {}
+  },
+}))
+vi.mock("bpmn-js/lib/NavigatedViewer", () => ({ default: viewer.MockViewer }))
+
+afterEach(() => {
+  cleanup()
+  queryClient.clear()
+})
+
+const HEATMAP: AnalyticsBpmnHeatmapData = {
+  processDefinitionKey: "order",
+  period: "14d",
+  engines: ["prod-a"],
+  frequency: { Task_A: 12 },
+  durationSec: { Task_A: 3.5 },
+}
+
+function renderIn(language: "de" | "en") {
+  return render(
+    <LocaleProvider locale={language}>
+      <WidgetFixtureHost
+        widget={AnalyticsBpmnHeatmap as unknown as ComponentType<Record<string, unknown>>}
+        data={HEATMAP as unknown as Record<string, unknown>}
+        // The view reads its diagram from the feed, never from its payload.
+        tools={{ analytics_bpmn_xml_data: { bpmnXml: "<broken/>" } }}
+      />
+    </LocaleProvider>,
+  )
+}
+
+/**
+ * The kit's inline error state (U1): what happened as its title, what you
+ * can do under it (the kit's `errorHint` label), and the parser's raw cause
+ * collapsed under "Details" — never the raw text as the headline.
+ */
+describe("the BPMN heatmap — a diagram bpmn-js cannot import", () => {
+  it.each([
+    [
+      "de" as const,
+      "Das Diagramm konnte nicht gezeichnet werden.",
+      "Frag im Chat noch mal nach der Heatmap.",
+    ],
+    ["en" as const, "Could not draw the diagram.", "Ask in the chat to show the heatmap again."],
+  ])(
+    "says what happened and what you can do, the cause under Details (%s)",
+    async (language, title, hint) => {
+      renderIn(language)
+      const alert = await screen.findByRole("alert")
+      expect(alert.getAttribute("data-slot")).toBe("error-state")
+      expect(alert.textContent?.startsWith(title + hint)).toBe(true)
+      expect(
+        screen.getByText("unparsable content <bpmn:foo> detected").closest("details"),
+      ).toBeTruthy()
+    },
+  )
+})

package/src/widgets/bpmn-heatmap.tsx

@@ -0,0 +1,127 @@
+import { Skeleton, useToolQuery } from "@miragon/mcp-toolkit-ui"
+import {
+  BpmnHeatmapWidget,
+  QueryFallback,
+  ViewMeta,
+  formatLookback,
+  type BpmnHeatmapData,
+} from "@miragon/pulse-widget-shell/widgets"
+
+import type { BpmnMissingReason } from "../heatmap-data.js"
+import { useT } from "../messages/use-t.js"
+import { ANALYTICS_BPMN_XML_DATA } from "../tool-names.js"
+import { enginesMeta } from "./view-meta.js"
+
+/**
+ * The analytics heatmap payload (`analytics_show_bpmn_heatmap`): the heat
+ * values plus the configured engines they add up, so the model description
+ * and the meta line name the scope like every other analytics view, and when
+ * the values were read. The diagram is NOT in it: the widget reads it from
+ * `analytics_bpmn_xml_data`, so the model never sees the XML.
+ */
+export interface AnalyticsBpmnHeatmapData extends Omit<BpmnHeatmapData, "bpmnXml"> {
+  engines: string[]
+  /** When the heat values were read (ISO); absent in payloads recorded before it existed. */
+  asOf?: string
+  /**
+   * Why there is no diagram, as the server knows it (`heatmap-data.ts`).
+   * Absent when a diagram exists (the widget then reads it).
+   */
+  bpmnMissing?: BpmnMissingReason
+}
+
+/** `analytics_bpmn_xml_data`: the key's latest diagram, or why there is none. */
+interface HeatmapDiagram {
+  bpmnXml: string | null
+  bpmnMissing?: BpmnMissingReason
+}
+
+/**
+ * The "no diagram" text per known cause. An absent or unknown cause gets the
+ * text that names none: the widget never guesses why the diagram is missing.
+ */
+const BPMN_MISSING_KEY: Record<BpmnMissingReason, string> = {
+  "no-camunda7": "aHeatmap.bpmnNoCamunda7",
+  "not-loaded": "aHeatmap.bpmnNotLoaded",
+}
+
+/** The catalog key of the "no diagram" text for a payload. */
+function bpmnMissingKey(data: Pick<AnalyticsBpmnHeatmapData, "bpmnMissing"> | null) {
+  const reason = data?.bpmnMissing
+  return reason && Object.hasOwn(BPMN_MISSING_KEY, reason)
+    ? BPMN_MISSING_KEY[reason]
+    : "aHeatmap.bpmnUnavailable"
+}
+
+/**
+ * Analytics-side wrapper that localizes the shared shell heatmap. The shell
+ * carries no module i18n — every string arrives via `labels` — so this binds
+ * `useT()` to the component. Registered under `analytics:bpmn-heatmap` in
+ * `widgets/index.ts` in place of the raw shell widget.
+ */
+/**
+ * The heatmap's data with its diagram: read from `analytics_bpmn_xml_data`
+ * unless the server said why there is none, scoped to the engines whose heat
+ * the view shows. `pending` while the read is out (or failed).
+ */
+function useHeatmapWithDiagram(data: AnalyticsBpmnHeatmapData | null) {
+  const hasDiagram = data !== null && data.bpmnMissing === undefined
+  const diagram = useToolQuery<HeatmapDiagram>(
+    ["analytics:bpmn-xml", data?.processDefinitionKey ?? null, data?.engines ?? null],
+    ANALYTICS_BPMN_XML_DATA,
+    { processDefinitionKey: data?.processDefinitionKey ?? "", engine: data?.engines },
+    { enabled: hasDiagram },
+  )
+  const full: (BpmnHeatmapData & Pick<AnalyticsBpmnHeatmapData, "bpmnMissing">) | null = data && {
+    ...data,
+    bpmnXml: diagram.data?.bpmnXml ?? null,
+    bpmnMissing: data.bpmnMissing ?? diagram.data?.bpmnMissing,
+  }
+  return { diagram, pending: hasDiagram && !diagram.data, full }
+}
+
+export function AnalyticsBpmnHeatmap({ data }: { data: AnalyticsBpmnHeatmapData | null }) {
+  const t = useT()
+  const { diagram, pending, full } = useHeatmapWithDiagram(data)
+  if (pending) {
+    return (
+      <QueryFallback
+        isError={diagram.isError}
+        error={diagram.error}
+        onRetry={() => void diagram.refetch()}
+        errorTitle={t("aHeatmap.errorTitle")}
+        skeleton={<Skeleton className="h-60 w-full rounded-md" />}
+      />
+    )
+  }
+  return (
+    <BpmnHeatmapWidget
+      data={full}
+      meta={
+        data && (
+          <ViewMeta
+            period={formatLookback(data.period)}
+            engines={enginesMeta(data.engines)}
+            asOf={data.asOf}
+          />
+        )
+      }
+      labels={{
+        title: t("aHeatmap.title"),
+        window: t("aHeatmap.window"),
+        frequency: t("aHeatmap.frequency"),
+        duration: t("aHeatmap.duration"),
+        frequencyLegend: t("aHeatmap.frequencyLegend"),
+        durationLegend: t("aHeatmap.durationLegend"),
+        noData: t("aHeatmap.noData"),
+        noHeat: t("aHeatmap.noHeat"),
+        bpmnUnavailable: t(bpmnMissingKey(full)),
+        less: t("aHeatmap.less"),
+        more: t("aHeatmap.more"),
+        diagramAriaLabel: t("aHeatmap.diagramAria"),
+        errorTitle: t("aHeatmap.errorTitle"),
+        errorHint: t("aHeatmap.errorHint"),
+      }}
+    />
+  )
+}

package/src/widgets/catalogue-sync.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest"
+import { catalogueSyncIssues } from "@miragon/pulse-widget-shell/server"
+import { definition } from "../definition.js"
+import { analyticsWidgets } from "./index.js"
+
+/**
+ * Guard against widget-catalogue drift (invariant 3, links 1↔2), mirroring the
+ * camunda7 module's test: every widget registered in the host bundle map
+ * (`widgets/index.ts`) must be catalogued in `definition.ts` and vice versa —
+ * the shared checker lists every drifted id.
+ */
+describe("analytics widget catalogue ↔ registry sync", () => {
+  it("definition.widgets matches the registered widget components exactly", () => {
+    expect(catalogueSyncIssues(definition, analyticsWidgets)).toEqual([])
+  })
+})

package/src/widgets/cluster-compare.tsx

@@ -0,0 +1,148 @@
+import { Badge } from "@miragon/mcp-toolkit-ui"
+import type { ClusterCompareKpi, ClusterCompareResult } from "@miragon/pulse-analytics-client"
+import {
+  HandOffButton,
+  ViewMeta,
+  formatNumber,
+  formatTimestamp,
+} from "@miragon/pulse-widget-shell/widgets"
+import { useT, type T } from "../messages/use-t.js"
+import {
+  ComparisonCard,
+  ComparisonEmptyState,
+  SuppressedBadge,
+  buildComparisonMetrics,
+  deltaFacts,
+} from "./comparison-shared.js"
+import { engineIdsOf, useHandOff, type HandOff } from "./hand-off.js"
+import { enginesMeta } from "./view-meta.js"
+
+export type ClusterCompareData = ClusterCompareResult | null
+
+/**
+ * Interpret a before/after-deployment comparison — confirm it, then find the
+ * driving element. The ids re-run the comparison as asked (the requested
+ * whole-day windows, the echoed engines); the windows actually measured — cut
+ * short at now or the retention — are facts (#336).
+ */
+export function clusterCompareHandOff(data: ClusterCompareResult): HandOff {
+  return {
+    intent: "askAi.clusterCompare",
+    ids: {
+      engine: engineIdsOf(data.engines),
+      deploymentTimestamp: data.deploymentTimestamp,
+      windowBeforeDays: data.requestedWindowDays.before,
+      windowAfterDays: data.requestedWindowDays.after,
+      processDefinitionKey: data.processDefinitionKey,
+      activityId: data.activityId,
+    },
+    facts: {
+      measuredBeforeDays: data.windowDays.before,
+      measuredAfterDays: data.windowDays.after,
+      partial: data.partial || undefined,
+      ...deltaFacts(data.delta, data.suppressed),
+    },
+    tools: ["analytics_cluster_compare", "analytics_element_bottleneck"],
+  }
+}
+
+const MINUTE = 60
+const HOUR = 60 * MINUTE
+const DAY = 24 * HOUR
+
+type MeasuredWindow = Pick<ClusterCompareKpi, "window_from" | "window_to" | "window_days">
+
+/**
+ * A measured window's length in seconds, from its exact bounds. `window_days`
+ * is rounded to 0.01 d (about 14 minutes), too coarse for a window cut short
+ * at now; it stands in only when the bounds do not parse.
+ */
+function measuredSeconds(measured: MeasuredWindow) {
+  const seconds = (Date.parse(measured.window_to) - Date.parse(measured.window_from)) / 1000
+  return Number.isFinite(seconds) ? seconds : measured.window_days * DAY
+}
+
+/**
+ * A measured window's length in words, in the largest unit it fills: days
+ * and tenths ("7 Tage", "1.5 days"), else whole hours, else whole minutes,
+ * else "unter 1 Minute". A window cut short at now reads "2 Stunden" or
+ * "10 Minuten", never "0,1 Tage" and never a minute window as "1 Stunde".
+ */
+export function windowLength(t: T, measured: MeasuredWindow): string {
+  const seconds = measuredSeconds(measured)
+  if (seconds >= DAY) {
+    return t("aCommon.days", { count: formatNumber(seconds / DAY, { maximumFractionDigits: 1 }) })
+  }
+  if (seconds >= HOUR) {
+    return t("aCommon.hours", { count: formatNumber(Math.round(seconds / HOUR)) })
+  }
+  if (seconds >= MINUTE) {
+    return t("aCommon.minutes", { count: formatNumber(Math.round(seconds / MINUTE)) })
+  }
+  return t("aCommon.underOneMinute")
+}
+
+export function ClusterCompareWidget({ data }: { data: ClusterCompareData }) {
+  const t = useT()
+  const { ask } = useHandOff()
+  if (!data) return <ComparisonEmptyState>{t("aClusterCompare.noData")}</ComparisonEmptyState>
+
+  const before = data.kpis.find((k) => k.period === "before")
+  const after = data.kpis.find((k) => k.period === "after")
+  if (!before || !after) {
+    return <ComparisonEmptyState>{t("aClusterCompare.incompleteData")}</ComparisonEmptyState>
+  }
+
+  const metrics = buildComparisonMetrics(t, before, after, data.delta)
+
+  return (
+    <ComparisonCard
+      title={t("aClusterCompare.title")}
+      tableLabel={t("aClusterCompare.tableLabel")}
+      beforeLabel={t("aClusterCompare.beforeLabel")}
+      afterLabel={t("aClusterCompare.afterLabel")}
+      metrics={metrics}
+      suppressed={data.suppressed}
+      actions={
+        <HandOffButton
+          action="assess"
+          prompt={ask(clusterCompareHandOff(data))}
+          variant="primary"
+        />
+      }
+      meta={
+        <ViewMeta
+          period={t("aClusterCompare.period", {
+            before: windowLength(t, before),
+            after: windowLength(t, after),
+          })}
+          engines={enginesMeta(data.engines)}
+          asOf={data.asOf}
+        />
+      }
+      badges={
+        <>
+          <Badge variant="secondary">
+            {t("aClusterCompare.deployBadge", {
+              timestamp: formatTimestamp(data.deploymentTimestamp),
+            })}
+          </Badge>
+          {data.partial && <Badge variant="outline">{t("aClusterCompare.partialBadge")}</Badge>}
+          {data.processDefinitionKey && <Badge>{data.processDefinitionKey}</Badge>}
+          {data.activityId && (
+            <Badge variant="outline">
+              {t("aClusterCompare.elementBadge", { activityId: data.activityId })}
+            </Badge>
+          )}
+          {data.suppressed && (
+            <SuppressedBadge>
+              {t("aClusterCompare.insufficientSignal", {
+                minBucketSize: formatNumber(data.minBucketSize),
+              })}
+            </SuppressedBadge>
+          )}
+        </>
+      }
+    />
+  )
+}