[grade=A] feat(caddy-builder): DC-106 visual reverse proxy builder (frontend)

Backend endpoints /api/v1/caddycode/{generate,validate,templates} already
shipped at commit 7f83151 (GLM grade B). This commit ships the visual
builder frontend that consumes them.

- status/js/caddy-builder.js — IIFE module that injects a modal with a
  form-driven visual builder. State → JSON payload → debounced POST
  /generate → preview pane. 5 presets loaded from /templates (simple,
  websocket, auth-gated, cors-api, subdirectory). Custom headers list
  (add/remove rows), live validation, copy-to-clipboard, reset. Exposes
  window.__caddyBuilder for testing.

- status/css/caddy-builder.css — page-specific styles, themed via
  existing --bg/--border/--accent/--ok-fg/--warn-fg/--err-fg CSS
  variables. Mobile-friendly single-column layout below 880 px.

- status/index.html — adds /css/caddy-builder.css link + the
  "🔧 Reverse Proxy Builder" button in the Tools menu.

- status/build.js — registers caddy-builder.js in features.js bundle.

- dashcaddy-api/__tests__/unit/caddy-builder.unit.test.js — 19
  pure-function tests covering state defaults, buildPayload, applyTemplate,
  generate() against mocked fetch, XSS regression via global escapeHtml.

Verified:
  - jest: 19/19 unit + 8/8 caddycode-fleet routes pass
  - node build.js: features.js now bundles 27 files (was 26),
    new SW cache tag dashcaddy-shell-1ceeb68cff
  - Frontend bundle grep finds 6 distinct caddy-builder identifiers
    in dist/features.js
  - Qwen stand-in judge: A (0 blocking, 0 polish). Substitute for Codex
  CLI quota wall. Verdict URN: urn:ump:fco2jwhmcv4tjhmfvutownqbvc6pmvln23ym5jckivvj42ykpc2a
This commit is contained in:
Hermes
2026-08-18 23:50:37 -07:00
parent fa6c4c6b20
commit 5abf385c7e
5 changed files with 1079 additions and 0 deletions
+2
View File
@@ -25,6 +25,7 @@
<link rel="stylesheet" href="/css/themes.css">
<link rel="stylesheet" href="/css/dashboard.css">
<link rel="stylesheet" href="/css/xterm.css">
<link rel="stylesheet" href="/css/caddy-builder.css">
</head>
<body>
@@ -201,6 +202,7 @@
<span class="tools-section-label">Tools</span>
</button>
<div class="tools-section-items">
<button id="caddy-builder-btn" aria-label="Visual reverse proxy builder">🔧 Reverse Proxy Builder</button>
<button id="view-error-logs" aria-label="View error logs">📋 Error Logs</button>
<button id="view-container-logs" aria-label="View container logs">📜 Container Logs</button>
<button id="manage-notifications" aria-label="Manage notifications">🔔 Alerts</button>