@checkstack/pluginmanager-frontend 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,109 @@
+# @checkstack/pluginmanager-frontend
+
+## 0.2.0
+
+### Minor Changes
+
+- 50e5f5f: Runtime plugin system: install + uninstall plugins from npm, GitHub releases
+  (including private GitHub Enterprise instances), or tarball uploads at
+  runtime, with multi-package bundles, dependency-derived compatibility checks,
+  multi-instance coordination via a Postgres artifact store, and
+  single-coordinator destructive cleanup.
+
+  Highlights:
+
+  - New `PluginSource` discriminated union and `PluginInstaller` /
+    `PluginInstallerRegistry` interfaces in `@checkstack/backend-api`. The
+    GitHub variant accepts an optional `apiBaseUrl` so deployments backed by
+    GitHub Enterprise can install from `https://ghe.example.com/api/v3`
+    instead of `api.github.com`.
+  - New `installPackageMetadataSchema` (Zod) in `@checkstack/common` validates
+    every plugin's `package.json` at install time. Required fields: `name`,
+    `version`, `description`, `author`, `license`, `checkstack.type`,
+    `checkstack.pluginId`. Optional: `checkstack.bundle`,
+    `checkstack.usageInstructions`, `checkstack.allowInstallScripts`.
+  - New `pluginManagerContract` in `@checkstack/pluginmanager-common` with
+    `list`, `previewInstall`, `install`, `previewUninstall`, `uninstall`, and
+    `events` procedures.
+  - New `@checkstack/pluginmanager-frontend` admin UI: installed-plugins list
+    with per-row uninstall (typed-confirmation modal, schema/configs/cascade
+    toggles), install page with NPM / Tarball Upload / GitHub Release tabs
+    (Catalog tab disabled — coming soon), and an events page surfacing the
+    install/uninstall audit log.
+  - New `bunx @checkstack/scripts plugin-pack` CLI for plugin authors —
+    per-package mode produces an npm-shaped tarball; `--bundle` mode produces
+    an outer tarball containing every sibling declared in
+    `package.json#checkstack.bundle`. Published to npm so external authors
+    can `bunx` it directly without a workspace checkout.
+  - Compatibility derived from `package.json#dependencies` ranges
+    (`semver.satisfies` against the platform's loaded `@checkstack/*`
+    versions) — no separate `compatibility` field.
+  - Multi-instance: originator persists artifacts + `plugins` rows + broadcasts
+    install/uninstall; receiving instances do in-process register/unregister
+    only. Destructive ops (drop schema, delete plugin_configs, delete
+    artifacts, delete `plugins` rows) run exactly once on the originator.
+  - Fresh-instance bootstrap: `loadPlugins()` hydrates any
+    `is_uninstallable=true` plugin missing from `node_modules` from the
+    artifact store before normal Phase 1 register.
+  - New schema: `plugin_artifacts` (tarball storage), `plugin_install_events`
+    (audit/error log). `plugins` extended with `version`, `metadata`,
+    `source`, `bundle_id`, `is_primary`. Local plugin sync now writes
+    `version` from each plugin's `package.json` so the admin UI shows real
+    versions instead of `—`.
+  - Tarball-upload endpoint (`POST /api/pluginmanager/upload-tarball`) for
+    the install UI; access-gated by `pluginmanager.plugin.manage`.
+  - Plugin Manager menu link added to the user menu (main grid, alongside
+    Profile / Notification Settings / etc.).
+
+  Cross-cutting changes:
+
+  - Backend request/response logging now flows through `rootLogger` (winston)
+    instead of `hono/logger`. 5xx responses include the response body inline
+    so swallowed early-return errors are visible in the log.
+  - The `/api/:pluginId/*` dispatcher now logs which core service is missing
+    or which `pluginId` had no metadata when it 500s.
+  - New `registerCorePluginMetadata` on `PluginManager` for core routers
+    (like the plugin manager itself) that need their metadata visible to the
+    RPC dispatcher without going through the full plugin lifecycle.
+  - ESLint: `unicorn/no-null` is now disabled globally. Drizzle distinguishes
+    between `null` (writes a real SQL NULL) and `undefined` (skip the column
+    on insert), so treating them as interchangeable produced latent bugs at
+    the persistence boundary. The bulk of the patch-bumped packages above
+    reflect lint-fix touches that landed when this rule was relaxed.
+  - Workspace-wide license normalization to `Elastic-2.0` (matches
+    `LICENSE.md`). Every `package.json` in the workspace now declares the
+    same SPDX identifier; the patch bumps capture this.
+
+  Plugin packages (every `plugins/*`): added a `pack` npm script
+  (`bunx @checkstack/scripts plugin-pack`), mirrored each plugin's
+  `pluginId` from `plugin-metadata.ts` into `package.json#checkstack.pluginId`
+  so install-time validation passes, stubbed any missing required metadata
+  fields (`description`, `author`, `license`), and added
+  `checkstack.bundle` to multi-package plugin primaries (telegram, rcon, ssh,
+  jira, queue-bullmq, queue-memory, cache-memory).
+
+  Breaking changes:
+
+  - The legacy single-method `PluginInstaller` interface (`install(packageName)`)
+    is removed. Callers must use `coreServices.pluginInstallerRegistry`.
+  - The old `pluginAdminContract` and `createPluginAdminRouter` are removed.
+    Replaced by `pluginManagerContract` in `@checkstack/pluginmanager-common`
+    and `createPluginManagerRouter` in `core/backend`.
+  - `@checkstack/test-utils-backend` no longer exports
+    `createMockPluginInstaller` / `MockPluginInstaller` (the legacy interface
+    it shimmed is gone).
+
+  Note: bumps are limited to `minor` (for packages with new public API
+  surface) and `patch` (for downstream consumers, license normalization,
+  and lint fixes). No `major` bumps despite the `PluginInstaller` removal —
+  the legacy interface had no third-party consumers in the wild before this
+  runtime plugin system landed, and the contract surface is the same shape
+  modulo the rename.
+
+### Patch Changes
+
+- Updated dependencies [50e5f5f]
+  - @checkstack/common@0.8.0
+  - @checkstack/pluginmanager-common@0.2.0
+  - @checkstack/ui@1.7.1
+  - @checkstack/frontend-api@0.4.2

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@checkstack/pluginmanager-frontend",
+  "version": "0.2.0",
+  "license": "Elastic-2.0",
+  "type": "module",
+  "main": "src/index.tsx",
+  "checkstack": {
+    "type": "frontend"
+  },
+  "scripts": {
+    "typecheck": "tsgo -b",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@checkstack/pluginmanager-common": "0.1.0",
+    "@checkstack/frontend-api": "0.4.1",
+    "@checkstack/common": "0.7.0",
+    "@checkstack/ui": "1.7.0",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.22.0",
+    "lucide-react": "^0.344.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.2.0",
+    "@checkstack/tsconfig": "0.0.6",
+    "@checkstack/scripts": "0.1.2"
+  }
+}

package/src/PluginManagerMenuItem.tsx

@@ -0,0 +1,20 @@
+import { useNavigate } from "react-router-dom";
+import { Puzzle } from "lucide-react";
+import { DropdownMenuItem } from "@checkstack/ui";
+import { resolveRoute } from "@checkstack/common";
+import { pluginManagerRoutes } from "@checkstack/pluginmanager-common";
+
+export function PluginManagerMenuItem() {
+  const navigate = useNavigate();
+
+  return (
+    <DropdownMenuItem
+      onClick={() =>
+        navigate(resolveRoute(pluginManagerRoutes.routes.installed))
+      }
+      icon={<Puzzle className="h-4 w-4" />}
+    >
+      Plugin Manager
+    </DropdownMenuItem>
+  );
+}

package/src/components/SourceForm.tsx

@@ -0,0 +1,255 @@
+import React, { useState } from "react";
+import { Tabs, Input, Label, Button, Badge } from "@checkstack/ui";
+import { extractErrorMessage } from "@checkstack/common";
+import type { PluginSource } from "@checkstack/pluginmanager-common";
+
+interface Props {
+  onSubmit: (source: PluginSource) => void;
+  isLoading?: boolean;
+}
+
+/**
+ * Source picker — NPM / Tarball Upload / GitHub / Catalog (coming soon).
+ *
+ * Catalog tab is intentionally disabled until the catalog backend ships.
+ * Tarball upload posts to the multipart endpoint at
+ * `/api/pluginmanager/upload-tarball` which stores the bytes in
+ * `plugin_artifacts` and returns an `artifactId` we wrap in a
+ * `tarball` PluginSource.
+ */
+export const SourceForm: React.FC<Props> = ({ onSubmit, isLoading }) => {
+  const [tab, setTab] = useState<"npm" | "tarball" | "github" | "catalog">(
+    "npm",
+  );
+
+  const [npmName, setNpmName] = useState("");
+  const [npmVersion, setNpmVersion] = useState("");
+  const [npmRegistry, setNpmRegistry] = useState("");
+
+  const [file, setFile] = useState<File | undefined>();
+  const [tarballUploading, setTarballUploading] = useState(false);
+  const [tarballError, setTarballError] = useState<string | undefined>();
+
+  const [ghOwner, setGhOwner] = useState("");
+  const [ghRepo, setGhRepo] = useState("");
+  const [ghTag, setGhTag] = useState("");
+  const [ghAsset, setGhAsset] = useState("");
+  const [ghApiBaseUrl, setGhApiBaseUrl] = useState("");
+  const [ghTokenEnvVar, setGhTokenEnvVar] = useState("");
+
+  return (
+    <div className="space-y-4">
+      <Tabs
+        items={[
+          { id: "npm", label: "NPM" },
+          { id: "tarball", label: "Tarball Upload" },
+          { id: "github", label: "GitHub Release" },
+          { id: "catalog", label: "Catalog (Coming Soon)" },
+        ]}
+        activeTab={tab}
+        onTabChange={(id) => {
+          if (id !== "catalog") setTab(id as typeof tab);
+        }}
+      />
+
+      {tab === "npm" ? (
+        <div className="space-y-3">
+          <div className="space-y-1">
+            <Label htmlFor="npm-name">Package name</Label>
+            <Input
+              id="npm-name"
+              placeholder="@scope/my-plugin-backend"
+              value={npmName}
+              onChange={(e) => setNpmName(e.target.value)}
+            />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="npm-version">Version (optional)</Label>
+            <Input
+              id="npm-version"
+              placeholder="latest"
+              value={npmVersion}
+              onChange={(e) => setNpmVersion(e.target.value)}
+            />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="npm-registry">Registry URL (optional)</Label>
+            <Input
+              id="npm-registry"
+              placeholder="https://registry.npmjs.org"
+              value={npmRegistry}
+              onChange={(e) => setNpmRegistry(e.target.value)}
+            />
+          </div>
+          <Button
+            disabled={!npmName || isLoading}
+            onClick={() =>
+              onSubmit({
+                type: "npm",
+                packageName: npmName,
+                version: npmVersion || undefined,
+                registry: npmRegistry || undefined,
+              })
+            }
+          >
+            Preview install
+          </Button>
+        </div>
+      ) : undefined}
+
+      {tab === "tarball" ? (
+        <div className="space-y-3">
+          <div className="space-y-1">
+            <Label htmlFor="tarball-file">Tarball (.tgz)</Label>
+            <Input
+              id="tarball-file"
+              type="file"
+              accept=".tgz,.tar.gz"
+              onChange={(e) => setFile(e.target.files?.[0])}
+            />
+            <p className="text-xs text-muted-foreground">
+              Pack with <code>bunx @checkstack/scripts plugin-pack</code>.
+            </p>
+          </div>
+          {tarballError ? (
+            <p className="text-sm text-destructive">{tarballError}</p>
+          ) : undefined}
+          <Button
+            disabled={!file || tarballUploading || isLoading}
+            onClick={async () => {
+              if (!file) return;
+              setTarballUploading(true);
+              setTarballError(undefined);
+              try {
+                const fd = new FormData();
+                fd.append("file", file);
+                const resp = await fetch(
+                  "/api/pluginmanager/upload-tarball",
+                  { method: "POST", body: fd },
+                );
+                if (!resp.ok) throw new Error(await resp.text());
+                const { artifactId } = (await resp.json()) as {
+                  artifactId: string;
+                };
+                onSubmit({
+                  type: "tarball",
+                  artifactId,
+                  filename: file.name,
+                });
+              } catch (error) {
+                setTarballError(extractErrorMessage(error));
+              } finally {
+                setTarballUploading(false);
+              }
+            }}
+          >
+            {tarballUploading ? "Uploading..." : "Upload & preview"}
+          </Button>
+        </div>
+      ) : undefined}
+
+      {tab === "github" ? (
+        <div className="space-y-3">
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1">
+              <Label htmlFor="gh-owner">Owner</Label>
+              <Input
+                id="gh-owner"
+                placeholder="my-org"
+                value={ghOwner}
+                onChange={(e) => setGhOwner(e.target.value)}
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="gh-repo">Repo</Label>
+              <Input
+                id="gh-repo"
+                placeholder="my-plugin"
+                value={ghRepo}
+                onChange={(e) => setGhRepo(e.target.value)}
+              />
+            </div>
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="gh-tag">Release tag</Label>
+            <Input
+              id="gh-tag"
+              placeholder="v1.2.3"
+              value={ghTag}
+              onChange={(e) => setGhTag(e.target.value)}
+            />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="gh-asset">Asset name (optional)</Label>
+            <Input
+              id="gh-asset"
+              placeholder="my-plugin-1.2.3.tgz"
+              value={ghAsset}
+              onChange={(e) => setGhAsset(e.target.value)}
+            />
+          </div>
+          <details className="rounded border border-border p-3">
+            <summary className="cursor-pointer text-sm font-medium">
+              GitHub Enterprise (advanced)
+            </summary>
+            <div className="mt-3 space-y-3">
+              <div className="space-y-1">
+                <Label htmlFor="gh-api-base">API base URL</Label>
+                <Input
+                  id="gh-api-base"
+                  placeholder="https://github.example.com/api/v3"
+                  value={ghApiBaseUrl}
+                  onChange={(e) => setGhApiBaseUrl(e.target.value)}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Leave blank for public github.com. For GitHub Enterprise,
+                  use your instance's API root.
+                </p>
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="gh-token-env">Token env var name</Label>
+                <Input
+                  id="gh-token-env"
+                  placeholder="GITHUB_TOKEN"
+                  value={ghTokenEnvVar}
+                  onChange={(e) => setGhTokenEnvVar(e.target.value)}
+                />
+                <p className="text-xs text-muted-foreground">
+                  The platform reads the PAT from this environment variable.
+                  Defaults to <code>GITHUB_TOKEN</code>.
+                </p>
+              </div>
+            </div>
+          </details>
+          <Button
+            disabled={!ghOwner || !ghRepo || !ghTag || isLoading}
+            onClick={() =>
+              onSubmit({
+                type: "github",
+                owner: ghOwner,
+                repo: ghRepo,
+                tag: ghTag,
+                assetName: ghAsset || undefined,
+                apiBaseUrl: ghApiBaseUrl || undefined,
+                tokenEnvVar: ghTokenEnvVar || undefined,
+              })
+            }
+          >
+            Preview install
+          </Button>
+        </div>
+      ) : undefined}
+
+      {tab === "catalog" ? (
+        <div>
+          <p className="text-sm text-muted-foreground">
+            <Badge variant="secondary" className="mr-2">
+              Coming Soon
+            </Badge>
+            The Checkstack plugin catalog is coming soon.
+          </p>
+        </div>
+      ) : undefined}
+    </div>
+  );
+};

package/src/components/TypedConfirmModal.tsx

@@ -0,0 +1,127 @@
+import React, { useState, useEffect } from "react";
+import { Button, Input, Label } from "@checkstack/ui";
+import { AlertTriangle, X } from "lucide-react";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  description: React.ReactNode;
+  confirmPhrase: string;
+  confirmLabel?: string;
+  variant?: "danger" | "warning";
+  isLoading?: boolean;
+}
+
+/**
+ * Typed-confirmation modal: the user must type the exact phrase before the
+ * confirm button enables. Used for both install (security warning) and
+ * uninstall (destructive cleanup) flows. The strong typed confirmation is
+ * the primary security control for plugin install — plugins run with full
+ * platform access.
+ */
+export const TypedConfirmModal: React.FC<Props> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmPhrase,
+  confirmLabel = "Confirm",
+  variant = "danger",
+  isLoading = false,
+}) => {
+  const [typed, setTyped] = useState("");
+
+  useEffect(() => {
+    if (isOpen) setTyped("");
+  }, [isOpen]);
+
+  if (!isOpen) return;
+
+  const matches = typed === confirmPhrase;
+  const colors =
+    variant === "danger"
+      ? {
+          icon: "text-destructive",
+          iconBg: "bg-destructive/10",
+          button:
+            "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        }
+      : {
+          icon: "text-warning",
+          iconBg: "bg-warning/10",
+          button: "bg-warning text-warning-foreground hover:bg-warning/90",
+        };
+
+  return (
+    <div
+      className="fixed inset-0 z-[60] !m-0 flex items-center justify-center bg-black/50"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        className="bg-background rounded-lg shadow-xl max-w-lg w-full mx-4 my-4 max-h-[calc(100dvh-2rem)] overflow-y-auto"
+        role="dialog"
+        aria-modal="true"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-start justify-between p-6 pb-4">
+          <div className="flex items-start gap-4">
+            <div className={`rounded-full p-2 ${colors.iconBg}`}>
+              <AlertTriangle className={`w-6 h-6 ${colors.icon}`} />
+            </div>
+            <h3 className="text-lg font-semibold">{title}</h3>
+          </div>
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="text-muted-foreground hover:text-foreground"
+            type="button"
+            aria-label="Close"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+        <div className="px-6 pb-4 space-y-4 text-sm">{description}</div>
+        <div className="px-6 pb-4 space-y-2">
+          <Label htmlFor="typed-confirm">
+            Type{" "}
+            <code className="px-1 py-0.5 rounded bg-muted text-xs">
+              {confirmPhrase}
+            </code>{" "}
+            to confirm:
+          </Label>
+          <Input
+            id="typed-confirm"
+            value={typed}
+            onChange={(e) => setTyped(e.target.value)}
+            disabled={isLoading}
+            autoFocus
+            autoComplete="off"
+          />
+        </div>
+        <div className="flex items-center justify-end gap-3 px-6 py-4 bg-muted/30 rounded-b-lg">
+          <Button
+            variant="ghost"
+            onClick={onClose}
+            disabled={isLoading}
+            type="button"
+          >
+            Cancel
+          </Button>
+          <button
+            onClick={onConfirm}
+            disabled={!matches || isLoading}
+            className={`inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors h-10 px-4 py-2 disabled:opacity-50 disabled:pointer-events-none ${colors.button}`}
+            type="button"
+          >
+            {isLoading ? "Processing..." : confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,44 @@
+import {
+  createFrontendPlugin,
+  UserMenuItemsSlot,
+} from "@checkstack/frontend-api";
+import {
+  pluginMetadata,
+  pluginManagerRoutes,
+  pluginManagerAccess,
+} from "@checkstack/pluginmanager-common";
+import { InstalledPluginsPage } from "./pages/InstalledPluginsPage";
+import { InstallPluginPage } from "./pages/InstallPluginPage";
+import { PluginEventsPage } from "./pages/PluginEventsPage";
+import { PluginManagerMenuItem } from "./PluginManagerMenuItem";
+
+export default createFrontendPlugin({
+  metadata: pluginMetadata,
+  routes: [
+    {
+      route: pluginManagerRoutes.routes.installed,
+      element: <InstalledPluginsPage />,
+      title: "Plugin Manager",
+      accessRule: pluginManagerAccess.view,
+    },
+    {
+      route: pluginManagerRoutes.routes.install,
+      element: <InstallPluginPage />,
+      title: "Install plugin",
+      accessRule: pluginManagerAccess.install,
+    },
+    {
+      route: pluginManagerRoutes.routes.events,
+      element: <PluginEventsPage />,
+      title: "Plugin events",
+      accessRule: pluginManagerAccess.view,
+    },
+  ],
+  extensions: [
+    {
+      id: "pluginmanager.user-menu.link",
+      slot: UserMenuItemsSlot,
+      component: PluginManagerMenuItem,
+    },
+  ],
+});

package/src/pages/InstallPluginPage.tsx

@@ -0,0 +1,233 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  PageLayout,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Alert,
+  Badge,
+  Button,
+  useToast,
+} from "@checkstack/ui";
+import {
+  usePluginClient,
+  accessApiRef,
+  useApi,
+  wrapInSuspense,
+} from "@checkstack/frontend-api";
+import { extractErrorMessage, resolveRoute } from "@checkstack/common";
+import {
+  PluginManagerApi,
+  pluginManagerAccess,
+  pluginManagerRoutes,
+  type PluginSource,
+  type InstallPreview,
+} from "@checkstack/pluginmanager-common";
+import { ShieldAlert, Plus } from "lucide-react";
+import { SourceForm } from "../components/SourceForm";
+import { TypedConfirmModal } from "../components/TypedConfirmModal";
+
+const InstallPluginPageContent: React.FC = () => {
+  const client = usePluginClient(PluginManagerApi);
+  const accessApi = useApi(accessApiRef);
+  const toast = useToast();
+  const navigate = useNavigate();
+  const { allowed, loading: accessLoading } = accessApi.useAccess(
+    pluginManagerAccess.install,
+  );
+
+  const [pendingSource, setPendingSource] = useState<PluginSource | undefined>();
+  const [preview, setPreview] = useState<InstallPreview | undefined>();
+  const [previewError, setPreviewError] = useState<string | undefined>();
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  const previewMutation = client.previewInstall.useMutation({
+    onSuccess: (result) => {
+      setPreview(result);
+      setPreviewError(undefined);
+      setConfirmOpen(true);
+    },
+    onError: (error) => {
+      setPreview(undefined);
+      setPreviewError(extractErrorMessage(error, "Preview failed"));
+    },
+  });
+
+  const installMutation = client.install.useMutation({
+    onSuccess: ({ installedPackages }) => {
+      toast.success(
+        `Installed ${installedPackages.length} package${
+          installedPackages.length === 1 ? "" : "s"
+        }`,
+      );
+      setConfirmOpen(false);
+      setPreview(undefined);
+      setPendingSource(undefined);
+      navigate(resolveRoute(pluginManagerRoutes.routes.installed));
+    },
+    onError: (error) =>
+      toast.error(extractErrorMessage(error, "Install failed")),
+  });
+
+  const handleSourceSubmit = (source: PluginSource) => {
+    setPendingSource(source);
+    previewMutation.mutate({ source });
+  };
+
+  const compatibilityIssues = preview?.compatibilityIssues ?? [];
+  const blockable = compatibilityIssues.length > 0;
+
+  return (
+    <PageLayout
+      title="Install plugin"
+      icon={Plus}
+      loading={accessLoading}
+      allowed={allowed}
+    >
+      <Alert variant="warning">
+        <div className="flex items-start gap-3 text-sm">
+          <ShieldAlert className="w-5 h-5 mt-0.5 flex-shrink-0" />
+          <div>
+            <strong>Plugins run with full platform access.</strong> They can
+            read and write any data, including secrets. Only install plugins
+            from sources you trust. Malicious plugins can exfiltrate sensitive
+            data and damage your platform.
+          </div>
+        </div>
+      </Alert>
+
+      <Card className="mt-6">
+        <CardHeader>
+          <CardTitle>Source</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <SourceForm
+            onSubmit={handleSourceSubmit}
+            isLoading={previewMutation.isPending}
+          />
+          {previewError ? (
+            <p className="text-destructive text-sm mt-3">{previewError}</p>
+          ) : undefined}
+        </CardContent>
+      </Card>
+
+      <TypedConfirmModal
+        isOpen={confirmOpen && !!preview}
+        onClose={() => setConfirmOpen(false)}
+        onConfirm={() => {
+          if (!pendingSource || !preview) return;
+          installMutation.mutate({
+            source: pendingSource,
+            confirm: preview.primary.name,
+          });
+        }}
+        title={
+          preview
+            ? `Install ${preview.primary.name}@${preview.primary.version}`
+            : "Install"
+        }
+        confirmPhrase={preview?.primary.name ?? "INSTALL"}
+        confirmLabel={
+          blockable ? "Compatibility issues — fix first" : "Install"
+        }
+        variant="warning"
+        isLoading={installMutation.isPending}
+        description={
+          preview ? <InstallDescription preview={preview} /> : "Loading…"
+        }
+      />
+    </PageLayout>
+  );
+};
+
+const InstallDescription: React.FC<{ preview: InstallPreview }> = ({
+  preview,
+}) => {
+  const compatibilityIssues = preview.compatibilityIssues;
+  const author =
+    typeof preview.primary.author === "string"
+      ? preview.primary.author
+      : preview.primary.author.name;
+
+  return (
+    <div className="space-y-3">
+      <p>{preview.primary.description}</p>
+      <div className="text-xs text-muted-foreground space-y-1">
+        <div>
+          <strong>Author:</strong> {author}
+        </div>
+        <div>
+          <strong>License:</strong> {preview.primary.license}
+        </div>
+        {preview.primary.homepage ? (
+          <div>
+            <strong>Homepage:</strong>{" "}
+            <a
+              href={preview.primary.homepage}
+              target="_blank"
+              rel="noreferrer"
+              className="underline"
+            >
+              {preview.primary.homepage}
+            </a>
+          </div>
+        ) : undefined}
+      </div>
+      {preview.packages.length > 1 ? (
+        <div className="space-y-1">
+          <strong className="text-sm">Bundle:</strong>
+          <div className="flex flex-wrap gap-1">
+            {preview.packages.map((p) => (
+              <Badge key={p.name} variant="secondary">
+                {p.name}@{p.version}
+              </Badge>
+            ))}
+          </div>
+        </div>
+      ) : undefined}
+      <div className="text-xs text-muted-foreground">
+        Total size: {(preview.totalSizeBytes / 1024).toFixed(1)} KB
+      </div>
+      {preview.hasInstallScripts ? (
+        <Alert variant="warning">
+          <p className="text-sm">
+            This plugin opted in to running install scripts (
+            <code>postinstall</code> etc.). These run with platform privileges.
+            Confirm only if you trust this source.
+          </p>
+        </Alert>
+      ) : undefined}
+      {preview.primary.checkstack.usageInstructions ? (
+        <details className="text-sm">
+          <summary className="cursor-pointer font-medium">
+            Usage instructions
+          </summary>
+          <pre className="whitespace-pre-wrap mt-2 p-3 bg-muted rounded text-xs">
+            {preview.primary.checkstack.usageInstructions}
+          </pre>
+        </details>
+      ) : undefined}
+      {compatibilityIssues.length > 0 ? (
+        <Alert variant="error">
+          <div className="text-sm">
+            <strong>Compatibility issues — install will fail:</strong>
+            <ul className="list-disc pl-5 mt-1">
+              {compatibilityIssues.map((iss, i) => (
+                <li key={i}>{iss.message}</li>
+              ))}
+            </ul>
+          </div>
+        </Alert>
+      ) : undefined}
+      <p className="text-sm">
+        Type <code>{preview.primary.name}</code> to confirm install.
+      </p>
+    </div>
+  );
+};
+
+void Button; // imported for future per-issue action buttons
+
+export const InstallPluginPage = wrapInSuspense(InstallPluginPageContent);

package/src/pages/InstalledPluginsPage.tsx

@@ -0,0 +1,326 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { Puzzle, Trash2, Plus, History } from "lucide-react";
+import {
+  PageLayout,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Badge,
+  Button,
+  EmptyState,
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  Checkbox,
+  Label,
+  useToast,
+} from "@checkstack/ui";
+import {
+  usePluginClient,
+  accessApiRef,
+  useApi,
+  wrapInSuspense,
+} from "@checkstack/frontend-api";
+import { extractErrorMessage, resolveRoute } from "@checkstack/common";
+import {
+  PluginManagerApi,
+  pluginManagerAccess,
+  pluginManagerRoutes,
+  type InstalledPlugin,
+} from "@checkstack/pluginmanager-common";
+import { TypedConfirmModal } from "../components/TypedConfirmModal";
+
+const InstalledPluginsPageContent: React.FC = () => {
+  const client = usePluginClient(PluginManagerApi);
+  const accessApi = useApi(accessApiRef);
+  const toast = useToast();
+
+  const view = accessApi.useAccess(pluginManagerAccess.view);
+  const uninstallAccess = accessApi.useAccess(pluginManagerAccess.uninstall);
+
+  const { data, isLoading, refetch } = client.list.useQuery();
+
+  const [target, setTarget] = useState<InstalledPlugin | undefined>();
+  const [deleteSchema, setDeleteSchema] = useState(true);
+  const [deleteConfigs, setDeleteConfigs] = useState(true);
+  const [cascade, setCascade] = useState(false);
+
+  const previewQuery = client.previewUninstall.useQuery(
+    { pluginName: target?.name ?? "" },
+    { enabled: !!target },
+  );
+
+  const uninstallMutation = client.uninstall.useMutation({
+    onSuccess: ({ uninstalledPackages }) => {
+      toast.success(
+        `Uninstalled ${uninstalledPackages.length} package${
+          uninstalledPackages.length === 1 ? "" : "s"
+        }`,
+      );
+      setTarget(undefined);
+      refetch();
+    },
+    onError: (error) =>
+      toast.error(extractErrorMessage(error, "Uninstall failed")),
+  });
+
+  const installPath = resolveRoute(pluginManagerRoutes.routes.install);
+  const eventsPath = resolveRoute(pluginManagerRoutes.routes.events);
+
+  const headerActions = (
+    <div className="flex gap-2">
+      <Button asChild variant="ghost">
+        <Link to={eventsPath}>
+          <History className="w-4 h-4 mr-2" />
+          Events
+        </Link>
+      </Button>
+      <Button asChild>
+        <Link to={installPath}>
+          <Plus className="w-4 h-4 mr-2" />
+          Install plugin
+        </Link>
+      </Button>
+    </div>
+  );
+
+  if (view.loading || isLoading) {
+    return (
+      <PageLayout
+        title="Plugins"
+        icon={Puzzle}
+        actions={headerActions}
+        loading
+        allowed={view.allowed}
+      >
+        <div />
+      </PageLayout>
+    );
+  }
+
+  const plugins = data?.plugins ?? [];
+
+  return (
+    <PageLayout
+      title="Plugins"
+      icon={Puzzle}
+      actions={headerActions}
+      allowed={view.allowed}
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle>Installed Plugins</CardTitle>
+          <CardDescription>
+            Plugins running on this Checkstack instance. Runtime-installed
+            plugins (npm, GitHub release, tarball upload) can be uninstalled
+            from this page; bundled platform plugins are read-only.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {plugins.length === 0 ? (
+            <EmptyState
+              title="No plugins"
+              description="No plugins discovered yet."
+            />
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Version</TableHead>
+                  <TableHead>Type</TableHead>
+                  <TableHead>Source</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {plugins.map((p) => (
+                  <TableRow key={p.name}>
+                    <TableCell className="font-mono">{p.name}</TableCell>
+                    <TableCell>{p.version || "—"}</TableCell>
+                    <TableCell>
+                      <Badge variant={typeBadgeVariant(p.type)}>{p.type}</Badge>
+                    </TableCell>
+                    <TableCell>
+                      {p.source ? (
+                        <Badge variant="info">{p.source.type}</Badge>
+                      ) : (
+                        <Badge variant="secondary">monorepo</Badge>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      {p.isUninstallable ? (
+                        <Badge variant="info">runtime</Badge>
+                      ) : (
+                        <Badge variant="secondary">core</Badge>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      {p.isUninstallable && uninstallAccess.allowed ? (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => setTarget(p)}
+                        >
+                          <Trash2 className="w-4 h-4 mr-2" />
+                          Uninstall
+                        </Button>
+                      ) : undefined}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      <TypedConfirmModal
+        isOpen={!!target}
+        onClose={() => setTarget(undefined)}
+        onConfirm={() => {
+          if (!target) return;
+          uninstallMutation.mutate({
+            pluginName: target.name,
+            deleteSchema,
+            deleteConfigs,
+            cascade,
+            confirm: target.name,
+          });
+        }}
+        title={`Uninstall ${target?.name}`}
+        confirmPhrase={target?.name ?? ""}
+        confirmLabel="Uninstall"
+        variant="danger"
+        isLoading={uninstallMutation.isPending}
+        description={
+          target ? (
+            <UninstallDescription
+              target={target}
+              preview={previewQuery.data}
+              deleteSchema={deleteSchema}
+              setDeleteSchema={setDeleteSchema}
+              deleteConfigs={deleteConfigs}
+              setDeleteConfigs={setDeleteConfigs}
+              cascade={cascade}
+              setCascade={setCascade}
+            />
+          ) : (
+            ""
+          )
+        }
+      />
+    </PageLayout>
+  );
+};
+
+function typeBadgeVariant(type: string): "default" | "secondary" | "info" {
+  switch (type) {
+    case "backend": {
+      return "default";
+    }
+    case "frontend": {
+      return "info";
+    }
+    default: {
+      return "secondary";
+    }
+  }
+}
+
+const UninstallDescription: React.FC<{
+  target: InstalledPlugin;
+  preview:
+    | {
+        siblings: string[];
+        dependents: string[];
+        schemasToDrop: string[];
+        pluginConfigCount: number;
+      }
+    | undefined;
+  deleteSchema: boolean;
+  setDeleteSchema: (v: boolean) => void;
+  deleteConfigs: boolean;
+  setDeleteConfigs: (v: boolean) => void;
+  cascade: boolean;
+  setCascade: (v: boolean) => void;
+}> = ({
+  target,
+  preview,
+  deleteSchema,
+  setDeleteSchema,
+  deleteConfigs,
+  setDeleteConfigs,
+  cascade,
+  setCascade,
+}) => (
+  <>
+    <p>
+      Uninstalling <code>{target.name}</code> stops the plugin on every
+      instance and deletes its data on this instance.
+    </p>
+    {preview ? (
+      <ul className="list-disc pl-5 space-y-1 text-muted-foreground">
+        {preview.siblings.length > 1 ? (
+          <li>
+            Bundle siblings will also be uninstalled:{" "}
+            <code>{preview.siblings.join(", ")}</code>
+          </li>
+        ) : undefined}
+        {preview.dependents.length > 0 ? (
+          <li className="text-warning">
+            Dependent plugins:{" "}
+            <code>{preview.dependents.join(", ")}</code> — enable cascade
+            below to remove them too.
+          </li>
+        ) : undefined}
+        <li>Will drop {preview.schemasToDrop.length} Postgres schema(s).</li>
+        <li>Will delete {preview.pluginConfigCount} plugin_configs row(s).</li>
+      </ul>
+    ) : undefined}
+
+    <div className="space-y-2 pt-2">
+      <div className="flex items-center gap-2">
+        <Checkbox
+          id="del-schema"
+          checked={deleteSchema}
+          onCheckedChange={setDeleteSchema}
+        />
+        <Label htmlFor="del-schema">
+          Drop Postgres schema(s) (destructive)
+        </Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox
+          id="del-configs"
+          checked={deleteConfigs}
+          onCheckedChange={setDeleteConfigs}
+        />
+        <Label htmlFor="del-configs">
+          Delete plugin configurations (destructive)
+        </Label>
+      </div>
+      {preview && preview.dependents.length > 0 ? (
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="cascade"
+            checked={cascade}
+            onCheckedChange={setCascade}
+          />
+          <Label htmlFor="cascade">Cascade — also uninstall dependents</Label>
+        </div>
+      ) : undefined}
+    </div>
+  </>
+);
+
+export const InstalledPluginsPage = wrapInSuspense(
+  InstalledPluginsPageContent,
+);

package/src/pages/PluginEventsPage.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { History } from "lucide-react";
+import {
+  PageLayout,
+  Card,
+  CardContent,
+  Badge,
+  EmptyState,
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+} from "@checkstack/ui";
+import {
+  usePluginClient,
+  accessApiRef,
+  useApi,
+  wrapInSuspense,
+} from "@checkstack/frontend-api";
+import {
+  PluginManagerApi,
+  pluginManagerAccess,
+  type InstallEventStatus,
+} from "@checkstack/pluginmanager-common";
+
+const statusVariant: Record<
+  InstallEventStatus,
+  "default" | "secondary" | "destructive" | "info"
+> = {
+  started: "info",
+  succeeded: "default",
+  failed: "destructive",
+};
+
+const PluginEventsPageContent: React.FC = () => {
+  const client = usePluginClient(PluginManagerApi);
+  const accessApi = useApi(accessApiRef);
+  const { allowed, loading: accessLoading } = accessApi.useAccess(
+    pluginManagerAccess.view,
+  );
+  const { data, isLoading } = client.events.useQuery({ limit: 200 });
+
+  if (accessLoading || isLoading) {
+    return (
+      <PageLayout title="Plugin events" icon={History} loading allowed={allowed}>
+        <div />
+      </PageLayout>
+    );
+  }
+
+  const events = data?.events ?? [];
+
+  return (
+    <PageLayout title="Plugin events" icon={History} allowed={allowed}>
+      {events.length === 0 ? (
+        <EmptyState
+          icon={<History className="w-12 h-12" />}
+          title="No events yet"
+          description="Plugin install/uninstall lifecycle events will show up here."
+        />
+      ) : (
+        <Card>
+          <CardContent className="p-0">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>When</TableHead>
+                  <TableHead>Plugin</TableHead>
+                  <TableHead>Action</TableHead>
+                  <TableHead>Phase</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Instance</TableHead>
+                  <TableHead>Error</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {events.map((e) => (
+                  <TableRow key={e.id}>
+                    <TableCell className="font-mono text-xs">
+                      {new Date(e.createdAt).toLocaleString()}
+                    </TableCell>
+                    <TableCell>{e.pluginName ?? "—"}</TableCell>
+                    <TableCell>{e.action}</TableCell>
+                    <TableCell>
+                      <code className="text-xs">{e.phase}</code>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={statusVariant[e.status]}>{e.status}</Badge>
+                    </TableCell>
+                    <TableCell className="text-xs">{e.instanceId}</TableCell>
+                    <TableCell className="text-xs text-destructive max-w-xs truncate">
+                      {e.error ?? ""}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      )}
+    </PageLayout>
+  );
+};
+
+export const PluginEventsPage = wrapInSuspense(PluginEventsPageContent);

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@checkstack/tsconfig/frontend.json",
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "../common"
+    },
+    {
+      "path": "../frontend-api"
+    },
+    {
+      "path": "../pluginmanager-common"
+    },
+    {
+      "path": "../ui"
+    }
+  ]
+}