chore: bump version to 0.3.0

Two separate issues, both real bugs:

- Dark mode was showing light blue instead of green: config.yml still
  had a leftover --pn-accent: #38bdf8 override from before the design
  redesign, which won via the runtime theme injector regardless of
  what app/globals.css defaulted to. Removed the override and pushed
  the dark-mode default from a soft mint (#5ee08c) to an actual neon
  green (#39ff88) - closer to what "neon" means and closer to the real
  phosphor-green a cardiac monitor trace uses, which fits the pulse
  metaphor better than the pastel version did.

- No per-service brand icons anywhere. Added an optional `icon` field
  to docker/bookmark widgets (a key into lib/brand-icons.ts) rather
  than guessing from containerName, since a heuristic would silently
  misfire for anyone's own container naming. database widgets derive
  their icon automatically from `engine` (postgres/redis) since that's
  already required and unambiguous. Icon path data comes from the CC0
  simple-icons package via scripts/extract-brand-icons.py, extracted
  and committed as plain TS data (lib/brand-icons.ts) rather than
  imported live - keeps it self-hosted (no unpkg.com/CDN calls at
  runtime, matching the fonts) and pinned regardless of dependency
  updates. Rendered monochrome (currentColor, not each brand's own
  hex) to stay consistent with the single-accent design rather than a
  dozen competing colors - only the shape carries the identity.

Wired real icons into config.yml for every service that has one:
traefik, coolify, gitea (+ gitea_runner), immich (+ immich_ml), n8n,
passbolt, umami, headscale, plus postgresql/redis on every database
widget. code and mailpit have no brand match in the curated set, so
they render without one rather than a wrong/generic substitute.

Verified in the actual rendered page: compiled CSS confirms
--pn-accent is #39ff88 (dark) / #339a5a (light) with no trace of the
old #38bdf8, and all 18 expected icon instances (10 docker + 8
database widgets) are present.

.gitignore

@@ -23,6 +23,7 @@
 # misc
 .DS_Store
 *.pem
+.claude
 
 # debug
 npm-debug.log*

README.md

@@ -54,8 +54,8 @@ settings:
 
 theme:
   mode: dark              # dark | light | auto
-  variables:
-    --pn-accent: "#38bdf8"
+  # variables:             # override any --pn-* token from app/globals.css
+  #   --pn-accent: "#ff6b6b"
   # customCssPath: custom.css   # relative to config/, served at /api/theme/custom-css
 
 discovery:
@@ -87,9 +87,9 @@ reload; never exposed to the client. See `config/.env.example`.
 
 | `type`     | Required fields                    | Notes |
 |------------|-------------------------------------|-------|
-| `bookmark` | `name`, `href`                      | Static link card. Optional `description`. |
+| `bookmark` | `name`, `href`                      | Static link card. Optional `description`, `icon` (see below). |
 | `search`   | -                                    | Client-side search box. Optional `engines` (`duckduckgo`/`google`/`bing`, default `[duckduckgo]`), `defaultEngine`. |
-| `docker`   | `name`, `containerName`             | Status, uptime, CPU/mem, restart count via `dockerode`. Optional `href`, `showStats` (default `true`), `interval` (default `5s`). |
+| `docker`   | `name`, `containerName`             | Status, uptime, CPU/mem, restart count via `dockerode`. Optional `href`, `icon` (see below), `showStats` (default `true`), `interval` (default `5s`). |
 | `database` | `name`, `containerName`, `engine`   | Thin skin over the same Docker collector - `engine` is `postgres` or `redis`, used for icon/label only. `interval` default `10s`. |
 | `system`   | -                                    | Host CPU/mem/disk/network via `systeminformation`. Optional `name` (default `System`), `interval` (default `5s`). |
 | `http`     | `name`, `url`                        | HTTP health check with latency and consecutive-failure tracking. Optional `method` (default `GET`), `timeout` (default `5s`), `interval` (default `30s`), `expect.status` (default `200`). |
@@ -97,6 +97,14 @@ reload; never exposed to the client. See `config/.env.example`.
 
 `interval`/`timeout` values are duration strings: `500ms`, `5s`, `1m`, `1h`.
 
+`icon` on `docker`/`bookmark` widgets is a key into `lib/brand-icons.ts` (currently
+`traefik`, `coolify`, `gitea`, `docker`, `immich`, `n8n`, `passbolt`, `umami`,
+`postgresql`, `redis`, `headscale`), rendered monochrome so it doesn't compete
+with the accent color. `database` widgets pick their icon automatically from
+`engine`. Regenerate/extend the icon set with `python3 scripts/extract-brand-icons.py`
+after adding an entry to that script's `ICONS` map (path data comes from the
+CC0-licensed `simple-icons` package, bundled at build time - no runtime CDN calls).
+
 ### Auto-discovery
 
 With `discovery.docker.enabled: true`, PulseNode scans running containers

app/globals.css

@@ -1,44 +1,43 @@
 @import "tailwindcss";
 
 :root {
-  --pn-bg: #0a0e13;
-  --pn-surface: #10151c;
-  --pn-surface-raised: #161d27;
-  --pn-border: #232b38;
-  --pn-fg: #e8ecf1;
-  --pn-fg-muted: #7c8798;
-  --pn-accent: #3ee8a8;
-  --pn-radius: 0.75rem;
-  --pn-status-up: #3ee8a8;
+  --pn-bg: #1a1d1f;
+  --pn-surface: #24282b;
+  --pn-surface-raised: #2b3033;
+  --pn-fg: #f2f4f5;
+  --pn-fg-muted: color-mix(in srgb, var(--pn-fg) 55%, transparent);
+  --pn-border: color-mix(in srgb, var(--pn-fg) 14%, transparent);
+  --pn-accent: #39ff88;
+  --pn-status-up: #39ff88;
   --pn-status-down: #ff5f6d;
   --pn-status-degraded: #ffb84c;
+  --pn-shadow-sm: 0 0 0 1px var(--pn-border);
+  --pn-shadow-md: 0 0 0 1px var(--pn-border), 0 6px 18px rgba(0, 0, 0, 0.45);
 }
 
 :root[data-theme="light"] {
-  --pn-bg: #f6f7f5;
-  --pn-surface: #ffffff;
-  --pn-surface-raised: #eef1ef;
-  --pn-border: #dde1de;
-  --pn-fg: #12181a;
-  --pn-fg-muted: #5c6b66;
-  --pn-accent: #0e9f6e;
-  --pn-status-up: #0e9f6e;
+  --pn-bg: #e9ebec;
+  --pn-surface: #f6f7f7;
+  --pn-surface-raised: #eceded;
+  --pn-fg: #1e2224;
+  --pn-accent: #339a5a;
+  --pn-status-up: #339a5a;
   --pn-status-down: #dc2626;
   --pn-status-degraded: #d97706;
+  --pn-shadow-md: 0 0 0 1px var(--pn-border), 0 6px 18px rgba(30, 32, 45, 0.1);
 }
 
 @media (prefers-color-scheme: light) {
   :root:not([data-theme]) {
-    --pn-bg: #f6f7f5;
-    --pn-surface: #ffffff;
-    --pn-surface-raised: #eef1ef;
-    --pn-border: #dde1de;
-    --pn-fg: #12181a;
-    --pn-fg-muted: #5c6b66;
-    --pn-accent: #0e9f6e;
-    --pn-status-up: #0e9f6e;
+    --pn-bg: #e9ebec;
+    --pn-surface: #f6f7f7;
+    --pn-surface-raised: #eceded;
+    --pn-fg: #1e2224;
+    --pn-accent: #339a5a;
+    --pn-status-up: #339a5a;
     --pn-status-down: #dc2626;
     --pn-status-degraded: #d97706;
+    --pn-shadow-md: 0 0 0 1px var(--pn-border), 0 6px 18px rgba(30, 32, 45, 0.1);
   }
 }
 
@@ -53,7 +52,8 @@
   --color-status-up: var(--pn-status-up);
   --color-status-down: var(--pn-status-down);
   --color-status-degraded: var(--pn-status-degraded);
-  --radius-widget: var(--pn-radius);
+  --radius-md: 0.625rem;
+  --radius-lg: 1rem;
   --font-sans: var(--font-plex-sans);
   --font-mono: var(--font-plex-mono);
   --font-display: var(--font-space-grotesk);
@@ -64,6 +64,62 @@ body {
   color: var(--pn-fg);
 }
 
+/* Rules fade to transparent at both ends instead of stopping cleanly. */
+.pn-hr {
+  height: 1px;
+  flex: 1;
+  background: linear-gradient(
+    to right,
+    transparent,
+    var(--pn-border) 32px,
+    var(--pn-border) calc(100% - 32px),
+    transparent
+  );
+}
+
+.pn-card {
+  transition:
+    box-shadow 0.18s ease,
+    transform 0.18s ease,
+    background 0.3s ease,
+    border-color 0.3s ease;
+  box-shadow: var(--pn-shadow-sm);
+}
+.pn-card:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    var(--pn-shadow-md),
+    0 0 0 1px color-mix(in srgb, var(--pn-accent) 35%, transparent);
+}
+
+@keyframes pn-toast-in {
+  from {
+    transform: translateY(12px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.pn-toast {
+  animation: pn-toast-in 0.28s ease;
+}
+
+@keyframes pn-spin-in {
+  from {
+    transform: rotate(-60deg) scale(0.6);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(0) scale(1);
+    opacity: 1;
+  }
+}
+.pn-spin-in {
+  animation: pn-spin-in 0.35s ease;
+}
+
 @keyframes pulse-glow {
   0%,
   100% {
@@ -73,13 +129,32 @@ body {
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--pn-status-up) 0%, transparent);
   }
 }
-
 .status-pulse {
   animation: pulse-glow 2s ease-in-out infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .status-pulse {
+  .status-pulse,
+  .pn-toast,
+  .pn-spin-in {
     animation: none;
   }
 }
+
+.pn-bento {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+@media (max-width: 860px) {
+  .pn-bento {
+    grid-template-columns: repeat(6, 1fr) !important;
+  }
+  .pn-bento > * {
+    grid-column: 1 / -1 !important;
+    grid-row: auto !important;
+  }
+  .pn-live-label {
+    display: none !important;
+  }
+}

app/icon.svg

@@ -0,0 +1,12 @@
+<svg width="32" height="32" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="1" width="28" height="28" rx="8" fill="#2b3033" stroke="rgba(94,224,140,0.45)" />
+  <circle cx="15" cy="15" r="8" stroke="#5ee08c" stroke-width="1.5" />
+  <polyline
+    points="8,15 12,15 14,9 17,21 19,15 22,15"
+    fill="none"
+    stroke="#5ee08c"
+    stroke-width="1.6"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

app/page.tsx

@@ -12,8 +12,8 @@ export default function Home() {
     const message = err instanceof ConfigError ? err.message : "Unknown configuration error";
     return (
       <main className="mx-auto flex max-w-2xl flex-col gap-4 px-6 py-16">
-        <h1 className="text-lg font-semibold text-status-down">Configuration Error</h1>
-        <pre className="rounded-[var(--radius-widget)] border border-status-down bg-surface p-4 text-sm whitespace-pre-wrap text-fg">
+        <h1 className="font-display text-lg font-semibold text-status-down">Configuration Error</h1>
+        <pre className="rounded-lg border border-status-down bg-surface p-4 text-sm whitespace-pre-wrap text-fg">
           {message}
         </pre>
       </main>

components/layout/Dashboard.tsx

@@ -1,28 +1,48 @@
 "use client";
 
+import { Broadcast } from "@phosphor-icons/react/ssr";
 import type { Config } from "@/lib/config/schema";
-import { useConfigSubscription } from "@/lib/ws/client";
+import { useConfigSubscription, useConnectionStatus } from "@/lib/ws/client";
 import { GroupSection } from "./GroupSection";
 import { ThemeToggle } from "./ThemeToggle";
 import { PulseMark } from "./PulseMark";
+import { ToastStack } from "./Toast";
+
+function LiveIndicator() {
+  const status = useConnectionStatus();
+  const label = status === "connected" ? "live" : status === "reconnecting" ? "reconnecting…" : "connecting…";
+
+  return (
+    <div className="pn-live-label flex items-center gap-1.5 text-xs text-fg-muted">
+      <Broadcast size={15} className={status === "connected" ? "text-accent" : "text-status-degraded"} aria-hidden />
+      <span>{label}</span>
+    </div>
+  );
+}
 
 export function Dashboard({ config: initialConfig }: { config: Config }) {
   const config = useConfigSubscription(initialConfig);
 
   return (
-    <main className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-10">
-      <header className="flex items-center justify-between gap-4">
-        <div className="flex items-center gap-3">
-          <PulseMark />
-          <h1 className="font-display text-lg font-semibold tracking-tight text-fg">
+    <div className="relative min-h-screen">
+      <div className="sticky top-0 z-20 border-b border-border bg-bg/70 backdrop-blur-lg">
+        <div className="mx-auto flex max-w-6xl items-center gap-4 px-6 py-3">
+          <div className="mr-auto flex items-center gap-2.5">
+            <PulseMark size={30} />
+            <span className="font-display text-lg font-semibold tracking-tight text-fg">
               {config.settings.title}
-          </h1>
+            </span>
           </div>
+          <LiveIndicator />
           <ThemeToggle />
-      </header>
+        </div>
+      </div>
+      <main className="mx-auto max-w-6xl px-6 pt-2 pb-20">
         {config.groups.map((group, groupIndex) => (
           <GroupSection key={group.name} group={group} groupIndex={groupIndex} />
         ))}
       </main>
+      <ToastStack />
+    </div>
   );
 }

components/layout/GroupSection.tsx

@@ -4,11 +4,14 @@ import { widgetRegistry } from "@/components/widgets/registry";
 
 export function GroupSection({ group, groupIndex }: { group: Group; groupIndex: number }) {
   return (
-    <section className="flex flex-col gap-3">
-      <h2 className="text-xs font-semibold tracking-wide text-fg-muted uppercase">
+    <section className="mt-8 flex flex-col gap-4">
+      <div className="flex items-baseline gap-2.5">
+        <h6 className="m-0 text-xs font-semibold tracking-wide text-fg-muted uppercase">
           {group.name}
-      </h2>
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-3">
+        </h6>
+        <div className="pn-hr" />
+      </div>
+      <div className="pn-bento gap-4">
         {group.widgets.map((widget, index) => {
           const Component = widgetRegistry[widget.type];
           const id = widgetId(groupIndex, index);

components/layout/PulseMark.tsx

@@ -1,18 +1,21 @@
-export function PulseMark() {
+export function PulseMark({ size = 30 }: { size?: number }) {
   return (
-    <svg
-      width="30"
-      height="16"
-      viewBox="0 0 60 24"
+    <svg width={size} height={size} viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <rect
+        x="1"
+        y="1"
+        width="28"
+        height="28"
+        rx="8"
+        fill="var(--pn-surface-raised)"
+        stroke="color-mix(in srgb, var(--pn-accent) 45%, transparent)"
+      />
+      <circle cx="15" cy="15" r="8" stroke="var(--pn-accent)" strokeWidth="1.5" />
+      <polyline
+        points="8,15 12,15 14,9 17,21 19,15 22,15"
         fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      className="text-accent"
-    >
-      <path
-        d="M0 12H11L15 5L20 19L24 12H33L37 8L41 12H60"
-        stroke="currentColor"
-        strokeWidth="2.5"
+        stroke="var(--pn-accent)"
+        strokeWidth="1.6"
         strokeLinecap="round"
         strokeLinejoin="round"
       />

components/layout/ThemeToggle.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { MoonStars, Sun } from "@phosphor-icons/react/ssr";
 
 const STORAGE_KEY = "pulsenode-theme";
 
@@ -34,17 +35,19 @@ export function ThemeToggle() {
   }
 
   if (theme === null) {
-    return <div className="h-7 w-16 rounded-[var(--radius-widget)] border border-border bg-surface" />;
+    return <div className="h-9 w-9 rounded-md border border-border bg-surface" />;
   }
 
   return (
     <button
       type="button"
       onClick={toggle}
-      className="rounded-[var(--radius-widget)] border border-border bg-surface px-3 py-1.5 text-xs text-fg-muted transition-colors hover:text-fg"
+      className="flex h-9 w-9 items-center justify-center rounded-md border border-border bg-surface text-fg-muted transition-colors hover:text-fg"
       aria-label="Toggle color theme"
     >
-      {theme === "light" ? "Light" : "Dark"}
+      <span key={theme} className="pn-spin-in flex">
+        {theme === "dark" ? <MoonStars size={17} /> : <Sun size={17} />}
+      </span>
     </button>
   );
 }

components/layout/Toast.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { CheckCircle, WarningCircle } from "@phosphor-icons/react/ssr";
+import { useConfigToasts } from "@/lib/ws/client";
+
+export function ToastStack() {
+  const toasts = useConfigToasts();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed right-6 bottom-6 z-50 flex flex-col gap-2">
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          className="pn-toast flex max-w-[340px] items-center gap-2.5 rounded-lg border border-border bg-surface px-3.5 py-3 shadow-[var(--pn-shadow-md)]"
+        >
+          {toast.tone === "ok" ? (
+            <CheckCircle size={20} className="shrink-0 text-accent" aria-hidden />
+          ) : (
+            <WarningCircle size={20} className="shrink-0 text-status-down" aria-hidden />
+          )}
+          <span className="text-[13px] text-fg">{toast.message}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

components/widgets/BrandIcon.tsx

@@ -0,0 +1,13 @@
+import { BRAND_ICON_PATHS } from "@/lib/brand-icons";
+
+export function BrandIcon({ slug, size = 18 }: { slug?: string; size?: number }) {
+  if (!slug) return null;
+  const path = BRAND_ICON_PATHS[slug];
+  if (!path) return null;
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className="shrink-0 text-fg-muted" aria-hidden>
+      <path d={path} />
+    </svg>
+  );
+}

components/widgets/MetricBar.tsx

@@ -0,0 +1,16 @@
+export function MetricBar({ label, percent, detail }: { label: string; percent: number; detail: string }) {
+  return (
+    <div className="flex flex-1 flex-col gap-1">
+      <div className="flex items-center justify-between text-[11px] text-fg-muted">
+        <span>{label}</span>
+        <span className="font-mono tabular-nums text-fg">{detail}</span>
+      </div>
+      <div className="h-1 overflow-hidden rounded-full bg-surface-raised">
+        <div
+          className="h-full rounded-full bg-accent transition-[width] duration-500 ease-out"
+          style={{ width: `${Math.min(100, Math.max(0, percent))}%` }}
+        />
+      </div>
+    </div>
+  );
+}

components/widgets/StatusTag.tsx

@@ -0,0 +1,14 @@
+export function StatusTag({ children, tone = "accent" }: { children: React.ReactNode; tone?: "accent" | "down" | "degraded" | "neutral" }) {
+  const toneClass = {
+    accent: "bg-accent/15 text-accent border-accent/40",
+    down: "bg-status-down/15 text-status-down border-status-down/40",
+    degraded: "bg-status-degraded/15 text-status-degraded border-status-degraded/40",
+    neutral: "bg-surface-raised text-fg-muted border-border",
+  }[tone];
+
+  return (
+    <span className={`inline-flex items-center rounded-md border px-2 py-0.5 text-[11px] tracking-wide ${toneClass}`}>
+      {children}
+    </span>
+  );
+}

components/widgets/WidgetCard.tsx

@@ -0,0 +1,24 @@
+import type { CSSProperties, ReactNode } from "react";
+
+export const PN_CARD_CLASS = "pn-card flex flex-col gap-2 rounded-md border border-border bg-surface p-4";
+
+export function WidgetCard({
+  span = 3,
+  rowSpan,
+  children,
+}: {
+  span?: number;
+  rowSpan?: number;
+  children: ReactNode;
+}) {
+  const style: CSSProperties = {
+    gridColumn: `span ${span}`,
+    ...(rowSpan ? { gridRow: `span ${rowSpan}` } : {}),
+  };
+
+  return (
+    <div className={PN_CARD_CLASS} style={style}>
+      {children}
+    </div>
+  );
+}

components/widgets/bookmark/Widget.tsx

@@ -1,4 +1,7 @@
+import { ArrowUpRight } from "@phosphor-icons/react/ssr";
 import type { Widget } from "@/lib/config/schema";
+import { PN_CARD_CLASS } from "@/components/widgets/WidgetCard";
+import { BrandIcon } from "@/components/widgets/BrandIcon";
 
 type BookmarkWidget = Extract<Widget, { type: "bookmark" }>;
 
@@ -8,12 +11,15 @@ export function BookmarkWidget({ widget }: { widget: BookmarkWidget }) {
       href={widget.href}
       target="_blank"
       rel="noreferrer"
-      className="flex flex-col gap-1 rounded-[var(--radius-widget)] border border-border bg-surface p-4 transition-colors hover:border-accent"
+      className={`${PN_CARD_CLASS} text-inherit no-underline`}
+      style={{ gridColumn: "span 3" }}
     >
-      <span className="text-sm font-medium text-fg">{widget.name}</span>
-      {widget.description && (
-        <span className="text-xs text-fg-muted">{widget.description}</span>
-      )}
+      <div className="flex items-center gap-2">
+        <BrandIcon slug={widget.icon} />
+        <span className="min-w-0 flex-1 truncate text-[15px] font-medium text-fg">{widget.name}</span>
+        <ArrowUpRight size={16} className="shrink-0 text-accent" aria-hidden />
+      </div>
+      {widget.description && <span className="text-xs text-fg-muted">{widget.description}</span>}
     </a>
   );
 }

components/widgets/database/Widget.tsx

@@ -3,6 +3,8 @@
 import type { Widget } from "@/lib/config/schema";
 import { useWidgetSubscription } from "@/lib/ws/client";
 import { StatusDot } from "@/components/widgets/StatusDot";
+import { WidgetCard } from "@/components/widgets/WidgetCard";
+import { BrandIcon } from "@/components/widgets/BrandIcon";
 import { formatUptime } from "@/lib/format";
 
 type DatabaseWidget = Extract<Widget, { type: "database" }>;
@@ -12,24 +14,32 @@ const ENGINE_LABEL: Record<DatabaseWidget["engine"], string> = {
   redis: "Redis",
 };
 
+const ENGINE_ICON: Record<DatabaseWidget["engine"], string> = {
+  postgres: "postgresql",
+  redis: "redis",
+};
+
 export function DatabaseWidget({ widget, widgetId }: { widget: DatabaseWidget; widgetId: string }) {
   const result = useWidgetSubscription(widgetId);
   const data = result?.type === "database" ? result.data : null;
   const errorMessage = result?.type === "error" ? result.message : null;
 
   return (
-    <div className="flex flex-col gap-2 rounded-[var(--radius-widget)] border border-border bg-surface p-4">
+    <WidgetCard span={4}>
       <div className="flex items-center justify-between gap-2">
-        <span className="text-sm font-medium text-fg">{widget.name}</span>
+        <div className="flex min-w-0 items-center gap-2">
+          <BrandIcon slug={ENGINE_ICON[widget.engine]} />
+          <span className="truncate text-[15px] font-medium text-fg">{widget.name}</span>
+        </div>
         <StatusDot status={data?.status} health={data?.health} />
       </div>
-      <span className="text-xs text-fg-muted">{ENGINE_LABEL[widget.engine]}</span>
+      <span className="text-[11px] text-fg-muted">{ENGINE_LABEL[widget.engine]}</span>
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
       {data?.uptimeSeconds != null && (
-        <span className="text-xs text-fg-muted">
-          Uptime: <span className="font-mono tabular-nums text-fg">{formatUptime(data.uptimeSeconds)}</span>
+        <span className="text-[11px] text-fg-muted">
+          up <span className="font-mono tabular-nums text-fg">{formatUptime(data.uptimeSeconds)}</span>
         </span>
       )}
-    </div>
+    </WidgetCard>
   );
 }

components/widgets/docker/Widget.tsx

@@ -4,6 +4,9 @@ import type { Widget } from "@/lib/config/schema";
 import { useWidgetSubscription } from "@/lib/ws/client";
 import { StatusDot } from "@/components/widgets/StatusDot";
 import { SkeletonLines } from "@/components/widgets/Skeleton";
+import { WidgetCard } from "@/components/widgets/WidgetCard";
+import { MetricBar } from "@/components/widgets/MetricBar";
+import { BrandIcon } from "@/components/widgets/BrandIcon";
 import { formatBytes, formatUptime } from "@/lib/format";
 
 type DockerWidget = Extract<Widget, { type: "docker" }>;
@@ -12,54 +15,47 @@ export function DockerWidget({ widget, widgetId }: { widget: DockerWidget; widge
   const result = useWidgetSubscription(widgetId);
   const data = result?.type === "docker" ? result.data : null;
   const errorMessage = result?.type === "error" ? result.message : null;
+  const memPercent = data?.memUsageBytes != null && data.memLimitBytes ? (data.memUsageBytes / data.memLimitBytes) * 100 : null;
 
   return (
-    <div className="flex flex-col gap-2 rounded-[var(--radius-widget)] border border-border bg-surface p-4">
+    <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="text-sm font-medium text-fg hover:text-accent"
+              className="truncate text-[15px] font-medium text-fg hover:text-accent"
             >
               {widget.name}
             </a>
           ) : (
-          <span className="text-sm font-medium text-fg">{widget.name}</span>
+            <span className="truncate text-[15px] font-medium text-fg">{widget.name}</span>
           )}
+        </div>
         <StatusDot status={data?.status} health={data?.health} />
       </div>
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
       {!result && !errorMessage && <SkeletonLines />}
       {data && (
-        <dl className="flex flex-col gap-1 text-xs text-fg-muted">
-          {data.uptimeSeconds !== null && (
-            <div>
-              Uptime: <span className="font-mono tabular-nums text-fg">{formatUptime(data.uptimeSeconds)}</span>
+        <>
+          {widget.showStats && data.cpuPercent !== null && memPercent !== null && (
+            <div className="mt-0.5 flex gap-4">
+              <MetricBar label="CPU" percent={data.cpuPercent} detail={`${data.cpuPercent.toFixed(1)}%`} />
+              <MetricBar label="MEM" percent={memPercent} detail={`${memPercent.toFixed(0)}%`} />
             </div>
           )}
-          {widget.showStats && data.cpuPercent !== null && (
-            <div>
-              CPU: <span className="font-mono tabular-nums text-fg">{data.cpuPercent.toFixed(1)}%</span>
-            </div>
+          <div className="flex items-center gap-3 text-[11px] text-fg-muted">
+            {data.uptimeSeconds !== null && <span>up {formatUptime(data.uptimeSeconds)}</span>}
+            {widget.showStats && data.memUsageBytes !== null && memPercent === null && (
+              <span className="font-mono tabular-nums">{formatBytes(data.memUsageBytes)}</span>
             )}
-          {widget.showStats && data.memUsageBytes !== null && (
-            <div>
-              Mem:{" "}
-              <span className="font-mono tabular-nums text-fg">
-                {formatBytes(data.memUsageBytes)}
-                {data.memLimitBytes ? ` / ${formatBytes(data.memLimitBytes)}` : ""}
-              </span>
+            {data.restartCount > 0 && <span>{data.restartCount} restarts</span>}
           </div>
+        </>
       )}
-          {data.restartCount > 0 && (
-            <div>
-              Restarts: <span className="font-mono tabular-nums text-fg">{data.restartCount}</span>
-            </div>
-          )}
-        </dl>
-      )}
-    </div>
+    </WidgetCard>
   );
 }

components/widgets/http/Widget.tsx

@@ -1,45 +1,45 @@
 "use client";
 
+import { Globe, Timer } from "@phosphor-icons/react/ssr";
 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 { StatusTag } from "@/components/widgets/StatusTag";
 
 type HttpWidget = Extract<Widget, { type: "http" }>;
 
-function statusColor(up: boolean | undefined, consecutiveFailures: number): string {
-  if (up === undefined) return "bg-fg-muted";
-  if (up) return "bg-status-up";
-  return consecutiveFailures > 2 ? "bg-status-down" : "bg-status-degraded";
+function statusTone(up: boolean | undefined, consecutiveFailures: number): "accent" | "down" | "degraded" | "neutral" {
+  if (up === undefined) return "neutral";
+  if (up) return "accent";
+  return consecutiveFailures > 2 ? "down" : "degraded";
 }
 
 export function HttpWidget({ widget, widgetId }: { widget: HttpWidget; widgetId: string }) {
   const result = useWidgetSubscription(widgetId);
   const data = result?.type === "http" ? result.data : null;
   const errorMessage = result?.type === "error" ? result.message : null;
-  const pulse = data?.up ? "status-pulse" : "";
 
   return (
-    <div className="flex flex-col gap-2 rounded-[var(--radius-widget)] border border-border bg-surface p-4">
-      <div className="flex items-center justify-between gap-2">
-        <span className="text-sm font-medium text-fg">{widget.name}</span>
-        <span
-          className={`h-2.5 w-2.5 shrink-0 rounded-full ${statusColor(data?.up, data?.consecutiveFailures ?? 0)} ${pulse}`}
-          title={data ? (data.up ? "up" : `down (${data.consecutiveFailures} checks failed)`) : "unknown"}
-        />
+    <WidgetCard span={3}>
+      <div className="flex items-center gap-2.5">
+        <Globe size={18} className="text-accent" aria-hidden />
+        <span className="flex-1 text-[15px] font-medium text-fg">{widget.name}</span>
+      </div>
+      <div>
+        <StatusTag tone={statusTone(data?.up, data?.consecutiveFailures ?? 0)}>
+          {data ? (data.up ? `${data.statusCode ?? "up"}` : "down") : "…"}
+        </StatusTag>
       </div>
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
       {!result && !errorMessage && <SkeletonLines />}
       {data && (
-        <dl className="flex flex-col gap-1 text-xs text-fg-muted">
-          <div>
-            Status: <span className="font-mono tabular-nums text-fg">{data.statusCode ?? "—"}</span>
+        <div className="flex items-center gap-1.5 text-[11px] text-fg-muted">
+          <Timer size={12} aria-hidden />
+          <span className="font-mono tabular-nums text-fg">{data.latencyMs}ms</span> latency
+          {!data.up && data.error && <span className="text-status-down">{data.error}</span>}
         </div>
-          <div>
-            Latency: <span className="font-mono tabular-nums text-fg">{data.latencyMs}ms</span>
-          </div>
-          {!data.up && data.error && <div className="text-status-down">{data.error}</div>}
-        </dl>
       )}
-    </div>
+    </WidgetCard>
   );
 }

components/widgets/search/Widget.tsx

@@ -2,6 +2,7 @@
 
 import { useState, type FormEvent } from "react";
 import type { SearchEngine, Widget } from "@/lib/config/schema";
+import { WidgetCard } from "@/components/widgets/WidgetCard";
 
 type SearchWidget = Extract<Widget, { type: "search" }>;
 
@@ -11,6 +12,12 @@ const ENGINE_URLS: Record<string, string> = {
   bing: "https://www.bing.com/search?q=",
 };
 
+const ENGINE_LABEL: Record<string, string> = {
+  duckduckgo: "DuckDuckGo",
+  google: "Google",
+  bing: "Bing",
+};
+
 export function SearchWidget({ widget }: { widget: SearchWidget }) {
   const [engine, setEngine] = useState(widget.defaultEngine ?? widget.engines[0]);
   const [query, setQuery] = useState("");
@@ -23,29 +30,39 @@ export function SearchWidget({ widget }: { widget: SearchWidget }) {
   }
 
   return (
-    <form
-      onSubmit={handleSubmit}
-      className="flex items-center gap-2 rounded-[var(--radius-widget)] border border-border bg-surface p-2 sm:col-span-2"
-    >
-      {widget.engines.length > 1 && (
-        <select
-          value={engine}
-          onChange={(event) => setEngine(event.target.value as SearchEngine)}
-          className="rounded bg-transparent text-xs text-fg-muted outline-none"
-        >
-          {widget.engines.map((option) => (
-            <option key={option} value={option}>
-              {option}
-            </option>
-          ))}
-        </select>
-      )}
+    <WidgetCard span={4}>
+      <form onSubmit={handleSubmit} className="flex flex-1 flex-col justify-center gap-2">
+        <div className="text-[10px] tracking-[0.1em] text-accent uppercase">Search</div>
         <input
           value={query}
           onChange={(event) => setQuery(event.target.value)}
-        placeholder="Search..."
-        className="flex-1 bg-transparent text-sm text-fg outline-none placeholder:text-fg-muted"
+          placeholder="Search the web…"
+          autoComplete="off"
+          className="min-h-9 w-full rounded-md border border-border bg-bg px-2.5 py-1.5 text-sm text-fg outline-none placeholder:text-fg-muted focus-visible:border-accent"
         />
+        {widget.engines.length > 1 && (
+          <div className="inline-flex self-start overflow-hidden rounded-md border border-border">
+            {widget.engines.map((option) => (
+              <label
+                key={option}
+                className={`cursor-pointer px-2.5 py-1 text-[12px] first:border-l-0 [&+label]:border-l [&+label]:border-border ${
+                  option === engine ? "text-accent shadow-[inset_0_0_0_1px_var(--pn-accent)]" : "text-fg-muted"
+                }`}
+              >
+                <input
+                  type="radio"
+                  name="engine"
+                  value={option}
+                  checked={option === engine}
+                  onChange={() => setEngine(option as SearchEngine)}
+                  className="sr-only"
+                />
+                {ENGINE_LABEL[option] ?? option}
+              </label>
+            ))}
+          </div>
+        )}
       </form>
+    </WidgetCard>
   );
 }

components/widgets/system/Widget.tsx

@@ -3,6 +3,8 @@
 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 { MetricBar } from "@/components/widgets/MetricBar";
 import { formatBytes } from "@/lib/format";
 
 type SystemWidget = Extract<Widget, { type: "system" }>;
@@ -11,51 +13,39 @@ function usagePercent(used: number, total: number): number {
   return total > 0 ? Math.min(100, (used / total) * 100) : 0;
 }
 
-function UsageBar({ label, percent, detail }: { label: string; percent: number; detail: string }) {
-  return (
-    <div className="flex flex-col gap-1">
-      <div className="flex items-center justify-between text-xs text-fg-muted">
-        <span>{label}</span>
-        <span className="font-mono tabular-nums text-fg">{detail}</span>
-      </div>
-      <div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-raised">
-        <div className="h-full rounded-full bg-accent" style={{ width: `${percent}%` }} />
-      </div>
-    </div>
-  );
-}
-
 export function SystemWidget({ widget, widgetId }: { widget: SystemWidget; widgetId: string }) {
   const result = useWidgetSubscription(widgetId);
   const data = result?.type === "system" ? result.data : null;
   const errorMessage = result?.type === "error" ? result.message : null;
 
   return (
-    <div className="flex flex-col gap-3 rounded-[var(--radius-widget)] border border-border bg-surface p-4 sm:col-span-2">
-      <span className="text-sm font-medium text-fg">{widget.name}</span>
+    <WidgetCard span={5} rowSpan={2}>
+      <div className="text-[10px] tracking-[0.1em] text-accent uppercase">System</div>
+      <span className="text-[15px] font-medium text-fg">{widget.name}</span>
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
       {!result && !errorMessage && <SkeletonLines count={3} />}
       {data && (
-        <div className="flex flex-col gap-2">
-          <UsageBar label="CPU" percent={data.cpuPercent} detail={`${data.cpuPercent.toFixed(1)}%`} />
-          <UsageBar
+        <div className="mt-1 flex flex-1 flex-col justify-between gap-3">
+          <div className="flex flex-col gap-3">
+            <MetricBar label="CPU" percent={data.cpuPercent} detail={`${data.cpuPercent.toFixed(1)}%`} />
+            <MetricBar
               label="Memory"
               percent={usagePercent(data.memUsedBytes, data.memTotalBytes)}
               detail={`${formatBytes(data.memUsedBytes)} / ${formatBytes(data.memTotalBytes)}`}
             />
-          <UsageBar
+            <MetricBar
               label="Disk"
               percent={usagePercent(data.diskUsedBytes, data.diskTotalBytes)}
               detail={`${formatBytes(data.diskUsedBytes)} / ${formatBytes(data.diskTotalBytes)}`}
             />
-          <div className="flex items-center justify-between text-xs text-fg-muted">
-            <span>Network</span>
+          </div>
+          <div className="flex items-center gap-1.5 text-[11px] text-fg-muted">
             <span className="font-mono tabular-nums text-fg">
               ↓ {formatBytes(data.netRxBytesPerSec)}/s · ↑ {formatBytes(data.netTxBytesPerSec)}/s
             </span>
           </div>
         </div>
       )}
-    </div>
+    </WidgetCard>
   );
 }

components/widgets/traefik/Widget.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { Lock } from "@phosphor-icons/react/ssr";
 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";
 
 type TraefikWidget = Extract<Widget, { type: "traefik" }>;
 
@@ -12,11 +14,11 @@ export function TraefikWidget({ widget, widgetId }: { widget: TraefikWidget; wid
   const errorMessage = result?.type === "error" ? result.message : null;
 
   return (
-    <div className="flex flex-col gap-3 rounded-[var(--radius-widget)] border border-border bg-surface p-4 sm:col-span-2">
+    <WidgetCard span={4}>
       <div className="flex items-center justify-between">
-        <span className="text-sm font-medium text-fg">{widget.name}</span>
+        <span className="text-[15px] font-medium text-fg">{widget.name}</span>
         {data && (
-          <span className="font-mono text-xs tabular-nums text-fg-muted">
+          <span className="font-mono text-[11px] tabular-nums text-fg-muted">
             {data.entrypoints.map((ep) => ep.address).join(" · ") || `${data.entrypoints.length} entrypoints`}
           </span>
         )}
@@ -24,27 +26,28 @@ export function TraefikWidget({ widget, widgetId }: { widget: TraefikWidget; wid
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}
       {!result && !errorMessage && <SkeletonLines count={3} />}
       {data && (
-        <div className="flex flex-col gap-1">
+        <div className="flex flex-col">
           {data.routers.map((router) => (
-            <div key={router.name} className="flex items-center justify-between gap-2 text-xs">
+            <div key={router.name} className="flex items-center justify-between gap-2 border-t border-border py-1.5 text-[13px] first:border-t-0">
               <span className="truncate text-fg" title={router.rule}>
                 {router.name.replace(/@.*$/, "")}
               </span>
-              <span className="flex items-center gap-1 text-fg-muted">
-                {router.tls && <span title="TLS enabled">🔒</span>}
+              <span className="flex items-center gap-1.5 text-[11px] text-fg-muted">
+                {router.tls && <Lock size={11} aria-label="TLS enabled" />}
                 <span
-                  className={router.status === "enabled" ? "text-status-up" : "text-status-down"}
+                  className={`flex items-center gap-1.5 ${router.status === "enabled" ? "text-status-up" : "text-status-down"}`}
                 >
+                  <span className="h-1.5 w-1.5 rounded-full bg-current" />
                   {router.status}
                 </span>
               </span>
             </div>
           ))}
-          <span className="pt-1 text-xs text-fg-muted">
+          <span className="pt-2 text-[11px] text-fg-muted">
             <span className="font-mono tabular-nums">{data.middlewaresCount}</span> middlewares
           </span>
         </div>
       )}
-    </div>
+    </WidgetCard>
   );
 }

config/.env.example

@@ -1,7 +1,6 @@
 # Public hostnames of the services PulseNode links to / monitors.
 # These are not secrets, but keeping them here (rather than hardcoded in
 # config.yml) means the same config.yml works across environments.
-TRAEFIK_HOST_TRAEFIK=traefik.example.com
 TRAEFIK_HOST_CODE=code.example.com
 TRAEFIK_HOST_COOLIFY=coolify.example.com
 TRAEFIK_HOST_GITEA=git.example.com

config/config.yml

@@ -3,8 +3,6 @@ settings:
 
 theme:
   mode: dark
-  variables:
-    --pn-accent: "#38bdf8"
 
 # Manual widgets below always take precedence over an auto-discovered one for
 # the same container - this is on as a safety net for anything added to
@@ -21,14 +19,16 @@ groups:
       - type: docker
         name: Traefik
         containerName: traefik
-        href: https://${TRAEFIK_HOST_TRAEFIK}
+        icon: traefik
         interval: 10s
+        # No href: the dashboard is disabled (--api.dashboard=false).
         # Swap for a `traefik` widget (router/entrypoint/middleware view)
-        # once the API is enabled - see Traefik's --api.dashboard docs.
+        # if the API gets enabled - see Traefik's --api.dashboard docs.
 
       - type: docker
         name: Coolify
         containerName: coolify
+        icon: coolify
         href: https://${TRAEFIK_HOST_COOLIFY}
         interval: 10s
 
@@ -37,12 +37,14 @@ groups:
       - type: docker
         name: Gitea
         containerName: gitea
+        icon: gitea
         href: https://${TRAEFIK_HOST_GITEA}
         interval: 10s
 
       - type: docker
         name: Gitea Runner
         containerName: gitea_runner
+        icon: gitea
         showStats: true
         interval: 15s
 
@@ -57,35 +59,41 @@ groups:
       - type: docker
         name: Immich
         containerName: immich
+        icon: immich
         href: https://${TRAEFIK_HOST_IMMICH}
         interval: 10s
 
       - type: docker
         name: Immich ML
         containerName: immich_ml
+        icon: immich
         interval: 15s
 
       - type: docker
         name: n8n
         containerName: n8n
+        icon: n8n
         href: https://${TRAEFIK_HOST_N8N}
         interval: 10s
 
       - type: docker
         name: Passbolt
         containerName: passbolt
+        icon: passbolt
         href: https://${TRAEFIK_HOST_PASSBOLT}
         interval: 10s
 
       - type: docker
         name: Umami
         containerName: umami
+        icon: umami
         href: https://${TRAEFIK_HOST_UMAMI}
         interval: 10s
 
       - type: docker
         name: Headscale
         containerName: headscale
+        icon: headscale
         href: https://${TRAEFIK_HOST_HEADSCALE}
         interval: 10s
 

docker-compose.yml

@@ -24,7 +24,7 @@ services:
       - ./config:/app/config:ro
     env_file: .env
     networks:
-      - falcon_network
+      - compose_network
     labels:
       - traefik.enable=true
       - traefik.docker.network=${NETWORK_NAME}
@@ -33,11 +33,8 @@ services:
       - traefik.http.routers.pulsenode-web.entrypoints=web
       - traefik.http.routers.pulsenode-web.middlewares=pulsenode-redirect-web-secure
       - traefik.http.routers.pulsenode-web-secure.rule=Host(`${TRAEFIK_HOST}`)
-      - traefik.http.routers.pulsenode-web-secure.entrypoints=websecure
+      - traefik.http.routers.pulsenode-web-secure.entrypoints=web-secure
       - traefik.http.routers.pulsenode-web-secure.tls.certresolver=resolver
-      # Verify these entrypoint/middleware/certresolver names against
-      # traefik/dynamic/*.yaml in the stacks repo before deploying - written
-      # to match that repo's own convention, not independently confirmed.
       - traefik.http.routers.pulsenode-web-secure.middlewares=security-headers@file,no-index@file
       - traefik.http.services.pulsenode-web-secure.loadbalancer.server.port=3000
     healthcheck:
@@ -48,5 +45,6 @@ services:
       retries: 3
 
 networks:
-  falcon_network:
+  compose_network:
+    name: ${NETWORK_NAME}
     external: true

lib/config/schema.ts

@@ -11,6 +11,7 @@ export const bookmarkWidgetSchema = z.object({
   name: z.string(),
   href: z.string().url(),
   description: z.string().optional(),
+  icon: z.string().optional(),
 });
 
 export const searchWidgetSchema = z.object({
@@ -26,6 +27,7 @@ export const dockerWidgetSchema = z.object({
   href: z.string().url().optional(),
   showStats: z.boolean().default(true),
   interval: durationSchema.default("5s"),
+  icon: z.string().optional(),
 });
 
 export const databaseWidgetSchema = z.object({

lib/ws/client.ts

@@ -12,14 +12,23 @@ interface Envelope {
 }
 
 type TopicListener = (envelope: Envelope) => void;
+export type ConnectionStatus = "connecting" | "connected" | "reconnecting";
+type ConnectionListener = (status: ConnectionStatus) => void;
 
 let sharedSocket: WebSocket | null = null;
 let refCount = 0;
 let reconnectAttempts = 0;
 let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+let connectionStatus: ConnectionStatus = "connecting";
 const topicListeners = new Map<string, Set<TopicListener>>();
+const connectionListeners = new Set<ConnectionListener>();
 const pendingWidgetSubscriptions = new Set<string>();
 
+function setConnectionStatus(status: ConnectionStatus): void {
+  connectionStatus = status;
+  for (const listener of connectionListeners) listener(status);
+}
+
 function getSocketUrl(): string {
   const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
   return `${protocol}//${window.location.host}/ws`;
@@ -27,6 +36,7 @@ function getSocketUrl(): string {
 
 function scheduleReconnect(): void {
   if (reconnectTimer || refCount === 0) return;
+  setConnectionStatus("reconnecting");
   const delay = Math.min(30_000, 1_000 * 2 ** reconnectAttempts);
   reconnectAttempts += 1;
   reconnectTimer = setTimeout(() => {
@@ -45,6 +55,7 @@ function ensureSocket(): WebSocket {
 
   socket.addEventListener("open", () => {
     reconnectAttempts = 0;
+    setConnectionStatus("connected");
     for (const widgetId of pendingWidgetSubscriptions) {
       socket.send(JSON.stringify({ action: "subscribe", widgetId }));
     }
@@ -134,3 +145,65 @@ export function useConfigSubscription(initial: Config): Config {
 
   return config;
 }
+
+export function useConnectionStatus(): ConnectionStatus {
+  const [status, setStatus] = useState<ConnectionStatus>(connectionStatus);
+
+  useEffect(() => {
+    refCount += 1;
+    // ensureSocket() can synchronously open a connection another component
+    // already established, so the module-level status may have moved past
+    // what this hook's initial useState captured - reconcile once before
+    // subscribing to future changes.
+    ensureSocket();
+    connectionListeners.add(setStatus);
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setStatus(connectionStatus);
+
+    return () => {
+      refCount -= 1;
+      connectionListeners.delete(setStatus);
+    };
+  }, []);
+
+  return status;
+}
+
+export interface ConfigToast {
+  id: number;
+  tone: "ok" | "error";
+  message: string;
+}
+
+let toastCounter = 0;
+
+export function useConfigToasts(): ConfigToast[] {
+  const [toasts, setToasts] = useState<ConfigToast[]>([]);
+
+  useEffect(() => {
+    refCount += 1;
+    ensureSocket();
+
+    const removeListener = addTopicListener("config", (envelope) => {
+      let toast: Omit<ConfigToast, "id"> | null = null;
+      if (envelope.type === "config:update") {
+        toast = { tone: "ok", message: "config.yml reloaded" };
+      } else if (envelope.type === "config:error") {
+        toast = { tone: "error", message: "config.yml has an error — showing last valid config" };
+      }
+      if (!toast) return;
+
+      toastCounter += 1;
+      const id = toastCounter;
+      setToasts((prev) => [...prev, { ...toast!, id }]);
+      setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 4000);
+    });
+
+    return () => {
+      refCount -= 1;
+      removeListener();
+    };
+  }, []);
+
+  return toasts;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulsenode",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "dev": "tsx watch server.ts",
@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
     "chokidar": "^5.0.0",
     "dockerode": "^5.0.1",
     "dotenv": "^17.4.2",
@@ -16,6 +17,7 @@
     "p-limit": "^7.3.1",
     "react": "19.2.8",
     "react-dom": "19.2.8",
+    "simple-icons": "^16.28.0",
     "systeminformation": "^5.33.1",
     "tsx": "^4.23.12",
     "ws": "^8.21.3",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@phosphor-icons/react':
+        specifier: ^2.1.10
+        version: 2.1.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       chokidar:
         specifier: ^5.0.0
         version: 5.0.0
@@ -29,6 +32,9 @@ importers:
       react-dom:
         specifier: 19.2.8
         version: 19.2.8(react@19.2.8)
+      simple-icons:
+        specifier: ^16.28.0
+        version: 16.28.0
       systeminformation:
         specifier: ^5.33.1
         version: 5.33.1
@@ -660,6 +666,13 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
+  '@phosphor-icons/react@2.1.10':
+    resolution: {integrity: sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>= 16.8'
+      react-dom: '>= 16.8'
+
   '@protobufjs/aspromise@1.1.2':
     resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
 
@@ -2203,6 +2216,10 @@ packages:
     resolution: {integrity: sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==}
     engines: {node: '>= 0.4'}
 
+  simple-icons@16.28.0:
+    resolution: {integrity: sha512-sQPR5AtK/ijRjou7zw7mlLp08oB6FH7i0lOy5XJ2zp9mJs/yejgiOn7KvQoe2q4YJIx6VmgUSW5AOefebPt5kg==}
+    engines: {node: '>=0.12.18'}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -2943,6 +2960,11 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
+  '@phosphor-icons/react@2.1.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
   '@protobufjs/aspromise@1.1.2': {}
 
   '@protobufjs/base64@1.1.2': {}
@@ -4701,6 +4723,8 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
+  simple-icons@16.28.0: {}
+
   source-map-js@1.2.1: {}
 
   split-ca@1.0.1: {}

scripts/extract-brand-icons.py

@@ -0,0 +1,56 @@
+#!/usr/bin/env python3
+"""Regenerates lib/brand-icons.ts from the `simple-icons` package.
+
+Run from the repo root after `pnpm add simple-icons` has installed it:
+
+    python3 scripts/extract-brand-icons.py
+
+Add a new service by adding a "our key" -> "simple-icons slug" entry below.
+Slugs are the filenames under node_modules/simple-icons/icons/ (without the
+.svg extension).
+"""
+
+import json
+import re
+from pathlib import Path
+
+ICONS = {
+    "traefik": "traefikproxy",
+    "coolify": "coolify",
+    "gitea": "gitea",
+    "docker": "docker",
+    "immich": "immich",
+    "n8n": "n8n",
+    "passbolt": "passbolt",
+    "umami": "umami",
+    "postgresql": "postgresql",
+    "redis": "redis",
+    "headscale": "tailscale",
+}
+
+ROOT = Path(__file__).resolve().parent.parent
+ICONS_DIR = ROOT / "node_modules" / "simple-icons" / "icons"
+OUT_PATH = ROOT / "lib" / "brand-icons.ts"
+
+HEADER = """// Path data extracted from the `simple-icons` package (CC0) at build time -
+// see scripts/extract-brand-icons.py. Rendered monochrome (currentColor) to
+// stay consistent with the single-accent design rather than a dozen
+// competing brand colors; the shape alone is enough to be recognizable.
+export const BRAND_ICON_PATHS: Record<string, string> = {
+"""
+
+
+def main() -> None:
+    lines = [HEADER]
+    for key, slug in ICONS.items():
+        svg = (ICONS_DIR / f"{slug}.svg").read_text()
+        d_matches = re.findall(r'<path d="([^"]+)"', svg)
+        combined = " ".join(d_matches)
+        lines.append(f"  {json.dumps(key)}: {json.dumps(combined)},\n")
+    lines.append("};\n")
+    OUT_PATH.write_text("".join(lines))
+    print(f"Wrote {OUT_PATH} ({len(ICONS)} icons)")
+
+
+if __name__ == "__main__":
+    main()