faultmesh 1.0.0 → 1.1.0

package/dist/dashboard/index.html

@@ -17,7 +17,16 @@
         <span class="app-tagline">Automated API Resilience &amp; Security Audit Engine</span>
       </div>
       <div class="header-right">
-        <span class="proxy-status">Proxy on <strong>127.0.0.1:3001</strong> &rarr; Target on <strong>127.0.0.1:4000</strong></span>
+        <div class="target-url-control">
+          <label for="targetUrlInput" class="target-label">Target API:</label>
+          <input type="text" id="targetUrlInput" class="input-target-url" value="http://127.0.0.1:5050" placeholder="http://localhost:8000" spellcheck="false" title="Target backend URL to audit and proxy">
+          <button id="btnSetTargetUrl" class="btn-target-apply" type="button" title="Switch the proxy target backend">Set</button>
+          <div class="target-quick-pills" style="display: flex; gap: 3px; margin-left: 4px;">
+            <button id="btnTarget5050" class="btn-text btn-sm" style="font-size: 10px; font-family: var(--font-mono); padding: 2px 5px; border: 1px solid var(--border-default); border-radius: 3px;" type="button" title="Target real Express vulnerable backend with source code">:5050 (Sample App)</button>
+            <button id="btnTarget4000" class="btn-text btn-sm" style="font-size: 10px; font-family: var(--font-mono); padding: 2px 5px; border: 1px solid var(--border-default); border-radius: 3px;" type="button" title="Target internal mock echo server">:4000 (Mock Echo)</button>
+          </div>
+        </div>
+        <span class="proxy-status">Proxy: <strong>:3001</strong></span>
         <button id="themeToggle" class="btn-text">Switch Theme</button>
       </div>
     </div>
@@ -38,47 +47,214 @@
             <span class="suite-badge">PRIMARY AUDIT SUITE</span>
           </div>
           <h2 id="diagHeaderTitle">Automated API Resilience Benchmark</h2>
-          <p id="diagHeaderSubtitle">Automated 5-point test suite evaluating client resilience against network delay, throttling, cuts, corruptions, and 503 outages.</p>
+          <p id="diagHeaderSubtitle">Automated 10-point test suite evaluating client resilience against network delay, throttling, cuts, corruptions, 503 outages, jitter, circuit breakers, and starvation.</p>
         </div>
 
         <div class="diag-tabs">
-          <button id="tabResilience" class="diag-tab active" type="button">Network Resilience (5 Checks)</button>
-          <button id="tabSecurity" class="diag-tab" type="button">Security &amp; Protocol (7 Checks)</button>
-          <button id="tabStorm" class="diag-tab" type="button">Traffic Storms &amp; DoS (4 Checks)</button>
+          <button id="tabResilience" class="diag-tab active" type="button">Network Resilience (10 Checks)</button>
+          <button id="tabSecurity" class="diag-tab" type="button">Security &amp; Protocol (14 Checks)</button>
+          <button id="tabStorm" class="diag-tab" type="button">Traffic Storms &amp; DoS (8 Checks)</button>
+          <button id="tabRedTeam" class="diag-tab diag-tab-redteam" type="button">Red Chaos Team (Agentic)</button>
         </div>
       </div>
 
-      <!-- Audit Banner: Score Summary & Action Runner -->
-      <div class="audit-banner">
-        <div class="score-summary">
-          <div class="score-pill">
-            <span id="scoreValue" class="score-number">--</span>
-            <span id="scoreGrade" class="score-label">UNTESTED</span>
+      <!-- Standard 32-Check Audit Panel (Resilience, Security, Traffic Storm) -->
+      <div id="standardAuditPanel">
+        <!-- Audit Banner: Score Summary & Action Runner -->
+        <div class="audit-banner">
+          <div class="score-summary">
+            <div class="score-pill">
+              <span id="scoreValue" class="score-number">--</span>
+              <span id="scoreGrade" class="score-label">UNTESTED</span>
+            </div>
+            <div class="score-text">
+              <strong id="scoreTitle">Ready to evaluate</strong>
+              <p id="scoreSubtitle">Select a target profile and click "Run Benchmark" to execute the 10 resilience checks below.</p>
+            </div>
           </div>
-          <div class="score-text">
-            <strong id="scoreTitle">Ready to evaluate</strong>
-            <p id="scoreSubtitle">Select a target profile and click "Run Benchmark" to execute all 5 checks below.</p>
+
+          <div class="diagnostics-actions">
+            <div class="export-btn-group" id="exportGroup" style="display: none;">
+              <button id="btnOpenHealer" class="btn-secondary btn-healer-trigger" type="button" title="Scan and automatically heal backend source code">Auto-Heal Codebase</button>
+              <button id="btnExportMd" class="btn-secondary btn-export" type="button" title="Download formatted Markdown scorecard">Export Markdown</button>
+              <button id="btnExportJson" class="btn-secondary btn-export" type="button" title="Download raw JSON scorecard">Export JSON</button>
+            </div>
+            <select id="testTargetProfile" class="form-input select-profile" title="Target App Profile">
+              <option value="resilient">Target: Resilient App (Grade A)</option>
+              <option value="fragile">Target: Fragile App (Grade F)</option>
+            </select>
+            <button id="btnRunDiagnostics" class="btn-primary btn-run-diagnostics">Run 10-Point Resilience Benchmark</button>
           </div>
         </div>
 
-        <div class="diagnostics-actions">
-          <select id="testTargetProfile" class="form-input select-profile" title="Target App Profile">
-            <option value="resilient">Target: Resilient App (Grade A)</option>
-            <option value="fragile">Target: Fragile App (Grade F)</option>
-          </select>
-          <button id="btnRunDiagnostics" class="btn-primary btn-run-diagnostics">Run 5-Point Benchmark</button>
+        <!-- Test Checklist & Results Area (Informs all checks upfront!) -->
+        <div class="checklist-container">
+          <div class="checklist-header">
+            <span class="checklist-title">Verification Criteria</span>
+            <span id="checklistCountTag" class="count-tag">5 checks ready</span>
+          </div>
+
+          <div id="diagnosticsResults" class="test-results-list">
+            <!-- Populated by JS upfront and updated on run -->
+          </div>
         </div>
       </div>
 
-      <!-- Test Checklist & Results Area (Informs all checks upfront!) -->
-      <div class="checklist-container">
-        <div class="checklist-header">
-          <span class="checklist-title">Verification Criteria</span>
-          <span id="checklistCountTag" class="count-tag">5 checks ready</span>
+      <!-- Autonomous Red Chaos Team Engine Panel -->
+      <div id="redTeamPanel" class="redteam-panel" style="display: none;">
+        <!-- 1. Red Squadron Persona Badges -->
+        <div class="redteam-squadron-header">
+          <div class="squadron-title-group">
+            <span class="squadron-badge">AGENTIC SQUADRON</span>
+            <h4>Autonomous Red Team Agent Personas</h4>
+          </div>
+          <span class="squadron-status-tag">5 Active Personas Armed</span>
         </div>
 
-        <div id="diagnosticsResults" class="test-results-list">
-          <!-- Populated by JS upfront and updated on run -->
+        <div id="redTeamPersonasGrid" class="redteam-personas-grid">
+          <div class="persona-card" data-persona="security-reviewer">
+            <div class="persona-top">
+              <span class="persona-callsign">VULN-HUNTER</span>
+              <span class="persona-role-tag">Security</span>
+            </div>
+            <strong class="persona-name">Security Reviewer</strong>
+            <p class="persona-desc">Probes host poisoning, IP spoofing, path traversal, broken auth crashes, and secret leakage.</p>
+          </div>
+          <div class="persona-card" data-persona="silent-failure-hunter">
+            <div class="persona-top">
+              <span class="persona-callsign">SILENT-TRAPPER</span>
+              <span class="persona-role-tag">Silent Failure</span>
+            </div>
+            <strong class="persona-name">Silent Failure Hunter</strong>
+            <p class="persona-desc">Detects swallowed exceptions, truncated JSON streams, and unhandled socket drops.</p>
+          </div>
+          <div class="persona-card" data-persona="performance-optimizer">
+            <div class="persona-top">
+              <span class="persona-callsign">SURGE-STORMER</span>
+              <span class="persona-role-tag">Performance</span>
+            </div>
+            <strong class="persona-name">Performance Optimizer</strong>
+            <p class="persona-desc">Dispatches slowloris drips, 1.5MB buffer overflows, and avalanche concurrency bursts.</p>
+          </div>
+          <div class="persona-card" data-persona="gan-adversary">
+            <div class="persona-top">
+              <span class="persona-callsign">MUTANT-PROBER</span>
+              <span class="persona-role-tag">Adversarial GAN</span>
+            </div>
+            <strong class="persona-name">Adversarial GAN Mutant</strong>
+            <p class="persona-desc">Fires catastrophic ReDoS backtracking probes and transactional duplicate race conditions.</p>
+          </div>
+          <div class="persona-card" data-persona="network-troubleshooter">
+            <div class="persona-top">
+              <span class="persona-callsign">NET-FRACTURER</span>
+              <span class="persona-role-tag">Transport</span>
+            </div>
+            <strong class="persona-name">Network Troubleshooter</strong>
+            <p class="persona-desc">Injects latency jitter spikes (&plusmn;250ms), 16 kbps bandwidth caps, and gateway timeout hangs.</p>
+          </div>
+        </div>
+
+        <!-- 2. Campaign Mission Control Bar -->
+        <div class="redteam-control-bar">
+          <div class="redteam-config-group">
+            <label for="redTeamIntensitySelect">Assault Intensity:</label>
+            <select id="redTeamIntensitySelect" class="form-input redteam-select">
+              <option value="sustained" selected>Sustained Assault (5 Coordinated Waves - Recommended)</option>
+              <option value="stealth">Stealth Reconnaissance (Targeted Probes, Low Concurrency)</option>
+              <option value="avalanche">Chaos Avalanche (Aggressive Multi-Threaded Stress)</option>
+            </select>
+          </div>
+
+          <div class="redteam-btn-group">
+            <button id="btnLaunchRedTeam" class="btn-primary btn-redteam-launch" type="button">Launch Red Team Assault</button>
+            <button id="btnAbortRedTeam" class="btn-danger-outline btn-redteam-abort" type="button" style="display: none;">Abort Mission</button>
+          </div>
+        </div>
+
+        <!-- 3. Real-time Tactical Assault HUD -->
+        <div id="redTeamHud" class="redteam-hud" style="display: none;">
+          <!-- 5-Phase Breadcrumb Pipeline -->
+          <div class="redteam-phase-pipeline">
+            <div class="phase-step" data-phase="recon"><span class="phase-dot"></span> 1. Recon</div>
+            <div class="phase-step" data-phase="weaponize"><span class="phase-dot"></span> 2. Weaponize</div>
+            <div class="phase-step" data-phase="assault"><span class="phase-dot"></span> 3. Compound Assault</div>
+            <div class="phase-step" data-phase="debrief"><span class="phase-dot"></span> 4. Blast Radius</div>
+            <div class="phase-step" data-phase="complete"><span class="phase-dot"></span> 5. Mission Debrief</div>
+          </div>
+
+          <!-- Progress Bar & Wave Subtitle -->
+          <div class="redteam-progress-bar-wrapper">
+            <div class="redteam-progress-info">
+              <strong id="redTeamCurrentWaveText">Standby...</strong>
+              <span id="redTeamProgressPercent">0%</span>
+            </div>
+            <div class="redteam-track">
+              <div id="redTeamProgressBar" class="redteam-bar" style="width: 0%;"></div>
+            </div>
+          </div>
+
+          <!-- Telemetry Counters Bar -->
+          <div class="redteam-telemetry-strip">
+            <div class="telemetry-pill">
+              <span class="telemetry-label">Probes Sent:</span>
+              <span id="redTeamProbesCount" class="telemetry-val">0</span>
+            </div>
+            <div class="telemetry-pill pill-critical">
+              <span class="telemetry-label">Critical Breaches:</span>
+              <span id="redTeamCritCount" class="telemetry-val">0</span>
+            </div>
+            <div class="telemetry-pill pill-high">
+              <span class="telemetry-label">High Breaches:</span>
+              <span id="redTeamHighCount" class="telemetry-val">0</span>
+            </div>
+            <div class="telemetry-pill">
+              <span class="telemetry-label">Medium Breaches:</span>
+              <span id="redTeamMedCount" class="telemetry-val">0</span>
+            </div>
+          </div>
+
+          <!-- Live Tactical Monospace Console Log -->
+          <div class="redteam-console-wrapper">
+            <div class="console-header">
+              <span>LIVE TACTICAL TELEMETRY STREAM</span>
+              <span id="redTeamActivePersonaPill" class="active-persona-pill">Awaiting Launch</span>
+            </div>
+            <div id="redTeamConsoleLogs" class="redteam-terminal-log">
+              <div class="terminal-line text-muted">&gt; Red Chaos Team Engine standby. Ready to deploy autonomous agent personas against target.</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 4. Post-Campaign Mission Debrief Dossier -->
+        <div id="redTeamDossier" class="redteam-dossier" style="display: none;">
+          <div class="dossier-header-bar">
+            <div class="dossier-score-badge">
+              <span id="dossierScoreVal" class="dossier-score-num">--</span>
+              <span id="dossierGradeVal" class="dossier-grade-tag">GRADE --</span>
+            </div>
+            <div class="dossier-summary-col">
+              <h3 id="dossierTitle">Mission Debrief: Target Evaluated</h3>
+              <p id="dossierSummaryText">Campaign concluded. Review discovered vulnerabilities and system blast radius below.</p>
+            </div>
+            <div class="dossier-action-col">
+              <button id="btnAutoHealBreaches" class="btn-primary btn-autoheal-breaches" type="button" title="Open Auto-Healer to repair all discovered breaches">Auto-Heal Discovered Breaches</button>
+              <div class="dossier-export-group">
+                <button id="btnExportDossierMd" class="btn-secondary btn-sm" type="button">Export Markdown</button>
+                <button id="btnExportDossierJson" class="btn-secondary btn-sm" type="button">Export JSON</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Breaches Findings List -->
+          <div class="dossier-findings-section">
+            <div class="findings-header">
+              <span class="findings-title">Discovered Breaches &amp; Exploit Proofs</span>
+              <span id="dossierFindingsCount" class="count-tag">0 breaches</span>
+            </div>
+            <div id="dossierFindingsList" class="dossier-findings-list">
+              <!-- Populated by JS -->
+            </div>
+          </div>
         </div>
       </div>
 
@@ -96,16 +272,15 @@
     </div>
 
     <div class="columns-grid">
-
-      <!-- Left Column: All Rule Adders & Active State -->
-      <div class="column">
-        <section class="section-box">
+      <!-- Left Column: Presets, Custom Rule Builder, and Active Rules -->
+      <div class="column" id="leftWorkbenchCol">
+        <!-- 1. 1-Click Quick Presets Card -->
+        <section class="section-box presets-card">
           <div class="section-header">
             <h2>Network Fault Simulator (Manual Injections)</h2>
             <p>Inject real-world network conditions into all traffic passing through <strong>http://localhost:3001</strong>.</p>
           </div>
 
-          <!-- 1-Click Presets -->
           <div class="adder-subgroup">
             <div class="subgroup-label">1-Click Quick Presets</div>
             <div class="scenario-table">
@@ -117,6 +292,14 @@
                 <button id="btnPresetSlowMobile" class="btn-secondary" title="Activate rule and send test request">Enable &amp; Test</button>
               </div>
 
+              <div class="scenario-row">
+                <div class="scenario-desc">
+                  <strong>Packet Jitter Spike</strong>
+                  <span>400ms base delay with &plusmn;250ms fluctuating variance.</span>
+                </div>
+                <button id="btnPresetJitter" class="btn-secondary" title="Activate rule and send test request">Enable &amp; Test</button>
+              </div>
+
               <div class="scenario-row">
                 <div class="scenario-desc">
                   <strong>Connection Drop</strong>
@@ -125,6 +308,14 @@
                 <button id="btnPresetDisconnect" class="btn-secondary" title="Activate rule and send test request">Enable &amp; Test</button>
               </div>
 
+              <div class="scenario-row">
+                <div class="scenario-desc">
+                  <strong>Rate Limit Surge (429)</strong>
+                  <span>Forces HTTP 429 with Retry-After header to test client backoff.</span>
+                </div>
+                <button id="btnPresetRateLimit" class="btn-secondary" title="Activate rule and send test request">Enable &amp; Test</button>
+              </div>
+
               <div class="scenario-row">
                 <div class="scenario-desc">
                   <strong>Server Outage (503)</strong>
@@ -133,6 +324,14 @@
                 <button id="btnPresetOutage" class="btn-secondary" title="Activate rule and send test request">Enable &amp; Test</button>
               </div>
 
+              <div class="scenario-row">
+                <div class="scenario-desc">
+                  <strong>Gateway Timeout (504)</strong>
+                  <span>2000ms upstream hang followed by HTTP 504 Gateway Timeout.</span>
+                </div>
+                <button id="btnPresetGatewayTimeout" class="btn-secondary" title="Activate rule and send test request">Enable &amp; Test</button>
+              </div>
+
               <div class="scenario-row">
                 <div class="scenario-desc">
                   <strong>Corrupted Response</strong>
@@ -142,49 +341,59 @@
               </div>
             </div>
           </div>
+        </section>
 
-          <!-- Custom Rule Builder -->
-          <div class="adder-subgroup custom-rule-section">
-            <div class="subgroup-label">Custom Rule Builder</div>
-            <form id="customRuleForm" class="form-layout">
-              <div class="form-row">
-                <div class="form-field">
-                  <label for="ruleTypeSelect">Condition</label>
-                  <select id="ruleTypeSelect" class="form-input">
-                    <option value="latency">Add Network Delay (Latency)</option>
-                    <option value="bandwidth">Limit Bandwidth (Speed Throttling)</option>
-                    <option value="cut">Drop Connection Mid-Download</option>
-                    <option value="corrupt">Corrupt Data (Truncate JSON)</option>
-                    <option value="status">Force HTTP Status Code</option>
-                  </select>
-                </div>
+        <!-- 2. Custom Rule Builder Card -->
+        <section class="section-box custom-rule-card">
+          <div class="section-header">
+            <h2>Custom Rule Builder</h2>
+            <p>Configure granular network latency, bandwidth limits, cuts, corruption, or HTTP status codes.</p>
+          </div>
 
-                <div class="form-field">
-                  <label for="ruleDirectionSelect">Direction</label>
-                  <select id="ruleDirectionSelect" class="form-input">
-                    <option value="downstream">Responses (to client)</option>
-                    <option value="upstream">Requests (to server)</option>
-                  </select>
-                </div>
+          <form id="customRuleForm" class="form-layout">
+            <div class="form-row">
+              <div class="form-field">
+                <label for="ruleTypeSelect">Condition</label>
+                <select id="ruleTypeSelect" class="form-input">
+                  <option value="latency">Add Network Delay (Latency)</option>
+                  <option value="bandwidth">Limit Bandwidth (Speed Throttling)</option>
+                  <option value="cut">Drop Connection Mid-Download</option>
+                  <option value="corrupt">Corrupt Data (Truncate JSON)</option>
+                  <option value="status">Force HTTP Status Code</option>
+                </select>
               </div>
 
-              <div id="dynamicRuleInputs" class="dynamic-row">
-                <!-- Rendered by JS -->
+              <div class="form-field">
+                <label for="ruleDirectionSelect">Direction</label>
+                <select id="ruleDirectionSelect" class="form-input">
+                  <option value="downstream">Responses (to client)</option>
+                  <option value="upstream">Requests (to server)</option>
+                </select>
               </div>
 
-              <button type="submit" class="btn-secondary btn-full">Add &amp; Activate Rule</button>
-            </form>
-          </div>
+              <div class="form-field">
+                <label for="rulePathPattern">Path Filter (Optional)</label>
+                <input type="text" id="rulePathPattern" class="form-input" placeholder="e.g. /api/checkout (blank = all)" title="Only inject fault when request path matches this pattern">
+              </div>
+            </div>
+
+            <div id="dynamicRuleInputs" class="dynamic-row">
+              <!-- Rendered by JS -->
+            </div>
+
+            <button type="submit" class="btn-secondary btn-full">Add &amp; Activate Rule</button>
+          </form>
         </section>
 
-        <!-- Current Active Rules -->
-        <section class="section-box">
+        <!-- 3. Current Active Simulation Rules Card -->
+        <section class="section-box active-rules-card">
           <div class="section-header header-with-badge">
             <div>
               <h2>Active Simulation Rules</h2>
               <p>Rules currently altering traffic passing through the proxy.</p>
             </div>
             <div style="display: flex; align-items: center; gap: 8px;">
+              <span id="activeRulesIndicator" class="active-rules-pill">Traffic: Normal</span>
               <span id="activeRulesCount" class="count-tag">0 active</span>
               <button id="btnClearAllRules" class="btn-remove btn-sm" title="Clear all active rules">Reset All</button>
             </div>
@@ -196,8 +405,9 @@
         </section>
       </div>
 
-      <!-- Right Column: Response Inspector -->
-      <div class="column">
+      <!-- Right Column: Response Inspector and Live Traffic Log -->
+      <div class="column" id="rightWorkbenchCol">
+        <!-- 1. Response Inspector Card (Height matched to Presets Card) -->
         <section id="responseInspector" class="section-box response-inspector-card">
           <div class="section-header header-with-action">
             <div>
@@ -212,6 +422,8 @@
             <select id="testEndpointSelect" class="form-input inspector-select">
               <option value="/api/data">GET /api/data (Normal API)</option>
               <option value="/api/users">GET /api/users (User Records)</option>
+              <option value="/api/profile">GET /api/profile (Protected Profile)</option>
+              <option value="/api/checkout">GET /api/checkout (Idempotent Action)</option>
               <option value="/api/crash">GET /api/crash (Crashing Server 500)</option>
             </select>
             <button id="btnSendTestRequest" class="btn-primary">Send Test Request</button>
@@ -227,18 +439,16 @@
               <span class="meta-label">Time:</span>
               <span id="respDuration" class="response-meta">-- ms</span>
             </div>
-            <div class="meta-item">
-              <span id="respAppliedRule" class="response-meta-rule">Rule: None</span>
-            </div>
-            <div class="meta-item" style="margin-left: auto;">
-              <span id="activeRulesIndicator" class="active-rules-pill">Traffic: Normal</span>
+            <div class="meta-item meta-item-applied">
+              <span class="meta-label">Injected:</span>
+              <span id="respAppliedRule" class="response-meta-rule">None</span>
             </div>
           </div>
 
           <!-- Feedback Status Text -->
           <div id="testFeedback" class="test-status-text">Click "Send Test Request" or enable any scenario on the left to inspect responses.</div>
 
-          <!-- Formatted Response Payload Viewer -->
+          <!-- Formatted Response Payload Viewer (Expands to fill height) -->
           <div class="response-body-wrapper">
             <pre id="responseBodyViewer" class="response-body-pre">(No response received yet. Select an endpoint above or click "Enable &amp; Test" on any scenario on the left.)</pre>
           </div>
@@ -248,43 +458,127 @@
             <span>Terminal: <code>curl -i http://localhost:3001/api/data</code></span>
           </div>
         </section>
-      </div>
 
+        <!-- 2. Live Traffic Log Card (Starts at Custom Rule, Ends at Active Rules) -->
+        <section class="section-box live-log-card">
+          <div class="section-header header-with-action">
+            <div>
+              <h2>Live Traffic Log</h2>
+              <p>Real-time HTTP requests routed through proxy (<code>127.0.0.1:3001</code>).</p>
+            </div>
+            <button id="btnClearLog" class="btn-text">Clear Log</button>
+          </div>
+
+          <div class="table-container log-table-container">
+            <table class="log-table">
+              <thead>
+                <tr>
+                  <th style="width: 80px;">Method</th>
+                  <th>Path</th>
+                  <th style="width: 90px;">Status</th>
+                  <th>Applied Rule</th>
+                  <th style="width: 90px; text-align: right;">Time</th>
+                </tr>
+              </thead>
+              <tbody id="activityFeed">
+                <tr>
+                  <td colspan="5" class="table-empty">Listening for requests through http://127.0.0.1:3001...</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </div>
     </div>
 
-    <!-- ====================================================================
-         BOTTOM FULL-WIDTH SECTION: LIVE TRAFFIC LOG
-         ==================================================================== -->
-    <section class="section-box full-width-log-section">
-      <div class="section-header header-with-action">
-        <div>
-          <h2>Live Traffic Log</h2>
-          <p>Real-time HTTP requests routed through proxy (<code>127.0.0.1:3001</code>).</p>
+  </main>
+
+  <!-- Auto-Healer Modal Dialog -->
+  <div id="healerModal" class="modal-backdrop" style="display: none;">
+    <div class="modal-dialog">
+      <div class="modal-header">
+        <div class="modal-title-group">
+          <span class="modal-badge">AGENTIC AUTO-HEALER</span>
+          <h3>Automated Code Remediation</h3>
         </div>
-        <button id="btnClearLog" class="btn-text">Clear Log</button>
+        <button id="btnCloseHealer" class="btn-text btn-modal-close" type="button" title="Close modal">&times;</button>
       </div>
 
-      <div class="table-container full-width-table-container">
-        <table class="log-table">
-          <thead>
-            <tr>
-              <th style="width: 80px;">Method</th>
-              <th>Path</th>
-              <th style="width: 90px;">Status</th>
-              <th>Applied Rule</th>
-              <th style="width: 90px; text-align: right;">Time</th>
-            </tr>
-          </thead>
-          <tbody id="activityFeed">
-            <tr>
-              <td colspan="5" class="table-empty">Listening for requests through http://127.0.0.1:3001...</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </section>
+      <div class="modal-body">
+        <p class="modal-intro">
+          The Auto-Healer scans your backend project, detects missing resilience &amp; security protections, and generates reviewable Git patches with zero unwanted disk modifications.
+        </p>
 
-  </main>
+        <div class="healer-config-row">
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <label for="healerProjectDir">Target Service / Backend Directory:</label>
+            <span class="healer-dir-hint" style="font-size: 11px; color: var(--text-muted);">Default: <code>examples/vulnerable-backend</code></span>
+          </div>
+          <div class="healer-input-group">
+            <input type="text" id="healerProjectDir" class="form-input" value="examples/vulnerable-backend" placeholder="e.g. examples/vulnerable-backend or ./backend" spellcheck="false">
+            <button id="btnHealerScan" class="btn-primary" type="button">Scan Codebase</button>
+          </div>
+          <div class="healer-presets-pills" style="display: flex; gap: 8px; margin-top: 2px;">
+            <button type="button" class="btn-text btn-dir-preset" id="btnDirPresetSample" style="font-size: 11px; text-decoration: underline; padding: 0;">Target Sample Backend (examples/vulnerable-backend)</button>
+            <span style="color: var(--text-subtle);">|</span>
+            <button type="button" class="btn-text btn-dir-preset" id="btnDirPresetRoot" style="font-size: 11px; text-decoration: underline; padding: 0;">Custom Path</button>
+          </div>
+        </div>
+
+        <div class="healer-engine-bar">
+          <button id="btnToggleAiSettings" class="btn-text btn-engine-toggle" type="button">Configure AI Healer (Local LLM / Cloud AI Providers)</button>
+          <span id="healerEngineBadge" class="engine-badge codemod">Engine: CodeMod + AI Hybrid</span>
+        </div>
+
+        <div id="healerAiSettingsPanel" class="healer-ai-panel" style="display: none;">
+          <div class="ai-config-grid">
+            <div class="ai-config-item">
+              <label for="healerEngineMode">Remediation Mode:</label>
+              <select id="healerEngineMode" class="form-input select-healer-engine">
+                <option value="hybrid">Hybrid (Deterministic CodeMod + AI Agent)</option>
+                <option value="codemod">Deterministic AST CodeMod Only (Fast, Free)</option>
+                <option value="ai">AI Healer Agent Only (Universal Multi-Language)</option>
+              </select>
+            </div>
+            <div class="ai-config-item">
+              <label for="healerAiProvider">AI Provider:</label>
+              <select id="healerAiProvider" class="form-input select-ai-provider">
+                <option value="ollama">Local Offline LLM (http://127.0.0.1:11434)</option>
+                <option value="custom">Custom Inference / HTTP Endpoint</option>
+                <option value="openai">OpenAI-Compatible API</option>
+                <option value="anthropic">Anthropic API</option>
+                <option value="gemini">Google Gemini API</option>
+              </select>
+            </div>
+            <div class="ai-config-item" id="aiKeyGroup" style="display: none;">
+              <label for="healerAiKey">API Key:</label>
+              <input type="password" id="healerAiKey" class="form-input" placeholder="sk-..." spellcheck="false">
+            </div>
+            <div class="ai-config-item" id="aiEndpointGroup">
+              <label for="healerAiEndpoint">Endpoint URL:</label>
+              <input type="text" id="healerAiEndpoint" class="form-input" value="http://127.0.0.1:11434" placeholder="http://127.0.0.1:11434" spellcheck="false">
+            </div>
+          </div>
+        </div>
+
+        <div id="healerScanStatus" class="healer-status-bar" style="display: none;"></div>
+
+        <div id="healerDiffContainer" class="healer-diff-wrapper" style="display: none;"></div>
+
+        <div id="healerActionsBar" class="healer-actions-bar" style="display: none;">
+          <label class="backup-checkbox-label">
+            <input type="checkbox" id="healerBackupCheck" checked>
+            Create automatic backup in <code>.faultmesh-backup/</code>
+          </label>
+          <div class="healer-btn-group">
+            <button id="btnHealerApply" class="btn-primary" type="button">Apply Remedies to Codebase</button>
+            <button id="btnHealerResetSample" class="btn-secondary" type="button" title="Restore sample backend to its unhealed state to test auto-healing again">Reset Sample to Vulnerable</button>
+            <button id="btnHealerRollback" class="btn-secondary" type="button" style="display: none;">Rollback Last Patch</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 
   <script src="app.js"></script>
 </body>