@checkstack/dashboard-frontend 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,125 @@
+# @checkstack/dashboard-frontend
+
+## 0.0.2
+
+### Patch Changes
+
+- d20d274: Initial release of all @checkstack packages. Rebranded from Checkmate to Checkstack with new npm organization @checkstack and domain checkstack.dev.
+- Updated dependencies [d20d274]
+  - @checkstack/auth-frontend@0.0.2
+  - @checkstack/catalog-common@0.0.2
+  - @checkstack/catalog-frontend@0.0.2
+  - @checkstack/command-common@0.0.2
+  - @checkstack/command-frontend@0.0.2
+  - @checkstack/common@0.0.2
+  - @checkstack/frontend-api@0.0.2
+  - @checkstack/healthcheck-common@0.0.2
+  - @checkstack/incident-common@0.0.2
+  - @checkstack/maintenance-common@0.0.2
+  - @checkstack/notification-common@0.0.2
+  - @checkstack/signal-frontend@0.0.2
+  - @checkstack/ui@0.0.2
+
+## 0.1.0
+
+### Minor Changes
+
+- ae33df2: Move command palette from dashboard to centered navbar position
+
+  - Converted `command-frontend` into a plugin with `NavbarCenterSlot` extension
+  - Added compact `NavbarSearch` component with responsive search trigger
+  - Moved `SearchDialog` from dashboard-frontend to command-frontend
+  - Keyboard shortcut (⌘K / Ctrl+K) now works on every page
+  - Renamed navbar slots for clarity:
+    - `NavbarSlot` → `NavbarRightSlot`
+    - `NavbarMainSlot` → `NavbarLeftSlot`
+    - Added new `NavbarCenterSlot` for centered content
+
+### Patch Changes
+
+- a65e002: Add compile-time type safety for Lucide icon names
+
+  - Add `LucideIconName` type and `lucideIconSchema` Zod schema to `@checkstack/common`
+  - Update backend interfaces (`AuthStrategy`, `NotificationStrategy`, `IntegrationProvider`, `CommandDefinition`) to use `LucideIconName`
+  - Update RPC contracts to use `lucideIconSchema` for proper type inference across RPC boundaries
+  - Simplify `SocialProviderButton` to use `DynamicIcon` directly (removes 30+ lines of pascalCase conversion)
+  - Replace static `iconMap` in `SearchDialog` with `DynamicIcon` for dynamic icon rendering
+  - Add fallback handling in `DynamicIcon` when icon name isn't found
+  - Fix legacy kebab-case icon names to PascalCase: `mail`→`Mail`, `send`→`Send`, `github`→`Github`, `key-round`→`KeyRound`, `network`→`Network`, `AlertCircle`→`CircleAlert`
+
+- Updated dependencies [52231ef]
+- Updated dependencies [b0124ef]
+- Updated dependencies [54cc787]
+- Updated dependencies [a65e002]
+- Updated dependencies [ae33df2]
+- Updated dependencies [a65e002]
+- Updated dependencies [32ea706]
+  - @checkstack/auth-frontend@0.3.0
+  - @checkstack/ui@0.1.2
+  - @checkstack/catalog-frontend@0.1.0
+  - @checkstack/common@0.2.0
+  - @checkstack/command-frontend@0.1.0
+  - @checkstack/frontend-api@0.1.0
+  - @checkstack/catalog-common@0.1.2
+  - @checkstack/command-common@0.0.3
+  - @checkstack/healthcheck-common@0.1.1
+  - @checkstack/incident-common@0.1.2
+  - @checkstack/maintenance-common@0.1.2
+  - @checkstack/notification-common@0.1.1
+  - @checkstack/signal-frontend@0.1.1
+
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies [1bf71bb]
+  - @checkstack/auth-frontend@0.2.1
+  - @checkstack/catalog-frontend@0.0.5
+
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies [e26c08e]
+  - @checkstack/auth-frontend@0.2.0
+  - @checkstack/catalog-frontend@0.0.4
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies [0f8cc7d]
+  - @checkstack/frontend-api@0.0.3
+  - @checkstack/auth-frontend@0.1.1
+  - @checkstack/catalog-common@0.1.1
+  - @checkstack/catalog-frontend@0.0.3
+  - @checkstack/command-frontend@0.0.3
+  - @checkstack/incident-common@0.1.1
+  - @checkstack/maintenance-common@0.1.1
+  - @checkstack/ui@0.1.1
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [eff5b4e]
+- Updated dependencies [ffc28f6]
+- Updated dependencies [4dd644d]
+- Updated dependencies [ae19ff6]
+- Updated dependencies [0babb9c]
+- Updated dependencies [32f2535]
+- Updated dependencies [b55fae6]
+- Updated dependencies [b354ab3]
+  - @checkstack/maintenance-common@0.1.0
+  - @checkstack/ui@0.1.0
+  - @checkstack/common@0.1.0
+  - @checkstack/catalog-common@0.1.0
+  - @checkstack/notification-common@0.1.0
+  - @checkstack/incident-common@0.1.0
+  - @checkstack/healthcheck-common@0.1.0
+  - @checkstack/auth-frontend@0.1.0
+  - @checkstack/signal-frontend@0.1.0
+  - @checkstack/catalog-frontend@0.0.2
+  - @checkstack/command-common@0.0.2
+  - @checkstack/command-frontend@0.0.2
+  - @checkstack/frontend-api@0.0.2

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@checkstack/dashboard-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": {
+    "@checkstack/frontend-api": "workspace:*",
+    "@checkstack/auth-frontend": "workspace:*",
+    "@checkstack/common": "workspace:*",
+    "@checkstack/command-frontend": "workspace:*",
+    "@checkstack/command-common": "workspace:*",
+    "@checkstack/notification-common": "workspace:*",
+    "@checkstack/catalog-common": "workspace:*",
+    "@checkstack/incident-common": "workspace:*",
+    "@checkstack/maintenance-common": "workspace:*",
+    "@checkstack/healthcheck-common": "workspace:*",
+    "@checkstack/signal-frontend": "workspace:*",
+    "@checkstack/ui": "workspace:*",
+    "@checkstack/catalog-frontend": "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",
+    "@checkstack/tsconfig": "workspace:*",
+    "@checkstack/scripts": "workspace:*"
+  }
+}

package/src/Dashboard.tsx

@@ -0,0 +1,389 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  useApi,
+  rpcApiRef,
+  ExtensionSlot,
+} from "@checkstack/frontend-api";
+import { catalogApiRef } from "@checkstack/catalog-frontend";
+import {
+  catalogRoutes,
+  SystemStateBadgesSlot,
+  System,
+  Group,
+} from "@checkstack/catalog-common";
+import { resolveRoute } from "@checkstack/common";
+import {
+  NotificationApi,
+  type EnrichedSubscription,
+} from "@checkstack/notification-common";
+import { IncidentApi } from "@checkstack/incident-common";
+import { MaintenanceApi } from "@checkstack/maintenance-common";
+import { HEALTH_CHECK_RUN_COMPLETED } from "@checkstack/healthcheck-common";
+import { useSignal } from "@checkstack/signal-frontend";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  SectionHeader,
+  StatusCard,
+  EmptyState,
+  LoadingSpinner,
+  SubscribeButton,
+  useToast,
+  AnimatedCounter,
+  TerminalFeed,
+  type TerminalEntry,
+} from "@checkstack/ui";
+import {
+  LayoutGrid,
+  Server,
+  Activity,
+  ChevronRight,
+  AlertTriangle,
+  Wrench,
+  Terminal,
+} from "lucide-react";
+import { authApiRef } from "@checkstack/auth-frontend/api";
+
+const CATALOG_PLUGIN_ID = "catalog";
+const MAX_TERMINAL_ENTRIES = 8;
+
+const getGroupId = (groupId: string) => `${CATALOG_PLUGIN_ID}.group.${groupId}`;
+
+interface GroupWithSystems extends Group {
+  systems: System[];
+}
+
+// Map health check status to terminal entry variant
+const statusToVariant = (
+  status: "healthy" | "degraded" | "unhealthy"
+): TerminalEntry["variant"] => {
+  switch (status) {
+    case "healthy": {
+      return "success";
+    }
+    case "degraded": {
+      return "warning";
+    }
+    case "unhealthy": {
+      return "error";
+    }
+  }
+};
+
+export const Dashboard: React.FC = () => {
+  const catalogApi = useApi(catalogApiRef);
+  const rpcApi = useApi(rpcApiRef);
+  const notificationApi = rpcApi.forPlugin(NotificationApi);
+  const incidentApi = rpcApi.forPlugin(IncidentApi);
+  const maintenanceApi = rpcApi.forPlugin(MaintenanceApi);
+  const navigate = useNavigate();
+  const toast = useToast();
+  const authApi = useApi(authApiRef);
+  const { data: session } = authApi.useSession();
+
+  const [groupsWithSystems, setGroupsWithSystems] = useState<
+    GroupWithSystems[]
+  >([]);
+  const [loading, setLoading] = useState(true);
+
+  // Overview statistics state
+  const [systemsCount, setSystemsCount] = useState(0);
+  const [activeIncidentsCount, setActiveIncidentsCount] = useState(0);
+  const [activeMaintenancesCount, setActiveMaintenancesCount] = useState(0);
+
+  // Terminal feed entries from real healthcheck signals
+  const [terminalEntries, setTerminalEntries] = useState<TerminalEntry[]>([]);
+
+  // Subscription state
+  const [subscriptions, setSubscriptions] = useState<EnrichedSubscription[]>(
+    []
+  );
+  const [subscriptionLoading, setSubscriptionLoading] = useState<
+    Record<string, boolean>
+  >({});
+
+  // Listen for health check runs and add to terminal feed
+  useSignal(
+    HEALTH_CHECK_RUN_COMPLETED,
+    ({ systemName, configurationName, status, latencyMs }) => {
+      const newEntry: TerminalEntry = {
+        id: `${configurationName}-${Date.now()}`,
+        timestamp: new Date(),
+        content: `${systemName} (${configurationName}) → ${status}`,
+        variant: statusToVariant(status),
+        suffix: latencyMs === undefined ? undefined : `${latencyMs}ms`,
+      };
+
+      setTerminalEntries((prev) =>
+        [newEntry, ...prev].slice(0, MAX_TERMINAL_ENTRIES)
+      );
+    }
+  );
+
+  useEffect(() => {
+    if (session) {
+      notificationApi.getSubscriptions().then(setSubscriptions);
+    }
+  }, [session, notificationApi]);
+
+  useEffect(() => {
+    Promise.all([
+      catalogApi.getGroups(),
+      catalogApi.getSystems(),
+      incidentApi.listIncidents({ includeResolved: false }),
+      maintenanceApi.listMaintenances({ status: "in_progress" }),
+    ])
+      .then(([groups, systems, incidents, maintenances]) => {
+        // Set overview statistics
+        setSystemsCount(systems.length);
+        setActiveIncidentsCount(incidents.length);
+        setActiveMaintenancesCount(maintenances.length);
+
+        // Create a map of system IDs to systems
+        const systemMap = new Map(systems.map((s) => [s.id, s]));
+
+        // Map groups to include their systems
+        const groupsData: GroupWithSystems[] = groups.map((group) => {
+          const groupSystems = (group.systemIds || [])
+            .map((id) => systemMap.get(id))
+            .filter((s): s is System => s !== undefined);
+
+          return {
+            ...group,
+            systems: groupSystems,
+          };
+        });
+
+        setGroupsWithSystems(groupsData);
+      })
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, [catalogApi, incidentApi, maintenanceApi]);
+
+  const handleSystemClick = (systemId: string) => {
+    navigate(resolveRoute(catalogRoutes.routes.systemDetail, { systemId }));
+  };
+
+  const isSubscribed = (groupId: string) => {
+    const fullId = getGroupId(groupId);
+    return subscriptions.some((s) => s.groupId === fullId);
+  };
+
+  const handleSubscribe = useCallback(
+    async (groupId: string) => {
+      const fullId = getGroupId(groupId);
+      setSubscriptionLoading((prev) => ({ ...prev, [groupId]: true }));
+      try {
+        await notificationApi.subscribe({ groupId: fullId });
+        setSubscriptions((prev) => [
+          ...prev,
+          {
+            groupId: fullId,
+            groupName: "",
+            groupDescription: "",
+            ownerPlugin: CATALOG_PLUGIN_ID,
+            subscribedAt: new Date(),
+          },
+        ]);
+        toast.success("Subscribed to group notifications");
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Failed to subscribe";
+        toast.error(message);
+      } finally {
+        setSubscriptionLoading((prev) => ({ ...prev, [groupId]: false }));
+      }
+    },
+    [notificationApi, toast]
+  );
+
+  const handleUnsubscribe = useCallback(
+    async (groupId: string) => {
+      const fullId = getGroupId(groupId);
+      setSubscriptionLoading((prev) => ({ ...prev, [groupId]: true }));
+      try {
+        await notificationApi.unsubscribe({ groupId: fullId });
+        setSubscriptions((prev) => prev.filter((s) => s.groupId !== fullId));
+        toast.success("Unsubscribed from group notifications");
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Failed to unsubscribe";
+        toast.error(message);
+      } finally {
+        setSubscriptionLoading((prev) => ({ ...prev, [groupId]: false }));
+      }
+    },
+    [notificationApi, toast]
+  );
+
+  const renderGroupsContent = () => {
+    if (loading) {
+      return <LoadingSpinner />;
+    }
+
+    if (groupsWithSystems.length === 0) {
+      return (
+        <EmptyState
+          title="No system groups found"
+          description="Visit the Catalog to create your first group."
+          icon={<Server className="w-12 h-12" />}
+        />
+      );
+    }
+
+    return (
+      <div className="space-y-4">
+        {groupsWithSystems.map((group) => (
+          <Card
+            key={group.id}
+            className="border-border shadow-sm hover:shadow-md transition-shadow"
+          >
+            <CardHeader className="border-b border-border bg-muted/30">
+              <div className="flex items-center gap-2">
+                <LayoutGrid className="h-5 w-5 text-muted-foreground" />
+                <CardTitle className="text-lg font-semibold text-foreground">
+                  {group.name}
+                </CardTitle>
+                <span className="ml-auto text-sm text-muted-foreground mr-2">
+                  {group.systems.length}{" "}
+                  {group.systems.length === 1 ? "system" : "systems"}
+                </span>
+                {session && (
+                  <SubscribeButton
+                    isSubscribed={isSubscribed(group.id)}
+                    onSubscribe={() => handleSubscribe(group.id)}
+                    onUnsubscribe={() => handleUnsubscribe(group.id)}
+                    loading={subscriptionLoading[group.id] || false}
+                  />
+                )}
+              </div>
+            </CardHeader>
+            <CardContent className="p-4">
+              {group.systems.length === 0 ? (
+                <div className="py-8 text-center">
+                  <p className="text-sm text-muted-foreground">
+                    No systems in this group yet
+                  </p>
+                </div>
+              ) : (
+                <div
+                  className={`grid gap-3 ${
+                    group.systems.length === 1
+                      ? "grid-cols-1"
+                      : "grid-cols-1 sm:grid-cols-2"
+                  }`}
+                >
+                  {group.systems.map((system) => (
+                    <button
+                      key={system.id}
+                      onClick={() => handleSystemClick(system.id)}
+                      className="flex items-center justify-between gap-3 rounded-lg border border-border bg-card px-4 py-3 transition-all cursor-pointer hover:border-border/80 hover:shadow-sm text-left"
+                    >
+                      <div className="flex items-center gap-3 min-w-0 flex-1">
+                        <Activity className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                        <p className="text-sm font-medium text-foreground truncate">
+                          {system.name}
+                        </p>
+                      </div>
+                      <ExtensionSlot
+                        slot={SystemStateBadgesSlot}
+                        context={{ system }}
+                      />
+                      <ChevronRight className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                    </button>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className="space-y-8 animate-in fade-in duration-500">
+        {/* Overview Section */}
+        <section>
+          <SectionHeader
+            title="Overview"
+            icon={<Activity className="w-5 h-5" />}
+          />
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <StatusCard
+              title="Total Systems"
+              value={loading ? "..." : <AnimatedCounter value={systemsCount} />}
+              description="Monitored systems in your catalog"
+              icon={<Server className="w-4 h-4" />}
+            />
+
+            <StatusCard
+              variant={activeIncidentsCount > 0 ? "gradient" : "default"}
+              title="Active Incidents"
+              value={
+                loading ? (
+                  "..."
+                ) : (
+                  <AnimatedCounter value={activeIncidentsCount} />
+                )
+              }
+              description={
+                activeIncidentsCount === 0
+                  ? "All systems operating normally"
+                  : "Unresolved issues requiring attention"
+              }
+              icon={<AlertTriangle className="w-4 h-4" />}
+            />
+
+            <StatusCard
+              title="Active Maintenances"
+              value={
+                loading ? (
+                  "..."
+                ) : (
+                  <AnimatedCounter value={activeMaintenancesCount} />
+                )
+              }
+              description={
+                activeMaintenancesCount === 0
+                  ? "No scheduled maintenance"
+                  : "Ongoing or scheduled maintenance windows"
+              }
+              icon={<Wrench className="w-4 h-4" />}
+            />
+          </div>
+        </section>
+
+        {/* Terminal Feed and System Groups - Two Column Layout */}
+        <div className="grid gap-8 lg:grid-cols-3">
+          {/* Terminal Feed */}
+          <section className="lg:col-span-1">
+            <SectionHeader
+              title="Recent Activity"
+              icon={<Terminal className="w-5 h-5" />}
+            />
+            <TerminalFeed
+              entries={terminalEntries}
+              maxEntries={MAX_TERMINAL_ENTRIES}
+              maxHeight="350px"
+              title="checkstack status --watch"
+            />
+          </section>
+
+          {/* System Groups */}
+          <section className="lg:col-span-2">
+            <SectionHeader
+              title="System Groups"
+              icon={<LayoutGrid className="w-5 h-5" />}
+            />
+            {renderGroupsContent()}
+          </section>
+        </div>
+      </div>
+    </>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,20 @@
+import { FrontendPlugin, DashboardSlot } from "@checkstack/frontend-api";
+import { definePluginMetadata } from "@checkstack/common";
+import { Dashboard } from "./Dashboard";
+
+const pluginMetadata = definePluginMetadata({
+  pluginId: "dashboard",
+});
+
+export const dashboardPlugin: FrontendPlugin = {
+  metadata: pluginMetadata,
+  extensions: [
+    {
+      id: "dashboard-main",
+      slot: DashboardSlot,
+      component: Dashboard as React.ComponentType<unknown>,
+    },
+  ],
+};
+
+export default dashboardPlugin;

package/tsconfig.json

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