@checkstack/slo-frontend 0.4.7 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,108 @@
 # @checkstack/slo-frontend
 
+## 0.5.0
+
+### Minor Changes
+
+- 9dcc848: Redesign the dashboard as an extensible "needs attention" overview, and normalize system state badges.
+
+  The dashboard now surfaces ONLY systems that need attention (degraded, unhealthy, breaching/at-risk SLO, under an incident or active maintenance, anomalous, or with a dependency problem) and hides everything healthy. A compact header summarises fleet health and filters by severity; each problem renders as an elevated card with one row per issue that deep-links to where the issue originates. A calm "all clear" state shows when nothing needs attention, a live "recent activity" feed sits below, and a "View catalog" link replaces the duplicated system list.
+
+  New platform contract `SystemSignalsSlot` (`@checkstack/catalog-common`): a headless, render-once slot where any plugin bulk-fetches and reports structured `SystemSignal[]` per system via `onSignals(sourceId, map)`. The dashboard aggregates every source agnostic to which plugins contribute; each core reliability plugin (healthcheck, incident, SLO, maintenance, anomaly, dependency) ships a filler, and third-party plugins add new per-system state the same way with no dashboard change. Signals carry an `iconName` rendered via `DynamicIcon` so the contract stays React-free. The dashboard's old summary tiles and overview sheets are removed, so it no longer depends on those plugins' packages. The group "subscribe" control moved onto the catalog browse page's group headers.
+
+  System state badges are normalized into one icon-only `@checkstack/ui` `StatusBadge` primitive - a small tinted icon chip with the full label on hover/focus (and via `aria-label`). Each signal uses its feature's navbar icon (health = Activity, incident = AlertTriangle, SLO = Target, maintenance = Wrench, dependency = GitBranch; anomaly = ChartSpline). Badges self-sort by severity via CSS `order` (error -> warn -> info), tooltips are scoped to a named group, and in catalog browse rows the cluster moved to the right edge.
+
+  This is a beta minor.
+
+- 9dcc848: Cut initial-load JS: lazy plugin contributions, a hardened lazy-by-default contribution contract, on-demand Monaco, and a lighter icon/chart load.
+
+  - Lazy plugin route pages: each plugin's route `element` references a `React.lazy`-wrapped page rendered inside a shared `<Suspense>` boundary. Plugins still register synchronously, so nav, slots, commands, API factories, and `foreignSignals` are available on first paint. This moves ~37 route-page chunks (~600 KB) out of the entry; the entry chunk drops from ~2.4 MB to ~190 KB. Auth flow pages stay eager. The `@checkstack/scripts` scaffold template generates lazy route pages too.
+  - Hardened contribution contract (BREAKING, frontend plugin contract): plugins declare contributions lazily and let the framework own code-splitting, Suspense, and per-plugin error isolation. Routes use `load: () => import("./Page").then((m) => ({ default: m.Page }))` instead of `element: <Page />` (`element` is still accepted for the rare page that must paint without a chunk fetch; provide exactly one). Slot extensions accept either an eager `component` or a lazy `load`; new `getLazyContribution` + `ExtensionComponent` exports from `@checkstack/frontend-api` render either kind. This also fixes runtime-installed plugins: `ExtensionSlot` subscribes to the plugin registry, and the API registry rebuilds when the plugin set changes (`getPlugins()` returns an immutable snapshot via `useSyncExternalStore`). A per-plugin error boundary contains a bad contribution.
+  - On-demand Monaco: the `@checkstack/ui` barrel no longer pulls the `@codingame/*` / `monaco-languageclient` stack into the initial load. `CodeEditor` lazy-loads its Monaco-backed editor behind `React.lazy` + Suspense, `validateTypeScriptSources` imports the editor API via in-body `await import(...)`, and the "vscode services ready" signal moved to a Monaco-free module. The ~10 MB editor body loads only when a `CodeEditor` mounts. A `react-vendor` `manualChunks` split was added for stable vendor caching.
+  - lucide-react 1.x + lighter icons/charts (BREAKING for icon consumers): lucide-react unified from three drifting ranges to `^1.17.0`. lucide v1 removed brand icons, so the GitHub/GitLab marks are vendored in `@checkstack/ui` (`GithubIcon`, `GitlabIcon`, `brandIcons`); a new `IconName` type (`LucideIconName | BrandIconName`) in `@checkstack/common` is canonical, accepted by `AuthStrategy.icon` and the card components, so data-driven brand names keep working. `DynamicIcon` no longer eagerly imports lucide's ~1600-icon map (~1 MB) - it lives in a `React.lazy` `iconRegistry` chunk fetched on first data-driven render, while statically named-imported icons tree-shake normally. The recharts-backed health-check charts (~300 KB) and the `HealthCheckSystemOverview` drawer leave the initial load.
+
+  BREAKING CHANGES:
+
+  - Frontend plugin contract: routes/slot contributions are lazy-by-default (`load` instead of `element`/eager elements) as described above.
+  - Any external consumer importing a brand icon from `lucide-react` (e.g. `import { Github } from "lucide-react"`) must switch to the vendored `@checkstack/ui` brand icons or a custom SVG.
+
+  This is a beta minor.
+
+- 9dcc848: Align workspace dependency versions and migrate React Router to v7.
+
+  BREAKING CHANGES (React Router v7): All frontend packages now depend on `react-router-dom@^7.16.0`. Previously the workspace declared four divergent ranges (`^6.20.0`, `^6.22.0`, `^7.1.1`, `^7.14.2`), which resolved both `react-router@6` and `react-router@7` into a single bundle. Everything is now unified on v7. The public imports the app uses (`BrowserRouter`, `Routes`, `Route`, `Link`, `NavLink`, `MemoryRouter`, `useNavigate`, `useParams`, `useSearchParams`, `useLocation`) are unchanged between v6 and v7, so no source rewrites were required - but any out-of-tree plugin still on react-router v6 should upgrade to v7 (see the React Router v6 -> v7 upgrade guide) to share the host's single router instance via the import map.
+
+  Other unified ranges (no API change): `react` -> `^18.3.1`, the `@orpc/*` family (`contract`, `server`, `client`, `tanstack-query`, `openapi`, `zod`) -> `^1.14.4`, and `better-auth` -> `^1.6.13`.
+
+  Removed the pre-rename `@orpc/react-query` leftover from `@checkstack/frontend-api`; its `createRouterUtils` / `RouterUtils` / `ProcedureUtils` now come from `@orpc/tanstack-query` (the package already in use).
+
+  Stale in-range runtime deps pulled up to current published versions: `hono` `^4.12.23`, `@tanstack/react-query` (+devtools) `^5.100.14`, `date-fns` `^4.4.0`, `jose` `^6.2.3`, `tar` `^7.5.16`, `semver` `^7.8.1`, `@xyflow/react` `^12.11.0`.
+
+### Patch Changes
+
+- 9dcc848: Move primary navigation into a left sidebar, and serve the user guide in-app.
+
+  Feature navigation (a ~20-item user-menu dropdown) now lives in a persistent left sidebar (a slide-over drawer on mobile), grouped by section with the active route highlighted; the user menu keeps only account actions. A route opts into the sidebar with new `nav` metadata (`{ group, icon, label?, order?, accessRule? }`) on its registration, co-located with path + access + title. The sidebar filters entries with the same access check as page guards. `@checkstack/common` gains `isAccessRuleSatisfied` and a centralized set of in-app doc slugs (`APP_DOC_SLUGS` + `docsPath`, with a test asserting each resolves to a real docs page); `@checkstack/auth-frontend` exports `useAccessRules`.
+
+  The backend now serves the Astro Starlight docs build same-origin at `/checkstack/*` (the same artifact deployed to GitHub Pages), so the user guide is available inside the app including for self-hosted / air-gapped installs (served verbatim, no rebuild, no link rewriting; from `CHECKSTACK_DOCS_DIST`, before the SPA catch-all, degrading gracefully when absent; the Docker image builds and ships `docs/dist`; Vite proxies `/checkstack` in dev). The "Docs" link is a shell-owned external sidebar entry under the Documentation group (book icon), opening `/checkstack/user-guide/` in a new tab; the group renders even when no plugin route contributes to it.
+
+  BREAKING (plugin authors): `UserMenuItemsSlot` is no longer the way to add navigation - registering a top user-menu item no longer surfaces it anywhere. Add `nav` to the page's route instead. `UserMenuItemsBottomSlot` (account items) is unchanged. All bundled plugins have been migrated.
+
+  This is a beta minor.
+
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+- Updated dependencies [9dcc848]
+  - @checkstack/ui@1.13.0
+  - @checkstack/healthcheck-common@1.5.0
+  - @checkstack/catalog-common@2.3.0
+  - @checkstack/common@0.13.0
+  - @checkstack/dashboard-frontend@0.8.0
+  - @checkstack/frontend-api@0.7.0
+  - @checkstack/tips-frontend@0.3.0
+  - @checkstack/slo-common@0.5.0
+  - @checkstack/dependency-common@1.2.0
+  - @checkstack/signal-frontend@0.2.0
+
+## 0.4.8
+
+### Patch Changes
+
+- Updated dependencies [b995afb]
+- Updated dependencies [270ef29]
+- Updated dependencies [270ef29]
+- Updated dependencies [270ef29]
+- Updated dependencies [270ef29]
+- Updated dependencies [b995afb]
+- Updated dependencies [b995afb]
+- Updated dependencies [b995afb]
+- Updated dependencies [b995afb]
+- Updated dependencies [b995afb]
+- Updated dependencies [b995afb]
+- Updated dependencies [270ef29]
+- Updated dependencies [270ef29]
+- Updated dependencies [b995afb]
+- Updated dependencies [b995afb]
+- Updated dependencies [b995afb]
+- Updated dependencies [270ef29]
+- Updated dependencies [b995afb]
+- Updated dependencies [270ef29]
+  - @checkstack/ui@1.12.0
+  - @checkstack/healthcheck-common@1.4.0
+  - @checkstack/dashboard-frontend@0.7.8
+  - @checkstack/tips-frontend@0.2.7
+
 ## 0.4.7
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/slo-frontend",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,26 +13,26 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/catalog-common": "2.2.2",
-    "@checkstack/common": "0.11.0",
-    "@checkstack/dashboard-frontend": "0.7.6",
-    "@checkstack/dependency-common": "1.1.2",
-    "@checkstack/frontend-api": "0.5.2",
-    "@checkstack/healthcheck-common": "1.2.0",
-    "@checkstack/signal-frontend": "0.1.4",
-    "@checkstack/slo-common": "0.4.1",
-    "@checkstack/tips-frontend": "0.2.5",
-    "@checkstack/ui": "1.10.0",
-    "date-fns": "^4.1.0",
-    "lucide-react": "^0.344.0",
-    "react": "^18.2.0",
-    "react-router-dom": "^6.20.0",
+    "@checkstack/catalog-common": "2.2.3",
+    "@checkstack/common": "0.12.0",
+    "@checkstack/dashboard-frontend": "0.7.8",
+    "@checkstack/dependency-common": "1.1.3",
+    "@checkstack/frontend-api": "0.6.0",
+    "@checkstack/healthcheck-common": "1.4.0",
+    "@checkstack/signal-frontend": "0.1.5",
+    "@checkstack/slo-common": "0.4.2",
+    "@checkstack/tips-frontend": "0.2.7",
+    "@checkstack/ui": "1.12.0",
+    "date-fns": "^4.4.0",
+    "lucide-react": "^1.17.0",
+    "react": "^18.3.1",
+    "react-router-dom": "^7.16.0",
     "recharts": "^3.8.1"
   },
   "devDependencies": {
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
     "@checkstack/tsconfig": "0.0.7",
-    "@checkstack/scripts": "0.3.3"
+    "@checkstack/scripts": "0.3.4"
   }
 }

package/src/components/SloSignalsFiller.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useMemo } from "react";
+import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
+import { resolveRoute } from "@checkstack/common";
+import {
+  SystemSignalsSlot,
+  type SystemSignal,
+  type SystemSignalsMap,
+} from "@checkstack/catalog-common";
+import { SloApi, sloRoutes } from "@checkstack/slo-common";
+
+type Props = SlotContext<typeof SystemSignalsSlot>;
+
+const SOURCE_ID = "slo";
+const AT_RISK_BUDGET_PERCENT = 20;
+
+/**
+ * Reports breaching, degraded, and at-risk SLOs as dashboard signals.
+ * Bulk-fetches objectives for all overview systems and emits one signal per
+ * objective that needs attention, deep-linking to that objective's detail page.
+ * Headless filler for {@link SystemSignalsSlot}.
+ */
+export const SloSignalsFiller: React.FC<Props> = ({ systemIds, onSignals }) => {
+  const sloClient = usePluginClient(SloApi);
+
+  const { data } = sloClient.getBulkObjectivesForSystems.useQuery(
+    { systemIds },
+    { enabled: systemIds.length > 0, staleTime: 30_000 },
+  );
+
+  const signals = useMemo<SystemSignalsMap>(() => {
+    const result: SystemSignalsMap = {};
+    if (!data) return result;
+
+    for (const systemId of systemIds) {
+      const objectives = data.systems[systemId] ?? [];
+      const systemSignals: SystemSignal[] = [];
+
+      for (const { objective, status } of objectives) {
+        let tone: SystemSignal["tone"];
+        let label: string;
+        if (status.isBreaching) {
+          tone = "error";
+          label = "SLO breaching";
+        } else if (status.hasOpenDowntime) {
+          tone = "warn";
+          label = "SLO degraded";
+        } else if (
+          status.errorBudgetRemainingPercent <= AT_RISK_BUDGET_PERCENT
+        ) {
+          tone = "warn";
+          label = "SLO at risk";
+        } else {
+          continue;
+        }
+
+        systemSignals.push({
+          source: SOURCE_ID,
+          tone,
+          label,
+          detail: `${objective.target}% target over ${objective.windowDays}d`,
+          href: resolveRoute(sloRoutes.routes.detail, {
+            sloId: objective.id,
+          }),
+          iconName: "Target",
+        });
+      }
+
+      if (systemSignals.length > 0) result[systemId] = systemSignals;
+    }
+    return result;
+  }, [data, systemIds]);
+
+  useEffect(() => {
+    onSignals(SOURCE_ID, signals);
+  }, [signals, onSignals]);
+
+  return null;
+};

package/src/components/SystemSloBadge.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import { usePluginClient, type SlotContext } from "@checkstack/frontend-api";
 import { SystemStateBadgesSlot } from "@checkstack/catalog-common";
 import { SloApi } from "../api";
-import { Badge } from "@checkstack/ui";
+import { StatusBadge } from "@checkstack/ui";
+import { Target } from "lucide-react";
 
 type Props = SlotContext<typeof SystemStateBadgesSlot>;
 
@@ -30,15 +31,15 @@ export const SystemSloBadge: React.FC<Props> = ({ system }) => {
   );
 
   if (hasBreaching) {
-    return <Badge variant="destructive">SLO Breaching</Badge>;
+    return <StatusBadge tone="error" icon={Target} label="SLO breaching" />;
   }
 
   if (hasDegraded) {
-    return <Badge variant="warning">SLO Degraded</Badge>;
+    return <StatusBadge tone="warn" icon={Target} label="SLO degraded" />;
   }
 
   if (hasAtRisk) {
-    return <Badge variant="warning">SLO At Risk</Badge>;
+    return <StatusBadge tone="warn" icon={Target} label="SLO at risk" />;
   }
 
   return;

package/src/index.tsx

@@ -1,18 +1,15 @@
 import {
   createFrontendPlugin,
   createSlotExtension,
-  UserMenuItemsSlot,
 } from "@checkstack/frontend-api";
+import { Target, Settings } from "lucide-react";
 import { sloRoutes, pluginMetadata, sloAccess } from "@checkstack/slo-common";
-import { SloOverviewPage } from "./pages/SloOverviewPage";
-import { SloConfigPage } from "./pages/SloConfigPage";
-import { SloDetailPage } from "./pages/SloDetailPage";
 import { SystemSloPanel } from "./components/SystemSloPanel";
 import { SystemSloBadge } from "./components/SystemSloBadge";
-import { SloMenuItems } from "./components/SloMenuItems";
 import {
   SystemDetailsTopSlot,
   SystemStateBadgesSlot,
+  SystemSignalsSlot,
 } from "@checkstack/catalog-common";
 
 export default createFrontendPlugin({
@@ -20,28 +17,40 @@ export default createFrontendPlugin({
   routes: [
     {
       route: sloRoutes.routes.overview,
-      element: <SloOverviewPage />,
+      load: () =>
+        import("./pages/SloOverviewPage").then((m) => ({
+          default: m.SloOverviewPage,
+        })),
       title: "SLO Dashboard",
+      nav: {
+        group: "Reliability",
+        icon: Target,
+      },
     },
     {
       route: sloRoutes.routes.config,
-      element: <SloConfigPage />,
+      load: () =>
+        import("./pages/SloConfigPage").then((m) => ({
+          default: m.SloConfigPage,
+        })),
       title: "SLO Management",
       accessRule: sloAccess.slo.manage,
+      nav: {
+        group: "Reliability",
+        icon: Settings,
+      },
     },
     {
       route: sloRoutes.routes.detail,
-      element: <SloDetailPage />,
+      load: () =>
+        import("./pages/SloDetailPage").then((m) => ({
+          default: m.SloDetailPage,
+        })),
       title: "SLO Detail",
     },
   ],
   apis: [],
   extensions: [
-    createSlotExtension(UserMenuItemsSlot, {
-      id: "slo.user-menu.items",
-      component: SloMenuItems,
-      metadata: { group: "Reliability" },
-    }),
     createSlotExtension(SystemStateBadgesSlot, {
       id: "slo.system-state-badge",
       component: SystemSloBadge,
@@ -50,5 +59,12 @@ export default createFrontendPlugin({
       id: "slo.system-details-top.panel",
       component: SystemSloPanel,
     }),
+    createSlotExtension(SystemSignalsSlot, {
+      id: "slo.dashboard.signals",
+      load: () =>
+        import("./components/SloSignalsFiller").then((m) => ({
+          default: m.SloSignalsFiller,
+        })),
+    }),
   ],
 });

package/src/components/SloMenuItems.tsx

@@ -1,30 +0,0 @@
-import { Link } from "react-router-dom";
-import { Target, Settings } from "lucide-react";
-import type { UserMenuItemsContext } from "@checkstack/frontend-api";
-import { DropdownMenuItem } from "@checkstack/ui";
-import { resolveRoute } from "@checkstack/common";
-import { sloRoutes, sloAccess, pluginMetadata } from "@checkstack/slo-common";
-
-export const SloMenuItems = ({
-  accessRules: userPerms,
-}: UserMenuItemsContext) => {
-  const qualifiedId = `${pluginMetadata.pluginId}.${sloAccess.slo.manage.id}`;
-  const canManage = userPerms.includes("*") || userPerms.includes(qualifiedId);
-
-  return (
-    <>
-      <Link to={resolveRoute(sloRoutes.routes.overview)}>
-        <DropdownMenuItem icon={<Target className="w-4 h-4" />}>
-          SLO Dashboard
-        </DropdownMenuItem>
-      </Link>
-      {canManage && (
-        <Link to={resolveRoute(sloRoutes.routes.config)}>
-          <DropdownMenuItem icon={<Settings className="w-4 h-4" />}>
-            SLO Management
-          </DropdownMenuItem>
-        </Link>
-      )}
-    </>
-  );
-};