plugins/strike-freedom-cockpit/README.md

# 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:

```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: `web/src/themes/types.ts`,
`web/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
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> 2026-04-23 15:31:01 -07:00			`# 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:`

			```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: `web/src/themes/types.ts`,
			`web/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