# Showcase Boards — three stances for a shared-agent project manager

Three visually distinct, self-contained HTML boards, plus a gallery landing page that presents them
as finished worlds. **DEMO data only.** No external dependencies, no live claims, no fake
operational state.

All three boards target **1920 × 1080**, are built from a single `index.html` per board, and ship at
least one genuine interaction (clicks, filters, live ticks). The gallery at the project root is
responsive from mobile through 4K.

## Project structure

```
showcase-boards/
├── index.html                     ← gallery landing page (start here)
├── README.md                      ← this file
├── terracotta-command/
│   └── index.html                 ← board 01 · Terracotta Kiln Command
├── midnight-owl/
│   └── index.html                 ← board 02 · Midnight Owl · Brass Cabinet
├── neon-watchdog/
│   └── index.html                 ← board 03 · Neon Watchdog War Room
└── scripts/
    └── verify_gallery.py          ← stdlib-only structural verifier
```

The folder also carries repo-hygiene files that are not part of the gallery itself: `LICENSE`
(MIT), `.gitignore`, and `.gitlab-ci.yml` (which runs the verifier below as its only CI step).

Every file is standalone: styles and scripts are inline, and nothing is fetched from the network.
There is no build step, no package manager, and no lockfile.

## Open it locally

Double-click `index.html`, or from a terminal:

```bash
cd /var/lib/hermes/showcase-boards

# macOS
open index.html
# Linux
xdg-open index.html
# Windows
start index.html
```

Boards can also be opened directly — `terracotta-command/index.html`, and so on.

**A note on `file://`.** The gallery's *live preview* mounts each board in a sandboxed `<iframe>`.
Some browsers (Chrome in particular) block `file://` iframes. Everything else on the page works
regardless; if a preview stays blank, either use the **Open in a new tab** link, or serve the folder
over HTTP:

```bash
cd /var/lib/hermes/showcase-boards
python3 -m http.server 8000
# then visit http://localhost:8000/
```

Firefox and Safari generally render the `file://` previews without a server.

## The gallery page

`index.html` is a permanent landing page, not a card grid. It adopts the palette and type voice of
whichever board is selected, so the chrome itself changes world as you browse.

**Independent interactions on the gallery:**

1. **World selector** — a sticky rail (a horizontal filmstrip on narrow screens) that re-themes the
   entire page, swaps the dossier, and rewrites the URL hash.
2. **Stage mode** — *Dossier* (a hand-drawn, deterministic inline-SVG motif per world, no iframe
   cost) vs *Live preview* (the real board, sandboxed).
3. **Preview scale** — *Fit* scales the 1920 × 1080 board into the stage; *1920px* renders it at
   true size in a scroll pane for pixel inspection. Disabled while in Dossier mode.

**Deep links.** Selecting a world sets `#terracotta-command`, `#midnight-owl` or `#neon-watchdog`,
and the page restores that world on load, so any single board is directly linkable. Each world also
carries two plain `<a href>` links to its board file, which work with JavaScript disabled.

**Mobile behaviour.** Live previews are never auto-mounted below 900 px. The stage shows the motif
plus an explicit **Load live preview** button, so a phone is never handed three 1920 px boards
running animation timers.

**Accessibility.** The selector is a proper `tablist`/`tabpanel` pair with roving `tabindex`; arrow
keys, `Home` and `End` move between worlds. Mode and scale controls expose `aria-pressed`. There is
a skip link to the stage, and focus rings are visible throughout.

**Reduced motion.** `prefers-reduced-motion: reduce` collapses the gallery's transitions and drops
its scan texture. Because the boards animate on their own timers and predate this preference, the
gallery additionally refuses to auto-mount a preview under reduced motion — you load it deliberately.

## Boards

| Path | Stance | Palette | Density mode |
|---|---|---|---|
| `terracotta-command/index.html` | **Terracotta Kiln Command** — pottery-hearth metaphor with stoke ledger and a temperature curve | warm clay · rust · kiln-amber · bone | asymmetric tile columns; vertical agent rail; live watchtower gauges |
| `midnight-owl/index.html` | **Midnight Owl · Brass Cabinet** — scholarly observatory with hourly rule and a stellarium | midnight blue · aged brass · verdigris · bone | hour-rule column; vellum-textured task cabinet; latin/liturgical type voice |
| `neon-watchdog/index.html` | **Neon Watchdog War Room** — CRT-style alert console with waterfall and 144-cell matrix | near-black · cyan · magenta · amber · red | agent heat-matrix; animated event waterfall; live log tail |

These are deliberately **different design stances**, not recolors — see "Differences" below.

## Interactions

Each board ships at least one of:

- **Terracotta** — click any tile to log it in the hearth ledger; shift/day/week picker swaps gauge readings; temperature curve wobbles live.
- **Midnight Owl** — click any cabinet card to log it in the feed; filter chips (`all / pressing / gentle / overlong`) re-render the cabinet.
- **Neon Watchdog** — click any matrix cell, fleet row, or ticket to push to the live stream; "ack all" button clears the alert badge; waterfall columns re-roll every second.

## Data honesty

Every numeric value is a deterministic fixture (random-but-bounded for visual liveliness). Nothing
here references live agents, real systems, real clusters, or claims uptime or production state. Look
for the **DEMO** badge on the gallery masthead, on every world header, on every preview surface, and
in the footer of each board.

## Differences (why they're not recolors)

- **Layout topology** — Terracotta: 3-column (rail / lanes / tower). Owl: 4-column (keepers / hour-rule / cabinet / ephemeris). Watchdog: 3-column (matrix / waterfall+grid / log+dials).
- **Type voice** — Terracotta uses old-style serif (Iowan/Palatino). Owl uses Garamond + italic epigraphs and small-caps labels. Watchdog is JetBrains/Mono throughout with uppercase tracked labels.
- **Chart primacy** — Terracotta leads with an SVG temperature area chart. Watchdog leads with a 144-cell alert matrix + a 60×26 SVG waterfall. Owl has no chart — it uses a stellarium dot-map of named agents instead.
- **Color temperature** — warm only / cool brass-on-blue / high-contrast neon-black. Three genuinely different lighting moods.
- **Interaction shape** — click-to-log vs filter-to-redraw vs click-to-tail-log. Each board privileges a different verb.

## Verification

`scripts/verify_gallery.py` is a standard-library-only checker — no pip installs, no third-party
packages. Run it from anywhere:

```bash
python3 /var/lib/hermes/showcase-boards/scripts/verify_gallery.py
# or point it at a copy of the folder
python3 scripts/verify_gallery.py --root /path/to/showcase-boards
```

It validates, across the gallery and all three boards:

- **HTML structure** — doctype, exactly one `<html>`/`<head>/<body>`/`<title>`, a charset, and balanced block tags via `html.parser`.
- **Local references** — every `href`/`src` resolves to a file that exists, and none escape the project folder.
- **Self-containment** — no remote `href`/`src`, no `<link>`, no `@import`, no external script sources.
- **Required labels** — a `DEMO` label on every page; on the gallery, reduced-motion support, a responsive viewport, the skip link, `tablist`/`tabpanel`/`aria-selected`/`aria-pressed` hooks, sandboxed previews, and no eagerly-loaded iframe in static markup.
- **Deep links** — the gallery links to all three board files.
- **This README** — that it documents the structure, local-open instructions, the verifier, and all three boards.

Exit code is `0` when everything passes, `1` otherwise, so it drops straight into a pre-commit hook
or CI step.

## File paths (exact)

- `/var/lib/hermes/showcase-boards/index.html` (gallery)
- `/var/lib/hermes/showcase-boards/terracotta-command/index.html`
- `/var/lib/hermes/showcase-boards/midnight-owl/index.html`
- `/var/lib/hermes/showcase-boards/neon-watchdog/index.html`
- `/var/lib/hermes/showcase-boards/scripts/verify_gallery.py`
- `/var/lib/hermes/showcase-boards/README.md` (this file)