feat(web): dark Gitea UI, systemd installer, WEB-UI docs (W7)

Restyles every template with a hand-written dark Gitea-style theme
(web/static/app.css, ~270 lines: badges, buttons, cards, focus rings,
prefers-reduced-motion) and completes the htmx polling wiring for all
four dashboard cards. Adds the repeatable setup-web-linux.sh installer
(idempotent: pip install '[web]' non-editable, render ci-web.service,
template [web]/[web.oidc] into config.toml, prompt for keyring secrets,
print Gitea OIDC registration steps, enable/restart the unit) plus
deploy/systemd/ci-web.service and docs/WEB-UI.md.

src/ci_orchestrator/web/static/app.css

@@ -1 +1,262 @@
-/* placeholder -- real dark Gitea-style design tokens land in W7 */
+/* ci-orchestrator web dashboard — dark, Gitea-style theme (W7a).
+ *
+ * Hand-written, no external framework. Design tokens per the W7 plan
+ * (plans/web-ui-management-plan.md, section W7a). Everything under this
+ * directory is served locally (`/static/app.css`) — the host LAN may be
+ * offline, so no `@import url(...)` to a CDN, no remote fonts.
+ */
+
+:root {
+  --bg: #16191d;
+  --panel: #1c2126;
+  --panel-2: #22272e;
+  --border: #30363d;
+  --text: #d1d5da;
+  --text-dim: #8b949e;
+  --accent: #3fb950;
+  --accent-hover: #46c359;
+  --danger: #f85149;
+  --warn: #d29922;
+  --link: #58a6ff;
+  --radius: 6px;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* ── reset ────────────────────────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+h1, h2, h3, p, dl, dd { margin: 0 0 0.75rem; }
+
+a { color: var(--link); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+code, .mono {
+  font-family: var(--mono);
+  font-size: 0.9em;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.05em 0.4em;
+  color: var(--text);
+}
+
+/* ── navbar ───────────────────────────────────────────────────────────── */
+
+.navbar {
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
+}
+
+.navbar-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0.85rem 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.navbar-brand {
+  color: var(--text);
+  font-weight: 600;
+  font-size: 1.05rem;
+}
+.navbar-brand:hover { color: var(--accent-hover); text-decoration: none; }
+
+.navbar-links {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  font-size: 0.9rem;
+}
+.navbar-links a { color: var(--text-dim); }
+.navbar-links a:hover { color: var(--link); }
+
+.navbar-user { color: var(--text); font-weight: 500; }
+.navbar-user-local { color: var(--text-dim); font-style: italic; }
+.navbar-logout { color: var(--danger) !important; }
+
+/* ── layout ───────────────────────────────────────────────────────────── */
+
+.content { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 1.25rem;
+  align-items: start;
+}
+
+/* A polling wrapper (htmx hx-get/hx-trigger target) that must not itself
+ * become a grid box — its children (the real .card sections) lay out
+ * directly in the parent grid. */
+.contents { display: contents; }
+
+/* ── cards ────────────────────────────────────────────────────────────── */
+
+.card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+}
+
+.card h2 {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-dim);
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.6rem;
+  margin-bottom: 0.9rem;
+}
+
+.card h3 { font-size: 0.95rem; color: var(--text); }
+
+/* ── definition lists (status cards) ─────────────────────────────────── */
+
+dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; }
+dt { color: var(--text-dim); font-weight: 500; }
+dd { margin: 0; }
+
+/* ── tables ───────────────────────────────────────────────────────────── */
+
+.table-wrap { overflow-x: auto; }
+
+table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+
+th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
+
+th {
+  color: var(--text-dim);
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+tbody tr { transition: background-color 120ms ease; }
+tbody tr:hover { background: var(--panel-2); }
+
+tr.row-orphan td { color: var(--warn); }
+tr.row-alert td { color: var(--danger); }
+
+/* ── status badges ────────────────────────────────────────────────────── */
+
+.badge {
+  display: inline-block;
+  padding: 0.15rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.badge-success { background: rgba(63, 185, 80, 0.15); color: var(--accent); border: 1px solid rgba(63, 185, 80, 0.4); }
+.badge-danger  { background: rgba(248, 81, 73, 0.15); color: var(--danger); border: 1px solid rgba(248, 81, 73, 0.4); }
+.badge-warn    { background: rgba(210, 153, 34, 0.15); color: var(--warn); border: 1px solid rgba(210, 153, 34, 0.4); }
+
+/* ── buttons ──────────────────────────────────────────────────────────── */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  padding: 0.45rem 0.9rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  background: var(--panel-2);
+  color: var(--text);
+  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
+}
+.btn:hover { background: var(--border); }
+.btn:active { transform: translateY(1px); }
+
+.btn-primary { background: var(--accent); color: #04170a; border-color: var(--accent); }
+.btn-primary:hover { background: var(--accent-hover); }
+
+.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
+.btn-danger:hover { background: var(--danger); color: #2b0705; }
+
+/* ── forms ────────────────────────────────────────────────────────────── */
+
+form { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
+
+label { font-size: 0.85rem; color: var(--text-dim); display: inline-flex; align-items: center; gap: 0.4rem; }
+
+input[type="text"], input[type="number"] {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: var(--radius);
+  padding: 0.4rem 0.6rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+}
+
+/* ── notices / confirm / result panels ───────────────────────────────── */
+
+.notice {
+  border-radius: var(--radius);
+  padding: 0.75rem 1rem;
+  margin: 0.75rem 0;
+  border: 1px solid var(--border);
+  font-size: 0.9rem;
+}
+.notice-warn { background: rgba(210, 153, 34, 0.08); border-color: rgba(210, 153, 34, 0.4); color: var(--warn); }
+
+.confirm-box { margin-bottom: 1.25rem; }
+
+.action-result {
+  border-radius: var(--radius);
+  padding: 0.9rem 1.1rem;
+  margin-bottom: 1.25rem;
+  border: 1px solid var(--border);
+}
+.result-ok { border-color: rgba(63, 185, 80, 0.4); background: rgba(63, 185, 80, 0.08); }
+.result-error { border-color: rgba(248, 81, 73, 0.4); background: rgba(248, 81, 73, 0.08); }
+
+/* ── accessibility ────────────────────────────────────────────────────── */
+
+:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ── responsive ───────────────────────────────────────────────────────── */
+
+@media (max-width: 640px) {
+  .navbar-inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
+  form { flex-direction: column; align-items: flex-start; }
+  dl { grid-template-columns: 1fr; }
+}

src/ci_orchestrator/web/templates/base.html

@@ -8,9 +8,20 @@
   <script src="/static/htmx.min.js" defer></script>
 </head>
 <body>
+  {% set logged_in_user = request.session.get("user") %}
   <nav class="navbar">
-    <span class="navbar-brand">ci-orchestrator</span>
-    <a href="/audit">Audit log</a>
+    <div class="navbar-inner">
+      <a class="navbar-brand" href="/">ci-orchestrator</a>
+      <div class="navbar-links">
+        <a href="/audit">Audit log</a>
+        {% if logged_in_user %}
+        <span class="navbar-user" aria-label="Logged in as {{ logged_in_user }}">{{ logged_in_user }}</span>
+        <a class="navbar-logout" href="/logout" aria-label="Log out">Logout</a>
+        {% else %}
+        <span class="navbar-user navbar-user-local">local</span>
+        {% endif %}
+      </div>
+    </div>
   </nav>
   <main class="content">
     {% block content %}{% endblock %}

src/ci_orchestrator/web/templates/dashboard.html

@@ -3,13 +3,9 @@
 {% block title %}Dashboard - ci-orchestrator{% endblock %}
 
 {% block content %}
-<section class="card" id="vms-card">
+<div class="dashboard-grid">
   {% include "partials/vms.html" %}
-</section>
-
-<section class="card" id="cache-card">
   {% include "partials/cache.html" %}
-</section>
-
-{% include "partials/host.html" %}
+  {% include "partials/host.html" %}
+</div>
 {% endblock %}

src/ci_orchestrator/web/templates/partials/audit.html

@@ -6,30 +6,40 @@
 <section class="card" id="audit-card">
   <h2>Audit log</h2>
   {% if entries %}
-  <table>
-    <thead>
-      <tr>
-        <th>Time</th>
-        <th>User</th>
-        <th>Action</th>
-        <th>Target</th>
-        <th>Result</th>
-        <th>Detail</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for e in entries %}
-      <tr class="{{ 'row-alert' if e.result == 'error' else '' }}">
-        <td>{{ e.ts }}</td>
-        <td>{{ e.user }}</td>
-        <td>{{ e.action }}</td>
-        <td><code>{{ e.target }}</code></td>
-        <td>{{ e.result }}</td>
-        <td>{{ e.detail }}</td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
+  <div class="table-wrap">
+    <table>
+      <thead>
+        <tr>
+          <th>Time</th>
+          <th>User</th>
+          <th>Action</th>
+          <th>Target</th>
+          <th>Result</th>
+          <th>Detail</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for e in entries %}
+        <tr class="{{ 'row-alert' if e.result == 'error' else '' }}">
+          <td>{{ e.ts }}</td>
+          <td>{{ e.user }}</td>
+          <td>{{ e.action }}</td>
+          <td><code>{{ e.target }}</code></td>
+          <td>
+            {% if e.result == "ok" %}
+            <span class="badge badge-success">ok</span>
+            {% elif e.result == "error" %}
+            <span class="badge badge-danger">error</span>
+            {% else %}
+            <span class="badge badge-warn">{{ e.result }}</span>
+            {% endif %}
+          </td>
+          <td>{{ e.detail }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
   {% else %}
   <p>No audit entries yet.</p>
   {% endif %}

src/ci_orchestrator/web/templates/partials/cache.html

@@ -1,4 +1,4 @@
-<div id="cache-partial">
+<section class="card" id="cache-card" hx-get="/cache" hx-trigger="every 5s" hx-swap="outerHTML">
   <h2>Cargo cache</h2>
   {% if cache %}
   <dl>
@@ -10,10 +10,10 @@
     <dt>Retention</dt><dd>{{ cache.retention_days }} day(s)</dd>
   </dl>
   {% else %}
-  <p class="notice notice-warn">Cargo cache status unavailable.</p>
+  <p class="notice notice-warn" role="alert">Cargo cache status unavailable.</p>
   {% endif %}
-  <form method="post" action="/cache/purge" id="cache-purge-form">
+  <form method="post" action="/cache/purge" id="cache-purge-form" aria-label="Purge cargo cache">
     <input type="hidden" name="csrf" value="{{ csrf_token }}">
-    <button type="submit" class="btn btn-danger">Purge cache</button>
+    <button type="submit" class="btn btn-danger" aria-label="Purge cargo cache">Purge cache</button>
   </form>
-</div>
+</section>

src/ci_orchestrator/web/templates/partials/confirm.html

@@ -1,4 +1,4 @@
-<div class="confirm-box notice notice-warn" id="action-confirm">
+<div class="confirm-box notice notice-warn" id="action-confirm" role="alert">
   <h3>Confirm: {{ action_label }}</h3>
   <p>Target: <code>{{ target }}</code></p>
   <p>{{ summary }}</p>
@@ -8,6 +8,6 @@
     {% for key, value in extra_fields.items() %}
     <input type="hidden" name="{{ key }}" value="{{ value }}">
     {% endfor %}
-    <button type="submit" class="btn btn-danger">Confirm</button>
+    <button type="submit" class="btn btn-danger" aria-label="Confirm: {{ action_label }}">Confirm</button>
   </form>
 </div>

src/ci_orchestrator/web/templates/partials/host.html

@@ -1,48 +1,59 @@
-<section class="card" id="disk-card">
-  <h2>Disk</h2>
-  {% if disk %}
-  <dl>
-    <dt>Path</dt><dd><code>{{ disk.path }}</code></dd>
-    <dt>Total</dt><dd>{{ "%.1f"|format(disk.total_gb) }} GB</dd>
-    <dt>Free</dt><dd>{{ "%.1f"|format(disk.free_gb) }} GB</dd>
-    <dt>Used</dt><dd>{{ "%.1f"|format(disk.used_pct) }}%</dd>
-  </dl>
-  {% else %}
-  <p class="notice notice-warn">Disk status unavailable.</p>
-  {% endif %}
-</section>
+<div class="contents" id="host-partial" hx-get="/host" hx-trigger="every 5s" hx-swap="outerHTML">
+  <section class="card" id="disk-card">
+    <h2>Disk</h2>
+    {% if disk %}
+    <dl>
+      <dt>Path</dt><dd><code>{{ disk.path }}</code></dd>
+      <dt>Total</dt><dd>{{ "%.1f"|format(disk.total_gb) }} GB</dd>
+      <dt>Free</dt><dd>{{ "%.1f"|format(disk.free_gb) }} GB</dd>
+      <dt>Used</dt><dd>{{ "%.1f"|format(disk.used_pct) }}%</dd>
+    </dl>
+    {% else %}
+    <p class="notice notice-warn" role="alert">Disk status unavailable.</p>
+    {% endif %}
+  </section>
 
-<section class="card" id="runner-card">
-  <h2>Runners</h2>
-  {% if runners %}
-  <table>
-    <thead>
-      <tr>
-        <th>Service</th>
-        <th>Active</th>
-        <th>Sub-state</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for runner in runners %}
-      <tr class="{{ 'row-ok' if runner.active else 'row-alert' }}">
-        <td>{{ runner.name }}</td>
-        <td>{{ "yes" if runner.active else "no" }}</td>
-        <td>{{ runner.sub_state }}</td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-  {% else %}
-  <p class="notice notice-warn">Runner status unavailable.</p>
-  {% endif %}
-</section>
+  <section class="card" id="runner-card">
+    <h2>Runners</h2>
+    {% if runners %}
+    <div class="table-wrap">
+      <table>
+        <thead>
+          <tr>
+            <th>Service</th>
+            <th>Status</th>
+            <th>Sub-state</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for runner in runners %}
+          <tr class="{{ 'row-alert' if not runner.active else '' }}">
+            <td>{{ runner.name }}</td>
+            <td>
+              {% if runner.active %}
+              <span class="badge badge-success">active</span>
+              {% else %}
+              <span class="badge badge-danger">down</span>
+              {% endif %}
+            </td>
+            <td>{{ runner.sub_state }}</td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+    {% else %}
+    <p class="notice notice-warn" role="alert">Runner status unavailable.</p>
+    {% endif %}
+  </section>
 
-<section class="card" id="backup-card">
-  <h2>Template backup</h2>
-  <form method="post" action="/host/backup" id="host-backup-form">
-    <input type="hidden" name="csrf" value="{{ csrf_token }}">
-    <label>Template: <input type="text" name="template" required></label>
-    <button type="submit" class="btn btn-danger">Backup template</button>
-  </form>
-</section>
+  <section class="card" id="backup-card">
+    <h2>Template backup</h2>
+    <form method="post" action="/host/backup" id="host-backup-form" aria-label="Backup template">
+      <input type="hidden" name="csrf" value="{{ csrf_token }}">
+      <label for="host-backup-template">Template</label>
+      <input type="text" id="host-backup-template" name="template" required>
+      <button type="submit" class="btn btn-danger" aria-label="Backup template">Backup template</button>
+    </form>
+  </section>
+</div>

src/ci_orchestrator/web/templates/partials/lock_conflict.html

@@ -1,5 +1,5 @@
-<div class="notice notice-warn" id="action-lock-conflict">
-  <h3>{{ action_label }} refused</h3>
+<div class="notice notice-warn" id="action-lock-conflict" role="alert">
+  <h3>{{ action_label }} refused <span class="badge badge-warn">locked</span></h3>
   <p>A job may be running against <code>{{ target }}</code> (a fresh
      <code>vm-start.lock</code> is present). Try again once it clears.</p>
 </div>

src/ci_orchestrator/web/templates/partials/result.html

@@ -1,4 +1,11 @@
-<div class="action-result {{ 'result-ok' if ok else 'result-error' }}" id="action-result">
-  <h3>{{ action_label }} -- {{ "ok" if ok else "error" }}</h3>
+<div class="action-result {{ 'result-ok' if ok else 'result-error' }}" id="action-result" role="status" aria-live="polite">
+  <h3>
+    {{ action_label }} --
+    {% if ok %}
+    <span class="badge badge-success">ok</span>
+    {% else %}
+    <span class="badge badge-danger">error</span>
+    {% endif %}
+  </h3>
   <p>{{ detail }}</p>
 </div>

src/ci_orchestrator/web/templates/partials/vms.html

@@ -1,46 +1,55 @@
-<div id="vms-partial" hx-get="/vms" hx-trigger="every 5s" hx-swap="outerHTML">
+<section class="card" id="vms-card" hx-get="/vms" hx-trigger="every 5s" hx-swap="outerHTML">
   <h2>Live VMs</h2>
   {% if not backend_available %}
-  <p class="notice notice-warn">Backend unavailable (vmrun not found on this host).</p>
+  <p class="notice notice-warn" role="alert">Backend unavailable (vmrun not found on this host).</p>
   {% endif %}
   {% if vms %}
-  <table>
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>VMX</th>
-        <th>IP</th>
-        <th>Guest OS</th>
-        <th>Uptime (s)</th>
-        <th>Orphan?</th>
-        <th>Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for vm in vms %}
-      <tr class="{{ 'row-orphan' if vm.is_orphan else '' }}">
-        <td>{{ vm.name }}</td>
-        <td><code>{{ vm.vmx }}</code></td>
-        <td>{{ vm.ip or "-" }}</td>
-        <td>{{ vm.guest_os or "-" }}</td>
-        <td>{{ vm.uptime_sec if vm.uptime_sec is not none else "-" }}</td>
-        <td>{{ "yes" if vm.is_orphan else "no" }}</td>
-        <td>
-          <form method="post" action="/vms/{{ vm.vmx | vmx_id }}/remove">
-            <input type="hidden" name="csrf" value="{{ csrf_token }}">
-            <button type="submit" class="btn btn-danger">Remove</button>
-          </form>
-        </td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
+  <div class="table-wrap">
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>VMX</th>
+          <th>IP</th>
+          <th>Guest OS</th>
+          <th>Uptime (s)</th>
+          <th>Status</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for vm in vms %}
+        <tr class="{{ 'row-orphan' if vm.is_orphan else '' }}">
+          <td>{{ vm.name }}</td>
+          <td><code>{{ vm.vmx }}</code></td>
+          <td>{{ vm.ip or "-" }}</td>
+          <td>{{ vm.guest_os or "-" }}</td>
+          <td>{{ vm.uptime_sec if vm.uptime_sec is not none else "-" }}</td>
+          <td>
+            {% if vm.is_orphan %}
+            <span class="badge badge-warn">orphan</span>
+            {% else %}
+            <span class="badge badge-success">running</span>
+            {% endif %}
+          </td>
+          <td>
+            <form method="post" action="/vms/{{ vm.vmx | vmx_id }}/remove">
+              <input type="hidden" name="csrf" value="{{ csrf_token }}">
+              <button type="submit" class="btn btn-danger" aria-label="Remove VM {{ vm.name }}">Remove</button>
+            </form>
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
   {% else %}
   <p>No VMs currently running.</p>
   {% endif %}
-  <form method="post" action="/vms/cleanup" id="vms-cleanup-form">
+  <form method="post" action="/vms/cleanup" id="vms-cleanup-form" aria-label="Cleanup orphaned VMs">
     <input type="hidden" name="csrf" value="{{ csrf_token }}">
-    <label>Max age (h): <input type="number" name="max_age_hours" value="4" min="0"></label>
-    <button type="submit" class="btn btn-danger">Cleanup orphans</button>
+    <label for="vms-cleanup-max-age">Max age (h)</label>
+    <input type="number" id="vms-cleanup-max-age" name="max_age_hours" value="4" min="0">
+    <button type="submit" class="btn btn-danger" aria-label="Cleanup orphaned VMs older than the given age">Cleanup orphans</button>
   </form>
-</div>
+</section>