clawmagic 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clawmagic",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "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>
 
@@ -637,12 +638,56 @@ function renderReview() {
       return providerNames[id] + ' ⏭️';
     }).join('<br>');
 
+  // Skill descriptions for display
+  const skillDescriptions = {
+    'weather': '🌤 Weather — forecasts & conditions for any location',
+    'web_search': '🔍 Web Search — search the internet in real time',
+    'web_fetch': '📄 Web Fetch — extract content from any URL',
+    'github': '🐙 GitHub — PRs, issues, CI runs, code review',
+    'gog': '📧 Google Workspace — Gmail, Calendar, Drive, Docs',
+    'nano-banana-pro': '🎨 Image Generation — create images with AI',
+    'session-logs': '📋 Session Logs — search past conversations',
+    'three-tier-memory': '🧠 Three-Tier Memory — knowledge graph + daily notes + long-term memory',
+    'healthcheck': '🔒 Security Hardening — audits, firewall, SSH hardening',
+    'tmux': '🖥 Tmux — remote terminal session control',
+    'voice-call': '📞 Voice Calls — make and receive phone calls',
+    'nano-pdf': '📑 PDF Editor — edit PDFs with natural language',
+    'coding-agent': '🤖 Coding Agent — delegate code tasks to sub-agents',
+    'gh-issues': '🐛 GitHub Issues — auto-implement fixes and open PRs',
+    'mcporter': '🔌 MCP Servers — connect to any MCP tool server',
+    'skill-creator': '🛠 Skill Creator — build new skills for your agent',
+    'blogwatcher': '📰 Blog Watcher — monitor RSS feeds for updates',
+    'video-frames': '🎬 Video Frames — extract frames from videos',
+    '1password': '🔐 1Password — secure secret management',
+    'humanizer': '✍️ Humanizer — remove AI patterns from writing',
+    'financial-analysis': '💰 Financial Analysis — statements, valuations, models',
+  };
+
+  const skillsList = (flavorInfo.skills || [])
+    .map(s => skillDescriptions[s] || `📦 ${s}`)
+    .map(s => `<div style="padding:4px 0; font-size:13px; border-bottom:1px solid rgba(255,255,255,0.04);">${s}</div>`)
+    .join('');
+
+  const featuresList = (flavorInfo.features || [])
+    .map(f => `<span style="display:inline-block; padding:4px 10px; margin:3px; background:var(--accent-glow); border:1px solid rgba(218,119,86,0.2); border-radius:20px; font-size:12px; color:var(--accent);">${f}</span>`)
+    .join('');
+
   document.getElementById('review-summary').innerHTML = `
     <div class="review-row"><span class="review-label">Flavor</span><span class="review-value">${flavorInfo.icon || ''} ${flavorInfo.name || state.flavor}</span></div>
-    <div class="review-row"><span class="review-label">Skills</span><span class="review-value">${flavorInfo.skillCount || 0} active</span></div>
     <div class="review-row"><span class="review-label">Providers</span><span class="review-value" style="text-align:right">${providerList}</span></div>
-    <div class="review-row"><span class="review-label">Security</span><span class="review-value">File permissions, auth hardening</span></div>
-    <div class="review-row"><span class="review-label">Files</span><span class="review-value">openclaw.json, workspace files, memory dirs</span></div>
+    <div class="review-row"><span class="review-label">Security</span><span class="review-value">File permissions, auth hardening, gateway token</span></div>
+    <div class="review-row"><span class="review-label">Memory</span><span class="review-value">Three-tier system, daily notes, knowledge graph</span></div>
+    <div class="review-row"><span class="review-label">Automation</span><span class="review-value">Onboarding interview, daily check-in, weekly review</span></div>
+    ${featuresList ? `<div style="padding:16px 0 8px;"><span class="review-label">Highlights</span><div style="margin-top:8px;">${featuresList}</div></div>` : ''}
+    <div style="padding:12px 0 0;">
+      <div style="display:flex; align-items:center; justify-content:space-between; cursor:pointer;" onclick="this.parentElement.querySelector('.skill-list').style.display = this.parentElement.querySelector('.skill-list').style.display === 'none' ? 'block' : 'none'; this.querySelector('.arrow').textContent = this.parentElement.querySelector('.skill-list').style.display === 'none' ? '▶' : '▼';">
+        <span class="review-label">${flavorInfo.skillCount || 0} Skills Included</span>
+        <span class="arrow" style="font-size:11px; color:var(--text-dim);">▶</span>
+      </div>
+      <div class="skill-list" style="display:none; margin-top:8px; max-height:300px; overflow-y:auto;">
+        ${skillsList}
+      </div>
+    </div>
   `;
 }
 
@@ -703,19 +748,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 +839,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>';