hermes-agent/plugins/strike-freedom-cockpit

Strike Freedom Cockpit — dashboard skin demo

Demonstrates how the dashboard skin+plugin system can be used to build a fully custom cockpit-style reskin without touching the core dashboard.

Two pieces:

• theme/strike-freedom.yaml — a dashboard theme YAML that paints the palette, typography, layout variant (cockpit), component chrome (notched card corners, scanlines, accent colors), and declares asset slots (hero, crest, bg).
• dashboard/ — a plugin that populates the sidebar, header-left, and footer-right slots reserved by the cockpit layout. The sidebar renders an MS-STATUS panel with segmented telemetry bars driven by real agent status; the header-left injects a COMPASS crest; the footer-right replaces the default org tagline.

Install

1. Theme — copy the theme YAML into your Hermes home:

   cp theme/strike-freedom.yaml ~/.hermes/dashboard-themes/
   

2. Plugin — the dashboard/ directory gets auto-discovered because it lives under plugins/ in the repo. On a user install, copy the whole plugin directory into ~/.hermes/plugins/:

   cp -r . ~/.hermes/plugins/strike-freedom-cockpit
   

3. Restart the web UI (or GET /api/dashboard/plugins/rescan), open it, pick Strike Freedom from the theme switcher.

Customising the artwork

The sidebar plugin reads --theme-asset-hero and --theme-asset-crest from the active theme. Drop your own URLs into the theme YAML:

assets:
  hero: "/my-images/strike-freedom.png"
  crest: "/my-images/compass-crest.svg"
  bg: "/my-images/cosmic-era-bg.jpg"

The plugin reads those at render time — no plugin code changes needed to swap artwork across themes.

What this demo proves

The dashboard skin+plugin system supports (ref: apps/dashboard/src/themes/types.ts, apps/dashboard/src/plugins/slots.ts):

• Palette, typography, font URLs, density, radius — already present
• Asset URLs exposed as CSS vars (bg / hero / crest / logo / sidebar / header + arbitrary custom.*)
• Raw customCSS blocks injected as scoped <style> tags
• Per-component style overrides (card / header / sidebar / backdrop / tab / progress / footer / badge / page) via CSS vars
• layoutVariant — standard, cockpit, or tiled
• Plugin slots — 10 named shell slots plugins can inject into (backdrop, header-left/right/banner, sidebar, pre-main, post-main, footer-left/right, overlay)
• Route overrides — plugins can replace a built-in page entirely (tab.override: "/") instead of just adding a tab
• Hidden plugins — slot-only plugins that never show in the nav (tab.hidden: true) — as used here