feat(dashboard): reskin extension points for themes and plugins (#14776)

Themes and plugins can now pull off arbitrary dashboard reskins (cockpit
HUD, retro terminal, etc.) without touching core code.

Themes gain four new fields:
- layoutVariant: standard | cockpit | tiled — shell layout selector
- assets: {bg, hero, logo, crest, sidebar, header, custom: {...}} —
  artwork URLs exposed as --theme-asset-* CSS vars
- customCSS: raw CSS injected as a scoped <style> tag on theme apply
  (32 KiB cap, cleaned up on theme switch)
- componentStyles: per-component CSS-var overrides (clipPath,
  borderImage, background, boxShadow, ...) for card/header/sidebar/
  backdrop/tab/progress/badge/footer/page

Plugin manifests gain three new fields:
- tab.override: replaces a built-in route instead of adding a tab
- tab.hidden: register component + slots without adding a nav entry
- slots: declares shell slots the plugin populates

10 named shell slots: backdrop, header-left/right/banner, sidebar,
pre-main, post-main, footer-left/right, overlay. Plugins register via
window.__HERMES_PLUGINS__.registerSlot(name, slot, Component). A
<PluginSlot> React helper is exported on the plugin SDK.

Ships a full demo at plugins/strike-freedom-cockpit/ — theme YAML +
slot-only plugin that reproduces a Gundam cockpit dashboard: MS-STATUS
sidebar with live telemetry, COMPASS crest in header, notched card
corners via componentStyles, scanline overlay via customCSS, gold/cyan
palette, Orbitron typography.

Validation:
- 15 new tests in test_web_server.py covering every extended field
- tests/hermes_cli/: 2615 passed (3 pre-existing unrelated failures)
- tsc -b --noEmit: clean
- vite build: 418 kB bundle, ~2 kB delta for slots/theme extensions

Co-authored-by: Teknium <p@nousresearch.com>

web/src/components/Backdrop.tsx

@@ -38,11 +38,27 @@ export function Backdrop() {
       <div
         aria-hidden
         className="pointer-events-none fixed inset-0 z-[2]"
-        style={{ mixBlendMode: "difference", opacity: 0.033 }}
+        style={
+          {
+            // Themes can override the filler background by setting
+            // `assets.bg` — the <img> hides itself when a CSS bg is set
+            // so the two don't double-darken. CSS var fallbacks keep the
+            // default behaviour unchanged when no theme customises these.
+            mixBlendMode: "var(--component-backdrop-filler-blend-mode, difference)",
+            opacity: "var(--component-backdrop-filler-opacity, 0.033)",
+            backgroundImage: "var(--theme-asset-bg)",
+            backgroundSize: "var(--component-backdrop-background-size, cover)",
+            backgroundPosition: "var(--component-backdrop-background-position, center)",
+          } as unknown as React.CSSProperties
+        }
       >
+        {/* Default filler image only renders when no theme-asset-bg is
+            set. Themes that provide their own `assets.bg` override the
+            <div>'s backgroundImage above, so hiding the <img> in that
+            case prevents the two from compositing incorrectly. */}
         <img
           alt=""
-          className="h-[150dvh] w-auto min-w-[100dvw] object-cover object-top-left invert"
+          className="h-[150dvh] w-auto min-w-[100dvw] object-cover object-top-left invert theme-default-filler"
           fetchPriority="low"
           src="/ds-assets/filler-bg0.jpg"
         />

web/src/components/ui/card.tsx

@@ -1,12 +1,35 @@
 import { cn } from "@/lib/utils";
 
-export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+/**
+ * Themed card primitive. Themes can restyle every card without touching
+ * call sites by setting CSS vars under the `card` component-style bucket:
+ *
+ *   componentStyles:
+ *     card:
+ *       clipPath: "polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px)"
+ *       border: "1px solid var(--color-ring)"
+ *       background: "linear-gradient(180deg, var(--color-card) 0%, transparent 100%)"
+ *       boxShadow: "0 0 0 1px var(--color-ring) inset, 0 0 24px -8px var(--warm-glow)"
+ *
+ * All properties are optional — vars that aren't set compute to their
+ * CSS initial value, so the default shadcn-y card keeps looking normal
+ * for themes that don't override anything.
+ */
+const CARD_STYLE: React.CSSProperties = {
+  clipPath: "var(--component-card-clip-path)",
+  borderImage: "var(--component-card-border-image)",
+  background: "var(--component-card-background)",
+  boxShadow: "var(--component-card-box-shadow)",
+};
+
+export function Card({ className, style, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       className={cn(
         "border border-border bg-card/80 text-card-foreground w-full",
         className,
       )}
+      style={{ ...CARD_STYLE, ...style }}
       {...props}
     />
   );