A bookmark widget can now carry an optional links array instead of
a single href, rendering as a compact card with one row per link -
for grouping several quick links (e.g. "all services", "all Coolify
apps") into one widget instead of one card per link.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WpxhtQY3CExQdMs4j7MmJe
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.
Imports the visual direction from a claude.ai/design session ("PulseNode
Dashboard.dc.html") and reconciles it with the app's existing choices
rather than a wholesale swap: kept the IBM Plex Sans/Mono + Space
Grotesk typography and the pulse-green accent concept from the earlier
pass, adopted the imported design's structural ideas - a real
tonal/elevation token system (derived divider/muted colors via
color-mix instead of hardcoded per-theme duplicates, actual box-shadow
elevation), a 12-column bento grid with per-widget-type column spans
instead of uniform equal-width cards, fading-edge section dividers,
and a shared WidgetCard/MetricBar/StatusTag vocabulary so every widget
type stops repeating its own card markup.
Icons come from @phosphor-icons/react's /ssr entrypoint (bundled at
build time) rather than the imported design's unpkg.com CDN script -
that script is fine for the standalone design-tool preview, but a
runtime third-party call would break the self-hosted-only principle
already established (fonts self-hosted via next/font, no external
requests). New app/icon.svg reuses the same nav badge mark as the
favicon, replacing the never-touched create-next-app default.
Two new pieces of real functionality prompted by the design's mockup
toast/live-indicator, not just decoration: a "live" WebSocket
connection-status indicator (lib/ws/client.ts now tracks and exposes
real connection state), and a toast that fires on actual config:update
and config:error events - the latter finally surfaces config validation
failures in the browser, previously visible only in server logs despite
being designed for exactly this back in M1.
Next.js 16 + TypeScript + Tailwind v4 app with a YAML-driven config
system: schema validation (zod), .env interpolation, and a widget
registry rendering bookmark/search/group widgets. CSS custom
properties (--pn-*) drive theming and are overridable from
config.yml's theme.variables. Config load errors surface as a
readable error page instead of crashing the app.
Hot reload, docker/system/http collectors, and the WebSocket push
layer land in later milestones per the approved plan.
valknarandClaude Sonnet 5