clawmagic 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clawmagic",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "OpenClaw, Configured Automagically. Transform a fresh OpenClaw install into production-ready setup.",
   "main": "dist/index.js",
   "bin": {

package/src/web/index.html

@@ -398,36 +398,37 @@ a:hover { text-decoration: underline; }
 <div class="step" id="step-5">
   <div class="text-center">
     <div class="success-check">✓</div>
-    <h1>You're all set!</h1>
-    <p class="subtitle">OpenClaw is production-ready.</p>
+    <h1 id="s-title">You're all set!</h1>
+    <p class="subtitle" id="s-subtitle">OpenClaw is production-ready.</p>
   </div>
+
   <div class="score-gauge">
     <span class="old" id="s-before">0</span>
     <span class="arrow">→</span>
     <span class="new" id="s-after">0</span>
-    <span style="font-size:13px; color: var(--text-dim);">security score</span>
+    <span style="font-size:13px; color: var(--text-dim);">configuration score</span>
   </div>
+
   <div class="stats-row" id="success-stats"></div>
-  <div class="next-steps">
-    <h2>What's next</h2>
-    <div class="next-step">
-      <div class="step-num">1</div>
-      <div class="step-content">
-        <p>Restart your gateway</p>
-        <code>openclaw gateway restart <button class="copy-btn" onclick="copyText('openclaw gateway restart')">📋</button></code>
-      </div>
-    </div>
-    <div class="next-step">
-      <div class="step-num">2</div>
-      <div class="step-content"><p>Send a test message to your agent</p></div>
-    </div>
-    <div class="next-step">
-      <div class="step-num">3</div>
-      <div class="step-content"><p>Join our Discord: <a href="https://discord.gg/clawd" target="_blank">discord.gg/clawd</a></p></div>
-    </div>
+
+  <!-- Score breakdown -->
+  <div id="score-breakdown" style="max-width:480px; margin:24px auto 0; text-align:left;"></div>
+
+  <!-- What's included -->
+  <div id="install-includes" style="max-width:480px; margin:24px auto 0; padding:20px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);"></div>
+
+  <!-- Gateway status + dashboard -->
+  <div id="gateway-section" style="max-width:480px; margin:24px auto 0; text-align:center;">
+    <div id="gw-status" style="margin-bottom:16px;"></div>
+    <div id="gw-actions" style="display:flex; gap:12px; justify-content:center; flex-wrap:wrap;"></div>
+  </div>
+
+  <div style="max-width:480px; margin:20px auto 0; text-align:center;">
+    <p style="font-size:13px; color:var(--text-muted);">Need help? <a href="https://discord.gg/clawd" target="_blank" style="color:var(--accent);">discord.gg/clawd</a></p>
   </div>
+
   <div class="text-center mt-24">
-    <button class="btn btn-primary btn-big" onclick="shutdown()">Close</button>
+    <button class="btn btn-primary btn-big" onclick="shutdown()">Close ClawMagic</button>
   </div>
 </div>
 
@@ -703,19 +704,79 @@ async function runConfigure() {
     await sleep(600);
 
     // Populate success page
-    document.getElementById('s-before').textContent = (state.report.beforeScore || 0) + '/100';
-    document.getElementById('s-after').textContent = (state.report.afterScore || 0) + '/100';
+    const r = state.report;
+    const flavorName = r.flavorName || 'Standard';
+
+    document.getElementById('s-title').textContent = `${flavorName} Configuration Installed`;
+    document.getElementById('s-subtitle').textContent = r.gatewayStarted
+      ? 'Your agent is running and ready to chat.'
+      : 'Configuration complete. Start your gateway to begin.';
+
+    document.getElementById('s-before').textContent = (r.beforeScore || 0) + '/100';
+    document.getElementById('s-after').textContent = (r.afterScore || 0) + '/100';
 
     const validProviders = apiKeys.length;
-    const skillsActivated = state.report.skillsActivated || 0;
-    const filesCreated = (state.report.filesCreated || []).length;
+    const skillsActivated = r.skillsActivated || 0;
+    const filesCreated = (r.filesCreated || []).length;
+    const cronJobs = r.cronJobs || 0;
 
     document.getElementById('success-stats').innerHTML = `
       <div class="stat-card"><div class="val">${validProviders}</div><div class="label">Providers</div></div>
       <div class="stat-card"><div class="val">${skillsActivated}</div><div class="label">Skills</div></div>
-      <div class="stat-card"><div class="val">${filesCreated}</div><div class="label">Files Created</div></div>
+      <div class="stat-card"><div class="val">${filesCreated}</div><div class="label">Files</div></div>
+      <div class="stat-card"><div class="val">${cronJobs}</div><div class="label">Auto Tasks</div></div>
     `;
 
+    // Score breakdown
+    const scoreItems = r.scoreItems || [];
+    if (scoreItems.length > 0) {
+      const bd = document.getElementById('score-breakdown');
+      bd.innerHTML = '<h3 style="font-size:14px; color:var(--text-dim); margin-bottom:12px; text-transform:uppercase; letter-spacing:0.05em;">Configuration Report</h3>' +
+        scoreItems.map(item => {
+          const icon = item.status === 'pass' ? '✅' : item.status === 'partial' ? '🟡' : '❌';
+          return `<div style="display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border);">
+            <span>${icon}</span>
+            <span style="flex:1; font-size:14px;">${item.name}</span>
+            <span style="font-size:13px; color:var(--text-dim);">${item.points}/${item.maxPoints}</span>
+          </div>` + (item.detail ? `<div style="padding:2px 0 6px 30px; font-size:12px; color:var(--text-muted);">${item.detail}</div>` : '');
+        }).join('');
+    }
+
+    // What's included
+    const inc = document.getElementById('install-includes');
+    inc.innerHTML = `
+      <h3 style="font-size:14px; color:var(--accent); margin-bottom:12px;">Your ${flavorName} Install Includes</h3>
+      <div style="font-size:14px; line-height:1.8; color:var(--text);">
+        ✦ ${skillsActivated} skills active<br>
+        ✦ ${cronJobs} automated tasks (including onboarding interview)<br>
+        ✦ Three-tier memory system<br>
+        ✦ Heartbeat monitoring (every 30 min)<br>
+        ✦ ${validProviders} AI provider${validProviders !== 1 ? 's' : ''} configured<br>
+        ✦ Security-hardened file permissions
+      </div>
+    `;
+
+    // Gateway section
+    const gwStatus = document.getElementById('gw-status');
+    const gwActions = document.getElementById('gw-actions');
+    if (r.gatewayStarted && r.dashboardUrl) {
+      gwStatus.innerHTML = '<p style="color:var(--green); font-size:15px; font-weight:600;">✅ Gateway running</p>';
+      gwActions.innerHTML = `
+        <button class="btn btn-primary btn-big" onclick="window.open('${r.dashboardUrl}', '_blank')" style="font-size:16px;">
+          🚀 Open Dashboard — Say Hello
+        </button>
+      `;
+    } else if (r.gatewayStarted) {
+      gwStatus.innerHTML = '<p style="color:var(--green); font-size:14px;">✅ Gateway running</p>';
+      gwActions.innerHTML = '<p style="font-size:13px; color:var(--text-dim);">Open your terminal and run: <code style="color:var(--accent);">openclaw</code></p>';
+    } else {
+      gwStatus.innerHTML = '<p style="color:var(--yellow); font-size:14px;">⚠️ Gateway not started</p>';
+      gwActions.innerHTML = `
+        <button class="btn btn-primary" id="btn-restart-gw" onclick="restartGateway()">Start Gateway</button>
+        <p style="font-size:12px; color:var(--text-muted); width:100%; margin-top:8px;">Or run: <code style="color:var(--accent);">openclaw gateway start</code></p>
+      `;
+    }
+
     goTo(5);
   } catch (err) {
     btn.disabled = false;
@@ -734,6 +795,31 @@ function copyText(text) {
   }).catch(() => {});
 }
 
+async function restartGateway() {
+  const btn = document.getElementById('btn-restart-gw');
+  if (btn) { btn.disabled = true; btn.textContent = 'Starting...'; }
+  try {
+    const res = await fetch(API + '/api/restart-gateway', { method: 'POST' });
+    const data = await res.json();
+    const gwStatus = document.getElementById('gw-status');
+    const gwActions = document.getElementById('gw-actions');
+    if (data.success && data.dashboardUrl) {
+      gwStatus.innerHTML = '<p style="color:var(--green); font-size:15px; font-weight:600;">✅ Gateway running</p>';
+      gwActions.innerHTML = `
+        <button class="btn btn-primary btn-big" onclick="window.open('${data.dashboardUrl}', '_blank')" style="font-size:16px;">
+          🚀 Open Dashboard — Say Hello
+        </button>
+      `;
+    } else {
+      gwStatus.innerHTML = '<p style="color:var(--red); font-size:14px;">❌ Could not start gateway</p>';
+      gwActions.innerHTML = `<p style="font-size:13px; color:var(--text-dim);">Run manually: <code style="color:var(--accent);">openclaw gateway start</code></p>`;
+    }
+  } catch (err) {
+    const gwStatus = document.getElementById('gw-status');
+    if (gwStatus) gwStatus.innerHTML = '<p style="color:var(--red); font-size:14px;">❌ Error: ' + (err.message || 'Unknown') + '</p>';
+  }
+}
+
 async function shutdown() {
   try { await fetch(API + '/api/shutdown', { method: 'POST' }); } catch {}
   document.body.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100vh;color:#888;font-family:sans-serif;"><p>ClawMagic closed. You can close this tab.</p></div>';