Add Merge-themed website + operational GUI dashboard

- docs/index.html: marketing landing page (serif display, dark rules, black pill
  buttons, the stack flowchart) styled after the Merge Labs aesthetic
- docs/app/: vanilla-JS control-plane GUI (no build step) with an in-browser
  engine that faithfully mirrors the Python resolver, so the GitHub Pages demo
  works with no backend; auto-switches to a live FastAPI backend when one is
  reachable at the same origin
- docs/assets/theme.css: shared light/monochrome/editorial design system
- scripts/export_snapshot.py: generates docs/app/data.js from the seeded lab so
  the browser demo can never drift from the engine
- api.py: serve the GUI from docs/ (live mode) at /
- README: embed dashboard screenshots + live-demo links

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H9BehfGmiCrz3J15W18rc9

Author: sanjaydoc

README.md

@@ -14,10 +14,15 @@
 ![Code style: ruff](https://img.shields.io/badge/code%20style-ruff-000000)
 ![Deps](https://img.shields.io/badge/core%20deps-zero-success)
 
-[Architecture](#the-stack) · [Quickstart](#quickstart) · [Demo](#what-the-demo-shows) · [Swappable adapters](#swappable-by-design) · [How it maps to the real stack](#how-it-maps-to-the-real-stack)
+[Live demo ↗](https://sanjaydoc.github.io/LabSuite/app/) · [Website ↗](https://sanjaydoc.github.io/LabSuite/) · [Architecture](#the-stack) · [Dashboard](#the-web-dashboard) · [Quickstart](#quickstart) · [How it maps to the real stack](#how-it-maps-to-the-real-stack)
 
 </div>
 
+<p align="center">
+  <img src="docs/media/dashboard-onboard.png" alt="LabSuite dashboard — onboarding a hire across Okta, AD, TrueNAS and Proxmox in one action" width="900" />
+</p>
+<p align="center"><sub><b>Onboard once, provisioned everywhere.</b> One action creates the hire in Okta, assigns policy groups, syncs to AD, and resolves their exact TrueNAS + Proxmox access — <a href="https://sanjaydoc.github.io/LabSuite/app/">try the live demo</a>.</sub></p>
+
 ---
 
 ## Why this exists
@@ -113,6 +118,33 @@ and Proxmox. *Upward* is a decision: "can she start VM 101?" resolves her
 path → allow/deny, written to the audit log. TrueNAS and Proxmox never see Okta —
 they only ask AD for effective groups, exactly as the real systems are wired.
 
+## The web dashboard
+
+A polished, **zero-build web GUI** (vanilla HTML/CSS/JS — no framework) ships with
+the project. Run `labsuite serve` for the live, API-backed version, or open the
+[**live demo**](https://sanjaydoc.github.io/LabSuite/app/) — it runs entirely in
+your browser as a faithful mirror of the Python engine, so you can click through
+onboarding, access resolution, and reviews with nothing installed.
+
+<table>
+  <tr>
+    <td width="50%"><img src="docs/media/dashboard-explorer.png" alt="Access explorer resolving a user's effective AD groups and access, and testing an allow/deny decision" /></td>
+    <td width="50%"><img src="docs/media/dashboard-review.png" alt="Access review board with anomaly flags" /></td>
+  </tr>
+  <tr>
+    <td align="center"><sub><b>Access explorer</b> — resolve Okta → AD (with nested groups ⤴) → TrueNAS + Proxmox, and test a single decision with its reason.</sub></td>
+    <td align="center"><sub><b>Access review</b> — quarterly-style entitlements with flags for stale access, FULL on sensitive shares, and datacenter admin.</sub></td>
+  </tr>
+  <tr>
+    <td width="50%"><img src="docs/media/dashboard-overview.png" alt="Dashboard overview with stat tiles and the identity chain" /></td>
+    <td width="50%"><img src="docs/media/dashboard-onboard.png" alt="Onboard form and the provisioned result" /></td>
+  </tr>
+  <tr>
+    <td align="center"><sub><b>Overview</b> — the seeded lab at a glance.</sub></td>
+    <td align="center"><sub><b>Onboard</b> — the form and the resolved downstream access it produces.</sub></td>
+  </tr>
+</table>
+
 ## What makes it more than a toy
 
 | | Typical script | **LabSuite** |

docs/app/app.css

@@ -0,0 +1,72 @@
+/* App-specific styles layered on the shared LabSuite/Merge theme. */
+
+.app { display: grid; grid-template-columns: 232px 1fr; min-height: calc(100vh - 64px); }
+
+.side { border-right: 1.5px solid var(--rule); padding: 22px 14px; }
+.side .navitem {
+  display: flex; align-items: center; gap: .6rem; width: 100%;
+  padding: .55rem .7rem; border-radius: 10px; border: 0; background: transparent;
+  font-family: var(--sans); font-size: .92rem; color: var(--ink-2); font-weight: 500;
+  cursor: pointer; text-align: left; margin-bottom: 2px;
+}
+.side .navitem:hover { background: var(--paper-2); }
+.side .navitem.active { background: var(--ink); color: #fff; }
+.side .navitem .k { margin-left: auto; font-size: .7rem; opacity: .5; }
+.side .grp { font-size: .7rem; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; margin: 16px 8px 6px; }
+
+.main { padding: 30px 34px 64px; max-width: 940px; }
+.view { display: none; }
+.view.active { display: block; animation: fade .18s ease; }
+@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+
+.view h2 { font-size: 2rem; margin-bottom: .3rem; }
+.view .sub { color: var(--muted); margin-bottom: 1.6rem; font-size: .95rem; }
+
+.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px; }
+@media (max-width: 720px) { .stats { grid-template-columns: 1fr 1fr; } }
+.stat { border: 1px solid var(--hair); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
+.stat .n { font-family: var(--serif); font-size: 2.2rem; line-height: 1; }
+.stat .l { color: var(--muted); font-size: .82rem; margin-top: .35rem; }
+
+.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
+@media (max-width: 820px) { .grid2 { grid-template-columns: 1fr; } }
+
+.field { margin-bottom: 14px; }
+.field label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .35rem; }
+input, select {
+  width: 100%; font-family: var(--sans); font-size: .95rem; color: var(--ink);
+  padding: .6rem .7rem; border: 1px solid var(--hair); border-radius: 10px; background: var(--paper);
+}
+input:focus, select:focus { outline: none; border-color: var(--ink); }
+
+.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; font-size: .9rem; }
+.kv .k { color: var(--muted); }
+
+.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
+.tag { font-size: .78rem; padding: .2rem .55rem; border-radius: var(--pill); border: 1px solid var(--hair); background: var(--paper-2); color: var(--ink-2); }
+.tag.nested { border-style: dashed; color: var(--ad); }
+
+.result { margin-top: 18px; }
+.flags .flag { display: flex; gap: .5rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--hair); font-size: .9rem; }
+.flags .flag .bang { color: var(--no); font-weight: 800; }
+
+.audit-row { display: grid; grid-template-columns: 120px 150px 1fr auto; gap: .6rem; font-size: .84rem; padding: .45rem .2rem; border-bottom: 1px solid var(--hair); align-items: center; }
+.audit-row .sys { color: var(--muted); font-family: var(--mono, monospace); font-size: .78rem; }
+.audit-row .act { font-weight: 600; }
+@media (max-width: 720px) { .audit-row { grid-template-columns: 1fr auto; } .audit-row .sys, .audit-row .det { display: none; } }
+
+.modebadge { font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: var(--pill); }
+.modebadge.demo { background: #fff4e5; color: #a2661a; border: 1px solid #f0dcc0; }
+.modebadge.live { background: var(--ok-bg); color: var(--ok); border: 1px solid #cfe6da; }
+
+.linkish { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
+
+.notice { font-size: .82rem; color: var(--muted); background: var(--paper-2); border: 1px solid var(--hair); border-radius: 10px; padding: .7rem .9rem; }
+
+@media (max-width: 720px) {
+  .app { grid-template-columns: 1fr; }
+  .side { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1.5px solid var(--rule); padding: 10px; gap: 6px; }
+  .side .grp { display: none; }
+  .side .navitem { width: auto; white-space: nowrap; }
+  .main { padding: 22px 18px 48px; }
+}