@opsydyn/elysia-spectral 1.1.1 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [1.3.0](https://github.com/opsydyn/elysia-spectral/compare/v1.2.0...v1.3.0) (2026-04-28)
+
+
+### Features
+
+* **dashboard:** add theme switcher and extract dashboard assets ([08217c8](https://github.com/opsydyn/elysia-spectral/commit/08217c8e786220ca1f5b613ac18e2d266ee8d928))
+
+
+### Bug Fixes
+
+* **dashboard:** label theme switcher visibly ([fb74c82](https://github.com/opsydyn/elysia-spectral/commit/fb74c828d31063cb4d667578789811fcb1f35642))
+
+## [1.2.0](https://github.com/opsydyn/elysia-spectral/compare/v1.1.1...v1.2.0) (2026-04-28)
+
+
+### Features
+
+* optional bearer auth for the lint dashboard route ([7360e1c](https://github.com/opsydyn/elysia-spectral/commit/7360e1c323328005160598832dbd02b315a0cd2f))
+
+
+### Bug Fixes
+
+* publish dashboard documentation update ([c8d656a](https://github.com/opsydyn/elysia-spectral/commit/c8d656ae1a6bbcd67ce63bd8e430861b07cd216b))
+
 ## [1.1.1](https://github.com/opsydyn/elysia-spectral/compare/v1.1.0...v1.1.1) (2026-04-28)
 
 

package/README.md

@@ -62,6 +62,7 @@ Current package scope:
 - Bruno collection output (OpenCollection YAML or JSON)
 - reusable runtime for CI and tests
 - opt-in healthcheck endpoint for cached and fresh runs
+- opt-in HTML lint dashboard with severity filters, search, and copy-friendly artifact paths
 
 ## Data flow
 
@@ -347,6 +348,60 @@ Behavior:
 - the route returns `503` when findings meet or exceed `failOn`
 - the route is hidden from generated OpenAPI docs
 
+### Add an HTML lint dashboard endpoint
+
+The dashboard route is opt-in and renders the latest lint result as a self-contained HTML page — no JS bundle, no build step, no external assets.
+
+```ts
+spectralPlugin({
+  dashboard: {
+    path: '/__openapi/dashboard'
+  }
+})
+```
+
+`dashboard: {}` mounts the default path (`/__openapi/dashboard`); pass `path` to override.
+
+To gate the dashboard behind a static bearer token, pass `bearerToken`:
+
+```ts
+spectralPlugin({
+  dashboard: {
+    path: '/__openapi/dashboard',
+    bearerToken: process.env.LINT_DASHBOARD_TOKEN
+  }
+})
+```
+
+When `bearerToken` is set the route returns `401 Unauthorized` (with a `WWW-Authenticate: Bearer` header) unless the request carries a matching `Authorization: Bearer <token>` header. Leave `bearerToken` undefined to keep the route open — useful in local dev. This mirrors the bearer pattern documented in the [Elysia OpenAPI guide](https://elysiajs.com/patterns/openapi).
+
+What it surfaces:
+
+- pass / fail banner at the configured `failOn` threshold
+- run metadata (timestamp, source, duration, cache hit)
+- severity summary chips that filter the findings table
+- a search input that matches rule code, operation, message, and JSON pointer
+- copy-to-clipboard buttons next to artifact paths
+- the trademarked `SPEC IS TIGHT, SHIP IT RIGHT` tagline on a clean run
+
+Keyboard shortcuts: `r` re-runs, `/` focuses the filter, `Enter`/`Space` toggles the focused severity chip.
+
+Three dark themes ship with the dashboard, selectable from the header dropdown and persisted per-browser via `localStorage`:
+
+- **Astro Houston** (default) — purple / blue gradient
+- **Tron Legacy** — cyan neon on near-black
+- **Detroit 808** — TR-808 amber, red, and yellow
+
+Append `?fresh=1` to force a fresh lint run instead of returning the cached result.
+
+| State | Screenshot |
+| --- | --- |
+| Pass | ![Dashboard pass state](https://raw.githubusercontent.com/opsydyn/elysia-spectral/main/docs/screenshots/dashboard-happy.png) |
+| Fail | ![Dashboard fail state](https://raw.githubusercontent.com/opsydyn/elysia-spectral/main/docs/screenshots/dashboard-unhappy.png) |
+| Recovered | ![Dashboard recovered state](https://raw.githubusercontent.com/opsydyn/elysia-spectral/main/docs/screenshots/dashboard-unhappy-fixed.png) |
+
+The dashboard is hidden from generated OpenAPI docs and is intended for local and internal-only environments. Gate it behind your standard auth or environment checks before exposing it on a public host.
+
 ### Persist JSON reports and OpenAPI snapshots
 
 ```ts
@@ -651,6 +706,7 @@ That starts `apps/dev-app` with:
 - OpenAPI UI at `/openapi`
 - raw OpenAPI JSON at `/openapi/json`
 - opt-in lint healthcheck at `/health/openapi-lint`
+- opt-in HTML lint dashboard at `/api-lint/dashboard`
 - JSON lint report output at `./artifacts/openapi-lint.json`
 - OpenAPI snapshot output at `./elysia-spectral-dev-app.open-api.json`
 
@@ -667,7 +723,7 @@ That example uses `startup.mode: 'report'`, so the app still boots while the pac
 ### Package API
 
 ```ts
-// ── Vocabulary types ──────────────────────────────────────────────────────────
+// ── Ubiquitous language types ──────────────────────────────────────────────────────────
 
 type PresetName = 'recommended' | 'server' | 'strict'
 type LintSeverity = 'error' | 'warn' | 'info' | 'hint'
@@ -687,6 +743,7 @@ type SpectralPluginOptions = {
   /** Severity level at which the lint run is considered failed. Defaults to 'error'. */
   failOn?: SeverityThreshold
   healthcheck?: false | { path?: string }
+  dashboard?: false | { path?: string; bearerToken?: string }
   output?: {
     /** Print findings to the console. Default: true. */
     console?: boolean
@@ -973,8 +1030,9 @@ Startup linting and route exposure solve different problems:
 
 - startup linting protects boot and local feedback loops
 - healthchecks expose operational state to external callers
+- the dashboard turns the same cached result into a human-readable page
 
-Separating them avoids a production surprise where enabling linting also adds a route you did not intend to expose.
+Separating them avoids a production surprise where enabling linting also adds a route you did not intend to expose. Each route is opt-in, so dashboards stay off by default and never leak into generated OpenAPI docs.
 
 ### Why repo-level rulesets are the default customization path
 

package/dist/core/index.d.mts

@@ -1,2 +1,2 @@
-import { a as createOpenApiLintRuntime, c as ResolvedRulesetCandidate, d as RulesetResolverContext, f as RulesetResolverInput, g as lintOpenApi, h as loadRuleset, i as OpenApiLintArtifactWriteError, l as RulesetLoadError, m as loadResolvedRuleset, n as enforceThreshold, o as LoadResolvedRulesetOptions, p as defaultRulesetResolvers, r as shouldFail, s as LoadedRuleset, t as OpenApiLintThresholdError, u as RulesetResolver } from "../index-Dx83hCT9.mjs";
+import { a as createOpenApiLintRuntime, c as ResolvedRulesetCandidate, d as RulesetResolverContext, f as RulesetResolverInput, g as lintOpenApi, h as loadRuleset, i as OpenApiLintArtifactWriteError, l as RulesetLoadError, m as loadResolvedRuleset, n as enforceThreshold, o as LoadResolvedRulesetOptions, p as defaultRulesetResolvers, r as shouldFail, s as LoadedRuleset, t as OpenApiLintThresholdError, u as RulesetResolver } from "../index-CyJXdIRT.mjs";
 export { LoadResolvedRulesetOptions, LoadedRuleset, OpenApiLintArtifactWriteError, OpenApiLintThresholdError, ResolvedRulesetCandidate, RulesetLoadError, RulesetResolver, RulesetResolverContext, RulesetResolverInput, createOpenApiLintRuntime, defaultRulesetResolvers, enforceThreshold, lintOpenApi, loadResolvedRuleset, loadRuleset, shouldFail };

package/dist/{index-Dx83hCT9.d.mts → index-CyJXdIRT.d.mts}

@@ -38,6 +38,7 @@ type SpectralPluginOptions = {
   };
   dashboard?: false | {
     path?: string;
+    bearerToken?: string;
   };
   output?: {
     console?: boolean;

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { A as SpectralLogger, C as OpenApiLintRuntime, D as OpenApiLintSinkContext, E as OpenApiLintSink, M as StartupLintMode, O as PresetName, S as OpenApiLintArtifacts, T as OpenApiLintRuntimeStatus, _ as ArtifactWriteFailureMode, a as createOpenApiLintRuntime, b as LintRunSource, c as ResolvedRulesetCandidate, d as RulesetResolverContext, f as RulesetResolverInput, g as lintOpenApi, h as loadRuleset, i as OpenApiLintArtifactWriteError, j as SpectralPluginOptions, k as SeverityThreshold, l as RulesetLoadError, m as loadResolvedRuleset, n as enforceThreshold, o as LoadResolvedRulesetOptions, p as defaultRulesetResolvers, r as shouldFail, s as LoadedRuleset, t as OpenApiLintThresholdError, u as RulesetResolver, v as LintFinding, w as OpenApiLintRuntimeFailure, x as LintSeverity, y as LintRunResult } from "./index-Dx83hCT9.mjs";
+import { A as SpectralLogger, C as OpenApiLintRuntime, D as OpenApiLintSinkContext, E as OpenApiLintSink, M as StartupLintMode, O as PresetName, S as OpenApiLintArtifacts, T as OpenApiLintRuntimeStatus, _ as ArtifactWriteFailureMode, a as createOpenApiLintRuntime, b as LintRunSource, c as ResolvedRulesetCandidate, d as RulesetResolverContext, f as RulesetResolverInput, g as lintOpenApi, h as loadRuleset, i as OpenApiLintArtifactWriteError, j as SpectralPluginOptions, k as SeverityThreshold, l as RulesetLoadError, m as loadResolvedRuleset, n as enforceThreshold, o as LoadResolvedRulesetOptions, p as defaultRulesetResolvers, r as shouldFail, s as LoadedRuleset, t as OpenApiLintThresholdError, u as RulesetResolver, v as LintFinding, w as OpenApiLintRuntimeFailure, x as LintSeverity, y as LintRunResult } from "./index-CyJXdIRT.mjs";
 import { RulesetDefinition } from "@stoplight/spectral-core";
 import { Elysia } from "elysia";
 

package/dist/index.mjs

@@ -1,5 +1,11 @@
 import { a as enforceThreshold, c as strict, d as RulesetLoadError, f as defaultRulesetResolvers, g as lintOpenApi, h as recommended, i as OpenApiLintThresholdError, l as server, m as loadRuleset, n as createOpenApiLintRuntime, o as shouldFail, p as loadResolvedRuleset, r as resolveStartupMode, s as presets, t as OpenApiLintArtifactWriteError, u as resolveReporter } from "./core-BLJeXQ15.mjs";
 import { Elysia } from "elysia";
+//#region \0text:/home/runner/work/elysia-spectral/elysia-spectral/packages/elysia-spectral/src/output/dashboard.client.js.txt
+var dashboard_client_js_default = "export default \"(() => {\\n  const THEME_KEY = 'elysia-spectral-theme';\\n  const THEMES = ['astro', 'tron', '808'];\\n  let stored = null;\\n  try {\\n    stored = localStorage.getItem(THEME_KEY);\\n  } catch {}\\n  const initial = THEMES.includes(stored) ? stored : 'astro';\\n  document.documentElement.dataset.theme = initial;\\n\\n  const themeSel = document.querySelector('[data-theme-switcher]');\\n  if (themeSel) {\\n    themeSel.value = initial;\\n    themeSel.addEventListener('change', () => {\\n      const next = THEMES.includes(themeSel.value) ? themeSel.value : 'astro';\\n      document.documentElement.dataset.theme = next;\\n      try {\\n        localStorage.setItem(THEME_KEY, next);\\n      } catch {}\\n    });\\n  }\\n\\n  const rel = (iso) => {\\n    const t = Date.parse(iso);\\n    if (Number.isNaN(t)) return '';\\n    const s = Math.round((Date.now() - t) / 1000);\\n    if (s < 60) return s + 's ago';\\n    if (s < 3600) return Math.round(s / 60) + 'm ago';\\n    if (s < 86400) return Math.round(s / 3600) + 'h ago';\\n    return Math.round(s / 86400) + 'd ago';\\n  };\\n  for (const el of document.querySelectorAll('[data-relative-time]')) {\\n    el.textContent = rel(el.getAttribute('data-relative-time'));\\n  }\\n\\n  const rows = Array.from(document.querySelectorAll('[data-findings] tr'));\\n  const search = document.querySelector('[data-search]');\\n  const empty = document.querySelector('[data-empty-findings]');\\n  const chips = Array.from(document.querySelectorAll('[data-filter]'));\\n  let activeSeverity = 'all';\\n  let query = '';\\n\\n  const apply = () => {\\n    let visible = 0;\\n    for (const tr of rows) {\\n      const sev = tr.getAttribute('data-severity');\\n      const hay = tr.getAttribute('data-haystack') || '';\\n      const sevOk = activeSeverity === 'all' || sev === activeSeverity;\\n      const qOk = !query || hay.includes(query);\\n      const show = sevOk && qOk;\\n      tr.classList.toggle('is-hidden', !show);\\n      if (show) visible += 1;\\n    }\\n    if (empty)\\n      empty.classList.toggle('hidden', visible !== 0 || rows.length === 0);\\n  };\\n\\n  for (const chip of chips) {\\n    const select = () => {\\n      activeSeverity = chip.getAttribute('data-filter') || 'all';\\n      for (const c of chips) c.classList.toggle('is-active', c === chip);\\n      apply();\\n    };\\n    chip.addEventListener('click', select);\\n    chip.addEventListener('keydown', (e) => {\\n      if (e.key === 'Enter' || e.key === ' ') {\\n        e.preventDefault();\\n        select();\\n      }\\n    });\\n  }\\n\\n  if (search) {\\n    search.addEventListener('input', () => {\\n      query = search.value.trim().toLowerCase();\\n      apply();\\n    });\\n  }\\n\\n  for (const btn of document.querySelectorAll('[data-copy]')) {\\n    btn.addEventListener('click', async () => {\\n      const value = btn.getAttribute('data-copy') || '';\\n      try {\\n        await navigator.clipboard.writeText(value);\\n        btn.classList.add('copied');\\n        btn.textContent = 'copied';\\n        setTimeout(() => {\\n          btn.classList.remove('copied');\\n          btn.textContent = 'copy';\\n        }, 1200);\\n      } catch {}\\n    });\\n  }\\n\\n  document.addEventListener('keydown', (e) => {\\n    if (\\n      e.target &&\\n      (e.target.tagName === 'INPUT' ||\\n        e.target.tagName === 'TEXTAREA' ||\\n        e.target.tagName === 'SELECT')\\n    )\\n      return;\\n    if (e.key === 'r') {\\n      const link = document.querySelector('[data-refresh]');\\n      if (link) link.click();\\n    }\\n    if (e.key === '/' && search) {\\n      e.preventDefault();\\n      search.focus();\\n    }\\n  });\\n})();\\n\";";
+//#endregion
+//#region \0text:/home/runner/work/elysia-spectral/elysia-spectral/packages/elysia-spectral/src/output/dashboard.css.txt
+var dashboard_css_default = "export default \":root {\\n  color-scheme: dark;\\n  --bg: #17191e;\\n  --fg: #eef0f9;\\n  --muted: #8a93a0;\\n  --line: #262a33;\\n  --surface: #1d2027;\\n  --accent: #ad5dca;\\n  --accent-soft: #2b7eca;\\n  --pass: #23d18b;\\n  --fail: #dc3657;\\n  --warn: #ffc368;\\n  --info: #54b9ff;\\n  --hint: #545864;\\n  --mono:\\n    ui-monospace, SFMono-Regular, \\\"JetBrains Mono\\\", Menlo, Monaco, Consolas,\\n    \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n}\\n\\n[data-theme=\\\"tron\\\"] {\\n  --bg: #06080d;\\n  --fg: #e6f7ff;\\n  --muted: #5d8aa3;\\n  --line: #0e2c3d;\\n  --surface: #0a1320;\\n  --accent: #38f3ff;\\n  --accent-soft: #1ea7ff;\\n  --pass: #7de8ff;\\n  --fail: #ff3c5f;\\n  --warn: #a8f5ff;\\n  --info: #73d8ff;\\n  --hint: #273746;\\n}\\n\\n[data-theme=\\\"808\\\"] {\\n  --bg: #202020;\\n  --fg: #ffffff;\\n  --muted: #9a958a;\\n  --line: #2a2a2a;\\n  --surface: #262626;\\n  --accent: #f8a125;\\n  --accent-soft: #e72e2e;\\n  --pass: #f1f827;\\n  --fail: #e72e2e;\\n  --warn: #f8a125;\\n  --info: #f1f827;\\n  --hint: #404040;\\n}\\n\\n* {\\n  box-sizing: border-box;\\n}\\n\\nbody {\\n  margin: 0;\\n  font-family: var(--mono);\\n  font-feature-settings:\\n    \\\"calt\\\" 0,\\n    \\\"liga\\\" 0,\\n    \\\"ss01\\\";\\n  background: var(--bg);\\n  color: var(--fg);\\n  font-size: 13px;\\n  line-height: 1.5;\\n}\\n\\nheader {\\n  position: sticky;\\n  top: 0;\\n  z-index: 10;\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  padding: 16px 24px;\\n  border-bottom: 1px solid var(--line);\\n  background: color-mix(in srgb, var(--bg) 88%, transparent);\\n  backdrop-filter: blur(8px);\\n  overflow: hidden;\\n}\\n\\nheader::before {\\n  content: \\\"\\\";\\n  position: absolute;\\n  inset: 0;\\n  z-index: 0;\\n  background:\\n    radial-gradient(900px 220px at 12% -30%, var(--accent), transparent 60%),\\n    radial-gradient(\\n      700px 200px at 88% -20%,\\n      var(--accent-soft),\\n      transparent 65%\\n    );\\n  opacity: 0.45;\\n  pointer-events: none;\\n}\\n\\nheader > * {\\n  position: relative;\\n  z-index: 1;\\n}\\n\\n.brand {\\n  display: flex;\\n  align-items: center;\\n  gap: 10px;\\n}\\n\\n.dot {\\n  width: 8px;\\n  height: 8px;\\n  border-radius: 50%;\\n  background: var(--accent);\\n  box-shadow:\\n    0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent),\\n    0 0 18px color-mix(in srgb, var(--accent) 60%, transparent);\\n}\\n\\nh1 {\\n  margin: 0;\\n  font-size: 13px;\\n  font-weight: 600;\\n  letter-spacing: 0.02em;\\n  text-transform: uppercase;\\n}\\n\\n.actions {\\n  display: flex;\\n  align-items: center;\\n  gap: 10px;\\n}\\n\\n.visually-hidden {\\n  position: absolute;\\n  width: 1px;\\n  height: 1px;\\n  overflow: hidden;\\n  clip: rect(0 0 0 0);\\n}\\n\\n.theme-switch {\\n  display: inline-flex;\\n  align-items: center;\\n  gap: 6px;\\n}\\n\\n.theme-label {\\n  font-size: 10px;\\n  text-transform: uppercase;\\n  letter-spacing: 0.08em;\\n  color: var(--muted);\\n}\\n\\n.theme-switch select {\\n  font-family: var(--mono);\\n  font-size: 11px;\\n  padding: 5px 24px 5px 10px;\\n  border: 1px solid var(--line);\\n  border-radius: 6px;\\n  background: var(--surface)\\n    url(\\\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%238a93a0' stroke-width='1.4' d='M1 1l4 4 4-4'/></svg>\\\")\\n    no-repeat right 8px center;\\n  color: var(--fg);\\n  -webkit-appearance: none;\\n  appearance: none;\\n  cursor: pointer;\\n}\\n.theme-switch select:hover {\\n  border-color: var(--muted);\\n}\\n.theme-switch select:focus {\\n  outline: none;\\n  border-color: var(--accent);\\n}\\n\\nkbd {\\n  font-family: var(--mono);\\n  font-size: 11px;\\n  padding: 2px 6px;\\n  border: 1px solid var(--line);\\n  border-bottom-width: 2px;\\n  border-radius: 4px;\\n  color: var(--muted);\\n  background: var(--surface);\\n}\\n\\n.refresh {\\n  color: var(--fg);\\n  text-decoration: none;\\n  padding: 6px 12px;\\n  border: 1px solid var(--line);\\n  border-radius: 6px;\\n  font-size: 12px;\\n  font-family: var(--mono);\\n  background: var(--surface);\\n  transition:\\n    border-color 0.15s,\\n    transform 0.05s;\\n}\\n.refresh:hover {\\n  border-color: var(--accent);\\n}\\n.refresh:active {\\n  transform: translateY(1px);\\n}\\n\\nmain {\\n  padding: 24px;\\n  max-width: 1100px;\\n  margin: 0 auto;\\n}\\n\\n.banner {\\n  padding: 12px 16px;\\n  border-radius: 8px;\\n  margin-bottom: 16px;\\n  font-size: 13px;\\n}\\n.banner-pass {\\n  background: color-mix(in srgb, var(--pass) 14%, transparent);\\n  border: 1px solid color-mix(in srgb, var(--pass) 60%, var(--line));\\n}\\n.banner-fail {\\n  background: color-mix(in srgb, var(--fail) 14%, transparent);\\n  border: 1px solid color-mix(in srgb, var(--fail) 60%, var(--line));\\n}\\n.tagline {\\n  display: block;\\n  margin-top: 6px;\\n  font-weight: 700;\\n  letter-spacing: 0.12em;\\n  color: var(--pass);\\n  text-transform: uppercase;\\n  font-size: 11px;\\n}\\n\\n.meta {\\n  display: grid;\\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\\n  gap: 8px;\\n  margin: 0 0 16px;\\n  padding: 0;\\n}\\n.meta div {\\n  background: var(--surface);\\n  border: 1px solid var(--line);\\n  border-radius: 6px;\\n  padding: 8px 12px;\\n}\\n.meta dt {\\n  color: var(--muted);\\n  font-size: 10px;\\n  text-transform: uppercase;\\n  letter-spacing: 0.06em;\\n  margin-bottom: 4px;\\n}\\n.meta dd {\\n  margin: 0;\\n  font-size: 12px;\\n}\\n.muted-line {\\n  display: block;\\n  color: var(--muted);\\n  font-size: 11px;\\n  margin-top: 2px;\\n}\\n\\n.summary {\\n  list-style: none;\\n  padding: 0;\\n  margin: 0 0 24px;\\n  display: flex;\\n  gap: 6px;\\n  flex-wrap: wrap;\\n}\\n.summary li {\\n  padding: 6px 12px;\\n  border: 1px solid var(--line);\\n  border-radius: 999px;\\n  font-size: 12px;\\n  color: var(--muted);\\n  cursor: pointer;\\n  user-select: none;\\n  transition:\\n    border-color 0.12s,\\n    background 0.12s;\\n}\\n.summary li:hover {\\n  border-color: var(--muted);\\n}\\n.summary li:focus {\\n  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);\\n  outline-offset: 2px;\\n}\\n.summary li.is-active {\\n  background: color-mix(in srgb, var(--accent) 14%, transparent);\\n  border-color: var(--accent);\\n  color: var(--fg);\\n}\\n.summary li span {\\n  color: var(--fg);\\n  font-weight: 600;\\n  margin-right: 6px;\\n}\\n.summary .sev-error span {\\n  color: var(--fail);\\n}\\n.summary .sev-warn span {\\n  color: var(--warn);\\n}\\n.summary .sev-info span {\\n  color: var(--info);\\n}\\n\\nsection {\\n  margin-top: 24px;\\n}\\nh2 {\\n  font-size: 11px;\\n  text-transform: uppercase;\\n  letter-spacing: 0.06em;\\n  color: var(--muted);\\n  margin: 0 0 12px;\\n  font-weight: 600;\\n}\\n\\n.findings-head {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  gap: 12px;\\n  margin-bottom: 8px;\\n}\\n.findings-head h2 {\\n  margin: 0;\\n}\\n\\n[data-search] {\\n  font-family: var(--mono);\\n  font-size: 12px;\\n  padding: 6px 10px;\\n  min-width: 240px;\\n  background: var(--surface);\\n  color: var(--fg);\\n  border: 1px solid var(--line);\\n  border-radius: 6px;\\n}\\n[data-search]:focus {\\n  outline: none;\\n  border-color: var(--accent);\\n}\\n\\n.artifacts {\\n  list-style: none;\\n  padding: 0;\\n  margin: 0;\\n}\\n.artifacts li {\\n  display: flex;\\n  align-items: center;\\n  gap: 12px;\\n  padding: 6px 0;\\n  border-bottom: 1px solid var(--line);\\n  font-size: 12px;\\n}\\n.artifacts code {\\n  color: var(--muted);\\n  min-width: 160px;\\n}\\n.artifacts .path {\\n  flex: 1;\\n  word-break: break-all;\\n}\\n\\n.copy {\\n  font-family: var(--mono);\\n  font-size: 11px;\\n  padding: 2px 8px;\\n  border: 1px solid var(--line);\\n  background: var(--surface);\\n  color: var(--muted);\\n  border-radius: 4px;\\n  cursor: pointer;\\n}\\n.copy:hover {\\n  color: var(--fg);\\n  border-color: var(--muted);\\n}\\n.copy.copied {\\n  color: var(--pass);\\n  border-color: var(--pass);\\n}\\n\\ntable {\\n  width: 100%;\\n  border-collapse: collapse;\\n  font-size: 12px;\\n}\\nth,\\ntd {\\n  text-align: left;\\n  padding: 8px 12px;\\n  border-bottom: 1px solid var(--line);\\n  vertical-align: top;\\n}\\nth {\\n  color: var(--muted);\\n  font-weight: 500;\\n  font-size: 10px;\\n  text-transform: uppercase;\\n  letter-spacing: 0.06em;\\n}\\ntbody tr:hover {\\n  background: color-mix(in srgb, var(--fg) 4%, transparent);\\n}\\ntr.is-hidden {\\n  display: none;\\n}\\n\\n.badge {\\n  display: inline-block;\\n  padding: 2px 8px;\\n  border-radius: 4px;\\n  font-size: 10px;\\n  text-transform: uppercase;\\n  letter-spacing: 0.06em;\\n  font-family: var(--mono);\\n}\\n.sev-error .badge {\\n  background: color-mix(in srgb, var(--fail) 22%, transparent);\\n  color: var(--fail);\\n}\\n.sev-warn .badge {\\n  background: color-mix(in srgb, var(--warn) 22%, transparent);\\n  color: var(--warn);\\n}\\n.sev-info .badge {\\n  background: color-mix(in srgb, var(--info) 22%, transparent);\\n  color: var(--info);\\n}\\n.sev-hint .badge {\\n  background: color-mix(in srgb, var(--hint) 22%, transparent);\\n  color: var(--hint);\\n}\\n\\n.recommendation {\\n  margin: 4px 0 0;\\n  color: var(--muted);\\n  font-size: 11px;\\n}\\n.pointer {\\n  display: block;\\n  margin-top: 4px;\\n  color: var(--muted);\\n  font-size: 11px;\\n}\\n.empty {\\n  color: var(--muted);\\n  font-size: 12px;\\n}\\n.hidden {\\n  display: none;\\n}\\n\";";
+//#endregion
 //#region src/output/dashboard.ts
 const renderDashboard = (input) => {
 	const { result, threshold, cached, error, refreshPath } = input;
@@ -10,7 +16,7 @@ const renderDashboard = (input) => {
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <title>Elysia Spectral Lint Dashboard</title>
-<style>${styles}</style>
+<style>${dashboard_css_default}</style>
 </head>
 <body>
 <header>
@@ -19,12 +25,20 @@ const renderDashboard = (input) => {
     <h1>Elysia Spectral Lint</h1>
   </div>
   <div class="actions">
+    <label class="theme-switch" title="Switch dashboard theme">
+      <span class="theme-label">Theme</span>
+      <select data-theme-switcher aria-label="Dashboard theme">
+        <option value="astro">Astro Houston</option>
+        <option value="tron">Tron Legacy</option>
+        <option value="808">Detroit 808</option>
+      </select>
+    </label>
     <kbd title="Press r to re-run">r</kbd>
     <a class="refresh" href="${`${escapeAttr(refreshPath)}?fresh=1`}" data-refresh>Re-run</a>
   </div>
 </header>
 <main>${body}</main>
-<script>${script}<\/script>
+<script>${dashboard_client_js_default}<\/script>
 </body>
 </html>`;
 };
@@ -82,130 +96,6 @@ const renderFindings = (findings) => {
 };
 const escapeText = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 const escapeAttr = escapeText;
-const styles = `
-:root { color-scheme: light dark; --bg:#0b0d10; --fg:#e6e6e6; --muted:#8a93a0; --line:#1f242b; --surface:#11151a; --pass:#3ddc97; --fail:#ff5d5d; --warn:#f5a623; --info:#5dade2; --hint:#bdc3c7; --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
-@media (prefers-color-scheme: light) { :root { --bg:#fafafa; --fg:#1a1a1a; --muted:#6b7380; --line:#e3e6eb; --surface:#ffffff; } }
-* { box-sizing: border-box; }
-body { margin:0; font-family: var(--mono); font-feature-settings: "calt" 0, "liga" 0, "ss01"; background:var(--bg); color:var(--fg); font-size:13px; line-height:1.5; }
-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:12px 24px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
-.brand { display:flex; align-items:center; gap:10px; }
-.dot { width:8px; height:8px; border-radius:50%; background:var(--pass); box-shadow:0 0 0 3px color-mix(in srgb, var(--pass) 25%, transparent); }
-h1 { margin:0; font-size:13px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
-.actions { display:flex; align-items:center; gap:10px; }
-kbd { font-family:var(--mono); font-size:11px; padding:2px 6px; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; color:var(--muted); background:var(--surface); }
-.refresh { color:var(--fg); text-decoration:none; padding:6px 12px; border:1px solid var(--line); border-radius:6px; font-size:12px; font-family:var(--mono); background:var(--surface); transition:border-color .15s, transform .05s; }
-.refresh:hover { border-color:var(--muted); }
-.refresh:active { transform: translateY(1px); }
-main { padding:24px; max-width:1100px; margin:0 auto; }
-.banner { padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:13px; }
-.banner-pass { background: color-mix(in srgb, var(--pass) 14%, transparent); border:1px solid color-mix(in srgb, var(--pass) 60%, var(--line)); }
-.banner-fail { background: color-mix(in srgb, var(--fail) 14%, transparent); border:1px solid color-mix(in srgb, var(--fail) 60%, var(--line)); }
-.tagline { display:block; margin-top:6px; font-weight:700; letter-spacing:.12em; color:var(--pass); text-transform:uppercase; font-size:11px; }
-.meta { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:8px; margin:0 0 16px; padding:0; }
-.meta div { background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:8px 12px; }
-.meta dt { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
-.meta dd { margin:0; font-size:12px; }
-.muted-line { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
-.summary { list-style:none; padding:0; margin:0 0 24px; display:flex; gap:6px; flex-wrap:wrap; }
-.summary li { padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted); cursor:pointer; user-select:none; transition:border-color .12s, background .12s; }
-.summary li:hover { border-color:var(--muted); }
-.summary li:focus { outline:2px solid color-mix(in srgb, var(--info) 60%, transparent); outline-offset:2px; }
-.summary li.is-active { background: color-mix(in srgb, var(--fg) 8%, transparent); border-color:var(--muted); color:var(--fg); }
-.summary li span { color:var(--fg); font-weight:600; margin-right:6px; }
-.summary .sev-error span { color:var(--fail); }
-.summary .sev-warn span { color:var(--warn); }
-.summary .sev-info span { color:var(--info); }
-section { margin-top:24px; }
-h2 { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 12px; font-weight:600; }
-.findings-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
-.findings-head h2 { margin:0; }
-[data-search] { font-family:var(--mono); font-size:12px; padding:6px 10px; min-width:240px; background:var(--surface); color:var(--fg); border:1px solid var(--line); border-radius:6px; }
-[data-search]:focus { outline:none; border-color:var(--muted); }
-.artifacts { list-style:none; padding:0; margin:0; }
-.artifacts li { display:flex; align-items:center; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); font-size:12px; }
-.artifacts code { color:var(--muted); min-width:160px; }
-.artifacts .path { flex:1; word-break:break-all; }
-.copy { font-family:var(--mono); font-size:11px; padding:2px 8px; border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:4px; cursor:pointer; }
-.copy:hover { color:var(--fg); border-color:var(--muted); }
-.copy.copied { color:var(--pass); border-color:var(--pass); }
-table { width:100%; border-collapse:collapse; font-size:12px; }
-th, td { text-align:left; padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
-th { color:var(--muted); font-weight:500; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
-tbody tr:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
-tr.is-hidden { display:none; }
-.badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-family:var(--mono); }
-.sev-error .badge { background: color-mix(in srgb, var(--fail) 22%, transparent); color:var(--fail); }
-.sev-warn .badge { background: color-mix(in srgb, var(--warn) 22%, transparent); color:var(--warn); }
-.sev-info .badge { background: color-mix(in srgb, var(--info) 22%, transparent); color:var(--info); }
-.sev-hint .badge { background: color-mix(in srgb, var(--hint) 22%, transparent); color:var(--hint); }
-.recommendation { margin:4px 0 0; color:var(--muted); font-size:11px; }
-.pointer { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
-.empty { color:var(--muted); font-size:12px; }
-.hidden { display:none; }
-`;
-const script = `
-(() => {
-  const rel = (iso) => {
-    const t = Date.parse(iso); if (Number.isNaN(t)) return '';
-    const s = Math.round((Date.now() - t) / 1000);
-    if (s < 60) return s + 's ago';
-    if (s < 3600) return Math.round(s/60) + 'm ago';
-    if (s < 86400) return Math.round(s/3600) + 'h ago';
-    return Math.round(s/86400) + 'd ago';
-  };
-  for (const el of document.querySelectorAll('[data-relative-time]')) {
-    el.textContent = rel(el.getAttribute('data-relative-time'));
-  }
-
-  const rows = Array.from(document.querySelectorAll('[data-findings] tr'));
-  const search = document.querySelector('[data-search]');
-  const empty = document.querySelector('[data-empty-findings]');
-  const chips = Array.from(document.querySelectorAll('[data-filter]'));
-  let activeSeverity = 'all';
-  let query = '';
-
-  const apply = () => {
-    let visible = 0;
-    for (const tr of rows) {
-      const sev = tr.getAttribute('data-severity');
-      const hay = tr.getAttribute('data-haystack') || '';
-      const sevOk = activeSeverity === 'all' || sev === activeSeverity;
-      const qOk = !query || hay.includes(query);
-      const show = sevOk && qOk;
-      tr.classList.toggle('is-hidden', !show);
-      if (show) visible += 1;
-    }
-    if (empty) empty.classList.toggle('hidden', visible !== 0 || rows.length === 0);
-  };
-
-  for (const chip of chips) {
-    const select = () => {
-      activeSeverity = chip.getAttribute('data-filter') || 'all';
-      for (const c of chips) c.classList.toggle('is-active', c === chip);
-      apply();
-    };
-    chip.addEventListener('click', select);
-    chip.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); select(); } });
-  }
-
-  if (search) {
-    search.addEventListener('input', () => { query = search.value.trim().toLowerCase(); apply(); });
-  }
-
-  for (const btn of document.querySelectorAll('[data-copy]')) {
-    btn.addEventListener('click', async () => {
-      const value = btn.getAttribute('data-copy') || '';
-      try { await navigator.clipboard.writeText(value); btn.classList.add('copied'); btn.textContent = 'copied'; setTimeout(() => { btn.classList.remove('copied'); btn.textContent = 'copy'; }, 1200); } catch {}
-    });
-  }
-
-  document.addEventListener('keydown', (e) => {
-    if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA')) return;
-    if (e.key === 'r') { const link = document.querySelector('[data-refresh]'); if (link) link.click(); }
-    if (e.key === '/' && search) { e.preventDefault(); search.focus(); }
-  });
-})();
-`;
 //#endregion
 //#region src/plugin.ts
 const spectralPlugin = (options = {}) => {
@@ -288,7 +178,17 @@ const spectralPlugin = (options = {}) => {
 	}
 	if (options.dashboard) {
 		const dashboardPath = options.dashboard.path ?? "/__openapi/dashboard";
+		const bearerToken = options.dashboard.bearerToken;
 		plugin = plugin.get(dashboardPath, async ({ request, set }) => {
+			if (bearerToken) {
+				const header = request.headers.get("authorization") ?? "";
+				if ((header.startsWith("Bearer ") ? header.slice(7) : "") !== bearerToken) {
+					set.status = 401;
+					set.headers["www-authenticate"] = "Bearer realm=\"elysia-spectral\"";
+					set.headers["content-type"] = "text/plain; charset=utf-8";
+					return "Unauthorized";
+				}
+			}
 			const fresh = new URL(request.url).searchParams.get("fresh") === "1";
 			const threshold = options.failOn ?? "error";
 			const currentApp = hostAppRef.current;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opsydyn/elysia-spectral",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "Thin Elysia plugin that lints generated OpenAPI documents with Spectral.",
   "packageManager": "bun@1.3.11",
   "publishConfig": {