mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-04-25 00:51:20 +00:00
f593c367be
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>
70 lines
2.6 KiB
Markdown
70 lines
2.6 KiB
Markdown
# 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
|