mirrors/hermes-agent
1
0
Fork 0
mirror of https://github.com/NousResearch/hermes-agent.git synced 2026-04-25 00:51:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
hermes-agent/plugins/strike-freedom-cockpit/README.md
Teknium f593c367be
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

2.6 KiB
Raw Blame History

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