@clawlabz/clawskin 1.0.0

package/public/js/app/DeviceIdentity.js

@@ -0,0 +1,118 @@
+/**
+ * DeviceIdentity.js — Ed25519 device identity for OpenClaw Gateway authentication
+ *
+ * The Gateway requires every WebSocket client to present a device identity:
+ * - Generate an Ed25519 keypair on first use (stored in localStorage)
+ * - Sign the connect message with the private key
+ * - Include deviceId, publicKey, signature in connect params
+ *
+ * Uses Web Crypto API (Ed25519 supported in Chrome 113+, Firefox 129+, Safari 17+).
+ */
+class DeviceIdentity {
+  static STORAGE_KEY = 'clawskin-device-identity-v1';
+
+  /**
+   * Get or create device identity (keypair + deviceId)
+   */
+  static async getOrCreate() {
+    // Try loading from localStorage
+    const stored = DeviceIdentity._load();
+    if (stored) return stored;
+
+    // Generate new keypair
+    const keyPair = await crypto.subtle.generateKey('Ed25519', true, ['sign', 'verify']);
+    const rawPublic = await crypto.subtle.exportKey('raw', keyPair.publicKey);
+    const rawPrivate = await crypto.subtle.exportKey('pkcs8', keyPair.privateKey);
+
+    const publicKeyB64 = DeviceIdentity._bufToB64url(rawPublic);
+    const deviceId = await DeviceIdentity._sha256hex(rawPublic);
+
+    const identity = {
+      deviceId,
+      publicKey: publicKeyB64,
+      privateKeyPkcs8: DeviceIdentity._bufToB64url(rawPrivate),
+    };
+
+    DeviceIdentity._save(identity);
+    return identity;
+  }
+
+  /**
+   * Sign a connect message
+   * Format: "v2|deviceId|clientId|clientMode|role|scopes|signedAtMs|token|nonce"
+   */
+  static async sign(identity, params) {
+    const { deviceId, privateKeyPkcs8 } = identity;
+    const { clientId, clientMode, role, scopes, token, nonce } = params;
+
+    const signedAtMs = Date.now();
+    const scopeStr = (scopes || []).join(',');
+    const message = [
+      'v2', deviceId, clientId, clientMode, role || '',
+      scopeStr, String(signedAtMs), token || '', nonce || ''
+    ].join('|');
+
+    // Import private key
+    const rawKey = DeviceIdentity._b64urlToBuf(privateKeyPkcs8);
+    const privateKey = await crypto.subtle.importKey(
+      'pkcs8', rawKey, 'Ed25519', false, ['sign']
+    );
+
+    // Sign
+    const msgBytes = new TextEncoder().encode(message);
+    const sigBytes = await crypto.subtle.sign('Ed25519', privateKey, msgBytes);
+
+    return {
+      id: deviceId,
+      publicKey: identity.publicKey,
+      signature: DeviceIdentity._bufToB64url(sigBytes),
+      signedAt: signedAtMs,
+      nonce: nonce || '',
+    };
+  }
+
+  // ── Helpers ──
+
+  static _bufToB64url(buf) {
+    const bytes = new Uint8Array(buf);
+    let binary = '';
+    for (const b of bytes) binary += String.fromCharCode(b);
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
+  }
+
+  static _b64urlToBuf(b64) {
+    const standard = b64.replace(/-/g, '+').replace(/_/g, '/');
+    const padded = standard + '='.repeat((4 - standard.length % 4) % 4);
+    const binary = atob(padded);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+    return bytes.buffer;
+  }
+
+  static async _sha256hex(buf) {
+    const hash = await crypto.subtle.digest('SHA-256', buf);
+    return Array.from(new Uint8Array(hash)).map(b => b.toString(16).padStart(2, '0')).join('');
+  }
+
+  static _load() {
+    try {
+      const raw = localStorage.getItem(DeviceIdentity.STORAGE_KEY);
+      if (!raw) return null;
+      const data = JSON.parse(raw);
+      if (data?.deviceId && data?.publicKey && data?.privateKeyPkcs8) return data;
+      return null;
+    } catch { return null; }
+  }
+
+  static _save(identity) {
+    try {
+      localStorage.setItem(DeviceIdentity.STORAGE_KEY, JSON.stringify({
+        ...identity,
+        version: 1,
+        createdAtMs: Date.now(),
+      }));
+    } catch {}
+  }
+}
+
+if (typeof window !== 'undefined') window.DeviceIdentity = DeviceIdentity;

package/public/js/app/GatewayClient.js

@@ -0,0 +1,284 @@
+/**
+ * GatewayClient.js — OpenClaw Gateway WebSocket protocol client
+ * Handles connection, authentication, RPC calls, and real-time events
+ */
+class GatewayClient {
+  constructor(options = {}) {
+    this.url = options.url || null;
+    this.token = options.token || null;
+    // OpenClaw Gateway validates client.id against an allowlist.
+    // Allowed values: webchat-ui, webchat, openclaw-control-ui, cli,
+    // gateway-client, openclaw-macos, openclaw-ios, openclaw-android,
+    // node-host, test, fingerprint, openclaw-probe
+    // Default to "webchat" — lightweight client that doesn't require
+    // device identity signing (unlike webchat-ui / control-ui which need Ed25519).
+    // Users on custom Gateway builds can override this.
+    this.clientId = options.clientId || 'webchat';
+    this.clientMode = options.clientMode || 'webchat';
+    this.clientVersion = options.clientVersion || '1.0.0';
+    this.ws = null;
+    this.connected = false;
+    this.connecting = false;
+    this.pending = new Map();
+    this.backoffMs = 800;
+    this.maxBackoff = 15000;
+    this.connectNonce = null;
+    this.connectSent = false;
+    this.autoReconnect = options.autoReconnect !== false;
+    this.reconnectTimer = null;
+    this.seqCounter = 0;
+
+    this.lastError = null;
+
+    // Callbacks
+    this.onConnected = options.onConnected || null;
+    this.onDisconnected = options.onDisconnected || null;
+    this.onEvent = options.onEvent || null;
+    this.onError = options.onError || null;
+    this.onStateChange = options.onStateChange || null; // 'connecting'|'connected'|'disconnected'|'error'
+  }
+
+  _uuid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+      const r = Math.random() * 16 | 0;
+      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+    });
+  }
+
+  _setState(state, detail) {
+    if (state === 'error') this.lastError = detail || 'Unknown error';
+    else if (state === 'connected') this.lastError = null;
+    if (this.onStateChange) this.onStateChange(state, detail);
+  }
+
+  connect(url, token) {
+    if (url) this.url = url;
+    if (token !== undefined) this.token = token;
+    if (!this.url) {
+      this._setState('error', 'No Gateway URL provided');
+      return;
+    }
+
+    this.disconnect(false);
+    this.connecting = true;
+    this.lastError = null;
+    this._setState('connecting');
+
+    try {
+      this.ws = new WebSocket(this.url);
+    } catch (e) {
+      this.connecting = false;
+      this._setState('error', `Invalid URL: ${e.message}`);
+      return;
+    }
+
+    this.ws.addEventListener('open', () => {
+      // Wait for connect.challenge event from Gateway
+    });
+
+    this.ws.addEventListener('message', (e) => {
+      this._handleMessage(e.data);
+    });
+
+    this.ws.addEventListener('close', (e) => {
+      const wasConnected = this.connected;
+      this.connected = false;
+      this.connecting = false;
+      this.connectSent = false;
+      this.connectNonce = null;
+      this._flushPending(new Error(`Connection closed (${e.code})`));
+
+      if (wasConnected && this.onDisconnected) {
+        this.onDisconnected({ code: e.code, reason: e.reason });
+      }
+
+      // Don't overwrite error state — keep the auth/pairing error visible
+      if (!this.lastError) {
+        this._setState('disconnected', e.reason || `Code ${e.code}`);
+      }
+
+      if (this.autoReconnect && wasConnected) {
+        this._scheduleReconnect();
+      }
+    });
+
+    this.ws.addEventListener('error', () => {
+      if (!this.connected) {
+        this.connecting = false;
+        this._setState('error', 'Connection failed');
+      }
+    });
+  }
+
+  disconnect(permanent = true) {
+    if (permanent) this.autoReconnect = false;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+    this.connected = false;
+    this.connecting = false;
+    this.connectSent = false;
+    this.lastError = null;
+    this._flushPending(new Error('Disconnected'));
+    this._setState('disconnected');
+  }
+
+  _scheduleReconnect() {
+    if (this.reconnectTimer) return;
+    const delay = this.backoffMs;
+    this.backoffMs = Math.min(this.backoffMs * 1.7, this.maxBackoff);
+    this._setState('connecting', `Reconnecting in ${Math.round(delay/1000)}s...`);
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      this.connect();
+    }, delay);
+  }
+
+  _handleMessage(raw) {
+    let msg;
+    try { msg = JSON.parse(raw); } catch { return; }
+
+    if (msg.type === 'event') {
+      // Handle connect challenge
+      if (msg.event === 'connect.challenge') {
+        const nonce = msg.payload?.nonce;
+        if (nonce) this.connectNonce = nonce;
+        this._sendConnect();
+        return;
+      }
+      // Forward all other events
+      if (this.onEvent) {
+        try { this.onEvent(msg); } catch (e) {
+          console.error('[GatewayClient] event handler error:', e);
+        }
+      }
+      return;
+    }
+
+    if (msg.type === 'res') {
+      const pending = this.pending.get(msg.id);
+      if (!pending) return;
+      this.pending.delete(msg.id);
+      if (msg.ok) {
+        pending.resolve(msg.payload);
+      } else {
+        pending.reject(new Error(msg.error?.message || 'Request failed'));
+      }
+    }
+  }
+
+  async _sendConnect() {
+    if (this.connectSent) return;
+    this.connectSent = true;
+
+    const role = 'operator';
+    const scopes = ['operator.admin'];
+
+    const params = {
+      minProtocol: 3,
+      maxProtocol: 3,
+      client: {
+        id: this.clientId,
+        version: this.clientVersion,
+        platform: navigator.platform || 'web',
+        mode: this.clientMode,
+      },
+      role,
+      scopes,
+      caps: [],
+      auth: {},
+      userAgent: navigator.userAgent,
+      locale: navigator.language,
+    };
+
+    if (this.token) {
+      params.auth.token = this.token;
+    }
+
+    // Device identity — Gateway requires Ed25519 signed device identity.
+    // The signed message MUST use the same role/scopes/clientId/clientMode
+    // as the connect params, because Gateway reconstructs the message to verify.
+    if (typeof DeviceIdentity !== 'undefined') {
+      try {
+        const identity = await DeviceIdentity.getOrCreate();
+        const device = await DeviceIdentity.sign(identity, {
+          clientId: this.clientId,
+          clientMode: this.clientMode,
+          role,
+          scopes,
+          token: this.token || null,
+          nonce: this.connectNonce || '',
+        });
+        params.device = device;
+      } catch (e) {
+        console.warn('[GatewayClient] device identity failed:', e.message);
+      }
+    }
+
+    try {
+      const result = await this.request('connect', params);
+      this.connected = true;
+      this.connecting = false;
+      this.backoffMs = 800;
+      this._setState('connected');
+      if (this.onConnected) this.onConnected(result);
+    } catch (e) {
+      this.connecting = false;
+      const code = e.message || '';
+      if (code.includes('AUTH') || code.includes('auth') || code.includes('token')) {
+        this._setState('error', 'Authentication failed — check your token');
+      } else if (code.includes('PAIRING') || code.includes('pairing')) {
+        this._setState('error', 'Device pairing required — approve in Gateway dashboard');
+      } else if (code.includes('device identity') || code.includes('DEVICE_IDENTITY')) {
+        this._setState('error', 'Device identity required — your browser may not support Ed25519');
+      } else {
+        this._setState('error', e.message || 'Connection failed');
+      }
+      if (this.ws) this.ws.close();
+    }
+  }
+
+  request(method, params = {}) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      return Promise.reject(new Error('Not connected'));
+    }
+    const id = this._uuid();
+    const msg = { type: 'req', id, method, params };
+    return new Promise((resolve, reject) => {
+      this.pending.set(id, { resolve, reject });
+      this.ws.send(JSON.stringify(msg));
+      // Timeout after 30s
+      setTimeout(() => {
+        if (this.pending.has(id)) {
+          this.pending.delete(id);
+          reject(new Error('Request timeout'));
+        }
+      }, 30000);
+    });
+  }
+
+  _flushPending(error) {
+    for (const [, p] of this.pending) p.reject(error);
+    this.pending.clear();
+  }
+
+  // Convenience methods
+  async getStatus() { return this.request('status', {}); }
+  async getHealth() { return this.request('health', {}); }
+  async getAgentIdentity(agentId) {
+    return this.request('agent.identity.get', agentId ? { agentId } : {});
+  }
+  async getChatHistory(sessionKey, limit = 50) {
+    return this.request('chat.history', { sessionKey, limit });
+  }
+  async getSessionsList(opts = {}) {
+    return this.request('sessions.list', { activeMinutes: 120, ...opts });
+  }
+}
+
+if (typeof window !== 'undefined') window.GatewayClient = GatewayClient;

package/public/js/app/SettingsManager.js

@@ -0,0 +1,47 @@
+/**
+ * SettingsManager.js — Persistent settings via localStorage
+ */
+class SettingsManager {
+  constructor(storageKey = 'clawskin_settings') {
+    this.storageKey = storageKey;
+    this.defaults = {
+      gatewayUrl: '',
+      token: '',
+      sessionKey: 'main',
+      autoConnect: true,
+      scene: 0,
+      character: null,
+      lastConnected: null,
+    };
+  }
+
+  load() {
+    try {
+      const raw = localStorage.getItem(this.storageKey);
+      if (!raw) return { ...this.defaults };
+      const saved = JSON.parse(raw);
+      return { ...this.defaults, ...saved };
+    } catch { return { ...this.defaults }; }
+  }
+
+  save(settings) {
+    try {
+      localStorage.setItem(this.storageKey, JSON.stringify(settings));
+    } catch (e) {
+      console.warn('[SettingsManager] save failed:', e);
+    }
+  }
+
+  update(patch) {
+    const current = this.load();
+    const updated = { ...current, ...patch };
+    this.save(updated);
+    return updated;
+  }
+
+  clear() {
+    try { localStorage.removeItem(this.storageKey); } catch {}
+  }
+}
+
+if (typeof window !== 'undefined') window.SettingsManager = SettingsManager;

package/public/js/character/AnimationManager.js

@@ -0,0 +1,69 @@
+/**
+ * AnimationManager.js — Character animation state machine
+ * Manages transitions between agent states and animation frames
+ */
+class AnimationManager {
+  constructor() {
+    this.currentState = 'idle';
+    this.frameIndex = 0;
+    this.frameTimer = 0;
+    this.transitionTimer = 0;
+
+    // Animation frame indices in sprite sheet (pairs for 2-frame anims)
+    this.stateFrames = {
+      idle:      [0, 1],
+      typing:    [2, 3],
+      thinking:  [4, 5],
+      walking:   [6, 7],
+      sleeping:  [8, 8],
+      error:     [9, 9],
+      waving:    [10, 11],
+      coffee:    [12, 13],
+      browsing:  [14, 15],
+      executing: [6, 7]  // reuse walking
+    };
+
+    // Frame durations (ms) per state
+    this.frameSpeeds = {
+      idle: 1200, typing: 200, thinking: 800, walking: 300,
+      sleeping: 2000, error: 500, waving: 400, coffee: 1500,
+      browsing: 1000, executing: 300
+    };
+
+    // State display names
+    this.stateLabels = {
+      idle: '💤 Idle', typing: '⌨️ Writing', thinking: '🤔 Thinking',
+      walking: '🚶 Moving', sleeping: '😴 Sleeping', error: '❌ Error',
+      waving: '👋 Waving', coffee: '☕ Coffee Break', browsing: '🌐 Browsing',
+      executing: '⚡ Executing'
+    };
+  }
+
+  setState(newState) {
+    if (!this.stateFrames[newState] || newState === this.currentState) return;
+    this.currentState = newState;
+    this.frameIndex = 0;
+    this.frameTimer = 0;
+  }
+
+  update(dt) {
+    this.frameTimer += dt;
+    const speed = this.frameSpeeds[this.currentState] || 500;
+    if (this.frameTimer >= speed) {
+      this.frameTimer = 0;
+      const frames = this.stateFrames[this.currentState];
+      this.frameIndex = (this.frameIndex + 1) % frames.length;
+    }
+  }
+
+  getCurrentFrame() {
+    const frames = this.stateFrames[this.currentState];
+    return frames[this.frameIndex];
+  }
+
+  getLabel() {
+    return this.stateLabels[this.currentState] || this.currentState;
+  }
+}
+
+if (typeof window !== 'undefined') window.AnimationManager = AnimationManager;

package/public/js/character/BubbleManager.js

@@ -0,0 +1,157 @@
+/**
+ * BubbleManager.js — Speech/thought bubble with typewriter effect
+ */
+class BubbleManager {
+  constructor() {
+    this.active = false;
+    this.text = '';
+    this.displayText = '';
+    this.charIndex = 0;
+    this.timer = 0;
+    this.displayDuration = 0;
+    this.maxDuration = 5000;
+    this.typeSpeed = 50; // ms per char
+    this.bubbleType = 'speech'; // speech | thought | status
+    this.queue = [];
+  }
+
+  show(text, type = 'speech', duration = 5000) {
+    if (this.active) {
+      this.queue.push({ text, type, duration });
+      return;
+    }
+    this.active = true;
+    this.text = text.slice(0, 60); // max 60 chars
+    this.displayText = '';
+    this.charIndex = 0;
+    this.timer = 0;
+    this.displayDuration = 0;
+    this.maxDuration = duration;
+    this.bubbleType = type;
+  }
+
+  update(dt) {
+    if (!this.active) return;
+
+    if (this.charIndex < this.text.length) {
+      this.timer += dt;
+      if (this.timer >= this.typeSpeed) {
+        this.timer = 0;
+        this.charIndex++;
+        this.displayText = this.text.slice(0, this.charIndex);
+      }
+    } else {
+      this.displayDuration += dt;
+      if (this.displayDuration >= this.maxDuration) {
+        this.active = false;
+        if (this.queue.length > 0) {
+          const next = this.queue.shift();
+          this.show(next.text, next.type, next.duration);
+        }
+      }
+    }
+  }
+
+  render(ctx, x, y) {
+    if (!this.active || !this.displayText) return;
+
+    ctx.save();
+    ctx.font = '10px "Press Start 2P", monospace';
+    ctx.textBaseline = 'top';
+
+    const lines = this._wrapText(ctx, this.displayText, 120);
+    const lineHeight = 13;
+    const padding = 6;
+    const maxWidth = Math.max(...lines.map(l => ctx.measureText(l).width));
+    const bw = maxWidth + padding * 2;
+    const bh = lines.length * lineHeight + padding * 2;
+    const bx = x - bw / 2;
+    const by = y - bh - 12;
+
+    // Bubble background
+    ctx.fillStyle = this.bubbleType === 'thought' ? '#F0F0F0' : '#FFFFFF';
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 2;
+
+    // Rounded rect
+    const r = 4;
+    ctx.beginPath();
+    ctx.moveTo(bx + r, by);
+    ctx.lineTo(bx + bw - r, by);
+    ctx.quadraticCurveTo(bx + bw, by, bx + bw, by + r);
+    ctx.lineTo(bx + bw, by + bh - r);
+    ctx.quadraticCurveTo(bx + bw, by + bh, bx + bw - r, by + bh);
+    ctx.lineTo(bx + r, by + bh);
+    ctx.quadraticCurveTo(bx, by + bh, bx, by + bh - r);
+    ctx.lineTo(bx, by + r);
+    ctx.quadraticCurveTo(bx, by, bx + r, by);
+    ctx.closePath();
+    ctx.fill();
+    ctx.stroke();
+
+    // Tail
+    if (this.bubbleType === 'thought') {
+      ctx.fillStyle = '#F0F0F0';
+      ctx.beginPath();
+      ctx.arc(x - 4, by + bh + 5, 3, 0, Math.PI * 2);
+      ctx.fill(); ctx.stroke();
+      ctx.beginPath();
+      ctx.arc(x - 2, by + bh + 10, 2, 0, Math.PI * 2);
+      ctx.fill(); ctx.stroke();
+    } else {
+      ctx.fillStyle = '#FFFFFF';
+      ctx.beginPath();
+      ctx.moveTo(x - 5, by + bh);
+      ctx.lineTo(x, by + bh + 8);
+      ctx.lineTo(x + 5, by + bh);
+      ctx.closePath();
+      ctx.fill();
+      ctx.strokeStyle = '#333';
+      ctx.beginPath();
+      ctx.moveTo(x - 5, by + bh);
+      ctx.lineTo(x, by + bh + 8);
+      ctx.lineTo(x + 5, by + bh);
+      ctx.stroke();
+      // Cover top of tail
+      ctx.fillStyle = '#FFFFFF';
+      ctx.fillRect(x - 4, by + bh - 1, 9, 2);
+    }
+
+    // Text
+    ctx.fillStyle = '#333';
+    lines.forEach((line, i) => {
+      ctx.fillText(line, bx + padding, by + padding + i * lineHeight);
+    });
+
+    // Cursor blink when typing
+    if (this.charIndex < this.text.length) {
+      const lastLine = lines[lines.length - 1];
+      const lw = ctx.measureText(lastLine).width;
+      if (Math.floor(Date.now() / 300) % 2 === 0) {
+        ctx.fillStyle = '#333';
+        ctx.fillRect(bx + padding + lw + 1, by + padding + (lines.length - 1) * lineHeight, 6, 10);
+      }
+    }
+
+    ctx.restore();
+  }
+
+  _wrapText(ctx, text, maxWidth) {
+    const words = text.split(' ');
+    const lines = [];
+    let current = '';
+    for (const word of words) {
+      const test = current ? current + ' ' + word : word;
+      if (ctx.measureText(test).width > maxWidth && current) {
+        lines.push(current);
+        current = word;
+      } else {
+        current = test;
+      }
+    }
+    if (current) lines.push(current);
+    return lines.length ? lines : [''];
+  }
+}
+
+if (typeof window !== 'undefined') window.BubbleManager = BubbleManager;