──────
Build and Push Docker Images / detect-changes (push) Successful in 11s
Build and Push Docker Images / build-auth-api (push) Successful in 1m0s
Build and Push Docker Images / build-employee-api (push) Successful in 1m2s
Build and Push Docker Images / build-transit-api (push) Successful in 1m1s
Build and Push Docker Images / build-error-log-api (push) Successful in 1m5s
Build and Push Docker Images / build-admin-ui (push) Successful in 1m13s
Build and Push Docker Images / build-monitoring-ui (push) Successful in 1m15s
Build and Push Docker Images / deploy-test-node (push) Successful in 3s

### Summary of Changes
  1. Documentation Consolidation:
      • Relocated the docs/ folder and all repository .md files (README.md, DEPLOYMENT.md, DOCKER_README.md,
      DOMAINS_README.md, GETTING_STARTED.md, CI_CD_PORTAINER_GUIDE.md, ADMIN_DEPLOYMENT_SUMMARY.md,
      SECURITY_PRIVATE_FILES.md, handoff.md, azure-project-plan.md, plus service-specific READMEs) into .
      • Updated document links in README.md.
  2. AI Agent Project Map:
      • Created PROJECT_MAP.md in the project root containing complete architecture diagrams, service specs, ports, DB
      schemas, environment variables, and developer workflows.
      • Added PROJECT_MAP.md to .gitignore.
  3. Monitoring UI & Infrastructure Integration:
      • Added monitoring_ui service to docker-compose.yml (port 5175).
      • Configured Gitea workflow docker-build.yml for monitoring_ui builds.
      • Added CORS middleware headers in index.js.
      • Added nginx.conf copy step in Dockerfile.

  ──────
  ### Recommended Commit Message

    docs: consolidate project documentation into monitoring_ui and add agent project map

    - Move all markdown documentation files and docs/ folder into monitoring_ui/docs/
    - Update documentation hub index (monitoring_ui/docs/README.md) with relative paths
    - Generate comprehensive AI agent reference map (PROJECT_MAP.md) in repository root
    - Add PROJECT_MAP.md and monitoring_ui build output/env overrides to .gitignore
    - Integrate monitoring_ui service into docker-compose.yml and Gitea CI workflow
    - Configure CORS handling in employee_api for monitoring dashboard access
    ──────
  ### Alternative Short Commit Message

    refactor(docs): move docs to monitoring_ui and create AI agent PROJECT_MAP.md
This commit is contained in:
Sven laptop
2026-09-20 23:33:55 +02:00
parent f935bbeb8c
commit 635a130f0b
195 changed files with 28309 additions and 957 deletions
+536
View File
@@ -0,0 +1,536 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Command Center | XTransit</title>
<link rel="stylesheet" href="./theme.css" />
</head>
<body>
<div class="preview-root">
<header class="preview-header">
<div class="preview-header__brand">
<span class="preview-header__logo">XT</span>
<span>XTransit Operations</span>
</div>
<div class="preview-header__actions">
<button
class="preview-btn preview-btn--ghost"
aria-label="Search services"
>
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="11" cy="11" r="6.5" stroke-width="1.8"></circle>
<path
d="m16 16 4.5 4.5"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
<span>Search</span>
</button>
<button
class="preview-btn preview-btn--ghost"
aria-label="View notifications"
>
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9Z"
stroke-width="1.8"
stroke-linejoin="round"
></path>
<path
d="M10 21h4"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
<span class="preview-badge preview-badge--warning">2</span>
</button>
<span class="preview-avatar" aria-label="Signed in as Ava Morgan"
>AM</span
>
</div>
</header>
<nav class="preview-nav" aria-label="Primary navigation">
<a class="preview-nav__link preview-nav__link--active" href="#">
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<rect
x="3.5"
y="3.5"
width="7"
height="7"
rx="1"
stroke-width="1.8"
></rect>
<rect
x="13.5"
y="3.5"
width="7"
height="7"
rx="1"
stroke-width="1.8"
></rect>
<rect
x="3.5"
y="13.5"
width="7"
height="7"
rx="1"
stroke-width="1.8"
></rect>
<rect
x="13.5"
y="13.5"
width="7"
height="7"
rx="1"
stroke-width="1.8"
></rect>
</svg>
<span>Command Center</span>
</a>
<a class="preview-nav__link" href="./service-catalog.html">
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M4 6.5h16M4 12h16M4 17.5h16"
stroke-width="1.8"
stroke-linecap="round"
></path>
<circle
cx="7"
cy="6.5"
r="1.4"
fill="currentColor"
stroke="none"
></circle>
<circle
cx="12"
cy="12"
r="1.4"
fill="currentColor"
stroke="none"
></circle>
<circle
cx="17"
cy="17.5"
r="1.4"
fill="currentColor"
stroke="none"
></circle>
</svg>
<span>Service Catalog</span>
</a>
<a class="preview-nav__link" href="./request-lab.html">
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M5 4.5h14v15H5z"
stroke-width="1.8"
stroke-linejoin="round"
></path>
<path
d="M8 8h8M8 12h8M8 16h5"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
<span>Request Lab</span>
</a>
<a class="preview-nav__link" href="./incident-log.html">
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M12 3.5 20 7v5c0 4.2-3.2 7.4-8 8.8C7.2 19.4 4 16.2 4 12V7l8-3.5Z"
stroke-width="1.8"
stroke-linejoin="round"
></path>
<path
d="M12 8v4M12 15.5v.1"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
<span>Incident Log</span>
</a>
</nav>
<div class="preview-shell">
<aside class="preview-sidebar" aria-label="Command center sections">
<div class="preview-sidebar__section">Monitor</div>
<a
class="preview-sidebar__item preview-sidebar__item--active"
href="#"
>
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M4 17.5h16M6.5 14V9M12 14V5M17.5 14v-3"
stroke-width="1.8"
stroke-linecap="round"
></path>
<path
d="M4 19.5h16"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
<span>Overview</span>
</a>
<a class="preview-sidebar__item" href="./service-catalog.html">
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<rect
x="4"
y="4"
width="6"
height="6"
rx="1"
stroke-width="1.8"
></rect>
<rect
x="14"
y="4"
width="6"
height="6"
rx="1"
stroke-width="1.8"
></rect>
<rect
x="4"
y="14"
width="6"
height="6"
rx="1"
stroke-width="1.8"
></rect>
<rect
x="14"
y="14"
width="6"
height="6"
rx="1"
stroke-width="1.8"
></rect>
</svg>
<span>Services</span>
</a>
<a class="preview-sidebar__item" href="./incident-log.html">
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M5 4.5h14v15H5z"
stroke-width="1.8"
stroke-linejoin="round"
></path>
<path
d="M8 8h8M8 12h6M8 16h4"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
<span>Activity</span>
</a>
<div class="preview-sidebar__section">Workspace</div>
<a class="preview-sidebar__item" href="./request-lab.html">
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="m8 8-4 4 4 4M16 8l4 4-4 4M14 5l-4 14"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
<span>Request Lab</span>
</a>
<a class="preview-sidebar__item" href="./incident-log.html">
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M12 4.5v8l5 3"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<circle cx="12" cy="12" r="8.5" stroke-width="1.8"></circle>
</svg>
<span>Incident Log</span>
</a>
</aside>
<main class="preview-main">
<section class="preview-hero" aria-labelledby="page-title">
<div class="preview-hero__mesh"></div>
<div class="preview-hero__eyebrow">Operations / Live overview</div>
<h1 class="preview-hero__title" id="page-title">Command Center</h1>
<p class="preview-hero__subtitle">
Current health, polling freshness, and important service signals
across the XTransit platform.
</p>
<div class="preview-hero__actions">
<button class="preview-btn preview-btn--primary">
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 4v8l4 2"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3"
stroke-width="1.8"
stroke-linecap="round"
></path>
<path
d="M17 4h3v3"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
<span>Run health check</span>
</button>
<span class="preview-badge preview-badge--success"
><span class="preview-badge__dot"></span>Polling every 60
seconds</span
>
</div>
</section>
<section class="preview-kpi-row" aria-label="Platform health summary">
<article class="preview-kpi">
<svg
class="preview-icon preview-icon--lg"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 19.5h16M6.5 16V8M12 16V4.5M17.5 16v-5"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
<span class="preview-kpi__label">Monitored services</span>
<strong class="preview-kpi__value">4</strong>
<span class="preview-kpi__delta">Across APIs and admin UI</span>
</article>
<article class="preview-kpi">
<svg
class="preview-icon preview-icon--lg"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="m5 12 4.5 4.5L19 7"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<circle cx="12" cy="12" r="9" stroke-width="1.8"></circle>
</svg>
<span class="preview-kpi__label">Operational</span>
<strong class="preview-kpi__value">3</strong>
<span class="preview-kpi__delta preview-kpi__delta--up"
>75% of monitored services</span
>
</article>
<article class="preview-kpi">
<svg
class="preview-icon preview-icon--lg"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 4.5 20 19H4L12 4.5Z"
stroke-width="1.8"
stroke-linejoin="round"
></path>
<path
d="M12 10v4M12 16.5v.1"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
<span class="preview-kpi__label">Degraded</span>
<strong class="preview-kpi__value">1</strong>
<span class="preview-kpi__delta"
>Error Log API needs attention</span
>
</article>
<article class="preview-kpi">
<svg
class="preview-icon preview-icon--lg"
viewBox="0 0 24 24"
aria-hidden="true"
>
<circle cx="12" cy="12" r="8.5" stroke-width="1.8"></circle>
<path
d="M12 7v5l3.5 2"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
<span class="preview-kpi__label">Last poll</span>
<strong class="preview-kpi__value">18 sec ago</strong>
<span class="preview-kpi__delta">Next poll in 42 seconds</span>
</article>
</section>
<section class="preview-two-column" aria-label="Service signals">
<div>
<div class="preview-section-title">
<h2 class="preview-section-title__h">
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 12h4l2-7 4 14 2-7h4"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
Service health
</h2>
<span class="preview-section-title__hint"
>Live response checks</span
>
</div>
<div class="preview-table-wrap">
<table class="preview-table">
<thead>
<tr>
<th>Service</th>
<th>Latency</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>Transit API</strong><br /><span
class="preview-section-title__hint"
>/health</span
>
</td>
<td>184 ms</td>
<td>
<span class="preview-badge preview-badge--success"
><span class="preview-badge__dot"></span
>Operational</span
>
</td>
</tr>
<tr>
<td>
<strong>Employee API</strong><br /><span
class="preview-section-title__hint"
>/health</span
>
</td>
<td>96 ms</td>
<td>
<span class="preview-badge preview-badge--success"
><span class="preview-badge__dot"></span
>Operational</span
>
</td>
</tr>
<tr>
<td>
<strong>Error Log API</strong><br /><span
class="preview-section-title__hint"
>/health</span
>
</td>
<td>121 ms</td>
<td>
<span class="preview-badge preview-badge--warning"
><span class="preview-badge__dot"></span
>Degraded</span
>
</td>
</tr>
<tr>
<td>
<strong>Admin UI</strong><br /><span
class="preview-section-title__hint"
>http://localhost:5173</span
>
</td>
<td>42 ms</td>
<td>
<span class="preview-badge preview-badge--success"
><span class="preview-badge__dot"></span
>Operational</span
>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div class="preview-section-title">
<h2 class="preview-section-title__h">
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4.5 5.5h15v13h-15z"
stroke-width="1.8"
stroke-linejoin="round"
></path>
<path
d="M8 9h8M8 13h5"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
Recent poll activity
</h2>
<span class="preview-section-title__hint">Updating</span>
</div>
<div
class="preview-card"
aria-label="Recent poll activity loading"
>
<div class="preview-skeleton preview-skeleton--title"></div>
<div class="preview-skeleton preview-skeleton--line"></div>
<div class="preview-skeleton preview-skeleton--line"></div>
<div class="preview-skeleton preview-skeleton--line"></div>
<div class="preview-skeleton preview-skeleton--block"></div>
</div>
</div>
</section>
<div class="preview-action-bar">
<span class="preview-section-title__hint"
>Signed in as Ava Morgan · Operator access</span
>
<button class="preview-btn preview-btn--secondary">
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M4 12a8 8 0 1 0 2.3-5.7"
stroke-width="1.8"
stroke-linecap="round"
></path>
<path
d="M4 5v5h5"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
<span>Refresh overview</span>
</button>
</div>
</main>
</div>
</div>
</body>
</html>
+479
View File
@@ -0,0 +1,479 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Incident Log | Transit Operations</title>
<link rel="stylesheet" href="./theme.css" />
</head>
<body>
<div class="preview-root">
<header class="preview-header">
<div class="preview-header__brand">
<span class="preview-header__logo">TO</span>
<span>Transit Operations</span>
</div>
<div class="preview-header__actions">
<label class="preview-form__input" aria-label="Search console">
<svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<circle cx="11" cy="11" r="6.5" stroke-width="1.8"></circle>
<path
d="m16 16 5 5"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
<input
type="search"
placeholder="Search console"
aria-label="Search console"
style="
border: 0;
background: transparent;
outline: 0;
font: inherit;
width: 135px;
color: inherit;
"
/>
</label>
<a
class="preview-header__action"
href="#notifications"
aria-label="Notifications"
>
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 21h4"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</a>
<span class="preview-avatar" aria-label="Signed in as Maya Chen"
>MC</span
>
</div>
</header>
<nav class="preview-nav" aria-label="Primary navigation">
<a class="preview-nav__link" href="./command-center.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<rect x="4" y="4" width="6" height="6" stroke-width="1.8"></rect>
<rect x="14" y="4" width="6" height="6" stroke-width="1.8"></rect>
<rect x="4" y="14" width="6" height="6" stroke-width="1.8"></rect>
<rect
x="14"
y="14"
width="6"
height="6"
stroke-width="1.8"
></rect></svg
>Command center</a
>
<a class="preview-nav__link" href="./service-catalog.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 20V5l8-2 8 2v15M4 20h16M8 8h2m4 0h2m-8 4h2m4 0h2m-8 4h2m4 0h2"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Service catalog</a
>
<a class="preview-nav__link" href="./request-lab.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="m8 8-4 4 4 4M16 8l4 4-4 4M14 4l-4 16"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Request lab</a
>
<a
class="preview-nav__link preview-nav__link--active"
href="#"
aria-current="page"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Incident log</a
>
</nav>
<div class="preview-shell">
<aside class="preview-sidebar" aria-label="Incident log navigation">
<div class="preview-sidebar__section">Monitor</div>
<a class="preview-sidebar__item" href="./command-center.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 13h4l2-7 4 12 2-5h4"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Command center</a
>
<a
class="preview-sidebar__item preview-sidebar__item--active"
href="#"
aria-current="page"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Incident log</a
>
<div class="preview-sidebar__section">Services</div>
<a class="preview-sidebar__item" href="./service-catalog.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 20V5l8-2 8 2v15M4 20h16M8 8h2m4 0h2m-8 4h2m4 0h2"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Service catalog</a
>
<a class="preview-sidebar__item" href="./request-lab.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="m8 8-4 4 4 4M16 8l4 4-4 4M14 4l-4 16"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Request lab</a
>
</aside>
<main class="preview-main">
<div class="preview-section-title">
<div>
<div class="preview-card__meta">MONITORING / INCIDENTS</div>
<h1
class="preview-hero__title"
style="color: var(--color-text); margin-top: 4px"
>
Incident log
</h1>
</div>
<a
class="preview-btn preview-btn--primary"
href="#refresh-incidents"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M20 11a8 8 0 1 0 1 4M20 5v6h-6"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Refresh incidents</a
>
</div>
<div
class="preview-action-bar"
style="justify-content: flex-start; padding: 0; border-top: 0"
>
<label class="preview-form__input"
><span class="preview-card__meta">Service</span
><select aria-label="Filter by service">
<option>All services</option>
<option>Auth API</option>
<option>Employee API</option>
<option>Transit API</option>
<option>Error Log API</option>
<option>Admin UI</option>
</select></label
>
<label class="preview-form__input"
><span class="preview-card__meta">Severity</span
><select aria-label="Filter by severity">
<option>All severities</option>
<option>Critical</option>
<option>Error</option>
<option>Warning</option>
<option>Info</option>
</select></label
>
<label class="preview-form__input"
><span class="preview-card__meta">Window</span
><select aria-label="Filter by time window">
<option>Last 24 hours</option>
<option>Last 7 days</option>
<option>Last 30 days</option>
</select></label
>
<span class="preview-card__meta"
>3 incidents in the selected window</span
>
</div>
<div class="preview-tabs" role="tablist" aria-label="Incident views">
<a
class="preview-tabs__tab preview-tabs__tab--active"
href="#all-incidents"
role="tab"
aria-selected="true"
>All incidents</a
>
<a
class="preview-tabs__tab"
href="#delivery-status"
role="tab"
aria-selected="false"
>Delivery status</a
>
</div>
<section id="all-incidents" aria-labelledby="all-incidents-heading">
<div class="preview-section-title">
<h2 class="preview-section-title__h" id="all-incidents-heading">
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
Recent activity
</h2>
<span class="preview-section-title__hint"
>Normalized from five connected services</span
>
</div>
<div class="preview-table-wrap">
<table class="preview-table">
<thead>
<tr>
<th>Time</th>
<th>Service</th>
<th>Code</th>
<th>Message</th>
<th>Severity</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>09:42:18</strong></td>
<td>Error Log API</td>
<td><code>BAD_REQUEST</code></td>
<td>Missing route identifier</td>
<td>
<span class="preview-badge preview-badge--warning"
><span class="preview-badge__dot"></span>Warning</span
>
</td>
</tr>
<tr>
<td><strong>09:37:04</strong></td>
<td>Transit API</td>
<td><code>FORBIDDEN</code></td>
<td>Admin role required</td>
<td>
<span class="preview-badge"
><span class="preview-badge__dot"></span>Info</span
>
</td>
</tr>
<tr>
<td><strong>09:18:51</strong></td>
<td>Employee API</td>
<td><code>INTERNAL_ERROR</code></td>
<td>Employee lookup timed out</td>
<td>
<span class="preview-badge preview-badge--danger"
><span class="preview-badge__dot"></span>Critical</span
>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="preview-card-list" aria-labelledby="severity-heading">
<div class="preview-section-title">
<h2 class="preview-section-title__h" id="severity-heading">
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 3 3 20h18L12 3ZM12 9v5m0 3h.01"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
Severity summary
</h2>
<span class="preview-section-title__hint">Current window</span>
</div>
<div class="preview-card-grid">
<article class="preview-card">
<div class="preview-card__title">
<svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 3 3 20h18L12 3Zm0 6v5m0 3h.01"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
Warning
</div>
<strong class="preview-kpi__value">1</strong>
<p class="preview-card__body">
Requires review before the next dispatch cycle.
</p>
</article>
<article class="preview-card">
<div class="preview-card__title">
<svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<circle cx="12" cy="12" r="8.5" stroke-width="1.8"></circle>
<path
d="M12 8v4l2.5 2"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
Info
</div>
<strong class="preview-kpi__value">1</strong>
<p class="preview-card__body">
Access policy event recorded from Transit API.
</p>
</article>
<article class="preview-card">
<div class="preview-card__title">
<svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 3 3 20h18L12 3Zm0 6v5m0 3h.01"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
Critical
</div>
<strong class="preview-kpi__value">1</strong>
<p class="preview-card__body">
Employee lookup timeout needs immediate attention.
</p>
</article>
</div>
</section>
<section
id="delivery-status"
class="preview-error"
aria-labelledby="delivery-heading"
>
<svg
class="preview-icon preview-icon--lg preview-error__icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 3 3 20h18L12 3Zm0 6v5m0 3h.01"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
<div class="preview-error__body">
<strong class="preview-error__title" id="delivery-heading"
>Error log API delayed</strong
><span class="preview-error__text"
>Last successful pull was 3 minutes ago</span
>
</div>
<a class="preview-btn preview-btn--secondary" href="#retry-delivery"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M20 11a8 8 0 1 0 1 4M20 5v6h-6"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Retry</a
>
</section>
</main>
</div>
</div>
</body>
</html>
+30
View File
@@ -0,0 +1,30 @@
{
"generatedAt": "2026-09-20T00:00:00.000Z",
"previewStatus": "generating",
"pages": [
{
"slug": "command-center",
"title": "Command Center",
"route": "/",
"status": "pending"
},
{
"slug": "service-catalog",
"title": "Service Catalog",
"route": "/services",
"status": "pending"
},
{
"slug": "request-lab",
"title": "Request Lab",
"route": "/requests",
"status": "pending"
},
{
"slug": "incident-log",
"title": "Incident Log",
"route": "/incidents",
"status": "pending"
}
]
}
+495
View File
@@ -0,0 +1,495 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Request Lab | XTransit Operations</title>
<link rel="stylesheet" href="./theme.css" />
</head>
<body>
<div class="preview-root">
<header class="preview-header">
<div class="preview-header__brand">
<span class="preview-header__logo" aria-hidden="true">XT</span>
<span>XTransit Operations</span>
</div>
<div class="preview-header__actions">
<label class="preview-header__search" aria-label="Search operations">
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="11" cy="11" r="6.5" stroke-width="1.8"></circle>
<path
d="m16 16 4.2 4.2"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
<input
class="preview-form__input"
type="search"
placeholder="Search operations"
value=""
/>
</label>
<a class="preview-header__action" href="#" aria-label="Notifications">
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</a>
<span class="preview-avatar" aria-label="Signed in as Maya Chen"
>MC</span
>
</div>
</header>
<nav class="preview-nav" aria-label="Primary navigation">
<a class="preview-nav__link" href="./command-center.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<rect
x="4"
y="4"
width="6"
height="6"
rx="1"
stroke-width="1.8"
></rect>
<rect
x="14"
y="4"
width="6"
height="6"
rx="1"
stroke-width="1.8"
></rect>
<rect
x="4"
y="14"
width="6"
height="6"
rx="1"
stroke-width="1.8"
></rect>
<rect
x="14"
y="14"
width="6"
height="6"
rx="1"
stroke-width="1.8"
></rect></svg
>Command Center</a
>
<a class="preview-nav__link" href="./service-catalog.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M5 5h14v14H5zM8 9h8M8 13h5"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Service Catalog</a
>
<a
class="preview-nav__link preview-nav__link--active"
href="#"
aria-current="page"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 6h16M4 12h10M4 18h16"
stroke-width="1.8"
stroke-linecap="round"
></path>
<circle cx="17" cy="12" r="2" stroke-width="1.8"></circle></svg
>Request Lab</a
>
<a class="preview-nav__link" href="./incident-log.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 4 21 20H3L12 4Z"
stroke-width="1.8"
stroke-linejoin="round"
></path>
<path
d="M12 9v5M12 17h.01"
stroke-width="1.8"
stroke-linecap="round"
></path></svg
>Incident Log</a
>
</nav>
<div class="preview-shell">
<aside class="preview-sidebar" aria-label="Operations sections">
<div class="preview-sidebar__section">Workspace</div>
<a class="preview-sidebar__item" href="./command-center.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 13h6V4H4v9ZM14 20h6v-9h-6v9ZM14 8h6V4h-6v4ZM4 20h6v-3H4v3Z"
stroke-width="1.8"
stroke-linejoin="round"
></path></svg
>Command Center</a
>
<a class="preview-sidebar__item" href="./service-catalog.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M7 4h10v4H7zM4 10h16v10H4zM8 14h8M8 17h5"
stroke-width="1.8"
stroke-linejoin="round"
stroke-linecap="round"
></path></svg
>Service Catalog</a
>
<a
class="preview-sidebar__item preview-sidebar__item--active"
href="#"
aria-current="page"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M5 5h14v14H5zM8 9h8M8 13h5M8 17h8"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Request Lab</a
>
<a class="preview-sidebar__item" href="./incident-log.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 4 21 20H3L12 4Z"
stroke-width="1.8"
stroke-linejoin="round"
></path>
<path
d="M12 9v5M12 17h.01"
stroke-width="1.8"
stroke-linecap="round"
></path></svg
>Incident Log</a
>
<div class="preview-sidebar__section">Tools</div>
<a class="preview-sidebar__item" href="#"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"
stroke-width="1.8"
stroke-linecap="round"
></path>
<circle cx="12" cy="12" r="3.5" stroke-width="1.8"></circle></svg
>Environment</a
>
</aside>
<main class="preview-main">
<div class="preview-section-title">
<div>
<div class="preview-section-title__h">
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 5h16v14H4zM8 9h8M8 13h5"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
Request Lab
</div>
<div class="preview-section-title__hint">
Run a bounded request against an approved upstream route and
inspect timing.
</div>
</div>
<span class="preview-badge"
><span class="preview-badge__dot"></span>Authenticated
session</span
>
</div>
<div class="preview-split">
<form class="preview-form" aria-label="Request builder">
<div class="preview-section-title">
<div class="preview-section-title__h">
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M5 6h14M5 12h9M5 18h14"
stroke-width="1.8"
stroke-linecap="round"
></path>
<circle cx="17" cy="12" r="2" stroke-width="1.8"></circle>
</svg>
Request builder
</div>
<span class="preview-section-title__hint"
>Allowlisted routes only</span
>
</div>
<div class="preview-form__field">
<label class="preview-form__label" for="preset">Preset</label>
<select class="preview-form__select" id="preset">
<option>
Transit API GET /schedules/overview Schedule summary
</option>
<option>Transit API GET /admin/drivers Driver roster</option>
<option>Employee API GET /health Service health</option>
</select>
</div>
<div class="preview-two-column">
<div class="preview-form__field">
<label class="preview-form__label" for="service"
>Service</label
>
<select class="preview-form__select" id="service">
<option>Transit API</option>
<option>Employee API</option>
<option>Auth API</option>
</select>
</div>
<div class="preview-form__field">
<label class="preview-form__label" for="method">Method</label>
<select class="preview-form__select" id="method">
<option>GET</option>
<option>POST</option>
</select>
</div>
</div>
<div class="preview-form__field">
<label class="preview-form__label" for="path">Path</label>
<input
class="preview-form__input"
id="path"
type="text"
value="/schedules/overview"
/>
</div>
<div class="preview-two-column">
<div class="preview-form__field">
<label class="preview-form__label" for="timeout"
>Timeout</label
>
<input
class="preview-form__input"
id="timeout"
type="number"
value="5000"
/>
<span class="preview-form__hint">Milliseconds</span>
</div>
<div class="preview-form__field">
<label class="preview-form__label" for="query"
>Query fields</label
>
<input
class="preview-form__input"
id="query"
type="text"
value="date=2026-09-20"
/>
</div>
</div>
<div class="preview-form__field">
<label class="preview-form__label" for="body">Body</label>
<textarea
class="preview-form__textarea"
id="body"
placeholder="No request body for this GET route"
></textarea>
<span class="preview-form__hint"
>Safe limit: 10 requests per minute, 5-second timeout.</span
>
</div>
<section class="preview-error" aria-label="Request response">
<svg
class="preview-icon preview-icon--lg preview-error__icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 4 21 20H3L12 4Z"
stroke-width="1.8"
stroke-linejoin="round"
></path>
<path
d="M12 9v5M12 17h.01"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
<div class="preview-error__body">
<div class="preview-error__title">Request blocked</div>
<div class="preview-error__text">
Admin role required for /admin/drivers
</div>
<button
class="preview-btn preview-btn--secondary"
type="button"
>
Retry request
</button>
</div>
</section>
</form>
<section class="preview-table-wrap" aria-labelledby="history-title">
<div
class="preview-section-title"
style="padding: 20px 20px 12px"
>
<div class="preview-section-title__h" id="history-title">
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 5h16v15H4zM8 9h8M8 13h5M8 17h8"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
Request history
</div>
<span class="preview-section-title__hint"
>Today, 09:00–12:00 UTC</span
>
</div>
<table class="preview-table">
<thead>
<tr>
<th>Request</th>
<th>Status</th>
<th>Duration</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>GET</strong> /schedules/overview</td>
<td>
<span class="preview-badge preview-badge--success"
>200 OK</span
>
</td>
<td>214 ms</td>
<td>11:42:18</td>
</tr>
<tr>
<td><strong>GET</strong> /admin/drivers</td>
<td>
<span class="preview-badge preview-badge--danger"
>403</span
>
</td>
<td>88 ms</td>
<td>11:36:02</td>
</tr>
<tr>
<td><strong>GET</strong> /health</td>
<td>
<span class="preview-badge preview-badge--success"
>200 OK</span
>
</td>
<td>42 ms</td>
<td>11:20:44</td>
</tr>
<tr>
<td><strong>GET</strong> /schedules/overview</td>
<td>
<span class="preview-badge preview-badge--success"
>200 OK</span
>
</td>
<td>197 ms</td>
<td>10:58:09</td>
</tr>
<tr>
<td><strong>GET</strong> /admin/drivers</td>
<td>
<span class="preview-badge preview-badge--danger"
>403</span
>
</td>
<td>91 ms</td>
<td>10:41:27</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="preview-action-bar">
<span class="preview-form__hint"
>Requests are logged to the operations audit trail.</span
>
<button class="preview-btn preview-btn--secondary" type="button">
Clear
</button>
<button class="preview-btn preview-btn--primary" type="submit">
<svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="m5 12 5 5L20 7"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Run request
</button>
</div>
</main>
</div>
</div>
</body>
</html>
+608
View File
@@ -0,0 +1,608 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Service Catalog | Transit Operations</title>
<link rel="stylesheet" href="./theme.css" />
</head>
<body>
<div class="preview-root">
<header class="preview-header">
<div class="preview-header__brand">
<div class="preview-header__logo" aria-hidden="true">TO</div>
<span>Transit Operations</span>
</div>
<div class="preview-header__actions">
<label
class="preview-form__input"
style="
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
min-width: 220px;
"
aria-label="Search services"
>
<svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<circle cx="11" cy="11" r="6.5" stroke-width="1.8"></circle>
<path
d="m16 16 4.5 4.5"
stroke-width="1.8"
stroke-linecap="round"
></path>
</svg>
<input
type="search"
placeholder="Search services"
style="
border: 0;
outline: 0;
background: transparent;
color: inherit;
width: 100%;
font: inherit;
"
/>
</label>
<a class="preview-header__action" href="#" aria-label="Notifications">
<svg class="preview-icon" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M18 9a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</a>
<div class="preview-avatar" aria-label="Signed in as Olivia Moore">
OM
</div>
</div>
</header>
<nav class="preview-nav" aria-label="Primary navigation">
<a class="preview-nav__link" href="#"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 13h6V4H4v9Zm10 7h6v-9h-6v9ZM4 20h6v-3H4v3Zm10-12h6V4h-6v4Z"
stroke-width="1.7"
stroke-linejoin="round"
></path></svg
>Command Center</a
>
<a
class="preview-nav__link preview-nav__link--active"
href="./service-catalog.html"
aria-current="page"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M5 5h14v14H5zM8 9h8M8 13h5M8 17h3"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Service Catalog</a
>
<a class="preview-nav__link" href="./request-lab.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Request Lab</a
>
<a class="preview-nav__link" href="./incident-log.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="m12 4 8 16H4L12 4Zm0 5v5M12 17v.5"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Incident Log</a
>
</nav>
<div class="preview-shell">
<aside class="preview-sidebar" aria-label="Service catalog navigation">
<div class="preview-sidebar__section">Monitor</div>
<a class="preview-sidebar__item" href="#"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 13h6V4H4v9Zm10 7h6v-9h-6v9ZM4 20h6v-3H4v3Zm10-12h6V4h-6v4Z"
stroke-width="1.7"
stroke-linejoin="round"
></path></svg
>Command Center</a
>
<a
class="preview-sidebar__item preview-sidebar__item--active"
href="./service-catalog.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M5 5h14v14H5zM8 9h8M8 13h5M8 17h3"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Service Catalog</a
>
<a class="preview-sidebar__item" href="./request-lab.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Request Lab</a
>
<a class="preview-sidebar__item" href="./incident-log.html"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="m12 4 8 16H4L12 4Zm0 5v5M12 17v.5"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Incident Log</a
>
<div class="preview-sidebar__section">Workspace</div>
<a class="preview-sidebar__item" href="#"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 6h16M4 12h16M4 18h16"
stroke-width="1.7"
stroke-linecap="round"
></path></svg
>Route mappings</a
>
<a class="preview-sidebar__item" href="#"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 3 4 7v5c0 4.5 3.4 7.6 8 9 4.6-1.4 8-4.5 8-9V7l-8-4Zm0 5v4m0 4v.5"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Access policies</a
>
</aside>
<main class="preview-main">
<div class="preview-section-title">
<div>
<div
class="preview-section-title__h"
style="display: flex; align-items: center; gap: 8px"
>
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M6 4h12v16H6zM9 8h6M9 12h6M9 16h3"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Service Catalog
</div>
<p class="preview-card__body">
Inspect upstream capabilities and representative route coverage
across the transit platform.
</p>
</div>
<span class="preview-badge preview-badge--success"
><span class="preview-badge__dot"></span>5 services
monitored</span
>
</div>
<div class="preview-tabs" role="tablist" aria-label="Catalog views">
<a
class="preview-tabs__tab preview-tabs__tab--active"
href="#catalog"
role="tab"
aria-selected="true"
>Catalog</a
>
<a
class="preview-tabs__tab"
href="#unmapped"
role="tab"
aria-selected="false"
>Unmapped routes <span class="preview-badge">0</span></a
>
</div>
<section id="catalog" aria-label="Service catalog">
<div class="preview-section-title" style="margin-bottom: 12px">
<h2
class="preview-section-title__h"
style="display: flex; align-items: center; gap: 8px"
>
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 6h16v12H4zM8 10h8M8 14h5"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Monitored services
</h2>
<span class="preview-section-title__hint"
>Last inventory sync 09:42 UTC</span
>
</div>
<div class="preview-card-list">
<article class="preview-card">
<div class="preview-section-title">
<h3
class="preview-card__title"
style="display: flex; align-items: center; gap: 8px"
>
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M5 5h14v14H5zM8 9h8M8 13h5M8 17h3"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Auth API
</h3>
<span class="preview-badge preview-badge--success"
>Healthy</span
>
</div>
<p class="preview-card__body">
Identity and session access for operations staff.
</p>
<p class="preview-card__meta">4 endpoints · 2 route mappings</p>
</article>
<article class="preview-card">
<div class="preview-section-title">
<h3
class="preview-card__title"
style="display: flex; align-items: center; gap: 8px"
>
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8a7 7 0 0 1 14 0"
stroke-width="1.7"
stroke-linecap="round"
></path></svg
>Employee API
</h3>
<span class="preview-badge preview-badge--success"
>Healthy</span
>
</div>
<p class="preview-card__body">
Staff records, roles, and workforce administration.
</p>
<p class="preview-card__meta">7 endpoints · 1 route mapping</p>
</article>
<article class="preview-card">
<div class="preview-section-title">
<h3
class="preview-card__title"
style="display: flex; align-items: center; gap: 8px"
>
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 17h16M5 17V8h14v9M8 8V5h8v3M8 20h8"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Transit API
</h3>
<span class="preview-badge preview-badge--success"
>Healthy</span
>
</div>
<p class="preview-card__body">
Routes, stops, fleet data, and daily schedules.
</p>
<p class="preview-card__meta">
18 endpoints · 2 route mappings
</p>
</article>
<article class="preview-card">
<div class="preview-section-title">
<h3
class="preview-card__title"
style="display: flex; align-items: center; gap: 8px"
>
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M5 4h14v16H5zM8 8h8M8 12h5M8 16h3"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Error Log API
</h3>
<span class="preview-badge preview-badge--warning"
>Degraded</span
>
</div>
<p class="preview-card__body">
Centralized application errors and diagnostic events.
</p>
<p class="preview-card__meta">3 endpoints · 1 route mapping</p>
</article>
<article class="preview-card">
<div class="preview-section-title">
<h3
class="preview-card__title"
style="display: flex; align-items: center; gap: 8px"
>
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 5h16v14H4zM8 9h8M8 13h5M8 17h3"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Admin UI
</h3>
<span class="preview-badge preview-badge--success"
>Healthy</span
>
</div>
<p class="preview-card__body">
Signed-in administration workspace for transit teams.
</p>
<p class="preview-card__meta">12 screens · 0 route mappings</p>
</article>
</div>
</section>
<section aria-labelledby="coverage-title">
<div class="preview-section-title" style="margin-bottom: 12px">
<h2
id="coverage-title"
class="preview-section-title__h"
style="display: flex; align-items: center; gap: 8px"
>
<svg
class="preview-icon"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M5 5h14v14H5zM8 9h8M8 13h8M8 17h4"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Representative route coverage
</h2>
<span class="preview-section-title__hint"
>4 mapped capabilities</span
>
</div>
<div class="preview-table-wrap">
<table class="preview-table">
<thead>
<tr>
<th>Service</th>
<th>Capability</th>
<th>Route</th>
<th>Access</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Transit API</strong></td>
<td>Daily schedules</td>
<td><code>/schedule/daily</code></td>
<td><span class="preview-badge">Authenticated</span></td>
<td>
<span class="preview-badge preview-badge--success"
>Mapped</span
>
</td>
</tr>
<tr>
<td><strong>Transit API</strong></td>
<td>Route detail</td>
<td><code>/routes/:routeId</code></td>
<td><span class="preview-badge">Authenticated</span></td>
<td>
<span class="preview-badge preview-badge--success"
>Mapped</span
>
</td>
</tr>
<tr>
<td><strong>Employee API</strong></td>
<td>Create employee</td>
<td><code>/createemployee</code></td>
<td>
<span class="preview-badge preview-badge--warning"
>Admin</span
>
</td>
<td>
<span class="preview-badge preview-badge--success"
>Mapped</span
>
</td>
</tr>
<tr>
<td><strong>Error Log API</strong></td>
<td>Read error log</td>
<td><code>/error_log</code></td>
<td>
<span class="preview-badge preview-badge--warning"
>Admin</span
>
</td>
<td>
<span class="preview-badge preview-badge--success"
>Mapped</span
>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section
id="unmapped"
class="preview-empty"
aria-label="Unmapped routes empty state"
>
<div class="preview-empty__icon">
<svg
class="preview-icon preview-icon--lg"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M4 5h11v14H4zM8 9h3M8 13h3M17 15l4 4M15 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</div>
<div class="preview-empty__title">No unmapped routes</div>
<div class="preview-empty__body">
All discovered upstream capabilities are currently represented in
the catalog.
</div>
<a class="preview-btn preview-btn--primary" href="#"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 5v14M5 12h14"
stroke-width="2"
stroke-linecap="round"
></path></svg
>Add route mapping</a
>
</section>
<div class="preview-action-bar">
<span class="preview-section-title__hint"
>Catalog source: route inventory and service manifests</span
>
<a class="preview-btn preview-btn--secondary" href="#"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 4v11m0 0 4-4m-4 4-4-4M5 19h14"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
></path></svg
>Export catalog</a
>
<a class="preview-btn preview-btn--primary" href="#"
><svg
class="preview-icon preview-icon--sm"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
d="M12 5v14M5 12h14"
stroke-width="2"
stroke-linecap="round"
></path></svg
>Add route mapping</a
>
</div>
</main>
</div>
<footer class="preview-footer">
<span>Transit Operations Console</span
><span>Environment: Production · Read-only catalog</span>
</footer>
</div>
</body>
</html>
+592
View File
@@ -0,0 +1,592 @@
:root {
--color-primary: #155eef;
--color-on-primary: #ffffff;
--color-accent: #f59e0b;
--color-on-accent: #172033;
--color-surface: #f6f8fb;
--color-surface-raised: #ffffff;
--color-surface-sunken: #eef2f7;
--color-text: #172033;
--color-muted: #667085;
--color-border: #d9e0ea;
--color-success: #16803c;
--color-warning: #b54708;
--color-danger: #d92d20;
--font-body: "Segoe UI Variable", "Segoe UI", sans-serif;
--font-heading: var(--font-body);
--text-xs: 11px;
--text-sm: 13px;
--text-base: 14px;
--text-lg: 17px;
--text-xl: 22px;
--text-2xl: 30px;
--text-3xl: 38px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 9999px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 28px;
--space-7: 40px;
--space-8: 56px;
--shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.06);
--shadow-md: 0 5px 16px rgba(23, 32, 51, 0.1);
--shadow-lg: 0 16px 32px rgba(23, 32, 51, 0.14);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
font-family: var(--font-heading);
line-height: 1.2;
margin: 0;
}
a {
color: var(--color-primary);
text-decoration: none;
}
.preview-root {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.preview-shell {
display: flex;
flex: 1;
min-height: 0;
}
.preview-main {
flex: 1;
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-5);
min-width: 0;
}
.preview-split,
.preview-two-column {
display: grid;
gap: var(--space-5);
}
.preview-split {
grid-template-columns: 1fr 2fr;
}
.preview-two-column {
grid-template-columns: 1fr 1fr;
}
.preview-header {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) var(--space-6);
background: var(--color-surface-raised);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
}
.preview-header__brand,
.preview-header__actions {
display: flex;
align-items: center;
gap: var(--space-3);
}
.preview-header__brand {
font-weight: 700;
}
.preview-header__logo {
width: 30px;
height: 30px;
border-radius: var(--radius-sm);
background: var(--color-primary);
color: var(--color-on-primary);
display: grid;
place-items: center;
font-size: var(--text-sm);
}
.preview-header__action {
color: var(--color-muted);
display: inline-flex;
}
.preview-nav {
display: flex;
gap: var(--space-1);
padding: var(--space-2) var(--space-6);
background: var(--color-surface-raised);
border-bottom: 1px solid var(--color-border);
}
.preview-nav__link,
.preview-sidebar__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-muted);
border-radius: var(--radius-sm);
}
.preview-nav__link {
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
}
.preview-nav__link--active,
.preview-sidebar__item--active {
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
font-weight: 600;
}
.preview-sidebar {
width: 220px;
flex-shrink: 0;
padding: var(--space-4) var(--space-3);
background: var(--color-surface-sunken);
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.preview-sidebar__section {
padding: var(--space-3) var(--space-2) var(--space-1);
color: var(--color-muted);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.preview-sidebar__item {
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
}
.preview-hero {
position: relative;
overflow: hidden;
padding: var(--space-6);
border-radius: var(--radius-md);
background: linear-gradient(135deg, #155eef, #174ea6);
color: var(--color-on-primary);
display: flex;
flex-direction: column;
gap: var(--space-3);
box-shadow: var(--shadow-md);
}
.preview-hero__mesh {
position: absolute;
inset: 0;
opacity: 0.35;
background:
radial-gradient(60% 80% at 100% 0%, #7aa7ff, transparent 70%),
radial-gradient(60% 80% at 0% 100%, #0e3b8e, transparent 70%);
}
.preview-hero > *:not(.preview-hero__mesh) {
position: relative;
z-index: 1;
}
.preview-hero__eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--text-xs);
font-weight: 700;
opacity: 0.85;
}
.preview-hero__title {
font-size: var(--text-2xl);
font-weight: 700;
max-width: 28ch;
}
.preview-hero__subtitle {
max-width: 62ch;
opacity: 0.9;
}
.preview-hero__actions,
.preview-action-bar {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.preview-kpi-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-3);
}
.preview-kpi,
.preview-card,
.preview-form,
.preview-empty,
.preview-table-wrap {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.preview-kpi {
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.preview-kpi__label {
color: var(--color-muted);
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.preview-kpi__value {
font-size: var(--text-xl);
font-weight: 700;
}
.preview-kpi__delta {
color: var(--color-muted);
font-size: var(--text-xs);
}
.preview-kpi__delta--up {
color: var(--color-success);
font-weight: 600;
}
.preview-section-title {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
}
.preview-section-title__h {
font-size: var(--text-lg);
font-weight: 700;
}
.preview-section-title__hint {
color: var(--color-muted);
font-size: var(--text-xs);
}
.preview-card-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.preview-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-4);
}
.preview-card {
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
transition:
transform 160ms ease,
box-shadow 160ms ease;
}
.preview-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.preview-card__title {
font-weight: 600;
}
.preview-card__body,
.preview-card__meta {
margin: 0;
color: var(--color-muted);
font-size: var(--text-sm);
}
.preview-card__meta {
font-size: var(--text-xs);
}
.preview-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px var(--space-2);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
font-size: var(--text-xs);
font-weight: 600;
}
.preview-badge--success {
background: #e7f6ec;
color: var(--color-success);
}
.preview-badge--warning {
background: #fff4e5;
color: var(--color-warning);
}
.preview-badge--danger {
background: #feeceb;
color: var(--color-danger);
}
.preview-badge__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.preview-form {
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.preview-form__field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.preview-form__label {
font-size: var(--text-sm);
font-weight: 600;
}
.preview-form__hint {
color: var(--color-muted);
font-size: var(--text-xs);
}
.preview-form__input,
.preview-form__textarea,
.preview-form__select {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font: inherit;
}
.preview-form__textarea {
min-height: 96px;
resize: vertical;
}
.preview-form__actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
}
.preview-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border: 1px solid transparent;
border-radius: var(--radius-sm);
font: inherit;
font-size: var(--text-sm);
font-weight: 600;
}
.preview-btn--primary {
background: var(--color-primary);
color: var(--color-on-primary);
box-shadow: var(--shadow-sm);
}
.preview-btn--secondary {
background: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border);
}
.preview-btn--ghost {
background: transparent;
color: var(--color-text);
}
.preview-table-wrap {
overflow: hidden;
}
.preview-table {
width: 100%;
border-collapse: collapse;
}
.preview-table th,
.preview-table td {
text-align: left;
padding: var(--space-3);
border-bottom: 1px solid var(--color-border);
font-size: var(--text-sm);
}
.preview-table th {
background: var(--color-surface-sunken);
color: var(--color-muted);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.preview-table tr:last-child td {
border-bottom: 0;
}
.preview-action-bar {
justify-content: flex-end;
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.preview-tabs {
display: flex;
gap: var(--space-1);
border-bottom: 1px solid var(--color-border);
}
.preview-tabs__tab {
padding: var(--space-2) var(--space-4);
color: var(--color-muted);
font-size: var(--text-sm);
}
.preview-tabs__tab--active {
color: var(--color-primary);
border-bottom: 2px solid var(--color-primary);
font-weight: 600;
}
.preview-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-7) var(--space-4);
text-align: center;
}
.preview-empty__icon {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: var(--radius-pill);
background: #e6eeff;
color: var(--color-primary);
}
.preview-empty__title {
font-weight: 700;
}
.preview-empty__body {
max-width: 40ch;
color: var(--color-muted);
font-size: var(--text-sm);
}
.preview-error {
display: flex;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid #f4b8b4;
border-radius: var(--radius-md);
background: #fff4f3;
}
.preview-error__icon {
color: var(--color-danger);
}
.preview-error__body {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.preview-error__title {
font-size: var(--text-sm);
font-weight: 700;
}
.preview-error__text {
color: var(--color-muted);
font-size: var(--text-sm);
}
.preview-footer {
display: flex;
justify-content: space-between;
padding: var(--space-3) var(--space-6);
color: var(--color-muted);
font-size: var(--text-xs);
border-top: 1px solid var(--color-border);
}
.preview-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
display: inline-block;
vertical-align: middle;
stroke: currentColor;
fill: none;
}
.preview-icon--sm {
width: 14px;
height: 14px;
}
.preview-icon--lg {
width: 24px;
height: 24px;
}
.preview-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--color-primary);
background: #e6eeff;
font-size: var(--text-xs);
font-weight: 700;
}
.preview-skeleton {
background: linear-gradient(90deg, #e8edf4 25%, #f7f9fc 37%, #e8edf4 63%);
background-size: 400% 100%;
border-radius: var(--radius-sm);
animation: preview-shimmer 1.4s ease infinite;
}
.preview-skeleton--line {
height: 12px;
margin-bottom: var(--space-2);
}
.preview-skeleton--title {
height: 18px;
width: 40%;
margin-bottom: var(--space-3);
}
.preview-skeleton--block {
height: 96px;
}
@keyframes preview-shimmer {
0% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
@media (max-width: 760px) {
.preview-sidebar {
display: none;
}
.preview-main {
padding: var(--space-4);
}
.preview-nav {
overflow-x: auto;
padding: var(--space-2) var(--space-4);
}
.preview-split,
.preview-two-column {
grid-template-columns: 1fr;
}
.preview-header {
padding: var(--space-3) var(--space-4);
}
.preview-table-wrap {
overflow-x: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.preview-card,
.preview-skeleton {
transition: none;
animation: none;
}
}