feat: scaffold PulseNode dashboard (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.

components/layout/Dashboard.tsx

@@ -0,0 +1,15 @@
+import type { Config } from "@/lib/config/schema";
+import { GroupSection } from "./GroupSection";
+
+export function Dashboard({ config }: { config: Config }) {
+  return (
+    <main className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-10">
+      <header className="flex items-center justify-between">
+        <h1 className="text-lg font-semibold text-fg">{config.settings.title}</h1>
+      </header>
+      {config.groups.map((group) => (
+        <GroupSection key={group.name} group={group} />
+      ))}
+    </main>
+  );
+}

components/layout/GroupSection.tsx

@@ -0,0 +1,18 @@
+import type { Group } from "@/lib/config/schema";
+import { widgetRegistry } from "@/components/widgets/registry";
+
+export function GroupSection({ group }: { group: Group }) {
+  return (
+    <section className="flex flex-col gap-3">
+      <h2 className="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">
+        {group.widgets.map((widget, index) => {
+          const Component = widgetRegistry[widget.type];
+          return <Component key={index} widget={widget as never} />;
+        })}
+      </div>
+    </section>
+  );
+}

components/layout/ThemeStyleInjector.tsx

@@ -0,0 +1,8 @@
+export function ThemeStyleInjector({ variables }: { variables: Record<string, string> }) {
+  const entries = Object.entries(variables);
+  if (entries.length === 0) return null;
+
+  const css = `:root{${entries.map(([key, value]) => `${key}:${value};`).join("")}}`;
+
+  return <style id="pulsenode-theme-overrides" dangerouslySetInnerHTML={{ __html: css }} />;
+}

components/widgets/bookmark/Widget.tsx

@@ -0,0 +1,19 @@
+import type { Widget } from "@/lib/config/schema";
+
+type BookmarkWidget = Extract<Widget, { type: "bookmark" }>;
+
+export function BookmarkWidget({ widget }: { widget: BookmarkWidget }) {
+  return (
+    <a
+      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"
+    >
+      <span className="text-sm font-medium text-fg">{widget.name}</span>
+      {widget.description && (
+        <span className="text-xs text-fg-muted">{widget.description}</span>
+      )}
+    </a>
+  );
+}

components/widgets/registry.ts

@@ -0,0 +1,13 @@
+import type { ComponentType } from "react";
+import type { Widget } from "@/lib/config/schema";
+import { BookmarkWidget } from "./bookmark/Widget";
+import { SearchWidget } from "./search/Widget";
+
+type WidgetComponent<T extends Widget["type"]> = ComponentType<{
+  widget: Extract<Widget, { type: T }>;
+}>;
+
+export const widgetRegistry: { [K in Widget["type"]]: WidgetComponent<K> } = {
+  bookmark: BookmarkWidget,
+  search: SearchWidget,
+};

components/widgets/search/Widget.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import type { SearchEngine, Widget } from "@/lib/config/schema";
+
+type SearchWidget = Extract<Widget, { type: "search" }>;
+
+const ENGINE_URLS: Record<string, string> = {
+  duckduckgo: "https://duckduckgo.com/?q=",
+  google: "https://www.google.com/search?q=",
+  bing: "https://www.bing.com/search?q=",
+};
+
+export function SearchWidget({ widget }: { widget: SearchWidget }) {
+  const [engine, setEngine] = useState(widget.defaultEngine ?? widget.engines[0]);
+  const [query, setQuery] = useState("");
+
+  function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+    const trimmed = query.trim();
+    if (!trimmed) return;
+    window.open(`${ENGINE_URLS[engine]}${encodeURIComponent(trimmed)}`, "_blank", "noreferrer");
+  }
+
+  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>
+      )}
+      <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"
+      />
+    </form>
+  );
+}