npm - clawaid - Versions diffs - 1.0.0 - Mend

clawaid 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/web/index.html ADDED Viewed

@@ -0,0 +1,1226 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ClawAid</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
+      background: #fafafa;
+      color: #202124;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .container {
+      width: 100%;
+      max-width: 600px;
+      padding: 48px 24px 80px;
+    }
+    /* Header */
+    .header {
+      text-align: center;
+      margin-bottom: 40px;
+    }
+    .logo {
+      font-size: 40px;
+      margin-bottom: 8px;
+    }
+    .header h1 {
+      font-size: 28px;
+      font-weight: 400;
+      color: #202124;
+      margin-bottom: 6px;
+    }
+    .header p {
+      font-size: 14px;
+      color: #5f6368;
+    }
+    /* Status card */
+    .card {
+      background: #fff;
+      border: 1px solid #e8eaed;
+      border-radius: 12px;
+      padding: 32px;
+      margin-bottom: 16px;
+    }
+    /* Progress log */
+    .log-area {
+      background: #f8f9fa;
+      border: 1px solid #e0e0e0;
+      border-radius: 8px;
+      padding: 16px;
+      font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
+      font-size: 12px;
+      color: #3c4043;
+      line-height: 1.6;
+      max-height: 280px;
+      overflow-y: auto;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .log-area .log-line { display: block; }
+    .log-area .log-line.success { color: #137333; }
+    .log-area .log-line.error { color: #c5221f; }
+    .log-area .log-line.warn { color: #e37400; }
+    .log-area .log-line.meta { color: #1a73e8; font-weight: 600; }
+    /* Show details toggle */
+    .details-toggle {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: #1a73e8;
+      cursor: pointer;
+      margin-top: 12px;
+      user-select: none;
+      background: none;
+      border: none;
+      padding: 0;
+    }
+    .details-toggle:hover { text-decoration: underline; }
+    .details-toggle .toggle-arrow { transition: transform 0.2s; display: inline-block; }
+    .details-toggle.open .toggle-arrow { transform: rotate(90deg); }
+    .details-panel {
+      margin-top: 8px;
+      display: none;
+    }
+    .details-panel.open { display: block; }
+    /* Spinner */
+    .spinner {
+      display: inline-block;
+      width: 18px;
+      height: 18px;
+      border: 2px solid #e0e0e0;
+      border-top-color: #1a73e8;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      flex-shrink: 0;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    /* Status row */
+    .status-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 15px;
+      color: #202124;
+      margin-bottom: 4px;
+    }
+    .status-sub {
+      font-size: 12px;
+      color: #9aa0a6;
+      margin-left: 28px;
+    }
+    /* Phase label */
+    .phase-label {
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      color: #9aa0a6;
+      margin-bottom: 16px;
+    }
+    /* Diagnosis card */
+    .diagnosis-section {
+      margin-bottom: 20px;
+    }
+    .section-label {
+      font-size: 11px;
+      font-weight: 600;
+      color: #9aa0a6;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+    .diagnosis-text {
+      font-size: 15px;
+      color: #202124;
+      line-height: 1.6;
+    }
+    .root-cause {
+      background: #fef7e0;
+      border: 1px solid #f9ab00;
+      border-radius: 8px;
+      padding: 10px 14px;
+      font-size: 13px;
+      color: #7a4f00;
+      margin-top: 10px;
+    }
+    .confidence-bar {
+      height: 4px;
+      background: #e8f0fe;
+      border-radius: 2px;
+      margin-top: 12px;
+      overflow: hidden;
+    }
+    .confidence-fill {
+      height: 100%;
+      background: #1a73e8;
+      border-radius: 2px;
+      transition: width 0.5s ease;
+    }
+    .confidence-label {
+      font-size: 11px;
+      color: #9aa0a6;
+      margin-top: 4px;
+    }
+    /* Collapsible reasoning */
+    .collapsible-toggle {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: #5f6368;
+      cursor: pointer;
+      margin-top: 12px;
+      background: none;
+      border: none;
+      padding: 0;
+      user-select: none;
+    }
+    .collapsible-toggle:hover { color: #202124; }
+    .collapsible-toggle .arrow { transition: transform 0.2s; display: inline-block; }
+    .collapsible-toggle.open .arrow { transform: rotate(90deg); }
+    .collapsible-panel { display: none; margin-top: 8px; }
+    .collapsible-panel.open { display: block; }
+    /* Divider */
+    .divider {
+      border: none;
+      border-top: 1px solid #f1f3f4;
+      margin: 16px 0;
+    }
+    /* Option cards */
+    .options-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-top: 8px;
+    }
+    .option-card {
+      border: 1.5px solid #e0e0e0;
+      border-radius: 10px;
+      padding: 16px;
+      transition: border-color 0.15s;
+      position: relative;
+    }
+    .option-card.recommended {
+      border-color: #1a73e8;
+      background: #f8fbff;
+    }
+    .option-card-header {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      margin-bottom: 8px;
+    }
+    .option-letter {
+      width: 26px;
+      height: 26px;
+      border-radius: 50%;
+      background: #e8eaed;
+      color: #3c4043;
+      font-size: 13px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .option-card.recommended .option-letter {
+      background: #1a73e8;
+      color: #fff;
+    }
+    .option-title-row {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .option-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #202124;
+    }
+    .recommended-badge {
+      font-size: 10px;
+      background: #e8f0fe;
+      color: #1a73e8;
+      border: 1px solid #c5d9f7;
+      border-radius: 4px;
+      padding: 2px 6px;
+      font-weight: 600;
+    }
+    .risk-badge {
+      font-size: 10px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-weight: 600;
+    }
+    .risk-low { background: #e6f4ea; color: #137333; }
+    .risk-medium { background: #fef7e0; color: #7a4f00; }
+    .risk-high { background: #fce8e6; color: #c5221f; }
+    .option-description {
+      font-size: 13px;
+      color: #5f6368;
+      line-height: 1.5;
+      margin-left: 36px;
+    }
+    .option-fix-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      margin-top: 12px;
+      margin-left: 36px;
+      padding: 8px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      background: #f1f3f4;
+      color: #3c4043;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+    .option-card.recommended .option-fix-btn {
+      background: #1a73e8;
+      color: #fff;
+    }
+    .option-fix-btn:hover { opacity: 0.85; }
+    .option-fix-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    /* Auto-fix progress */
+    .auto-fix-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+    }
+    .auto-fix-icon {
+      font-size: 20px;
+    }
+    .auto-fix-text {
+      font-size: 15px;
+      font-weight: 500;
+      color: #202124;
+    }
+    .auto-fix-sub {
+      font-size: 12px;
+      color: #9aa0a6;
+      margin-top: 2px;
+    }
+    /* Buttons */
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 24px;
+      font-size: 15px;
+      font-weight: 500;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 0.15s, transform 0.1s;
+      width: 100%;
+      justify-content: center;
+    }
+    .btn:active { transform: scale(0.98); }
+    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .btn-primary {
+      background: #1a73e8;
+      color: #fff;
+    }
+    .btn-primary:hover:not(:disabled) { background: #1557b0; }
+    .btn-secondary {
+      background: #f1f3f4;
+      color: #3c4043;
+    }
+    .btn-secondary:hover:not(:disabled) { background: #e8eaed; }
+    .btn-coffee {
+      background: #FFDD00;
+      color: #000;
+      font-size: 14px;
+    }
+    .btn-coffee:hover:not(:disabled) { background: #f0cf00; }
+    /* Input field */
+    .input-group { margin-bottom: 16px; }
+    .input-label {
+      display: block;
+      font-size: 13px;
+      font-weight: 500;
+      color: #3c4043;
+      margin-bottom: 6px;
+    }
+    .input-field {
+      width: 100%;
+      padding: 10px 14px;
+      font-size: 14px;
+      border: 1px solid #dadce0;
+      border-radius: 8px;
+      outline: none;
+      transition: border-color 0.15s;
+      font-family: monospace;
+      color: #202124;
+    }
+    .input-field:focus { border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26,115,232,0.2); }
+    .trust-badge {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: #137333;
+      margin-top: 8px;
+      background: #e6f4ea;
+      padding: 6px 10px;
+      border-radius: 6px;
+    }
+    /* Result screens */
+    .result-icon {
+      font-size: 48px;
+      text-align: center;
+      margin-bottom: 16px;
+    }
+    .result-title {
+      font-size: 22px;
+      font-weight: 500;
+      text-align: center;
+      margin-bottom: 8px;
+    }
+    .result-desc {
+      font-size: 14px;
+      color: #5f6368;
+      text-align: center;
+      line-height: 1.6;
+      margin-bottom: 24px;
+    }
+    .report-area {
+      background: #f8f9fa;
+      border: 1px solid #e0e0e0;
+      border-radius: 8px;
+      padding: 16px;
+      font-family: monospace;
+      font-size: 11px;
+      color: #3c4043;
+      max-height: 200px;
+      overflow-y: auto;
+      white-space: pre-wrap;
+      word-break: break-all;
+      margin-bottom: 12px;
+    }
+    /* Alternatives */
+    .alt-list { list-style: none; margin-top: 6px; }
+    .alt-list li {
+      font-size: 13px;
+      color: #5f6368;
+      padding: 4px 0;
+      display: flex;
+      gap: 6px;
+    }
+    .alt-list li::before { content: '→'; color: #9aa0a6; flex-shrink: 0; }
+    /* Sections */
+    .section { display: none; }
+    .section.visible { display: block; }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .fade-in { animation: fadeIn 0.25s ease; }
+    /* Footer */
+    .footer {
+      text-align: center;
+      font-size: 12px;
+      color: #9aa0a6;
+      margin-top: 32px;
+    }
+    .footer a { color: #1a73e8; text-decoration: none; }
+    .footer a:hover { text-decoration: underline; }
+    /* Copy button */
+    .copy-btn {
+      background: none;
+      border: 1px solid #dadce0;
+      border-radius: 6px;
+      padding: 6px 12px;
+      font-size: 12px;
+      cursor: pointer;
+      color: #5f6368;
+      transition: background 0.15s;
+    }
+    .copy-btn:hover { background: #f1f3f4; }
+    /* Round badge */
+    .round-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      background: #e8f0fe;
+      color: #1a73e8;
+      font-size: 12px;
+      font-weight: 600;
+      padding: 4px 10px;
+      border-radius: 20px;
+      margin-bottom: 12px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <!-- Header -->
+  <div class="header">
+    <div class="logo" style="font-size:48px; line-height:1;">🦞🩹</div>
+    <h1>ClawAid</h1>
+    <p>Automatic diagnostics and repair for OpenClaw</p>
+  </div>
+  <!-- ===== SECTION: Privacy ===== -->
+  <div id="section-privacy" class="section visible card fade-in">
+    <div style="text-align:center; font-size:32px; margin-bottom:12px;">🔒</div>
+    <div style="font-size:16px; font-weight:500; text-align:center; margin-bottom:12px;">Before we start</div>
+    <div style="font-size:13px; color:#5f6368; line-height:1.6; margin-bottom:16px;">
+      ClawAid will collect your OpenClaw config, gateway status, and recent logs to diagnose issues.
+      <ul style="margin-top:8px; padding-left:20px;">
+        <li>API keys are partially redacted before sending</li>
+        <li>Data is sent to <strong>our diagnostic service</strong> for analysis only</li>
+        <li>Nothing is stored or shared beyond this session</li>
+      </ul>
+    </div>
+    <button class="btn btn-primary" id="btn-start-scan">
+      🩺 Start Scan
+    </button>
+  </div>
+  <!-- ===== SECTION: Scanning ===== -->
+  <div id="section-scanning" class="section card fade-in">
+    <div class="phase-label">Phase 1 — Scanning</div>
+    <div class="status-row">
+      <span class="spinner"></span>
+      <span id="scan-status-text">Starting scan...</span>
+    </div>
+    <div class="status-sub" id="scan-sub-text"></div>
+    <button class="details-toggle" id="btn-toggle-scan-log" onclick="toggleDetails('scan-log')">
+      <span class="toggle-arrow">▶</span> Show details
+    </button>
+    <div class="details-panel" id="details-scan-log">
+      <div class="log-area" id="log-area">Connecting to diagnostic engine...</div>
+    </div>
+  </div>
+  <!-- ===== SECTION: API Key Input ===== -->
+  <div id="section-apikey" class="section card fade-in">
+    <div class="phase-label">Action Required</div>
+    <div class="diagnosis-section">
+      <div class="section-label">API Key Required</div>
+      <p class="diagnosis-text" id="apikey-instructions">
+        ClawAid needs an OpenRouter API key to run diagnostics.
+      </p>
+    </div>
+    <hr class="divider">
+    <div class="input-group">
+      <label class="input-label" for="apikey-input">OpenRouter API Key</label>
+      <input
+        class="input-field"
+        id="apikey-input"
+        type="password"
+        placeholder="sk-or-..."
+        autocomplete="off"
+        spellcheck="false"
+      />
+      <div class="trust-badge">
+        🔒 Local only. Not stored. Only sent to OpenRouter for AI diagnosis.
+      </div>
+      <div style="margin-top: 6px;">
+        <a href="https://openrouter.ai/keys" target="_blank" style="font-size: 12px; color: #1a73e8;">
+          Get an OpenRouter API key →
+        </a>
+      </div>
+    </div>
+    <button class="btn btn-primary" id="btn-submit-key">
+      Start Diagnosis
+    </button>
+  </div>
+  <!-- ===== SECTION: Diagnosis ===== -->
+  <div id="section-diagnosis" class="section card fade-in">
+    <div class="phase-label">Phase 2 — Diagnosis</div>
+    <div id="round-badge-diag" class="round-badge" style="display:none;">
+      <span>🔄</span><span id="round-badge-text">Round 2</span>
+    </div>
+    <div class="diagnosis-section">
+      <div class="section-label">What's wrong</div>
+      <p class="diagnosis-text" id="diag-text">Analyzing...</p>
+      <div class="root-cause" id="root-cause-box"></div>
+      <div class="confidence-bar">
+        <div class="confidence-fill" id="confidence-fill" style="width:0%"></div>
+      </div>
+      <div class="confidence-label" id="confidence-label">Confidence: —</div>
+    </div>
+    <button class="collapsible-toggle" id="toggle-reasoning" onclick="toggleReasoning()">
+      <span class="arrow">▶</span> Diagnostic details
+    </button>
+    <div class="collapsible-panel" id="reasoning-panel">
+      <div class="log-area" id="reasoning-log" style="max-height:180px;"></div>
+    </div>
+    <div id="alternatives-section" style="display:none; margin-top:12px;">
+      <hr class="divider">
+      <div class="section-label">Other possibilities</div>
+      <ul class="alt-list" id="alt-list"></ul>
+    </div>
+  </div>
+  <!-- ===== SECTION: Options (user choice) ===== -->
+  <div id="section-options" class="section card fade-in">
+    <div class="phase-label">Phase 3 — Choose a Fix</div>
+    <div id="round-badge-opts" class="round-badge" style="display:none;">
+      <span>🔄</span><span id="round-opts-text">Round 2</span>
+    </div>
+    <p style="font-size:14px; color:#5f6368; margin-bottom:16px;">
+      Select a repair option below. The recommended fix is highlighted.
+    </p>
+    <div class="options-list" id="options-list"></div>
+  </div>
+  <!-- ===== SECTION: Auto-executing ===== -->
+  <div id="section-auto-fix" class="section card fade-in">
+    <div class="phase-label">Phase 3 — Auto-fixing</div>
+    <div class="auto-fix-row">
+      <div class="auto-fix-icon">🔧</div>
+      <div>
+        <div class="auto-fix-text">Auto-fixing...</div>
+        <div class="auto-fix-sub" id="auto-fix-sub">Applying recommended fix</div>
+      </div>
+      <span class="spinner" style="margin-left:auto;"></span>
+    </div>
+    <button class="details-toggle" id="btn-toggle-fix-log" onclick="toggleDetails('fix-log')">
+      <span class="toggle-arrow">▶</span> Show details
+    </button>
+    <div class="details-panel" id="details-fix-log">
+      <div class="log-area" id="exec-log"></div>
+    </div>
+  </div>
+  <!-- ===== SECTION: Fixed ===== -->
+  <div id="section-fixed" class="section card fade-in">
+    <div class="result-icon">✅</div>
+    <div class="result-title">OpenClaw is fixed!</div>
+    <div id="fixed-summary" style="text-align:left; margin: 20px 0;">
+      <div style="margin-bottom:16px;">
+        <div style="font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:#9aa0a6; margin-bottom:6px;">What was wrong</div>
+        <div id="fixed-what-wrong" style="font-size:14px; color:#3c4043; line-height:1.6;"></div>
+      </div>
+      <div style="border-top:1px solid #e8eaed; padding-top:16px;">
+        <div style="font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:#9aa0a6; margin-bottom:6px;">What we fixed</div>
+        <div id="fixed-what-fixed" style="font-size:14px; color:#3c4043; line-height:1.6;"></div>
+      </div>
+    </div>
+    <div style="margin-bottom:16px;">
+      <button class="details-toggle" id="btn-fixed-details" onclick="toggleFixedDetails()">
+        <span class="toggle-arrow">▶</span> Show technical details
+      </button>
+      <div class="details-panel" id="fixed-details-panel" style="margin-top:8px;">
+        <p id="fixed-explanation" style="font-size:13px; color:#5f6368;"></p>
+      </div>
+    </div>
+    <button class="btn btn-coffee" onclick="window.open('https://buymeacoffee.com/clawaid','_blank')">
+      ☕ Buy me a coffee
+    </button>
+    <div style="margin-top: 8px; text-align: center; font-size: 12px; color: #9aa0a6;">
+      ClawAid is free. If it saved your day, a coffee helps keep it alive!
+    </div>
+  </div>
+  <!-- ===== SECTION: Healthy ===== -->
+  <div id="section-healthy" class="section card fade-in">
+    <div class="result-icon">💚</div>
+    <div class="result-title">OpenClaw is healthy!</div>
+    <p class="result-desc" id="healthy-explanation">Your system is running normally. No issues detected.</p>
+    <div id="healthy-reasoning" style="display:none; text-align:left; margin-bottom:12px;">
+      <button class="details-toggle" onclick="this.nextElementSibling.classList.toggle('open'); this.querySelector('.toggle-arrow').textContent = this.nextElementSibling.classList.contains('open') ? '▼' : '▶'">
+        <span class="toggle-arrow">▶</span> How we diagnosed this
+      </button>
+      <div class="details-panel" id="healthy-reasoning-list" style="margin-top:8px;"></div>
+    </div>
+    <div id="healthy-warnings" style="display:none; text-align:left; margin-bottom:16px;">
+      <div style="font-size:13px; font-weight:600; color:#e37400; margin-bottom:8px;">⚠️ Non-critical notes</div>
+      <ul id="healthy-warnings-list" style="list-style:none; padding:0; margin:0;"></ul>
+    </div>
+    <button class="btn btn-secondary" onclick="location.reload()" style="margin-bottom: 8px;">
+      🔄 Scan Again
+    </button>
+  </div>
+  <!-- ===== SECTION: Not Fixed ===== -->
+  <div id="section-notfixed" class="section card fade-in">
+    <div class="result-icon">😔</div>
+    <div class="result-title">Couldn't fix automatically</div>
+    <p class="result-desc" id="notfixed-explanation">
+      After multiple attempts, the issue couldn't be resolved automatically.
+      Here's the diagnostic report to share with the community.
+    </p>
+    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;">
+      <span style="font-size: 13px; font-weight: 500; color: #3c4043;">Diagnostic Report</span>
+      <button class="copy-btn" id="btn-copy-report">Copy</button>
+    </div>
+    <div class="report-area" id="report-area"></div>
+    <button class="btn btn-secondary" onclick="window.open('https://discord.gg/openclaw','_blank')" style="margin-bottom: 8px;">
+      💬 Get Help on Discord
+    </button>
+    <button class="btn btn-secondary" onclick="location.reload()">
+      🔄 Try Again
+    </button>
+  </div>
+  <div class="footer">
+    <p>ClawAid v1.0.0 · <a href="https://github.com/openclaw" target="_blank">GitHub</a></p>
+  </div>
+</div>
+<script>
+(function() {
+  'use strict';
+  // State
+  let sessionId = null;
+  let currentState = 'idle';
+  let eventSource = null;
+  let diagnosisData = null; // last diagnosis received
+  let chosenOption = null; // option selected for fix
+  // Elements
+  const $ = id => document.getElementById(id);
+  const sections = {
+    privacy: $('section-privacy'),
+    scanning: $('section-scanning'),
+    apikey: $('section-apikey'),
+    diagnosis: $('section-diagnosis'),
+    options: $('section-options'),
+    autofix: $('section-auto-fix'),
+    fixed: $('section-fixed'),
+    healthy: $('section-healthy'),
+    notfixed: $('section-notfixed'),
+  };
+  function showOnly(name) {
+    Object.entries(sections).forEach(([key, el]) => {
+      el.classList.toggle('visible', key === name);
+    });
+    currentState = name;
+  }
+  function appendLog(areaId, msg, cls) {
+    const area = $(areaId);
+    if (!area) return;
+    const line = document.createElement('span');
+    line.className = 'log-line' + (cls ? ' ' + cls : '');
+    line.textContent = msg + '\n';
+    area.appendChild(line);
+    area.scrollTop = area.scrollHeight;
+  }
+  function classForMessage(msg) {
+    if (msg.startsWith('✓') || msg.startsWith('✅') || msg.includes('Success') || msg.includes('fixed')) return 'success';
+    if (msg.startsWith('❌') || msg.startsWith('✗') || msg.includes('Error') || msg.includes('failed')) return 'error';
+    if (msg.startsWith('⚠️') || msg.startsWith('Warning')) return 'warn';
+    if (msg.startsWith('🤖') || msg.startsWith('💭') || msg.startsWith('🔄') || msg.startsWith('📡')) return 'meta';
+    return '';
+  }
+  // Details toggle (scan + fix log panels)
+  window.toggleDetails = function(panelSuffix) {
+    const btnId = 'btn-toggle-' + panelSuffix;
+    const panelId = 'details-' + panelSuffix;
+    const btn = $(btnId);
+    const panel = $(panelId);
+    if (!btn || !panel) return;
+    const isOpen = panel.classList.toggle('open');
+    btn.classList.toggle('open', isOpen);
+    btn.querySelector('.toggle-arrow').textContent = isOpen ? '▼' : '▶';
+    btn.childNodes[1].textContent = isOpen ? ' Hide details' : ' Show details';
+  };
+  // Fixed details toggle
+  window.toggleFixedDetails = function() {
+    const btn = $('btn-fixed-details');
+    const panel = $('fixed-details-panel');
+    const isOpen = panel.classList.toggle('open');
+    btn.querySelector('.toggle-arrow').textContent = isOpen ? '▼' : '▶';
+    btn.childNodes[1].textContent = isOpen ? ' Hide technical details' : ' Show technical details';
+  };
+  // Reasoning toggle
+  window.toggleReasoning = function() {
+    const btn = $('toggle-reasoning');
+    const panel = $('reasoning-panel');
+    const isOpen = panel.classList.toggle('open');
+    btn.classList.toggle('open', isOpen);
+    btn.querySelector('.arrow').textContent = isOpen ? '▼' : '▶';
+    btn.childNodes[1].textContent = isOpen ? ' Hide diagnostic details' : ' Diagnostic details';
+  };
+  // Start SSE connection
+  function startDiagnosis() {
+    showOnly('scanning');
+    $('log-area').textContent = '';
+    $('exec-log').textContent = '';
+    eventSource = new EventSource('/api/diagnose');
+    eventSource.onmessage = function(e) {
+      let parsed;
+      try { parsed = JSON.parse(e.data); } catch { return; }
+      const { type, data } = parsed;
+      sessionId = parsed.sessionId || sessionId;
+      switch(type) {
+        case 'session_start':
+          sessionId = data.sessionId;
+          $('scan-status-text').textContent = 'Checking gateway...';
+          break;
+        case 'progress': {
+          const msg = data.message || '';
+          const cls = classForMessage(msg);
+          appendLog('log-area', msg, cls);
+          appendLog('exec-log', msg, cls);
+          appendLog('reasoning-log', msg, cls);
+          // Update clean status text
+          const clean = msg.replace(/^[🔍🤔🔧✅⚠️❌💭🔄→📡🔒  ]+/, '').trim().slice(0, 80);
+          if (clean) {
+            $('scan-status-text').textContent = clean;
+            $('auto-fix-sub').textContent = clean;
+          }
+          break;
+        }
+        case 'state_change':
+          handleStateChange(data.state);
+          break;
+        case 'diagnosis':
+          showDiagnosis(data);
+          break;
+        case 'action_result':
+          break;
+        case 'verify_result':
+          appendLog('exec-log', '─────────────────────────────────────', '');
+          if (data.fixed) {
+            appendLog('exec-log', '✅ Verified — issue resolved!', 'success');
+            appendLog('exec-log', '  ' + data.explanation, 'success');
+          } else {
+            appendLog('exec-log', '⚠️ Not yet fixed: ' + data.explanation, 'warn');
+            appendLog('exec-log', '  Re-analyzing...', '');
+          }
+          break;
+        case 'request_input':
+          if (data.field === 'apiKey') showApiKeyInput(data);
+          break;
+        case 'complete':
+          handleComplete(data);
+          break;
+        case 'error':
+          appendLog('log-area', '─────────────────────────────────────', '');
+          appendLog('log-area', '❌ Error: ' + data.message, 'error');
+          appendLog('log-area', '  Check your API key and internet connection, then reload to try again.', 'warn');
+          $('scan-status-text').textContent = 'Error — click "Show details"';
+          showOnly('scanning');
+          // Auto-open details on error
+          const detailPanel = $('details-scan-log');
+          if (detailPanel && !detailPanel.classList.contains('open')) {
+            window.toggleDetails('scan-log');
+          }
+          break;
+      }
+    };
+    eventSource.onerror = function() {
+      if (currentState !== 'fixed' && currentState !== 'notfixed' && currentState !== 'healthy') {
+        appendLog('log-area', '⚠️ Connection lost. The server may have stopped.', 'warn');
+      }
+    };
+  }
+  function handleStateChange(state) {
+    switch(state) {
+      case 'observing':
+        showOnly('scanning');
+        $('scan-status-text').textContent = 'Checking gateway...';
+        break;
+      case 'diagnosing':
+        showOnly('scanning');
+        $('scan-status-text').textContent = 'Analyzing your system...';
+        $('scan-sub-text').textContent = 'This may take a few seconds';
+        appendLog('log-area', '─────────────────────────────────────', '');
+        appendLog('log-area', '🤖 Sending data to AI for diagnosis...', 'meta');
+        break;
+      case 'showing_options':
+        // Options will show via 'diagnosis' event + render options
+        break;
+      case 'auto_executing':
+        $('exec-log').textContent = '';
+        showOnly('autofix');
+        break;
+      case 'executing':
+        $('exec-log').textContent = '';
+        showOnly('autofix');
+        break;
+      case 'verifying':
+        $('auto-fix-sub').textContent = 'Verifying repair...';
+        appendLog('exec-log', '─────────────────────────────────────', '');
+        appendLog('exec-log', '🔍 Checking if the fix worked...', 'meta');
+        break;
+      case 'needs_api_key':
+        break; // handled by request_input event
+      case 'error':
+        $('scan-status-text').textContent = 'Error occurred';
+        break;
+      case 'fixed':
+        showOnly('fixed');
+        break;
+      case 'healthy':
+        showOnly('healthy');
+        break;
+      case 'not_fixed':
+        showOnly('notfixed');
+        break;
+    }
+  }
+  function showDiagnosis(data) {
+    diagnosisData = data;
+    const confidence = Math.round((data.confidence || 0.5) * 100);
+    const options = data.options || [];
+    const round = data.round || 1;
+    // Render reasoning as clean list
+    const reasoningLog = $('reasoning-log');
+    reasoningLog.innerHTML = '';
+    const reasoning = data.reasoning || [];
+    if (reasoning.length > 0) {
+      reasoning.forEach(function(r, i) {
+        const line = document.createElement('div');
+        line.style.cssText = 'padding:6px 0; font-size:13px; color:#3c4043; border-bottom:1px solid #f1f3f4;';
+        line.textContent = (i+1) + '. ' + r;
+        reasoningLog.appendChild(line);
+      });
+    } else {
+      reasoningLog.textContent = 'No reasoning details available.';
+    }
+    // Update diagnosis card
+    $('diag-text').textContent = data.diagnosis || '';
+    $('root-cause-box').textContent = '🎯 ' + (data.rootCause || 'Unknown root cause');
+    $('confidence-fill').style.width = confidence + '%';
+    $('confidence-label').textContent = 'Confidence: ' + confidence + '%';
+    // Round badge
+    if (round > 1) {
+      $('round-badge-diag').style.display = 'inline-flex';
+      $('round-badge-text').textContent = 'Round ' + round + ' — new approach';
+      $('round-badge-opts').style.display = 'inline-flex';
+      $('round-opts-text').textContent = 'Round ' + round + ' — new approach';
+    } else {
+      $('round-badge-diag').style.display = 'none';
+      $('round-badge-opts').style.display = 'none';
+    }
+    // Alternatives
+    const alts = data.alternativeHypotheses || [];
+    if (alts.length > 0) {
+      $('alternatives-section').style.display = 'block';
+      const altList = $('alt-list');
+      altList.innerHTML = '';
+      alts.forEach(alt => {
+        const li = document.createElement('li');
+        li.textContent = alt;
+        altList.appendChild(li);
+      });
+    } else {
+      $('alternatives-section').style.display = 'none';
+    }
+    // Show diagnosis card
+    showOnly('diagnosis');
+    // Auto-check if we should show options too immediately
+    const recommended = options.filter(o => o.recommended);
+    const canAutoExecute = recommended.length > 0 && recommended.every(o => o.autoExecute);
+    if (canAutoExecute) {
+      // Store recommended option for result page
+      chosenOption = recommended[0] || null;
+      // Auto-execute: show diagnosis briefly, then trigger fix
+      setTimeout(function() {
+        fetch('/api/fix', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ sessionId: sessionId }),
+        });
+      }, 1200);
+    } else if (options.length > 0) {
+      // Render option cards and switch to options section
+      renderOptions(options);
+      // Show diagnosis briefly then switch to options after 1s
+      setTimeout(() => showOnly('options'), 3000);
+    }
+  }
+  function renderOptions(options) {
+    const list = $('options-list');
+    list.innerHTML = '';
+    options.forEach(opt => {
+      const card = document.createElement('div');
+      card.className = 'option-card' + (opt.recommended ? ' recommended' : '');
+      const riskClass = 'risk-' + (opt.risk || 'low');
+      card.innerHTML = `
+        <div class="option-card-header">
+          <div class="option-letter">${escHtml(opt.id)}</div>
+          <div class="option-title-row">
+            <span class="option-title">${escHtml(opt.title)}</span>
+            ${opt.recommended ? '<span class="recommended-badge">★ Recommended</span>' : ''}
+            <span class="risk-badge ${riskClass}">${escHtml(opt.risk)}</span>
+          </div>
+        </div>
+        <div class="option-description">${escHtml(opt.description)}</div>
+        <button class="option-fix-btn" data-option-id="${escHtml(opt.id)}">
+          🔧 Fix with this option
+        </button>
+      `;
+      list.appendChild(card);
+    });
+    // Attach click handlers
+    list.querySelectorAll('.option-fix-btn').forEach(btn => {
+      btn.addEventListener('click', async function() {
+        const optionId = this.dataset.optionId;
+        // Store chosen option for result page
+        chosenOption = (diagnosisData && diagnosisData.options) ? diagnosisData.options.find(o => o.id === optionId) || diagnosisData.options.find(o => o.recommended) : null;
+        // Disable all buttons
+        list.querySelectorAll('.option-fix-btn').forEach(b => { b.disabled = true; });
+        $('exec-log').textContent = '';
+        appendLog('exec-log', '🔧 Starting repair: Option ' + optionId + '...', 'meta');
+        showOnly('autofix');
+        try {
+          await fetch('/api/fix', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ sessionId, optionId }),
+          });
+        } catch(e) {
+          appendLog('exec-log', '❌ Failed to start fix: ' + e.message, 'error');
+        }
+      });
+    });
+  }
+  function showApiKeyInput(data) {
+    if (data.instructions) $('apikey-instructions').textContent = data.instructions;
+    showOnly('apikey');
+    $('apikey-input').focus();
+  }
+  function handleComplete(data) {
+    if (eventSource) {
+      eventSource.close();
+      eventSource = null;
+    }
+    if (data.healthy) {
+      $('healthy-explanation').textContent = data.explanation || 'Your system is running normally. No issues detected.';
+      // Show reasoning if any
+      const reasoning = data.reasoning || [];
+      if (reasoning.length > 0) {
+        $('healthy-reasoning').style.display = 'block';
+        const list = $('healthy-reasoning-list');
+        list.innerHTML = '';
+        reasoning.forEach(function(r, i) {
+          const div = document.createElement('div');
+          div.style.cssText = 'padding:4px 0; font-size:13px; color:#5f6368;';
+          div.textContent = (i+1) + '. ' + r;
+          list.appendChild(div);
+        });
+      }
+      // Show warnings if any
+      const warnings = data.warnings || [];
+      if (warnings.length > 0) {
+        $('healthy-warnings').style.display = 'block';
+        const list = $('healthy-warnings-list');
+        list.innerHTML = '';
+        warnings.forEach(function(w) {
+          const li = document.createElement('li');
+          li.style.cssText = 'font-size:13px; color:#5f6368; padding:6px 10px; background:#fef7e0; border-radius:6px; margin-bottom:6px; line-height:1.4;';
+          li.textContent = w;
+          list.appendChild(li);
+        });
+      }
+      showOnly('healthy');
+    } else if (data.fixed) {
+      // Populate result summary
+      const wrongEl = $('fixed-what-wrong');
+      const fixedEl = $('fixed-what-fixed');
+      if (wrongEl) wrongEl.textContent = (diagnosisData && diagnosisData.diagnosis) || data.explanation || 'An issue was detected and resolved.';
+      if (fixedEl && chosenOption) {
+        fixedEl.innerHTML = '<strong>' + chosenOption.title + '</strong><br><span style="color:#5f6368">' + (chosenOption.description || '') + '</span>';
+      } else if (fixedEl) {
+        fixedEl.textContent = data.explanation || 'OpenClaw has been repaired!';
+      }
+      $('fixed-explanation').textContent = data.explanation || 'OpenClaw has been repaired!';
+      showOnly('fixed');
+    } else {
+      $('notfixed-explanation').textContent = data.explanation || 'Could not automatically fix the issue.';
+      if (data.diagnosticReport) $('report-area').textContent = data.diagnosticReport;
+      showOnly('notfixed');
+    }
+  }
+  function escHtml(str) {
+    return String(str)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+  // API key submit
+  $('btn-submit-key').addEventListener('click', async function() {
+    const key = $('apikey-input').value.trim();
+    if (!key) {
+      $('apikey-input').focus();
+      $('apikey-input').style.borderColor = '#c5221f';
+      return;
+    }
+    $('apikey-input').style.borderColor = '';
+    this.disabled = true;
+    this.textContent = 'Starting...';
+    showOnly('scanning');
+    $('log-area').textContent = '';
+    $('scan-status-text').textContent = 'Initializing with API key...';
+    try {
+      await fetch('/api/input', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId, field: 'apiKey', value: key }),
+      });
+    } catch(e) {
+      showOnly('apikey');
+      this.disabled = false;
+      this.textContent = 'Start Diagnosis';
+    }
+  });
+  $('apikey-input').addEventListener('keydown', function(e) {
+    if (e.key === 'Enter') $('btn-submit-key').click();
+  });
+  $('btn-copy-report').addEventListener('click', function() {
+    const text = $('report-area').textContent;
+    navigator.clipboard.writeText(text).then(() => {
+      this.textContent = 'Copied!';
+      setTimeout(() => { this.textContent = 'Copy'; }, 2000);
+    });
+  });
+  // Privacy notice — start scan on button click
+  $('btn-start-scan').addEventListener('click', function() {
+    startDiagnosis();
+  });
+})();
+</script>
+</body>
+</html>