feat: add themed 404 page

Flatlined pulse trace mirrors the PulseNode brand mark - a route
that isn't monitored here reads as "no pulse" rather than a generic
error page.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WpxhtQY3CExQdMs4j7MmJe

app/globals.css

@@ -133,8 +133,22 @@ body {
   animation: pulse-glow 2s ease-in-out infinite;
 }
 
+@keyframes pulse-glow-down {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pn-status-down) 55%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pn-status-down) 0%, transparent);
+  }
+}
+.status-pulse-down {
+  animation: pulse-glow-down 2s ease-in-out infinite;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .status-pulse,
+  .status-pulse-down,
   .pn-toast,
   .pn-spin-in {
     animation: none;

app/not-found.tsx

@@ -0,0 +1,55 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Not Found",
+  description: "No pulse on this route.",
+};
+
+export default function NotFound() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center gap-8 px-6 text-center">
+      <svg
+        width="320"
+        height="64"
+        viewBox="0 0 320 64"
+        fill="none"
+        aria-hidden="true"
+        className="w-full max-w-[320px]"
+      >
+        <polyline
+          points="0,32 30,32 40,10 50,54 60,24 72,32 140,32"
+          fill="none"
+          stroke="var(--pn-accent)"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <line
+          x1="140"
+          y1="32"
+          x2="300"
+          y2="32"
+          stroke="var(--pn-status-down)"
+          strokeWidth="2"
+          strokeLinecap="round"
+          opacity="0.55"
+        />
+        <circle cx="300" cy="32" r="4" fill="var(--pn-status-down)" className="status-pulse-down" />
+      </svg>
+
+      <div className="flex flex-col gap-3">
+        <p className="font-display text-7xl font-semibold tracking-tight text-fg">404</p>
+        <p className="text-base font-medium text-fg">No pulse on this route.</p>
+        <p className="text-sm text-fg-muted">Nothing here is being monitored.</p>
+      </div>
+
+      <Link
+        href="/"
+        className="rounded-md border border-border px-4 py-2 text-sm font-medium text-fg transition-colors hover:border-accent hover:text-accent"
+      >
+        Back to dashboard
+      </Link>
+    </main>
+  );
+}

components/widgets/registry.ts

@@ -6,7 +6,6 @@ import { DockerWidget } from "./docker/Widget";
 import { DatabaseWidget } from "./database/Widget";
 import { SystemWidget } from "./system/Widget";
 import { HttpWidget } from "./http/Widget";
-import { TraefikWidget } from "./traefik/Widget";
 import { ServiceWidget } from "./service/Widget";
 
 type WidgetComponent<T extends Widget["type"]> = ComponentType<{
@@ -21,6 +20,5 @@ export const widgetRegistry: { [K in Widget["type"]]: WidgetComponent<K> } = {
   database: DatabaseWidget,
   system: SystemWidget,
   http: HttpWidget,
-  traefik: TraefikWidget,
   service: ServiceWidget,
 };

components/widgets/traefik/Widget.tsx

@@ -1,72 +0,0 @@
-"use client";
-
-import type { Widget } from "@/lib/config/schema";
-import { useWidgetSubscription } from "@/lib/ws/client";
-import { SkeletonLines } from "@/components/widgets/Skeleton";
-import { WidgetCard } from "@/components/widgets/WidgetCard";
-import { StatusDot } from "@/components/widgets/StatusDot";
-import { BrandIcon } from "@/components/widgets/BrandIcon";
-
-type TraefikWidget = Extract<Widget, { type: "traefik" }>;
-
-export function TraefikWidget({ widget, widgetId }: { widget: TraefikWidget; widgetId: string }) {
-  const result = useWidgetSubscription(widgetId);
-  const data = result?.type === "traefik" ? result.data : null;
-  const errorMessage = result?.type === "error" ? result.message : null;
-  const enabledCount = data?.routers.filter((router) => router.status === "enabled").length ?? 0;
-
-  return (
-    <WidgetCard span={4}>
-      <div className="flex items-center justify-between gap-2">
-        <div className="flex min-w-0 items-center gap-2">
-          <BrandIcon slug={widget.icon} />
-          {widget.href ? (
-            <a
-              href={widget.href}
-              target="_blank"
-              rel="noreferrer"
-              className="truncate text-[15px] font-medium text-fg hover:text-accent"
-            >
-              {widget.name}
-            </a>
-          ) : (
-            <span className="truncate text-[15px] font-medium text-fg">{widget.name}</span>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          {data && (
-            <span className="font-mono text-[11px] tabular-nums text-fg-muted">
-              {data.entrypoints.length} entrypoints
-            </span>
-          )}
-          <StatusDot status={data ? "running" : undefined} />
-        </div>
-      </div>
-      {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
-      {!result && !errorMessage && <SkeletonLines count={3} />}
-      {data && (
-        <>
-          <div className="flex items-start gap-4">
-            <div className="flex flex-col gap-0.5">
-              <span className="font-mono text-2xl leading-none font-semibold tabular-nums text-accent">
-                {data.routers.length}
-              </span>
-              <span className="text-[10px] tracking-wide text-fg-muted uppercase">Routes</span>
-            </div>
-            {enabledCount !== data.routers.length && (
-              <div className="flex flex-col gap-0.5 border-l border-border pl-4">
-                <span className="font-mono text-2xl leading-none font-semibold tabular-nums text-status-degraded">
-                  {enabledCount}
-                </span>
-                <span className="text-[10px] tracking-wide text-fg-muted uppercase">Enabled</span>
-              </div>
-            )}
-          </div>
-          <span className="text-[11px] text-fg-muted">
-            <span className="font-mono tabular-nums">{data.middlewaresCount}</span> middlewares
-          </span>
-        </>
-      )}
-    </WidgetCard>
-  );
-}

lib/collectors/scheduler.ts

@@ -5,7 +5,6 @@ import { parseDuration } from "@/lib/config/duration";
 import { collectDockerContainer, dockerLimit } from "./docker";
 import { collectSystem } from "./system";
 import { collectHttp } from "./http";
-import { collectTraefik } from "./traefik";
 import { collectService } from "./service";
 import type { WidgetResult } from "@/lib/types/widget-result";
 
@@ -20,14 +19,7 @@ interface Job {
   consecutiveFailures: number;
 }
 
-const COLLECTOR_TYPES = new Set<Widget["type"]>([
+const COLLECTOR_TYPES = new Set<Widget["type"]>(["docker", "database", "system", "http", "service"]);
-  "docker",
-  "database",
-  "system",
-  "http",
-  "traefik",
-  "service",
-]);
 
 function isCollectorWidget(widget: Widget): boolean {
   return COLLECTOR_TYPES.has(widget.type);
@@ -39,7 +31,6 @@ function getIntervalMs(widget: Widget): number {
     widget.type === "database" ||
     widget.type === "system" ||
     widget.type === "http" ||
-    widget.type === "traefik" ||
     widget.type === "service"
   ) {
     return parseDuration(widget.interval);
@@ -60,9 +51,6 @@ function sameTarget(a: Widget, b: Widget): boolean {
   if (a.type === "http" && b.type === "http") {
     return a.url === b.url && a.method === b.method && a.expect.status === b.expect.status;
   }
-  if (a.type === "traefik" && b.type === "traefik") {
-    return a.apiUrl === b.apiUrl;
-  }
   if (a.type === "service" && b.type === "service") {
     return a.containerName === b.containerName && a.service === b.service && a.showStats === b.showStats;
   }
@@ -88,10 +76,6 @@ async function collect(widget: Widget): Promise<WidgetResult> {
     );
     return { type: "http", data: { ...data, consecutiveFailures: 0 } };
   }
-  if (widget.type === "traefik") {
-    const data = await collectTraefik(widget.apiUrl);
-    return { type: "traefik", data };
-  }
   if (widget.type === "service") {
     const data = await collectService(widget);
     return { type: "service", data };

lib/collectors/service.ts

@@ -7,6 +7,7 @@ import { collectImmich } from "./services/immich";
 import { collectN8n } from "./services/n8n";
 import { collectUmami } from "./services/umami";
 import { collectHeadscale } from "./services/headscale";
+import { collectTraefikStat } from "./services/traefik";
 
 function collectServiceStat(widget: ServiceWidget): Promise<{ stats: ServiceStat[]; detail?: string[] }> {
   switch (widget.service) {
@@ -22,6 +23,8 @@ function collectServiceStat(widget: ServiceWidget): Promise<{ stats: ServiceStat
       return collectUmami(widget);
     case "headscale":
       return collectHeadscale(widget);
+    case "traefik":
+      return collectTraefikStat(widget);
   }
 }
 

lib/collectors/services/base-url.ts

@@ -7,6 +7,7 @@ const SERVICE_PORTS: Record<ServiceWidget["service"], number> = {
   n8n: 5678,
   umami: 3000,
   headscale: 8080,
+  traefik: 8080,
 };
 
 export function serviceBaseUrl(widget: ServiceWidget): string {

lib/collectors/services/traefik.ts

@@ -0,0 +1,17 @@
+import type { TraefikServiceWidget } from "@/lib/config/schema";
+import type { ServiceStat } from "@/lib/types/service-result";
+import { serviceBaseUrl } from "./base-url";
+
+interface RawRouter {
+  status: string;
+}
+
+export async function collectTraefikStat(widget: TraefikServiceWidget): Promise<{ stats: ServiceStat[] }> {
+  const base = serviceBaseUrl(widget);
+  const response = await fetch(`${base}/api/http/routers`, { signal: AbortSignal.timeout(5_000) });
+  if (!response.ok) {
+    throw new Error(`Traefik API returned ${response.status}`);
+  }
+  const routers = (await response.json()) as RawRouter[];
+  return { stats: [{ label: "Routes", value: String(routers.length) }] };
+}

lib/collectors/traefik.ts

@@ -1,48 +0,0 @@
-import type { TraefikResult } from "@/lib/types/traefik-result";
-
-interface RawRouter {
-  name: string;
-  rule: string;
-  service: string;
-  status: string;
-  tls?: unknown;
-  entryPoints?: string[];
-}
-
-interface RawEntrypoint {
-  name: string;
-  address: string;
-}
-
-async function fetchJson<T>(url: string): Promise<T | null> {
-  const response = await fetch(url, { signal: AbortSignal.timeout(5_000) });
-  if (!response.ok) return null;
-  return (await response.json()) as T;
-}
-
-export async function collectTraefik(apiUrl: string): Promise<TraefikResult> {
-  const base = apiUrl.replace(/\/$/, "");
-
-  const [routers, entrypoints, middlewares] = await Promise.all([
-    fetchJson<RawRouter[]>(`${base}/http/routers`),
-    fetchJson<RawEntrypoint[]>(`${base}/entrypoints`),
-    fetchJson<unknown[]>(`${base}/http/middlewares`),
-  ]);
-
-  if (routers === null) {
-    throw new Error(`Traefik API at ${base}/http/routers is unreachable or returned an error`);
-  }
-
-  return {
-    routers: routers.map((router) => ({
-      name: router.name,
-      rule: router.rule,
-      service: router.service,
-      status: router.status,
-      tls: Boolean(router.tls),
-      entryPoints: router.entryPoints ?? [],
-    })),
-    entrypoints: (entrypoints ?? []).map((ep) => ({ name: ep.name, address: ep.address })),
-    middlewaresCount: middlewares?.length ?? 0,
-  };
-}

lib/config/schema.ts

@@ -58,15 +58,6 @@ export const httpWidgetSchema = z.object({
     .default({ status: 200 }),
 });
 
-export const traefikWidgetSchema = z.object({
-  type: z.literal("traefik"),
-  name: z.string().default("Traefik"),
-  apiUrl: z.string().url(),
-  href: z.string().url().optional(),
-  icon: z.string().optional(),
-  interval: durationSchema.default("15s"),
-});
-
 const serviceCommonFields = {
   type: z.literal("service") as z.ZodLiteral<"service">,
   name: z.string(),
@@ -116,6 +107,11 @@ export const headscaleServiceWidgetSchema = z.object({
   apiToken: z.string(),
 });
 
+export const traefikServiceWidgetSchema = z.object({
+  ...serviceCommonFields,
+  service: z.literal("traefik"),
+});
+
 export const serviceWidgetSchema = z.discriminatedUnion("service", [
   giteaServiceWidgetSchema,
   coolifyServiceWidgetSchema,
@@ -123,6 +119,7 @@ export const serviceWidgetSchema = z.discriminatedUnion("service", [
   n8nServiceWidgetSchema,
   umamiServiceWidgetSchema,
   headscaleServiceWidgetSchema,
+  traefikServiceWidgetSchema,
 ]);
 
 export const widgetSchema = z.discriminatedUnion("type", [
@@ -132,7 +129,6 @@ export const widgetSchema = z.discriminatedUnion("type", [
   databaseWidgetSchema,
   systemWidgetSchema,
   httpWidgetSchema,
-  traefikWidgetSchema,
   serviceWidgetSchema,
 ]);
 
@@ -194,3 +190,4 @@ export type ImmichServiceWidget = z.infer<typeof immichServiceWidgetSchema>;
 export type N8nServiceWidget = z.infer<typeof n8nServiceWidgetSchema>;
 export type UmamiServiceWidget = z.infer<typeof umamiServiceWidgetSchema>;
 export type HeadscaleServiceWidget = z.infer<typeof headscaleServiceWidgetSchema>;
+export type TraefikServiceWidget = z.infer<typeof traefikServiceWidgetSchema>;

lib/types/traefik-result.ts

@@ -1,19 +0,0 @@
-export interface TraefikRouterInfo {
-  name: string;
-  rule: string;
-  service: string;
-  status: string;
-  tls: boolean;
-  entryPoints: string[];
-}
-
-export interface TraefikEntrypointInfo {
-  name: string;
-  address: string;
-}
-
-export interface TraefikResult {
-  routers: TraefikRouterInfo[];
-  entrypoints: TraefikEntrypointInfo[];
-  middlewaresCount: number;
-}

lib/types/widget-result.ts

@@ -1,6 +1,5 @@
 import type { SystemResult } from "./system-result";
 import type { HttpCheckResult } from "./http-result";
-import type { TraefikResult } from "./traefik-result";
 import type { ServiceWidgetResult } from "./service-result";
 
 export interface DockerContainerResult {
@@ -20,6 +19,5 @@ export type WidgetResult =
   | { type: "database"; data: DockerContainerResult }
   | { type: "system"; data: SystemResult }
   | { type: "http"; data: HttpCheckResult }
-  | { type: "traefik"; data: TraefikResult }
   | { type: "service"; data: ServiceWidgetResult }
   | { type: "error"; message: string };