@checkmate-monitor/dashboard-frontend 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# @checkmate-monitor/dashboard-frontend
+
+## 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]
+  - @checkmate-monitor/maintenance-common@0.1.0
+  - @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/incident-common@0.1.0
+  - @checkmate-monitor/healthcheck-common@0.1.0
+  - @checkmate-monitor/auth-frontend@0.1.0
+  - @checkmate-monitor/signal-frontend@0.1.0
+  - @checkmate-monitor/catalog-frontend@0.0.2
+  - @checkmate-monitor/command-common@0.0.2
+  - @checkmate-monitor/command-frontend@0.0.2
+  - @checkmate-monitor/frontend-api@0.0.2

package/package.json

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

package/src/Dashboard.tsx

@@ -0,0 +1,418 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  useApi,
+  rpcApiRef,
+  ExtensionSlot,
+} from "@checkmate-monitor/frontend-api";
+import { catalogApiRef } from "@checkmate-monitor/catalog-frontend";
+import {
+  catalogRoutes,
+  SystemStateBadgesSlot,
+  System,
+  Group,
+} from "@checkmate-monitor/catalog-common";
+import { resolveRoute } from "@checkmate-monitor/common";
+import {
+  NotificationApi,
+  type EnrichedSubscription,
+} from "@checkmate-monitor/notification-common";
+import { IncidentApi } from "@checkmate-monitor/incident-common";
+import { MaintenanceApi } from "@checkmate-monitor/maintenance-common";
+import { HEALTH_CHECK_RUN_COMPLETED } from "@checkmate-monitor/healthcheck-common";
+import { useSignal } from "@checkmate-monitor/signal-frontend";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  SectionHeader,
+  StatusCard,
+  EmptyState,
+  LoadingSpinner,
+  SubscribeButton,
+  useToast,
+  CommandPalette,
+  AnimatedCounter,
+  TerminalFeed,
+  type TerminalEntry,
+} from "@checkmate-monitor/ui";
+import {
+  LayoutGrid,
+  Server,
+  Activity,
+  ChevronRight,
+  AlertTriangle,
+  Wrench,
+  Terminal,
+} from "lucide-react";
+import { authApiRef } from "@checkmate-monitor/auth-frontend/api";
+import { SearchDialog } from "./components/SearchDialog";
+
+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[]>([]);
+
+  // Search dialog state
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  // 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)
+      );
+    }
+  );
+
+  // Global keyboard shortcut for search
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setSearchOpen(true);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  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 (
+    <>
+      {/* Search Dialog */}
+      <SearchDialog open={searchOpen} onOpenChange={setSearchOpen} />
+
+      <div className="space-y-8 animate-in fade-in duration-500">
+        {/* Command Palette Hero */}
+        <section>
+          <CommandPalette
+            onClick={() => setSearchOpen(true)}
+            placeholder="Search systems, incidents, or run commands..."
+          />
+        </section>
+
+        {/* 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="checkmate 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/components/SearchDialog.tsx

@@ -0,0 +1,241 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { Dialog, DialogContent, Input } from "@checkmate-monitor/ui";
+import {
+  useDebouncedSearch,
+  useFormatShortcut,
+} from "@checkmate-monitor/command-frontend";
+import type { SearchResult } from "@checkmate-monitor/command-common";
+import {
+  Activity,
+  Search,
+  ArrowUp,
+  ArrowDown,
+  CornerDownLeft,
+  AlertCircle,
+  Wrench,
+  Command,
+} from "lucide-react";
+
+interface SearchDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+// Icon mapping for different result types
+const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
+  Activity,
+  AlertCircle,
+  Wrench,
+  Command,
+};
+
+export const SearchDialog: React.FC<SearchDialogProps> = ({
+  open,
+  onOpenChange,
+}) => {
+  const navigate = useNavigate();
+  const formatShortcut = useFormatShortcut();
+  const { results, loading, search, reset } = useDebouncedSearch(300);
+
+  const [query, setQuery] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Trigger search when dialog opens or query changes
+  useEffect(() => {
+    if (open) {
+      search(query);
+      // Focus input after dialog opens
+      setTimeout(() => inputRef.current?.focus(), 50);
+    } else {
+      // Reset state when dialog closes
+      setQuery("");
+      setSelectedIndex(0);
+      reset();
+    }
+  }, [open, query, search, reset]);
+
+  // Group results by category
+  const groupedResults: Record<string, SearchResult[]> = {};
+  for (const result of results) {
+    const category = result.category;
+    if (!groupedResults[category]) {
+      groupedResults[category] = [];
+    }
+    groupedResults[category].push(result);
+  }
+
+  // Flatten for navigation
+  const flatResults = Object.values(groupedResults).flat();
+
+  // Reset selection when results change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [results]);
+
+  const handleSelect = useCallback(
+    (result: SearchResult) => {
+      onOpenChange(false);
+      if (result.route) {
+        navigate(result.route);
+      }
+    },
+    [navigate, onOpenChange]
+  );
+
+  // Keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          setSelectedIndex((prev) =>
+            Math.min(prev + 1, flatResults.length - 1)
+          );
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          setSelectedIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          if (flatResults[selectedIndex]) {
+            handleSelect(flatResults[selectedIndex]);
+          }
+          break;
+        }
+        case "Escape": {
+          e.preventDefault();
+          onOpenChange(false);
+          break;
+        }
+      }
+    },
+    [flatResults, selectedIndex, handleSelect, onOpenChange]
+  );
+
+  // Render a single result item
+  const renderResult = (result: SearchResult, globalIndex: number) => {
+    const IconComponent = iconMap[result.iconName ?? ""] ?? Activity;
+    const isSelected = globalIndex === selectedIndex;
+
+    return (
+      <button
+        key={result.id}
+        onClick={() => handleSelect(result)}
+        onMouseEnter={() => setSelectedIndex(globalIndex)}
+        className={`w-full flex items-center gap-3 px-4 py-2 text-left transition-colors ${
+          isSelected
+            ? "bg-primary/10 text-foreground"
+            : "text-muted-foreground hover:bg-muted/50"
+        }`}
+      >
+        <IconComponent className="w-4 h-4 flex-shrink-0" />
+        <div className="flex-1 min-w-0">
+          <span className="block truncate">{result.title}</span>
+          {result.subtitle && (
+            <span className="block text-xs text-muted-foreground truncate">
+              {result.subtitle}
+            </span>
+          )}
+        </div>
+        {/* Show shortcuts for commands */}
+        {result.type === "command" &&
+          result.shortcuts &&
+          result.shortcuts.length > 0 && (
+            <div className="flex gap-1">
+              {result.shortcuts.slice(0, 1).map((shortcut) => (
+                <kbd
+                  key={shortcut}
+                  className="px-1.5 py-0.5 text-xs rounded bg-muted border border-border font-mono"
+                >
+                  {formatShortcut(shortcut)}
+                </kbd>
+              ))}
+            </div>
+          )}
+        {isSelected && (
+          <CornerDownLeft className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+        )}
+      </button>
+    );
+  };
+
+  // Track global index for selection
+  let globalIndex = 0;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        size="lg"
+        className="p-0 gap-0 overflow-hidden"
+        onKeyDown={handleKeyDown}
+      >
+        {/* Search input */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
+          <Search className="w-5 h-5 text-muted-foreground flex-shrink-0" />
+          <Input
+            ref={inputRef}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search commands and systems..."
+            className="border-0 bg-transparent focus-visible:ring-0 px-0 text-base"
+          />
+        </div>
+
+        {/* Results */}
+        <div className="max-h-[300px] overflow-y-auto py-2">
+          {loading ? (
+            <div className="px-4 py-8 text-center text-muted-foreground">
+              Searching...
+            </div>
+          ) : flatResults.length === 0 ? (
+            <div className="px-4 py-8 text-center text-muted-foreground">
+              {query ? "No results found" : "Start typing to search..."}
+            </div>
+          ) : (
+            Object.entries(groupedResults).map(
+              ([category, categoryResults]) => (
+                <div key={category}>
+                  {/* Category header */}
+                  <div className="px-4 py-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider bg-muted/30">
+                    {category} ({categoryResults.length})
+                  </div>
+                  {/* Category results */}
+                  {categoryResults.map((result) => {
+                    const element = renderResult(result, globalIndex);
+                    globalIndex++;
+                    return element;
+                  })}
+                </div>
+              )
+            )
+          )}
+        </div>
+
+        {/* Footer with keyboard hints */}
+        <div className="flex items-center gap-4 px-4 py-2 border-t border-border bg-muted/30 text-xs text-muted-foreground">
+          <div className="flex items-center gap-1">
+            <ArrowUp className="w-3 h-3" />
+            <ArrowDown className="w-3 h-3" />
+            <span>Navigate</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <CornerDownLeft className="w-3 h-3" />
+            <span>Select</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <kbd className="px-1 rounded bg-muted border border-border font-mono">
+              esc
+            </kbd>
+            <span>Close</span>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,20 @@
+import { FrontendPlugin, DashboardSlot } from "@checkmate-monitor/frontend-api";
+import { definePluginMetadata } from "@checkmate-monitor/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": "@checkmate-monitor/tsconfig/frontend.json",
+  "include": [
+    "src"
+  ]
+}