@checkstack/cache-frontend 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,37 @@
+# @checkstack/cache-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/cache-common@0.2.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/cache-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/cache-common": "0.1.0",
+    "@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"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "typescript": "^5.7.2",
+    "@checkstack/tsconfig": "0.0.5",
+    "@checkstack/scripts": "0.1.2"
+  }
+}

package/src/components/CacheConfigTab.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useState } from "react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import {
+  type CachePluginDto,
+  CacheApi,
+} from "@checkstack/cache-common";
+import {
+  Button,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  PluginConfigForm,
+  useToast,
+} from "@checkstack/ui";
+import { AlertTriangle, Save, Info, HardDrive } from "lucide-react";
+import { extractErrorMessage } from "@checkstack/common";
+
+/**
+ * Cache configuration tab component.
+ *
+ * Renders inside the Infrastructure Config page as a registered tab.
+ * Provides plugin selection and configuration form for the cache backend.
+ */
+export const CacheConfigTab = ({ canUpdate }: { canUpdate: boolean }) => {
+  const cacheClient = usePluginClient(CacheApi);
+  const toast = useToast();
+
+  // Fetch plugins and configuration
+  const { data: pluginsList } = cacheClient.getPlugins.useQuery();
+  const { data: configuration, refetch: refetchConfig } =
+    cacheClient.getConfiguration.useQuery();
+  const updateConfigMutation = cacheClient.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("Cache configuration saved successfully!");
+      refetchConfig();
+    } catch (error) {
+      const message = extractErrorMessage(error);
+      toast.error(`Failed to save cache configuration: ${message}`);
+    }
+  };
+
+  const isMemoryCache = selectedPluginId === "memory";
+  const plugins: CachePluginDto[] = pluginsList ?? [];
+  const isSaving = updateConfigMutation.isPending;
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Cache Configuration</CardTitle>
+          <p className="text-sm text-muted-foreground">
+            Select and configure the cache backend
+          </p>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {isMemoryCache && (
+            <Alert variant="warning">
+              <AlertTriangle className="h-5 w-5" />
+              <div>
+                <AlertTitle>In-Memory Cache Warning</AlertTitle>
+                <AlertDescription>
+                  The in-memory cache is suitable for development and
+                  single-instance deployments only. Data will not be shared
+                  across multiple instances and will be lost on restart. For
+                  production environments with multiple instances, consider
+                  using a persistent cache implementation like Redis.
+                </AlertDescription>
+              </div>
+            </Alert>
+          )}
+
+          <PluginConfigForm
+            label="Cache 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>
+
+      {/* Info Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Info className="h-5 w-5" />
+            Cache Usage
+          </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">
+                <HardDrive className="h-4 w-4" />
+                How Cache is Used
+              </h4>
+              <ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
+                <li>
+                  <strong>Anomaly Detection</strong>: Stores computed baselines
+                  for metric comparison
+                </li>
+                <li>
+                  <strong>Performance</strong>: Reduces repeated computations
+                  across health check runs
+                </li>
+                <li>
+                  <strong>Plugin Data</strong>: Scoped key-value storage for
+                  plugin-specific state
+                </li>
+              </ul>
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="flex items-center gap-2 font-medium">
+                <AlertTriangle className="h-4 w-4" />
+                Configuration Notes
+              </h4>
+              <ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
+                <li>
+                  <strong>Max Entries</strong>: Limits memory usage; oldest
+                  entries are evicted first
+                </li>
+                <li>
+                  <strong>Sweep Interval</strong>: How often expired entries are
+                  cleaned up
+                </li>
+                <li>
+                  <strong>TTL</strong>: Entries expire automatically when set
+                  with a time-to-live
+                </li>
+              </ul>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,22 @@
+import { createFrontendPlugin } from "@checkstack/frontend-api";
+import { registerInfrastructureTab } from "@checkstack/infrastructure-common";
+import { pluginMetadata, cacheAccess } from "@checkstack/cache-common";
+import { CacheConfigTab } from "./components/CacheConfigTab";
+import { HardDrive } from "lucide-react";
+
+// Register cache tab into the Infrastructure Configuration page
+registerInfrastructureTab({
+  id: "cache",
+  pluginId: pluginMetadata.pluginId,
+  label: "Cache",
+  icon: HardDrive,
+  component: CacheConfigTab,
+  readAccess: cacheAccess.settings.read,
+  manageAccess: cacheAccess.settings.manage,
+  order: 20, // After queue (10)
+});
+
+export const cachePlugin = createFrontendPlugin({
+  metadata: pluginMetadata,
+  // No routes — the cache tab lives inside the infrastructure page
+});

package/tsconfig.json

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