[grade=A] docs: update DC-106 CHANGELOG to cover frontend builder

The existing DC-106 line described only the API; this commit expands
it to describe the form-driven visual builder UI shipped at 5abf385.

CHANGELOG.md

@@ -27,7 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **DC-103: One-click auto-route adoption.** `POST /api/v1/discover/adopt` creates service entry + Caddyfile reverse_proxy route + DNS record from a discovered container.
 - **DC-104: App catalog.** `GET /api/v1/catalog` browses 76 curated templates with category filtering, search, and popular badges. 7 auto-detected categories.
 - **DC-105: Smart defaults wizard.** "What do you want to self-host?" — 6 categories (media, files, network, smart home, development, monitoring), hardware profile limits, cross-category dedup with priority sorting.
-- **DC-106: Caddyfile-as-code.** Visual reverse proxy builder API — generate Caddyfile blocks from JSON config (TLS, auth, CORS, headers, WebSocket, compression, strip prefix). 5 preset templates.
+- **DC-106: Caddyfile-as-code.** Visual reverse proxy builder — form-driven UI in the Tools menu that consumes the `/api/v1/caddycode/{generate,validate,templates}` endpoints. Form fields (domain, upstream, TLS mode, behavior toggles, custom headers, DashCaddy SSO gate) → live Caddyfile preview with copy-to-clipboard. 5 preset templates. Frontend XSS protection + backend field sanitization (DC-070) for defense in depth. 19 unit tests.
 - **DC-107: Disaster recovery.** Full-system backup (services, config, credentials, Caddyfile, themes, assets) with SHA-256 checksum verification. One-click restore with partial-failure handling.
 - **DC-108: Multi-host fleet management.** Register/deregister remote DashCaddy instances, parallel health probes, multi-host deployment plan generation. API keys stored as SHA-256 hashes.
 

dashcaddy-api/__tests__/unit/caddy-builder.unit.test.js

@@ -0,0 +1,371 @@
+/**
+ * DC-106: Reverse Proxy Visual Builder — pure-function unit tests.
+ *
+ * These tests cover the deterministic, DOM-free surface of the builder:
+ *   - state → POST /generate payload mapping (buildPayload)
+ *   - template application (applyTemplate hydrates state from a template config)
+ *
+ * DOM-bound behavior (event handlers, renderHeadersList, copy/validate
+ * buttons) is exercised via the headless-browser smoke test
+ * `caddy-builder.browser.smoke.test.js` which uses the running dev server.
+ * That test is in the `__tests__/integration/` directory and is run on
+ * demand; the unit test below has zero jsdom dependency so it runs on
+ * every CI tick.
+ *
+ * The module under test uses an IIFE; we extract the pure helpers via a
+ * re-loadable harness that exposes them on globalThis without requiring
+ * DOM globals.
+ */
+
+// --- DOM stub: minimal window/document/injectModal/escapeHtml shims ---
+// The caddy-builder.js IIFE needs window.injectModal, window.escapeHtml,
+// window.fetch, document.body.insertAdjacentHTML, and document.getElementById
+// at module-load time. We stub all of them with no-ops so the IIFE runs
+// without exploding — but no actual DOM rendering happens. That's fine for
+// testing the pure helpers, which only need `state`.
+
+global.window = global.window || {};
+global.window.injectModal = () => {};
+global.window.escapeHtml = (text) => String(text ?? '')
+  .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+// Also expose as bare globals — the module's IIFE references `injectModal`
+// and `escapeHtml` as bare identifiers, so they need to be resolvable in
+// the eval scope.
+global.injectModal = global.window.injectModal;
+global.escapeHtml = global.window.escapeHtml;
+
+// Tiny DOM shim — only what caddy-builder.js touches at load time.
+// Built in two passes to avoid the "Cannot access 'stubEl' before
+// initialization" TDZ trap (parentNode self-reference).
+function buildStubEl() {
+  const el = {
+    style: {},
+    classList: { add() {}, remove() {} },
+    dataset: {},
+    addEventListener() {},
+    removeEventListener() {},
+    insertAdjacentHTML() {},
+    setAttribute() {},
+    getAttribute() { return null; },
+    dispatchEvent() {},
+    focus() {},
+    blur() {},
+    set innerHTML(_) {},
+    get innerHTML() { return ''; },
+    set textContent(_) {},
+    get textContent() { return ''; },
+    set value(_) {},
+    get value() { return ''; },
+    set checked(_) {},
+    get checked() { return false; },
+    set disabled(_) {},
+    get disabled() { return false; },
+    children: [],
+    parentNode: null,
+    firstChild: null,
+  };
+  el.parentNode = el;
+  el.firstChild = el;
+  el.appendChild = function(child) {
+    el.children.push(child);
+    child.parentNode = el;
+    return child;
+  };
+  el.querySelector = () => el;
+  el.querySelectorAll = () => [];
+  return el;
+}
+const stubEl = buildStubEl();
+
+const elementById = new Map();
+function makeEl(id, tag) {
+  const el = Object.create(stubEl);
+  el.id = id;
+  el.tagName = (tag || 'div').toUpperCase();
+  el.children = [];
+  el.parentNode = stubEl;
+  el._children = [];
+  el.appendChild = function(child) { el.children.push(child); child.parentNode = el; return child; };
+  el.querySelector = function(sel) {
+    // Very dumb: return first descendant whose tag matches the selector's tagname
+    const m = sel.match(/^[a-z]+/);
+    const tag = m ? m[0].toUpperCase() : null;
+    function find(node) {
+      if (tag && node.tagName === tag) return node;
+      for (const c of (node.children || [])) {
+        const r = find(c);
+        if (r) return r;
+      }
+      return null;
+    }
+    return find(el) || stubEl;
+  };
+  el.querySelectorAll = function() { return []; };
+  elementById.set(id, el);
+  return el;
+}
+
+global.document = {
+  body: stubEl,
+  getElementById: (id) => elementById.get(id) || makeEl(id),
+  createElement: (tag) => makeEl('dyn-' + Math.random().toString(36).slice(2), tag),
+  createRange: () => ({ selectNodeContents() {}, setStart() {}, setEnd() {}, collapse() {} }),
+};
+
+global.Event = class Event {
+  constructor(type) { this.type = type; }
+};
+global.navigator = { clipboard: { writeText: async () => {} } };
+global.fetch = jest.fn();
+global.setTimeout = setTimeout;
+global.clearTimeout = clearTimeout;
+
+// --- Load the module under test ---
+function loadModule() {
+  const fs = require('fs');
+  const path = require('path');
+  const code = fs.readFileSync(
+    path.join(__dirname, '..', '..', '..', 'status', 'js', 'caddy-builder.js'),
+    'utf8'
+  );
+  // eslint-disable-next-line no-eval
+  (0, eval)(code);
+  return global.window.__caddyBuilder;
+}
+
+// --- Tests ---------------------------------------------------------------
+
+describe('DC-106: Caddy Visual Builder (pure)', () => {
+  let builder;
+
+  beforeEach(() => {
+    fetch.mockReset();
+    // loadTemplates() runs at module-load time and hits /caddycode/templates.
+    // Mock it to resolve with the 5 template presets so applyTemplate works.
+    fetch.mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: async () => ({
+        success: true,
+        templates: {
+          'simple-proxy': { label: 'Simple reverse proxy', config: { domain: 'app.example.com', upstream: 'localhost:8080' } },
+          'websocket-app': { label: 'WebSocket application', config: { domain: 'app.example.com', upstream: 'localhost:3000', websocket: true, compress: true } },
+          'auth-gated': { label: 'Auth-gated (DashCaddy SSO)', config: { domain: 'app.example.com', upstream: 'localhost:8096', auth: true, authService: 'app' } },
+          'cors-api': { label: 'API with CORS', config: { domain: 'api.example.com', upstream: 'localhost:3001', cors: true, compress: true } },
+          'subdirectory': { label: 'Subdirectory proxy', config: { domain: 'example.com', upstream: 'localhost:8080', stripPrefix: '/app' } },
+        },
+      }),
+    });
+    elementById.clear();
+    builder = loadModule();
+  });
+
+  // Filter helper: count only POST /generate or POST /validate calls.
+  const postCalls = () => fetch.mock.calls.filter(([url, opts]) =>
+    String(url).includes('/caddycode/') && opts && opts.method === 'POST'
+  );
+
+  describe('state defaults', () => {
+    it('initializes with sensible defaults', () => {
+      expect(builder.state.domain).toBe('blog.example.com');
+      expect(builder.state.upstream).toBe('localhost:8080');
+      expect(builder.state.upstreamProtocol).toBe('http');
+      expect(builder.state.tls).toBe('auto');
+      expect(builder.state.auth).toBe(false);
+      expect(builder.state.compress).toBe(true);
+      expect(builder.state.headers).toEqual([]);
+    });
+
+    it('exposes the generated state via getCaddyfile()', () => {
+      expect(builder.getCaddyfile()).toBe('');
+    });
+  });
+
+  describe('buildPayload', () => {
+    it('maps state → POST /generate payload (happy path)', () => {
+      builder.state.domain = 'app.example.com';
+      builder.state.upstream = 'localhost:3000';
+      builder.state.websocket = true;
+      builder.state.cors = true;
+      builder.state.headers = [{ key: 'X-Forwarded-For', value: '{remote_host}' }];
+      const payload = builder.buildPayload();
+      expect(payload).toEqual({
+        domain: 'app.example.com',
+        upstream: 'localhost:3000',
+        upstreamProtocol: 'http',
+        tls: 'auto',
+        auth: false,
+        authService: null,
+        websocket: true,
+        cors: true,
+        compress: true,
+        stripPrefix: null,
+        redirectToHttps: true,
+        headers: { 'X-Forwarded-For': '{remote_host}' },
+      });
+    });
+
+    it('trims whitespace on domain / upstream / stripPrefix', () => {
+      builder.state.domain = '  app.example.com  ';
+      builder.state.upstream = '\tlocalhost:8080\n';
+      builder.state.stripPrefix = '  /api  ';
+      const p = builder.buildPayload();
+      expect(p.domain).toBe('app.example.com');
+      expect(p.upstream).toBe('localhost:8080');
+      expect(p.stripPrefix).toBe('/api');
+    });
+
+    it('drops blank header keys (only headers with non-blank keys are sent)', () => {
+      builder.state.headers = [
+        { key: 'X-Real-IP', value: '{remote_host}' },
+        { key: '', value: 'ignored' },
+        { key: '   ', value: 'also ignored' },
+      ];
+      const p = builder.buildPayload();
+      expect(p.headers).toEqual({ 'X-Real-IP': '{remote_host}' });
+    });
+
+    it('nullifies authService when auth is off (security: never leaks auth_id without auth=true)', () => {
+      builder.state.auth = false;
+      builder.state.authService = 'leftover';
+      const p = builder.buildPayload();
+      expect(p.authService).toBe(null);
+    });
+
+    it('passes authService when auth is on', () => {
+      builder.state.auth = true;
+      builder.state.authService = 'blog';
+      const p = builder.buildPayload();
+      expect(p.authService).toBe('blog');
+    });
+
+    it('nullifies stripPrefix when blank', () => {
+      builder.state.stripPrefix = '';
+      const p = builder.buildPayload();
+      expect(p.stripPrefix).toBe(null);
+    });
+
+    it('sends all boolean fields with explicit values (no undefined)', () => {
+      const p = builder.buildPayload();
+      expect(typeof p.websocket).toBe('boolean');
+      expect(typeof p.cors).toBe('boolean');
+      expect(typeof p.compress).toBe('boolean');
+      expect(typeof p.redirectToHttps).toBe('boolean');
+      expect(typeof p.auth).toBe('boolean');
+    });
+  });
+
+  describe('applyTemplate', () => {
+    it('hydrates state from an auth-gated template', () => {
+      builder.applyTemplate('auth-gated');
+      expect(builder.state.auth).toBe(true);
+      expect(builder.state.authService).toBe('app');
+      expect(builder.state.upstream).toBe('localhost:8096');
+    });
+
+    it('hydrates state from a cors-api template', () => {
+      builder.applyTemplate('cors-api');
+      expect(builder.state.cors).toBe(true);
+      expect(builder.state.compress).toBe(true);
+      expect(builder.state.upstream).toBe('localhost:3001');
+    });
+
+    it('does nothing for unknown template id', () => {
+      const before = JSON.stringify(builder.state);
+      builder.applyTemplate('does-not-exist');
+      const after = JSON.stringify(builder.state);
+      expect(after).toBe(before);
+    });
+  });
+
+  describe('fetch integration (mocked)', () => {
+    it('generate() POSTs to /caddycode/generate with correct headers', async () => {
+      fetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        json: async () => ({
+          success: true,
+          caddyfile: 'app.example.com {\n  reverse_proxy localhost:8080\n}',
+        }),
+      });
+      builder.state.domain = 'app.example.com';
+      builder.state.upstream = 'localhost:8080';
+      await builder.generate();
+      expect(fetch).toHaveBeenCalledWith('/api/v1/caddycode/generate', expect.objectContaining({
+        method: 'POST',
+        credentials: 'same-origin',
+        headers: expect.objectContaining({ 'Content-Type': 'application/json' }),
+      }));
+    });
+
+    it('generate() stores the returned caddyfile on success', async () => {
+      fetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        json: async () => ({
+          success: true,
+          caddyfile: 'app.example.com {\n  reverse_proxy localhost:8080\n}',
+        }),
+      });
+      builder.state.domain = 'app.example.com';
+      builder.state.upstream = 'localhost:8080';
+      await builder.generate();
+      expect(builder.getCaddyfile()).toContain('reverse_proxy localhost:8080');
+    });
+
+    it('generate() captures 400 errors without throwing', async () => {
+      fetch.mockResolvedValueOnce({
+        ok: false,
+        status: 400,
+        json: async () => ({
+          success: false,
+          error: 'Invalid configuration',
+          errors: ['upstream must be host:port'],
+        }),
+      });
+      builder.state.domain = 'app.example.com';
+      builder.state.upstream = 'bad';
+      await expect(builder.generate()).resolves.toBeUndefined();
+      expect(builder.getCaddyfile()).toBe('');
+    });
+
+    it('generate() handles network failures gracefully', async () => {
+      fetch.mockRejectedValueOnce(new Error('ECONNREFUSED'));
+      builder.state.domain = 'app.example.com';
+      builder.state.upstream = 'localhost:8080';
+      await expect(builder.generate()).resolves.toBeUndefined();
+    });
+
+    it('generate() short-circuits when domain missing', async () => {
+      builder.state.domain = '';
+      builder.state.upstream = 'localhost:8080';
+      await builder.generate();
+      // loadTemplates() (run at module load) makes a GET to /templates; we
+      // only care that generate() didn't POST /generate. Filter to POST.
+      expect(postCalls()).toHaveLength(0);
+    });
+
+    it('generate() short-circuits when upstream missing', async () => {
+      builder.state.domain = 'app.example.com';
+      builder.state.upstream = '';
+      await builder.generate();
+      expect(postCalls()).toHaveLength(0);
+    });
+  });
+
+  describe('XSS protection (escapeHtml integration)', () => {
+    it('escapes user-typed values when headers would be rendered', () => {
+      // The caddy-builder.js module calls escapeHtml() in renderHeadersList
+      // to attribute-escape header keys/values before innerHTML injection.
+      // Verify the global escapeHtml contract the module depends on.
+      const malicious = '<script>alert(1)</script>"&<>\'onerror=x';
+      const escaped = global.escapeHtml(malicious);
+      expect(escaped).not.toContain('<script>');
+      expect(escaped).not.toContain('"');
+      expect(escaped).toContain('&lt;script&gt;');
+      expect(escaped).toContain('&quot;');
+      expect(escaped).toContain('&amp;');
+    });
+  });
+});

status/build.js

@@ -77,6 +77,11 @@ const bundles = {
     // window.wireModal + window.injectModal + window.escapeHtml helpers
     // defined in globals.js (already in core.js).
     JS('share-modal.js'),
+    // DC-106: Reverse proxy visual builder — opened from the "🔧 Reverse
+    // Proxy Builder" button in the Tools menu. Uses window.injectModal +
+    // window.escapeHtml from globals.js (in core.js). Lives in features.js
+    // because it's a modal-style tool, not part of the core dashboard.
+    JS('caddy-builder.js'),
   ],
   'onboarding.js': [
     JS('driver.min.js'),

status/css/caddy-builder.css

@@ -0,0 +1,197 @@
+/* ===== DC-106: Reverse Proxy Builder styles ===== */
+
+.cb-section {
+  padding: 12px 14px;
+  margin-bottom: 12px;
+  background: var(--card-base, var(--bg));
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.cb-label {
+  display: block;
+  font-size: 0.85rem;
+  margin-bottom: 10px;
+  color: var(--fg);
+}
+
+.cb-label > input[type="text"],
+.cb-label > select {
+  display: block;
+  width: 100%;
+  margin-top: 4px;
+  padding: 6px 10px;
+  font-size: 0.85rem;
+  font-family: inherit;
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+
+.cb-label > input[type="text"]:focus,
+.cb-label > select:focus {
+  outline: 2px solid var(--accent, #4a9eff);
+  outline-offset: -1px;
+  border-color: transparent;
+}
+
+.cb-label > input[type="text"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cb-label small {
+  display: block;
+  margin-top: 3px;
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+.cb-label small code {
+  background: var(--code-bg, rgba(0,0,0,0.06));
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 0.85em;
+}
+
+.cb-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.85rem;
+  margin-bottom: 8px;
+  color: var(--fg);
+  cursor: pointer;
+}
+
+.cb-checkbox input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.cb-preview {
+  flex: 1;
+  min-height: 380px;
+  max-height: 540px;
+  margin: 0;
+  padding: 12px;
+  background: var(--code-bg, #0e1116);
+  color: var(--code-fg, #e6e6e6);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: auto;
+  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 0.8rem;
+  line-height: 1.45;
+  white-space: pre;
+  tab-size: 2;
+}
+
+.cb-preview code {
+  font-family: inherit;
+  background: transparent;
+  padding: 0;
+  color: inherit;
+  display: block;
+}
+
+.cb-validation {
+  margin-top: 8px;
+  font-size: 0.8rem;
+}
+
+.cb-issues {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cb-err {
+  padding: 6px 10px;
+  background: color-mix(in srgb, var(--err-fg, #e74c3c) 12%, transparent);
+  border-left: 3px solid var(--err-fg, #e74c3c);
+  border-radius: 4px;
+  color: var(--fg);
+}
+
+.cb-warn {
+  padding: 6px 10px;
+  background: color-mix(in srgb, var(--warn-fg, #f0c674) 12%, transparent);
+  border-left: 3px solid var(--warn-fg, #f0c674);
+  border-radius: 4px;
+  color: var(--fg);
+}
+
+.cb-ok {
+  display: inline-block;
+  padding: 4px 10px;
+  background: color-mix(in srgb, var(--ok-fg, #27ae60) 12%, transparent);
+  border-left: 3px solid var(--ok-fg, #27ae60);
+  border-radius: 4px;
+  color: var(--fg);
+}
+
+.cb-error {
+  margin-top: 8px;
+  padding: 8px 10px;
+  background: color-mix(in srgb, var(--err-fg, #e74c3c) 12%, transparent);
+  border-left: 3px solid var(--err-fg, #e74c3c);
+  border-radius: 4px;
+  color: var(--fg);
+  font-size: 0.85rem;
+}
+
+.cb-header-row {
+  display: grid;
+  grid-template-columns: 1fr 2fr auto;
+  gap: 6px;
+  margin-bottom: 6px;
+  align-items: center;
+}
+
+.cb-header-row input {
+  padding: 5px 8px;
+  font-size: 0.8rem;
+  font-family: inherit;
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+
+.cb-header-row input:focus {
+  outline: 2px solid var(--accent, #4a9eff);
+  outline-offset: -1px;
+}
+
+.cb-header-row button {
+  padding: 4px 8px;
+  font-size: 0.85rem;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--muted);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.cb-header-row button:hover {
+  border-color: var(--err-fg, #e74c3c);
+  color: var(--err-fg, #e74c3c);
+}
+
+/* Modal sizing override for the builder — needs wider content */
+#caddy-builder-modal .weather-modal-content {
+  width: min(1100px, 95vw);
+  max-height: 92vh;
+  overflow-y: auto;
+}
+
+@media (max-width: 880px) {
+  #caddy-builder-modal .weather-modal-content > div[style*="grid-template-columns"] {
+    grid-template-columns: 1fr !important;
+  }
+}

status/index.html

@@ -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>

status/js/caddy-builder.js

@@ -0,0 +1,504 @@
+// ========== CADDY VISUAL BUILDER (DC-106) ==========
+// Visual reverse-proxy builder. Lets the user describe what they want
+// in plain form fields ("blog.yourdomain.com → container X on port 80,
+// with auth, rate limiting, compression") and renders the corresponding
+// Caddyfile snippet. Uses the existing /api/v1/caddycode/generate +
+// /caddycode/validate + /caddycode/templates endpoints.
+//
+// Design: stateless — every keystroke rebuilds the snippet via debounced
+// fetch. State machine is a single plain-object `state` snapshot. No
+// external libraries. Matches the existing log-insights.js IIFE pattern.
+(function() {
+  'use strict';
+
+  // --- Constants ---------------------------------------------------------
+  const DEBOUNCE_MS = 250;
+  const TEMPLATE_PRESETS = [
+    { id: 'simple-proxy', label: 'Simple reverse proxy' },
+    { id: 'websocket-app', label: 'WebSocket application' },
+    { id: 'auth-gated', label: 'Auth-gated (DashCaddy SSO)' },
+    { id: 'cors-api', label: 'API with CORS' },
+    { id: 'subdirectory', label: 'Subdirectory proxy' },
+  ];
+
+  // --- State -------------------------------------------------------------
+  // Single source of truth for the form. Updates flow in via setState,
+  // which triggers debounced regeneration.
+  const state = {
+    domain: 'blog.example.com',
+    upstream: 'localhost:8080',
+    upstreamProtocol: 'http',
+    tls: 'auto',
+    auth: false,
+    authService: '',
+    websocket: false,
+    cors: false,
+    compress: true,
+    stripPrefix: '',
+    redirectToHttps: true,
+    headers: [], // [{ key, value }]
+    caddyfile: '',
+    validationIssues: [],
+    lastError: '',
+    generating: false,
+  };
+
+  let regenTimer = null;
+  let validateTimer = null;
+
+  // --- DOM injection -----------------------------------------------------
+  injectModal('caddy-builder-modal', `<div id="caddy-builder-modal" class="weather-modal">
+    <div class="weather-modal-content" style="min-width: 920px; max-width: 1100px;">
+      <h3>🔧 Reverse Proxy Builder</h3>
+      <p class="modal-subtitle">
+        Describe your reverse proxy in plain fields. Get a Caddyfile snippet you can
+        paste into <code>/etc/caddy/Caddyfile</code> and reload with
+        <code>caddy-apply</code>.
+      </p>
+
+      <!-- Template picker -->
+      <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 14px;">
+        <label class="text-muted-sm">Template:</label>
+        <select id="cb-template" style="padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-size: 0.85rem;">
+          <option value="">— Custom —</option>
+        </select>
+        <button id="cb-load-template" class="btn-sm">📋 Load template</button>
+        <span style="flex: 1;"></span>
+        <span id="cb-status" class="text-muted-sm"></span>
+      </div>
+
+      <!-- Form (left) + preview (right) -->
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+        <div>
+          <div class="cb-section">
+            <h4 style="margin: 0 0 8px; font-size: 0.95rem;">Routing</h4>
+            <label class="cb-label">Domain
+              <input type="text" id="cb-domain" placeholder="blog.example.com" autocomplete="off" />
+              <small>Public hostname clients will use.</small>
+            </label>
+            <label class="cb-label">Upstream (host:port)
+              <input type="text" id="cb-upstream" placeholder="localhost:8080" autocomplete="off" />
+              <small>Where requests go. <code>localhost:8080</code>, <code>my-container:80</code>, or <code>[::1]:5000</code>.</small>
+            </label>
+            <label class="cb-label">Upstream protocol
+              <select id="cb-upstream-protocol">
+                <option value="http">http://</option>
+                <option value="https">https://</option>
+              </select>
+            </label>
+            <label class="cb-label">Strip prefix (optional)
+              <input type="text" id="cb-strip-prefix" placeholder="/api" autocomplete="off" />
+              <small>Removes this prefix from the URL before proxying. E.g. <code>/api</code> rewrites <code>/api/users</code> → <code>/users</code>.</small>
+            </label>
+          </div>
+
+          <div class="cb-section">
+            <h4 style="margin: 0 0 8px; font-size: 0.95rem;">TLS</h4>
+            <label class="cb-label">TLS mode
+              <select id="cb-tls">
+                <option value="auto">auto (Caddy issues Let's Encrypt)</option>
+                <option value="internal">internal (private CA only)</option>
+                <option value="letsencrypt">letsencrypt (explicit)</option>
+              </select>
+              <small><code>auto</code> is the default for any public hostname.</small>
+            </label>
+          </div>
+
+          <div class="cb-section">
+            <h4 style="margin: 0 0 8px; font-size: 0.95rem;">Behavior</h4>
+            <label class="cb-checkbox"><input type="checkbox" id="cb-websocket" /> WebSocket support</label>
+            <label class="cb-checkbox"><input type="checkbox" id="cb-cors" /> CORS headers (Access-Control-Allow-Origin: *)</label>
+            <label class="cb-checkbox"><input type="checkbox" id="cb-compress" checked /> Compression (gzip + zstd)</label>
+            <label class="cb-checkbox"><input type="checkbox" id="cb-redirect-https" checked /> HTTP→HTTPS redirect (default in Caddy 2)</label>
+          </div>
+
+          <div class="cb-section">
+            <h4 style="margin: 0 0 8px; font-size: 0.95rem;">DashCaddy SSO</h4>
+            <label class="cb-checkbox"><input type="checkbox" id="cb-auth" /> Gate behind DashCaddy auth</label>
+            <label class="cb-label">Service ID (for auth)
+              <input type="text" id="cb-auth-service" placeholder="blog" autocomplete="off" />
+              <small>Must match a service in DashCaddy's catalog (lowercase, hyphens).</small>
+            </label>
+          </div>
+
+          <div class="cb-section">
+            <h4 style="margin: 0 0 8px; font-size: 0.95rem;">Custom headers</h4>
+            <div id="cb-headers-list"></div>
+            <button id="cb-add-header" class="btn-sm" style="margin-top: 8px;">+ Add header</button>
+          </div>
+        </div>
+
+        <div>
+          <div class="cb-section" style="display: flex; flex-direction: column; height: 100%;">
+            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+              <h4 style="margin: 0; font-size: 0.95rem;">Generated Caddyfile</h4>
+              <span style="flex: 1;"></span>
+              <button id="cb-copy" class="btn-sm">📋 Copy</button>
+              <button id="cb-validate-btn" class="btn-sm">✓ Validate</button>
+            </div>
+            <pre id="cb-preview" class="cb-preview"><code></code></pre>
+            <div id="cb-validation" class="cb-validation"></div>
+            <div id="cb-error" class="cb-error" style="display: none;"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="weather-modal-buttons">
+        <button id="cb-reset">Reset</button>
+        <button id="cb-close">Close</button>
+      </div>
+    </div>
+  </div>`);
+
+  const modal = document.getElementById('caddy-builder-modal');
+  const openBtn = document.getElementById('caddy-builder-btn');
+  const closeBtn = document.getElementById('cb-close');
+  const resetBtn = document.getElementById('cb-reset');
+  const templateSel = document.getElementById('cb-template');
+  const loadTplBtn = document.getElementById('cb-load-template');
+  const statusEl = document.getElementById('cb-status');
+  const previewEl = document.getElementById('cb-preview').querySelector('code');
+  const validationEl = document.getElementById('cb-validation');
+  const errorEl = document.getElementById('cb-error');
+  const headersList = document.getElementById('cb-headers-list');
+  const addHeaderBtn = document.getElementById('cb-add-header');
+  const copyBtn = document.getElementById('cb-copy');
+  const validateBtn = document.getElementById('cb-validate-btn');
+
+  // Form field references
+  const fields = {
+    domain: document.getElementById('cb-domain'),
+    upstream: document.getElementById('cb-upstream'),
+    upstreamProtocol: document.getElementById('cb-upstream-protocol'),
+    tls: document.getElementById('cb-tls'),
+    auth: document.getElementById('cb-auth'),
+    authService: document.getElementById('cb-auth-service'),
+    websocket: document.getElementById('cb-websocket'),
+    cors: document.getElementById('cb-cors'),
+    compress: document.getElementById('cb-compress'),
+    stripPrefix: document.getElementById('cb-strip-prefix'),
+    redirectToHttps: document.getElementById('cb-redirect-https'),
+  };
+
+  // --- Template loading --------------------------------------------------
+  let availableTemplates = {};
+
+  async function loadTemplates() {
+    try {
+      const res = await fetch('/api/v1/caddycode/templates', { credentials: 'same-origin' });
+      const data = await res.json();
+      if (data && data.templates) {
+        availableTemplates = data.templates;
+        // Populate the picker
+        templateSel.innerHTML = '<option value="">— Custom —</option>';
+        for (const preset of TEMPLATE_PRESETS) {
+          const opt = document.createElement('option');
+          opt.value = preset.id;
+          opt.textContent = preset.label;
+          templateSel.appendChild(opt);
+        }
+      }
+    } catch (err) {
+      console.warn('[caddy-builder] Failed to load templates:', err);
+    }
+  }
+
+  function applyTemplate(id) {
+    const tpl = availableTemplates[id];
+    if (!tpl || !tpl.config) return;
+    const cfg = tpl.config;
+    if (cfg.domain != null) state.domain = cfg.domain;
+    if (cfg.upstream != null) state.upstream = cfg.upstream;
+    if (cfg.upstreamProtocol != null) state.upstreamProtocol = cfg.upstreamProtocol;
+    if (cfg.tls != null) state.tls = cfg.tls;
+    if (cfg.auth != null) state.auth = !!cfg.auth;
+    if (cfg.authService != null) state.authService = cfg.authService || '';
+    if (cfg.websocket != null) state.websocket = !!cfg.websocket;
+    if (cfg.cors != null) state.cors = !!cfg.cors;
+    if (cfg.compress != null) state.compress = !!cfg.compress;
+    if (cfg.stripPrefix != null) state.stripPrefix = cfg.stripPrefix || '';
+    if (cfg.redirectToHttps != null) state.redirectToHttps = !!cfg.redirectToHttps;
+    if (Array.isArray(cfg.headers)) state.headers = cfg.headers.slice();
+    syncFieldsFromState();
+    triggerRegen();
+    setStatus('Template loaded: ' + (tpl.label || id));
+  }
+
+  // --- Headers list ------------------------------------------------------
+  function renderHeadersList() {
+    headersList.innerHTML = '';
+    state.headers.forEach((h, idx) => {
+      const row = document.createElement('div');
+      row.className = 'cb-header-row';
+      row.innerHTML = `
+        <input type="text" class="cb-h-key" placeholder="Header-Name" value="${escapeHtml(h.key || '')}" data-idx="${idx}" />
+        <input type="text" class="cb-h-value" placeholder="value" value="${escapeHtml(h.value || '')}" data-idx="${idx}" />
+        <button class="cb-h-remove" data-idx="${idx}" title="Remove">✕</button>
+      `;
+      headersList.appendChild(row);
+    });
+    // Wire handlers
+    headersList.querySelectorAll('.cb-h-key').forEach(el => {
+      el.addEventListener('input', e => {
+        const i = +e.target.dataset.idx;
+        state.headers[i].key = e.target.value;
+        triggerRegen();
+      });
+    });
+    headersList.querySelectorAll('.cb-h-value').forEach(el => {
+      el.addEventListener('input', e => {
+        const i = +e.target.dataset.idx;
+        state.headers[i].value = e.target.value;
+        triggerRegen();
+      });
+    });
+    headersList.querySelectorAll('.cb-h-remove').forEach(el => {
+      el.addEventListener('click', e => {
+        const i = +e.currentTarget.dataset.idx;
+        state.headers.splice(i, 1);
+        renderHeadersList();
+        triggerRegen();
+      });
+    });
+  }
+
+  // --- Generation --------------------------------------------------------
+  function buildPayload() {
+    const headers = {};
+    for (const h of state.headers) {
+      if (h.key && h.key.trim()) {
+        headers[h.key.trim()] = h.value || '';
+      }
+    }
+    return {
+      domain: state.domain.trim(),
+      upstream: state.upstream.trim(),
+      upstreamProtocol: state.upstreamProtocol,
+      tls: state.tls,
+      auth: state.auth,
+      authService: state.auth ? state.authService.trim() || null : null,
+      websocket: state.websocket,
+      cors: state.cors,
+      compress: state.compress,
+      stripPrefix: state.stripPrefix.trim() || null,
+      redirectToHttps: state.redirectToHttps,
+      headers,
+    };
+  }
+
+  function triggerRegen() {
+    clearTimeout(regenTimer);
+    regenTimer = setTimeout(generate, DEBOUNCE_MS);
+  }
+
+  function triggerValidate() {
+    clearTimeout(validateTimer);
+    validateTimer = setTimeout(validateGenerated, DEBOUNCE_MS + 100);
+  }
+
+  async function generate() {
+    const payload = buildPayload();
+    if (!payload.domain || !payload.upstream) {
+      previewEl.textContent = '(fill in domain + upstream to generate)';
+      state.caddyfile = '';
+      validationEl.innerHTML = '';
+      errorEl.style.display = 'none';
+      return;
+    }
+    state.generating = true;
+    setStatus('Generating…');
+    try {
+      const res = await fetch('/api/v1/caddycode/generate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify(payload),
+      });
+      const data = await res.json();
+      if (!res.ok || !data.success) {
+        state.caddyfile = '';
+        previewEl.textContent = '';
+        const errs = (data && data.errors) || [data.error || 'Generation failed'];
+        showValidationErrors(errs);
+        setStatus('Validation failed');
+        return;
+      }
+      state.caddyfile = data.caddyfile || '';
+      previewEl.textContent = state.caddyfile;
+      errorEl.style.display = 'none';
+      validationEl.innerHTML = '';
+      setStatus('✓ Generated');
+      triggerValidate();
+    } catch (err) {
+      showError('Network error: ' + (err.message || err));
+      setStatus('Network error');
+    } finally {
+      state.generating = false;
+    }
+  }
+
+  async function validateGenerated() {
+    if (!state.caddyfile) {
+      validationEl.innerHTML = '';
+      return;
+    }
+    try {
+      const res = await fetch('/api/v1/caddycode/validate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ caddyfile: state.caddyfile }),
+      });
+      const data = await res.json();
+      if (data && data.issues && data.issues.length) {
+        showValidationErrors(data.issues, data.warnings || []);
+      } else {
+        validationEl.innerHTML = '<span class="cb-ok">✓ Valid</span>';
+      }
+    } catch (err) {
+      // silent — generation status already covers network errors
+    }
+  }
+
+  function showValidationErrors(errors, warnings) {
+    let html = '<div class="cb-issues">';
+    errors.forEach(e => { html += `<div class="cb-err">⚠ ${escapeHtml(e)}</div>`; });
+    (warnings || []).forEach(w => { html += `<div class="cb-warn">⚠ ${escapeHtml(w)}</div>`; });
+    html += '</div>';
+    validationEl.innerHTML = html;
+  }
+
+  function showError(msg) {
+    errorEl.textContent = msg;
+    errorEl.style.display = 'block';
+  }
+
+  function setStatus(text) {
+    statusEl.textContent = text;
+    if (text.startsWith('✓') || text.startsWith('Template')) {
+      setTimeout(() => {
+        if (statusEl.textContent === text) statusEl.textContent = '';
+      }, 2500);
+    }
+  }
+
+  // --- Field → state sync ------------------------------------------------
+  function syncFieldsFromState() {
+    fields.domain.value = state.domain;
+    fields.upstream.value = state.upstream;
+    fields.upstreamProtocol.value = state.upstreamProtocol;
+    fields.tls.value = state.tls;
+    fields.auth.checked = state.auth;
+    fields.authService.value = state.authService;
+    fields.authService.disabled = !state.auth;
+    fields.websocket.checked = state.websocket;
+    fields.cors.checked = state.cors;
+    fields.compress.checked = state.compress;
+    fields.stripPrefix.value = state.stripPrefix;
+    fields.redirectToHttps.checked = state.redirectToHttps;
+    renderHeadersList();
+  }
+
+  function bindFieldEvents() {
+    fields.domain.addEventListener('input', e => { state.domain = e.target.value; triggerRegen(); });
+    fields.upstream.addEventListener('input', e => { state.upstream = e.target.value; triggerRegen(); });
+    fields.upstreamProtocol.addEventListener('change', e => { state.upstreamProtocol = e.target.value; triggerRegen(); });
+    fields.tls.addEventListener('change', e => { state.tls = e.target.value; triggerRegen(); });
+    fields.auth.addEventListener('change', e => {
+      state.auth = e.target.checked;
+      fields.authService.disabled = !state.auth;
+      triggerRegen();
+    });
+    fields.authService.addEventListener('input', e => { state.authService = e.target.value; triggerRegen(); });
+    fields.websocket.addEventListener('change', e => { state.websocket = e.target.checked; triggerRegen(); });
+    fields.cors.addEventListener('change', e => { state.cors = e.target.checked; triggerRegen(); });
+    fields.compress.addEventListener('change', e => { state.compress = e.target.checked; triggerRegen(); });
+    fields.stripPrefix.addEventListener('input', e => { state.stripPrefix = e.target.value; triggerRegen(); });
+    fields.redirectToHttps.addEventListener('change', e => { state.redirectToHttps = e.target.checked; triggerRegen(); });
+  }
+
+  // --- Buttons -----------------------------------------------------------
+  if (openBtn) {
+    openBtn.addEventListener('click', () => {
+      modal.style.display = 'flex';
+      syncFieldsFromState();
+      generate();
+    });
+  }
+  closeBtn.addEventListener('click', () => { modal.style.display = 'none'; });
+  resetBtn.addEventListener('click', () => {
+    state.domain = 'blog.example.com';
+    state.upstream = 'localhost:8080';
+    state.upstreamProtocol = 'http';
+    state.tls = 'auto';
+    state.auth = false;
+    state.authService = '';
+    state.websocket = false;
+    state.cors = false;
+    state.compress = true;
+    state.stripPrefix = '';
+    state.redirectToHttps = true;
+    state.headers = [];
+    templateSel.value = '';
+    syncFieldsFromState();
+    triggerRegen();
+    setStatus('Reset');
+  });
+
+  loadTplBtn.addEventListener('click', () => {
+    const id = templateSel.value;
+    if (!id) {
+      setStatus('Pick a template first');
+      return;
+    }
+    applyTemplate(id);
+  });
+
+  addHeaderBtn.addEventListener('click', () => {
+    state.headers.push({ key: '', value: '' });
+    renderHeadersList();
+  });
+
+  copyBtn.addEventListener('click', async () => {
+    if (!state.caddyfile) {
+      setStatus('Nothing to copy');
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(state.caddyfile);
+      setStatus('✓ Copied to clipboard');
+    } catch (err) {
+      // Fallback: select the preview
+      const range = document.createRange();
+      range.selectNodeContents(previewEl.parentNode);
+      const sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+      setStatus('Selected — press ⌘/Ctrl-C to copy');
+    }
+  });
+
+  validateBtn.addEventListener('click', () => {
+    if (!state.caddyfile) {
+      setStatus('Generate first');
+      return;
+    }
+    validateGenerated();
+    setStatus('Validated');
+  });
+
+  // --- Init --------------------------------------------------------------
+  bindFieldEvents();
+  syncFieldsFromState();
+  loadTemplates();
+
+  // Expose for testing
+  window.__caddyBuilder = {
+    state,
+    generate,
+    validateGenerated,
+    applyTemplate,
+    buildPayload,
+    getCaddyfile: () => state.caddyfile,
+  };
+})();