refactor(client): drop rationale comments, name the icon control width

Review feedback from @malenacaroline on #3915: the theme pass carried too
many comments, and they explain decisions rather than code.

Remove 64 lines of rationale prose across 12 files. Everything taken out
described *why* a value was chosen - which palette entry MUI derives what
from, why a weight stays put, why a gradient lifts off `main`. That belongs
in the PR description and commit history, not in an `sx` block where it
goes stale the moment the palette moves.

Two comments deliberately stay:
- `StatusBox`: alpha() *replaces* the alpha channel rather than multiplying,
  so the faint grid depends on `divider` being an opaque hex. That is a live
  trap, not a design note.
- `Table`: the `isRowSelected` JSDoc documents a real limitation of the prop
  (desktop table only), which a caller needs to know.

Section labels (// Blues, // Hooks) are untouched.

Also name the last bare number beside CONTROL_HEIGHT: the header icon links
were `width: 36` next to `height: CONTROL_HEIGHT`. Now ICON_CONTROL_WIDTH.
The other two `width: 36` sites are a switch track and a logo tile - same
number, unrelated concepts, left alone.

Gates: tsc clean, build ✓, format-check clean, lint unchanged from develop
(12 errors, all pre-existing in untouched files).

.github/CODEOWNERS

@@ -1 +1 @@
-
+*     @ajhollid @mohicody @Br0wnHammer @Owaiseimdad @karenvicent @shanikauwu1

README.md

@@ -36,7 +36,8 @@
 
 [![Run on PikaPods](https://www.pikapods.com/static/run-button.svg)](https://www.pikapods.com/pods?run=checkmate)
 
-<img width="1461" height="853" alt="image" src="https://github.com/user-attachments/assets/d5ee1a4e-9db9-47cc-ad47-e1ba88a9d796" />
+
+<img width="1703" height="1041" alt="image" src="https://github.com/user-attachments/assets/0f4dcf38-9b42-4b84-8633-ff34778df1a8" />
 </p>
 <br>
 
@@ -211,7 +212,7 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
 <a id="contributing"></a>
 ## Contributing
 
-We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer), [Malena](https://github.com/malenacaroline) and [Mert](https://github.com/mertssmnoglu) helping individuals and businesses monitor their infra and servers.
+We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer) and [Mert](https://github.com/mertssmnoglu) helping individuals and businesses monitor their infra and servers.
 
 We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned almost 11K+ stars and attracted 150+ contributors from around the globe.
 

client/package-lock.json

@@ -9,9 +9,6 @@
 			"version": "3.11.0",
 			"dependencies": {
 				"@csstools/css-tokenizer": "^3.0.4",
-				"@dnd-kit/core": "^6.3.1",
-				"@dnd-kit/sortable": "^10.0.0",
-				"@dnd-kit/utilities": "^3.2.2",
 				"@emotion/react": "^11.13.3",
 				"@emotion/styled": "^11.13.0",
 				"@fontsource-variable/geist": "^5.3.0",
@@ -365,59 +362,6 @@
 				"node": ">=14"
 			}
 		},
-		"node_modules/@dnd-kit/accessibility": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
-			"integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
-			"license": "MIT",
-			"dependencies": {
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"react": ">=16.8.0"
-			}
-		},
-		"node_modules/@dnd-kit/core": {
-			"version": "6.3.1",
-			"resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
-			"integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@dnd-kit/accessibility": "^3.1.1",
-				"@dnd-kit/utilities": "^3.2.2",
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"react": ">=16.8.0",
-				"react-dom": ">=16.8.0"
-			}
-		},
-		"node_modules/@dnd-kit/sortable": {
-			"version": "10.0.0",
-			"resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
-			"integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
-			"license": "MIT",
-			"dependencies": {
-				"@dnd-kit/utilities": "^3.2.2",
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"@dnd-kit/core": "^6.3.0",
-				"react": ">=16.8.0"
-			}
-		},
-		"node_modules/@dnd-kit/utilities": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
-			"integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
-			"license": "MIT",
-			"dependencies": {
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"react": ">=16.8.0"
-			}
-		},
 		"node_modules/@emotion/babel-plugin": {
 			"version": "11.13.5",
 			"license": "MIT",

client/package.json

@@ -12,17 +12,13 @@
 		"lint-strict": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",
 		"preview": "vite preview",
 		"format": "prettier --write .",
-		"format-check": "prettier --check .",
-		"compile": "tsc -b"
+		"format-check": "prettier --check ."
 	},
 	"lint-staged": {
 		"**/*": "prettier --write --ignore-unknown"
 	},
 	"dependencies": {
 		"@csstools/css-tokenizer": "^3.0.4",
-		"@dnd-kit/core": "^6.3.1",
-		"@dnd-kit/sortable": "^10.0.0",
-		"@dnd-kit/utilities": "^3.2.2",
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
 		"@fontsource-variable/geist": "^5.3.0",

client/src/Components/design-elements/BaseBox.tsx

@@ -1,12 +1,10 @@
 import Box, { type BoxProps } from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
-import { forwardRef } from "react";
 
-export const BaseBox = forwardRef<HTMLDivElement, BoxProps>(({ sx, ...rest }, ref) => {
+export const BaseBox = ({ sx, ...rest }: BoxProps) => {
 	const theme = useTheme();
 	return (
 		<Box
-			ref={ref}
 			{...rest}
 			sx={{
 				backgroundColor: theme.palette.background.paper,
@@ -18,6 +16,4 @@ export const BaseBox = forwardRef<HTMLDivElement, BoxProps>(({ sx, ...rest }, re
 			}}
 		/>
 	);
-});
-
-BaseBox.displayName = "BaseBox";
+};

client/src/Components/design-elements/PageHeader.tsx

@@ -6,7 +6,7 @@ import { Link as RouterLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material/styles";
 import { ChevronLeft, HelpCircle, FileText, Code } from "lucide-react";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
+import { CONTROL_HEIGHT, ICON_CONTROL_WIDTH } from "@/Utils/Theme/constants";
 
 import type { ReactNode } from "react";
 
@@ -142,8 +142,8 @@ export const PageHeader = ({
 								display: "inline-flex",
 								alignItems: "center",
 								justifyContent: "center",
-								width: 36,
-								height: INPUT_BASE_HEIGHT,
+								width: ICON_CONTROL_WIDTH,
+								height: CONTROL_HEIGHT,
 								color: theme.palette.text.secondary,
 								borderRight:
 									idx < linkItems.length - 1

client/src/Components/design-elements/SkeletonCard.tsx

@@ -1,5 +1,5 @@
 import { Box, Stack, useTheme } from "@mui/material";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
+import { CONTROL_HEIGHT } from "@/Utils/Theme/constants";
 
 interface SkeletonCardProps {
 	width?: number | string | { xs?: number | string; md?: number | string };
@@ -45,7 +45,7 @@ export const SkeletonCard = ({
 
 	const blockStyle = {
 		width: 55,
-		height: INPUT_BASE_HEIGHT,
+		height: CONTROL_HEIGHT,
 		borderRadius: theme.shape.borderRadius,
 		background: theme.palette.secondary.main,
 		border: `1px solid ${theme.palette.divider}`,

client/src/Components/design-elements/StatusBox.tsx

@@ -33,6 +33,12 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => {
 				bottom={0}
 				sx={{
 					pointerEvents: "none",
+					// Deliberately far fainter than `divider` - this is texture
+					// behind the number, not a rule, and it must never compete
+					// with the box's own border. Note alpha() *replaces* the
+					// alpha channel, so this relies on `divider` being an opaque
+					// hex; if it ever goes translucent this gets stronger, not
+					// weaker.
 					backgroundImage: `
 						linear-gradient(${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px),
 						linear-gradient(90deg, ${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px)

client/src/Components/design-elements/Table.tsx

@@ -52,6 +52,11 @@ type DataTableProps<T extends { id?: string | number; _id?: string | number }> =
 	emptyViewText?: string;
 	emptyViewPositive?: boolean;
 	getRowSx?: (row: T) => SxProps<Theme>;
+	/**
+	 * Marks a row selected so it gets the shared selected + hover treatment.
+	 * Desktop table only - the small-screen card branch does not style
+	 * selection yet, same as `getRowSx`.
+	 */
 	isRowSelected?: (row: T) => boolean;
 };
 
@@ -81,21 +86,6 @@ export function DataTable<
 	};
 
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-
-	const hasTextSelectionWithin = (element: Element) => {
-		const selection = window.getSelection();
-		if (!selection || selection.isCollapsed || !selection.toString().trim()) {
-			return false;
-		}
-		return (
-			selection.anchorNode !== null &&
-			element.contains(
-				selection.anchorNode.nodeType === Node.TEXT_NODE
-					? selection.anchorNode.parentNode
-					: selection.anchorNode
-			)
-		);
-	};
 	const isInteractive = Boolean(onRowClick) || expandableRows;
 
 	if (data.length === 0 || headers.length === 0) {
@@ -117,10 +107,7 @@ export function DataTable<
 					keys.push(key);
 					return (
 						<Stack
-							onClick={(e) => {
-								if (hasTextSelectionWithin(e.currentTarget)) return;
-								if (onRowClick) onRowClick(row);
-							}}
+							onClick={() => (onRowClick ? onRowClick(row) : null)}
 							spacing={theme.spacing(LAYOUT.XS)}
 							sx={{
 								borderStyle: "solid",
@@ -233,6 +220,17 @@ export function DataTable<
 					"& .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root": {
 						borderBottom: "none",
 					},
+					"& .MuiTableBody-root .MuiTableRow-root.is-selected .MuiTableCell-root": {
+						backgroundColor: theme.palette.action.selected,
+					},
+					"& .MuiTableBody-root .MuiTableRow-root.is-clickable:hover .MuiTableCell-root":
+						{
+							backgroundColor: theme.palette.action.rowHover,
+						},
+					"& .MuiTableBody-root .MuiTableRow-root.is-selected.is-clickable:hover .MuiTableCell-root":
+						{
+							backgroundColor: theme.palette.action.selectedHover,
+						},
 				}}
 			>
 				<TableHead>
@@ -253,29 +251,21 @@ export function DataTable<
 					{data.map((row) => {
 						const key = row.id || row._id || Math.random();
 						const isExpanded = expanded === key;
-						const selected = isRowSelected?.(row);
 
 						return (
 							<Fragment key={key}>
 								<TableRow
+									className={[
+										isInteractive ? "is-clickable" : "",
+										isRowSelected?.(row) ? "is-selected" : "",
+									]
+										.filter(Boolean)
+										.join(" ")}
 									sx={{
 										cursor: isInteractive ? "pointer" : "default",
-										...(isInteractive && {
-											"&:hover .MuiTableCell-root": {
-												backgroundColor: selected
-													? theme.palette.action.selectedHover
-													: theme.palette.action.rowHover,
-											},
-										}),
-										...(selected && {
-											"& .MuiTableCell-root": {
-												backgroundColor: theme.palette.action.selected,
-											},
-										}),
 										...(getRowSx?.(row) as object),
 									}}
-									onClick={(e) => {
-										if (hasTextSelectionWithin(e.currentTarget)) return;
+									onClick={() => {
 										if (expandableRows) handleExpand(row);
 										else if (onRowClick) onRowClick(row);
 									}}

client/src/Components/design-elements/Tabs.tsx

@@ -2,7 +2,7 @@ import MuiTabs from "@mui/material/Tabs";
 import type { TabsProps } from "@mui/material/Tabs";
 import { useTheme } from "@mui/material/styles";
 import { typographyLevels } from "@/Utils/Theme/Palette";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
+import { CONTROL_HEIGHT } from "@/Utils/Theme/constants";
 interface CustomTabsProps extends TabsProps {}
 
 export const Tabs = (props: CustomTabsProps) => {
@@ -10,7 +10,7 @@ export const Tabs = (props: CustomTabsProps) => {
 	return (
 		<MuiTabs
 			sx={{
-				minHeight: INPUT_BASE_HEIGHT,
+				minHeight: CONTROL_HEIGHT,
 				borderBottom: `1px solid ${theme.palette.divider}`,
 				"& .MuiTabs-indicator": {
 					backgroundColor: theme.palette.primary.main,
@@ -42,7 +42,7 @@ export const Tab = (props: CustomTabProps) => {
 				textTransform: "none",
 				fontSize: typographyLevels.m,
 				fontWeight: 500,
-				minHeight: INPUT_BASE_HEIGHT,
+				minHeight: CONTROL_HEIGHT,
 				padding: theme.spacing(1, 0),
 				paddingBottom: 0,
 				minWidth: "auto",

client/src/Components/inputs/Button.tsx

@@ -1,7 +1,7 @@
 import Button from "@mui/material/Button";
 import type { ButtonProps } from "@mui/material/Button";
 import { useTheme, darken } from "@mui/material/styles";
-import { INPUT_BASE_HEIGHT, HOVER } from "@/Utils/Theme/constants";
+import { CONTROL_HEIGHT, HOVER } from "@/Utils/Theme/constants";
 
 const PALETTE_COLORS = [
 	"primary",
@@ -43,7 +43,7 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
 			{...props}
 			sx={{
 				textTransform: "none",
-				height: INPUT_BASE_HEIGHT,
+				height: CONTROL_HEIGHT,
 				lineHeight: 1.2,
 				fontWeight: 400,
 				borderRadius: 2,

client/src/Components/inputs/ColorPicker.tsx

@@ -4,7 +4,7 @@ import { typographyLevels } from "@/Utils/Theme/Palette";
 import { useTheme } from "@mui/material";
 import Stack from "@mui/material/Stack";
 import { FieldLabel } from "@/Components/inputs/FieldLabel";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
+import { CONTROL_HEIGHT } from "@/Utils/Theme/constants";
 
 interface ColorPickerProps extends MuiColorInputProps {
 	fieldLabel?: string;
@@ -19,7 +19,7 @@ export const ColorInput = ({ fieldLabel, required, ...props }: ColorPickerProps)
 			sx={{
 				"& .MuiOutlinedInput-root": {
 					borderRadius: theme.shape.borderRadius,
-					height: INPUT_BASE_HEIGHT,
+					height: CONTROL_HEIGHT,
 					fontSize: typographyLevels.base,
 				},
 				"& .MuiOutlinedInput-notchedOutline": {

client/src/Components/inputs/DatePicker.tsx

@@ -8,7 +8,7 @@ import { FieldLabel } from "./FieldLabel";
 import { Calendar } from "lucide-react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
+import { CONTROL_HEIGHT } from "@/Utils/Theme/constants";
 
 interface DatePickerComponentProps extends Omit<DatePickerProps<Dayjs>, "label"> {
 	fieldLabel?: string;
@@ -56,7 +56,7 @@ export const DatePickerComponent = ({
 								flexDirection: "row-reverse",
 							},
 							"& input": {
-								minHeight: INPUT_BASE_HEIGHT,
+								minHeight: CONTROL_HEIGHT,
 								p: 0,
 								pl: theme.spacing(3),
 								pr: theme.spacing(5),

client/src/Components/inputs/Select.tsx

@@ -6,7 +6,7 @@ import Stack from "@mui/material/Stack";
 import { FieldLabel } from "./FieldLabel";
 import { ChevronDown } from "lucide-react";
 import Typography from "@mui/material/Typography";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
+import { CONTROL_HEIGHT } from "@/Utils/Theme/constants";
 
 interface SelectInputProps<T> extends Omit<SelectProps<T>, "label"> {
 	fieldLabel?: string;
@@ -72,7 +72,7 @@ const SelectInputInner = <T,>(
 				/>
 			)}
 			sx={{
-				height: `${INPUT_BASE_HEIGHT}px`,
+				height: `${CONTROL_HEIGHT}px`,
 				"& .MuiSelect-select": {
 					display: "flex",
 					alignItems: "center",

client/src/Components/inputs/TextInput.tsx

@@ -5,7 +5,7 @@ import { typographyLevels } from "@/Utils/Theme/Palette";
 import { useTheme } from "@mui/material/styles";
 import Stack from "@mui/material/Stack";
 import { FieldLabel } from "./FieldLabel";
-import { INPUT_BASE_HEIGHT, LAYOUT } from "@/Utils/Theme/constants";
+import { CONTROL_HEIGHT, LAYOUT } from "@/Utils/Theme/constants";
 
 interface TextInputProps extends Omit<TextFieldProps, "label"> {
 	fieldLabel?: string;
@@ -22,7 +22,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
 		width: "100%",
 		"& .MuiOutlinedInput-root": {
 			borderRadius: theme.shape.borderRadius,
-			height: props.multiline ? "auto" : INPUT_BASE_HEIGHT,
+			height: props.multiline ? "auto" : CONTROL_HEIGHT,
 			fontSize: typographyLevels.base,
 			overflow: "hidden",
 		},

client/src/Components/inputs/TimePicker.tsx

@@ -7,7 +7,7 @@ import Typography from "@mui/material/Typography";
 import { FieldLabel } from "./FieldLabel";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
+import { CONTROL_HEIGHT } from "@/Utils/Theme/constants";
 
 interface TimePickerComponentProps extends Omit<MobileTimePickerProps<Dayjs>, "label"> {
 	fieldLabel?: string;
@@ -34,7 +34,7 @@ export const TimePickerComponent = ({
 						sx: {
 							width: "fit-content",
 							"& input": {
-								minHeight: INPUT_BASE_HEIGHT,
+								minHeight: CONTROL_HEIGHT,
 								p: 0,
 								px: theme.spacing(5),
 							},

client/src/Components/inputs/ToggleButton.tsx

@@ -4,7 +4,7 @@ import type { ToggleButtonProps } from "@mui/material/ToggleButton";
 import type { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup";
 import { useTheme } from "@mui/material/styles";
 import { alpha } from "@mui/material/styles";
-import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
+import { CONTROL_HEIGHT } from "@/Utils/Theme/constants";
 
 export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 	const theme = useTheme();
@@ -21,7 +21,7 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 			sx={{
 				px: 8,
 				textTransform: "none",
-				height: INPUT_BASE_HEIGHT,
+				height: CONTROL_HEIGHT,
 				fontWeight: 400,
 				whiteSpace: "nowrap",
 				textOverflow: "ellipsis",

client/src/Components/monitors/HeaderMonitorControls.tsx

@@ -60,22 +60,20 @@ export const HeaderMonitorControls = ({
 				direction={{ xs: "column", md: "row" }}
 				gap={theme.spacing(2)}
 			>
-				{isAdmin && (
-					<Button
-						variant="contained"
-						color="secondary"
-						loading={isPosting}
-						startIcon={<Icon icon={Mail} />}
-						onClick={async () => {
-							await post(`/notifications/test/all`, { monitorId: monitor.id });
-						}}
-						sx={{
-							whiteSpace: "nowrap",
-						}}
-					>
-						{t("common.buttons.testNotifications")}
-					</Button>
-				)}
+				<Button
+					variant="contained"
+					color="secondary"
+					loading={isPosting}
+					startIcon={<Icon icon={Mail} />}
+					onClick={async () => {
+						await post(`/notifications/test/all`, { monitorId: monitor.id });
+					}}
+					sx={{
+						whiteSpace: "nowrap",
+					}}
+				>
+					{t("common.buttons.testNotifications")}
+				</Button>
 				<Button
 					variant="contained"
 					color="secondary"

client/src/Components/monitors/MonitorListPage.tsx

@@ -35,7 +35,7 @@ export const MonitorListPage = ({
 	headerKey,
 	page,
 	actionLink,
-	controller,
+	controller: c,
 	bulkActions,
 	showTypeFilter,
 	summaryProps,
@@ -48,14 +48,14 @@ export const MonitorListPage = ({
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isAdmin = useIsAdmin();
-	const isLoading = controller.isLoading || Boolean(extraLoading);
+	const isLoading = c.isLoading || Boolean(extraLoading);
 
 	return (
 		<MonitorBasePageWithStates
 			headerKey={headerKey}
 			loading={isLoading}
-			error={controller.error || extraError}
-			totalCount={controller.effectiveTotalCount}
+			error={c.error || extraError}
+			totalCount={c.effectiveTotalCount}
 			page={page}
 			actionLink={actionLink}
 			priorityFallback={priorityFallback}
@@ -66,7 +66,7 @@ export const MonitorListPage = ({
 				isAdmin={isAdmin}
 			/>
 			<HeaderMonitorsSummary
-				summary={controller.summary}
+				summary={c.summary}
 				{...summaryProps}
 			/>
 			<Stack
@@ -78,27 +78,27 @@ export const MonitorListPage = ({
 					{...(showTypeFilter === false
 						? { showTypes: false }
 						: {
-								selectedTypes: controller.selectedTypes,
-								setSelectedTypes: controller.setSelectedTypes,
+								selectedTypes: c.selectedTypes,
+								setSelectedTypes: c.setSelectedTypes,
 							})}
-					selectedStatus={controller.selectedStatus}
-					setSelectedStatus={controller.setSelectedStatus}
-					selectedState={controller.selectedState}
-					setSelectedState={controller.setSelectedState}
-					tagOptions={controller.tags ?? []}
-					selectedTags={controller.selectedTags}
-					setSelectedTags={controller.setSelectedTags}
-					onClearFilters={controller.handleClearFilters}
+					selectedStatus={c.selectedStatus}
+					setSelectedStatus={c.setSelectedStatus}
+					selectedState={c.selectedState}
+					setSelectedState={c.setSelectedState}
+					tagOptions={c.tags ?? []}
+					selectedTags={c.selectedTags}
+					setSelectedTags={c.setSelectedTags}
+					onClearFilters={c.handleClearFilters}
 				/>
 				<TextField
 					placeholder={t("pages.uptime.filters.search.placeholder")}
-					value={controller.search}
+					value={c.search}
 					onChange={(event) => {
-						controller.setSearch(event.target.value);
+						c.setSearch(event.target.value);
 					}}
 				/>
 			</Stack>
-			{controller.selectedTags.length > 0 && (
+			{c.selectedTags.length > 0 && (
 				<Stack
 					direction={isSmall ? "column" : "row"}
 					alignItems={isSmall ? "flex-start" : "center"}
@@ -108,8 +108,8 @@ export const MonitorListPage = ({
 					<Typography color={theme.palette.text.secondary}>
 						{t("pages.uptime.filters.activeTags")}
 					</Typography>
-					{controller.selectedTags.map((tagId) => {
-						const tag = controller.tags?.find((t) => t.id === tagId);
+					{c.selectedTags.map((tagId) => {
+						const tag = c.tags?.find((t) => t.id === tagId);
 						if (!tag) return null;
 						return (
 							<ColoredLabel
@@ -123,20 +123,20 @@ export const MonitorListPage = ({
 			)}
 			{bulkActions && !isLoading && (
 				<BulkActionsBar
-					selectedCount={controller.selectedRows.length}
-					onCancel={controller.handleCancelSelection}
+					selectedCount={c.selectedRows.length}
+					onCancel={c.handleCancelSelection}
 				>
 					<Button
 						size="small"
 						startIcon={<Play size={16} />}
-						onClick={controller.handleBulkResume}
+						onClick={c.handleBulkResume}
 					>
 						{t("common.buttons.resume")}
 					</Button>
 					<Button
 						size="small"
 						startIcon={<Pause size={16} />}
-						onClick={controller.handleBulkPause}
+						onClick={c.handleBulkPause}
 					>
 						{t("common.buttons.pause")}
 					</Button>
@@ -144,12 +144,12 @@ export const MonitorListPage = ({
 			)}
 			{children}
 			<Dialog
-				open={controller.isDialogOpen}
+				open={c.isDialogOpen}
 				title={t("common.dialogs.delete.title")}
 				content={t("common.dialogs.delete.description")}
-				onConfirm={controller.handleConfirmDelete}
-				onCancel={controller.handleCancelDelete}
-				loading={controller.isDeleting}
+				onConfirm={c.handleConfirmDelete}
+				onCancel={c.handleCancelDelete}
+				loading={c.isDeleting}
 			/>
 		</MonitorBasePageWithStates>
 	);

client/src/Components/sidebar/Menu.tsx

@@ -1,7 +1,6 @@
 import { Icon } from "@/Components/design-elements";
 
 import {
-	LayoutDashboard,
 	Globe,
 	Gauge,
 	Link,
@@ -27,20 +26,15 @@ export const getMenu = (t: Function) => {
 		{
 			group: t("components.sidebar.menu.groups.monitoring"),
 			items: [
-				{
-					name: t("components.sidebar.menu.dashboard"),
-					path: "dashboard",
-					icon: <Icon icon={LayoutDashboard} />,
-				},
 				{
 					name: t("components.sidebar.menu.uptime"),
 					path: "uptime",
 					icon: <Icon icon={Globe} />,
 				},
 				{
-					name: t("components.sidebar.menu.docker"),
-					path: "docker",
-					icon: <Icon icon={Container} />,
+					name: t("components.sidebar.menu.pagespeed"),
+					path: "pagespeed",
+					icon: <Icon icon={Gauge} />,
 				},
 				{
 					name: t("components.sidebar.menu.infrastructure"),
@@ -48,9 +42,9 @@ export const getMenu = (t: Function) => {
 					icon: <Icon icon={Link} />,
 				},
 				{
-					name: t("components.sidebar.menu.pagespeed"),
-					path: "pagespeed",
-					icon: <Icon icon={Gauge} />,
+					name: t("components.sidebar.menu.docker"),
+					path: "docker",
+					icon: <Icon icon={Container} />,
 				},
 			],
 		},

client/src/Components/sidebar/NavItem.tsx

@@ -25,6 +25,7 @@ export const NavItem = ({
 	const iconStroke = selected
 		? theme.palette.sidebar.accent
 		: theme.palette.text.secondary;
+
 	const buttonBgColor = selected ? theme.palette.action.selected : "transparent";
 	const buttonBgHoverColor = selected
 		? theme.palette.action.selectedHover

client/src/Features/UI/uiSlice.ts

@@ -1,5 +1,4 @@
 import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
-import type { CardId } from "@/Pages/Dashboard/cards";
 
 type ThemeMode = "light" | "dark";
 type ChartType = "histogram" | "line";
@@ -36,7 +35,6 @@ interface UIState {
 	language: string;
 	starPromptOpen: boolean;
 	chartType: ChartType;
-	dashboardCards: CardId[] | null;
 }
 
 const initialMode: ThemeMode = window?.matchMedia?.("(prefers-color-scheme: dark)")
@@ -76,7 +74,6 @@ const initialState: UIState = {
 	language: "en",
 	starPromptOpen: true,
 	chartType: "histogram",
-	dashboardCards: null,
 };
 
 const uiSlice = createSlice({
@@ -120,9 +117,6 @@ const uiSlice = createSlice({
 		setChartType: (state, action: PayloadAction<ChartType>) => {
 			state.chartType = action.payload;
 		},
-		setDashboardCards: (state, action: PayloadAction<CardId[] | null>) => {
-			state.dashboardCards = action.payload;
-		},
 	},
 });
 
@@ -139,5 +133,4 @@ export const {
 	setLanguage,
 	setStarPromptOpen,
 	setChartType,
-	setDashboardCards,
 } = uiSlice.actions;

client/src/Hooks/UseApi.ts

@@ -6,7 +6,7 @@ import { useState } from "react";
 import { useToast } from "@/Hooks/UseToast";
 import { logger } from "@/Utils/logger";
 
-export interface ApiResponse<T> {
+interface ApiResponse<T> {
 	success: boolean;
 	msg: string;
 	data: T;

client/src/Hooks/UseToast.ts

@@ -1,30 +1,27 @@
 import { toast, type ToastOptions } from "react-toastify";
-import { useMemo } from "react";
 
 export const useToast = () => {
-	return useMemo(() => {
-		const showToast = (message: string, options?: ToastOptions) => {
-			toast.dismiss();
-			const baseStyle: React.CSSProperties = {
-				whiteSpace: "nowrap",
-				overflow: "hidden",
-				textOverflow: "ellipsis",
-			};
-			toast(message, {
-				...options,
-				style: { ...baseStyle, ...(options?.style || {}) },
-			});
+	const showToast = (message: string, options?: ToastOptions) => {
+		toast.dismiss();
+		const baseStyle: React.CSSProperties = {
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
 		};
+		toast(message, {
+			...options,
+			style: { ...baseStyle, ...(options?.style || {}) },
+		});
+	};
 
-		const toastSuccess = (msg: string, opts?: ToastOptions) =>
-			showToast(msg, { ...opts, type: "success" });
-		const toastError = (msg: string, opts?: ToastOptions) =>
-			showToast(msg, { ...opts, type: "error" });
-		const toastInfo = (msg: string, opts?: ToastOptions) =>
-			showToast(msg, { ...opts, type: "info" });
-		const toastWarning = (msg: string, opts?: ToastOptions) =>
-			showToast(msg, { ...opts, type: "warning" });
+	const toastSuccess = (msg: string, opts?: ToastOptions) =>
+		showToast(msg, { ...opts, type: "success" });
+	const toastError = (msg: string, opts?: ToastOptions) =>
+		showToast(msg, { ...opts, type: "error" });
+	const toastInfo = (msg: string, opts?: ToastOptions) =>
+		showToast(msg, { ...opts, type: "info" });
+	const toastWarning = (msg: string, opts?: ToastOptions) =>
+		showToast(msg, { ...opts, type: "warning" });
 
-		return { showToast, toastSuccess, toastError, toastInfo, toastWarning };
-	}, []);
+	return { showToast, toastSuccess, toastError, toastInfo, toastWarning };
 };

client/src/Hooks/useMonitorForm.ts

@@ -77,7 +77,6 @@ export const getMonitorDefaults = (
 				...base,
 				type: "docker",
 				url: data?.url || "",
-				dockerLogsEnabled: data?.dockerLogsEnabled ?? false,
 			};
 			break;
 		case "game":

client/src/Pages/CreateMonitor/index.tsx

@@ -118,8 +118,8 @@ const getGeneralSettingsConfig = (
 			showDnsRecordType: false,
 		},
 		docker: {
-			urlLabel: t("pages.createMonitor.form.general.option.dockerHost.label"),
-			urlPlaceholder: t("pages.createMonitor.form.general.option.dockerHost.placeholder"),
+			urlLabel: t("pages.createMonitor.form.general.option.container.label"),
+			urlPlaceholder: t("pages.createMonitor.form.general.option.container.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
 			showProxy: false,
@@ -255,7 +255,6 @@ const CreateMonitorPage = () => {
 		const firstSegment = pathSegments[0];
 		if (firstSegment === "pagespeed") return "pagespeed";
 		if (firstSegment === "infrastructure") return "hardware";
-		if (firstSegment === "docker") return "docker";
 		return "uptime";
 	}, [location.pathname]);
 
@@ -265,9 +264,7 @@ const CreateMonitorPage = () => {
 			? "pagespeed"
 			: pageType === "hardware"
 				? "hardware"
-				: pageType === "docker"
-					? "docker"
-					: "http";
+				: "http";
 
 	const { data: existingMonitor, refetch: refetchMonitor } = useGet<Monitor>(
 		isEditMode ? `/monitors/${monitorId}` : null
@@ -376,8 +373,6 @@ const CreateMonitorPage = () => {
 				navigate("/pagespeed");
 			} else if (pageType === "hardware") {
 				navigate("/infrastructure");
-			} else if (pageType === "docker") {
-				navigate("/docker");
 			} else {
 				navigate("/uptime");
 			}
@@ -828,19 +823,6 @@ const CreateMonitorPage = () => {
 					/>
 				)}
 
-				{showStep(1) && watchedType === "docker" && (
-					<ConfigBox
-						title={t("pages.createMonitor.form.dockerLogs.title")}
-						subtitle={t("pages.createMonitor.form.dockerLogs.description")}
-						rightContent={
-							<FormSwitchField
-								name="dockerLogsEnabled"
-								label={t("pages.createMonitor.form.dockerLogs.option.enabled.label")}
-							/>
-						}
-					/>
-				)}
-
 				{showStep(2) &&
 					(watchedType === "http" ||
 						watchedType === "grpc" ||

client/src/Pages/Dashboard/Components/CardGrid.tsx

@@ -1,123 +0,0 @@
-import Box from "@mui/material/Box";
-import { useTheme } from "@mui/material/styles";
-import { GripVertical } from "lucide-react";
-import {
-	DndContext,
-	closestCenter,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from "@dnd-kit/core";
-import type { DragEndEvent } from "@dnd-kit/core";
-import { SortableContext, useSortable, rectSortingStrategy } from "@dnd-kit/sortable";
-
-import { Icon } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { GRID_COLUMNS, type CardDefinition, type CardId } from "../cards";
-import { CardSlotContext } from "./CardSlotContext";
-
-const SortableCard = ({ card }: { card: CardDefinition }) => {
-	const theme = useTheme();
-	const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
-		useSortable({ id: card.id });
-	const Component = card.component;
-
-	return (
-		<Box
-			ref={setNodeRef}
-			minWidth={0}
-			sx={{
-				width: {
-					xs: "100%",
-					md:
-						card.width >= GRID_COLUMNS
-							? "100%"
-							: `calc(${(card.width / GRID_COLUMNS) * 100}% - ${theme.spacing(LAYOUT.MD / 2)})`,
-				},
-				transform: transform
-					? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)`
-					: undefined,
-				transition,
-				opacity: isDragging ? 0.4 : 1,
-				zIndex: isDragging ? 1 : "auto",
-			}}
-		>
-			<CardSlotContext.Provider
-				value={
-					<Box
-						{...attributes}
-						{...listeners}
-						display="flex"
-						alignItems="center"
-						sx={{
-							cursor: "grab",
-							"&:active": { cursor: "grabbing" },
-							touchAction: "none",
-						}}
-					>
-						<Icon
-							icon={GripVertical}
-							size={16}
-							color={theme.palette.text.secondary}
-						/>
-					</Box>
-				}
-			>
-				<Component />
-			</CardSlotContext.Provider>
-		</Box>
-	);
-};
-
-export const CardGrid = ({
-	cards,
-	onReorder,
-}: {
-	cards: CardDefinition[];
-	onReorder: (sourceIndex: number, destIndex: number) => void;
-}) => {
-	const theme = useTheme();
-
-	const sensors = useSensors(
-		useSensor(PointerSensor, {
-			activationConstraint: { distance: 8 },
-		})
-	);
-
-	const handleDragEnd = (event: DragEndEvent) => {
-		const { active, over } = event;
-		if (!over || active.id === over.id) return;
-		const sourceIndex = cards.findIndex((c) => c.id === active.id);
-		const destIndex = cards.findIndex((c) => c.id === over.id);
-		if (sourceIndex !== -1 && destIndex !== -1) onReorder(sourceIndex, destIndex);
-	};
-
-	const cardIds = cards.map((c) => c.id);
-
-	return (
-		<DndContext
-			sensors={sensors}
-			collisionDetection={closestCenter}
-			onDragEnd={handleDragEnd}
-		>
-			<SortableContext
-				items={cardIds}
-				strategy={rectSortingStrategy}
-			>
-				<Box
-					display="flex"
-					flexWrap="wrap"
-					gap={theme.spacing(LAYOUT.MD)}
-					alignItems="stretch"
-				>
-					{cards.map((card) => (
-						<SortableCard
-							key={card.id}
-							card={card}
-						/>
-					))}
-				</Box>
-			</SortableContext>
-		</DndContext>
-	);
-};

client/src/Pages/Dashboard/Components/CardPicker.tsx

@@ -1,137 +0,0 @@
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { Dialog, Checkbox, Button } from "@/Components/inputs";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { CardGroups, type CardDefinition, type CardGroup, type CardId } from "../cards";
-
-interface CardPickerProps {
-	open: boolean;
-	available: CardDefinition[];
-	selected: CardId[];
-	allSelected: boolean;
-	onAdd: (id: CardId) => void;
-	onRemove: (id: CardId) => void;
-	onSelectAll: () => void;
-	onDeselectAll: () => void;
-	onReset: () => void;
-	onClose: () => void;
-}
-
-/**
- * Cards are grouped by sidebar section, not by load cost: you look for a card
- * where you look for the feature it belongs to. Admin-only cards never reach
- * `available` for a non-admin, so nobody is offered a card they cannot load.
- */
-export const CardPicker = ({
-	open,
-	available,
-	selected,
-	allSelected,
-	onAdd,
-	onRemove,
-	onSelectAll,
-	onDeselectAll,
-	onReset,
-	onClose,
-}: CardPickerProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-
-	const grouped = useMemo(() => {
-		return CardGroups.map((group: CardGroup) => ({
-			group,
-			cards: available.filter((card) => card.group === group),
-		})).filter((entry) => entry.cards.length > 0);
-	}, [available]);
-
-	const chosen = new Set(selected);
-	const someSelected = selected.length > 0 && !allSelected;
-
-	return (
-		<Dialog
-			open={open}
-			maxWidth="sm"
-			fullWidth
-			title={t("pages.dashboard.picker.title")}
-			// Reset sits alone on the left, away from Done — a destructive action
-			// should not be adjacent to the one people reach for by reflex.
-			onCancel={onReset}
-			cancelText={t("pages.dashboard.picker.reset")}
-			onConfirm={onClose}
-			confirmText={t("pages.dashboard.picker.done")}
-			additionalButtons={
-				<Button
-					variant="outlined"
-					color="secondary"
-					onClick={allSelected ? onDeselectAll : onSelectAll}
-					startIcon={
-						<Checkbox
-							checked={allSelected}
-							indeterminate={someSelected}
-							size="small"
-							sx={{ p: 0 }}
-							onChange={() => {}}
-						/>
-					}
-				>
-					{t("pages.dashboard.picker.selectAll")}
-				</Button>
-			}
-		>
-			{/*
-			 * Two columns: seventeen cards in one list makes the dialog scroll,
-			 * which hides most of the catalogue. Groups flow down the columns and
-			 * are kept whole so a group is never split across the gap.
-			 */}
-			<Box
-				pt={theme.spacing(LAYOUT.SM)}
-				sx={{
-					columnCount: { xs: 1, sm: 2 },
-					columnGap: theme.spacing(LAYOUT.XL),
-				}}
-			>
-				{grouped.map(({ group, cards }) => (
-					<Stack
-						key={group}
-						gap={theme.spacing(LAYOUT.XXS)}
-						pb={theme.spacing(LAYOUT.MD)}
-						sx={{ breakInside: "avoid" }}
-					>
-						<Typography
-							variant="eyebrow"
-							color={theme.palette.text.disabled}
-						>
-							{t(`pages.dashboard.picker.groups.${group}`, {
-								defaultValue: group,
-							})}
-						</Typography>
-						{cards.map((card) => (
-							<FormControlLabel
-								key={card.id}
-								label={
-									<Typography color={theme.palette.text.primary}>
-										{t(`pages.dashboard.cards.${card.key}.title`)}
-									</Typography>
-								}
-								control={
-									<Checkbox
-										checked={chosen.has(card.id)}
-										onChange={() =>
-											chosen.has(card.id) ? onRemove(card.id) : onAdd(card.id)
-										}
-									/>
-								}
-							/>
-						))}
-					</Stack>
-				))}
-			</Box>
-		</Dialog>
-	);
-};

client/src/Pages/Dashboard/Components/CardPrimitives.tsx

@@ -1,275 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { Link as RouterLink } from "react-router-dom";
-
-import { Tooltip } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { typographyLevels } from "@/Utils/Theme/Palette";
-
-import type { ReactNode } from "react";
-
-/**
- * One thickness for every bar on the dashboard. Plain and segmented bars sit
- * side by side across cards, so differing weights read as an inconsistency
- * rather than as emphasis.
- */
-const BAR_HEIGHT = 8;
-
-export interface BarSegment {
-	key: string;
-	value: number;
-	color: string;
-	/** Tooltip text, since the segments themselves carry no labels. */
-	label: string;
-}
-
-/**
- * A proportional bar. `value` and `max` share whatever unit the caller uses;
- * percentages come in as 0-100, not as the API's 0-1 fractions.
- */
-export const CardBar = ({
-	value,
-	max = 100,
-	color,
-}: {
-	value: number;
-	max?: number;
-	color: string;
-}) => {
-	const theme = useTheme();
-	const ratio = max > 0 ? Math.min(Math.max(value / max, 0), 1) : 0;
-
-	return (
-		<Box
-			width="100%"
-			height={BAR_HEIGHT}
-			borderRadius={theme.shape.borderRadius}
-			bgcolor={theme.palette.action.hover}
-			sx={{ overflow: "hidden" }}
-		>
-			<Box
-				width={`${ratio * 100}%`}
-				height="100%"
-				bgcolor={color}
-				sx={{ transition: "width 0.3s ease" }}
-			/>
-		</Box>
-	);
-};
-
-/**
- * One bar divided into proportional segments — the shape of a whole split into
- * parts, where the relative sizes are the point rather than any single value.
- *
- * Zero-value segments are dropped so they cannot appear as hairlines, and each
- * segment carries a tooltip because the bar itself has no room for labels.
- */
-export const CardSegmentedBar = ({ segments }: { segments: BarSegment[] }) => {
-	const theme = useTheme();
-	const visible = segments.filter((segment) => segment.value > 0);
-	const total = visible.reduce((sum, segment) => sum + segment.value, 0);
-
-	return (
-		<Stack
-			direction="row"
-			width="100%"
-			height={BAR_HEIGHT}
-			borderRadius={theme.shape.borderRadius}
-			bgcolor={theme.palette.action.hover}
-			gap="1px"
-			sx={{ overflow: "hidden" }}
-		>
-			{total > 0 &&
-				visible.map((segment) => (
-					<Tooltip
-						key={segment.key}
-						title={segment.label}
-					>
-						<Box
-							width={`${(segment.value / total) * 100}%`}
-							height="100%"
-							bgcolor={segment.color}
-							sx={{ transition: "width 0.3s ease" }}
-						/>
-					</Tooltip>
-				))}
-		</Stack>
-	);
-};
-
-/** A clickable list row. Rows link to the entity they describe. */
-export const CardRow = ({ to, children }: { to?: string; children: ReactNode }) => {
-	const theme = useTheme();
-
-	return (
-		<Stack
-			{...(to ? { component: RouterLink, to } : {})}
-			direction="row"
-			alignItems="center"
-			gap={theme.spacing(LAYOUT.SM)}
-			px={theme.spacing(LAYOUT.XS)}
-			py={theme.spacing(LAYOUT.XS)}
-			mx={`-${theme.spacing(LAYOUT.XS)}`}
-			borderRadius={theme.shape.borderRadius}
-			color="inherit"
-			sx={{
-				textDecoration: "none",
-				...(to && {
-					"&:hover": { backgroundColor: theme.palette.action.hover },
-				}),
-			}}
-		>
-			{children}
-		</Stack>
-	);
-};
-
-/** Name plus optional secondary line, truncating rather than wrapping. */
-export const CardRowLabel = ({
-	primary,
-	secondary,
-}: {
-	primary: string;
-	secondary?: string | null;
-}) => {
-	const theme = useTheme();
-
-	return (
-		<Stack
-			minWidth={0}
-			flex={1}
-		>
-			<Typography
-				color={theme.palette.text.primary}
-				noWrap
-			>
-				{primary}
-			</Typography>
-			{secondary && (
-				<Typography
-					color={theme.palette.text.secondary}
-					noWrap
-				>
-					{secondary}
-				</Typography>
-			)}
-		</Stack>
-	);
-};
-
-/** A single large figure with a caption — the shape of the stat cards. */
-export const CardFigure = ({
-	value,
-	caption,
-	color,
-}: {
-	value: string;
-	caption?: string;
-	color?: string;
-}) => {
-	const theme = useTheme();
-
-	return (
-		<Stack gap={theme.spacing(LAYOUT.XXS)}>
-			<Typography
-				fontSize={typographyLevels.xxl}
-				fontWeight={300}
-				color={color ?? theme.palette.text.primary}
-				lineHeight={1.1}
-			>
-				{value}
-			</Typography>
-			{caption && <Typography color={theme.palette.text.secondary}>{caption}</Typography>}
-		</Stack>
-	);
-};
-
-/**
- * A label with its value on the right — the shape almost every stat card
- * repeats. `color` highlights the value alone, leaving the label quiet.
- */
-export const CardStatLine = ({
-	label,
-	value,
-	color,
-}: {
-	label: string;
-	value: string;
-	color?: string;
-}) => {
-	const theme = useTheme();
-
-	return (
-		<Stack
-			direction="row"
-			alignItems="baseline"
-			justifyContent="space-between"
-			gap={theme.spacing(LAYOUT.SM)}
-		>
-			<Typography color={theme.palette.text.secondary}>{label}</Typography>
-			<Typography
-				color={color ?? theme.palette.text.primary}
-				noWrap
-			>
-				{value}
-			</Typography>
-		</Stack>
-	);
-};
-
-/**
- * A CardStatLine with a proportional bar beneath it — the ranking and
- * breakdown row. `max` defaults to a percentage scale; pass the largest value
- * in the set to make bars relative to each other instead.
- *
- * `label` may be a node so callers can put a "N down" flag beside the name.
- */
-export const CardMeterRow = ({
-	label,
-	value,
-	max,
-	color,
-	trailing,
-}: {
-	label: ReactNode;
-	value: number;
-	max?: number;
-	color: string;
-	trailing?: ReactNode;
-}) => {
-	const theme = useTheme();
-
-	return (
-		<Stack
-			flex={1}
-			minWidth={0}
-			gap={theme.spacing(LAYOUT.XXS)}
-		>
-			<Stack
-				direction="row"
-				alignItems="center"
-				justifyContent="space-between"
-				gap={theme.spacing(LAYOUT.SM)}
-			>
-				{typeof label === "string" ? (
-					<Typography
-						color={theme.palette.text.primary}
-						noWrap
-					>
-						{label}
-					</Typography>
-				) : (
-					label
-				)}
-				{trailing}
-			</Stack>
-			<CardBar
-				value={value}
-				max={max}
-				color={color}
-			/>
-		</Stack>
-	);
-};

client/src/Pages/Dashboard/Components/CardSlotContext.tsx

@@ -1,7 +0,0 @@
-import { createContext, useContext } from "react";
-
-import type { ReactNode } from "react";
-
-export const CardSlotContext = createContext<ReactNode>(null);
-
-export const useCardSlot = (): ReactNode => useContext(CardSlotContext);

client/src/Pages/Dashboard/Components/Cards/AdminCards.tsx

@@ -1,219 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { useGet } from "@/Hooks/UseApi";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatTimestamp } from "@/Utils/TimeUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardFigure, CardRow, CardRowLabel, CardStatLine } from "../CardPrimitives";
-
-import { REFRESH_INTERVAL_MS, SLOW_REFRESH_INTERVAL_MS } from "../../cards";
-
-import type { QueueMetrics } from "@/Types/Queue";
-import type { Log } from "@/Types/Log";
-import type { User } from "@/Types/User";
-
-const MAX_ERROR_ROWS = 5;
-
-/** Reads as a single reassurance line while nothing is failing. */
-export const ChecksOnScheduleCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<QueueMetrics>(
-		"/queue/metrics",
-		{},
-		{ refreshInterval: REFRESH_INTERVAL_MS }
-	);
-
-	const healthy = data?.failingJobs === 0;
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.checksOnSchedule.title")}
-			to="/logs"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{data && (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					{healthy ? (
-						<CardMessage
-							text={t("pages.dashboard.cards.checksOnSchedule.healthy", {
-								jobs: data.jobs,
-								workers: data.workers.length,
-							})}
-						/>
-					) : (
-						<>
-							<CardFigure
-								value={String(data.failingJobs)}
-								caption={t("pages.dashboard.cards.checksOnSchedule.failing")}
-								color={theme.palette.error.main}
-							/>
-							<Stack gap={theme.spacing(LAYOUT.XS)}>
-								{data.jobsWithFailures.slice(0, MAX_ERROR_ROWS).map((job) => (
-									<CardRow key={String(job.monitorId)}>
-										<CardRowLabel
-											primary={job.monitorUrl ?? String(job.monitorId)}
-											secondary={job.failReason}
-										/>
-										<Typography
-											color={theme.palette.error.main}
-											flexShrink={0}
-										>
-											{job.failCount}
-										</Typography>
-									</CardRow>
-								))}
-							</Stack>
-						</>
-					)}
-					<CardStatLine
-						label={t("pages.dashboard.cards.checksOnSchedule.scheduled")}
-						value={String(data.jobs)}
-					/>
-					<CardStatLine
-						label={t("pages.dashboard.cards.checksOnSchedule.runningNow")}
-						value={String(data.activeJobs)}
-					/>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-/**
- * /logs is an in-memory ring buffer capped at 1000 entries, wiped on restart,
- * and it ignores page/rowsPerPage. It rotates fast, so this is deliberately
- * worded "recent" rather than "all".
- */
-export const RecentErrorsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<Log[]>(
-		"/logs",
-		{},
-		{ refreshInterval: SLOW_REFRESH_INTERVAL_MS }
-	);
-
-	const { errors, warnings, newest } = useMemo(() => {
-		const relevant = (data ?? []).filter(
-			(entry) => entry.level === "error" || entry.level === "warn"
-		);
-		const sorted = [...relevant].sort(
-			(a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
-		);
-		return {
-			errors: relevant.filter((entry) => entry.level === "error").length,
-			warnings: relevant.filter((entry) => entry.level === "warn").length,
-			newest: sorted.slice(0, MAX_ERROR_ROWS),
-		};
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.recentErrors.title")}
-			to="/logs"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				errors > 0 ? (
-					<Typography color={theme.palette.error.main}>
-						{t("pages.dashboard.cards.recentErrors.count", { count: errors })}
-					</Typography>
-				) : null
-			}
-		>
-			{newest.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.recentErrors.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<CardStatLine
-						label={t("pages.dashboard.cards.recentErrors.warnings")}
-						value={String(warnings)}
-					/>
-					<Stack gap={theme.spacing(LAYOUT.XS)}>
-						{newest.map((entry, index) => (
-							<CardRow key={`${entry.timestamp}-${index}`}>
-								<CardRowLabel
-									primary={entry.message}
-									secondary={[entry.service, entry.method].filter(Boolean).join(" · ")}
-								/>
-								<Typography
-									color={
-										entry.level === "error"
-											? theme.palette.error.main
-											: theme.palette.warning.main
-									}
-									flexShrink={0}
-								>
-									{formatTimestamp(entry.timestamp)}
-								</Typography>
-							</CardRow>
-						))}
-					</Stack>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-/** Never empty — at minimum the current user exists. */
-export const TeamCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<User[]>("/auth/users");
-
-	const { total, byRole, unverified } = useMemo(() => {
-		const users = data ?? [];
-		const roles = new Map<string, number>();
-		for (const user of users) {
-			for (const role of user.role ?? []) {
-				roles.set(role, (roles.get(role) ?? 0) + 1);
-			}
-		}
-		return {
-			total: users.length,
-			byRole: [...roles.entries()].sort((a, b) => b[1] - a[1]),
-			unverified: users.filter((user) => !user.isVerified).length,
-		};
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.team.title")}
-			to="/account/team"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{data && (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<CardFigure
-						value={String(total)}
-						caption={t("pages.dashboard.cards.team.members", { count: total })}
-					/>
-					{byRole.map(([role, count]) => (
-						<CardStatLine
-							key={role}
-							label={t(`common.auth.roles.${role}`, { defaultValue: role })}
-							value={String(count)}
-						/>
-					))}
-					{unverified > 0 && (
-						<CardStatLine
-							label={t("pages.dashboard.cards.team.unverified")}
-							value={String(unverified)}
-							color={theme.palette.warning.main}
-						/>
-					)}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};

client/src/Pages/Dashboard/Components/Cards/BreakdownCard.tsx

@@ -1,97 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardMeterRow, CardRow } from "../CardPrimitives";
-
-export interface BreakdownBucket {
-	/** Stable key and displayed label. */
-	key: string;
-	label: string;
-	total: number;
-	down: number;
-	/** Where the row links to, if anywhere. */
-	to?: string;
-}
-
-/**
- * "How the fleet splits by X" — one proportional row per bucket, flagging any
- * bucket with something down. Monitors by type and Monitors by group are the
- * same card over different keys, so they share this shell.
- */
-export const BreakdownCard = ({
-	titleKey,
-	emptyKey,
-	to,
-	buckets,
-	isLoading,
-	isStale,
-	error,
-}: {
-	titleKey: string;
-	emptyKey: string;
-	to?: string;
-	buckets: BreakdownBucket[];
-	isLoading?: boolean;
-	isStale?: boolean;
-	error?: unknown;
-}) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-
-	const max = Math.max(0, ...buckets.map((bucket) => bucket.total));
-
-	return (
-		<DashboardCard
-			title={t(titleKey)}
-			to={to}
-			isLoading={isLoading}
-			error={error}
-			isStale={isStale}
-		>
-			{buckets.length === 0 ? (
-				<CardMessage text={t(emptyKey)} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					{buckets.map((bucket) => (
-						<CardRow
-							key={bucket.key}
-							to={bucket.to}
-						>
-							<CardMeterRow
-								label={bucket.label}
-								value={bucket.total}
-								max={max}
-								color={
-									bucket.down > 0 ? theme.palette.error.main : theme.palette.primary.main
-								}
-								trailing={
-									<Stack
-										direction="row"
-										alignItems="center"
-										gap={theme.spacing(LAYOUT.XS)}
-										flexShrink={0}
-									>
-										{bucket.down > 0 && (
-											<Typography color={theme.palette.error.main}>
-												{t("pages.dashboard.cards.monitorsByType.down", {
-													count: bucket.down,
-												})}
-											</Typography>
-										)}
-										<Typography color={theme.palette.text.secondary}>
-											{bucket.total}
-										</Typography>
-									</Stack>
-								}
-							/>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};

client/src/Pages/Dashboard/Components/Cards/BusiestServersCard.tsx

@@ -1,143 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardBar, CardRow, CardRowLabel } from "../CardPrimitives";
-import { useMonitors } from "../../useDashboardData";
-
-import { latestCheck } from "../../checks";
-
-import type { Monitor } from "@/Types/Monitor";
-
-// <60% fine, 60-85% warm, above that hot.
-const WARM = 60;
-const HOT = 85;
-
-interface ServerUsage {
-	monitor: Monitor;
-	cpu: number | null;
-	memory: number | null;
-	disk: number | null;
-	peak: number;
-}
-
-const Metric = ({ label, value }: { label: string; value: number | null }) => {
-	const theme = useTheme();
-	const color =
-		value === null
-			? theme.palette.text.secondary
-			: value > HOT
-				? theme.palette.error.main
-				: value > WARM
-					? theme.palette.warning.main
-					: theme.palette.primary.main;
-
-	return (
-		<Stack
-			flex={1}
-			minWidth={0}
-			gap={theme.spacing(LAYOUT.XXS)}
-		>
-			<Stack
-				direction="row"
-				alignItems="baseline"
-				justifyContent="space-between"
-				gap={theme.spacing(LAYOUT.XS)}
-			>
-				<Typography color={theme.palette.text.secondary}>{label}</Typography>
-				<Typography color={color}>
-					{/* A down server reports nothing — show a dash, never 0%. */}
-					{value === null ? "—" : `${value.toFixed(1)}%`}
-				</Typography>
-			</Stack>
-			<CardBar
-				value={value ?? 0}
-				color={color}
-			/>
-		</Stack>
-	);
-};
-
-export const BusiestServersCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const servers = useMemo<ServerUsage[]>(() => {
-		return (data?.monitors ?? [])
-			.filter((monitor) => monitor.type === "hardware")
-			.map((monitor) => {
-				const latest = latestCheck(monitor);
-				// snake_case here, unlike camelCase in HardwareCheckStats, and
-				// these are 0-1 fractions, so scale to percent.
-				const toPercent = (value: number | undefined) =>
-					typeof value === "number" ? value * 100 : null;
-				const cpu = toPercent(latest?.cpu?.usage_percent);
-				const memory = toPercent(latest?.memory?.usage_percent);
-				const disks = (latest?.disk ?? [])
-					.map((entry) => entry.usage_percent)
-					.filter((value): value is number => typeof value === "number");
-				const disk = disks.length > 0 ? Math.max(...disks) * 100 : null;
-				return {
-					monitor,
-					cpu,
-					memory,
-					disk,
-					peak: Math.max(cpu ?? 0, memory ?? 0, disk ?? 0),
-				};
-			})
-			.sort((a, b) => b.peak - a.peak);
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.busiestServers.title")}
-			to="/infrastructure"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{servers.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.busiestServers.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					{servers.map(({ monitor, cpu, memory, disk }) => (
-						<CardRow
-							key={monitor.id}
-							to={`/infrastructure/${monitor.id}`}
-						>
-							<Stack
-								flex={1}
-								minWidth={0}
-								gap={theme.spacing(LAYOUT.XS)}
-							>
-								<CardRowLabel primary={monitor.name} />
-								<Stack
-									direction="row"
-									gap={theme.spacing(LAYOUT.MD)}
-								>
-									<Metric
-										label={t("pages.dashboard.cards.busiestServers.cpu")}
-										value={cpu}
-									/>
-									<Metric
-										label={t("pages.dashboard.cards.busiestServers.memory")}
-										value={memory}
-									/>
-									<Metric
-										label={t("pages.dashboard.cards.busiestServers.disk")}
-										value={disk}
-									/>
-								</Stack>
-							</Stack>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};

client/src/Pages/Dashboard/Components/Cards/CheckmateServerCard.tsx

@@ -1,93 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-
-import { useGet } from "@/Hooks/UseApi";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatDuration } from "@/Utils/TimeUtils";
-import { DashboardCard } from "../DashboardCard";
-import { CardBar, CardStatLine } from "../CardPrimitives";
-
-import { REFRESH_INTERVAL_MS } from "../../cards";
-
-import type { Diagnostics } from "@/Types/Diagnostics";
-
-const BYTES_PER_MB = 1024 * 1024;
-
-// Banding from CARD-SPECS: warm at 50ms of event-loop delay, hot at 200ms;
-// heap warm past 80% of the V8 limit.
-const EVENT_LOOP_WARM_MS = 50;
-const EVENT_LOOP_HOT_MS = 200;
-const HEAP_WARM_RATIO = 0.8;
-
-/**
- * The one card that is never empty — it reports on Checkmate itself, so it
- * works on a fresh install with zero monitors. Admin only.
- */
-export const CheckmateServerCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<Diagnostics>(
-		"/diagnostic/system",
-		{},
-		{ refreshInterval: REFRESH_INTERVAL_MS }
-	);
-
-	const usedHeap = data?.v8HeapStats.usedHeapSizeBytes ?? 0;
-	const heapLimit = data?.v8HeapStats.heapSizeLimitBytes ?? 0;
-	const heapRatio = heapLimit > 0 ? usedHeap / heapLimit : 0;
-	const heapColor =
-		heapRatio > HEAP_WARM_RATIO ? theme.palette.warning.main : theme.palette.primary.main;
-
-	const eventLoopMs = data?.eventLoopDelayMs ?? 0;
-	const eventLoopColor =
-		eventLoopMs > EVENT_LOOP_HOT_MS
-			? theme.palette.error.main
-			: eventLoopMs > EVENT_LOOP_WARM_MS
-				? theme.palette.warning.main
-				: theme.palette.text.primary;
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.checkmateServer.title")}
-			to="/logs"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{data && (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<Stack gap={theme.spacing(LAYOUT.XXS)}>
-						<CardStatLine
-							label={t("pages.dashboard.cards.checkmateServer.memory")}
-							value={`${Math.round(usedHeap / BYTES_PER_MB)} / ${Math.round(
-								heapLimit / BYTES_PER_MB
-							)} MB`}
-							color={heapColor}
-						/>
-						<CardBar
-							value={heapRatio * 100}
-							color={heapColor}
-						/>
-					</Stack>
-					<CardStatLine
-						label={t("pages.dashboard.cards.checkmateServer.eventLoop")}
-						value={`${eventLoopMs.toFixed(1)} ms`}
-						color={eventLoopColor}
-					/>
-					<CardStatLine
-						label={t("pages.dashboard.cards.checkmateServer.uptime")}
-						value={formatDuration(data.uptimeMs)}
-					/>
-					<CardStatLine
-						label={t("pages.dashboard.cards.checkmateServer.database")}
-						value={t("pages.dashboard.cards.checkmateServer.readsWrites", {
-							reads: data.mongoStats.readsPerSecond.toFixed(1),
-							writes: data.mongoStats.writesPerSecond.toFixed(1),
-						})}
-					/>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};

client/src/Pages/Dashboard/Components/Cards/CurrentlyDownCard.tsx

@@ -1,157 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { Dot } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { getStatusColor, getMonitorPath } from "@/Utils/MonitorUtils";
-import { formatStatusCode } from "@/Utils/statusCode";
-import { formatDuration } from "@/Utils/TimeUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardRow } from "../CardPrimitives";
-import { Sparkline } from "../Sparkline";
-import { useMonitors } from "../../useDashboardData";
-
-import { latestCheck } from "../../checks";
-
-import type { Monitor, MonitorStatus } from "@/Types/Monitor";
-
-const SPARKLINE_WIDTH = 80;
-
-const STATUS_RANK: Partial<Record<MonitorStatus, number>> = {
-	down: 1,
-	breached: 2,
-};
-
-const isProblem = (monitor: Monitor) => STATUS_RANK[monitor.status] !== undefined;
-
-/**
- * How long the monitor has been down, from the oldest consecutive failing
- * check. recentChecks is oldest-first, so the run is walked back from the end.
- */
-const downSince = (monitor: Monitor): string | null => {
-	const checks = monitor.recentChecks ?? [];
-	let oldestFailing: string | null = null;
-	for (let index = checks.length - 1; index >= 0; index -= 1) {
-		if (checks[index].status !== false) {
-			break;
-		}
-		oldestFailing = checks[index].createdAt;
-	}
-	return oldestFailing;
-};
-
-export const CurrentlyDownCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const problems = useMemo(() => {
-		const monitors = data?.monitors ?? [];
-		return monitors
-			.filter(isProblem)
-			.map((monitor) => ({ monitor, since: downSince(monitor) }))
-			.sort((a, b) => {
-				const rank =
-					(STATUS_RANK[a.monitor.status] ?? 99) - (STATUS_RANK[b.monitor.status] ?? 99);
-				if (rank !== 0) {
-					return rank;
-				}
-				// Tie-break on longest downtime: the older timestamp ranks first.
-				return new Date(a.since ?? 0).getTime() - new Date(b.since ?? 0).getTime();
-			});
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.currentlyDown.title")}
-			to="/incidents"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				problems.length > 0 ? (
-					<Typography color={theme.palette.error.main}>
-						{t("pages.dashboard.cards.currentlyDown.count", {
-							count: problems.length,
-						})}
-					</Typography>
-				) : null
-			}
-		>
-			{problems.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.currentlyDown.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					{problems.map(({ monitor, since }) => (
-						<CardRow
-							key={monitor.id}
-							to={`/${getMonitorPath(monitor.type)}/${monitor.id}`}
-						>
-							<Dot
-								color={getStatusColor(monitor.status, theme)}
-								size="md"
-							/>
-							<Stack
-								flex={1}
-								minWidth={0}
-								gap={theme.spacing(LAYOUT.XXS)}
-							>
-								<Stack
-									direction="row"
-									alignItems="baseline"
-									justifyContent="space-between"
-									gap={theme.spacing(LAYOUT.SM)}
-								>
-									<Typography
-										color={theme.palette.text.primary}
-										noWrap
-									>
-										{monitor.name}
-									</Typography>
-									{since && (
-										<Typography
-											color={theme.palette.error.main}
-											flexShrink={0}
-										>
-											{formatDuration(Date.now() - new Date(since).getTime())}
-										</Typography>
-									)}
-								</Stack>
-								<Stack
-									direction="row"
-									alignItems="center"
-									justifyContent="space-between"
-									gap={theme.spacing(LAYOUT.SM)}
-								>
-									{/* Not StatusCodeLabel: its Tooltip is focusable, and a
-									    focusable element inside the row's link is unreachable
-									    by keyboard. */}
-									<Typography
-										color={theme.palette.text.secondary}
-										noWrap
-									>
-										{monitor.type} ·{" "}
-										{formatStatusCode(latestCheck(monitor)?.statusCode, t)}
-									</Typography>
-									<Box
-										width={SPARKLINE_WIDTH}
-										flexShrink={0}
-									>
-										<Sparkline
-											checks={monitor.recentChecks ?? []}
-											color={theme.palette.error.main}
-										/>
-									</Box>
-								</Stack>
-							</Stack>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};

client/src/Pages/Dashboard/Components/Cards/FailedChecksCard.tsx

@@ -1,54 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-
-import { useGet } from "@/Hooks/UseApi";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardBar, CardFigure } from "../CardPrimitives";
-
-import type { ChecksSummary } from "@/Types/Check";
-
-// Day only. `dateRange=week` returns figures identical to `day`, so a range
-// selector here would silently lie.
-const SUMMARY_URL = "/checks/team/summary?dateRange=day";
-
-export const FailedChecksCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<ChecksSummary>(SUMMARY_URL);
-
-	const total = data?.totalChecks ?? 0;
-	const failed = data?.downChecks ?? 0;
-	const percentage = total > 0 ? (failed / total) * 100 : 0;
-	const color = percentage > 10 ? theme.palette.error.main : theme.palette.success.main;
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.failedChecks.title")}
-			to="/checks"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{total === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.failedChecks.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<CardFigure
-						value={`${percentage.toFixed(1)}%`}
-						caption={t("pages.dashboard.cards.failedChecks.ratio", {
-							failed: failed.toLocaleString(),
-							total: total.toLocaleString(),
-						})}
-						color={color}
-					/>
-					<CardBar
-						value={percentage}
-						color={color}
-					/>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};

client/src/Pages/Dashboard/Components/Cards/MonitorStatusCard.tsx

@@ -1,138 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { Link as RouterLink } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-
-import { Dot } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { typographyLevels } from "@/Utils/Theme/Palette";
-import { getStatusColor } from "@/Utils/MonitorUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardSegmentedBar, type BarSegment } from "../CardPrimitives";
-import { useMonitors } from "../../useDashboardData";
-
-import type { MonitorStatus, MonitorsSummary } from "@/Types/Monitor";
-
-// Every state the summary reports, ordered worst first so the bar reads
-// problems-to-healthy left to right and the chips below list what is wrong
-// before what is merely idle. `up` is handled separately as the headline.
-const STATES: { key: string; status: MonitorStatus; field: keyof MonitorsSummary }[] = [
-	{ key: "down", status: "down", field: "downMonitors" },
-	{ key: "breached", status: "breached", field: "breachedMonitors" },
-	{ key: "initializing", status: "initializing", field: "initializingMonitors" },
-	{ key: "maintenance", status: "maintenance", field: "maintenanceMonitors" },
-	{ key: "paused", status: "paused", field: "pausedMonitors" },
-];
-
-export const MonitorStatusCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-	const summary = data?.summary ?? null;
-
-	// Only states that actually have monitors are shown. Padding the card with
-	// zeros says nothing, and a healthy fleet should read as calm rather than as
-	// a row of empty counters.
-	const present = summary
-		? STATES.map((state) => ({ ...state, count: summary[state.field] })).filter(
-				(state) => state.count > 0
-			)
-		: [];
-
-	const segments: BarSegment[] = summary
-		? [
-				{
-					key: "up",
-					value: summary.upMonitors,
-					color: getStatusColor("up", theme),
-					label: `${t("pages.common.monitors.status.up")} — ${summary.upMonitors}`,
-				},
-				...present.map((state) => ({
-					key: state.key,
-					value: state.count,
-					color: getStatusColor(state.status, theme),
-					label: `${t(`pages.common.monitors.status.${state.key}`)} — ${state.count}`,
-				})),
-			]
-		: [];
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.monitorStatus.title")}
-			to="/uptime"
-			isLoading={isLoading && !summary}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{!summary || summary.totalMonitors === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.monitorStatus.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					<Stack gap={theme.spacing(LAYOUT.SM)}>
-						<Stack
-							direction="row"
-							alignItems="baseline"
-							gap={theme.spacing(LAYOUT.XS)}
-						>
-							<Typography
-								fontSize={typographyLevels.xxl}
-								fontWeight={300}
-								color={theme.palette.text.primary}
-								lineHeight={1.1}
-							>
-								{summary.upMonitors}
-							</Typography>
-							<Typography color={theme.palette.text.secondary}>
-								{t("pages.dashboard.cards.monitorStatus.upOfTotal", {
-									total: summary.totalMonitors,
-								})}
-							</Typography>
-						</Stack>
-						<CardSegmentedBar segments={segments} />
-					</Stack>
-					{present.length > 0 && (
-						<Stack
-							direction="row"
-							flexWrap="wrap"
-							gap={theme.spacing(LAYOUT.MD)}
-						>
-							{present.map((state) => (
-								<Stack
-									key={state.key}
-									component={RouterLink}
-									// Plain /uptime: the monitors list does not read query
-									// params, so a ?status= filter would be silently dropped
-									// and the link would lie about where it goes.
-									to="/uptime"
-									direction="row"
-									alignItems="center"
-									gap={theme.spacing(LAYOUT.XS)}
-									px={theme.spacing(LAYOUT.XS)}
-									py={theme.spacing(LAYOUT.XXS)}
-									mx={`-${theme.spacing(LAYOUT.XS)}`}
-									borderRadius={theme.shape.borderRadius}
-									sx={{
-										textDecoration: "none",
-										"&:hover": { backgroundColor: theme.palette.action.hover },
-									}}
-								>
-									<Dot
-										color={getStatusColor(state.status, theme)}
-										size="md"
-									/>
-									<Typography color={theme.palette.text.secondary}>
-										{t(`pages.common.monitors.status.${state.key}`)}
-									</Typography>
-									<Typography color={theme.palette.text.primary}>
-										{state.count}
-									</Typography>
-								</Stack>
-							))}
-						</Stack>
-					)}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};

client/src/Pages/Dashboard/Components/Cards/MonitorsByGroupCard.tsx

@@ -1,43 +0,0 @@
-import { useMemo } from "react";
-
-import { BreakdownCard, type BreakdownBucket } from "./BreakdownCard";
-import { useMonitors } from "../../useDashboardData";
-
-export const MonitorsByGroupCard = () => {
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	// `group` is a plain string | null on the monitor — there is no groups
-	// endpoint, so the set is whatever monitors actually declare.
-	const buckets = useMemo<BreakdownBucket[]>(() => {
-		const byGroup = new Map<string, BreakdownBucket>();
-		for (const monitor of data?.monitors ?? []) {
-			if (!monitor.group) {
-				continue;
-			}
-			const bucket = byGroup.get(monitor.group) ?? {
-				key: monitor.group,
-				label: monitor.group,
-				total: 0,
-				down: 0,
-			};
-			bucket.total += 1;
-			if (monitor.status === "down" || monitor.status === "breached") {
-				bucket.down += 1;
-			}
-			byGroup.set(monitor.group, bucket);
-		}
-		return [...byGroup.values()].sort((a, b) => b.total - a.total);
-	}, [data]);
-
-	return (
-		<BreakdownCard
-			titleKey="pages.dashboard.cards.monitorsByGroup.title"
-			emptyKey="pages.dashboard.cards.monitorsByGroup.empty"
-			to="/uptime"
-			buckets={buckets}
-			isLoading={isLoading && !data}
-			isStale={isValidating && Boolean(data)}
-			error={error}
-		/>
-	);
-};

client/src/Pages/Dashboard/Components/Cards/MonitorsByTypeCard.tsx

@@ -1,42 +0,0 @@
-import { useMemo } from "react";
-
-import { getMonitorPath } from "@/Utils/MonitorUtils";
-import { BreakdownCard, type BreakdownBucket } from "./BreakdownCard";
-import { useMonitors } from "../../useDashboardData";
-
-import type { MonitorType } from "@/Types/Monitor";
-
-export const MonitorsByTypeCard = () => {
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const buckets = useMemo<BreakdownBucket[]>(() => {
-		const byType = new Map<MonitorType, BreakdownBucket>();
-		for (const monitor of data?.monitors ?? []) {
-			const bucket = byType.get(monitor.type) ?? {
-				key: monitor.type,
-				label: monitor.type,
-				total: 0,
-				down: 0,
-				to: `/${getMonitorPath(monitor.type)}`,
-			};
-			bucket.total += 1;
-			if (monitor.status === "down" || monitor.status === "breached") {
-				bucket.down += 1;
-			}
-			byType.set(monitor.type, bucket);
-		}
-		return [...byType.values()].sort((a, b) => b.total - a.total);
-	}, [data]);
-
-	return (
-		<BreakdownCard
-			titleKey="pages.dashboard.cards.monitorsByType.title"
-			emptyKey="pages.dashboard.cards.monitorsByType.empty"
-			to="/uptime"
-			buckets={buckets}
-			isLoading={isLoading && !data}
-			isStale={isValidating && Boolean(data)}
-			error={error}
-		/>
-	);
-};

client/src/Pages/Dashboard/Components/Cards/RankingCards.tsx

@@ -1,175 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { getMonitorPath, getUptimePercentageColor } from "@/Utils/MonitorUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardMeterRow, CardRow, CardRowLabel } from "../CardPrimitives";
-import { useMonitors } from "../../useDashboardData";
-
-import type { Monitor } from "@/Types/Monitor";
-
-const TOP_N = 5;
-// A ranking of one is not a ranking.
-const MIN_RANKABLE = 2;
-
-const averageResponseTime = (monitor: Monitor): number | null => {
-	const times = (monitor.recentChecks ?? [])
-		.map((check) => check.responseTime)
-		.filter((value): value is number => typeof value === "number");
-	if (times.length === 0) {
-		return null;
-	}
-	return times.reduce((sum, value) => sum + value, 0) / times.length;
-};
-
-/** Header reads "top 5 of 12" so a truncated ranking says so. */
-const RankingCount = ({ shown, total }: { shown: number; total: number }) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	return (
-		<Typography color={theme.palette.text.secondary}>
-			{t("pages.dashboard.cards.ranking.topOf", { shown, total })}
-		</Typography>
-	);
-};
-
-export const SlowestMonitorsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const ranked = useMemo(() => {
-		return (data?.monitors ?? [])
-			.filter((monitor) => monitor.status !== "paused")
-			.map((monitor) => ({ monitor, average: averageResponseTime(monitor) }))
-			.filter(
-				(entry): entry is { monitor: Monitor; average: number } => entry.average !== null
-			)
-			.sort((a, b) => b.average - a.average);
-	}, [data]);
-
-	const slowest = ranked[0]?.average ?? 0;
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.slowestMonitors.title")}
-			to="/uptime"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				ranked.length >= MIN_RANKABLE ? (
-					<RankingCount
-						shown={Math.min(TOP_N, ranked.length)}
-						total={ranked.length}
-					/>
-				) : null
-			}
-		>
-			{ranked.length < MIN_RANKABLE ? (
-				<CardMessage text={t("pages.dashboard.cards.ranking.notEnough")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					{ranked.slice(0, TOP_N).map(({ monitor, average }) => (
-						<CardRow
-							key={monitor.id}
-							to={`/${getMonitorPath(monitor.type)}/${monitor.id}`}
-						>
-							<CardMeterRow
-								label={<CardRowLabel primary={monitor.name} />}
-								value={average}
-								max={slowest}
-								color={theme.palette.primary.main}
-								trailing={
-									<Typography
-										color={theme.palette.text.secondary}
-										flexShrink={0}
-									>
-										{Math.round(average)} ms
-									</Typography>
-								}
-							/>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-export const LowestUptimeCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const ranked = useMemo(() => {
-		return (
-			(data?.monitors ?? [])
-				// Paused monitors keep whatever uptime they had, or zero — a paused
-				// ping monitor reads 0% and would rank beside a genuinely down one.
-				// Neither is a live problem, so neither belongs in a worst-uptime list.
-				.filter((monitor) => monitor.status !== "paused")
-				.filter(
-					(monitor): monitor is Monitor & { uptimePercentage: number } =>
-						typeof monitor.uptimePercentage === "number"
-				)
-				.sort((a, b) => a.uptimePercentage - b.uptimePercentage)
-		);
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.lowestUptime.title")}
-			to="/uptime"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				ranked.length >= MIN_RANKABLE ? (
-					<RankingCount
-						shown={Math.min(TOP_N, ranked.length)}
-						total={ranked.length}
-					/>
-				) : null
-			}
-		>
-			{ranked.length < MIN_RANKABLE ? (
-				<CardMessage text={t("pages.dashboard.cards.ranking.notEnough")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					{ranked.slice(0, TOP_N).map((monitor) => {
-						// uptimePercentage is a 0-1 fraction, not 0-100.
-						const percentage = monitor.uptimePercentage * 100;
-						const palette = getUptimePercentageColor(monitor.uptimePercentage);
-						return (
-							<CardRow
-								key={monitor.id}
-								to={`/${getMonitorPath(monitor.type)}/${monitor.id}`}
-							>
-								<CardMeterRow
-									label={<CardRowLabel primary={monitor.name} />}
-									// The card ranks worst uptime first, so the bar shows the
-									// shortfall - the worst monitor gets the longest bar.
-									value={100 - percentage}
-									color={theme.palette[palette].main}
-									trailing={
-										<Typography
-											color={theme.palette[palette].main}
-											flexShrink={0}
-										>
-											{percentage.toFixed(1)}%
-										</Typography>
-									}
-								/>
-							</CardRow>
-						);
-					})}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};

client/src/Pages/Dashboard/Components/Cards/RecentIncidentsCard.tsx

@@ -1,99 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-
-import { useGet } from "@/Hooks/UseApi";
-import { Dot } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatDuration, formatTimestamp } from "@/Utils/TimeUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardRow, CardRowLabel } from "../CardPrimitives";
-
-import type { IncidentSummary, IncidentSummaryItem } from "@/Types/Incident";
-
-const MAX_ROWS = 5;
-
-/** Open incidents have no end time; closed ones report how long they ran. */
-const incidentDuration = (incident: IncidentSummaryItem): string | null => {
-	if (!incident.endTime) {
-		return null;
-	}
-	const ms =
-		new Date(incident.endTime).getTime() - new Date(incident.startTime).getTime();
-	return ms > 0 ? formatDuration(ms) : null;
-};
-
-export const RecentIncidentsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<IncidentSummary>(
-		"/incidents/team/summary"
-	);
-
-	const incidents = (data?.latestIncidents ?? []).slice(0, MAX_ROWS);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.recentIncidents.title")}
-			to="/incidents"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				data && data.totalActive > 0 ? (
-					<Typography color={theme.palette.error.main}>
-						{t("pages.dashboard.cards.recentIncidents.active", {
-							count: data.totalActive,
-						})}
-					</Typography>
-				) : null
-			}
-		>
-			{incidents.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.recentIncidents.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					{incidents.map((incident) => {
-						const isOpen = incident.status === true;
-						const duration = incidentDuration(incident);
-						return (
-							<CardRow
-								key={incident.id}
-								to="/incidents"
-							>
-								<Dot
-									color={isOpen ? theme.palette.error.light : theme.palette.success.light}
-									size="md"
-								/>
-								<CardRowLabel
-									primary={
-										incident.monitorName ??
-										t("pages.dashboard.cards.recentIncidents.unknownMonitor")
-									}
-									secondary={formatTimestamp(incident.startTime)}
-								/>
-								<Typography
-									color={theme.palette.text.secondary}
-									sx={{ flexShrink: 0 }}
-								>
-									{isOpen
-										? t("pages.dashboard.cards.recentIncidents.ongoing")
-										: (duration ?? "—")}
-								</Typography>
-								{incident.resolutionType === "manual" && (
-									<Typography
-										color={theme.palette.warning.main}
-										sx={{ flexShrink: 0 }}
-									>
-										{t("pages.dashboard.cards.recentIncidents.manual")}
-									</Typography>
-								)}
-							</CardRow>
-						);
-					})}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};

client/src/Pages/Dashboard/Components/Cards/SummaryCards.tsx

@@ -1,258 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { useGet } from "@/Hooks/UseApi";
-import { Dot } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatTimestamp } from "@/Utils/TimeUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import {
-	CardFigure,
-	CardRow,
-	CardRowLabel,
-	CardSegmentedBar,
-	CardStatLine,
-} from "../CardPrimitives";
-
-import type { IncidentSummary } from "@/Types/Incident";
-import type { Notification } from "@/Types/Notification";
-import type { MaintenanceWindow } from "@/Types/MaintenanceWindow";
-import type { StatusPage } from "@/Types/StatusPage";
-
-/** Free when Recent incidents is present — same summary call, shared by SWR. */
-export const IncidentStatsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<IncidentSummary>(
-		"/incidents/team/summary"
-	);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.incidentStats.title")}
-			to="/incidents"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{data && (
-				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					{/* Open now leads, paired with the all-time total for context: two
-					    open means something different against 12 incidents than 183. */}
-					<Stack
-						direction="row"
-						gap={theme.spacing(LAYOUT.XXL)}
-					>
-						<CardFigure
-							value={String(data.totalActive)}
-							caption={t("pages.dashboard.cards.incidentStats.openNow")}
-							color={
-								data.totalActive > 0
-									? theme.palette.error.main
-									: theme.palette.success.main
-							}
-						/>
-						<CardFigure
-							value={data.total.toLocaleString()}
-							caption={t("pages.dashboard.cards.incidentStats.total")}
-						/>
-					</Stack>
-					{/* How much of the fleet heals itself — the automatic/manual split
-					    is already computed server-side and said nothing on the card
-					    before. A high manual share means people are doing the work. */}
-					{data.totalAutomaticResolutions + data.totalManualResolutions > 0 && (
-						<Stack gap={theme.spacing(LAYOUT.XS)}>
-							<CardSegmentedBar
-								segments={[
-									{
-										key: "automatic",
-										value: data.totalAutomaticResolutions,
-										color: theme.palette.success.main,
-										label: `${t("pages.dashboard.cards.incidentStats.automatic")} — ${data.totalAutomaticResolutions}`,
-									},
-									{
-										key: "manual",
-										value: data.totalManualResolutions,
-										color: theme.palette.warning.main,
-										label: `${t("pages.dashboard.cards.incidentStats.manual")} — ${data.totalManualResolutions}`,
-									},
-								]}
-							/>
-							<CardStatLine
-								label={t("pages.dashboard.cards.incidentStats.resolved")}
-								value={t("pages.dashboard.cards.incidentStats.autoManual", {
-									automatic: data.totalAutomaticResolutions,
-									manual: data.totalManualResolutions,
-								})}
-							/>
-						</Stack>
-					)}
-					<Stack gap={theme.spacing(LAYOUT.XS)}>
-						<CardStatLine
-							label={t("pages.dashboard.cards.incidentStats.avgResolution")}
-							value={t("pages.dashboard.cards.incidentStats.hours", {
-								hours: data.avgResolutionTimeHours.toFixed(1),
-							})}
-						/>
-						{data.topMonitor?.monitorName && (
-							<CardStatLine
-								label={t("pages.dashboard.cards.incidentStats.mostIncidents")}
-								value={`${data.topMonitor.monitorName} (${data.topMonitor.incidentCount})`}
-							/>
-						)}
-					</Stack>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-export const NotificationChannelsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } =
-		useGet<Notification[]>("/notifications/team");
-
-	// The response also carries accessToken and accountSid. Only `type` is read
-	// here — credential fields must never reach the DOM.
-	const byType = useMemo(() => {
-		const counts = new Map<string, number>();
-		for (const notification of data ?? []) {
-			counts.set(notification.type, (counts.get(notification.type) ?? 0) + 1);
-		}
-		return [...counts.entries()].sort((a, b) => b[1] - a[1]);
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.notificationChannels.title")}
-			to="/notifications"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{byType.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.notificationChannels.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					{byType.map(([type, count]) => (
-						<CardStatLine
-							key={type}
-							label={type}
-							value={String(count)}
-						/>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-export const MaintenanceCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<{
-		maintenanceWindows: MaintenanceWindow[];
-		maintenanceWindowCount: number;
-	}>("/maintenance-window/team?page=0&rowsPerPage=0");
-
-	// `active` is a user on/off flag, not "running now" — compare the window
-	// client-side. repeat > 0 means recurring, so `end` may sit in the past for
-	// a window that is currently live.
-	const { running, next } = useMemo(() => {
-		const now = Date.now();
-		const windows = (data?.maintenanceWindows ?? []).filter((entry) => entry.active);
-		const live = windows.filter((entry) => {
-			const start = new Date(entry.start).getTime();
-			const end = new Date(entry.end).getTime();
-			return start <= now && (now <= end || entry.repeat > 0);
-		});
-		const upcoming = windows
-			.filter((entry) => new Date(entry.start).getTime() > now)
-			.sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());
-		return { running: live.length, next: upcoming[0] ?? null };
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.maintenance.title")}
-			to="/maintenance"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{!data || data.maintenanceWindows.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.maintenance.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<CardFigure
-						value={String(running)}
-						caption={t("pages.dashboard.cards.maintenance.runningNow")}
-					/>
-					{next && (
-						<CardStatLine
-							label={t("pages.dashboard.cards.maintenance.next")}
-							value={formatTimestamp(next.start)}
-						/>
-					)}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-export const StatusPagesCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } =
-		useGet<StatusPage[]>("/status-page/team");
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.statusPages.title")}
-			to="/status"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{!data || data.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.statusPages.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					{data.map((page) => (
-						<CardRow
-							key={page.id}
-							to={`/status/${page.url}`}
-						>
-							<Dot
-								color={
-									page.isPublished
-										? theme.palette.success.light
-										: theme.palette.text.secondary
-								}
-								size="md"
-							/>
-							<CardRowLabel
-								primary={page.companyName}
-								secondary={t("pages.dashboard.cards.statusPages.monitorCount", {
-									count: page.monitors.length,
-								})}
-							/>
-							<Typography
-								color={theme.palette.text.secondary}
-								flexShrink={0}
-							>
-								{page.isPublished
-									? t("pages.dashboard.cards.statusPages.published")
-									: t("pages.dashboard.cards.statusPages.draft")}
-							</Typography>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};

client/src/Pages/Dashboard/Components/DashboardCard.tsx

@@ -1,159 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import CircularProgress from "@mui/material/CircularProgress";
-import Skeleton from "@mui/material/Skeleton";
-import { useTheme } from "@mui/material/styles";
-import { Link as RouterLink } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-
-import { BaseBox } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { useCardSlot } from "./CardSlotContext";
-
-import type { ReactNode } from "react";
-
-// Control height plus the header's vertical padding, so a card with no action
-// still lines up with one that has a button in its header.
-const HEADER_MIN_HEIGHT = 44;
-const SKELETON_ROW_HEIGHT = 20;
-
-interface DashboardCardProps {
-	title: string;
-	/** Where the title links to — the page this card belongs to. */
-	to?: string;
-	/** Rendered at the right of the header: a count, an average, a filter. */
-	action?: ReactNode;
-	isLoading?: boolean;
-	error?: unknown;
-	/** Dimmed rather than blanked while a refresh is in flight over stale data. */
-	isStale?: boolean;
-	children: ReactNode;
-}
-
-export const DashboardCard = ({
-	title,
-	to,
-	action,
-	isLoading,
-	error,
-	isStale,
-	children,
-}: DashboardCardProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const slot = useCardSlot();
-
-	return (
-		<BaseBox
-			display="flex"
-			flexDirection="column"
-			height="100%"
-			sx={{
-				overflow: "hidden",
-				"&:hover .dashboard-card-slot": {
-					opacity: 1,
-				},
-			}}
-		>
-			<Stack
-				direction="row"
-				alignItems="center"
-				justifyContent="space-between"
-				gap={theme.spacing(LAYOUT.SM)}
-				px={theme.spacing(LAYOUT.MD)}
-				py={theme.spacing(LAYOUT.SM)}
-				borderBottom={`1px solid ${theme.palette.divider}`}
-				minHeight={HEADER_MIN_HEIGHT}
-			>
-				<Typography
-					{...(to ? { component: RouterLink, to } : {})}
-					fontWeight={500}
-					color={theme.palette.text.primary}
-					sx={{
-						textDecoration: "none",
-						...(to && {
-							"&:hover": { color: theme.palette.primary.main },
-						}),
-					}}
-				>
-					{title}
-				</Typography>
-				<Stack
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(LAYOUT.SM)}
-					flexShrink={0}
-					position="relative"
-				>
-					{isStale && (
-						<CircularProgress
-							size={16}
-							color="primary"
-						/>
-					)}
-					{action && <Box>{action}</Box>}
-					{slot && (
-						<Box
-							className="dashboard-card-slot"
-							sx={{
-								opacity: 0.3,
-								transition: "opacity 0.15s ease",
-							}}
-						>
-							{slot}
-						</Box>
-					)}
-				</Stack>
-			</Stack>
-			<Box
-				flex={1}
-				p={theme.spacing(LAYOUT.MD)}
-				sx={{
-					...(isStale && { opacity: 0.5, transition: "opacity 0.2s ease" }),
-				}}
-			>
-				{isLoading ? (
-					<CardSkeleton />
-				) : error ? (
-					<CardMessage text={t("pages.dashboard.card.error")} />
-				) : (
-					children
-				)}
-			</Box>
-		</BaseBox>
-	);
-};
-
-/** Placeholder rows, sized to the row list most cards render. */
-export const CardSkeleton = ({ rows = 3 }: { rows?: number }) => {
-	const theme = useTheme();
-	return (
-		<Stack gap={theme.spacing(LAYOUT.SM)}>
-			{Array.from({ length: rows }).map((_, index) => (
-				<Skeleton
-					key={index}
-					variant="rounded"
-					height={SKELETON_ROW_HEIGHT}
-					width={index === rows - 1 ? "60%" : "100%"}
-				/>
-			))}
-		</Stack>
-	);
-};
-
-/** The quiet one-line state a healthy card collapses to. */
-export const CardMessage = ({ text, action }: { text: string; action?: ReactNode }) => {
-	const theme = useTheme();
-	return (
-		<Stack
-			direction="row"
-			alignItems="center"
-			justifyContent="space-between"
-			gap={theme.spacing(LAYOUT.SM)}
-		>
-			<Typography color={theme.palette.text.secondary}>{text}</Typography>
-			{action}
-		</Stack>
-	);
-};

client/src/Pages/Dashboard/Components/Sparkline.tsx

@@ -1,72 +0,0 @@
-import Box from "@mui/material/Box";
-import { useMemo } from "react";
-
-import type { CheckSnapshot } from "@/Types/Check";
-
-const VIEWBOX_WIDTH = 100;
-// The svg renders at its viewBox height, so one constant serves both.
-const VIEWBOX_HEIGHT = 24;
-// Matches the 1.5 stroke the shared Icon component uses.
-const STROKE_WIDTH = 1.5;
-
-/**
- * Response times as a bare polyline. Deliberately axis-free and label-free —
- * at this size the shape is the only readable signal.
- *
- * `checks` arrives oldest-first, which is already left-to-right reading order.
- */
-export const Sparkline = ({
-	checks,
-	color,
-}: {
-	checks: CheckSnapshot[];
-	color: string;
-}) => {
-	const points = useMemo(() => {
-		const values = checks
-			.map((check) => check.responseTime)
-			.filter((value): value is number => typeof value === "number");
-
-		if (values.length < 2) {
-			return null;
-		}
-
-		const max = Math.max(...values);
-		const min = Math.min(...values);
-		const span = max - min || 1;
-
-		return values
-			.map((value, index) => {
-				const x = (index / (values.length - 1)) * VIEWBOX_WIDTH;
-				const y = VIEWBOX_HEIGHT - ((value - min) / span) * VIEWBOX_HEIGHT;
-				return `${x.toFixed(1)},${y.toFixed(1)}`;
-			})
-			.join(" ");
-	}, [checks]);
-
-	if (!points) {
-		return null;
-	}
-
-	return (
-		<Box
-			component="svg"
-			viewBox={`0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}
-			preserveAspectRatio="none"
-			aria-hidden="true"
-			width="100%"
-			height={VIEWBOX_HEIGHT}
-			display="block"
-		>
-			<polyline
-				points={points}
-				fill="none"
-				stroke={color}
-				strokeWidth={STROKE_WIDTH}
-				strokeLinejoin="round"
-				strokeLinecap="round"
-				vectorEffect="non-scaling-stroke"
-			/>
-		</Box>
-	);
-};

client/src/Pages/Dashboard/cards.ts

@@ -1,84 +0,0 @@
-import type { ComponentType } from "react";
-
-// The 12-column grid the dashboard lays cards out on.
-//
-// Every card is currently half-width, so they pair up down the page and the
-// grid reads as one system. Full width stays in the type for a card whose
-// content genuinely needs it. Width is declared per card type in code and is
-// never a user setting.
-export const CardWidths = [6, 12] as const;
-export type CardWidth = (typeof CardWidths)[number];
-
-export const GRID_COLUMNS = 12;
-
-// Picker groups mirror the sidebar sections: you look for a card where you
-// look for the feature it belongs to.
-export const CardGroups = [
-	"uptime",
-	"infrastructure",
-	"incidents",
-	"notifications",
-	"maintenance",
-	"statusPages",
-	"checks",
-	"logs",
-	"settings",
-] as const;
-export type CardGroup = (typeof CardGroups)[number];
-
-// The Containers card (CARD-SPECS.md #11) is deliberately absent: it needs
-// `containerSummary` on the check snapshot, which arrives with the Docker
-// monitoring work. Add it here once that lands on develop.
-export const CardIds = [
-	"monitorStatus",
-	"currentlyDown",
-	"slowestMonitors",
-	"lowestUptime",
-	"monitorsByType",
-	"monitorsByGroup",
-	"recentIncidents",
-	"incidentStats",
-	"notificationChannels",
-	"maintenance",
-	"statusPages",
-	"failedChecks",
-	"busiestServers",
-	"checkmateServer",
-	"checksOnSchedule",
-	"recentErrors",
-	"team",
-] as const;
-export type CardId = (typeof CardIds)[number];
-
-export interface CardDefinition {
-	id: CardId;
-	/** i18n key fragment under pages.dashboard.cards.<key>. */
-	key: string;
-	group: CardGroup;
-	width: CardWidth;
-	/** Hidden from the page and absent from the picker for non-admins. */
-	adminOnly?: boolean;
-	component: ComponentType;
-}
-
-// The cards a fresh dashboard starts with. Chosen so a brand new install still
-// shows something real: Checkmate server works with zero monitors.
-// Ordered so the declared widths pair into full rows: a card left alone in a
-// row is stretched to fill it, so 8- and 4-wide cards are kept adjacent.
-export const DEFAULT_CARD_IDS: readonly CardId[] = [
-	"monitorStatus",
-	"currentlyDown",
-	"failedChecks",
-	"monitorsByType",
-	"recentIncidents",
-	"checkmateServer",
-];
-
-export const DASHBOARD_CARDS_STORAGE_KEY = "checkmate-dashboard-cards";
-
-/**
- * Poll rates, in ms. Monitor and server figures move continuously; the log ring
- * buffer rotates fast but is expensive to re-read, so it is polled slowly.
- */
-export const REFRESH_INTERVAL_MS = 30000;
-export const SLOW_REFRESH_INTERVAL_MS = 60000;

client/src/Pages/Dashboard/checks.ts

@@ -1,8 +0,0 @@
-import type { Monitor } from "@/Types/Monitor";
-
-/**
- * `recentChecks` is oldest-first — the server appends each snapshot with
- * `$push … $slice: -N` — so the newest retained check is the last element.
- */
-export const latestCheck = (monitor: Monitor) =>
-	monitor.recentChecks?.[monitor.recentChecks.length - 1];

client/src/Pages/Dashboard/index.tsx

@@ -1,86 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useState } from "react";
-import { LayoutGrid } from "lucide-react";
-
-import { BasePage, EmptyState, Icon } from "@/Components/design-elements";
-import { Button } from "@/Components/inputs";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { CardGrid } from "./Components/CardGrid";
-import { CardPicker } from "./Components/CardPicker";
-import { MonitorsContext, useMonitorsRequest } from "./useDashboardData";
-import { useCardSelection } from "./useCardSelection";
-
-const Dashboard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const monitorsRequest = useMonitorsRequest();
-	const {
-		cards,
-		available,
-		selected,
-		addCard,
-		removeCard,
-		reorderCards,
-		resetCards,
-		selectAll,
-		deselectAll,
-		allSelected,
-	} = useCardSelection();
-	const [isPickerOpen, setIsPickerOpen] = useState(false);
-
-	return (
-		<MonitorsContext.Provider value={monitorsRequest}>
-			<BasePage headerKey="dashboard">
-				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					<Stack
-						direction="row"
-						justifyContent="flex-end"
-					>
-						<Button
-							variant="outlined"
-							color="secondary"
-							onClick={() => setIsPickerOpen(true)}
-							startIcon={
-								<Icon
-									icon={LayoutGrid}
-									size={16}
-								/>
-							}
-						>
-							{t("pages.dashboard.picker.trigger")}
-						</Button>
-					</Stack>
-					{cards.length === 0 ? (
-						<EmptyState
-							title={t("pages.dashboard.empty.title")}
-							description={t("pages.dashboard.empty.description")}
-							actionText={t("pages.dashboard.picker.trigger")}
-							onAction={() => setIsPickerOpen(true)}
-						/>
-					) : (
-						<CardGrid
-							cards={cards}
-							onReorder={reorderCards}
-						/>
-					)}
-				</Stack>
-				<CardPicker
-					open={isPickerOpen}
-					available={available}
-					selected={selected}
-					allSelected={allSelected}
-					onAdd={addCard}
-					onRemove={removeCard}
-					onSelectAll={selectAll}
-					onDeselectAll={deselectAll}
-					onReset={resetCards}
-					onClose={() => setIsPickerOpen(false)}
-				/>
-			</BasePage>
-		</MonitorsContext.Provider>
-	);
-};
-
-export default Dashboard;

client/src/Pages/Dashboard/layout.ts

@@ -1,21 +0,0 @@
-import type { CardDefinition } from "./cards";
-
-export interface PlacedCard {
-	card: CardDefinition;
-	/** Columns rendered — currently always the declared width. */
-	renderedWidth: number;
-}
-
-/**
- * Packs cards into rows of GRID_COLUMNS.
- *
- * With a single body width this is a straight pass-through: two halves fill a
- * row exactly, so no card is ever stretched to close a gap.
- *
- * An odd number of cards leaves the last one alone on its row. It keeps its
- * declared width rather than being promoted to full: widening one card to fill
- * the row makes it look more important than it is, and an odd count is a
- * property of the selection, not something the layout should hide.
- */
-export const layoutCards = (cards: CardDefinition[]): PlacedCard[] =>
-	cards.map((card) => ({ card, renderedWidth: card.width }));

client/src/Pages/Dashboard/registry.ts

@@ -1,161 +0,0 @@
-import { MonitorStatusCard } from "./Components/Cards/MonitorStatusCard";
-import { CurrentlyDownCard } from "./Components/Cards/CurrentlyDownCard";
-import { FailedChecksCard } from "./Components/Cards/FailedChecksCard";
-import { RecentIncidentsCard } from "./Components/Cards/RecentIncidentsCard";
-import { MonitorsByTypeCard } from "./Components/Cards/MonitorsByTypeCard";
-import { MonitorsByGroupCard } from "./Components/Cards/MonitorsByGroupCard";
-import { CheckmateServerCard } from "./Components/Cards/CheckmateServerCard";
-import { BusiestServersCard } from "./Components/Cards/BusiestServersCard";
-import { SlowestMonitorsCard, LowestUptimeCard } from "./Components/Cards/RankingCards";
-import {
-	IncidentStatsCard,
-	NotificationChannelsCard,
-	MaintenanceCard,
-	StatusPagesCard,
-} from "./Components/Cards/SummaryCards";
-import {
-	ChecksOnScheduleCard,
-	RecentErrorsCard,
-	TeamCard,
-} from "./Components/Cards/AdminCards";
-
-import type { CardDefinition, CardId } from "./cards";
-
-// Declared width is the minimum number of columns a card needs. The grid may
-// stretch the last card of a short row; nothing here is a user setting.
-//
-// Order is the render order, and the order the picker lists them in.
-//
-// Every card is half-width and pairs up down the page. The grid promotes a
-// lone trailing card to full width so the page does not end on a ragged half.
-export const CARD_REGISTRY: CardDefinition[] = [
-	{
-		id: "monitorStatus",
-		key: "monitorStatus",
-		group: "uptime",
-		width: 6,
-		component: MonitorStatusCard,
-	},
-	{
-		id: "currentlyDown",
-		key: "currentlyDown",
-		group: "uptime",
-		width: 6,
-		component: CurrentlyDownCard,
-	},
-	{
-		id: "failedChecks",
-		key: "failedChecks",
-		group: "checks",
-		width: 6,
-		component: FailedChecksCard,
-	},
-	{
-		id: "slowestMonitors",
-		key: "slowestMonitors",
-		group: "uptime",
-		width: 6,
-		component: SlowestMonitorsCard,
-	},
-	{
-		id: "lowestUptime",
-		key: "lowestUptime",
-		group: "uptime",
-		width: 6,
-		component: LowestUptimeCard,
-	},
-	{
-		id: "monitorsByType",
-		key: "monitorsByType",
-		group: "uptime",
-		width: 6,
-		component: MonitorsByTypeCard,
-	},
-	{
-		id: "monitorsByGroup",
-		key: "monitorsByGroup",
-		group: "uptime",
-		width: 6,
-		component: MonitorsByGroupCard,
-	},
-	{
-		id: "busiestServers",
-		key: "busiestServers",
-		group: "infrastructure",
-		width: 6,
-		component: BusiestServersCard,
-	},
-	{
-		id: "recentIncidents",
-		key: "recentIncidents",
-		group: "incidents",
-		width: 6,
-		component: RecentIncidentsCard,
-	},
-	{
-		id: "incidentStats",
-		key: "incidentStats",
-		group: "incidents",
-		width: 6,
-		component: IncidentStatsCard,
-	},
-	{
-		id: "notificationChannels",
-		key: "notificationChannels",
-		group: "notifications",
-		width: 6,
-		component: NotificationChannelsCard,
-	},
-	{
-		id: "maintenance",
-		key: "maintenance",
-		group: "maintenance",
-		width: 6,
-		component: MaintenanceCard,
-	},
-	{
-		id: "statusPages",
-		key: "statusPages",
-		group: "statusPages",
-		width: 6,
-		component: StatusPagesCard,
-	},
-	{
-		id: "checkmateServer",
-		key: "checkmateServer",
-		group: "logs",
-		width: 6,
-		adminOnly: true,
-		component: CheckmateServerCard,
-	},
-	{
-		id: "checksOnSchedule",
-		key: "checksOnSchedule",
-		group: "logs",
-		width: 6,
-		adminOnly: true,
-		component: ChecksOnScheduleCard,
-	},
-	{
-		id: "recentErrors",
-		key: "recentErrors",
-		group: "logs",
-		width: 6,
-		adminOnly: true,
-		component: RecentErrorsCard,
-	},
-	{
-		id: "team",
-		key: "team",
-		group: "settings",
-		width: 6,
-		adminOnly: true,
-		component: TeamCard,
-	},
-];
-
-const BY_ID = new Map<CardId, CardDefinition>(
-	CARD_REGISTRY.map((card) => [card.id, card])
-);
-
-export const getCard = (id: CardId): CardDefinition | undefined => BY_ID.get(id);

client/src/Pages/Dashboard/useCardSelection.ts

@@ -1,109 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { useSelector, useDispatch } from "react-redux";
-
-import { useIsAdmin } from "@/Hooks/useIsAdmin";
-import { setDashboardCards } from "@/Features/UI/uiSlice";
-import { CardIds, DEFAULT_CARD_IDS, type CardId } from "./cards";
-import { CARD_REGISTRY, getCard } from "./registry";
-
-import type { CardDefinition } from "./cards";
-import type { RootState } from "@/store";
-
-const isCardId = (value: unknown): value is CardId =>
-	typeof value === "string" && (CardIds as readonly string[]).includes(value);
-
-export const useCardSelection = () => {
-	const dispatch = useDispatch();
-	const isAdmin = useIsAdmin();
-
-	// null means the user has never customised; fall back to defaults.
-	const stored = useSelector((state: RootState) => state.ui.dashboardCards);
-	const selected: CardId[] = useMemo(
-		() => (stored !== null ? stored.filter(isCardId) : [...DEFAULT_CARD_IDS]),
-		[stored]
-	);
-
-	const isVisible = useCallback(
-		(card: CardDefinition) => !card.adminOnly || isAdmin,
-		[isAdmin]
-	);
-
-	const cards = useMemo(
-		() =>
-			selected
-				.map(getCard)
-				.filter((card): card is CardDefinition => card !== undefined)
-				.filter(isVisible),
-		[selected, isVisible]
-	);
-
-	const available = useMemo(() => CARD_REGISTRY.filter(isVisible), [isVisible]);
-
-	const addCard = useCallback(
-		(id: CardId) => {
-			if (!selected.includes(id)) dispatch(setDashboardCards([...selected, id]));
-		},
-		[dispatch, selected]
-	);
-
-	const removeCard = useCallback(
-		(id: CardId) => {
-			dispatch(setDashboardCards(selected.filter((cardId) => cardId !== id)));
-		},
-		[dispatch, selected]
-	);
-
-	const resetCards = useCallback(() => dispatch(setDashboardCards(null)), [dispatch]);
-
-	const selectAll = useCallback(
-		() =>
-			dispatch(
-				setDashboardCards(
-					available.map((card) => card.id).filter((id) => !selected.includes(id)).length >
-						0
-						? [...new Set([...selected, ...available.map((card) => card.id)])]
-						: selected
-				)
-			),
-		[dispatch, available, selected]
-	);
-
-	const deselectAll = useCallback(() => dispatch(setDashboardCards([])), [dispatch]);
-
-	/**
-	 * Reorders cards based on DnD source/dest indices into the visible `cards` array.
-	 * Hidden admin cards keep their stored positions unchanged.
-	 */
-	const reorderCards = useCallback(
-		(sourceIndex: number, destIndex: number) => {
-			const visibleIds = cards.map((c) => c.id);
-			const reordered = [...visibleIds];
-			const [moved] = reordered.splice(sourceIndex, 1);
-			reordered.splice(destIndex, 0, moved);
-			let visibleIdx = 0;
-			dispatch(
-				setDashboardCards(
-					selected.map((cardId) =>
-						visibleIds.includes(cardId) ? reordered[visibleIdx++] : cardId
-					)
-				)
-			);
-		},
-		[dispatch, cards, selected]
-	);
-
-	const allSelected = available.every((card) => selected.includes(card.id));
-
-	return {
-		cards,
-		available,
-		selected,
-		addCard,
-		removeCard,
-		reorderCards,
-		resetCards,
-		selectAll,
-		deselectAll,
-		allSelected,
-	};
-};

client/src/Pages/Dashboard/useDashboardData.ts

@@ -1,32 +0,0 @@
-import { createContext, useContext } from "react";
-import { useGet } from "@/Hooks/UseApi";
-import { MonitorTypes, type MonitorsWithChecksResponse } from "@/Types/Monitor";
-import { REFRESH_INTERVAL_MS } from "./cards";
-
-// One request feeds every monitor-derived card, read from context so adding a
-// card costs no extra call. No rowsPerPage: the dashboard summarises the whole
-// fleet, and the repository treats its absence as "no limit".
-const buildMonitorsUrl = () => {
-	const params = new URLSearchParams();
-	MonitorTypes.forEach((type) => params.append("type", type));
-	return `/monitors/team/with-checks?${params.toString()}`;
-};
-
-export const useMonitorsRequest = () =>
-	useGet<MonitorsWithChecksResponse>(
-		buildMonitorsUrl(),
-		{},
-		{ refreshInterval: REFRESH_INTERVAL_MS, keepPreviousData: true }
-	);
-
-export type MonitorsRequest = ReturnType<typeof useMonitorsRequest>;
-
-export const MonitorsContext = createContext<MonitorsRequest | null>(null);
-
-export const useMonitors = (): MonitorsRequest => {
-	const context = useContext(MonitorsContext);
-	if (!context) {
-		throw new Error("useMonitors must be used inside the dashboard's MonitorsContext");
-	}
-	return context;
-};

client/src/Pages/Docker/ContainerDetails/Components/HeaderLogs.tsx

@@ -1,69 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { Dot } from "@/Components/design-elements";
-
-// Hooks
-import { useEffect, useState } from "react";
-import { useTheme } from "@mui/material";
-import { useTranslation } from "react-i18next";
-
-// Utils
-import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
-import { MS_PER_SECOND, MS_PER_MINUTE } from "@/Utils/TimeUtils";
-
-interface HeaderLogsProps {
-	lines: number;
-	loading: boolean;
-	lastUpdatedAt: number | null;
-}
-
-export const HeaderLogs = ({ lines, loading, lastUpdatedAt }: HeaderLogsProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const [now, setNow] = useState(() => Date.now());
-
-	useEffect(() => {
-		if (lastUpdatedAt === null) return;
-		setNow(Date.now());
-		const id = window.setInterval(() => setNow(Date.now()), MS_PER_SECOND);
-		return () => window.clearInterval(id);
-	}, [lastUpdatedAt]);
-
-	const renderStatus = () => {
-		if (loading) return t("pages.docker.container.logs.loading");
-		if (lastUpdatedAt === null) return null;
-		const ageMs = Math.max(0, now - lastUpdatedAt);
-		return ageMs < MS_PER_MINUTE
-			? t("pages.docker.container.logs.updatedSecondsAgo", {
-					count: Math.floor(ageMs / MS_PER_SECOND),
-				})
-			: t("pages.docker.container.logs.updatedMinutesAgo", {
-					count: Math.floor(ageMs / MS_PER_MINUTE),
-				});
-	};
-
-	return (
-		<Stack
-			direction="row"
-			alignItems="center"
-			gap={LAYOUT.MD}
-		>
-			<Typography>
-				{t("pages.docker.container.logs.recentLines", { count: lines })}
-			</Typography>
-			<Stack
-				direction="row"
-				alignItems="center"
-				gap={SPACING.SM}
-			>
-				{lastUpdatedAt !== null && !loading && (
-					<Dot
-						color={theme.palette.success.main}
-						size="md"
-					/>
-				)}
-				<Typography color={theme.palette.text.secondary}>{renderStatus()}</Typography>
-			</Stack>
-		</Stack>
-	);
-};

client/src/Pages/Docker/ContainerDetails/Components/RowLog.tsx

@@ -1,78 +0,0 @@
-import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Divider from "@mui/material/Divider";
-import { Fragment } from "react";
-
-// Hooks
-import { useTheme } from "@mui/material";
-import { useSelector } from "react-redux";
-import { useTranslation } from "react-i18next";
-
-// Utils
-import type { DockerLogRow } from "@/Utils/MonitorUtils";
-import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
-import type { RootState } from "@/store";
-
-export const RowLog = ({ row }: { row: DockerLogRow }) => {
-	const theme = useTheme();
-	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-	const { t } = useTranslation();
-
-	return (
-		<Fragment>
-			<Grid
-				container
-				spacing={{ xs: 0, md: LAYOUT.MD }}
-				py={{ xs: LAYOUT.LG, md: 0 }}
-			>
-				<Grid size={{ xs: 12, md: "auto" }}>
-					<Typography
-						fontFamily="monospace"
-						color={theme.palette.text.secondary}
-					>
-						{formatDateWithTz(row.ts, "MMM D HH:mm:ss", uiTimezone)}
-					</Typography>
-				</Grid>
-				<Grid size={{ xs: 12, md: "grow" }}>
-					<Typography
-						fontFamily={"monospace"}
-						whiteSpace={{ xs: "pre-wrap", md: "nowrap" }}
-						sx={{
-							overflowWrap: { xs: "anywhere", md: "normal" },
-						}}
-					>
-						<Box
-							component={"span"}
-							color={
-								row.stream === "stderr"
-									? theme.palette.error.main
-									: theme.palette.success.main
-							}
-						>
-							{row.stream}
-						</Box>
-						: {row.text}
-					</Typography>
-				</Grid>
-			</Grid>
-			{row.gapBefore ? (
-				<Stack
-					width="100%"
-					direction="row"
-					alignItems={"center"}
-					py={SPACING.MD}
-				>
-					<Typography pr={SPACING.MD}>
-						{t("pages.docker.container.logs.skipped")}
-					</Typography>
-					<Divider sx={{ flex: 1 }} />
-				</Stack>
-			) : (
-				<Divider sx={{ display: { xs: "block", md: "none" } }} />
-			)}
-		</Fragment>
-	);
-};

client/src/Pages/Docker/ContainerDetails/Components/StatBoxes.tsx

@@ -10,7 +10,6 @@ import type { DockerContainerInfo } from "@/Types/Check";
 
 // Utils
 import { formatDuration } from "@/Utils/TimeUtils";
-import { getDockerPalette } from "@/Utils/MonitorUtils";
 
 export const DockerContainerStatusBoxes = ({
 	container,
@@ -25,7 +24,6 @@ export const DockerContainerStatusBoxes = ({
 	const { state, restartCount, health } = container;
 	const startedAt = container.startedAt ?? "0";
 	const runningFor = Date.now() - new Date(startedAt).getTime();
-	const palette = getDockerPalette(state);
 	return (
 		<Stack
 			direction="row"
@@ -35,7 +33,6 @@ export const DockerContainerStatusBoxes = ({
 			<StatBox
 				title={t("common.labels.state")}
 				subtitle={state}
-				palette={palette}
 			/>
 			<StatBox
 				title={t("common.labels.uptime")}

client/src/Pages/Docker/ContainerDetails/TabLogs.tsx

@@ -1,252 +1,3 @@
-// Components
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { BaseBox, EmptyState } from "@/Components/design-elements";
-import { Button } from "@/Components/inputs";
-import { HeaderLogs } from "@/Pages/Docker/ContainerDetails/Components/HeaderLogs";
-import { RowLog } from "@/Pages/Docker/ContainerDetails/Components/RowLog";
-
-// Types
-import type { DockerContainerLogsResponse } from "@/Types/Monitor";
-import type { DockerLog } from "@/Types/Check";
-import type { ApiResponse } from "@/Hooks/UseApi";
-
-// Hooks
-import {
-	useState,
-	useEffect,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-	useCallback,
-} from "react";
-import { useTheme } from "@mui/material";
-import { useTranslation } from "react-i18next";
-import { useToast } from "@/Hooks/UseToast";
-import { useIsAdmin } from "@/Hooks/useIsAdmin";
-
-// Utils
-import { get } from "@/Utils/ApiClient";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { flattenDockerLogs } from "@/Utils/MonitorUtils";
-
-interface TabLogsProps {
-	monitorId?: string;
-	containerName?: string;
-	enabled: boolean;
-}
-
-const SCROLL_PIN_THRESHOLD_PX = 8;
-const TAIL_POLL_MS = 10_000;
-
-const isScrolledToBottom = (el: HTMLElement) =>
-	el.scrollHeight - el.scrollTop - el.clientHeight <= SCROLL_PIN_THRESHOLD_PX;
-
-const fetchLogs = async (url: string, params: { before?: string; after?: string }) => {
-	const res = await get<ApiResponse<DockerContainerLogsResponse>>(url, { params });
-	return res.data.data;
-};
-
-export const TabLogs = ({ monitorId, containerName, enabled }: TabLogsProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { toastError } = useToast();
-	const isAdmin = useIsAdmin();
-
-	// logs is newest-first, matching the API and what flattenDockerLogs expects.
-	const [logs, setLogs] = useState<DockerLog[]>([]);
-	const [olderExhausted, setOlderExhausted] = useState(false);
-	const [loadingInitial, setLoadingInitial] = useState(false);
-	const [loadingOlder, setLoadingOlder] = useState(false);
-	const [lastUpdatedAt, setLastUpdatedAt] = useState<number | null>(null);
-
-	const logsUrl =
-		isAdmin && enabled && monitorId && containerName
-			? `/monitors/docker/details/${encodeURIComponent(monitorId)}/containers/${encodeURIComponent(containerName)}/logs`
-			: null;
-
-	const newestCursor = logs[0]?.checkedAt;
-	const oldestCursor = logs[logs.length - 1]?.checkedAt;
-
-	// Initial page. Resets everything when the container changes.
-	useEffect(() => {
-		setLogs([]);
-		setOlderExhausted(false);
-		if (!logsUrl) return;
-		let cancelled = false;
-		setLoadingInitial(true);
-		fetchLogs(logsUrl, {})
-			.then((page) => {
-				if (cancelled) return;
-				setLogs(page.logs);
-				setOlderExhausted(page.nextCursor === null);
-				setLastUpdatedAt(Date.now());
-			})
-			.catch(() => {
-				if (cancelled) return;
-				toastError(t("pages.docker.container.logs.loadError"));
-			})
-			.finally(() => {
-				if (!cancelled) setLoadingInitial(false);
-			});
-		return () => {
-			cancelled = true;
-		};
-	}, [logsUrl, t, toastError]);
-
-	const newestCursorRef = useRef(newestCursor);
-	newestCursorRef.current = newestCursor;
-
-	useEffect(() => {
-		if (!logsUrl) return;
-		let inFlight = false;
-		const tick = async () => {
-			if (inFlight || document.hidden) return;
-			inFlight = true;
-			try {
-				const cursor = newestCursorRef.current;
-				const page = await fetchLogs(logsUrl, cursor ? { after: cursor } : {});
-				if (page.logs.length > 0) setLogs((prev) => [...page.logs, ...prev]);
-				setLastUpdatedAt(Date.now());
-			} catch (err: unknown) {
-				console.error(err);
-			} finally {
-				inFlight = false;
-			}
-		};
-		const id = window.setInterval(tick, TAIL_POLL_MS);
-		document.addEventListener("visibilitychange", tick);
-		return () => {
-			window.clearInterval(id);
-			document.removeEventListener("visibilitychange", tick);
-		};
-	}, [logsUrl]);
-
-	const rows = useMemo(() => flattenDockerLogs(logs), [logs]);
-
-	const logBoxRef = useRef<HTMLDivElement>(null);
-	const pinnedToBottom = useRef(true);
-	const prependAnchor = useRef<{ scrollHeight: number; scrollTop: number } | null>(null);
-
-	// Always pin to bottom when container/monitor changes
-	useLayoutEffect(() => {
-		pinnedToBottom.current = true;
-	}, [monitorId, containerName]);
-
-	// Rows changed: restore position after a prepend, otherwise honour the pin
-	useLayoutEffect(() => {
-		const el = logBoxRef.current;
-		if (!el) return;
-		const anchor = prependAnchor.current;
-		if (anchor) {
-			prependAnchor.current = null;
-			el.scrollTop = el.scrollHeight - anchor.scrollHeight + anchor.scrollTop;
-			return;
-		}
-		if (pinnedToBottom.current) el.scrollTop = el.scrollHeight;
-	}, [rows]);
-
-	const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
-		pinnedToBottom.current = isScrolledToBottom(event.currentTarget);
-	}, []);
-
-	const loadOlder = useCallback(async () => {
-		if (!logsUrl || !oldestCursor || loadingOlder) return;
-		setLoadingOlder(true);
-		try {
-			const page = await fetchLogs(logsUrl, { before: oldestCursor });
-			const el = logBoxRef.current;
-			if (el)
-				prependAnchor.current = {
-					scrollHeight: el.scrollHeight,
-					scrollTop: el.scrollTop,
-				};
-			setLogs((prev) => [...prev, ...page.logs]);
-			setOlderExhausted(page.nextCursor === null);
-		} catch {
-			toastError(t("pages.docker.container.logs.loadOlderError"));
-		} finally {
-			setLoadingOlder(false);
-		}
-	}, [logsUrl, oldestCursor, loadingOlder, t, toastError]);
-
-	if (!isAdmin) {
-		return (
-			<EmptyState
-				title={t("pages.docker.container.logs.forbidden.title")}
-				description={t("pages.docker.container.logs.forbidden.description")}
-			/>
-		);
-	}
-
-	if (!enabled) {
-		return (
-			<EmptyState
-				title={t("pages.docker.container.logs.disabled.title")}
-				description={t("pages.docker.container.logs.disabled.description")}
-				actionText={t("pages.docker.container.logs.disabled.action")}
-				actionTo={`/docker/configure/${monitorId}`}
-			/>
-		);
-	}
-
-	if (lastUpdatedAt !== null && rows.length === 0) {
-		return (
-			<EmptyState
-				title={t("pages.docker.container.logs.empty.title")}
-				description={t("pages.docker.container.logs.empty.description")}
-			/>
-		);
-	}
-
-	return (
-		<Stack gap={LAYOUT.MD}>
-			<HeaderLogs
-				lines={rows.length}
-				loading={loadingInitial}
-				lastUpdatedAt={lastUpdatedAt}
-			/>
-			<BaseBox
-				ref={logBoxRef}
-				onScroll={handleScroll}
-				minHeight={240}
-				maxHeight="50vh"
-				overflow="auto"
-				padding={LAYOUT.MD}
-				sx={{ overflowAnchor: "none" }}
-			>
-				{rows.length > 0 && (
-					<Stack
-						direction="row"
-						justifyContent="center"
-						pb={LAYOUT.MD}
-					>
-						{olderExhausted ? (
-							<Typography color={theme.palette.text.secondary}>
-								{t("pages.docker.container.logs.noOlder")}
-							</Typography>
-						) : (
-							<Button
-								variant="contained"
-								disabled={loadingOlder}
-								onClick={loadOlder}
-							>
-								{loadingOlder
-									? t("pages.docker.container.logs.loadingOlder")
-									: t("pages.docker.container.logs.loadOlder")}
-							</Button>
-						)}
-					</Stack>
-				)}
-				{rows.map((row) => {
-					return (
-						<RowLog
-							key={row.key}
-							row={row}
-						/>
-					);
-				})}
-			</BaseBox>
-		</Stack>
-	);
+export const TabLogs = () => {
+	return "This is the logs tab";
 };

client/src/Pages/Docker/ContainerDetails/index.tsx

@@ -21,7 +21,7 @@ const TAB_MAP = {
 	logs: 1,
 } as const;
 
-const DockerDetailsPage = ({ open = "logs" }: DockerContainerDetailsProps) => {
+const DockerDetailsPage = ({ open = "overview" }: DockerContainerDetailsProps) => {
 	const [activeTab, setActiveTab] = useState<number>(TAB_MAP[open]);
 	const [dateRange, setDateRange] = useState<DateRange>("recent");
 	const { monitorId, containerName } = useParams<{
@@ -70,13 +70,7 @@ const DockerDetailsPage = ({ open = "logs" }: DockerContainerDetailsProps) => {
 				<Tab label={t("pages.docker.container.tabs.logs")} />
 			</Tabs>
 			{activeTab === 0 && <TabOverview stats={stats} />}
-			{activeTab === 1 && (
-				<TabLogs
-					monitorId={monitorId}
-					containerName={containerName}
-					enabled={monitor.dockerLogsEnabled ?? false}
-				/>
-			)}
+			{activeTab === 1 && <TabLogs />}
 		</BasePage>
 	);
 };

client/src/Pages/Incidents/Components/CardSummary.tsx

@@ -30,6 +30,9 @@ const SummaryItem = ({ icon, label, value }: SummaryItemProps) => {
 				direction="row"
 				alignItems="center"
 				gap={theme.spacing(2)}
+				// The icons are supporting marks beside the label, not content,
+				// so they take secondary ink rather than lucide's currentColor
+				// default, which renders them heavier than the text.
 				sx={{ "& svg": { color: theme.palette.text.secondary } }}
 			>
 				{icon}

client/src/Pages/Notifications/create/index.tsx

@@ -126,7 +126,6 @@ const NotificationsCreatePage = () => {
 				{watchedType !== "matrix" &&
 					watchedType !== "telegram" &&
 					watchedType !== "pushover" &&
-					watchedType !== "signalgrid" &&
 					watchedType !== "twilio" &&
 					watchedType !== "ntfy" && (
 						<ConfigBox
@@ -202,31 +201,6 @@ const NotificationsCreatePage = () => {
 						}
 					/>
 				)}
-				{watchedType === "signalgrid" && (
-					<ConfigBox
-						title={t("pages.notifications.form.signalgrid.title")}
-						subtitle={t("pages.notifications.form.signalgrid.description")}
-						rightContent={
-							<Stack spacing={theme.spacing(8)}>
-								<FormTextField
-									name="accessToken"
-									fieldLabel={t("pages.notifications.form.signalgrid.optionClientKey")}
-									placeholder={t(
-										"pages.notifications.form.signalgrid.placeholderClientKey"
-									)}
-								/>
-
-								<FormTextField
-									name="address"
-									fieldLabel={t("pages.notifications.form.signalgrid.optionChannel")}
-									placeholder={t(
-										"pages.notifications.form.signalgrid.placeholderChannel"
-									)}
-								/>
-							</Stack>
-						}
-					/>
-				)}
 				{watchedType === "twilio" && (
 					<ConfigBox
 						title={t("pages.notifications.form.twilio.title")}

client/src/Pages/StatusPage/Status/themes/shared/fontStacks.ts

@@ -1,3 +1,6 @@
+// No "Inter" here: its webfont was never self-hosted, so once the Google Fonts
+// import went it resolved to a fallback anyway. Listing it only made the stack
+// look intentional on machines that happen to have Inter installed.
 export const SANS_STACK =
 	'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 

client/src/Pages/Uptime/Monitors/index.tsx

@@ -4,7 +4,7 @@ import { MonitorTable } from "@/Pages/Uptime/Monitors/Components/UptimeMonitorsT
 import { useMonitorListController } from "@/Hooks/useMonitorListController";
 
 const UptimeMonitorsPage = () => {
-	const monitorListController = useMonitorListController({
+	const c = useMonitorListController({
 		types: "selectable",
 		checksLimit: 25,
 		refreshInterval: 5000,
@@ -17,25 +17,25 @@ const UptimeMonitorsPage = () => {
 			headerKey="uptime"
 			page="uptime"
 			actionLink="/uptime/create"
-			controller={monitorListController}
+			controller={c}
 			bulkActions
 		>
 			<MonitorTable
-				monitors={monitorListController.monitors || []}
-				tags={monitorListController.tags || []}
-				refetch={monitorListController.refetch}
-				setSelectedMonitor={monitorListController.setSelectedMonitor}
-				count={monitorListController.count || 0}
-				page={monitorListController.page}
-				setPage={monitorListController.setPage}
-				rowsPerPage={monitorListController.rowsPerPage}
-				sortField={monitorListController.sortField}
-				setSortField={monitorListController.setSortField}
-				sortOrder={monitorListController.sortOrder}
-				setSortOrder={monitorListController.setSortOrder}
-				setRowsPerPage={monitorListController.handleSetRowsPerPage}
-				selectedRows={monitorListController.selectedRows}
-				onSelectionChange={monitorListController.setSelectedRows}
+				monitors={c.monitors || []}
+				tags={c.tags || []}
+				refetch={c.refetch}
+				setSelectedMonitor={c.setSelectedMonitor}
+				count={c.count || 0}
+				page={c.page}
+				setPage={c.setPage}
+				rowsPerPage={c.rowsPerPage}
+				sortField={c.sortField}
+				setSortField={c.setSortField}
+				sortOrder={c.sortOrder}
+				setSortOrder={c.setSortOrder}
+				setRowsPerPage={c.handleSetRowsPerPage}
+				selectedRows={c.selectedRows}
+				onSelectionChange={c.setSelectedRows}
 			/>
 		</MonitorListPage>
 	);

client/src/Routes/index.tsx

@@ -8,9 +8,6 @@ import AuthRegister from "@/Pages/Auth/Register";
 import AuthForgotPassword from "@/Pages/Auth/Recovery";
 import AuthSetNewPassword from "@/Pages/Auth/SetNewPassword";
 
-// Dashboard
-import Dashboard from "@/Pages/Dashboard";
-
 // Uptime
 import Uptime from "@/Pages/Uptime/Monitors";
 import UptimeDetails from "@/Pages/Uptime/Details";
@@ -93,11 +90,7 @@ const Routes = () => {
 			>
 				<Route
 					path="/"
-					element={<Navigate to="/dashboard" />}
-				/>
-				<Route
-					path="/dashboard"
-					element={<Dashboard />}
+					element={<Navigate to="/uptime" />}
 				/>
 				<Route
 					path="/uptime"

client/src/Types/Check.ts

@@ -161,31 +161,6 @@ export interface DockerContainerMount {
 	rw: boolean;
 }
 
-export const DockerLogStreams = ["stdout", "stderr"] as const;
-export type DockerLogStream = (typeof DockerLogStreams)[number];
-
-export interface DockerLogLine {
-	ts: string;
-	stream: DockerLogStream;
-	text: string;
-}
-
-export interface DockerLog {
-	id: string;
-	metadata: {
-		monitorId: string;
-		teamId: string;
-		containerId: string;
-		containerName: string;
-	};
-	lines: DockerLogLine[];
-	gap: boolean;
-	checkedAt: string;
-	expiry: string;
-	createdAt: string;
-	updatedAt: string;
-}
-
 export interface DockerContainerInfo {
 	id: string;
 	name: string;

client/src/Types/Monitor.ts

@@ -5,7 +5,6 @@ import type {
 	DailyCheckBucket,
 	DockerContainerInfo,
 	DockerContainerSummary,
-	DockerLog,
 } from "@/Types/Check";
 import type { PageSpeedGroupedCheck } from "@/Types/Check";
 import type { GeoContinent } from "@/Types/GeoCheck";
@@ -159,7 +158,6 @@ export interface Monitor {
 	geoCheckEnabled?: boolean;
 	geoCheckLocations?: GeoContinent[];
 	geoCheckInterval?: number;
-	dockerLogsEnabled?: boolean;
 	dnsServer?: string;
 	dnsRecordType?: DnsRecordType;
 	recentChecks: CheckSnapshot[];
@@ -324,10 +322,6 @@ export interface DockerContainerResponse {
 	stats: DockerContainerStats;
 }
 
-export interface DockerContainerLogsResponse {
-	logs: DockerLog[];
-	nextCursor: string | null;
-}
 export interface Game {
 	name: string;
 	options?: {

client/src/Types/Notification.ts

@@ -9,7 +9,6 @@ export const NotificationChannels = [
 	"teams",
 	"telegram",
 	"pushover",
-	"signalgrid",
 	"twilio",
 	"ntfy",
 ] as const;

client/src/Utils/MonitorUtils.ts

@@ -1,13 +1,10 @@
 import type { MonitorStatus, MonitorType } from "@/Types/Monitor";
 import type { PaletteKey } from "@/Utils/Theme/Theme";
 import type { ValueType } from "@/Components/design-elements/StatusLabel";
-import {
-	DockerLogStreams,
-	type DockerContainerMount,
-	type DockerContainerPort,
-	type DockerContainerState,
-	type DockerLog,
-	type DockerLogLine,
+import type {
+	DockerContainerMount,
+	DockerContainerPort,
+	DockerContainerState,
 } from "@/Types/Check";
 
 export const getMonitorPath = (type: MonitorType): string => {
@@ -40,14 +37,6 @@ export const getStatusPalette = (status: MonitorStatus): PaletteKey => {
 	return "warning";
 };
 
-export const getDockerPalette = (dockerState: DockerContainerState): PaletteKey => {
-	if (dockerState === "created") return "success";
-	if (dockerState === "running") return "success";
-	if (dockerState === "dead") return "error";
-	if (dockerState === "exited") return "error";
-	return "warning";
-};
-
 export const getValuePalette = (value: ValueType): PaletteKey => {
 	const paletteMap: Record<ValueType, PaletteKey> = {
 		positive: "success",
@@ -155,35 +144,3 @@ export const getDockerMountLabel = (mount: DockerContainerMount) => {
 	if (mount.source) return mount.source;
 	return mount.type;
 };
-
-export const DockerLogStreamFilters = ["all", ...DockerLogStreams] as const;
-export type DockerLogStreamFilter = (typeof DockerLogStreamFilters)[number];
-
-export interface DockerLogRow extends DockerLogLine {
-	key: string;
-	gapBefore: boolean; // This signifies lines skipped
-}
-
-export const flattenDockerLogs = (logs: DockerLog[]): DockerLogRow[] => {
-	const rows: DockerLogRow[] = [];
-	for (const log of [...logs].reverse()) {
-		log.lines.forEach((line: DockerLogLine, idx: number) => {
-			rows.push({ ...line, key: `${log.id}:${idx}`, gapBefore: idx === 0 && log.gap });
-		});
-	}
-	return rows;
-};
-
-export const filterDockerLogRows = (
-	rows: DockerLogRow[],
-	stream: DockerLogStreamFilter,
-	query: string
-): DockerLogRow[] => {
-	const normalizedQuery = query.trim().toLowerCase();
-	return rows.filter((row) => {
-		return (
-			(stream === "all" || row.stream === stream) &&
-			(normalizedQuery === "" || row.text.toLowerCase().includes(normalizedQuery))
-		);
-	});
-};

client/src/Utils/Theme/Theme.ts

@@ -192,6 +192,7 @@ export const theme = (mode: string, palette: any) =>
 					}),
 				},
 			},
+
 			MuiOutlinedInput: {
 				styleOverrides: {
 					input: {

client/src/Utils/Theme/constants.ts

@@ -18,7 +18,19 @@ export const LAYOUT = {
 	XXL: 16,
 } as const;
 
-export const INPUT_BASE_HEIGHT = 32; // Height for inputs/controls
+/**
+ * Shared height for anything that can sit in a row with something else -
+ * buttons, inputs, selects, pickers, toggles, tabs, icon buttons. One number so
+ * they share a baseline instead of drifting 2px apart.
+ */
+export const CONTROL_HEIGHT = 32;
+
+/**
+ * Width of a square-ish icon-only control that sits in a header strip - wider
+ * than CONTROL_HEIGHT so the icon has breathing room either side of the
+ * dividers between them.
+ */
+export const ICON_CONTROL_WIDTH = 36;
 
 export const HOVER = {
 	DARKEN: 0.06, // This is a coefficient for darkening function

client/src/Validation/monitor.ts

@@ -111,8 +111,7 @@ const portSchema = baseSchema.extend({
 // Docker monitor schema
 const dockerSchema = baseSchema.extend({
 	type: z.literal("docker"),
-	url: z.string().min(1, "Docker host URL is required"),
-	dockerLogsEnabled: z.boolean().register(monitorStepRegistry, { step: 1 }),
+	url: z.string().min(1, "Container ID is required"),
 });
 
 // Game server monitor schema

client/src/Validation/notifications.ts

@@ -70,12 +70,6 @@ const pushoverSchema = baseSchema.extend({
 	accessToken: z.string().min(1, "App token is required"),
 });
 
-const signalgridSchema = baseSchema.extend({
-	type: z.literal("signalgrid"),
-	address: z.string().min(1, "Channel is required"),
-	accessToken: z.string().min(1, "Client key is required"),
-});
-
 const twilioSchema = baseSchema.extend({
 	type: z.literal("twilio"),
 	accountSid: z.string().min(1, "Account SID is required"),
@@ -101,7 +95,6 @@ export const notificationSchema = z.discriminatedUnion("type", [
 	teamsSchema,
 	telegramSchema,
 	pushoverSchema,
-	signalgridSchema,
 	twilioSchema,
 	ntfySchema,
 ]);

client/src/locales/en.json

@@ -206,7 +206,6 @@
 		},
 		"sidebar": {
 			"menu": {
-				"dashboard": "Dashboard",
 				"uptime": "Uptime",
 				"pagespeed": "Pagespeed",
 				"infrastructure": "Infrastructure",
@@ -259,147 +258,6 @@
 		}
 	},
 	"pages": {
-		"dashboard": {
-			"header": {
-				"title": "Dashboard",
-				"description": "See every monitor type in one place and spot what needs attention."
-			},
-			"card": {
-				"error": "Could not load this card."
-			},
-			"cards": {
-				"monitorStatus": {
-					"title": "Monitor status",
-					"empty": "No monitors yet.",
-					"upOfTotal": "of {{total}} up"
-				},
-				"currentlyDown": {
-					"title": "Currently down",
-					"empty": "All monitors are up. No incidents open.",
-					"count": "{{count}} needing attention"
-				},
-				"monitorsByType": {
-					"title": "Monitors by type",
-					"empty": "No monitors yet.",
-					"down": "{{count}} down"
-				},
-				"recentIncidents": {
-					"title": "Recent incidents",
-					"empty": "No incidents — all systems healthy.",
-					"active": "{{count}} open",
-					"ongoing": "Ongoing",
-					"manual": "Manual",
-					"unknownMonitor": "Unknown monitor"
-				},
-				"failedChecks": {
-					"title": "Failed checks",
-					"empty": "No checks yet.",
-					"ratio": "{{failed}} of {{total}} in the last day"
-				},
-				"checkmateServer": {
-					"title": "Checkmate server",
-					"memory": "Memory",
-					"eventLoop": "Event loop delay",
-					"uptime": "Uptime",
-					"database": "Database",
-					"readsWrites": "{{reads}} reads/s · {{writes}} writes/s"
-				},
-				"ranking": {
-					"topOf": "Top {{shown}} of {{total}}",
-					"notEnough": "Not enough monitors to rank yet."
-				},
-				"slowestMonitors": {
-					"title": "Slowest monitors"
-				},
-				"lowestUptime": {
-					"title": "Lowest uptime"
-				},
-				"monitorsByGroup": {
-					"title": "Monitors by group",
-					"empty": "No groups yet. Groups are set per monitor."
-				},
-				"busiestServers": {
-					"title": "Busiest servers",
-					"empty": "No infrastructure monitors yet.",
-					"cpu": "CPU",
-					"memory": "Memory",
-					"disk": "Disk"
-				},
-				"incidentStats": {
-					"title": "Incident stats",
-					"openNow": "Open now",
-					"avgResolution": "Average time to resolve",
-					"hours": "{{hours}} h",
-					"mostIncidents": "Most incidents",
-					"total": "total",
-					"resolved": "Resolved",
-					"automatic": "Automatic",
-					"manual": "Manual",
-					"autoManual": "{{automatic}} automatic · {{manual}} manual"
-				},
-				"notificationChannels": {
-					"title": "Notification channels",
-					"empty": "No channels yet."
-				},
-				"maintenance": {
-					"title": "Maintenance windows",
-					"empty": "No maintenance scheduled.",
-					"runningNow": "Running now",
-					"next": "Next window"
-				},
-				"statusPages": {
-					"title": "Status pages",
-					"empty": "No status pages yet.",
-					"monitorCount": "{{count}} monitors",
-					"published": "Published",
-					"draft": "Draft"
-				},
-				"checksOnSchedule": {
-					"title": "Check queue",
-					"healthy": "All {{jobs}} jobs on schedule across {{workers}} worker(s).",
-					"failing": "Failing jobs",
-					"scheduled": "Scheduled jobs",
-					"runningNow": "Running now"
-				},
-				"recentErrors": {
-					"title": "Recent errors",
-					"empty": "No errors logged.",
-					"count": "{{count}} errors",
-					"warnings": "Warnings"
-				},
-				"team": {
-					"title": "Team members",
-					"members": "{{count}} members",
-					"unverified": "Unverified"
-				}
-			},
-			"picker": {
-				"trigger": "Edit cards",
-				"title": "Dashboard cards",
-				"selectAll": "Select all",
-				"done": "Done",
-				"reset": "Reset to defaults",
-				"groups": {
-					"uptime": "Uptime",
-					"infrastructure": "Infrastructure",
-					"incidents": "Incidents",
-					"notifications": "Notifications",
-					"maintenance": "Maintenance",
-					"statusPages": "Status pages",
-					"checks": "Checks",
-					"logs": "System",
-					"settings": "Settings"
-				}
-			},
-			"empty": {
-				"title": "No cards on your dashboard",
-				"description": "Choose the cards you want to see. Your selection is remembered in this browser."
-			},
-			"reorder": {
-				"moveUp": "Move up",
-				"moveDown": "Move down"
-			}
-		},
 		"proxies": {
 			"header": {
 				"title": "Proxies",
@@ -774,9 +632,9 @@
 				},
 				"general": {
 					"option": {
-						"dockerHost": {
-							"label": "Docker host",
-							"placeholder": "unix:///var/run/docker.sock"
+						"container": {
+							"label": "Container name/ID",
+							"placeholder": "my-app or abcd1234"
 						},
 						"host": {
 							"label": "Host",
@@ -858,7 +716,7 @@
 						"http": "Enter the URL or IP to monitor (e.g., https://example.com/ or 192.168.1.100) and add a clear display name that appears on the dashboard.  Set an optional proxy server to connect through.",
 						"ping": "Enter the IP address or hostname to ping (e.g., 192.168.1.100 or example.com) and add a clear display name that appears on the dashboard.",
 						"port": "Enter the URL or IP of the server, the port number and a clear display name that appears on the dashboard.",
-						"docker": "Enter the Docker socket to monitor, as unix:///var/run/docker.sock or an absolute path such as /var/run/docker.sock. Every container on the host is monitored.",
+						"docker": "Enter the Docker container name or ID. You can use either the container name (e.g., my-app) or the container ID (full 64-char ID or short ID).",
 						"game": "Enter the IP address or hostname and the port number to ping (e.g., 192.168.1.100 or example.com) and choose game type. Some games require enabling server queries in their config file — check your game server's documentation. See the <gamedigLink>supported games list</gamedigLink> for protocol details.",
 						"pagespeed": "Track page load performance, Core Web Vitals, and optimization scores for your website.",
 						"grpc": "Enter the hostname and port of the gRPC server, optionally specify a service name for the health check, and add a display name.",
@@ -898,7 +756,7 @@
 				},
 				"type": {
 					"description": "Select the type of check to perform",
-					"optionDockerDescription": "Monitor a Docker host and every container running on it.",
+					"optionDockerDescription": "Use Docker to monitor if a container is running.",
 					"optionGameDescription": "Monitor if a specific game server is online.",
 					"optionGrpcDescription": "Monitor gRPC services using the standard Health Checking Protocol.",
 					"optionWebSocketDescription": "Monitor WebSocket endpoints for connection health and response time.",
@@ -956,15 +814,6 @@
 						}
 					}
 				},
-				"dockerLogs": {
-					"title": "Container logs",
-					"description": "Collect the most recent log lines from every container on this host on each check. Logs are kept for 7 days. Leave this off for hosts with chatty containers to save database space.",
-					"option": {
-						"enabled": {
-							"label": "Collect container logs"
-						}
-					}
-				},
 				"stats": {
 					"title": "Monitor history",
 					"description": "Clear all monitoring history and statistics for your team. This action is irreversible.",
@@ -1107,31 +956,6 @@
 				"tabs": {
 					"overview": "Overview",
 					"logs": "Logs"
-				},
-				"logs": {
-					"recentLines": "{{count}} recent lines",
-					"loading": "Loading...",
-					"updatedSecondsAgo": "Updated {{count}}s ago",
-					"updatedMinutesAgo": "Updated {{count}}m ago",
-					"skipped": "Some log entries were skipped",
-					"loadOlder": "Load older logs",
-					"loadingOlder": "Loading...",
-					"noOlder": "Beginning of retained logs",
-					"loadError": "Could not load logs",
-					"loadOlderError": "Could not load older logs",
-					"empty": {
-						"title": "No logs collected yet",
-						"description": "Lines will appear here after the next check. Only output written since collection was turned on is stored."
-					},
-					"disabled": {
-						"title": "Log collection is off for this host",
-						"description": "Turn on container logs in the monitor settings to start collecting.",
-						"action": "Configure monitor"
-					},
-					"forbidden": {
-						"title": "You don't have access to container logs",
-						"description": "Only administrators can view logs. Ask an administrator for access if you need to see them."
-					}
 				}
 			},
 			"host": {
@@ -1393,7 +1217,7 @@
 				},
 				"startTime": {
 					"title": "Start time",
-					"description": "Set the start time and duration for your maintenance window. All values are in your local time zone.",
+					"description": "Set the start time and duration for your maintenance window. All values are in UTC",
 					"option": {
 						"duration": {
 							"label": "Duration"
@@ -1475,7 +1299,6 @@
 						"teams": "Teams",
 						"telegram": "Telegram",
 						"pushover": "Pushover",
-						"signalgrid": "Signalgrid",
 						"twilio": "Twilio",
 						"ntfy": "ntfy"
 					}
@@ -1496,14 +1319,6 @@
 					"optionUserKey": "User key",
 					"placeholderUserKey": "uQiRzpo4DXghDmr9QzzfQu27cmVRsG"
 				},
-				"signalgrid": {
-					"title": "Signalgrid configuration",
-					"description": "Configure Signalgrid to receive push notifications on your devices.",
-					"optionClientKey": "Client key",
-					"placeholderClientKey": "Your Signalgrid client key",
-					"optionChannel": "Channel",
-					"placeholderChannel": "Your Signalgrid channel"
-				},
 				"twilio": {
 					"title": "Twilio SMS configuration",
 					"description": "Configure Twilio to send SMS notifications to a phone number.",

docs/hosting/checkmate-so/docker-compose.yaml

@@ -24,8 +24,6 @@ services:
   checkmate-demo:
     image: ghcr.io/bluewave-labs/checkmate:master
     container_name: checkmate-demo
-    group_add:
-      - "989"
     restart: always
     env_file:
       - server-prod.env
@@ -70,8 +68,6 @@ services:
   checkmate-staging:
     image: ghcr.io/bluewave-labs/checkmate:develop
     container_name: checkmate-staging
-    group_add:
-      - "989"
     restart: always
     env_file:
       - server-staging.env

server/openapi/routes/monitor.ts

@@ -24,8 +24,6 @@ import {
 	dockerContainerDetailsResponseSchema,
 	monitorResponseSchema,
 	uptimeDetailsResponseSchema,
-	getDockerContainerLogsQueryValidation,
-	dockerContainerLogsResponseSchema,
 } from "@/api/validation/monitorValidation.js";
 import { updateNotificationsValidation } from "@/api/validation/notificationValidation.js";
 
@@ -133,16 +131,6 @@ registry.registerPath({
 	responses: { "200": okJson(dockerContainerDetailsResponseSchema), ...standardErrors },
 });
 
-registry.registerPath({
-	method: "get",
-	path: "/monitors/docker/details/{monitorId}/containers/{containerName}/logs",
-	tags,
-	summary: "Get stored log lines for one container on a Docker host monitor, newest first",
-	security: bearer,
-	request: { params: getDockerContainerNameParamValidation, query: getDockerContainerLogsQueryValidation },
-	responses: { "200": okJson(dockerContainerLogsResponseSchema), ...standardErrors },
-});
-
 registry.registerPath({
 	method: "get",
 	path: "/monitors/pagespeed/details/{monitorId}",

server/openapi/routes/notification.ts

@@ -65,10 +65,6 @@ const notificationVariantMeta: Record<string, { component: string; example: Reco
 		component: "PushoverNotification",
 		example: { notificationName: "Pushover personal", type: "pushover", address: "u1234567890abcdef", accessToken: "a1234567890abcdef" },
 	},
-	signalgrid: {
-		component: "SignalgridNotification",
-		example: { notificationName: "Signalgrid", type: "signalgrid", address: "your-channel", accessToken: "your-client-key" },
-	},
 	twilio: {
 		component: "TwilioNotification",
 		example: {

server/src/api/controllers/monitorController.ts

@@ -21,7 +21,6 @@ import {
 	getDockerDetailsByIdQueryValidation,
 	getDockerContainerNameParamValidation,
 	getDockerContainerByNameQueryValidation,
-	getDockerContainerLogsQueryValidation,
 } from "@/api/validation/monitorValidation.js";
 import sslChecker from "ssl-checker";
 import * as whoiser from "whoiser";
@@ -38,7 +37,6 @@ export interface IMonitorController {
 	getPageSpeedDetailsById: RequestHandler;
 	getDockerDetailsById: RequestHandler;
 	getDockerContainerByName: RequestHandler;
-	getDockerContainerLogs: RequestHandler;
 	getGeoChecksByMonitorId: RequestHandler;
 	getMonitorById: RequestHandler;
 	createMonitor: RequestHandler;
@@ -200,30 +198,6 @@ class MonitorController implements IMonitorController {
 		});
 	});
 
-	getDockerContainerLogs = catchAsync(async (req: Request, res: Response) => {
-		const validatedParams = getDockerContainerNameParamValidation.parse(req.params);
-		const validatedQuery = getDockerContainerLogsQueryValidation.parse(req.query);
-
-		const { monitorId, containerName } = validatedParams;
-		const { before, after, limit } = validatedQuery;
-		const teamId = requireTeamId(req.user?.teamId);
-
-		const data = await this.monitorService.getDockerContainerLogs({
-			teamId,
-			monitorId,
-			containerName,
-			before: before ? new Date(before) : undefined,
-			after: after ? new Date(after) : undefined,
-			limit,
-		});
-
-		return res.status(200).json({
-			success: true,
-			msg: "Docker container logs retrieved successfully",
-			data,
-		});
-	});
-
 	getGeoChecksByMonitorId = catchAsync(async (req: Request, res: Response) => {
 		const validatedParams = getMonitorByIdParamValidation.parse(req.params);
 		const validatedQuery = getMonitorByIdQueryValidation.parse(req.query);

server/src/api/routes/checkRoutes.ts

@@ -9,6 +9,6 @@ export const createCheckRoutes = (checkController: ICheckController): Router =>
 	router.get("/team", checkController.getChecksByTeam);
 	router.delete("/team", isAllowed(["admin", "superadmin"]), checkController.deleteChecksByTeamId);
 	router.get("/:monitorId", checkController.getChecksByMonitor);
-	router.delete("/:monitorId", isAllowed(["admin", "superadmin"]), checkController.deleteChecks);
+	router.delete("/:monitorId", checkController.deleteChecks);
 	return router;
 };

server/src/api/routes/maintenanceWindowRoutes.ts

@@ -1,16 +1,15 @@
 import { IMaintenanceWindowController } from "@/api/controllers/maintenanceWindowController.js";
-import { isAllowed } from "@/api/middleware/isAllowed.js";
 import { Router } from "express";
 
 export const createMaintenanceWindowRoutes = (maintenanceWindowController: IMaintenanceWindowController): Router => {
 	const router = Router();
-	router.post("/", isAllowed(["admin", "superadmin"]), maintenanceWindowController.createMaintenanceWindows);
+	router.post("/", maintenanceWindowController.createMaintenanceWindows);
 	router.get("/team/", maintenanceWindowController.getMaintenanceWindowsByTeamId);
 
 	router.get("/monitor/:monitorId", maintenanceWindowController.getMaintenanceWindowsByMonitorId);
 
 	router.get("/:id", maintenanceWindowController.getMaintenanceWindowById);
-	router.patch("/:id", isAllowed(["admin", "superadmin"]), maintenanceWindowController.editMaintenanceWindow);
-	router.delete("/:id", isAllowed(["admin", "superadmin"]), maintenanceWindowController.deleteMaintenanceWindow);
+	router.patch("/:id", maintenanceWindowController.editMaintenanceWindow);
+	router.delete("/:id", maintenanceWindowController.deleteMaintenanceWindow);
 	return router;
 };

server/src/api/routes/monitorRoutes.ts

@@ -21,11 +21,6 @@ export const createMonitorRoutes = (monitorController: IMonitorController): Rout
 	// Docker routes
 	router.get("/docker/details/:monitorId", monitorController.getDockerDetailsById);
 	router.get("/docker/details/:monitorId/containers/:containerName", monitorController.getDockerContainerByName);
-	router.get(
-		"/docker/details/:monitorId/containers/:containerName/logs",
-		isAllowed(["admin", "superadmin"]),
-		monitorController.getDockerContainerLogs
-	);
 
 	// Geo checks routes
 	router.get("/:monitorId/geo-checks", monitorController.getGeoChecksByMonitorId);

server/src/api/routes/notificationRoutes.ts

@@ -1,15 +1,14 @@
 import { INotificationController } from "@/api/controllers/notificationController.js";
-import { isAllowed } from "@/api/middleware/isAllowed.js";
 import { Router } from "express";
 
 export const createNotificationRoutes = (notificationController: INotificationController): Router => {
 	const router = Router();
-	router.post("/", isAllowed(["admin", "superadmin"]), notificationController.createNotification);
-	router.post("/test/all", isAllowed(["admin", "superadmin"]), notificationController.testAllNotifications);
-	router.post("/test", isAllowed(["admin", "superadmin"]), notificationController.testNotification);
+	router.post("/", notificationController.createNotification);
+	router.post("/test/all", notificationController.testAllNotifications);
+	router.post("/test", notificationController.testNotification);
 	router.get("/team", notificationController.getNotificationsByTeamId);
 	router.get("/:id", notificationController.getNotificationById);
-	router.delete("/:id", isAllowed(["admin", "superadmin"]), notificationController.deleteNotification);
-	router.patch("/:id", isAllowed(["admin", "superadmin"]), notificationController.editNotification);
+	router.delete("/:id", notificationController.deleteNotification);
+	router.patch("/:id", notificationController.editNotification);
 	return router;
 };

server/src/api/validation/monitorValidation.ts

@@ -13,8 +13,7 @@ import {
 	ProxyModes,
 } from "@/domain/monitors/monitor.type.js";
 import { DateRanges, SortOrders } from "@/types/query.js";
-import { DockerContainerStates, DockerHealthStatuses, DockerLogStreams, DockerPortProtocols } from "@/domain/docker/docker.type.js";
-import { DOCKER_LOG_PAGE_DEFAULT, DOCKER_LOG_PAGE_MAX } from "@/domain/docker/docker-log.type.js";
+import { DockerContainerStates, DockerHealthStatuses, DockerPortProtocols } from "@/types/network.js";
 
 const httpStatusCode = z.number().refine((code) => HttpStatusCodeSet.has(code), { message: "Must be a valid HTTP status code" });
 
@@ -120,15 +119,22 @@ const refineProxySelection = (body: { proxyMode?: string; proxyId?: string }, ct
 	}
 };
 
-const dockerUrlRegex = /^(?:unix:\/\/\/\S+|\/\S+)$/;
+const dockerUrlRegex = /^(?:ssh:\/\/[^@\s]+@[^\s/:@]+(?::\d{1,5})?\/?|unix:\/\/\/\S+|\/\S+)$/;
 
-const refineDockerUrl = (data: { type?: string; url?: string }, ctx: z.RefinementCtx) => {
+const refineDockerUrl = (data: { type?: string; url?: string; sshPrivateKey?: string }, ctx: z.RefinementCtx) => {
 	if (data.type !== "docker" || data.url === undefined) return;
 	if (!dockerUrlRegex.test(data.url)) {
 		ctx.addIssue({
 			code: "custom",
 			path: ["url"],
-			message: "Docker host must be unix:///path or an absolute socket path",
+			message: "Docker host must be ssh://user@host[:port], unix:///path, or an absolute socket path",
+		});
+	}
+	if (data.url.startsWith("ssh://") && !data.sshPrivateKey) {
+		ctx.addIssue({
+			code: "custom",
+			path: ["sshPrivateKey"],
+			message: "SSH Docker hosts require a private key",
 		});
 	}
 };
@@ -157,6 +163,7 @@ export const createMonitorBodyValidation = z
 		tags: z.array(z.string()).optional(),
 		customUpCodes: z.array(httpStatusCode).default([]),
 		secret: z.string().optional(),
+		sshPrivateKey: z.string().optional(),
 		jsonPath: z.union([z.string(), z.literal("")]).optional(),
 		expectedValue: z.union([z.string(), z.literal("")]).optional(),
 		matchMethod: z.union([z.enum(MonitorMatchMethods), z.literal("")]).optional(),
@@ -169,7 +176,6 @@ export const createMonitorBodyValidation = z
 		geoCheckEnabled: z.boolean().optional(),
 		geoCheckLocations: z.array(z.enum(GeoContinents)).optional(),
 		geoCheckInterval: z.number().min(300000).optional(),
-		dockerLogsEnabled: z.boolean().optional(),
 		dnsServer: dnsServerValidation.optional(),
 		dnsRecordType: z.enum(DnsRecordTypes).optional(),
 	})
@@ -193,6 +199,7 @@ export const editMonitorBodyValidation = z
 		tags: z.array(z.string()).optional(),
 		customUpCodes: z.array(httpStatusCode).optional(),
 		secret: z.string().optional(),
+		sshPrivateKey: z.string().optional(),
 		ignoreTlsErrors: z.boolean().optional(),
 		proxyMode: z.enum(ProxyModes).optional(),
 		proxyId: proxyIdValidation,
@@ -214,7 +221,6 @@ export const editMonitorBodyValidation = z
 		geoCheckEnabled: z.boolean().optional(),
 		geoCheckLocations: z.array(z.enum(GeoContinents)).optional(),
 		geoCheckInterval: z.number().min(300000).optional(),
-		dockerLogsEnabled: z.boolean().optional(),
 		dnsServer: dnsServerValidation.optional(),
 		dnsRecordType: z.enum(DnsRecordTypes).optional(),
 	})
@@ -274,6 +280,7 @@ const importedMonitorSchema = z
 		tags: z.array(z.string()).default([]),
 		customUpCodes: z.array(httpStatusCode).default([]),
 		secret: z.string().optional(),
+		sshPrivateKey: z.string().optional(),
 		cpuAlertThreshold: z.number().default(100),
 		cpuAlertCounter: z.number().default(5),
 		memoryAlertThreshold: z.number().default(100),
@@ -290,8 +297,6 @@ const importedMonitorSchema = z
 		geoCheckEnabled: z.boolean().default(false),
 		geoCheckLocations: z.array(z.enum(GeoContinents)).default([]),
 		geoCheckInterval: z.number().min(300000).default(300000),
-		dockerLogsEnabled: z.boolean().default(false),
-
 		dnsServer: dnsServerValidation.optional(),
 		dnsRecordType: z.enum(DnsRecordTypes).optional(),
 		createdAt: z.string().optional(),
@@ -327,21 +332,6 @@ export const getDockerContainerNameParamValidation = z.object({
 });
 export const getDockerContainerByNameQueryValidation = z.object({ dateRange: z.enum(DateRanges).optional() });
 
-export const getDockerContainerLogsQueryValidation = z
-	.object({
-		before: z.iso.datetime().optional(),
-		after: z.iso.datetime().optional(),
-		limit: z.coerce.number().int().min(1).max(DOCKER_LOG_PAGE_MAX).default(DOCKER_LOG_PAGE_DEFAULT),
-	})
-	.superRefine((query, ctx) => {
-		if (query.before && query.after) {
-			ctx.addIssue({
-				code: "custom",
-				message: "Specify either before or after, not both",
-				path: ["after"],
-			});
-		}
-	});
 // Canonical monitor shape returned by /monitors endpoints. Keep aligned with
 // what the controllers actually serialize.
 export const monitorResponseSchema = z
@@ -369,6 +359,7 @@ export const monitorResponseSchema = z
 		tags: z.array(z.string()),
 		customUpCodes: z.array(httpStatusCode).optional(),
 		secret: z.string().optional(),
+		sshPrivateKey: z.string().optional(),
 		cpuAlertThreshold: z.number(),
 		memoryAlertThreshold: z.number(),
 		diskAlertThreshold: z.number(),
@@ -380,7 +371,6 @@ export const monitorResponseSchema = z
 		geoCheckEnabled: z.boolean(),
 		geoCheckLocations: z.array(z.enum(GeoContinents)),
 		geoCheckInterval: z.number(),
-		dockerLogsEnabled: z.boolean(),
 		dnsServer: z.string().optional(),
 		dnsRecordType: z.enum(DnsRecordTypes).optional(),
 		teamId: z.string(),
@@ -539,26 +529,3 @@ export const dockerContainerDetailsResponseSchema = z.object({
 			.nullable(),
 	}),
 });
-
-export const dockerLogLineResponseSchema = z.object({
-	ts: z.string(),
-	stream: z.enum(DockerLogStreams),
-	text: z.string(),
-});
-
-export const dockerLogResponseSchema = z.object({
-	id: z.string(),
-	metadata: z.object({ monitorId: z.string(), teamId: z.string(), containerId: z.string(), containerName: z.string() }),
-	lines: z.array(dockerLogLineResponseSchema),
-	gap: z.boolean(),
-	checkedAt: z.string(),
-	expiry: z.string(),
-	createdAt: z.string(),
-	updatedAt: z.string(),
-});
-
-// Response of GET /monitors/docker/details/{monitorId}/containers/{containerName}/logs.
-export const dockerContainerLogsResponseSchema = z.object({
-	logs: z.array(dockerLogResponseSchema),
-	nextCursor: z.string().nullable(),
-});

server/src/api/validation/notificationValidation.ts

@@ -123,13 +123,6 @@ export const createNotificationBodyValidation = z.discriminatedUnion("type", [
 		address: z.string().min(1, "User key is required"),
 		accessToken: z.string().min(1, "App token is required"),
 	}),
-	// Signalgrid notification
-	z.object({
-		notificationName: z.string().min(1, "Notification name is required"),
-		type: z.literal("signalgrid"),
-		address: z.string().min(1, "Channel is required"),
-		accessToken: z.string().min(1, "Client key is required"),
-	}),
 	// Twilio SMS notification
 	z.object({
 		notificationName: z.string().min(1, "Notification name is required"),

server/src/config/services.api.ts

@@ -35,7 +35,6 @@ export const buildApi = (shared: SharedServices, jobScheduler: IJobScheduler): A
 		monitorsRepository,
 		checksRepository,
 		geoChecksRepository,
-		dockerLogsRepository,
 		monitorStatsRepository,
 		statusPagesRepository,
 		usersRepository,
@@ -76,7 +75,6 @@ export const buildApi = (shared: SharedServices, jobScheduler: IJobScheduler): A
 		monitorsRepository,
 		checksRepository,
 		geoChecksRepository,
-		dockerLogsRepository,
 		monitorStatsRepository,
 		statusPagesRepository,
 		incidentsRepository,

server/src/config/services.shared.ts

@@ -13,7 +13,6 @@ import { IDb } from "@/db/db.interface.js";
 import { ISettingsService, EnvConfig, SettingsService } from "@/domain/app-settings/app-settings.service.js";
 import { ICheckService, CheckService } from "@/domain/checks/check.service.js";
 import { IGeoChecksService, GeoChecksService } from "@/domain/geo-checks/geo-check.service.js";
-import { IDockerLogsService, DockerLogsService } from "@/domain/docker/docker-log.service.js";
 import { IIncidentService, IncidentService } from "@/domain/incidents/incident.service.js";
 import { INotificationMessageBuilder, NotificationMessageBuilder } from "@/domain/notifications/notification.message-builder.js";
 import { INotificationsService, NotificationsService } from "@/domain/notifications/notification.service.js";
@@ -33,7 +32,6 @@ import { MatrixProvider } from "@/domain/notifications/providers/matrix.js";
 import { TeamsProvider } from "@/domain/notifications/providers/teams.js";
 import { TelegramProvider } from "@/domain/notifications/providers/telegram.js";
 import { PushoverProvider } from "@/domain/notifications/providers/pushover.js";
-import { SignalgridProvider } from "@/domain/notifications/providers/signalgrid.js";
 import { TwilioProvider } from "@/domain/notifications/providers/twilio.js";
 import { NtfyProvider } from "@/domain/notifications/providers/ntfy.js";
 
@@ -60,7 +58,6 @@ import { IProxiesRepository } from "@/domain/proxies/proxy.repository.interface.
 import MongoSettingsRepository from "@/domain/app-settings/app-settings.repository.mongo.js";
 import MongoChecksRepository from "@/domain/checks/check.repository.mongo.js";
 import MongoGeoChecksRepository from "@/domain/geo-checks/geo-check.repository.mongo.js";
-import MongoDockerLogsRepository from "@/domain/docker/docker-log.repository.mongo.js";
 import MongoIncidentsRepository from "@/domain/incidents/incident.repository.mongo.js";
 import MongoInvitesRepository from "@/domain/invites/invite.repository.mongo.js";
 import MongoJobsRepository from "@/domain/jobs/job.repository.mongo.js";
@@ -75,7 +72,6 @@ import MongoTagsRepository from "@/domain/tags/tag.repository.mongo.js";
 import MongoTeamsRepository from "@/domain/teams/team.repository.model.js";
 import MongoUsersRepository from "@/domain/users/user.repository.mongo.js";
 import MongoProxiesRepository from "@/domain/proxies/proxy.repository.mongo.js";
-import { IDockerLogsRepository } from "@/domain/docker/docker-log.repository.interface.js";
 
 // Shared infrastructure + business services that both the API and the worker process construct.
 export interface SharedServices {
@@ -87,7 +83,6 @@ export interface SharedServices {
 	incidentService: IIncidentService;
 	checkService: ICheckService;
 	geoChecksService: IGeoChecksService;
-	dockerLogsService: IDockerLogsService;
 	notificationsService: INotificationsService;
 
 	// Queue identity (one per process; the worker reuses these)
@@ -99,7 +94,6 @@ export interface SharedServices {
 	monitorsRepository: IMonitorsRepository;
 	checksRepository: IChecksRepository;
 	geoChecksRepository: IGeoChecksRepository;
-	dockerLogsRepository: IDockerLogsRepository;
 	monitorStatsRepository: IMonitorStatsRepository;
 	statusPagesRepository: IStatusPagesRepository;
 	usersRepository: IUsersRepository;
@@ -137,7 +131,6 @@ export const buildShared = async ({
 	const incidentsRepository = new MongoIncidentsRepository();
 	const usersRepository = new MongoUsersRepository();
 	const geoChecksRepository = new MongoGeoChecksRepository();
-	const dockerLogsRepository = new MongoDockerLogsRepository();
 	const notificationsRepository = new MongoNotificationsRepository();
 	const jobsRepository = new MongoJobsRepository(workerId);
 	const queueWorkersRepository = new MongoQueueWorkersRepository();
@@ -168,7 +161,6 @@ export const buildShared = async ({
 		monitorsRepository,
 	});
 
-	const dockerLogsService = new DockerLogsService({ logger, dockerLogsRepository });
 	const webhookProvider = new WebhookProvider(logger);
 	const rocketChatProvider = new RocketChatProvider(logger);
 	const slackProvider = new SlackProvider(logger);
@@ -179,7 +171,6 @@ export const buildShared = async ({
 	const teamsProvider = new TeamsProvider(logger);
 	const telegramProvider = new TelegramProvider(logger);
 	const pushoverProvider = new PushoverProvider(logger);
-	const signalgridProvider = new SignalgridProvider(logger);
 	const twilioProvider = new TwilioProvider(logger);
 	const ntfyProvider = new NtfyProvider(logger);
 
@@ -194,7 +185,6 @@ export const buildShared = async ({
 		teams: teamsProvider,
 		telegram: telegramProvider,
 		pushover: pushoverProvider,
-		signalgrid: signalgridProvider,
 		twilio: twilioProvider,
 		ntfy: ntfyProvider,
 	};
@@ -217,7 +207,6 @@ export const buildShared = async ({
 		incidentService,
 		checkService,
 		geoChecksService,
-		dockerLogsService,
 		notificationsService,
 		workerId,
 		jobsRepository,
@@ -225,7 +214,6 @@ export const buildShared = async ({
 		queueWorkersRepository,
 		checksRepository,
 		geoChecksRepository,
-		dockerLogsRepository,
 		monitorStatsRepository,
 		statusPagesRepository,
 		usersRepository,

server/src/config/services.worker.ts

@@ -52,7 +52,6 @@ export const buildWorker = async (shared: SharedServices, envSettings: EnvConfig
 		settingsService,
 		checkService,
 		geoChecksService,
-		dockerLogsService,
 		notificationsService,
 		incidentService,
 		workerId,
@@ -61,7 +60,6 @@ export const buildWorker = async (shared: SharedServices, envSettings: EnvConfig
 		monitorsRepository,
 		checksRepository,
 		geoChecksRepository,
-		dockerLogsRepository,
 		monitorStatsRepository,
 		incidentsRepository,
 		teamsRepository,
@@ -97,7 +95,7 @@ export const buildWorker = async (shared: SharedServices, envSettings: EnvConfig
 	]);
 
 	const proxyResolver = new ProxyResolver(proxiesRepository, settingsService, logger);
-	const bufferService = new BufferService(logger, checkService, geoChecksService, dockerLogsService, settingsService, jobsRepository);
+	const bufferService = new BufferService(logger, checkService, geoChecksService, settingsService, jobsRepository);
 	const statusService = new StatusService(logger, monitorsRepository, monitorStatsRepository);
 	const monitorStatusPolicy = new MonitorStatusPolicy();
 
@@ -121,7 +119,6 @@ export const buildWorker = async (shared: SharedServices, envSettings: EnvConfig
 		networkService,
 		proxyResolver,
 		bufferService,
-		dockerLogsService,
 		logger
 	);
 	const checkEvaluator = new CheckEvaluator(statusService, monitorStatusPolicy);
@@ -141,8 +138,7 @@ export const buildWorker = async (shared: SharedServices, envSettings: EnvConfig
 		monitorStatsRepository,
 		checksRepository,
 		incidentsRepository,
-		geoChecksRepository,
-		dockerLogsRepository
+		geoChecksRepository
 	);
 
 	const worker = await DBQueueWorker.create({

server/src/db/migration/0012_migrateDockerMonitorUrls.ts

@@ -7,8 +7,8 @@ import type { ILogger } from "@/utils/logger.js";
  * The old docker provider interpreted monitor.url as a container name/ID and only
  * ever talked to the local socket, so every pre-existing docker monitor's host is
  * definitionally unix:///var/run/docker.sock. The container name is preserved in
- * the description. Urls already in host form (unix:// or an absolute socket
- * path) are left untouched, which makes the migration idempotent.
+ * the description. Urls already in host form (unix://, ssh://, or an absolute
+ * socket path) are left untouched, which makes the migration idempotent.
  */
 export async function migrateDockerMonitorUrls(logger: ILogger): Promise<void> {
 	const SERVICE_NAME = "Migration:MigrateDockerMonitorUrls";
@@ -16,7 +16,7 @@ export async function migrateDockerMonitorUrls(logger: ILogger): Promise<void> {
 	try {
 		logger.info({ service: SERVICE_NAME, message: "Starting docker monitor url migration" });
 
-		const result = await MonitorModel.updateMany({ type: "docker", url: { $not: /^(unix:\/\/|\/)/ } }, [
+		const result = await MonitorModel.updateMany({ type: "docker", url: { $not: /^((unix|ssh):\/\/|\/)/ } }, [
 			{
 				$set: {
 					description: {

server/src/domain/checks/check.model.ts

@@ -22,7 +22,7 @@ import {
 	DockerContainerSummary,
 	DockerHealthStatuses,
 	DockerPortProtocols,
-} from "@/domain/docker/docker.type.js";
+} from "@/types/network.js";
 
 type CheckMetadataDocument = Omit<CheckMetadata, "monitorId" | "teamId"> & {
 	monitorId: Types.ObjectId;

server/src/domain/checks/check.snapshot.ts

@@ -11,7 +11,7 @@ import type {
 	SnapshotHostInfo,
 	SnapshotMemoryInfo,
 } from "@/domain/checks/check.type.js";
-import { DockerContainerSummary } from "@/domain/docker/docker.type.js";
+import { DockerContainerSummary } from "@/types/network.js";
 import { toDateString } from "@/utils/mongoMappers.js";
 
 export type CheckSnapshotSource = Pick<

server/src/domain/checks/check.type.ts

@@ -1,5 +1,5 @@
 import type { MonitorType } from "@/domain/monitors/monitor.type.js";
-import { DockerContainerInfo, DockerContainerSummary } from "@/domain/docker/docker.type.js";
+import { DockerContainerInfo, DockerContainerSummary } from "@/types/network.js";
 import type { Response } from "got";
 
 export const CHECK_TTL_SENTINEL = 366;

server/src/domain/docker/docker-log.model.ts

@@ -1,60 +0,0 @@
-import { Schema, model, Types } from "mongoose";
-import { DockerLogStreams, type DockerLogLine } from "@/domain/docker/docker.type.js";
-import type { DockerLog, DockerLogMetadata } from "@/domain/docker/docker-log.type.js";
-
-type DockerLogMetadataDocument = Omit<DockerLogMetadata, "monitorId" | "teamId"> & {
-	monitorId: Types.ObjectId;
-	teamId: Types.ObjectId;
-};
-
-type DockerLogDocumentBase = Omit<DockerLog, "id" | "metadata" | "checkedAt" | "expiry" | "createdAt" | "updatedAt"> & {
-	metadata: DockerLogMetadataDocument;
-	checkedAt: Date;
-	expiry: Date;
-	createdAt: Date;
-	updatedAt: Date;
-};
-
-export interface DockerLogDocument extends DockerLogDocumentBase {
-	_id: Types.ObjectId;
-}
-
-const dockerLogMetadataSchema = new Schema<DockerLogMetadataDocument>(
-	{
-		monitorId: { type: Schema.Types.ObjectId, required: true },
-		teamId: { type: Schema.Types.ObjectId, required: true },
-		containerId: { type: String, required: true },
-		containerName: { type: String, required: true },
-	},
-	{ _id: false }
-);
-
-const dockerLogLineSchema = new Schema<DockerLogLine>(
-	{
-		ts: { type: String, required: true },
-		stream: { type: String, enum: DockerLogStreams, required: true },
-		text: { type: String, default: "" },
-	},
-	{ _id: false }
-);
-
-const DockerLogSchema = new Schema<DockerLogDocument>(
-	{
-		metadata: { type: dockerLogMetadataSchema, required: true },
-		lines: { type: [dockerLogLineSchema], required: true, default: [] },
-		gap: { type: Boolean, default: false },
-		checkedAt: { type: Date, required: true },
-		expiry: { type: Date, required: true, index: { expires: 0 } }, // TTL: Mongo deletes the doc once `expiry` passes
-	},
-	{ timestamps: true }
-);
-
-DockerLogSchema.index({ "metadata.monitorId": 1, "metadata.containerName": 1, checkedAt: -1 }); // API paging
-DockerLogSchema.index({ "metadata.monitorId": 1, "metadata.containerId": 1, checkedAt: -1 }); // cursor seed
-DockerLogSchema.index({ "metadata.teamId": 1 });
-
-const DockerLogModel = model<DockerLogDocument>("DockerLog", DockerLogSchema);
-
-export type { DockerLogMetadataDocument };
-export { DockerLogModel };
-export default DockerLogModel;

server/src/domain/docker/docker-log.repository.interface.ts

@@ -1,10 +0,0 @@
-import { DockerLog } from "@/domain/docker/docker-log.type.js";
-
-export interface IDockerLogsRepository {
-	createDockerLogs(logs: Omit<DockerLog, "id" | "createdAt" | "updatedAt">[]): Promise<number>;
-	findLastLineTimestamp(monitorId: string, containerId: string): Promise<string | null>;
-	findByContainerName(args: { monitorId: string; containerName: string; before?: Date; after?: Date; limit: number }): Promise<DockerLog[]>;
-	deleteByMonitorId(monitorId: string): Promise<number>;
-	deleteByTeamId(teamId: string): Promise<number>;
-	deleteByMonitorIdsNotIn(monitorIds: string[]): Promise<number>;
-}

server/src/domain/docker/docker-log.repository.mongo.ts

@@ -1,99 +0,0 @@
-import DockerLogModel, { DockerLogDocument } from "@/domain/docker/docker-log.model.js";
-import { IDockerLogsRepository } from "@/domain/docker/docker-log.repository.interface.js";
-import { DockerLog } from "@/domain/docker/docker-log.type.js";
-import { toDateString, toStringId } from "@/utils/mongoMappers.js";
-import mongoose from "mongoose";
-
-const SERVICE_NAME = "DockerLogsRepository";
-
-class MongoDockerLogsRepository implements IDockerLogsRepository {
-	static SERVICE_NAME = SERVICE_NAME;
-
-	private toEntity = (doc: DockerLogDocument): DockerLog => {
-		return {
-			id: toStringId(doc._id),
-			metadata: {
-				monitorId: toStringId(doc.metadata.monitorId),
-				teamId: toStringId(doc.metadata.teamId),
-				containerId: doc.metadata.containerId,
-				containerName: doc.metadata.containerName,
-			},
-			lines: (doc.lines ?? []).map((line) => ({ ts: line.ts, stream: line.stream, text: line.text ?? "" })),
-			gap: doc.gap ?? false,
-			checkedAt: toDateString(doc.checkedAt),
-			expiry: toDateString(doc.expiry),
-			createdAt: toDateString(doc.createdAt),
-			updatedAt: toDateString(doc.updatedAt),
-		};
-	};
-
-	createDockerLogs = async (logs: Omit<DockerLog, "id" | "createdAt" | "updatedAt">[]): Promise<number> => {
-		if (logs.length === 0) return 0;
-		const docs = await DockerLogModel.insertMany(
-			logs.map((log) => {
-				return {
-					metadata: {
-						monitorId: new mongoose.Types.ObjectId(log.metadata.monitorId),
-						teamId: new mongoose.Types.ObjectId(log.metadata.teamId),
-						containerId: log.metadata.containerId,
-						containerName: log.metadata.containerName,
-					},
-					lines: log.lines,
-					gap: log.gap,
-					checkedAt: new Date(log.checkedAt),
-					expiry: new Date(log.expiry),
-				};
-			}),
-			{ ordered: false }
-		);
-		return docs.length;
-	};
-
-	findLastLineTimestamp = async (monitorId: string, containerId: string): Promise<string | null> => {
-		const doc = await DockerLogModel.findOne({
-			"metadata.monitorId": new mongoose.Types.ObjectId(monitorId),
-			"metadata.containerId": containerId,
-		})
-			.sort({ checkedAt: -1 })
-			.select({ lines: { $slice: -1 } })
-			.lean<Pick<DockerLogDocument, "lines">>();
-		return doc?.lines?.[0]?.ts ?? null;
-	};
-
-	findByContainerName = async ({
-		monitorId,
-		containerName,
-		before,
-		after,
-		limit,
-	}: {
-		monitorId: string;
-		containerName: string;
-		before?: Date;
-		after?: Date;
-		limit: number;
-	}): Promise<DockerLog[]> => {
-		const docs = await DockerLogModel.find({
-			"metadata.monitorId": new mongoose.Types.ObjectId(monitorId),
-			"metadata.containerName": containerName,
-			...(before ? { checkedAt: { $lt: before } } : {}),
-			...(after ? { checkedAt: { $gt: after } } : {}),
-		})
-			.sort({ checkedAt: after ? 1 : -1 })
-			.limit(limit)
-			.lean<DockerLogDocument[]>();
-		const entities = docs.map(this.toEntity);
-		return after ? entities.reverse() : entities;
-	};
-
-	deleteByMonitorId = async (monitorId: string) =>
-		(await DockerLogModel.deleteMany({ "metadata.monitorId": new mongoose.Types.ObjectId(monitorId) })).deletedCount ?? 0;
-
-	deleteByTeamId = async (teamId: string) =>
-		(await DockerLogModel.deleteMany({ "metadata.teamId": new mongoose.Types.ObjectId(teamId) })).deletedCount ?? 0;
-
-	deleteByMonitorIdsNotIn = async (monitorIds: string[]) =>
-		(await DockerLogModel.deleteMany({ "metadata.monitorId": { $nin: monitorIds.map((id) => new mongoose.Types.ObjectId(id)) } })).deletedCount ?? 0;
-}
-
-export default MongoDockerLogsRepository;

server/src/domain/docker/docker-log.service.ts

@@ -1,100 +0,0 @@
-import { IDockerLogsRepository } from "@/domain/docker/docker-log.repository.interface.js";
-import { DOCKER_LOG_RETENTION_DAYS, DockerLog } from "@/domain/docker/docker-log.type.js";
-import { DOCKER_LOG_TAIL_LINES, DockerLogLine } from "@/domain/docker/docker.type.js";
-import { DockerStatusPayload, MonitorStatusResponse } from "@/types/network.js";
-import { ILogger } from "@/utils/logger.js";
-import mongoose from "mongoose";
-
-const SERVICE_NAME = "DockerLogsService";
-const MS_PER_DAY = 24 * 60 * 60 * 1000;
-
-export interface IDockerLogsService {
-	buildDockerLogs(status: MonitorStatusResponse<DockerStatusPayload>): Promise<DockerLog[]>;
-	createDockerLogs(logs: DockerLog[]): Promise<number>;
-}
-
-export class DockerLogsService implements IDockerLogsService {
-	static SERVICE_NAME = SERVICE_NAME;
-
-	private logger: ILogger;
-	private dockerLogsRepository: IDockerLogsRepository;
-
-	private lastTimestampByContainer = new Map<string, string>();
-
-	constructor({ logger, dockerLogsRepository }: { logger: ILogger; dockerLogsRepository: IDockerLogsRepository }) {
-		this.logger = logger;
-		this.dockerLogsRepository = dockerLogsRepository;
-	}
-
-	private generateCursorKey = (monitorId: string, containerId: string) => `${monitorId}:${containerId}`;
-
-	private getLastTimestamp = async (monitorId: string, containerId: string) => {
-		const key = this.generateCursorKey(monitorId, containerId);
-		const cached = this.lastTimestampByContainer.get(key);
-		if (cached !== undefined) return cached || null;
-		const stored = await this.dockerLogsRepository.findLastLineTimestamp(monitorId, containerId);
-		this.lastTimestampByContainer.set(key, stored ?? "");
-		return stored;
-	};
-
-	private newLines = (lines: DockerLogLine[], lastTimestamp: string | null): DockerLogLine[] => {
-		return lastTimestamp
-			? lines.filter((line) => {
-					return line.ts > lastTimestamp;
-				})
-			: lines;
-	};
-
-	private maxTimestamp = (lines: DockerLogLine[]) => {
-		return lines.reduce((max, line) => (line.ts > max ? line.ts : max), "");
-	};
-
-	buildDockerLogs = async (status: MonitorStatusResponse<DockerStatusPayload>): Promise<DockerLog[]> => {
-		const payload = typeof status.payload === "object" ? status.payload : null;
-		const containerLogs = payload?.logs ?? [];
-		if (containerLogs.length === 0) return [];
-
-		const now = new Date();
-		const checkedAt = now.toISOString();
-		const expiry = new Date(now.getTime() + DOCKER_LOG_RETENTION_DAYS * MS_PER_DAY).toISOString();
-		const results: DockerLog[] = [];
-
-		for (const dockerContainerLog of containerLogs) {
-			const { containerId, containerName, lines } = dockerContainerLog;
-			try {
-				const lastTimestamp = await this.getLastTimestamp(status.monitorId, containerId);
-				const fresh = this.newLines(lines, lastTimestamp);
-				if (fresh.length === 0) continue;
-				this.lastTimestampByContainer.set(this.generateCursorKey(status.monitorId, containerId), this.maxTimestamp(fresh));
-				results.push({
-					id: new mongoose.Types.ObjectId().toString(),
-					metadata: {
-						monitorId: status.monitorId,
-						teamId: status.teamId,
-						containerId,
-						containerName,
-					},
-					lines: fresh,
-					gap: fresh.length === DOCKER_LOG_TAIL_LINES,
-					// We only fetch DOCKER_LOG_TAIL_LINES worth of logs.
-					// If we have 200 fresh logs, there _could_ be more than 200 lines, so set gap = true
-					// Client can display that some logs may be missing
-					checkedAt,
-					expiry,
-					createdAt: checkedAt,
-					updatedAt: checkedAt,
-				});
-			} catch (error: unknown) {
-				this.logger.warn({
-					message: `Failed to build docker logs for container ${containerName}`,
-					service: SERVICE_NAME,
-					method: "buildDockerLogs",
-					details: { monitorId: status.monitorId, containerId, error: error instanceof Error ? error.message : String(error) },
-				});
-			}
-		}
-		return results;
-	};
-
-	createDockerLogs = async (logs: DockerLog[]): Promise<number> => this.dockerLogsRepository.createDockerLogs(logs);
-}

server/src/domain/docker/docker-log.type.ts

@@ -1,28 +0,0 @@
-import { DockerLogLine } from "@/domain/docker/docker.type.js";
-
-export const DOCKER_LOG_RETENTION_DAYS = 7;
-export const DOCKER_LOG_PAGE_DEFAULT = 20;
-export const DOCKER_LOG_PAGE_MAX = 50;
-
-export interface DockerLogMetadata {
-	monitorId: string;
-	teamId: string;
-	containerId: string;
-	containerName: string;
-}
-
-export interface DockerLog {
-	id: string;
-	metadata: DockerLogMetadata;
-	lines: DockerLogLine[];
-	gap: boolean;
-	checkedAt: string;
-	expiry: string;
-	createdAt: string;
-	updatedAt: string;
-}
-
-export interface DockerLogPage {
-	logs: DockerLog[];
-	nextCursor: string | null;
-}

server/src/domain/docker/docker.type.ts

@@ -1,65 +0,0 @@
-export const DockerContainerStates = ["created", "running", "paused", "restarting", "removing", "exited", "dead"] as const;
-export type DockerContainerState = (typeof DockerContainerStates)[number];
-
-export const DockerHealthStatuses = ["healthy", "unhealthy", "starting", "none"] as const;
-export type DockerHealthStatus = (typeof DockerHealthStatuses)[number];
-
-export const DockerPortProtocols = ["tcp", "udp", "sctp"] as const;
-export type DockerPortProtocol = (typeof DockerPortProtocols)[number];
-
-export const DockerLogStreams = ["stdout", "stderr"] as const;
-export type DockerLogStream = (typeof DockerLogStreams)[number];
-
-export const DOCKER_LOG_TAIL_LINES = 200;
-
-export interface DockerLogLine {
-	ts: string;
-	stream: DockerLogStream;
-	text: string;
-}
-
-export interface DockerContainerLogs {
-	containerId: string;
-	containerName: string;
-	lines: DockerLogLine[];
-}
-
-export interface DockerContainerPort {
-	privatePort: number;
-	protocol: DockerPortProtocol;
-	publicPort?: number;
-	hostIp?: string;
-}
-
-export interface DockerContainerMount {
-	type: string; // open set: bind, volume, tmpfs, image, npipe, cluster, …
-	name?: string;
-	source: string;
-	destination: string;
-	mode: string;
-	rw: boolean;
-}
-
-export interface DockerContainerInfo {
-	id: string;
-	name: string;
-	image: string;
-	state: DockerContainerState;
-	status: string;
-	health: DockerHealthStatus;
-	cpuPct?: number; // fraction of one core (docker stats convention / 100); exceeds 1 when using multiple cores
-	memoryUsedBytes?: number;
-	memoryLimitBytes?: number;
-	memoryPct?: number; // 0-1 fraction of the memory limit
-	restartCount?: number;
-	startedAt?: string; // ISO date
-	ports?: DockerContainerPort[];
-	mounts?: DockerContainerMount[];
-}
-
-export interface DockerContainerSummary {
-	total: number;
-	running: number;
-	stopped: number;
-	unhealthy: number;
-}

server/src/domain/monitors/monitor.model.ts

@@ -235,6 +235,9 @@ const MonitorSchema = new Schema<MonitorDocument>(
 		secret: {
 			type: String,
 		},
+		sshPrivateKey: {
+			type: String,
+		},
 		cpuAlertThreshold: {
 			type: Number,
 			default: 100,
@@ -303,10 +306,6 @@ const MonitorSchema = new Schema<MonitorDocument>(
 			type: Number,
 			default: 300000,
 		},
-		dockerLogsEnabled: {
-			type: Boolean,
-			default: false,
-		},
 		dnsServer: {
 			type: String,
 		},

server/src/domain/monitors/monitor.repository.mongo.ts

@@ -436,6 +436,7 @@ class MongoMonitorsRepository implements IMonitorsRepository {
 			tags: tagIds,
 			customUpCodes: doc.customUpCodes ?? [],
 			secret: doc.secret ?? undefined,
+			sshPrivateKey: doc.sshPrivateKey ?? undefined,
 			cpuAlertThreshold: doc.cpuAlertThreshold,
 			cpuAlertCounter: doc.cpuAlertCounter,
 			memoryAlertThreshold: doc.memoryAlertThreshold,
@@ -453,7 +454,6 @@ class MongoMonitorsRepository implements IMonitorsRepository {
 			geoCheckEnabled: doc.geoCheckEnabled ?? false,
 			geoCheckLocations: doc.geoCheckLocations ?? [],
 			geoCheckInterval: doc.geoCheckInterval ?? 300000,
-			dockerLogsEnabled: doc.dockerLogsEnabled ?? false,
 			dnsServer: doc.dnsServer ?? undefined,
 			dnsRecordType: doc.dnsRecordType ?? undefined,
 			createdAt: toDateString(doc.createdAt),

server/src/domain/monitors/monitor.service.ts

@@ -9,7 +9,6 @@ import type {
 	GroupedGeoCheckResult,
 	DockerDetailsResult,
 	DockerContainerDetailsResult,
-	DockerContainerLogsResult,
 } from "@/domain/monitors/monitor.type.js";
 import { supportsGeoCheck, supportsUptimeDetails } from "@/domain/monitors/monitor.type.js";
 import type {
@@ -32,7 +31,6 @@ import type { ImportedMonitor } from "@/api/validation/monitorValidation.js";
 import { ILogger } from "@/utils/logger.js";
 import { IJobScheduler } from "@/worker/worker.interface.js";
 import { DateRange } from "@/types/query.js";
-import { IDockerLogsRepository } from "@/domain/docker/docker-log.repository.interface.js";
 
 const SERVICE_NAME = "MonitorService";
 
@@ -60,7 +58,7 @@ const computeRestartsInRange = (aggregate: DockerContainerStatsBucket[]): number
 
 export interface IMonitorService {
 	// create
-	createMonitor(teamId: string, userId: string, body: Partial<Monitor>): Promise<Monitor>;
+	createMonitor(teamId: string, userId: string, body: Partial<Monitor>): Promise<void>;
 	createMonitors(monitors: Array<Monitor>): Promise<Monitor[] | null>;
 	addDemoMonitors(args: { userId: string; teamId: string }): Promise<Monitor[]>;
 
@@ -75,14 +73,6 @@ export interface IMonitorService {
 		containerName: string;
 		dateRange: DateRange;
 	}): Promise<DockerContainerDetailsResult>;
-	getDockerContainerLogs(args: {
-		teamId: string;
-		monitorId: string;
-		containerName: string;
-		before?: Date;
-		after?: Date;
-		limit: number;
-	}): Promise<DockerContainerLogsResult>;
 	getGeoChecksByMonitorId(args: {
 		teamId: string;
 		monitorId: string;
@@ -140,7 +130,6 @@ export class MonitorService implements IMonitorService {
 	private monitorsRepository: IMonitorsRepository;
 	private checksRepository: IChecksRepository;
 	private geoChecksRepository: IGeoChecksRepository;
-	private dockerLogsRepository: IDockerLogsRepository;
 	private monitorStatsRepository: IMonitorStatsRepository;
 	private statusPagesRepository: IStatusPagesRepository;
 	private incidentsRepository: IIncidentsRepository;
@@ -152,7 +141,6 @@ export class MonitorService implements IMonitorService {
 		monitorsRepository,
 		checksRepository,
 		geoChecksRepository,
-		dockerLogsRepository,
 		monitorStatsRepository,
 		statusPagesRepository,
 		incidentsRepository,
@@ -163,7 +151,6 @@ export class MonitorService implements IMonitorService {
 		monitorsRepository: IMonitorsRepository;
 		checksRepository: IChecksRepository;
 		geoChecksRepository: IGeoChecksRepository;
-		dockerLogsRepository: IDockerLogsRepository;
 		monitorStatsRepository: IMonitorStatsRepository;
 		statusPagesRepository: IStatusPagesRepository;
 		incidentsRepository: IIncidentsRepository;
@@ -174,13 +161,12 @@ export class MonitorService implements IMonitorService {
 		this.monitorsRepository = monitorsRepository;
 		this.checksRepository = checksRepository;
 		this.geoChecksRepository = geoChecksRepository;
-		this.dockerLogsRepository = dockerLogsRepository;
 		this.monitorStatsRepository = monitorStatsRepository;
 		this.statusPagesRepository = statusPagesRepository;
 		this.incidentsRepository = incidentsRepository;
 	}
 
-	createMonitor = async (teamId: string, userId: string, body: Monitor): Promise<Monitor> => {
+	createMonitor = async (teamId: string, userId: string, body: Monitor): Promise<void> => {
 		// proxyId is only needed in custom mode
 		if (body.proxyMode !== "custom") {
 			delete body.proxyId;
@@ -191,7 +177,6 @@ export class MonitorService implements IMonitorService {
 		}
 
 		this.scheduler.addJob(monitor.id, monitor);
-		return monitor;
 	};
 
 	createMonitors = async (monitors: Array<Monitor>): Promise<Monitor[] | null> => {
@@ -400,41 +385,6 @@ export class MonitorService implements IMonitorService {
 		};
 	};
 
-	getDockerContainerLogs = async ({
-		teamId,
-		monitorId,
-		containerName,
-		before,
-		after,
-		limit,
-	}: {
-		teamId: string;
-		monitorId: string;
-		containerName: string;
-		before?: Date;
-		after?: Date;
-		limit: number;
-	}): Promise<DockerContainerLogsResult> => {
-		const monitor = await this.monitorsRepository.findById(monitorId, teamId);
-		if (!monitor) {
-			throw new AppError({
-				message: `Monitor with ID ${monitorId} not found`,
-				status: 404,
-			});
-		}
-
-		if (monitor.type !== "docker") {
-			throw new AppError({
-				message: `${monitor.type} monitors are not supported for docker container logs`,
-				status: 400,
-			});
-		}
-
-		const logs = await this.dockerLogsRepository.findByContainerName({ monitorId, containerName, before, after, limit });
-		const nextCursor = !after && logs.length === limit ? (logs[logs.length - 1]?.checkedAt ?? null) : null;
-		return { logs, nextCursor };
-	};
-
 	getGeoChecksByMonitorId = async ({
 		teamId,
 		monitorId,
@@ -643,14 +593,6 @@ export class MonitorService implements IMonitorService {
 			});
 		});
 
-		await this.dockerLogsRepository.deleteByMonitorId(monitor.id).catch((err: unknown) => {
-			this.logger.warn({
-				message: `Error deleting docker logs for monitor ${monitor.id} with name ${monitor.name}`,
-				service: SERVICE_NAME,
-				stack: err instanceof Error ? err.stack : undefined,
-			});
-		});
-
 		await this.monitorStatsRepository.deleteByMonitorId(monitor.id).catch((err: unknown) => {
 			this.logger.warn({
 				message: `Error deleting monitor stats for monitor ${monitor.id} with name ${monitor.name}`,

server/src/domain/monitors/monitor.type.ts

@@ -5,7 +5,6 @@ export type { GeoContinent } from "@/domain/geo-checks/geo-check.type.js";
 import http from "node:http";
 import { HardwareStats } from "@/domain/checks/check.type.js";
 import { MonitorStats } from "@/domain/monitor-stats/monitor-stats.type.js";
-import { DockerLogPage } from "@/domain/docker/docker-log.type.js";
 
 export const HttpStatusCodes = [
 	...Object.keys(http.STATUS_CODES).map(Number),
@@ -92,6 +91,7 @@ export interface Monitor {
 	tags: string[];
 	customUpCodes: HttpStatusCode[];
 	secret?: string;
+	sshPrivateKey?: string;
 	cpuAlertThreshold: number;
 	cpuAlertCounter: number;
 	memoryAlertThreshold: number;
@@ -108,7 +108,6 @@ export interface Monitor {
 	geoCheckEnabled?: boolean;
 	geoCheckLocations?: GeoContinent[];
 	geoCheckInterval?: number;
-	dockerLogsEnabled?: boolean;
 	dnsServer?: string;
 	dnsRecordType?: DnsRecordType;
 	recentChecks: CheckSnapshot[];
@@ -190,5 +189,3 @@ export interface Game {
 export type GamesMap = Record<string, Game>;
 
 export type MonitorScheduleFields = Pick<Monitor, "id" | "type" | "isActive" | "interval" | "geoCheckEnabled" | "geoCheckInterval">;
-
-export type DockerContainerLogsResult = DockerLogPage;

server/src/domain/notifications/notification.model.ts

@@ -37,7 +37,6 @@ const NotificationSchema = new Schema<NotificationDocument>(
 				"teams",
 				"telegram",
 				"pushover",
-				"signalgrid",
 				"twilio",
 				"ntfy",
 			] as NotificationChannel[],

server/src/domain/notifications/notification.type.ts

@@ -9,7 +9,6 @@ export const NotificationChannels = [
 	"teams",
 	"telegram",
 	"pushover",
-	"signalgrid",
 	"twilio",
 	"ntfy",
 ] as const;

server/src/domain/notifications/providers/signalgrid.ts

@@ -1,123 +0,0 @@
-const SERVICE_NAME = "SignalgridProvider";
-import type { Notification, NotificationMessage, NotificationSeverity } from "@/domain/notifications/notification.type.js";
-import { NotificationProvider } from "@/domain/notifications/providers/INotificationProvider.js";
-import { getTestMessage } from "@/domain/notifications/providers/utils.js";
-import got from "got";
-
-export class SignalgridProvider extends NotificationProvider {
-	async sendTestAlert(notification: Partial<Notification>): Promise<boolean> {
-		if (!notification.address || !notification.accessToken) {
-			return false;
-		}
-
-		try {
-			await got.post("https://api.signalgrid.co/v1/push", {
-				form: {
-					client_key: notification.accessToken,
-					channel: notification.address,
-					title: "Checkmate Test Notification",
-					body: getTestMessage(),
-					type: "INFO",
-					critical: false,
-				},
-				...this.gotRequestOptions(),
-			});
-			return true;
-		} catch (error) {
-			const errMsg = error instanceof Error ? error.message : "unknown error";
-			const errStack = error instanceof Error ? error.stack : undefined;
-			this.logger.warn({
-				message: "Signalgrid test alert failed",
-				service: SERVICE_NAME,
-				method: "sendTestAlert",
-				stack: errStack,
-				details: { error: errMsg },
-			});
-			return false;
-		}
-	}
-
-	async sendMessage(notification: Notification, message: NotificationMessage): Promise<boolean> {
-		if (!notification.address || !notification.accessToken) {
-			return false;
-		}
-
-		try {
-			await got.post("https://api.signalgrid.co/v1/push", {
-				form: {
-					client_key: notification.accessToken,
-					channel: notification.address,
-					title: message.content.title,
-					body: this.buildSignalgridText(message),
-					type: this.mapSeverity(message.severity),
-					critical: false,
-				},
-				...this.gotRequestOptions(),
-			});
-
-			this.logger.info({
-				message: "Signalgrid notification sent",
-				service: SERVICE_NAME,
-				method: "sendMessage",
-			});
-			return true;
-		} catch (error) {
-			const errMsg = error instanceof Error ? error.message : "unknown error";
-			const errStack = error instanceof Error ? error.stack : undefined;
-			this.logger.warn({
-				message: "Signalgrid alert failed",
-				service: SERVICE_NAME,
-				method: "sendMessage",
-				stack: errStack,
-				details: { error: errMsg },
-			});
-			return false;
-		}
-	}
-
-	private mapSeverity(severity: NotificationSeverity): "CRIT" | "WARN" | "INFO" | "SUCCESS" {
-		switch (severity) {
-			case "critical":
-				return "CRIT";
-			case "warning":
-				return "WARN";
-			case "success":
-				return "SUCCESS";
-			default:
-				return "INFO";
-		}
-	}
-
-	private buildSignalgridText(message: NotificationMessage): string {
-		const lines: string[] = [];
-
-		lines.push(message.content.summary);
-		lines.push("");
-		lines.push("Monitor Details:");
-		lines.push(`• Name: ${message.monitor.name}`);
-		lines.push(`• URL: ${message.monitor.url}`);
-		lines.push(`• Type: ${message.monitor.type}`);
-		lines.push(`• Status: ${message.monitor.status}`);
-
-		if (message.content.details && message.content.details.length > 0) {
-			lines.push("");
-			lines.push("Additional Information:");
-			message.content.details.forEach((detail) => lines.push(`• ${detail}`));
-		}
-
-		if (message.content.thresholds && message.content.thresholds.length > 0) {
-			lines.push("");
-			lines.push("Threshold Breaches:");
-			message.content.thresholds.forEach((breach) => {
-				lines.push(`• ${breach.metric.toUpperCase()}: ${breach.formattedValue} (threshold: ${breach.threshold}${breach.unit})`);
-			});
-		}
-
-		if (message.content.incident) {
-			lines.push("");
-			lines.push(`View Incident: ${message.clientHost}/incidents/${message.monitor.id}`);
-		}
-
-		return lines.join("\n");
-	}
-}