@agenticmail/enterprise 0.3.2 → 0.4.0

package/dashboards/rails/views/settings.erb

@@ -0,0 +1,578 @@
+<style>
+.settings-help-btn{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-left:6px;flex-shrink:0;transition:all .15s}
+.settings-help-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
+.settings-help-panel{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;background:rgba(232,67,147,.04);border:1px solid transparent;border-radius:8px;padding:0 16px;font-size:13px;color:var(--text-muted);line-height:1.6}
+.settings-help-panel.open{max-height:600px;padding:14px 16px;border-color:rgba(232,67,147,.15);margin-bottom:12px}
+.settings-help-panel h4{font-size:13px;font-weight:600;margin:10px 0 4px;color:var(--text)}
+.settings-help-panel ul{margin:4px 0 8px 18px}
+.settings-help-panel li{margin-bottom:2px}
+.settings-help-panel p{margin:4px 0 8px}
+</style>
+<script>
+function toggleSettingsHelp(id) {
+  var p = document.getElementById('help-' + id);
+  if (p) p.classList.toggle('open');
+}
+</script>
+<div class="page-header">
+  <h1>Settings</h1>
+  <p>Configure your AgenticMail Enterprise instance</p>
+</div>
+
+<div class="card">
+  <div style="display:flex;align-items:center;gap:0">
+    <h3>Organization Settings</h3>
+    <button class="settings-help-btn" onclick="toggleSettingsHelp('general')" title="Learn more">?</button>
+  </div>
+  <div id="help-general" class="settings-help-panel">
+    <p>The General section configures your organization's identity and email delivery.</p>
+    <h4>Organization</h4>
+    <ul>
+    <li><strong>Company Name</strong> — Appears throughout the dashboard and in emails sent by agents.</li>
+    <li><strong>Domain</strong> — Your company's primary domain, used for agent email addresses.</li>
+    <li><strong>Subdomain</strong> — Your unique ID on the AgenticMail cloud (subdomain.agenticmail.io).</li>
+    <li><strong>Logo URL</strong> — Link to your company logo, shown in dashboard and emails.</li>
+    <li><strong>Primary Color</strong> — Customizes the dashboard accent color to match your brand.</li>
+    </ul>
+    <h4>SMTP Configuration</h4>
+    <p>Controls outgoing email delivery. Leave blank to use the default AgenticMail relay. Configure custom SMTP to send from your own mail infrastructure.</p>
+  </div>
+  <form method="post" action="/settings">
+    <div class="form-row">
+      <div class="form-group">
+        <label>Organization Name</label>
+        <input type="text" name="org_name" value="<%= escape_html(@settings['org_name'] || '') %>" placeholder="Your Org">
+      </div>
+      <div class="form-group">
+        <label>Default Model</label>
+        <input type="text" name="default_model" value="<%= escape_html(@settings['default_model'] || '') %>" placeholder="gpt-4o">
+      </div>
+    </div>
+    <div class="form-row">
+      <div class="form-group">
+        <label>Max Agents</label>
+        <input type="number" name="max_agents" value="<%= escape_html(@settings['max_agents'] || '') %>" placeholder="50">
+      </div>
+      <div class="form-group">
+        <label>Rate Limit (req/min)</label>
+        <input type="number" name="rate_limit" value="<%= escape_html(@settings['rate_limit'] || '') %>" placeholder="1000">
+      </div>
+    </div>
+    <div class="form-group">
+      <label>Webhook URL</label>
+      <input type="url" name="webhook_url" value="<%= escape_html(@settings['webhook_url'] || '') %>" placeholder="https://hooks.example.com/events">
+    </div>
+    <button class="btn btn-primary" type="submit">Save Settings</button>
+  </form>
+</div>
+
+<!-- Tool Security Settings -->
+<%
+  ts = @tool_security || {}
+  ts_sec = ts['security'] || {}
+  ts_mw = ts['middleware'] || {}
+  ps = ts_sec['pathSandbox'] || {}
+  ssrf = ts_sec['ssrf'] || {}
+  cs = ts_sec['commandSanitizer'] || {}
+  mw_audit = ts_mw['audit'] || {}
+  mw_rl = ts_mw['rateLimit'] || {}
+  mw_cb = ts_mw['circuitBreaker'] || {}
+  mw_tel = ts_mw['telemetry'] || {}
+%>
+<div class="card">
+  <div style="display:flex;align-items:center;gap:0">
+    <h3>Tool Security</h3>
+    <button class="settings-help-btn" onclick="toggleSettingsHelp('tool-security')" title="Learn more">?</button>
+  </div>
+  <div id="help-tool-security" class="settings-help-panel">
+    <p>Tool Security controls what AI agents are allowed to do at the system level — safety guardrails that prevent agents from accessing sensitive resources.</p>
+    <h4>Security Sandboxes</h4>
+    <ul>
+    <li><strong>Path Sandbox</strong> — Restricts which folders agents can read/write. Prevents access to sensitive files.</li>
+    <li><strong>SSRF Protection</strong> — Blocks agents from reaching internal networks, cloud metadata, or private IPs.</li>
+    <li><strong>Command Sanitizer</strong> — Controls which shell commands agents can execute. Blocklist blocks dangerous patterns; Allowlist only permits specified commands.</li>
+    </ul>
+    <h4>Middleware &amp; Observability</h4>
+    <ul>
+    <li><strong>Audit Logging</strong> — Records every tool action: what, when, success/failure, duration. Sensitive fields are auto-redacted.</li>
+    <li><strong>Rate Limiting</strong> — Limits tool calls per minute per agent. Prevents system overload.</li>
+    <li><strong>Circuit Breaker</strong> — Auto-pauses tools that keep failing (5 consecutive errors). Waits 30s before retry.</li>
+    <li><strong>Telemetry</strong> — Collects performance metrics: call duration, success rates, output sizes.</li>
+    </ul>
+  </div>
+  <p style="color:var(--text-muted);font-size:13px;margin-bottom:16px">Organization-wide tool security defaults. Individual agents can override these settings.</p>
+  <form method="post" action="/settings/tool-security">
+
+    <h4 style="font-size:13px;font-weight:600;color:var(--primary);margin-bottom:12px;margin-top:4px">Security</h4>
+
+    <!-- Path Sandbox -->
+    <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px">
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+        <input type="checkbox" name="path_sandbox_enabled" id="path_sandbox_enabled" <%= ps['enabled'] != false ? 'checked' : '' %> style="width:auto">
+        <label for="path_sandbox_enabled" style="font-weight:600;font-size:13px;margin:0">Path Sandbox</label>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>Allowed Directories <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="path_sandbox_allowed_dirs" value="<%= escape_html((ps['allowedDirs'] || []).join(', ')) %>" placeholder="/tmp, /data">
+        </div>
+        <div class="form-group">
+          <label>Blocked Patterns <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="path_sandbox_blocked_patterns" value="<%= escape_html((ps['blockedPatterns'] || []).join(', ')) %>" placeholder="*.key, *.pem">
+        </div>
+      </div>
+    </div>
+
+    <!-- SSRF Protection -->
+    <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px">
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+        <input type="checkbox" name="ssrf_enabled" id="ssrf_enabled" <%= ssrf['enabled'] != false ? 'checked' : '' %> style="width:auto">
+        <label for="ssrf_enabled" style="font-weight:600;font-size:13px;margin:0">SSRF Protection</label>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>Allowed Hosts <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="ssrf_allowed_hosts" value="<%= escape_html((ssrf['allowedHosts'] || []).join(', ')) %>" placeholder="api.example.com, cdn.example.com">
+        </div>
+        <div class="form-group">
+          <label>Blocked CIDRs <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="ssrf_blocked_cidrs" value="<%= escape_html((ssrf['blockedCidrs'] || []).join(', ')) %>" placeholder="10.0.0.0/8, 172.16.0.0/12">
+        </div>
+      </div>
+    </div>
+
+    <!-- Command Sanitizer -->
+    <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:16px">
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+        <input type="checkbox" name="command_sanitizer_enabled" id="command_sanitizer_enabled" <%= cs['enabled'] != false ? 'checked' : '' %> style="width:auto">
+        <label for="command_sanitizer_enabled" style="font-weight:600;font-size:13px;margin:0">Command Sanitizer</label>
+      </div>
+      <div class="form-group">
+        <label>Mode</label>
+        <select name="command_sanitizer_mode">
+          <option value="blocklist" <%= (cs['mode'] || 'blocklist') == 'blocklist' ? 'selected' : '' %>>Blocklist</option>
+          <option value="allowlist" <%= cs['mode'] == 'allowlist' ? 'selected' : '' %>>Allowlist</option>
+        </select>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>Allowed Commands <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="command_sanitizer_allowed" value="<%= escape_html((cs['allowedCommands'] || []).join(', ')) %>" placeholder="ls, cat, grep">
+        </div>
+        <div class="form-group">
+          <label>Blocked Patterns <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="command_sanitizer_blocked" value="<%= escape_html((cs['blockedPatterns'] || []).join(', ')) %>" placeholder="rm -rf, sudo, chmod">
+        </div>
+      </div>
+    </div>
+
+    <h4 style="font-size:13px;font-weight:600;color:var(--primary);margin-bottom:12px">Middleware</h4>
+
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px">
+      <!-- Audit -->
+      <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+          <input type="checkbox" name="audit_enabled" id="audit_enabled" <%= mw_audit['enabled'] != false ? 'checked' : '' %> style="width:auto">
+          <label for="audit_enabled" style="font-weight:600;font-size:13px;margin:0">Audit Logging</label>
+        </div>
+        <div class="form-group" style="margin-bottom:0">
+          <label>Redact Keys <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="audit_redact_keys" value="<%= escape_html((mw_audit['redactKeys'] || []).join(', ')) %>" placeholder="password, secret, token">
+        </div>
+      </div>
+
+      <!-- Rate Limit -->
+      <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+          <input type="checkbox" name="rate_limit_mw_enabled" id="rate_limit_mw_enabled" <%= mw_rl['enabled'] != false ? 'checked' : '' %> style="width:auto">
+          <label for="rate_limit_mw_enabled" style="font-weight:600;font-size:13px;margin:0">Rate Limiting</label>
+        </div>
+        <p style="color:var(--text-muted);font-size:12px;margin:0">Per-tool overrides can be configured via API.</p>
+      </div>
+
+      <!-- Circuit Breaker -->
+      <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px">
+        <div style="display:flex;align-items:center;gap:8px">
+          <input type="checkbox" name="circuit_breaker_enabled" id="circuit_breaker_enabled" <%= mw_cb['enabled'] != false ? 'checked' : '' %> style="width:auto">
+          <label for="circuit_breaker_enabled" style="font-weight:600;font-size:13px;margin:0">Circuit Breaker</label>
+        </div>
+      </div>
+
+      <!-- Telemetry -->
+      <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px">
+        <div style="display:flex;align-items:center;gap:8px">
+          <input type="checkbox" name="telemetry_enabled" id="telemetry_enabled" <%= mw_tel['enabled'] != false ? 'checked' : '' %> style="width:auto">
+          <label for="telemetry_enabled" style="font-weight:600;font-size:13px;margin:0">Telemetry</label>
+        </div>
+      </div>
+    </div>
+
+    <button class="btn btn-primary" type="submit">Save Tool Security</button>
+  </form>
+</div>
+
+<!-- Network & Firewall Settings -->
+<%
+  fw = @firewall || {}
+  fw_ip = fw['ipAccess'] || {}
+  fw_egress = fw['egress'] || {}
+  fw_proxy = fw['proxy'] || {}
+  fw_tp = fw['trustedProxies'] || {}
+  fw_net = fw['network'] || {}
+  fw_rl = fw_net['rateLimit'] || {}
+  fw_https = fw_net['httpsEnforcement'] || {}
+  fw_sh = fw_net['securityHeaders'] || {}
+%>
+<div class="card">
+  <div style="display:flex;align-items:center;gap:0">
+    <h3>Network &amp; Firewall</h3>
+    <button class="settings-help-btn" onclick="toggleSettingsHelp('network')" title="Learn more">?</button>
+  </div>
+  <div id="help-network" class="settings-help-panel">
+    <p>Controls who can access your AgenticMail instance and what agents can reach on the internet.</p>
+    <h4>IP Access Control</h4>
+    <p>Restricts which IPs can reach the dashboard and APIs. Allowlist = only listed IPs connect. Blocklist = all except blocked IPs.</p>
+    <h4>Outbound Egress</h4>
+    <p>Controls which external hosts/ports agents can reach. Allowlist = only approved hosts. Blocklist = everything except blocked hosts.</p>
+    <h4>Proxy &amp; Trusted Proxies</h4>
+    <ul>
+    <li><strong>Proxy Config</strong> — HTTP/HTTPS proxy URLs for outbound access. "No-Proxy" bypasses the proxy.</li>
+    <li><strong>Trusted Proxies</strong> — IPs of your load balancers/reverse proxies, so IP access control sees real client IPs.</li>
+    </ul>
+    <h4>Network Settings</h4>
+    <ul>
+    <li><strong>CORS Origins</strong> — Which websites can make API calls to AgenticMail. Empty = allow all.</li>
+    <li><strong>Rate Limiting</strong> — Limits API requests per IP per minute. Protects against abuse.</li>
+    <li><strong>HTTPS Enforcement</strong> — Forces encrypted connections. Recommended for production.</li>
+    <li><strong>Security Headers</strong> — Browser security: HSTS, X-Frame-Options, Content-Type-Options.</li>
+    </ul>
+  </div>
+  <p style="color:var(--text-muted);font-size:13px;margin-bottom:16px">IP access control, egress filtering, proxy configuration, and network security settings.</p>
+  <form method="post" action="/settings/firewall">
+
+    <h4 style="font-size:13px;font-weight:600;color:var(--primary);margin-bottom:12px;margin-top:4px">IP Access Control</h4>
+
+    <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px">
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+        <input type="checkbox" name="fw_ip_enabled" id="fw_ip_enabled" <%= fw_ip['enabled'] ? 'checked' : '' %> style="width:auto">
+        <label for="fw_ip_enabled" style="font-weight:600;font-size:13px;margin:0">Enable IP Access Control</label>
+      </div>
+      <div class="form-group" style="margin-bottom:10px">
+        <label>Mode</label>
+        <select name="fw_ip_mode">
+          <option value="allowlist" <%= (fw_ip['mode'] || 'allowlist') == 'allowlist' ? 'selected' : '' %>>Allowlist</option>
+          <option value="blocklist" <%= fw_ip['mode'] == 'blocklist' ? 'selected' : '' %>>Blocklist</option>
+        </select>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>Allowlist CIDRs <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="fw_ip_allowlist" value="<%= escape_html((fw_ip['allowlist'] || []).join(', ')) %>" placeholder="10.0.0.0/8, 192.168.1.0/24">
+        </div>
+        <div class="form-group">
+          <label>Blocklist CIDRs <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="fw_ip_blocklist" value="<%= escape_html((fw_ip['blocklist'] || []).join(', ')) %>" placeholder="0.0.0.0/0">
+        </div>
+      </div>
+      <div class="form-group">
+        <label>Bypass Paths <small style="color:var(--text-muted)">(comma-separated)</small></label>
+        <input type="text" name="fw_ip_bypass_paths" value="<%= escape_html((fw_ip['bypassPaths'] || []).join(', ')) %>" placeholder="/health, /ready">
+      </div>
+    </div>
+
+    <h4 style="font-size:13px;font-weight:600;color:var(--primary);margin-bottom:12px">Outbound Egress</h4>
+
+    <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px">
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+        <input type="checkbox" name="fw_egress_enabled" id="fw_egress_enabled" <%= fw_egress['enabled'] ? 'checked' : '' %> style="width:auto">
+        <label for="fw_egress_enabled" style="font-weight:600;font-size:13px;margin:0">Enable Egress Filtering</label>
+      </div>
+      <div class="form-group" style="margin-bottom:10px">
+        <label>Mode</label>
+        <select name="fw_egress_mode">
+          <option value="blocklist" <%= (fw_egress['mode'] || 'blocklist') == 'blocklist' ? 'selected' : '' %>>Blocklist</option>
+          <option value="allowlist" <%= fw_egress['mode'] == 'allowlist' ? 'selected' : '' %>>Allowlist</option>
+        </select>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>Allowed Hosts <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="fw_egress_allowed_hosts" value="<%= escape_html((fw_egress['allowedHosts'] || []).join(', ')) %>" placeholder="api.example.com">
+        </div>
+        <div class="form-group">
+          <label>Blocked Hosts <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="fw_egress_blocked_hosts" value="<%= escape_html((fw_egress['blockedHosts'] || []).join(', ')) %>" placeholder="evil.com">
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>Allowed Ports <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="fw_egress_allowed_ports" value="<%= escape_html((fw_egress['allowedPorts'] || []).join(', ')) %>" placeholder="80, 443">
+        </div>
+        <div class="form-group">
+          <label>Blocked Ports <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="fw_egress_blocked_ports" value="<%= escape_html((fw_egress['blockedPorts'] || []).join(', ')) %>" placeholder="25, 587">
+        </div>
+      </div>
+    </div>
+
+    <h4 style="font-size:13px;font-weight:600;color:var(--primary);margin-bottom:12px">Proxy</h4>
+
+    <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px">
+      <div class="form-row">
+        <div class="form-group">
+          <label>HTTP Proxy</label>
+          <input type="text" name="fw_proxy_http" value="<%= escape_html(fw_proxy['httpProxy'] || '') %>" placeholder="http://proxy.example.com:8080">
+        </div>
+        <div class="form-group">
+          <label>HTTPS Proxy</label>
+          <input type="text" name="fw_proxy_https" value="<%= escape_html(fw_proxy['httpsProxy'] || '') %>" placeholder="https://proxy.example.com:8443">
+        </div>
+      </div>
+      <div class="form-group">
+        <label>No-Proxy Hosts <small style="color:var(--text-muted)">(comma-separated)</small></label>
+        <input type="text" name="fw_proxy_no_proxy" value="<%= escape_html((fw_proxy['noProxy'] || []).join(', ')) %>" placeholder="localhost, 127.0.0.1">
+      </div>
+    </div>
+
+    <h4 style="font-size:13px;font-weight:600;color:var(--primary);margin-bottom:12px">Trusted Proxies</h4>
+
+    <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px">
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+        <input type="checkbox" name="fw_trusted_proxies_enabled" id="fw_trusted_proxies_enabled" <%= fw_tp['enabled'] ? 'checked' : '' %> style="width:auto">
+        <label for="fw_trusted_proxies_enabled" style="font-weight:600;font-size:13px;margin:0">Enable Trusted Proxies</label>
+      </div>
+      <div class="form-group">
+        <label>Proxy IPs / CIDRs <small style="color:var(--text-muted)">(comma-separated)</small></label>
+        <input type="text" name="fw_trusted_proxies_ips" value="<%= escape_html((fw_tp['ips'] || []).join(', ')) %>" placeholder="10.0.0.1, 172.16.0.0/12">
+      </div>
+    </div>
+
+    <h4 style="font-size:13px;font-weight:600;color:var(--primary);margin-bottom:12px">Network Settings</h4>
+
+    <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px">
+      <div class="form-group" style="margin-bottom:10px">
+        <label>CORS Origins <small style="color:var(--text-muted)">(comma-separated)</small></label>
+        <input type="text" name="fw_cors_origins" value="<%= escape_html((fw_net['corsOrigins'] || []).join(', ')) %>" placeholder="https://app.example.com, https://admin.example.com">
+      </div>
+
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+        <input type="checkbox" name="fw_rate_limit_enabled" id="fw_rate_limit_enabled" <%= fw_rl['enabled'] != false ? 'checked' : '' %> style="width:auto">
+        <label for="fw_rate_limit_enabled" style="font-weight:600;font-size:13px;margin:0">Rate Limiting</label>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>Requests per Minute</label>
+          <input type="number" name="fw_rate_limit_rpm" value="<%= escape_html(fw_rl['requestsPerMinute'] || 120) %>" placeholder="120">
+        </div>
+        <div class="form-group">
+          <label>Skip Paths <small style="color:var(--text-muted)">(comma-separated)</small></label>
+          <input type="text" name="fw_rate_limit_skip_paths" value="<%= escape_html((fw_rl['skipPaths'] || []).join(', ')) %>" placeholder="/health, /ready">
+        </div>
+      </div>
+
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;margin-top:12px">
+        <input type="checkbox" name="fw_https_enabled" id="fw_https_enabled" <%= fw_https['enabled'] ? 'checked' : '' %> style="width:auto">
+        <label for="fw_https_enabled" style="font-weight:600;font-size:13px;margin:0">HTTPS Enforcement</label>
+      </div>
+      <div class="form-group" style="margin-bottom:12px">
+        <label>Exclude Paths <small style="color:var(--text-muted)">(comma-separated)</small></label>
+        <input type="text" name="fw_https_exclude_paths" value="<%= escape_html((fw_https['excludePaths'] || []).join(', ')) %>" placeholder="/health, /ready">
+      </div>
+    </div>
+
+    <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:16px">
+      <div style="font-weight:600;font-size:13px;margin-bottom:10px">Security Headers</div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px">
+        <div style="display:flex;align-items:center;gap:8px">
+          <input type="checkbox" name="fw_hsts_enabled" id="fw_hsts_enabled" <%= fw_sh['hsts'] != false ? 'checked' : '' %> style="width:auto">
+          <label for="fw_hsts_enabled" style="font-size:13px;margin:0">HSTS</label>
+        </div>
+        <div class="form-group" style="margin-bottom:0">
+          <label>HSTS Max-Age (seconds)</label>
+          <input type="number" name="fw_hsts_max_age" value="<%= escape_html(fw_sh['hstsMaxAge'] || 31536000) %>" placeholder="31536000">
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>X-Frame-Options</label>
+          <select name="fw_x_frame_options">
+            <option value="DENY" <%= (fw_sh['xFrameOptions'] || 'DENY') == 'DENY' ? 'selected' : '' %>>DENY</option>
+            <option value="SAMEORIGIN" <%= fw_sh['xFrameOptions'] == 'SAMEORIGIN' ? 'selected' : '' %>>SAMEORIGIN</option>
+          </select>
+        </div>
+        <div class="form-group" style="display:flex;align-items:center;gap:8px;padding-top:22px">
+          <input type="checkbox" name="fw_x_content_type_options" id="fw_x_content_type_options" <%= fw_sh['xContentTypeOptions'] != false ? 'checked' : '' %> style="width:auto">
+          <label for="fw_x_content_type_options" style="font-size:13px;margin:0">X-Content-Type-Options: nosniff</label>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>Referrer-Policy</label>
+          <input type="text" name="fw_referrer_policy" value="<%= escape_html(fw_sh['referrerPolicy'] || 'strict-origin-when-cross-origin') %>" placeholder="strict-origin-when-cross-origin">
+        </div>
+        <div class="form-group">
+          <label>Permissions-Policy</label>
+          <input type="text" name="fw_permissions_policy" value="<%= escape_html(fw_sh['permissionsPolicy'] || 'camera=(), microphone=(), geolocation=()') %>" placeholder="camera=(), microphone=(), geolocation=()">
+        </div>
+      </div>
+    </div>
+
+    <button class="btn btn-primary" type="submit">Save Network &amp; Firewall</button>
+  </form>
+</div>
+
+<!-- Model Pricing Settings -->
+<%
+  mp = @model_pricing || {}
+  mp_models = mp['models'] || []
+  mp_currency = mp['currency'] || 'USD'
+  mp_providers = mp_models.map { |m| m['provider'] }.uniq.sort
+%>
+<div class="card">
+  <div style="display:flex;align-items:center;gap:0">
+    <h3>Model Pricing</h3>
+    <button class="settings-help-btn" onclick="toggleSettingsHelp('model-pricing')" title="Learn more">?</button>
+  </div>
+  <div id="help-model-pricing" class="settings-help-panel">
+    <p>Configure per-model pricing for cost tracking and budget management across your AI agents.</p>
+    <h4>Model Configuration</h4>
+    <ul>
+    <li><strong>Provider</strong> — The AI provider (e.g. openai, anthropic, google, mistral).</li>
+    <li><strong>Model ID</strong> — The provider's model identifier (e.g. gpt-4o, claude-sonnet-4-20250514).</li>
+    <li><strong>Display Name</strong> — A friendly label shown in the dashboard.</li>
+    <li><strong>Input Cost</strong> — Cost per million input tokens in the selected currency.</li>
+    <li><strong>Output Cost</strong> — Cost per million output tokens in the selected currency.</li>
+    <li><strong>Context Window</strong> — Maximum token context length for the model.</li>
+    </ul>
+  </div>
+  <p style="color:var(--text-muted);font-size:13px;margin-bottom:16px">Define per-model token pricing for cost tracking and agent budget enforcement.</p>
+
+  <form method="post" action="/settings/model-pricing">
+    <div class="form-group" style="max-width:200px;margin-bottom:16px">
+      <label>Currency</label>
+      <select name="mp_currency">
+        <option value="USD" <%= mp_currency == 'USD' ? 'selected' : '' %>>USD</option>
+        <option value="EUR" <%= mp_currency == 'EUR' ? 'selected' : '' %>>EUR</option>
+        <option value="GBP" <%= mp_currency == 'GBP' ? 'selected' : '' %>>GBP</option>
+      </select>
+    </div>
+
+    <% if mp_models.any? %>
+      <% mp_providers.each do |provider| %>
+        <h4 style="font-size:13px;font-weight:600;color:var(--primary);margin-bottom:8px;margin-top:16px;text-transform:capitalize"><%= escape_html(provider) %></h4>
+        <div class="table-wrap" style="margin-bottom:12px">
+          <table>
+            <thead>
+              <tr>
+                <th>Model ID</th>
+                <th>Display Name</th>
+                <th>Input Cost / 1M tokens</th>
+                <th>Output Cost / 1M tokens</th>
+                <th>Context Window</th>
+                <th style="width:60px"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <% mp_models.each_with_index do |m, idx| %>
+                <% next unless m['provider'] == provider %>
+                <tr>
+                  <td>
+                    <input type="hidden" name="model_provider_<%= idx %>" value="<%= escape_html(m['provider']) %>">
+                    <input type="hidden" name="model_id_<%= idx %>" value="<%= escape_html(m['modelId']) %>">
+                    <code style="font-size:12px"><%= escape_html(m['modelId']) %></code>
+                  </td>
+                  <td>
+                    <input type="text" name="model_display_name_<%= idx %>" value="<%= escape_html(m['displayName'] || '') %>" style="min-width:120px">
+                  </td>
+                  <td>
+                    <input type="number" step="0.01" name="model_input_cost_<%= idx %>" value="<%= m['inputCostPerMillion'] || 0 %>" style="min-width:100px">
+                  </td>
+                  <td>
+                    <input type="number" step="0.01" name="model_output_cost_<%= idx %>" value="<%= m['outputCostPerMillion'] || 0 %>" style="min-width:100px">
+                  </td>
+                  <td>
+                    <input type="number" name="model_context_window_<%= idx %>" value="<%= m['contextWindow'] || 0 %>" style="min-width:100px">
+                  </td>
+                  <td>
+                    <button type="submit" name="remove_model_index" value="<%= idx %>" class="btn btn-sm" style="background:var(--danger);color:#fff;border:none;padding:4px 10px;font-size:12px;border-radius:4px;cursor:pointer" title="Remove model" onclick="return confirm('Remove this model?')">Remove</button>
+                  </td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+        </div>
+      <% end %>
+    <% else %>
+      <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center;color:var(--text-muted);font-size:13px;margin-bottom:16px">
+        No models configured. Add your first model below.
+      </div>
+    <% end %>
+
+    <h4 style="font-size:13px;font-weight:600;color:var(--primary);margin-bottom:12px;margin-top:16px">Add Model</h4>
+    <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:16px">
+      <div class="form-row">
+        <div class="form-group">
+          <label>Provider</label>
+          <select name="new_model_provider">
+            <option value="">Select provider...</option>
+            <option value="anthropic">Anthropic</option>
+            <option value="openai">OpenAI</option>
+            <option value="google">Google</option>
+            <option value="deepseek">DeepSeek</option>
+            <option value="xai">xAI (Grok)</option>
+            <option value="mistral">Mistral</option>
+            <option value="groq">Groq</option>
+            <option value="together">Together</option>
+            <option value="fireworks">Fireworks</option>
+            <option value="moonshot">Moonshot (Kimi)</option>
+            <option value="cerebras">Cerebras</option>
+            <option value="openrouter">OpenRouter</option>
+            <option value="ollama">Ollama (Local)</option>
+            <option value="vllm">vLLM (Local)</option>
+            <option value="lmstudio">LM Studio (Local)</option>
+            <option value="litellm">LiteLLM (Local)</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>Model ID</label>
+          <input type="text" name="new_model_id" placeholder="gpt-4o" value="">
+        </div>
+        <div class="form-group">
+          <label>Display Name</label>
+          <input type="text" name="new_model_display_name" placeholder="GPT-4o" value="">
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>Input Cost / 1M tokens</label>
+          <input type="number" step="0.01" name="new_model_input_cost" placeholder="2.50" value="">
+        </div>
+        <div class="form-group">
+          <label>Output Cost / 1M tokens</label>
+          <input type="number" step="0.01" name="new_model_output_cost" placeholder="10.00" value="">
+        </div>
+        <div class="form-group">
+          <label>Context Window</label>
+          <input type="number" name="new_model_context_window" placeholder="128000" value="">
+        </div>
+      </div>
+    </div>
+
+    <button class="btn btn-primary" type="submit">Save Model Pricing</button>
+  </form>
+</div>
+
+<div class="card">
+  <h3>Instance Information</h3>
+  <div class="table-wrap">
+    <table>
+      <tbody>
+        <tr><td style="font-weight:600;width:200px">API Endpoint</td><td><code><%= escape_html(API_BASE) %></code></td></tr>
+        <tr><td style="font-weight:600">Version</td><td><%= escape_html(@settings['version'] || @settings['app_version'] || '-') %></td></tr>
+        <tr><td style="font-weight:600">Plan</td><td><%= escape_html(@settings['plan'] || @settings['tier'] || 'Enterprise') %></td></tr>
+        <tr><td style="font-weight:600">Region</td><td><%= escape_html(@settings['region'] || '-') %></td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>