@clawlabz/clawskin 1.0.0

package/public/js/state/AgentStateSync.js

@@ -0,0 +1,89 @@
+/**
+ * AgentStateSync.js — Connects to OpenClaw Gateway for real-time Agent status
+ * Falls back to demo mode when no connection is available
+ */
+class AgentStateSync {
+  constructor(characterSprite, options = {}) {
+    this.character = characterSprite;
+    this.gatewayUrl = options.gatewayUrl || null;
+    this.agentId = options.agentId || 'default';
+    this.connected = false;
+    this.ws = null;
+    this.demoMode = new DemoMode(characterSprite);
+    this.onStateChange = options.onStateChange || null;
+  }
+
+  async connect() {
+    if (!this.gatewayUrl) {
+      console.log('[AgentStateSync] No gateway URL, starting demo mode');
+      this.demoMode.start();
+      return;
+    }
+
+    try {
+      const wsUrl = this.gatewayUrl.replace(/^http/, 'ws') + `/ws/agent/${this.agentId}/events`;
+      this.ws = new WebSocket(wsUrl);
+
+      this.ws.onopen = () => {
+        console.log('[AgentStateSync] Connected to Gateway');
+        this.connected = true;
+        this.demoMode.stop();
+      };
+
+      this.ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          this._handleEvent(data);
+        } catch (e) {
+          console.warn('[AgentStateSync] Parse error:', e);
+        }
+      };
+
+      this.ws.onclose = () => {
+        console.log('[AgentStateSync] Disconnected, falling back to demo');
+        this.connected = false;
+        this.demoMode.start();
+        // Reconnect after 5s
+        setTimeout(() => this.connect(), 5000);
+      };
+
+      this.ws.onerror = () => {
+        this.connected = false;
+        this.demoMode.start();
+      };
+    } catch (e) {
+      console.warn('[AgentStateSync] Connection failed, using demo mode');
+      this.demoMode.start();
+    }
+  }
+
+  _handleEvent(data) {
+    const stateMap = {
+      'idle': 'idle', 'thinking': 'thinking', 'writing': 'typing',
+      'executing': 'executing', 'browsing': 'browsing', 'error': 'error',
+      'heartbeat': 'waving', 'sleeping': 'sleeping'
+    };
+
+    if (data.type === 'state_change') {
+      const mapped = stateMap[data.state] || 'idle';
+      this.character.setState(mapped);
+      if (data.message) {
+        this.character.showBubble(data.message, 'speech', 4000);
+      }
+      if (this.onStateChange) this.onStateChange(mapped, data);
+    }
+  }
+
+  update(dt) {
+    if (!this.connected) {
+      this.demoMode.update(dt);
+    }
+  }
+
+  disconnect() {
+    if (this.ws) this.ws.close();
+    this.demoMode.stop();
+  }
+}
+
+if (typeof window !== 'undefined') window.AgentStateSync = AgentStateSync;

package/public/js/state/DemoMode.js

@@ -0,0 +1,65 @@
+/**
+ * DemoMode.js — Automatic state cycling for demo/preview
+ * Simulates a real Agent's work day with random state changes and bubbles
+ */
+class DemoMode {
+  constructor(characterSprite) {
+    this.character = characterSprite;
+    this.active = false;
+    this.timer = 0;
+    this.nextChange = 3000;
+    this.stateIndex = 0;
+
+    this.stateSequence = [
+      { state: 'idle',      duration: [4000, 8000],  bubbles: ['Just chilling...', 'Waiting for tasks', 'Hmm, what to do...', '☕ Coffee time soon'] },
+      { state: 'thinking',  duration: [3000, 5000],  bubbles: ['Processing request...', 'Let me think...', 'Analyzing data...', 'Hmm, interesting...'] },
+      { state: 'typing',    duration: [5000, 10000], bubbles: ['Writing response...', 'Almost done...', 'def solve(x): ...', 'Drafting email...', 'Fixing that bug...'] },
+      { state: 'executing', duration: [3000, 5000],  bubbles: ['Running command...', 'npm install...', 'Deploying...', 'git push origin main'] },
+      { state: 'browsing',  duration: [4000, 7000],  bubbles: ['Searching docs...', 'Reading Stack Overflow', 'Checking GitHub...', 'Interesting article!'] },
+      { state: 'coffee',    duration: [3000, 5000],  bubbles: ['Ah, fresh coffee!', 'Need more caffeine', 'Perfect brew ☕', 'Break time!'] },
+      { state: 'error',     duration: [2000, 3000],  bubbles: ['Oops! Error 404', 'Something broke...', 'Null pointer?!', 'Let me fix that...'] },
+      { state: 'waving',    duration: [2000, 3000],  bubbles: ['Hey there! 👋', 'Hello world!', 'Hi boss!', 'Wave check!'] },
+      { state: 'sleeping',  duration: [4000, 6000],  bubbles: ['zzZ...', 'Dreaming of code...', 'Recharging...'] },
+    ];
+  }
+
+  start() {
+    this.active = true;
+    this.timer = 0;
+    this._triggerNext();
+  }
+
+  stop() {
+    this.active = false;
+  }
+
+  update(dt) {
+    if (!this.active) return;
+    this.timer += dt;
+    if (this.timer >= this.nextChange) {
+      this.timer = 0;
+      this._triggerNext();
+    }
+  }
+
+  _triggerNext() {
+    const entry = this.stateSequence[this.stateIndex % this.stateSequence.length];
+    this.stateIndex++;
+
+    this.character.setState(entry.state);
+
+    const [min, max] = entry.duration;
+    this.nextChange = min + Math.random() * (max - min);
+
+    // Show bubble with 70% probability
+    if (Math.random() < 0.7 && entry.bubbles.length > 0) {
+      const text = entry.bubbles[Math.floor(Math.random() * entry.bubbles.length)];
+      const type = entry.state === 'thinking' ? 'thought' : 'speech';
+      setTimeout(() => {
+        this.character.showBubble(text, type, this.nextChange * 0.6);
+      }, 500);
+    }
+  }
+}
+
+if (typeof window !== 'undefined') window.DemoMode = DemoMode;

package/public/js/ui/CharacterEditor.js

@@ -0,0 +1,145 @@
+/**
+ * CharacterEditor.js — Character customization UI (HTML overlay)
+ * Provides real-time preview as user adjusts appearance options
+ */
+class CharacterEditor {
+  constructor(characterSprite, containerId) {
+    this.character = characterSprite;
+    this.container = document.getElementById(containerId);
+    this.visible = false;
+    this.onChange = null;
+  }
+
+  show() {
+    this.visible = true;
+    this._render();
+    this.container.style.display = 'block';
+  }
+
+  hide() {
+    this.visible = false;
+    this.container.style.display = 'none';
+  }
+
+  toggle() {
+    this.visible ? this.hide() : this.show();
+  }
+
+  _render() {
+    const cfg = this.character.config;
+    const skinTones = SpriteGenerator.SKIN_TONES;
+    const hairColors = SpriteGenerator.HAIR_COLORS;
+    const outfitTypes = Object.keys(SpriteGenerator.OUTFIT_COLORS);
+    const hairNames = ['Short Messy', 'Spiky', 'Long', 'Curly', 'Buzz Cut'];
+    const outfitNames = { hoodie: 'Hoodie', shirt: 'Shirt', suit: 'Suit', labcoat: 'Lab Coat', tshirt: 'T-Shirt' };
+    const accessoryNames = { '': 'None', glasses: 'Glasses 🤓', hat: 'Hat 🎩', headphones: 'Headphones 🎧', cap: 'Cap 🧢' };
+
+    this.container.innerHTML = `
+      <div class="editor-panel">
+        <div class="editor-header">
+          <span>🎨 Character Creator</span>
+          <button onclick="window._charEditor.hide()" class="editor-close">✕</button>
+        </div>
+        <div class="editor-body">
+          <div class="editor-row">
+            <label>Skin Tone</label>
+            <div class="color-swatches" id="ed-skin">
+              ${skinTones.map((c, i) => `<div class="swatch ${cfg.skinColor === c ? 'active' : ''}" style="background:${c}" data-val="${c}" onclick="window._charEditor._set('skinColor','${c}')"></div>`).join('')}
+            </div>
+          </div>
+          <div class="editor-row">
+            <label>Hair Style</label>
+            <div class="btn-group" id="ed-hair">
+              ${hairNames.map((n, i) => `<button class="ed-btn ${cfg.hairType === i ? 'active' : ''}" onclick="window._charEditor._set('hairType',${i})">${n}</button>`).join('')}
+            </div>
+          </div>
+          <div class="editor-row">
+            <label>Hair Color</label>
+            <div class="color-swatches" id="ed-haircolor">
+              ${hairColors.map(c => `<div class="swatch ${cfg.hairColor === c ? 'active' : ''}" style="background:${c}" onclick="window._charEditor._set('hairColor','${c}')"></div>`).join('')}
+            </div>
+          </div>
+          <div class="editor-row">
+            <label>Outfit</label>
+            <div class="btn-group">
+              ${outfitTypes.map(t => `<button class="ed-btn ${cfg.outfitType === t ? 'active' : ''}" onclick="window._charEditor._set('outfitType','${t}')">${outfitNames[t]}</button>`).join('')}
+            </div>
+          </div>
+          <div class="editor-row">
+            <label>Outfit Color</label>
+            <div class="color-swatches">
+              ${[0,1,2,3,4].map(i => {
+                const ot = cfg.outfitType || 'hoodie';
+                const c = (SpriteGenerator.OUTFIT_COLORS[ot] || SpriteGenerator.OUTFIT_COLORS.hoodie)[i];
+                return `<div class="swatch ${cfg.outfitColorIdx === i ? 'active' : ''}" style="background:${c}" onclick="window._charEditor._set('outfitColorIdx',${i})"></div>`;
+              }).join('')}
+            </div>
+          </div>
+          <div class="editor-row">
+            <label>Accessory</label>
+            <div class="btn-group">
+              ${Object.entries(accessoryNames).map(([k, v]) => `<button class="ed-btn ${(cfg.accessory || '') === k ? 'active' : ''}" onclick="window._charEditor._set('accessory','${k || ''}')">${v}</button>`).join('')}
+            </div>
+          </div>
+          <div class="editor-actions">
+            <button class="ed-action-btn" onclick="window._charEditor._randomize()">🎲 Random</button>
+            <button class="ed-action-btn" onclick="window._charEditor._save()">💾 Save</button>
+            <button class="ed-action-btn" onclick="window._charEditor._export()">📋 Export JSON</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  _set(key, value) {
+    if (key === 'accessory' && value === '') value = null;
+    if (key === 'pet' && value === '') value = null;
+    this.character.updateConfig({ [key]: value });
+    this._render();
+    if (this.onChange) this.onChange(this.character.config);
+  }
+
+  _randomize() {
+    const cfg = CharacterSprite.randomConfig();
+    this.character.updateConfig(cfg);
+    this._render();
+    if (this.onChange) this.onChange(cfg);
+  }
+
+  _save() {
+    const config = this.character.config;
+    localStorage.setItem('clawskin_character', JSON.stringify(config));
+    // Also persist to SettingsManager so ClawSkinApp.init() picks it up
+    if (window._app && window._app.settings) {
+      window._app.settings.update({ character: config });
+    }
+    this._showToast('Character saved! ✅');
+  }
+
+  _export() {
+    const json = JSON.stringify(this.character.config, null, 2);
+    navigator.clipboard.writeText(json).then(() => {
+      this._showToast('Config copied to clipboard! 📋');
+    }).catch(() => {
+      prompt('Copy this config:', json);
+    });
+  }
+
+  _showToast(msg) {
+    const toast = document.createElement('div');
+    toast.className = 'editor-toast';
+    toast.textContent = msg;
+    document.body.appendChild(toast);
+    setTimeout(() => toast.classList.add('show'), 10);
+    setTimeout(() => { toast.classList.remove('show'); setTimeout(() => toast.remove(), 300); }, 2000);
+  }
+
+  static loadSaved() {
+    try {
+      const saved = localStorage.getItem('clawskin_character');
+      return saved ? JSON.parse(saved) : null;
+    } catch { return null; }
+  }
+}
+
+if (typeof window !== 'undefined') window.CharacterEditor = CharacterEditor;

package/public/js/ui/ScenePicker.js

@@ -0,0 +1,29 @@
+/**
+ * ScenePicker.js — Scene selection UI
+ */
+class ScenePicker {
+  constructor(scenes, onSelect) {
+    this.scenes = scenes;
+    this.currentIndex = 0;
+    this.onSelect = onSelect;
+  }
+
+  render(containerId) {
+    const el = document.getElementById(containerId);
+    if (!el) return;
+    el.innerHTML = this.scenes.map((s, i) => `
+      <button class="scene-btn ${i === this.currentIndex ? 'active' : ''}"
+              onclick="window._scenePicker.select(${i})">
+        ${s.label}
+      </button>
+    `).join('');
+  }
+
+  select(index) {
+    this.currentIndex = index;
+    if (this.onSelect) this.onSelect(this.scenes[index], index);
+    this.render('scene-picker');
+  }
+}
+
+if (typeof window !== 'undefined') window.ScenePicker = ScenePicker;

package/serve.cjs

@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+/**
+ * ClawSkin Local Server
+ * Zero-dependency HTTP server for running ClawSkin locally.
+ *
+ * Usage:
+ *   npm start                → opens http://localhost:3000 in browser
+ *   npm start -- --no-open   → start without opening browser
+ *   npm start -- --port 8080 → custom port
+ *   npx clawskin
+ */
+
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const MIME = {
+  '.html': 'text/html', '.css': 'text/css', '.js': 'application/javascript',
+  '.json': 'application/json', '.png': 'image/png', '.jpg': 'image/jpeg',
+  '.gif': 'image/gif', '.svg': 'image/svg+xml', '.ico': 'image/x-icon',
+  '.woff': 'font/woff', '.woff2': 'font/woff2',
+};
+
+const args = process.argv.slice(2);
+const portIdx = args.indexOf('--port');
+const basePort = portIdx >= 0 ? parseInt(args[portIdx + 1], 10) || 3000 : 3000;
+const shouldOpen = !args.includes('--no-open');
+const publicDir = path.join(__dirname, 'public');
+
+// Security: only bind to localhost by default. Use --host 0.0.0.0 to expose.
+const hostIdx = args.indexOf('--host');
+const bindHost = hostIdx >= 0 ? args[hostIdx + 1] : '127.0.0.1';
+
+// Read local OpenClaw config for auto-connect
+function getLocalGatewayConfig() {
+  const os = require('os');
+  const configPaths = [
+    path.join(os.homedir(), '.openclaw', 'openclaw.json'),
+    path.join(os.homedir(), '.openclaw', 'config.json'),
+  ];
+  for (const p of configPaths) {
+    try {
+      const raw = fs.readFileSync(p, 'utf8');
+      const config = JSON.parse(raw);
+      const gw = config.gateway || {};
+      const port = gw.port || 18789;
+      return {
+        gatewayUrl: `ws://localhost:${port}`,
+        // Only expose that auth is token-based, never send the actual token.
+        // The user must enter the token manually in the UI.
+        hasAuth: !!(gw.auth && gw.auth.mode === 'token'),
+      };
+    } catch { continue; }
+  }
+  return null;
+}
+
+// Security headers applied to every response
+function setSecurityHeaders(res) {
+  res.setHeader('X-Content-Type-Options', 'nosniff');
+  res.setHeader('X-Frame-Options', 'SAMEORIGIN');
+  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
+  res.setHeader('Content-Security-Policy',
+    "default-src 'self'; " +
+    "script-src 'self' 'unsafe-inline'; " +
+    "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; " +
+    "font-src 'self' https://fonts.gstatic.com; " +
+    "connect-src 'self' ws: wss:; " +
+    "img-src 'self' data:; " +
+    "frame-ancestors 'self'"
+  );
+}
+
+function handleRequest(req, res) {
+  // Only allow GET requests
+  if (req.method !== 'GET') {
+    res.writeHead(405); res.end('Method Not Allowed'); return;
+  }
+
+  let urlPath = decodeURIComponent(req.url.split('?')[0]);
+
+  // Local-only API: serve gateway config for auto-connect (token is NEVER exposed)
+  if (urlPath === '/api/config') {
+    const config = getLocalGatewayConfig();
+    const body = JSON.stringify(config || { gatewayUrl: 'ws://localhost:18789', hasAuth: false });
+    setSecurityHeaders(res);
+    res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' });
+    res.end(body);
+    return;
+  }
+
+  if (urlPath === '/') urlPath = '/app.html';
+  const filePath = path.join(publicDir, urlPath);
+  if (!filePath.startsWith(publicDir)) { res.writeHead(403); res.end('Forbidden'); return; }
+  fs.readFile(filePath, (err, data) => {
+    if (err) { res.writeHead(err.code === 'ENOENT' ? 404 : 500); res.end(err.code === 'ENOENT' ? 'Not Found' : 'Internal Error'); return; }
+    const ext = path.extname(filePath).toLowerCase();
+    setSecurityHeaders(res);
+    res.writeHead(200, { 'Content-Type': MIME[ext] || 'application/octet-stream', 'Cache-Control': 'no-cache' });
+    res.end(data);
+  });
+}
+
+function onReady(actualPort) {
+  const url = `http://localhost:${actualPort}`;
+  console.log(`\n  🐾 ClawSkin running at ${url}\n`);
+  console.log(`  → Opens app.html by default`);
+  console.log(`  → Auto-connects to OpenClaw Gateway at ws://localhost:18789`);
+  if (bindHost === '127.0.0.1') {
+    console.log(`  → Bound to localhost only (use --host 0.0.0.0 to expose to network)\n`);
+  } else {
+    console.log(`  ⚠ Bound to ${bindHost} — accessible from the network\n`);
+  }
+  if (shouldOpen) {
+    const { exec } = require('child_process');
+    const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+    exec(`${cmd} ${url}`);
+  }
+}
+
+function tryListen(port) {
+  const server = http.createServer(handleRequest);
+  server.once('error', (err) => {
+    if (err.code === 'EADDRINUSE') {
+      console.log(`  ⚠ Port ${port} in use, trying ${port + 1}...`);
+      tryListen(port + 1);
+    } else { throw err; }
+  });
+  server.listen(port, bindHost, () => onReady(port));
+}
+
+tryListen(basePort);