@checkmate-monitor/catalog-frontend 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @checkmate-monitor/catalog-frontend
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [eff5b4e]
+- Updated dependencies [ffc28f6]
+- Updated dependencies [4dd644d]
+- Updated dependencies [32f2535]
+- Updated dependencies [b55fae6]
+- Updated dependencies [b354ab3]
+  - @checkmate-monitor/ui@0.1.0
+  - @checkmate-monitor/common@0.1.0
+  - @checkmate-monitor/catalog-common@0.1.0
+  - @checkmate-monitor/notification-common@0.1.0
+  - @checkmate-monitor/auth-frontend@0.1.0
+  - @checkmate-monitor/frontend-api@0.0.2

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@checkmate-monitor/catalog-frontend",
+  "version": "0.0.2",
+  "type": "module",
+  "main": "src/index.tsx",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@checkmate-monitor/catalog-common": "workspace:*",
+    "@checkmate-monitor/frontend-api": "workspace:*",
+    "@checkmate-monitor/auth-frontend": "workspace:*",
+    "@checkmate-monitor/common": "workspace:*",
+    "@checkmate-monitor/notification-common": "workspace:*",
+    "@checkmate-monitor/ui": "workspace:*",
+    "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",
+    "@checkmate-monitor/tsconfig": "workspace:*",
+    "@checkmate-monitor/scripts": "workspace:*"
+  }
+}

package/src/api.ts

@@ -0,0 +1,12 @@
+import { createApiRef } from "@checkmate-monitor/frontend-api";
+import { CatalogApi } from "@checkmate-monitor/catalog-common";
+import type { InferClient } from "@checkmate-monitor/common";
+
+// Re-export types for convenience
+export type { System, Group, View } from "@checkmate-monitor/catalog-common";
+
+// CatalogApi client type inferred from the client definition
+export type CatalogApiClient = InferClient<typeof CatalogApi>;
+
+export const catalogApiRef =
+  createApiRef<CatalogApiClient>("plugin.catalog.api");

package/src/components/CatalogConfigPage.tsx

@@ -0,0 +1,478 @@
+import React, { useState, useEffect } from "react";
+import {
+  useApi,
+  permissionApiRef,
+  ExtensionSlot,
+} from "@checkmate-monitor/frontend-api";
+import { catalogApiRef, System, Group } from "../api";
+import { CatalogSystemActionsSlot } from "@checkmate-monitor/catalog-common";
+import {
+  SectionHeader,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Button,
+  Label,
+  LoadingSpinner,
+  EmptyState,
+  PermissionDenied,
+  EditableText,
+  ConfirmationModal,
+  useToast,
+} from "@checkmate-monitor/ui";
+import { Plus, Trash2, LayoutGrid, Server, Settings } from "lucide-react";
+import { SystemEditor } from "./SystemEditor";
+import { GroupEditor } from "./GroupEditor";
+
+export const CatalogConfigPage = () => {
+  const catalogApi = useApi(catalogApiRef);
+  const permissionApi = useApi(permissionApiRef);
+  const toast = useToast();
+  const { allowed: canManage, loading: permissionLoading } =
+    permissionApi.useManagePermission("catalog");
+
+  const [systems, setSystems] = useState<System[]>([]);
+  const [groups, setGroups] = useState<Group[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // Dialog state
+  const [isSystemEditorOpen, setIsSystemEditorOpen] = useState(false);
+  const [isGroupEditorOpen, setIsGroupEditorOpen] = useState(false);
+
+  const [selectedGroupId, setSelectedGroupId] = useState("");
+  const [selectedSystemToAdd, setSelectedSystemToAdd] = useState("");
+
+  // Confirmation modal state
+  const [confirmModal, setConfirmModal] = useState<{
+    isOpen: boolean;
+    title: string;
+    message: string;
+    onConfirm: () => void;
+  }>({
+    isOpen: false,
+    title: "",
+    message: "",
+    onConfirm: () => {},
+  });
+
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const [s, g] = await Promise.all([
+        catalogApi.getSystems(),
+        catalogApi.getGroups(),
+      ]);
+      setSystems(s);
+      setGroups(g);
+      if (g.length > 0 && !selectedGroupId) {
+        setSelectedGroupId(g[0].id);
+      }
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to load catalog data";
+      toast.error(message);
+      console.error("Failed to load catalog data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const handleCreateSystem = async (data: {
+    name: string;
+    description?: string;
+  }) => {
+    await catalogApi.createSystem(data);
+    toast.success("System created successfully");
+    await loadData();
+  };
+
+  const handleCreateGroup = async (data: { name: string }) => {
+    await catalogApi.createGroup(data);
+    toast.success("Group created successfully");
+    await loadData();
+  };
+
+  const handleDeleteSystem = async (id: string) => {
+    const system = systems.find((s) => s.id === id);
+    setConfirmModal({
+      isOpen: true,
+      title: "Delete System",
+      message: `Are you sure you want to delete "${system?.name}"? This will remove the system from all groups as well.`,
+      onConfirm: async () => {
+        try {
+          await catalogApi.deleteSystem(id);
+          setConfirmModal({ ...confirmModal, isOpen: false });
+          toast.success("System deleted successfully");
+          loadData();
+        } catch (error) {
+          const message =
+            error instanceof Error ? error.message : "Failed to delete system";
+          toast.error(message);
+          console.error("Failed to delete system:", error);
+        }
+      },
+    });
+  };
+
+  const handleDeleteGroup = async (id: string) => {
+    const group = groups.find((g) => g.id === id);
+    setConfirmModal({
+      isOpen: true,
+      title: "Delete Group",
+      message: `Are you sure you want to delete "${group?.name}"? This action cannot be undone.`,
+      onConfirm: async () => {
+        try {
+          await catalogApi.deleteGroup(id);
+          setConfirmModal({ ...confirmModal, isOpen: false });
+          toast.success("Group deleted successfully");
+          loadData();
+        } catch (error) {
+          const message =
+            error instanceof Error ? error.message : "Failed to delete group";
+          toast.error(message);
+          console.error("Failed to delete group:", error);
+        }
+      },
+    });
+  };
+
+  const handleAddSystemToGroup = async () => {
+    if (!selectedGroupId || !selectedSystemToAdd) return;
+    try {
+      await catalogApi.addSystemToGroup({
+        groupId: selectedGroupId,
+        systemId: selectedSystemToAdd,
+      });
+      setSelectedSystemToAdd("");
+      toast.success("System added to group successfully");
+      loadData();
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Failed to add system to group";
+      toast.error(message);
+      console.error("Failed to add system to group:", error);
+    }
+  };
+
+  const handleRemoveSystemFromGroup = async (
+    groupId: string,
+    systemId: string
+  ) => {
+    try {
+      await catalogApi.removeSystemFromGroup({ groupId, systemId });
+      toast.success("System removed from group successfully");
+      loadData();
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Failed to remove system from group";
+      toast.error(message);
+      console.error("Failed to remove system from group:", error);
+    }
+  };
+
+  const handleUpdateSystemName = async (id: string, newName: string) => {
+    try {
+      await catalogApi.updateSystem({ id, data: { name: newName } });
+      toast.success("System name updated successfully");
+      loadData();
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to update system name";
+      toast.error(message);
+      console.error("Failed to update system name:", error);
+      throw error;
+    }
+  };
+
+  const handleUpdateSystemDescription = async (
+    id: string,
+    newDescription: string
+  ) => {
+    try {
+      await catalogApi.updateSystem({
+        id,
+        data: { description: newDescription },
+      });
+      toast.success("System description updated successfully");
+      loadData();
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : "Failed to update system description";
+      toast.error(message);
+      console.error("Failed to update system description:", error);
+      throw error;
+    }
+  };
+
+  const handleUpdateGroupName = async (id: string, newName: string) => {
+    try {
+      await catalogApi.updateGroup({ id, data: { name: newName } });
+      toast.success("Group name updated successfully");
+      loadData();
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to update group name";
+      toast.error(message);
+      console.error("Failed to update group name:", error);
+      throw error;
+    }
+  };
+
+  if (loading || permissionLoading) return <LoadingSpinner />;
+
+  if (!canManage) {
+    return <PermissionDenied />;
+  }
+
+  const selectedGroup = groups.find((g) => g.id === selectedGroupId);
+  const availableSystems = systems.filter(
+    (s) => !selectedGroup?.systemIds?.includes(s.id)
+  );
+
+  return (
+    <div className="space-y-8">
+      <SectionHeader
+        title="Catalog Management"
+        description="Manage systems and logical groups within your infrastructure"
+        icon={<Settings className="w-6 h-6 text-primary" />}
+      />
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        {/* Systems Management */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="flex items-center gap-2">
+              <Server className="w-5 h-5 text-muted-foreground" />
+              Systems
+            </CardTitle>
+            <Button size="sm" onClick={() => setIsSystemEditorOpen(true)}>
+              <Plus className="w-4 h-4 mr-2" />
+              Add System
+            </Button>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {systems.length === 0 ? (
+              <EmptyState title="No systems created yet." />
+            ) : (
+              <div className="space-y-2">
+                {systems.map((system) => (
+                  <div
+                    key={system.id}
+                    className="flex items-start justify-between p-3 bg-muted/30 rounded-lg border border-border"
+                  >
+                    <div className="flex-1 space-y-1">
+                      <div className="flex items-center justify-between">
+                        <EditableText
+                          value={system.name}
+                          onSave={(newName) =>
+                            handleUpdateSystemName(system.id, newName)
+                          }
+                          className="font-medium text-foreground"
+                        />
+                        <ExtensionSlot
+                          slot={CatalogSystemActionsSlot}
+                          context={{
+                            systemId: system.id,
+                            systemName: system.name,
+                          }}
+                        />
+                      </div>
+                      <EditableText
+                        value={system.description || "No description"}
+                        onSave={(newDescription) =>
+                          handleUpdateSystemDescription(
+                            system.id,
+                            newDescription
+                          )
+                        }
+                        className="text-xs text-muted-foreground font-mono"
+                        placeholder="Add description..."
+                      />
+                    </div>
+                    <Button
+                      variant="ghost"
+                      className="text-destructive hover:text-destructive/90 hover:bg-destructive/10 h-8 w-8 p-0"
+                      onClick={() => handleDeleteSystem(system.id)}
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Groups Management */}
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="flex items-center gap-2">
+              <LayoutGrid className="w-5 h-5 text-muted-foreground" />
+              Groups
+            </CardTitle>
+            <Button size="sm" onClick={() => setIsGroupEditorOpen(true)}>
+              <Plus className="w-4 h-4 mr-2" />
+              Add Group
+            </Button>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {groups.length === 0 ? (
+              <EmptyState title="No groups created yet." />
+            ) : (
+              <div className="space-y-2">
+                {groups.map((group) => (
+                  <div
+                    key={group.id}
+                    className="p-3 bg-muted/30 rounded-lg border border-border space-y-2"
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex-1">
+                        <EditableText
+                          value={group.name}
+                          onSave={(newName) =>
+                            handleUpdateGroupName(group.id, newName)
+                          }
+                          className="font-medium text-foreground"
+                        />
+                        <p className="text-xs text-muted-foreground font-mono">
+                          {group.id}
+                        </p>
+                      </div>
+                      <Button
+                        variant="ghost"
+                        className="text-destructive hover:text-destructive/90 hover:bg-destructive/10 h-8 w-8 p-0"
+                        onClick={() => handleDeleteGroup(group.id)}
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </Button>
+                    </div>
+
+                    {/* Systems in this group */}
+                    {group.systemIds && group.systemIds.length > 0 && (
+                      <div className="pl-4 space-y-1">
+                        {group.systemIds
+                          .map((sysId) => systems.find((s) => s.id === sysId))
+                          .filter((sys): sys is System => !!sys)
+                          .map((sys) => (
+                            <div
+                              key={sys.id}
+                              className="flex items-center justify-between text-sm bg-background p-2 rounded border border-border"
+                            >
+                              <span className="text-foreground">
+                                {sys.name}
+                              </span>
+                              <Button
+                                variant="ghost"
+                                className="text-destructive/60 hover:text-destructive h-6 w-6 p-0"
+                                onClick={() =>
+                                  handleRemoveSystemFromGroup(group.id, sys.id)
+                                }
+                              >
+                                <Trash2 className="w-3 h-3" />
+                              </Button>
+                            </div>
+                          ))}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Add System to Group Section */}
+      {groups.length > 0 && systems.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Add System to Group</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label>Select Group</Label>
+                <select
+                  className="w-full flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  value={selectedGroupId}
+                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                    setSelectedGroupId(e.target.value)
+                  }
+                >
+                  {groups.map((g) => (
+                    <option key={g.id} value={g.id}>
+                      {g.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="space-y-2">
+                <Label>Select System</Label>
+                <select
+                  className="w-full flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  value={selectedSystemToAdd}
+                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                    setSelectedSystemToAdd(e.target.value)
+                  }
+                >
+                  <option value="">Select a system</option>
+                  {availableSystems.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="flex items-end">
+                <Button
+                  onClick={handleAddSystemToGroup}
+                  disabled={!selectedSystemToAdd}
+                  className="w-full"
+                >
+                  <Plus className="w-4 h-4 mr-2" />
+                  Add to Group
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Dialogs */}
+      <SystemEditor
+        open={isSystemEditorOpen}
+        onClose={() => setIsSystemEditorOpen(false)}
+        onSave={handleCreateSystem}
+      />
+
+      <GroupEditor
+        open={isGroupEditorOpen}
+        onClose={() => setIsGroupEditorOpen(false)}
+        onSave={handleCreateGroup}
+      />
+
+      <ConfirmationModal
+        isOpen={confirmModal.isOpen}
+        onClose={() => setConfirmModal({ ...confirmModal, isOpen: false })}
+        onConfirm={confirmModal.onConfirm}
+        title={confirmModal.title}
+        message={confirmModal.message}
+        confirmText="Delete"
+        variant="danger"
+      />
+    </div>
+  );
+};

package/src/components/CatalogPage.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { useApi, loggerApiRef } from "@checkmate-monitor/frontend-api";
+import { catalogApiRef } from "../api";
+
+export const CatalogPage = () => {
+  const logger = useApi(loggerApiRef);
+  const catalog = useApi(catalogApiRef);
+
+  React.useEffect(() => {
+    logger.info("Catalog Page loaded", catalog);
+  }, [logger, catalog]);
+
+  return (
+    <div className="p-4 rounded-lg bg-white shadow">
+      <h2 className="text-2xl font-semibold mb-4">Catalog</h2>
+      <p className="text-muted-foreground">Welcome to the Service Catalog.</p>
+    </div>
+  );
+};

package/src/components/GroupEditor.tsx

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from "react";
+import {
+  Button,
+  Input,
+  Label,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  useToast,
+} from "@checkmate-monitor/ui";
+
+interface GroupEditorProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (data: { name: string }) => Promise<void>;
+  initialData?: { name: string };
+}
+
+export const GroupEditor: React.FC<GroupEditorProps> = ({
+  open,
+  onClose,
+  onSave,
+  initialData,
+}) => {
+  const [name, setName] = useState(initialData?.name || "");
+  const [loading, setLoading] = useState(false);
+  const toast = useToast();
+
+  // Reset form when dialog opens
+  useEffect(() => {
+    if (open) {
+      setName(initialData?.name || "");
+    }
+  }, [open, initialData]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    setLoading(true);
+    try {
+      await onSave({ name: name.trim() });
+      onClose();
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to save group";
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent size="default">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>
+              {initialData ? "Edit Group" : "Create Group"}
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="group-name">Name</Label>
+              <Input
+                id="group-name"
+                placeholder="e.g. Payment Flow"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={loading || !name.trim()}>
+              {loading
+                ? "Saving..."
+                : initialData
+                ? "Save Changes"
+                : "Create Group"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/SystemDetailPage.tsx

@@ -0,0 +1,314 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useApi, rpcApiRef } from "@checkmate-monitor/frontend-api";
+import { catalogApiRef, System, Group } from "../api";
+import { ExtensionSlot } from "@checkmate-monitor/frontend-api";
+import {
+  SystemDetailsSlot,
+  SystemDetailsTopSlot,
+  SystemStateBadgesSlot,
+} from "@checkmate-monitor/catalog-common";
+import { NotificationApi } from "@checkmate-monitor/notification-common";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  LoadingSpinner,
+  SubscribeButton,
+  useToast,
+  BackLink,
+} from "@checkmate-monitor/ui";
+import { authApiRef } from "@checkmate-monitor/auth-frontend/api";
+
+import { Activity, Info, Users, FileJson, Calendar } from "lucide-react";
+
+const CATALOG_PLUGIN_ID = "catalog";
+
+export const SystemDetailPage: React.FC = () => {
+  const { systemId } = useParams<{ systemId: string }>();
+  const navigate = useNavigate();
+  const catalogApi = useApi(catalogApiRef);
+  const rpcApi = useApi(rpcApiRef);
+  const notificationApi = rpcApi.forPlugin(NotificationApi);
+  const toast = useToast();
+  const authApi = useApi(authApiRef);
+  const { data: session } = authApi.useSession();
+
+  const [system, setSystem] = useState<System | undefined>();
+  const [groups, setGroups] = useState<Group[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [notFound, setNotFound] = useState(false);
+
+  // Subscription state
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [subscriptionLoading, setSubscriptionLoading] = useState(true);
+
+  // Construct the full group ID for this system
+  const getSystemGroupId = useCallback(() => {
+    return `${CATALOG_PLUGIN_ID}.system.${systemId}`;
+  }, [systemId]);
+
+  useEffect(() => {
+    if (!systemId) {
+      setNotFound(true);
+      setLoading(false);
+      return;
+    }
+
+    Promise.all([catalogApi.getSystems(), catalogApi.getGroups()])
+      .then(([systems, allGroups]) => {
+        const foundSystem = systems.find((s) => s.id === systemId);
+
+        if (!foundSystem) {
+          setNotFound(true);
+          return;
+        }
+
+        setSystem(foundSystem);
+
+        // Find groups that contain this system
+        const systemGroups = allGroups.filter((group) =>
+          group.systemIds?.includes(systemId)
+        );
+        setGroups(systemGroups);
+      })
+      .catch((error) => {
+        console.error("Error fetching system details:", error);
+        setNotFound(true);
+      })
+      .finally(() => setLoading(false));
+  }, [systemId, catalogApi]);
+
+  // Check subscription status
+  useEffect(() => {
+    if (!systemId) return;
+
+    setSubscriptionLoading(true);
+    notificationApi
+      .getSubscriptions()
+      .then((subscriptions) => {
+        const groupId = getSystemGroupId();
+        const hasSubscription = subscriptions.some(
+          (s) => s.groupId === groupId
+        );
+        setIsSubscribed(hasSubscription);
+      })
+      .catch((error) => {
+        console.error("Failed to check subscription status:", error);
+      })
+      .finally(() => setSubscriptionLoading(false));
+  }, [systemId, notificationApi, getSystemGroupId]);
+
+  const handleSubscribe = async () => {
+    setSubscriptionLoading(true);
+    try {
+      await notificationApi.subscribe({ groupId: getSystemGroupId() });
+      setIsSubscribed(true);
+      toast.success("Subscribed to system notifications");
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to subscribe";
+      toast.error(message);
+    } finally {
+      setSubscriptionLoading(false);
+    }
+  };
+
+  const handleUnsubscribe = async () => {
+    setSubscriptionLoading(true);
+    try {
+      await notificationApi.unsubscribe({ groupId: getSystemGroupId() });
+      setIsSubscribed(false);
+      toast.success("Unsubscribed from system notifications");
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to unsubscribe";
+      toast.error(message);
+    } finally {
+      setSubscriptionLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (notFound || !system) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Activity className="h-8 w-8 text-primary" />
+            <h1 className="text-3xl font-bold text-foreground">
+              System Not Found
+            </h1>
+          </div>
+          <BackLink onClick={() => navigate("/")}>Back to Dashboard</BackLink>
+        </div>
+        <Card className="border-destructive/30 bg-destructive/10">
+          <CardContent className="p-12 text-center">
+            <p className="text-destructive-foreground">
+              The system you're looking for doesn't exist or has been removed.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 animate-in fade-in duration-500">
+      {/* System Name with Subscribe Button and Back Link */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Activity className="h-8 w-8 text-primary" />
+          <h1 className="text-3xl font-bold text-foreground">{system.name}</h1>
+        </div>
+        <div className="flex items-center gap-4">
+          {session && (
+            <SubscribeButton
+              isSubscribed={isSubscribed}
+              onSubscribe={handleSubscribe}
+              onUnsubscribe={handleUnsubscribe}
+              loading={subscriptionLoading}
+            />
+          )}
+          <BackLink onClick={() => navigate("/")}>Back to Dashboard</BackLink>
+        </div>
+      </div>
+
+      {/* Top Extension Slot for urgent items like maintenance alerts */}
+      <ExtensionSlot slot={SystemDetailsTopSlot} context={{ system }} />
+
+      {/* System Status Card - displays plugin-provided state badges */}
+      <Card className="border-border shadow-sm">
+        <CardHeader className="border-b border-border bg-muted/30">
+          <div className="flex items-center gap-2">
+            <Activity className="h-5 w-5 text-muted-foreground" />
+            <CardTitle className="text-lg font-semibold">
+              System Status
+            </CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="p-6">
+          <div className="flex flex-wrap items-center gap-2">
+            <ExtensionSlot slot={SystemStateBadgesSlot} context={{ system }} />
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* System Information Card */}
+      <Card className="border-border shadow-sm">
+        <CardHeader className="border-b border-border bg-muted/30">
+          <div className="flex items-center gap-2">
+            <Info className="h-5 w-5 text-muted-foreground" />
+            <CardTitle className="text-lg font-semibold">
+              System Information
+            </CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="p-6 space-y-4">
+          <div>
+            <label className="text-sm font-medium text-muted-foreground">
+              Description
+            </label>
+            <p className="mt-1 text-foreground">
+              {system.description || "No description provided"}
+            </p>
+          </div>
+          <div>
+            <label className="text-sm font-medium text-muted-foreground">
+              Owner
+            </label>
+            <p className="mt-1 text-foreground">
+              {system.owner || "Not assigned"}
+            </p>
+          </div>
+          <div className="flex gap-6 text-sm">
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Calendar className="h-4 w-4" />
+              <span>
+                Created:{" "}
+                {new Date(system.createdAt).toLocaleDateString("en-US", {
+                  year: "numeric",
+                  month: "short",
+                  day: "numeric",
+                })}
+              </span>
+            </div>
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Calendar className="h-4 w-4" />
+              <span>
+                Updated:{" "}
+                {new Date(system.updatedAt).toLocaleDateString("en-US", {
+                  year: "numeric",
+                  month: "short",
+                  day: "numeric",
+                })}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Groups Card */}
+      <Card className="border-border shadow-sm">
+        <CardHeader className="border-b border-border bg-muted/30">
+          <div className="flex items-center gap-2">
+            <Users className="h-5 w-5 text-muted-foreground" />
+            <CardTitle className="text-lg font-semibold">
+              Member of Groups
+            </CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent className="p-6">
+          {groups.length === 0 ? (
+            <p className="text-muted-foreground text-sm">
+              This system is not part of any groups
+            </p>
+          ) : (
+            <div className="flex flex-wrap gap-2">
+              {groups.map((group) => (
+                <span
+                  key={group.id}
+                  className="inline-flex items-center gap-1.5 rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm font-medium text-primary"
+                >
+                  {group.name}
+                </span>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Metadata Card */}
+      {system.metadata &&
+        typeof system.metadata === "object" &&
+        Object.keys(system.metadata).length > 0 && (
+          <Card className="border-border shadow-sm">
+            <CardHeader className="border-b border-border bg-muted/30">
+              <div className="flex items-center gap-2">
+                <FileJson className="h-5 w-5 text-muted-foreground" />
+                <CardTitle className="text-lg font-semibold">
+                  Metadata
+                </CardTitle>
+              </div>
+            </CardHeader>
+            <CardContent className="p-6">
+              <pre className="text-sm text-foreground bg-muted/30 p-4 rounded border border-border overflow-x-auto">
+                {JSON.stringify(system.metadata, undefined, 2)}
+              </pre>
+            </CardContent>
+          </Card>
+        )}
+
+      {/* Extension Slot for System Details */}
+      <ExtensionSlot slot={SystemDetailsSlot} context={{ system }} />
+    </div>
+  );
+};

package/src/components/SystemEditor.tsx

@@ -0,0 +1,113 @@
+import React, { useState, useEffect } from "react";
+import {
+  Button,
+  Input,
+  Label,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  useToast,
+} from "@checkmate-monitor/ui";
+
+interface SystemEditorProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (data: { name: string; description?: string }) => Promise<void>;
+  initialData?: { name: string; description?: string };
+}
+
+export const SystemEditor: React.FC<SystemEditorProps> = ({
+  open,
+  onClose,
+  onSave,
+  initialData,
+}) => {
+  const [name, setName] = useState(initialData?.name || "");
+  const [description, setDescription] = useState(
+    initialData?.description || ""
+  );
+  const [loading, setLoading] = useState(false);
+  const toast = useToast();
+
+  // Reset form when dialog opens
+  useEffect(() => {
+    if (open) {
+      setName(initialData?.name || "");
+      setDescription(initialData?.description || "");
+    }
+  }, [open, initialData]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    setLoading(true);
+    try {
+      await onSave({
+        name: name.trim(),
+        description: description.trim() || undefined,
+      });
+      onClose();
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to save system";
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent size="default">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>
+              {initialData ? "Edit System" : "Create System"}
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="system-name">Name</Label>
+              <Input
+                id="system-name"
+                placeholder="e.g. Payments API"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="system-description">Description (optional)</Label>
+              <textarea
+                id="system-description"
+                className="w-full flex min-h-[80px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none"
+                placeholder="Describe what this system does..."
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                rows={3}
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={loading || !name.trim()}>
+              {loading
+                ? "Saving..."
+                : initialData
+                ? "Save Changes"
+                : "Create System"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/UserMenuItems.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Settings } from "lucide-react";
+import { useApi, permissionApiRef } from "@checkmate-monitor/frontend-api";
+import { DropdownMenuItem } from "@checkmate-monitor/ui";
+import { resolveRoute } from "@checkmate-monitor/common";
+import { catalogRoutes } from "@checkmate-monitor/catalog-common";
+
+export const CatalogUserMenuItems = () => {
+  const permissionApi = useApi(permissionApiRef);
+  const { allowed: canManage, loading } =
+    permissionApi.useManagePermission("catalog");
+
+  if (loading || !canManage) {
+    return <React.Fragment />;
+  }
+
+  return (
+    <Link to={resolveRoute(catalogRoutes.routes.config)}>
+      <DropdownMenuItem icon={<Settings className="h-4 w-4" />}>
+        Catalog Settings
+      </DropdownMenuItem>
+    </Link>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,56 @@
+import {
+  rpcApiRef,
+  ApiRef,
+  UserMenuItemsSlot,
+} from "@checkmate-monitor/frontend-api";
+import { catalogApiRef, type CatalogApiClient } from "./api";
+import { createFrontendPlugin } from "@checkmate-monitor/frontend-api";
+import {
+  catalogRoutes,
+  CatalogApi,
+  pluginMetadata,
+  permissions,
+} from "@checkmate-monitor/catalog-common";
+
+import { CatalogPage } from "./components/CatalogPage";
+import { CatalogConfigPage } from "./components/CatalogConfigPage";
+import { CatalogUserMenuItems } from "./components/UserMenuItems";
+import { SystemDetailPage } from "./components/SystemDetailPage";
+
+export const catalogPlugin = createFrontendPlugin({
+  metadata: pluginMetadata,
+  apis: [
+    {
+      ref: catalogApiRef,
+      factory: (deps: { get: <T>(ref: ApiRef<T>) => T }): CatalogApiClient => {
+        const rpcApi = deps.get(rpcApiRef);
+        // CatalogApiClient is derived from the contract type
+        return rpcApi.forPlugin(CatalogApi);
+      },
+    },
+  ],
+  routes: [
+    {
+      route: catalogRoutes.routes.home,
+      element: <CatalogPage />,
+    },
+    {
+      route: catalogRoutes.routes.config,
+      element: <CatalogConfigPage />,
+      permission: permissions.catalogManage,
+    },
+    {
+      route: catalogRoutes.routes.systemDetail,
+      element: <SystemDetailPage />,
+    },
+  ],
+  extensions: [
+    {
+      id: "catalog.user-menu.items",
+      slot: UserMenuItemsSlot,
+      component: CatalogUserMenuItems,
+    },
+  ],
+});
+
+export * from "./api";

package/tsconfig.json

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