@checkstack/queue-frontend 0.2.31 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @checkstack/queue-frontend
 
+## 0.3.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
+  - @checkstack/queue-common@0.2.9
+  - @checkstack/signal-frontend@0.0.16
+
 ## 0.2.31
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/queue-frontend",
-  "version": "0.2.31",
+  "version": "0.3.0",
   "type": "module",
   "main": "./dist/index.js",
   "checkstack": {
@@ -21,10 +21,11 @@
   },
   "dependencies": {
     "@checkstack/common": "0.6.5",
-    "@checkstack/frontend-api": "0.3.9",
+    "@checkstack/frontend-api": "0.3.10",
+    "@checkstack/infrastructure-common": "0.1.0",
     "@checkstack/queue-common": "0.2.8",
     "@checkstack/signal-frontend": "0.0.15",
-    "@checkstack/ui": "1.5.0",
+    "@checkstack/ui": "1.5.1",
     "ajv": "^8.18.0",
     "ajv-formats": "^3.0.1",
     "lucide-react": "^0.468.0",

package/src/components/QueueConfigTab.tsx

@@ -0,0 +1,184 @@
+import { useEffect, useState } from "react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import {
+  QueuePluginDto,
+  QueueApi,
+} from "@checkstack/queue-common";
+import {
+  Button,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  PluginConfigForm,
+  useToast,
+} from "@checkstack/ui";
+import { AlertTriangle, Save, Info, Gauge, Activity } from "lucide-react";
+import { QueueLagAlert } from "./QueueLagAlert";
+import { extractErrorMessage } from "@checkstack/common";
+
+/**
+ * Queue configuration tab component.
+ *
+ * Renders inside the Infrastructure Config page as a registered tab.
+ * Extracted from the former QueueConfigPage.
+ *
+ * Receives `canUpdate` from the infrastructure shell instead of
+ * querying access internally (the shell handles per-tab access).
+ */
+export const QueueConfigTab = ({ canUpdate }: { canUpdate: boolean }) => {
+  const queueClient = usePluginClient(QueueApi);
+  const toast = useToast();
+
+  // Fetch plugins and configuration
+  const { data: pluginsList } = queueClient.getPlugins.useQuery();
+  const { data: configuration, refetch: refetchConfig } =
+    queueClient.getConfiguration.useQuery();
+  const updateConfigMutation = queueClient.updateConfiguration.useMutation();
+
+  const [selectedPluginId, setSelectedPluginId] = useState<string>("");
+  const [config, setConfig] = useState<Record<string, unknown>>({});
+
+  // Sync state with fetched data
+  useEffect(() => {
+    if (configuration) {
+      setSelectedPluginId(configuration.pluginId);
+      setConfig(configuration.config);
+    }
+  }, [configuration]);
+
+  const handleSave = async () => {
+    if (!selectedPluginId) return;
+    try {
+      await updateConfigMutation.mutateAsync({
+        pluginId: selectedPluginId,
+        config,
+      });
+      toast.success("Configuration saved successfully!");
+      refetchConfig();
+    } catch (error) {
+      const message = extractErrorMessage(error);
+      toast.error(`Failed to save configuration: ${message}`);
+    }
+  };
+
+  const isMemoryQueue = selectedPluginId === "memory";
+  const plugins: QueuePluginDto[] = pluginsList ?? [];
+  const isSaving = updateConfigMutation.isPending;
+
+  return (
+    <div className="space-y-6">
+      <QueueLagAlert requireAccess={false} />
+      <Card>
+        <CardHeader>
+          <CardTitle>Queue Configuration</CardTitle>
+          <p className="text-sm text-muted-foreground">
+            Select and configure the queue plugin
+          </p>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {isMemoryQueue && (
+            <Alert variant="warning">
+              <AlertTriangle className="h-5 w-5" />
+              <div>
+                <AlertTitle>In-Memory Queue Warning</AlertTitle>
+                <AlertDescription>
+                  The in-memory queue is suitable for development and
+                  single-instance deployments only. It will not scale across
+                  multiple instances and jobs will be lost on restart. For
+                  production environments with multiple instances, consider
+                  using a persistent queue implementation.
+                </AlertDescription>
+              </div>
+            </Alert>
+          )}
+
+          <PluginConfigForm
+            label="Queue Plugin"
+            plugins={plugins}
+            selectedPluginId={selectedPluginId}
+            onPluginChange={(value) => {
+              setSelectedPluginId(value);
+              setConfig({});
+            }}
+            config={config}
+            onConfigChange={setConfig}
+            disabled={!canUpdate}
+          />
+        </CardContent>
+        <CardFooter className="flex justify-end gap-2">
+          <Button onClick={handleSave} disabled={!canUpdate || isSaving}>
+            <Save className="mr-2 h-4 w-4" />
+            {isSaving ? "Saving..." : "Save Configuration"}
+          </Button>
+        </CardFooter>
+      </Card>
+
+      {/* Performance Guidance */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Info className="h-5 w-5" />
+            Performance Tuning
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <h4 className="flex items-center gap-2 font-medium">
+                <Gauge className="h-4 w-4" />
+                Concurrency Settings
+              </h4>
+              <ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
+                <li>
+                  <strong>Default (10)</strong>: Conservative, safe for most
+                  workloads
+                </li>
+                <li>
+                  <strong>Moderate (25-50)</strong>: Good for I/O-bound health
+                  checks
+                </li>
+                <li>
+                  <strong>Aggressive (100)</strong>: Maximum, monitor resource
+                  usage
+                </li>
+              </ul>
+              <p className="text-xs text-muted-foreground mt-2">
+                Formula: throughput ≈ concurrency / avg_job_duration
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="flex items-center gap-2 font-medium">
+                <Activity className="h-4 w-4" />
+                Bottleneck Indicators
+              </h4>
+              <ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
+                <li>
+                  <strong>Jobs queueing</strong>: Increase concurrency or
+                  scale horizontally
+                </li>
+                <li>
+                  <strong>High CPU (&gt;70%)</strong>: Scale horizontally,
+                  don&apos;t increase concurrency
+                </li>
+                <li>
+                  <strong>DB connection errors</strong>: Reduce concurrency or
+                  increase pool
+                </li>
+                <li>
+                  <strong>Rate limit errors</strong>: Reduce concurrency for
+                  external checks
+                </li>
+              </ul>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/src/index.tsx

@@ -1,31 +1,25 @@
-import {
-  UserMenuItemsSlot,
-  createSlotExtension,
-  createFrontendPlugin,
-} from "@checkstack/frontend-api";
-import { QueueConfigPage } from "./pages/QueueConfigPage";
-import { QueueUserMenuItems } from "./components/UserMenuItems";
-import {
-  queueRoutes,
-  pluginMetadata,
-  queueAccess,
-} from "@checkstack/queue-common";
+import { createFrontendPlugin } from "@checkstack/frontend-api";
+import { registerInfrastructureTab } from "@checkstack/infrastructure-common";
+import { pluginMetadata, queueAccess } from "@checkstack/queue-common";
+import { QueueConfigTab } from "./components/QueueConfigTab";
+import { Gauge } from "lucide-react";
+
+// Register queue tab into the Infrastructure Configuration page
+registerInfrastructureTab({
+  id: "queue",
+  pluginId: pluginMetadata.pluginId,
+  label: "Queue",
+  icon: Gauge,
+  component: QueueConfigTab,
+  readAccess: queueAccess.settings.read,
+  manageAccess: queueAccess.settings.manage,
+  order: 10, // First tab
+});
 
 export const queuePlugin = createFrontendPlugin({
   metadata: pluginMetadata,
-  routes: [
-    {
-      route: queueRoutes.routes.config,
-      element: <QueueConfigPage />,
-      accessRule: queueAccess.settings.read,
-    },
-  ],
-  extensions: [
-    createSlotExtension(UserMenuItemsSlot, {
-      id: "queue.user-menu.items",
-      component: QueueUserMenuItems,
-    }),
-  ],
+  // No routes — the queue tab lives inside the infrastructure page now
+  // Former standalone /queue/config route is replaced by /infrastructure/config
 });
 
 export * from "./api";