@clawlabz/clawskin 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clawlabz/clawskin",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "description": "Pixel Agent Skin Engine \u2014 Procedural 32\u00d732 character generator with scenes, animations & customization",
   "keywords": [

package/public/app.html

@@ -319,11 +319,16 @@
     let app, editingSlot = null;
 
     // ── Fullscreen canvas sizing ──
+    // Fixed logical resolution — CSS scales it up with pixelated rendering.
+    // This keeps pixel characters proportional on any screen size.
+    const LOGICAL_W = 960;
+    const LOGICAL_H = 600;
+
     function resizeCanvas() {
       const c = document.getElementById('app-canvas');
-      c.width = window.innerWidth;
-      c.height = window.innerHeight;
-      if (app) { app.width = c.width; app.height = c.height; }
+      c.width = LOGICAL_W;
+      c.height = LOGICAL_H;
+      if (app) { app.width = LOGICAL_W; app.height = LOGICAL_H; }
     }
     window.addEventListener('resize', resizeCanvas);
     resizeCanvas();
@@ -533,8 +538,8 @@
     document.addEventListener('DOMContentLoaded', () => {
       try {
         app = new ClawSkinApp('app-canvas', {
-          width: window.innerWidth,
-          height: window.innerHeight,
+          width: LOGICAL_W,
+          height: LOGICAL_H,
         });
         app.init();
         window._app = app;

package/public/js/app/ClawSkinApp.js

@@ -168,17 +168,19 @@ class ClawSkinApp {
       const res = await fetch('/api/config', { signal: AbortSignal.timeout(2000) });
       if (res.ok) {
         const config = await res.json();
+        console.log('[ClawSkin] /api/config →', JSON.stringify(config));
         if (config?.gatewayUrl) {
           const saved = this.settings.load();
+          const token = config.token || saved.token || '';
+          this._configAgents = config.agents || [];
           this.settings.update({
             gatewayUrl: config.gatewayUrl,
+            token: token,
             autoConnect: true,
           });
           if (window._connPanel) {
             window._connPanel.render(this.settings.load());
           }
-          // Use token from local config, fall back to previously saved token
-          const token = config.token || saved.token || '';
           this.gateway.connect(config.gatewayUrl, token);
           return;
         }
@@ -266,55 +268,62 @@ class ClawSkinApp {
   // ──── Multi-Agent Management ────
 
   async _discoverAgents() {
+    // Start with agents from config file (all agents, regardless of activity)
+    const configAgents = this._configAgents || [];
+    const knownAgentIds = new Set();
+
+    // Phase 1: Create slots for all agents from config file
+    for (const agent of configAgents) {
+      if (!agent.id) continue;
+      knownAgentIds.add(agent.id);
+      this._addAgent({
+        agentId: agent.id,
+        name: agent.name || agent.id,
+        label: agent.name || agent.id,
+        sessionKeys: [],
+      });
+    }
+
+    // Phase 2: Discover active sessions from Gateway and attach to slots
     try {
       const result = await this.gateway.getSessionsList({ activeMinutes: 1440 });
       const sessions = result?.sessions || result || [];
 
-      if (!Array.isArray(sessions) || sessions.length === 0) {
-        this._addAgent({ agentId: 'main', label: 'Main Agent', sessionKeys: ['main'] });
-        return;
-      }
-
-      // Group sessions by agentId
-      // Session keys look like: "agent:main:main", "agent:ifig:discord:channel:123", "agent:xhs:main"
-      // The agentId is either session.agentId or extracted from the key pattern "agent:<agentId>:..."
-      const agentMap = new Map();
-
-      for (const session of sessions) {
-        const key = session.key || session.sessionKey;
-        if (!key) continue;
+      if (Array.isArray(sessions)) {
+        for (const session of sessions) {
+          const key = session.key || session.sessionKey;
+          if (!key) continue;
 
-        // Determine agentId: prefer session.agentId, else parse from key
-        let agentId = session.agentId || null;
-        if (!agentId) {
-          const match = key.match(/^agent:([^:]+):/);
-          agentId = match ? match[1] : 'main';
-        }
+          let agentId = session.agentId || null;
+          if (!agentId) {
+            const match = key.match(/^agent:([^:]+):/);
+            agentId = match ? match[1] : 'main';
+          }
 
-        if (!agentMap.has(agentId)) {
-          agentMap.set(agentId, {
-            agentId,
-            label: session.label || agentId,
-            sessionKeys: [],
-          });
+          // If this agent wasn't in config, create a slot for it
+          if (!knownAgentIds.has(agentId)) {
+            knownAgentIds.add(agentId);
+            this._addAgent({
+              agentId,
+              label: session.label || agentId,
+              sessionKeys: [key],
+            });
+          } else {
+            // Attach session key to existing slot
+            const slot = this.agents.find(a => a.agentId === agentId);
+            if (slot && !slot.sessionKeys.includes(key)) {
+              slot.sessionKeys.push(key);
+              slot.stateMapper.addSessionKey(key);
+            }
+          }
         }
-        agentMap.get(agentId).sessionKeys.push(key);
-      }
-
-      // Create one AgentSlot per unique agentId
-      for (const [agentId, info] of agentMap) {
-        this._addAgent({
-          agentId,
-          label: info.label,
-          sessionKeys: info.sessionKeys,
-        });
-      }
-
-      if (this.agents.length === 0) {
-        this._addAgent({ agentId: 'main', label: 'Main Agent', sessionKeys: ['main'] });
       }
     } catch (e) {
       console.warn('[ClawSkinApp] session discovery failed:', e);
+    }
+
+    // Phase 3: Fallback — ensure at least one agent exists
+    if (this.agents.length === 0) {
       this._addAgent({ agentId: 'main', label: 'Main Agent', sessionKeys: ['main'] });
     }
 

package/public/js/app/GatewayClient.js

@@ -46,8 +46,15 @@ class GatewayClient {
   }
 
   _setState(state, detail) {
-    if (state === 'error') this.lastError = detail || 'Unknown error';
-    else if (state === 'connected') this.lastError = null;
+    if (state === 'error') {
+      this.lastError = detail || 'Unknown error';
+      console.warn('[GatewayClient]', state, detail || '');
+    } else if (state === 'connected') {
+      this.lastError = null;
+      console.log('[GatewayClient] connected');
+    } else {
+      console.log('[GatewayClient]', state, detail || '');
+    }
     if (this.onStateChange) this.onStateChange(state, detail);
   }
 
@@ -200,10 +207,9 @@ class GatewayClient {
       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') {
+    // Device identity — only needed for clients that require Ed25519 pairing
+    // (e.g. webchat-ui, control-ui). The 'webchat' client type works without it.
+    if (typeof DeviceIdentity !== 'undefined' && this.clientId !== 'webchat') {
       try {
         const identity = await DeviceIdentity.getOrCreate();
         const device = await DeviceIdentity.sign(identity, {

package/serve.cjs

@@ -44,11 +44,16 @@ function getLocalGatewayConfig() {
       const config = JSON.parse(raw);
       const gw = config.gateway || {};
       const port = gw.port || 18789;
+      const agentsList = (config.agents?.list || []).map(a => ({
+        id: a.id,
+        name: a.identity?.name || a.name || a.id,
+      }));
       return {
         gatewayUrl: `ws://localhost:${port}`,
         // Safe to expose token on localhost — serve.cjs binds to 127.0.0.1 by default.
         // The token never leaves the local machine.
         token: (gw.auth && gw.auth.token) || '',
+        agents: agentsList,
       };
     } catch { continue; }
   }