@checkstack/infrastructure-frontend 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -1,5 +1,172 @@
 # @checkstack/infrastructure-frontend
 
+## 0.2.5
+
+### Patch Changes
+
+- Updated dependencies [9016526]
+  - @checkstack/common@0.10.0
+  - @checkstack/frontend-api@0.5.1
+  - @checkstack/infrastructure-common@0.3.1
+  - @checkstack/ui@1.8.1
+
+## 0.2.4
+
+### Patch Changes
+
+- 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.
+
+- 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 [3547670]
+- Updated dependencies [1ef2e79]
+- Updated dependencies [aa89bc5]
+- Updated dependencies [950d6ec]
+- Updated dependencies [3547670]
+  - @checkstack/common@0.9.0
+  - @checkstack/ui@1.8.0
+  - @checkstack/frontend-api@0.5.0
+  - @checkstack/infrastructure-common@0.3.0
+
 ## 0.2.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/infrastructure-frontend",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,10 +21,10 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/common": "0.7.0",
-    "@checkstack/frontend-api": "0.4.1",
-    "@checkstack/infrastructure-common": "0.2.2",
-    "@checkstack/ui": "1.7.0",
+    "@checkstack/common": "0.9.0",
+    "@checkstack/frontend-api": "0.5.0",
+    "@checkstack/infrastructure-common": "0.3.0",
+    "@checkstack/ui": "1.8.0",
     "lucide-react": "^0.468.0",
     "react": "^18.3.1",
     "react-router-dom": "^7.1.1"
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@types/react": "^18.3.18",
     "typescript": "^5.7.2",
-    "@checkstack/tsconfig": "0.0.6",
-    "@checkstack/scripts": "0.1.2"
+    "@checkstack/tsconfig": "0.0.7",
+    "@checkstack/scripts": "0.3.1"
   }
 }

package/src/components/UserMenuItems.tsx

@@ -1,26 +1,37 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { Server } from "lucide-react";
-import type { UserMenuItemsContext } from "@checkstack/frontend-api";
+import {
+  type UserMenuItemsContext,
+  pluginRegistry,
+} from "@checkstack/frontend-api";
 import { DropdownMenuItem } from "@checkstack/ui";
 import { resolveRoute } from "@checkstack/common";
 import {
   infrastructureRoutes,
-  getInfrastructureTabs,
+  InfrastructureTabsSlot,
+  type InfrastructureTabMetadata,
 } from "@checkstack/infrastructure-common";
 
 /**
  * User menu item pointing to Infrastructure Settings.
  * Only visible if the user has read access to at least one infrastructure tab.
+ *
+ * The check is best-effort/synchronous: it uses the user's pre-fetched
+ * access-rule list rather than calling `useAccess`, which avoids hooks in a
+ * component that may be rendered without a Suspense boundary.
  */
 export const InfrastructureUserMenuItems = ({
   accessRules: userPerms,
 }: UserMenuItemsContext) => {
-  // Check if user has access to ANY infrastructure tab's read permission
-  const tabs = getInfrastructureTabs();
-  const canReadAny = tabs.some((tab) => {
-    const qualifiedId = `${tab.pluginId}.${tab.readAccess.id}`;
-    return userPerms.includes("*") || userPerms.includes(qualifiedId);
+  const tabs = pluginRegistry.getExtensions(InfrastructureTabsSlot.id);
+
+  const canReadAny = tabs.some((ext) => {
+    const meta = ext.metadata as InfrastructureTabMetadata | undefined;
+    if (!meta) return false;
+    return (
+      userPerms.includes("*") || userPerms.includes(meta.readAccess.id)
+    );
   });
 
   if (!canReadAny) {

package/src/index.tsx

@@ -23,6 +23,7 @@ export const infrastructurePlugin = createFrontendPlugin({
     createSlotExtension(UserMenuItemsSlot, {
       id: "infrastructure.user-menu.items",
       component: InfrastructureUserMenuItems,
+      metadata: { group: "Configuration" },
     }),
   ],
 });

package/src/pages/InfrastructureConfigPage.tsx

@@ -3,36 +3,44 @@ import {
   wrapInSuspense,
   accessApiRef,
   useApi,
+  useSlotExtensions,
 } from "@checkstack/frontend-api";
-import { getInfrastructureTabs } from "@checkstack/infrastructure-common";
-import {
-  PageLayout,
-  cn,
-} from "@checkstack/ui";
+import { InfrastructureTabsSlot } from "@checkstack/infrastructure-common";
+import { PageLayout, cn } from "@checkstack/ui";
 import { Server, ShieldOff } from "lucide-react";
 
 /**
- * Infrastructure Configuration page — IDE Editor pattern.
+ * Infrastructure Settings page — IDE Editor pattern.
  *
  * Renders a vertical tab bar on the left with content area on the right.
- * Each tab is registered by plugins (queue, cache, etc.) with its own access rules.
- * The page only shows tabs the user has read access to.
+ * Each tab is contributed by a plugin (queue, cache, …) via an extension
+ * registered into `InfrastructureTabsSlot`. The shell page is plugin-agnostic
+ * and only depends on the slot contract in `@checkstack/infrastructure-common`.
  */
 const InfrastructureConfigPageContent = () => {
   const accessApi = useApi(accessApiRef);
-  const allTabs = getInfrastructureTabs();
+  const tabs = useSlotExtensions(InfrastructureTabsSlot);
+
+  const sortedTabs = useMemo(
+    () =>
+      tabs.toSorted(
+        (a, b) => (a.metadata.order ?? 100) - (b.metadata.order ?? 100),
+      ),
+    [tabs],
+  );
 
-  // Check access for each tab
-  const tabAccess = allTabs.map((tab) => ({
-    tab,
-    readResult: accessApi.useAccess(tab.readAccess),
-    manageResult: accessApi.useAccess(tab.manageAccess),
+  // Per-tab access lookup (read + manage). Hooks must be called in stable
+  // order, so we map over `sortedTabs` — the registry is append-only during
+  // a session aside from explicit lifecycle changes, which trigger a full
+  // re-render via `useSlotExtensions`.
+  const tabAccess = sortedTabs.map((ext) => ({
+    extension: ext,
+    readResult: accessApi.useAccess(ext.metadata.readAccess),
+    manageResult: accessApi.useAccess(ext.metadata.manageAccess),
   }));
 
-  // Filter to visible tabs
   const visibleTabs = useMemo(
-    () =>
-      tabAccess.filter(({ readResult }) => readResult.allowed),
+    () => tabAccess.filter(({ readResult }) => readResult.allowed),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [tabAccess.map(({ readResult }) => readResult.allowed).join(",")],
   );
@@ -41,11 +49,10 @@ const InfrastructureConfigPageContent = () => {
   const hasAnyAccess = visibleTabs.length > 0;
 
   const [activeTabId, setActiveTabId] = useState<string>();
-
-  // Default to first visible tab
-  const effectiveActiveTabId = activeTabId ?? visibleTabs[0]?.tab.id;
+  const effectiveActiveTabId =
+    activeTabId ?? visibleTabs[0]?.extension.id;
   const activeTabEntry = visibleTabs.find(
-    (t) => t.tab.id === effectiveActiveTabId,
+    (t) => t.extension.id === effectiveActiveTabId,
   );
 
   if (!isLoading && !hasAnyAccess) {
@@ -77,15 +84,14 @@ const InfrastructureConfigPageContent = () => {
       allowed={hasAnyAccess}
     >
       <div className="flex gap-6 min-h-[600px]">
-        {/* Tab Bar */}
         <nav className="flex flex-col gap-1 w-52 shrink-0 border-r border-border pr-4">
-          {visibleTabs.map(({ tab }) => {
-            const Icon = tab.icon;
-            const isActive = tab.id === effectiveActiveTabId;
+          {visibleTabs.map(({ extension }) => {
+            const Icon = extension.metadata.icon;
+            const isActive = extension.id === effectiveActiveTabId;
             return (
               <button
-                key={tab.id}
-                onClick={() => setActiveTabId(tab.id)}
+                key={extension.id}
+                onClick={() => setActiveTabId(extension.id)}
                 className={cn(
                   "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors text-left",
                   isActive
@@ -94,16 +100,15 @@ const InfrastructureConfigPageContent = () => {
                 )}
               >
                 <Icon className="h-4 w-4 shrink-0" />
-                {tab.label}
+                {extension.metadata.label}
               </button>
             );
           })}
         </nav>
 
-        {/* Tab Content */}
         <div className="flex-1 min-w-0">
           {activeTabEntry && (
-            <activeTabEntry.tab.component
+            <activeTabEntry.extension.component
               canUpdate={activeTabEntry.manageResult.allowed}
             />
           )}