@checkstack/ui 1.7.1 → 1.8.1

package/.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-docs",
+    "@storybook/addon-themes",
+    "@storybook/addon-a11y",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  typescript: {
+    reactDocgen: "react-docgen",
+  },
+};
+
+export default config;

package/.storybook/manager-head.html

@@ -0,0 +1,2 @@
+<title>Checkstack UI — Component Library</title>
+<meta name="description" content="Component library for Checkstack plugin developers." />

package/.storybook/mock-access-api.ts

@@ -0,0 +1,5 @@
+import type { AccessApi } from "@checkstack/frontend-api";
+
+export const mockAccessApi: AccessApi = {
+  useAccess: () => ({ loading: false, allowed: true }),
+};

package/.storybook/preview.css

@@ -0,0 +1,5 @@
+@import "../src/themes.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/.storybook/preview.tsx

@@ -0,0 +1,73 @@
+import type { Preview } from "@storybook/react";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import {
+  ApiRegistryBuilder,
+  ApiProvider,
+  accessApiRef,
+} from "@checkstack/frontend-api";
+import { ThemeProvider } from "../src/components/ThemeProvider";
+import { ToastProvider } from "../src/components/ToastProvider";
+import { PerformanceProvider } from "../src/components/PerformanceProvider";
+import { mockAccessApi } from "./mock-access-api";
+import "./preview.css";
+
+const apiRegistry = new ApiRegistryBuilder()
+  .register(accessApiRef, mockAccessApi)
+  .build();
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: "app",
+      values: [
+        { name: "app", value: "hsl(0 0% 100%)" },
+        { name: "app-dark", value: "hsl(240 10% 4%)" },
+      ],
+    },
+    layout: "padded",
+    options: {
+      storySort: {
+        order: [
+          "Introduction",
+          "Foundations",
+          "Components",
+          ["Inputs", "Display", "Feedback", "Navigation", "Overlays", "Forms", "Layout", "Data"],
+        ],
+      },
+    },
+  },
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+    (Story) => (
+      <MemoryRouter>
+        <ApiProvider registry={apiRegistry}>
+          <ThemeProvider defaultTheme="light" storageKey="checkstack-storybook-theme">
+            <ToastProvider>
+              <PerformanceProvider>
+                <div className="bg-background text-foreground p-4">
+                  <Story />
+                </div>
+              </PerformanceProvider>
+            </ToastProvider>
+          </ThemeProvider>
+        </ApiProvider>
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export default preview;

package/CHANGELOG.md

@@ -1,5 +1,239 @@
 # @checkstack/ui
 
+## 1.8.1
+
+### Patch Changes
+
+- Updated dependencies [9016526]
+  - @checkstack/common@0.10.0
+  - @checkstack/frontend-api@0.5.1
+
+## 1.8.0
+
+### Minor Changes
+
+- 1ef2e79: feat: hotlinks on incidents/maintenances and additional links on systems
+
+  Users with `manage` access on an incident, maintenance, or system can now
+  attach free-form URL "hotlinks" — Jira tickets, runbooks, dashboards, ticket
+  tools, etc. — alongside the existing fields.
+
+  - **Incidents** & **maintenances**: links live on the entity itself and are
+    surfaced both in the editor dialog and on the public detail page. Two new
+    RPC procedures per plugin (`addLink`, `removeLink`) gated behind the
+    existing `manage` access rule. Links are returned as part of
+    `getIncident` / `getMaintenance` and cache-invalidated on every link
+    mutation.
+  - **Systems**: a parallel `system_links` table with `getSystemLinks`,
+    `addSystemLink`, `removeSystemLink` procedures. Surfaced inside the
+    system editor (next to contacts) and on the read-only system detail
+    sidebar. Cache-scoped per-system so list endpoints remain hot.
+  - **Shared UI**: a `LinksEditor` component in `@checkstack/ui` does the
+    presentation; the three plugins each own their own RPC wiring.
+
+  Database changes ship as additive migrations (new `incident_links`,
+  `maintenance_links`, `system_links` tables, all FK-cascaded on parent
+  delete). No existing columns or rows are touched.
+
+  The system incident and maintenance history pages now sort by relevance:
+  active entries (non-`resolved` incidents, `scheduled` or `in_progress`
+  maintenances) appear at the top, with creation date descending as the
+  tiebreaker.
+
+- aa89bc5: Replace the bespoke `registerInfrastructureTab()` registry with a standard
+  slot-extension contract (`InfrastructureTabsSlot` from
+  `@checkstack/infrastructure-common`). Plugins now contribute infrastructure
+  tabs via `createSlotExtension`, depending only on the slot owner.
+
+  The slot system in `@checkstack/frontend-api` gains a second type parameter
+  on `createSlot<TContext, TMetadata>` so extensions can declare typed static
+  metadata at registration time (label, icon, access rules, ordering for the
+  infrastructure tab bar). A new `useSlotExtensions(slot)` hook returns typed
+  extensions and subscribes to plugin lifecycle changes.
+
+  Each tab body now stacks a **Runtime** sub-section (live state, read-only)
+  on top of a **Configuration** sub-section (settings, gated by `canUpdate`).
+
+  **Queue runtime panel.** Surfaces aggregated counts (pending / processing /
+  completed / failed) plus three sub-tabs of recent jobs: **Active**, **Recent
+  failed** (with the failure message), and **Recent completed** (with
+  duration). Job payloads are deliberately not surfaced — they may carry
+  secrets and need a separate manage-access gate to be shown.
+
+  To support this, `Queue<T>` gains a required `listJobs(opts)` method
+  returning `JobSummary[]` (no payloads), and `QueueStats` gains a
+  `scope: "instance" | "cluster"` field. The in-memory queue keeps rolling
+  ring buffers (200 entries) for completed/failed history and tracks active
+  jobs by id; BullMQ uses native `getJobs`. `QueueManager.listJobs` aggregates
+  across queues and sorts (most-recent-first for terminal states, FIFO for
+  active/waiting/delayed).
+
+  **Cache runtime panel.** Lists the top N entries by size (or by recency) so
+  operators can debug a cache filling up. Values are deliberately omitted —
+  PII / secret risk. Backends opt in via an optional `listEntries?` method on
+  `CacheProvider`; non-supporting backends return `{ supported: false }` and
+  the UI renders a "not supported by this backend" hint. The in-memory cache
+  implements it using its existing per-entry byte tracking.
+
+  `CacheStats` also gains `scope: "instance" | "cluster"`.
+
+  **Multi-instance scope warning.** A new `<InstanceScopeBanner>` component in
+  `@checkstack/ui` renders a yellow banner above any runtime panel whose
+  backend reports `scope: "instance"` — i.e. in-memory queue or cache running
+  in a horizontally scaled deployment. The banner explains the metrics are
+  local to the responding replica and recommends switching to a clustered
+  backend (Redis-backed queue / cache) for cluster-wide visibility.
+
+  **Bug fix — stable cache provider proxy.** `CacheManagerImpl.getProvider()`
+  now returns a single stable proxy that delegates to whatever provider is
+  currently active. Previously, consumers of `createCachedScope` (and any
+  direct `cacheManager.getProvider()` caller) captured the active provider
+  reference at plugin-init time. After any `setActiveBackend` call — including
+  saving the same memory config in the new Cache tab, which reconstructs the
+  in-memory cache — those scopes wrote to an orphaned old provider while the
+  runtime panel read stats from the new (empty) one, making the runtime panel
+  appear to report 0 keys. With the proxy, all consumers share a single stable
+  identity and writes always land in the active provider.
+
+  **Bytes tracking on the in-memory cache.** `InMemoryCache.getStats().sizeBytes`
+  now returns a running approximation (UTF-8 bytes of the key plus
+  `v8.serialize(value).byteLength`, with a JSON fallback) that's kept in sync
+  across all eviction paths. Treat the number as a sanity gauge; it doesn't
+  include `Map` per-entry overhead.
+
+  **Pagination.** Both `Queue<T>.listJobs` and `CacheProvider.listEntries?`
+  are offset-paginated. Inputs gain an `offset: number`; outputs change to
+  `{ items, total: number | null, hasMore: boolean }`. `total` is nullable
+  so backends that can't compute it cheaply still paginate via `hasMore`.
+  The UI uses the existing `<Pagination>` component with a 25-row default
+  page size. `QueueManager.listJobs` aggregates by over-fetching
+  `[0, offset+limit)` per queue, merge-sorting, then slicing the window —
+  optimal for the single-queue case, acceptable for the multi-queue case
+  within the UI's reasonable page-depth bounds. BullMQ uses native offset
+  ranges via `getJobs(types, start, end)` plus `getJobCounts` for `total`.
+
+  **Pending tab.** The Queue runtime panel exposes a virtual `"pending"`
+  state (waiting ∪ delayed, FIFO). It's now the default sub-tab, since
+  "what's queued up?" is the most common question. Per-row state is shown
+  when viewing the combined list.
+
+  **Recurring schedules visible under Pending.** Cron- and interval-based
+  recurring jobs (e.g. healthchecks) are surfaced under Pending/Delayed
+  between fires, with a `nextRunAt` countdown column and a "(recurring)"
+  label. `JobSummary` gains optional `nextRunAt: Date` and `recurring:
+boolean` fields. The in-memory queue synthesises these rows from its
+  `recurringJobs` registry; BullMQ already materialises the next fire of
+  each scheduler as a delayed job and we now surface its trigger time and
+  the `repeatJobKey`-derived `recurring` flag.
+
+  **Bug fix — drop hook emits with no listeners.** `EventBus.emit` no
+  longer enqueues a job when zero listeners (distributed or instance-local)
+  are registered for the hook. Previously, hooks like
+  `core.plugin.initialized` — emitted on every plugin init but subscribed
+  to by nothing in the core repo — accumulated one waiting job per emit
+  forever. The in-memory queue's `processNext` short-circuits when there
+  are zero consumer groups, so its post-loop cleanup never ran for these
+  orphaned jobs. The fix drops the emit at the source and logs a debug
+  line. Note: in distributed deployments using a Redis-backed queue, this
+  means a subscriber on another replica won't receive an event if no
+  replica that emits it has a local listener. Plugins needing cross-process
+  delivery must register their listener on every replica that should
+  receive the hook.
+
+  **Breaking notes (treated as minor under beta semantics)**:
+
+  - `@checkstack/infrastructure-common` removes `registerInfrastructureTab`
+    and `getInfrastructureTabs`; former callers must register an extension
+    into `InfrastructureTabsSlot`.
+  - `@checkstack/queue-api`'s `Queue<T>` interface requires the new
+    `listJobs(opts)` method returning `ListJobsResult` (paginated). Both
+    bundled queue backends (memory, BullMQ) are updated; out-of-tree
+    implementations will need to add it.
+  - `QueueStats` and `CacheStats` add a required `scope` field.
+  - `CacheProvider.listEntries?` (when implemented) now returns
+    `ListEntriesResult` instead of `CacheEntrySummary[]`.
+  - `JobState` adds a `"pending"` variant.
+
+- 3547670: Add `@checkstack/tips-*` — first-run tip and onboarding infrastructure for
+  the frontends.
+
+  Three new packages:
+
+  - `@checkstack/tips-common` — RPC contract (`tipsContract`), `TipsApi`
+    client definition, and zod schemas. Fully-qualified tip IDs have shape
+    `<pluginId>.<localTipId>` and are produced exclusively by
+    `qualifyTipId(plugin, localId)` — plugins never write the namespace
+    themselves, and a local id with a leading or trailing `.` is rejected,
+    so one plugin cannot forge or dismiss a tip in another plugin's
+    namespace.
+  - `@checkstack/tips-backend` — Postgres-backed dismissal store
+    (`user_tip_dismissal` with composite PK on `(user_id, tip_id)`),
+    `listDismissed` / `dismiss` / `reset` endpoints scoped to the
+    requesting user via the auto-auth middleware, and a
+    `auth.userDeleted` hook that cleans up dismissals when a user is
+    deleted.
+  - `@checkstack/tips-frontend` — `<Tip>` (anchored popover) and
+    `<TipBanner>` (inline callout) components plus the `useTipState`
+    hook. All three accept `{ plugin, id }` (where `plugin` is the
+    caller's `pluginMetadata`) and route through `qualifyTipId` so the
+    namespace prefix is enforced at the boundary. Persists per-user on
+    the server when logged in, and per-browser in `localStorage`
+    (`checkstack.tips.dismissed`) when anonymous, with cross-tab sync via
+    the `storage` event.
+
+  `@checkstack/ui`'s `<EmptyState>` gains optional `steps` and `actions`
+  props for richer empty-state coaching (numbered onboarding lists +
+  primary CTA), and accepts `ReactNode` for `description`. Existing
+  callers continue to work unchanged.
+
+  `@checkstack/test-utils-backend`'s `createMockDb` now also mocks
+  `insert().values().onConflictDoNothing()` so routers using upsert-or-skip
+  semantics can be unit-tested.
+
+### Patch Changes
+
+- 3547670: Give `<DialogContent>` real vertical breathing room between its
+  children. The previous `gap-4` on `<DialogContent>` was a no-op because
+  the children were rendered inside a single inner wrapper, so
+  `<DialogHeader>`, the body, and `<DialogFooter>` all stacked tight
+  against each other. The inner wrapper is now a flex column with
+  `gap-6`, so headers/descriptions, body content, and footer buttons sit
+  apart at the dialog level without callers having to add
+  `<div className="space-y-…">` themselves.
+- 950d6ec: Fix mobile UserMenu items rendering at zero height, group menu items by
+  section, and unstack cramped card headers on small viewports.
+
+  - **UserMenu mobile bug**: On mobile, the user-menu Sheet rendered every
+    menu item as a grid row, which combined with `flex-shrink: 1` on each
+    item collapsed the buttons whose internal layout uses `display: flex`
+    (the items registered with `useNavigate` rather than `<Link>`) to zero
+    content height. Switched the mobile container to a flex column with
+    `[&>*]:shrink-0` and added `min-h-0` so the sheet scrolls correctly
+    when the list overflows.
+
+  - **UserMenu grouping**: Slot extensions now accept an optional `group`
+    field. The user menu buckets `UserMenuItemsSlot` extensions by `group`
+    and renders each group under a labeled header (`Workspace`,
+    `Reliability`, `Configuration`, `Documentation`, `Account`). Existing
+    core plugins are tagged with the appropriate group; third-party plugins
+    can pick any of these or supply their own label. Untagged extensions
+    render last with no header. `UserMenuItemsBottomSlot` is unaffected.
+
+  - **Card header responsiveness**: `CardHeaderRow` (the primitive shared by
+    Incident, Maintenance, Auth, Catalog, GitOps and other config cards) now
+    stacks vertically on narrow viewports and only switches to a single row
+    at the `sm` breakpoint, so titles and adjacent filter controls (e.g.
+    status `Select`, "Show resolved" checkbox) no longer cram together on
+    mobile. Refactored the Incident and Maintenance config pages to use the
+    primitive instead of a hand-rolled `flex items-center justify-between`
+    row, and made their `Select` triggers full-width on mobile.
+
+- Updated dependencies [42abfff]
+- Updated dependencies [aa89bc5]
+- Updated dependencies [950d6ec]
+  - @checkstack/common@0.9.0
+  - @checkstack/frontend-api@0.5.0
+
 ## 1.7.1
 
 ### Patch Changes

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {
-    "@checkstack/common": "0.7.0",
-    "@checkstack/frontend-api": "0.4.1",
+    "@checkstack/common": "0.9.0",
+    "@checkstack/frontend-api": "0.5.0",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -23,26 +23,40 @@
     "monaco-editor": "^0.55.1",
     "react": "^18.2.0",
     "react-day-picker": "^9.13.0",
-    "react-dom": "^19.2.5",
+    "react-dom": "^18.2.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.20.0",
     "recharts": "^3.6.0",
     "tailwind-merge": "^2.2.0"
   },
   "devDependencies": {
-    "@checkstack/scripts": "0.1.2",
-    "@checkstack/test-utils-frontend": "0.0.4",
-    "@checkstack/tsconfig": "0.0.6",
+    "@checkstack/scripts": "0.3.1",
+    "@checkstack/test-utils-frontend": "0.0.5",
+    "@checkstack/tsconfig": "0.0.7",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-themes": "^10.3.6",
+    "@storybook/react": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
     "@testing-library/react": "^16.0.0",
     "@types/react": "^18.2.0",
-    "@types/react-dom": "^19.2.3",
-    "typescript": "^5.0.0"
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "storybook": "^10.3.6",
+    "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.0.0",
+    "vite": "^8.0.8"
   },
   "scripts": {
     "typecheck": "tsgo -b",
     "lint": "bun run lint:code",
     "lint:code": "eslint . --max-warnings 0",
-    "test": "bun test"
+    "test": "bun test",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build -o storybook-static"
   },
   "checkstack": {
     "type": "tooling"

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/components/Card.tsx

@@ -22,8 +22,9 @@ export const CardHeader = ({
 );
 
 /**
- * A row layout for card headers with title and actions.
- * Provides mobile-friendly defaults with flex-wrap and gap.
+ * Row layout for card headers with title and actions. Stacks vertically on
+ * narrow viewports and switches to a single row at the `sm` breakpoint, so
+ * filters and buttons don't get cramped against the title on mobile.
  */
 export const CardHeaderRow = ({
   className,
@@ -31,7 +32,7 @@ export const CardHeaderRow = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-wrap items-center justify-between gap-3",
+      "flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between",
       className,
     )}
     {...props}

package/src/components/Dialog.tsx

@@ -33,7 +33,7 @@ const DialogOverlay = React.forwardRef<
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const dialogContentVariants = cva(
-  "w-full gap-4 border border-border bg-background text-foreground p-6 shadow-lg sm:rounded-lg max-h-[85dvh] overflow-y-auto overflow-x-visible",
+  "w-full border border-border bg-background text-foreground p-6 shadow-lg sm:rounded-lg max-h-[85dvh] overflow-y-auto overflow-x-visible",
   {
     variants: {
       size: {
@@ -79,7 +79,7 @@ const DialogContent = React.forwardRef<
           )}
           {...props}
         >
-          <div className="-mx-2 px-2">{children}</div>
+          <div className="-mx-2 px-2 flex flex-col gap-6">{children}</div>
           {!hideCloseButton && (
             <DialogPrimitive.Close
               className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"

package/src/components/EmptyState.tsx

@@ -4,27 +4,72 @@ import { cn } from "../utils";
 
 interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
-  description?: string;
+  description?: React.ReactNode;
   icon?: React.ReactNode;
+  /**
+   * Optional ordered onboarding steps. When supplied, the empty state
+   * renders as a "coaching" card explaining how the user gets started.
+   * Each step is shown with a numbered chip.
+   */
+  steps?: React.ReactNode[];
+  /**
+   * Optional action area (typically a primary CTA button) shown beneath
+   * the description / steps. Use this for "Create your first X" buttons.
+   */
+  actions?: React.ReactNode;
 }
 
 export const EmptyState: React.FC<EmptyStateProps> = ({
   title,
   description,
   icon,
+  steps,
+  actions,
   className,
   ...props
 }) => {
+  const isCoaching = (steps && steps.length > 0) || !!actions;
+
   return (
     <Card
       className={cn("border-dashed border-2 bg-muted/30", className)}
       {...props}
     >
-      <CardContent className="flex flex-col items-center justify-center py-12 text-center">
+      <CardContent
+        className={cn(
+          "flex flex-col items-center text-center",
+          isCoaching ? "py-10" : "py-12 justify-center",
+        )}
+      >
         {icon && <div className="text-muted-foreground/40 mb-4">{icon}</div>}
         <p className="text-foreground font-medium">{title}</p>
         {description && (
-          <p className="text-sm text-muted-foreground mt-1">{description}</p>
+          <div className="text-sm text-muted-foreground mt-1 max-w-prose">
+            {description}
+          </div>
+        )}
+        {steps && steps.length > 0 && (
+          <ol className="mt-6 flex flex-col gap-3 text-left max-w-md w-full">
+            {steps.map((step, index) => (
+              <li
+                key={index}
+                className="flex items-start gap-3 text-sm text-foreground"
+              >
+                <span
+                  className="inline-flex size-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-semibold"
+                  aria-hidden="true"
+                >
+                  {index + 1}
+                </span>
+                <span className="text-muted-foreground">{step}</span>
+              </li>
+            ))}
+          </ol>
+        )}
+        {actions && (
+          <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
+            {actions}
+          </div>
         )}
       </CardContent>
     </Card>

package/src/components/InstanceScopeBanner.tsx

@@ -0,0 +1,46 @@
+import {
+  InfoBanner,
+  InfoBannerIcon,
+  InfoBannerContent,
+  InfoBannerTitle,
+  InfoBannerDescription,
+} from "./InfoBanner";
+import { AlertTriangle } from "lucide-react";
+
+/**
+ * Warns operators that the metrics being displayed reflect a single process
+ * — relevant when the underlying backend is in-memory and the deployment is
+ * (or could become) horizontally scaled.
+ *
+ * Renders nothing when `scope === "cluster"`.
+ */
+export interface InstanceScopeBannerProps {
+  scope: "instance" | "cluster";
+  /** What the metrics are about ("Queue" / "Cache"). Used in the title only. */
+  subject: string;
+  /** Recommendation text — e.g. "switch to a Redis-backed queue". */
+  recommendation: string;
+}
+
+export const InstanceScopeBanner = ({
+  scope,
+  subject,
+  recommendation,
+}: InstanceScopeBannerProps) => {
+  if (scope === "cluster") return null;
+  return (
+    <InfoBanner variant="warning">
+      <InfoBannerIcon>
+        <AlertTriangle className="h-4 w-4" />
+      </InfoBannerIcon>
+      <InfoBannerContent>
+        <InfoBannerTitle>{subject}: instance-local metrics</InfoBannerTitle>
+        <InfoBannerDescription>
+          These figures reflect this server instance only. In a horizontally
+          scaled deployment, each replica reports its own numbers depending on
+          which one your request hit. {recommendation}
+        </InfoBannerDescription>
+      </InfoBannerContent>
+    </InfoBanner>
+  );
+};