@checkstack/infrastructure-frontend 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,36 @@
+# @checkstack/infrastructure-frontend
+
+## 0.2.0
+
+### Minor Changes
+
+- 8d1ef12: ## Infrastructure Configuration Shell & Cache System
+
+  ### New Packages
+
+  - **`@checkstack/cache-api`**: Core cache abstractions — `CacheProvider` interface, `createScopedCache` factory for plugin key isolation, `CachePlugin`/`CacheManager` lifecycle interfaces.
+  - **`@checkstack/cache-common`**: Shared cache types, RPC contract (`getPlugins`, `getConfiguration`, `updateConfiguration`), access rules, and plugin metadata.
+  - **`@checkstack/cache-backend`**: Cache settings RPC router — exposes plugin discovery, configuration read/write endpoints with access-gated authorization.
+  - **`@checkstack/cache-frontend`**: Cache configuration tab component for the Infrastructure Settings page.
+  - **`@checkstack/infrastructure-common`**: Infrastructure tab registry, routes, and shared types for the IDE-style configuration shell.
+  - **`@checkstack/infrastructure-frontend`**: Infrastructure Settings page with vertical tab bar, per-tab access control, and user menu integration.
+
+  ### Modified Packages
+
+  - **`@checkstack/backend-api`**: Added `cachePluginRegistry` and `cacheManager` to `RpcContext` and `coreServices`.
+  - **`@checkstack/backend`**: Registered cache services in boot sequence, added cache config loading, extended dependency sorter for cache plugin ordering.
+  - **`@checkstack/queue-frontend`**: Refactored from standalone `/queue/config` route to an infrastructure tab. Queue settings now live inside the Infrastructure Settings page.
+
+  ### Architecture
+
+  The former monolithic Queue Config page is replaced by a pluggable Infrastructure Settings shell (`/infrastructure/config`). Plugins register configuration tabs via `registerInfrastructureTab()` with their own access rules, icons, and components. The shell evaluates per-tab access and only renders tabs the user can see.
+
+### Patch Changes
+
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+- Updated dependencies [8d1ef12]
+  - @checkstack/common@0.7.0
+  - @checkstack/infrastructure-common@0.2.0
+  - @checkstack/ui@1.6.0
+  - @checkstack/frontend-api@0.3.11

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@checkstack/infrastructure-frontend",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "checkstack": {
+    "type": "frontend"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.tsx"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@checkstack/common": "0.6.5",
+    "@checkstack/frontend-api": "0.3.10",
+    "@checkstack/infrastructure-common": "0.1.0",
+    "@checkstack/ui": "1.5.1",
+    "lucide-react": "^0.468.0",
+    "react": "^18.3.1",
+    "react-router-dom": "^7.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "typescript": "^5.7.2",
+    "@checkstack/tsconfig": "0.0.5",
+    "@checkstack/scripts": "0.1.2"
+  }
+}

package/src/components/UserMenuItems.tsx

@@ -0,0 +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 { DropdownMenuItem } from "@checkstack/ui";
+import { resolveRoute } from "@checkstack/common";
+import {
+  infrastructureRoutes,
+  getInfrastructureTabs,
+} 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.
+ */
+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);
+  });
+
+  if (!canReadAny) {
+    return <React.Fragment />;
+  }
+
+  return (
+    <Link to={resolveRoute(infrastructureRoutes.routes.config)}>
+      <DropdownMenuItem icon={<Server className="h-4 w-4" />}>
+        Infrastructure Settings
+      </DropdownMenuItem>
+    </Link>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,28 @@
+import {
+  UserMenuItemsSlot,
+  createSlotExtension,
+  createFrontendPlugin,
+} from "@checkstack/frontend-api";
+import { InfrastructureConfigPage } from "./pages/InfrastructureConfigPage";
+import { InfrastructureUserMenuItems } from "./components/UserMenuItems";
+import {
+  pluginMetadata,
+  infrastructureRoutes,
+} from "@checkstack/infrastructure-common";
+
+export const infrastructurePlugin = createFrontendPlugin({
+  metadata: pluginMetadata,
+  routes: [
+    {
+      route: infrastructureRoutes.routes.config,
+      element: <InfrastructureConfigPage />,
+      // No accessRule here — the page handles per-tab access internally
+    },
+  ],
+  extensions: [
+    createSlotExtension(UserMenuItemsSlot, {
+      id: "infrastructure.user-menu.items",
+      component: InfrastructureUserMenuItems,
+    }),
+  ],
+});

package/src/pages/InfrastructureConfigPage.tsx

@@ -0,0 +1,118 @@
+import { useState, useMemo } from "react";
+import {
+  wrapInSuspense,
+  accessApiRef,
+  useApi,
+} from "@checkstack/frontend-api";
+import { getInfrastructureTabs } from "@checkstack/infrastructure-common";
+import {
+  PageLayout,
+  cn,
+} from "@checkstack/ui";
+import { Server, ShieldOff } from "lucide-react";
+
+/**
+ * Infrastructure Configuration 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.
+ */
+const InfrastructureConfigPageContent = () => {
+  const accessApi = useApi(accessApiRef);
+  const allTabs = getInfrastructureTabs();
+
+  // Check access for each tab
+  const tabAccess = allTabs.map((tab) => ({
+    tab,
+    readResult: accessApi.useAccess(tab.readAccess),
+    manageResult: accessApi.useAccess(tab.manageAccess),
+  }));
+
+  // Filter to visible tabs
+  const visibleTabs = useMemo(
+    () =>
+      tabAccess.filter(({ readResult }) => readResult.allowed),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [tabAccess.map(({ readResult }) => readResult.allowed).join(",")],
+  );
+
+  const isLoading = tabAccess.some(({ readResult }) => readResult.loading);
+  const hasAnyAccess = visibleTabs.length > 0;
+
+  const [activeTabId, setActiveTabId] = useState<string>();
+
+  // Default to first visible tab
+  const effectiveActiveTabId = activeTabId ?? visibleTabs[0]?.tab.id;
+  const activeTabEntry = visibleTabs.find(
+    (t) => t.tab.id === effectiveActiveTabId,
+  );
+
+  if (!isLoading && !hasAnyAccess) {
+    return (
+      <PageLayout
+        title="Infrastructure Settings"
+        subtitle="Configure core infrastructure services"
+        icon={Server}
+        loading={false}
+        allowed={false}
+      >
+        <div className="flex flex-col items-center justify-center gap-4 py-12 text-muted-foreground">
+          <ShieldOff className="h-12 w-12" />
+          <p className="text-lg font-medium">Access Denied</p>
+          <p className="text-sm">
+            You don&apos;t have permission to view any infrastructure settings.
+          </p>
+        </div>
+      </PageLayout>
+    );
+  }
+
+  return (
+    <PageLayout
+      title="Infrastructure Settings"
+      subtitle="Configure core infrastructure services"
+      icon={Server}
+      loading={isLoading}
+      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;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTabId(tab.id)}
+                className={cn(
+                  "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors text-left",
+                  isActive
+                    ? "bg-accent text-accent-foreground"
+                    : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground",
+                )}
+              >
+                <Icon className="h-4 w-4 shrink-0" />
+                {tab.label}
+              </button>
+            );
+          })}
+        </nav>
+
+        {/* Tab Content */}
+        <div className="flex-1 min-w-0">
+          {activeTabEntry && (
+            <activeTabEntry.tab.component
+              canUpdate={activeTabEntry.manageResult.allowed}
+            />
+          )}
+        </div>
+      </div>
+    </PageLayout>
+  );
+};
+
+export const InfrastructureConfigPage = wrapInSuspense(
+  InfrastructureConfigPageContent,
+);

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@checkstack/tsconfig/frontend.json",
+  "include": [
+    "src"
+  ]
+}