feat: add pixel animation homepage with Express proxy layer

- Add Star-Office-UI pixel animation as the default homepage (/)
- Create Express proxy (proxy.cjs) on port 7860, OpenClaw moves to 7861
- Admin panel accessible via /admin with auto token injection
- State bridge maps OpenClaw status to animation states
- Frontend assets cloned from Star-Office-UI during Docker build
- Add A2A gateway plugin support in Dockerfile and config
- Prepare multi-agent infrastructure (peer polling, guest rendering)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Dockerfile

@@ -1,5 +1,5 @@
-# OpenClaw on Hugging Face Spaces — 优化构建（v2）
-# 优化点：node 用户构建（消除 chown）、合并 RUN 层（减少层开销）
+# OpenClaw on Hugging Face Spaces — v3 with Pixel Animation + A2A
+# Features: Star-Office-UI animation homepage, Express proxy, A2A gateway
 FROM node:22-bookworm
 SHELL ["/bin/bash", "-c"]
 
@@ -52,10 +52,32 @@ RUN echo "[build][layer2] Clone + install + build..." && START=$(date +%s) \
   && echo "[build] version: $(cat /app/openclaw/.version)" \
   && echo "[build][layer2] Total clone+install+build: $(($(date +%s) - START))s"
 
-# ── Layer 3 (node): Scripts + Config ──────────────────────────────────────────
+# ── Layer 2b (node): A2A Gateway Plugin ──────────────────────────────────────
+RUN echo "[build][layer2b] A2A gateway plugin..." && START=$(date +%s) \
+  && git clone --depth 1 https://github.com/win4r/openclaw-a2a-gateway.git \
+     /app/openclaw/extensions/a2a-gateway \
+  && cd /app/openclaw/extensions/a2a-gateway \
+  && npm install --production 2>/dev/null || echo "[build] A2A npm install skipped (will retry at runtime)" \
+  && echo "[build][layer2b] A2A gateway: $(($(date +%s) - START))s"
+
+# ── Layer 2c (node): Star-Office-UI frontend assets ──────────────────────────
+# Clone full asset set, then overlay our modified text files on top
+RUN echo "[build][layer2c] Star-Office-UI assets..." && START=$(date +%s) \
+  && git clone --depth 1 https://github.com/ringhyacinth/Star-Office-UI.git /tmp/star-office \
+  && cp -r /tmp/star-office/frontend /home/node/frontend \
+  && rm -rf /tmp/star-office \
+  && echo "[build][layer2c] Star-Office-UI: $(($(date +%s) - START))s"
+
+# ── Layer 3 (node): Scripts + Config + Frontend overrides ────────────────────
 COPY --chown=node:node scripts /home/node/scripts
+# Overlay modified frontend files (index.html, game.js, layout.js) on top of cloned assets
+COPY --chown=node:node frontend/*.html /home/node/frontend/
+COPY --chown=node:node frontend/*.js /home/node/frontend/
 COPY --chown=node:node openclaw.json /home/node/scripts/openclaw.json.default
-RUN chmod +x /home/node/scripts/entrypoint.sh /home/node/scripts/sync_hf.py
+COPY --chown=node:node package.json /home/node/package.json
+RUN chmod +x /home/node/scripts/entrypoint.sh /home/node/scripts/sync_hf.py \
+  && cd /home/node && npm install --production \
+  && echo "[build] Proxy dependencies installed"
 
 ENV NODE_ENV=production
 ENV OPENCLAW_BUNDLED_PLUGINS_DIR=/app/openclaw/empty-bundled-plugins

frontend/.gitignore

@@ -0,0 +1,15 @@
+# Binary assets are cloned from Star-Office-UI during Docker build
+# Only modified text files (index.html, game.js, layout.js) are tracked in git
+*.webp
+*.png
+*.jpg
+*.woff2
+*.zip
+*.min.js
+vendor/
+fonts/
+*.py
+*.md
+electron-standalone.html
+invite.html
+join.html

frontend/game.js

@@ -0,0 +1,1034 @@
+// Star Office UI - 游戏主逻辑
+// 依赖: layout.js（必须在这个之前加载）
+
+// 检测浏览器是否支持 WebP
+let supportsWebP = false;
+
+// 方法 1: 使用 canvas 检测
+function checkWebPSupport() {
+  return new Promise((resolve) => {
+    const canvas = document.createElement('canvas');
+    if (canvas.getContext && canvas.getContext('2d')) {
+      resolve(canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0);
+    } else {
+      resolve(false);
+    }
+  });
+}
+
+// 方法 2: 使用 image 检测（备用）
+function checkWebPSupportFallback() {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(true);
+    img.onerror = () => resolve(false);
+    img.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==';
+  });
+}
+
+// 获取文件扩展名（根据 WebP 支持情况 + 布局配置的 forcePng）
+function getExt(pngFile) {
+  // star-working-spritesheet.png 太宽了，WebP 不支持，始终用 PNG
+  if (pngFile === 'star-working-spritesheet.png') {
+    return '.png';
+  }
+  // 如果布局配置里强制用 PNG，就用 .png
+  if (LAYOUT.forcePng && LAYOUT.forcePng[pngFile.replace(/\.(png|webp)$/, '')]) {
+    return '.png';
+  }
+  return supportsWebP ? '.webp' : '.png';
+}
+
+const config = {
+  type: Phaser.AUTO,
+  width: LAYOUT.game.width,
+  height: LAYOUT.game.height,
+  parent: 'game-container',
+  pixelArt: true,
+  physics: { default: 'arcade', arcade: { gravity: { y: 0 }, debug: false } },
+  scene: { preload: preload, create: create, update: update }
+};
+
+let totalAssets = 0;
+let loadedAssets = 0;
+let loadingProgressBar, loadingProgressContainer, loadingOverlay, loadingText;
+
+// Memo 相关函数
+async function loadMemo() {
+  const memoDate = document.getElementById('memo-date');
+  const memoContent = document.getElementById('memo-content');
+
+  try {
+    const response = await fetch('/yesterday-memo?t=' + Date.now(), { cache: 'no-store' });
+    const data = await response.json();
+
+    if (data.success && data.memo) {
+      memoDate.textContent = data.date || '';
+      memoContent.innerHTML = data.memo.replace(/\n/g, '<br>');
+    } else {
+      memoContent.innerHTML = '<div id="memo-placeholder">暂无昨日日记</div>';
+    }
+  } catch (e) {
+    console.error('加载 memo 失败:', e);
+    memoContent.innerHTML = '<div id="memo-placeholder">加载失败</div>';
+  }
+}
+
+// 更新加载进度
+function updateLoadingProgress() {
+  loadedAssets++;
+  const percent = Math.min(100, Math.round((loadedAssets / totalAssets) * 100));
+  if (loadingProgressBar) {
+    loadingProgressBar.style.width = percent + '%';
+  }
+  if (loadingText) {
+    loadingText.textContent = `正在加载 Star 的像素办公室... ${percent}%`;
+  }
+}
+
+// 隐藏加载界面
+function hideLoadingOverlay() {
+  setTimeout(() => {
+    if (loadingOverlay) {
+      loadingOverlay.style.transition = 'opacity 0.5s ease';
+      loadingOverlay.style.opacity = '0';
+      setTimeout(() => {
+        loadingOverlay.style.display = 'none';
+      }, 500);
+    }
+  }, 300);
+}
+
+const STATES = {
+  idle: { name: '待命', area: 'breakroom' },
+  writing: { name: '整理文档', area: 'writing' },
+  researching: { name: '搜索信息', area: 'researching' },
+  executing: { name: '执行任务', area: 'writing' },
+  syncing: { name: '同步备份', area: 'writing' },
+  error: { name: '出错了', area: 'error' }
+};
+
+const BUBBLE_TEXTS = {
+  idle: [
+    '待命中：耳朵竖起来了',
+    '我在这儿，随时可以开工',
+    '先把桌面收拾干净再说',
+    '呼——给大脑放个风',
+    '今天也要优雅地高效',
+    '等待，是为了更准确的一击',
+    '咖啡还热，灵感也还在',
+    '我在后台给你加 Buff',
+    '状态：静心 / 充电',
+    '小猫说：慢一点也没关系'
+  ],
+  writing: [
+    '进入专注模式：勿扰',
+    '先把关键路径跑通',
+    '我来把复杂变简单',
+    '把 bug 关进笼子里',
+    '写到一半，先保存',
+    '把每一步都做成可回滚',
+    '今天的进度，明天的底气',
+    '先收敛，再发散',
+    '让系统变得更可解释',
+    '稳住，我们能赢'
+  ],
+  researching: [
+    '我在挖证据链',
+    '让我把信息熬成结论',
+    '找到了：关键在这里',
+    '先把变量控制住',
+    '我在查：它为什么会这样',
+    '把直觉写成验证',
+    '先定位，再优化',
+    '别急，先画因果图'
+  ],
+  executing: [
+    '执行中：不要眨眼',
+    '把任务切成小块逐个击破',
+    '开始跑 pipeline',
+    '一键推进：走你',
+    '让结果自己说话',
+    '先做最小可行，再做最美版本'
+  ],
+  syncing: [
+    '同步中：把今天锁进云里',
+    '备份不是仪式，是安全感',
+    '写入中…别断电',
+    '把变更交给时间戳',
+    '云端对齐：咔哒',
+    '同步完成前先��乱动',
+    '把未来的自己从灾难里救出来',
+    '多一份备份，少一份后悔'
+  ],
+  error: [
+    '警报响了：先别慌',
+    '我闻到 bug 的味道了',
+    '先复现，再谈修复',
+    '把日志给我，我会说人话',
+    '错误不是敌人，是线索',
+    '把影响面圈起来',
+    '先止血，再手术',
+    '我在：马上定位根因',
+    '别怕，这种我见多了',
+    '报警中：让问题自己现形'
+  ],
+  cat: [
+    '喵~',
+    '咕噜咕噜…',
+    '尾巴摇一摇',
+    '晒太阳最开心',
+    '有人来看我啦',
+    '我是这个办公室的吉祥物',
+    '伸个懒腰',
+    '今天的罐罐准备好了吗',
+    '呼噜呼噜',
+    '这个位置视野最好'
+  ]
+};
+
+let game, star, sofa, serverroom, areas = {}, currentState = 'idle', pendingDesiredState = null, statusText, lastFetch = 0, lastBlink = 0, lastBubble = 0, targetX = 660, targetY = 170, bubble = null, typewriterText = '', typewriterTarget = '', typewriterIndex = 0, lastTypewriter = 0, syncAnimSprite = null, catBubble = null;
+let isMoving = false;
+let waypoints = [];
+let lastWanderAt = 0;
+let coordsOverlay, coordsDisplay, coordsToggle;
+let showCoords = false;
+const FETCH_INTERVAL = 2000;
+const BLINK_INTERVAL = 2500;
+const BUBBLE_INTERVAL = 8000;
+const CAT_BUBBLE_INTERVAL = 18000;
+let lastCatBubble = 0;
+const TYPEWRITER_DELAY = 50;
+let agents = {}; // agentId -> sprite/container
+let lastAgentsFetch = 0;
+const AGENTS_FETCH_INTERVAL = 2500;
+
+// agent 颜色配置
+const AGENT_COLORS = {
+  star: 0xffd700,
+  npc1: 0x00aaff,
+  agent_nika: 0xff69b4,
+  default: 0x94a3b8
+};
+
+// agent 名字颜色
+const NAME_TAG_COLORS = {
+  approved: 0x22c55e,
+  pending: 0xf59e0b,
+  rejected: 0xef4444,
+  offline: 0x64748b,
+  default: 0x1f2937
+};
+
+// breakroom / writing / error 区域的 agent 分布位置（多 agent 时错开）
+const AREA_POSITIONS = {
+  breakroom: [
+    { x: 620, y: 180 },
+    { x: 560, y: 220 },
+    { x: 680, y: 210 },
+    { x: 540, y: 170 },
+    { x: 700, y: 240 },
+    { x: 600, y: 250 },
+    { x: 650, y: 160 },
+    { x: 580, y: 200 }
+  ],
+  writing: [
+    { x: 760, y: 320 },
+    { x: 830, y: 280 },
+    { x: 690, y: 350 },
+    { x: 770, y: 260 },
+    { x: 850, y: 340 },
+    { x: 720, y: 300 },
+    { x: 800, y: 370 },
+    { x: 750, y: 240 }
+  ],
+  error: [
+    { x: 180, y: 260 },
+    { x: 120, y: 220 },
+    { x: 240, y: 230 },
+    { x: 160, y: 200 },
+    { x: 220, y: 270 },
+    { x: 140, y: 250 },
+    { x: 200, y: 210 },
+    { x: 260, y: 260 }
+  ]
+};
+
+
+// 状态控制栏函数（用于测试）
+function setState(state, detail) {
+  fetch('/set_state', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ state, detail })
+  }).then(() => fetchStatus());
+}
+
+// 初始化：先检测 WebP 支持，再启动游戏
+async function initGame() {
+  try {
+    supportsWebP = await checkWebPSupport();
+  } catch (e) {
+    try {
+      supportsWebP = await checkWebPSupportFallback();
+    } catch (e2) {
+      supportsWebP = false;
+    }
+  }
+
+  console.log('WebP 支持:', supportsWebP);
+  new Phaser.Game(config);
+}
+
+function preload() {
+  loadingOverlay = document.getElementById('loading-overlay');
+  loadingProgressBar = document.getElementById('loading-progress-bar');
+  loadingText = document.getElementById('loading-text');
+  loadingProgressContainer = document.getElementById('loading-progress-container');
+
+  // 从 LAYOUT 读取总资源数量（避免 magic number）
+  totalAssets = LAYOUT.totalAssets || 15;
+  loadedAssets = 0;
+
+  this.load.on('filecomplete', () => {
+    updateLoadingProgress();
+  });
+
+  this.load.on('complete', () => {
+    hideLoadingOverlay();
+  });
+
+  this.load.image('office_bg', '/static/office_bg_small' + (supportsWebP ? '.webp' : '.png') + '?v={{VERSION_TIMESTAMP}}');
+  this.load.spritesheet('star_idle', '/static/star-idle-spritesheet' + getExt('star-idle-spritesheet.png'), { frameWidth: 128, frameHeight: 128 });
+  this.load.spritesheet('star_researching', '/static/star-researching-spritesheet' + getExt('star-researching-spritesheet.png'), { frameWidth: 128, frameHeight: 105 });
+
+  this.load.image('sofa_idle', '/static/sofa-idle' + getExt('sofa-idle.png'));
+  this.load.spritesheet('sofa_busy', '/static/sofa-busy-spritesheet' + getExt('sofa-busy-spritesheet.png'), { frameWidth: 256, frameHeight: 256 });
+
+  this.load.spritesheet('plants', '/static/plants-spritesheet' + getExt('plants-spritesheet.png'), { frameWidth: 160, frameHeight: 160 });
+  this.load.spritesheet('posters', '/static/posters-spritesheet' + getExt('posters-spritesheet.png'), { frameWidth: 160, frameHeight: 160 });
+  this.load.spritesheet('coffee_machine', '/static/coffee-machine-spritesheet' + getExt('coffee-machine-spritesheet.png'), { frameWidth: 230, frameHeight: 230 });
+  this.load.spritesheet('serverroom', '/static/serverroom-spritesheet' + getExt('serverroom-spritesheet.png'), { frameWidth: 180, frameHeight: 251 });
+
+  this.load.spritesheet('error_bug', '/static/error-bug-spritesheet-grid' + (supportsWebP ? '.webp' : '.png'), { frameWidth: 180, frameHeight: 180 });
+  this.load.spritesheet('cats', '/static/cats-spritesheet' + (supportsWebP ? '.webp' : '.png'), { frameWidth: 160, frameHeight: 160 });
+  this.load.image('desk', '/static/desk' + getExt('desk.png'));
+  this.load.spritesheet('star_working', '/static/star-working-spritesheet-grid' + (supportsWebP ? '.webp' : '.png'), { frameWidth: 230, frameHeight: 144 });
+  this.load.spritesheet('sync_anim', '/static/sync-animation-spritesheet-grid' + (supportsWebP ? '.webp' : '.png'), { frameWidth: 256, frameHeight: 256 });
+  this.load.image('memo_bg', '/static/memo-bg' + (supportsWebP ? '.webp' : '.png'));
+
+  // 新办公桌：强制 PNG（透明）
+  this.load.image('desk_v2', '/static/desk-v2.png');
+  this.load.spritesheet('flowers', '/static/flowers-spritesheet' + (supportsWebP ? '.webp' : '.png'), { frameWidth: 65, frameHeight: 65 });
+}
+
+function create() {
+  game = this;
+  this.add.image(640, 360, 'office_bg');
+
+  // === 沙发（来自 LAYOUT）===
+  sofa = this.add.sprite(
+    LAYOUT.furniture.sofa.x,
+    LAYOUT.furniture.sofa.y,
+    'sofa_busy'
+  ).setOrigin(LAYOUT.furniture.sofa.origin.x, LAYOUT.furniture.sofa.origin.y);
+  sofa.setDepth(LAYOUT.furniture.sofa.depth);
+
+  this.anims.create({
+    key: 'sofa_busy',
+    frames: this.anims.generateFrameNumbers('sofa_busy', { start: 0, end: 47 }),
+    frameRate: 12,
+    repeat: -1
+  });
+
+  areas = LAYOUT.areas;
+
+  this.anims.create({
+    key: 'star_idle',
+    frames: this.anims.generateFrameNumbers('star_idle', { start: 0, end: 29 }),
+    frameRate: 12,
+    repeat: -1
+  });
+  this.anims.create({
+    key: 'star_researching',
+    frames: this.anims.generateFrameNumbers('star_researching', { start: 0, end: 95 }),
+    frameRate: 12,
+    repeat: -1
+  });
+
+  star = game.physics.add.sprite(areas.breakroom.x, areas.breakroom.y, 'star_idle');
+  star.setOrigin(0.5);
+  star.setScale(1.4);
+  star.setAlpha(0.95);
+  star.setDepth(20);
+  star.setVisible(false);
+  star.anims.stop();
+
+  if (game.textures.exists('sofa_busy')) {
+    sofa.setTexture('sofa_busy');
+    sofa.anims.play('sofa_busy', true);
+  }
+
+  // === 牌匾（来自 LAYOUT）===
+  const plaqueX = LAYOUT.plaque.x;
+  const plaqueY = LAYOUT.plaque.y;
+  const plaqueBg = game.add.rectangle(plaqueX, plaqueY, LAYOUT.plaque.width, LAYOUT.plaque.height, 0x5d4037);
+  plaqueBg.setStrokeStyle(3, 0x3e2723);
+  const plaqueText = game.add.text(plaqueX, plaqueY, 'HuggingClaw Pixel Office', {
+    fontFamily: 'ArkPixel, monospace',
+    fontSize: '18px',
+    fill: '#ffd700',
+    fontWeight: 'bold',
+    stroke: '#000',
+    strokeThickness: 2
+  }).setOrigin(0.5);
+  game.add.text(plaqueX - 190, plaqueY, '⭐', { fontFamily: 'ArkPixel, monospace', fontSize: '20px' }).setOrigin(0.5);
+  game.add.text(plaqueX + 190, plaqueY, '⭐', { fontFamily: 'ArkPixel, monospace', fontSize: '20px' }).setOrigin(0.5);
+
+  // === 植物们（来自 LAYOUT）===
+  const plantFrameCount = 16;
+  for (let i = 0; i < LAYOUT.furniture.plants.length; i++) {
+    const p = LAYOUT.furniture.plants[i];
+    const randomPlantFrame = Math.floor(Math.random() * plantFrameCount);
+    const plant = game.add.sprite(p.x, p.y, 'plants', randomPlantFrame).setOrigin(0.5);
+    plant.setDepth(p.depth);
+    plant.setInteractive({ useHandCursor: true });
+    window[`plantSprite${i === 0 ? '' : i + 1}`] = plant;
+    plant.on('pointerdown', (() => {
+      const next = Math.floor(Math.random() * plantFrameCount);
+      plant.setFrame(next);
+    }));
+  }
+
+  // === 海报（来自 LAYOUT）===
+  const postersFrameCount = 32;
+  const randomPosterFrame = Math.floor(Math.random() * postersFrameCount);
+  const poster = game.add.sprite(LAYOUT.furniture.poster.x, LAYOUT.furniture.poster.y, 'posters', randomPosterFrame).setOrigin(0.5);
+  poster.setDepth(LAYOUT.furniture.poster.depth);
+  poster.setInteractive({ useHandCursor: true });
+  window.posterSprite = poster;
+  window.posterFrameCount = postersFrameCount;
+  poster.on('pointerdown', () => {
+    const next = Math.floor(Math.random() * window.posterFrameCount);
+    window.posterSprite.setFrame(next);
+  });
+
+  // === 小猫（来自 LAYOUT）===
+  const catsFrameCount = 16;
+  const randomCatFrame = Math.floor(Math.random() * catsFrameCount);
+  const cat = game.add.sprite(LAYOUT.furniture.cat.x, LAYOUT.furniture.cat.y, 'cats', randomCatFrame).setOrigin(LAYOUT.furniture.cat.origin.x, LAYOUT.furniture.cat.origin.y);
+  cat.setDepth(LAYOUT.furniture.cat.depth);
+  cat.setInteractive({ useHandCursor: true });
+  window.catSprite = cat;
+  window.catsFrameCount = catsFrameCount;
+  cat.on('pointerdown', () => {
+    const next = Math.floor(Math.random() * window.catsFrameCount);
+    window.catSprite.setFrame(next);
+  });
+
+  // === 咖啡机（来自 LAYOUT）===
+  this.anims.create({
+    key: 'coffee_machine',
+    frames: this.anims.generateFrameNumbers('coffee_machine', { start: 0, end: 95 }),
+    frameRate: 12.5,
+    repeat: -1
+  });
+  const coffeeMachine = this.add.sprite(
+    LAYOUT.furniture.coffeeMachine.x,
+    LAYOUT.furniture.coffeeMachine.y,
+    'coffee_machine'
+  ).setOrigin(LAYOUT.furniture.coffeeMachine.origin.x, LAYOUT.furniture.coffeeMachine.origin.y);
+  coffeeMachine.setDepth(LAYOUT.furniture.coffeeMachine.depth);
+  coffeeMachine.anims.play('coffee_machine', true);
+
+  // === 服务器区（来自 LAYOUT）===
+  this.anims.create({
+    key: 'serverroom_on',
+    frames: this.anims.generateFrameNumbers('serverroom', { start: 0, end: 39 }),
+    frameRate: 6,
+    repeat: -1
+  });
+  serverroom = this.add.sprite(
+    LAYOUT.furniture.serverroom.x,
+    LAYOUT.furniture.serverroom.y,
+    'serverroom',
+    0
+  ).setOrigin(LAYOUT.furniture.serverroom.origin.x, LAYOUT.furniture.serverroom.origin.y);
+  serverroom.setDepth(LAYOUT.furniture.serverroom.depth);
+  serverroom.anims.stop();
+  serverroom.setFrame(0);
+
+  // === 新办公桌（来自 LAYOUT，强制透明 PNG）===
+  const desk = this.add.image(
+    LAYOUT.furniture.desk.x,
+    LAYOUT.furniture.desk.y,
+    'desk_v2'
+  ).setOrigin(LAYOUT.furniture.desk.origin.x, LAYOUT.furniture.desk.origin.y);
+  desk.setDepth(LAYOUT.furniture.desk.depth);
+
+  // === 花盆（来自 LAYOUT）===
+  const flowerFrameCount = 16;
+  const randomFlowerFrame = Math.floor(Math.random() * flowerFrameCount);
+  const flower = this.add.sprite(
+    LAYOUT.furniture.flower.x,
+    LAYOUT.furniture.flower.y,
+    'flowers',
+    randomFlowerFrame
+  ).setOrigin(LAYOUT.furniture.flower.origin.x, LAYOUT.furniture.flower.origin.y);
+  flower.setScale(LAYOUT.furniture.flower.scale || 1);
+  flower.setDepth(LAYOUT.furniture.flower.depth);
+  flower.setInteractive({ useHandCursor: true });
+  window.flowerSprite = flower;
+  window.flowerFrameCount = flowerFrameCount;
+  flower.on('pointerdown', () => {
+    const next = Math.floor(Math.random() * window.flowerFrameCount);
+    window.flowerSprite.setFrame(next);
+  });
+
+  // === Star 在桌前工作（来自 LAYOUT）===
+  this.anims.create({
+    key: 'star_working',
+    frames: this.anims.generateFrameNumbers('star_working', { start: 0, end: 191 }),
+    frameRate: 12,
+    repeat: -1
+  });
+  this.anims.create({
+    key: 'error_bug',
+    frames: this.anims.generateFrameNumbers('error_bug', { start: 0, end: 95 }),
+    frameRate: 12,
+    repeat: -1
+  });
+
+  // === 错误 bug（来自 LAYOUT）===
+  const errorBug = this.add.sprite(
+    LAYOUT.furniture.errorBug.x,
+    LAYOUT.furniture.errorBug.y,
+    'error_bug',
+    0
+  ).setOrigin(LAYOUT.furniture.errorBug.origin.x, LAYOUT.furniture.errorBug.origin.y);
+  errorBug.setDepth(LAYOUT.furniture.errorBug.depth);
+  errorBug.setVisible(false);
+  errorBug.setScale(LAYOUT.furniture.errorBug.scale);
+  errorBug.anims.play('error_bug', true);
+  window.errorBug = errorBug;
+  window.errorBugDir = 1;
+
+  const starWorking = this.add.sprite(
+    LAYOUT.furniture.starWorking.x,
+    LAYOUT.furniture.starWorking.y,
+    'star_working',
+    0
+  ).setOrigin(LAYOUT.furniture.starWorking.origin.x, LAYOUT.furniture.starWorking.origin.y);
+  starWorking.setVisible(false);
+  starWorking.setScale(LAYOUT.furniture.starWorking.scale);
+  starWorking.setDepth(LAYOUT.furniture.starWorking.depth);
+  window.starWorking = starWorking;
+
+  // === 同步动画（来自 LAYOUT）===
+  this.anims.create({
+    key: 'sync_anim',
+    frames: this.anims.generateFrameNumbers('sync_anim', { start: 1, end: 52 }),
+    frameRate: 12,
+    repeat: -1
+  });
+  syncAnimSprite = this.add.sprite(
+    LAYOUT.furniture.syncAnim.x,
+    LAYOUT.furniture.syncAnim.y,
+    'sync_anim',
+    0
+  ).setOrigin(LAYOUT.furniture.syncAnim.origin.x, LAYOUT.furniture.syncAnim.origin.y);
+  syncAnimSprite.setDepth(LAYOUT.furniture.syncAnim.depth);
+  syncAnimSprite.anims.stop();
+  syncAnimSprite.setFrame(0);
+
+  window.starSprite = star;
+
+  statusText = document.getElementById('status-text');
+  coordsOverlay = document.getElementById('coords-overlay');
+  coordsDisplay = document.getElementById('coords-display');
+  coordsToggle = document.getElementById('coords-toggle');
+
+  coordsToggle.addEventListener('click', () => {
+    showCoords = !showCoords;
+    coordsOverlay.style.display = showCoords ? 'block' : 'none';
+    coordsToggle.textContent = showCoords ? '隐藏坐标' : '显示坐标';
+    coordsToggle.style.background = showCoords ? '#e94560' : '#333';
+  });
+
+  game.input.on('pointermove', (pointer) => {
+    if (!showCoords) return;
+    const x = Math.max(0, Math.min(config.width - 1, Math.round(pointer.x)));
+    const y = Math.max(0, Math.min(config.height - 1, Math.round(pointer.y)));
+    coordsDisplay.textContent = `${x}, ${y}`;
+    coordsOverlay.style.left = (pointer.x + 18) + 'px';
+    coordsOverlay.style.top = (pointer.y + 18) + 'px';
+  });
+
+  loadMemo();
+  fetchStatus();
+  fetchAgents();
+
+  // 可选调试：仅在显式开启 debug 模式时渲染测试用尼卡 agent
+  let debugAgents = false;
+  try {
+    if (typeof window !== 'undefined') {
+      if (window.STAR_OFFICE_DEBUG_AGENTS === true) {
+        debugAgents = true;
+      } else if (window.location && window.location.search && typeof URLSearchParams !== 'undefined') {
+        const sp = new URLSearchParams(window.location.search);
+        if (sp.get('debugAgents') === '1') {
+          debugAgents = true;
+        }
+      }
+    }
+  } catch (e) {
+    debugAgents = false;
+  }
+
+  if (debugAgents) {
+    const testNika = {
+      agentId: 'agent_nika',
+      name: '尼卡',
+      isMain: false,
+      state: 'writing',
+      detail: '在画像素画...',
+      area: 'writing',
+      authStatus: 'approved',
+      updated_at: new Date().toISOString()
+    };
+    renderAgent(testNika);
+
+    window.testNikaState = 'writing';
+    window.testNikaTimer = setInterval(() => {
+      const states = ['idle', 'writing', 'researching', 'executing'];
+      const areas = { idle: 'breakroom', writing: 'writing', researching: 'writing', executing: 'writing' };
+      window.testNikaState = states[Math.floor(Math.random() * states.length)];
+      const testAgent = {
+        agentId: 'agent_nika',
+        name: '尼卡',
+        isMain: false,
+        state: window.testNikaState,
+        detail: '在画像素画...',
+        area: areas[window.testNikaState],
+        authStatus: 'approved',
+        updated_at: new Date().toISOString()
+      };
+      renderAgent(testAgent);
+    }, 5000);
+  }
+}
+
+function update(time) {
+  if (time - lastFetch > FETCH_INTERVAL) { fetchStatus(); lastFetch = time; }
+  if (time - lastAgentsFetch > AGENTS_FETCH_INTERVAL) { fetchAgents(); lastAgentsFetch = time; }
+
+  const effectiveStateForServer = pendingDesiredState || currentState;
+  if (serverroom) {
+    if (effectiveStateForServer === 'idle') {
+      if (serverroom.anims.isPlaying) {
+        serverroom.anims.stop();
+        serverroom.setFrame(0);
+      }
+    } else {
+      if (!serverroom.anims.isPlaying || serverroom.anims.currentAnim?.key !== 'serverroom_on') {
+        serverroom.anims.play('serverroom_on', true);
+      }
+    }
+  }
+
+  if (window.errorBug) {
+    if (effectiveStateForServer === 'error') {
+      window.errorBug.setVisible(true);
+      if (!window.errorBug.anims.isPlaying || window.errorBug.anims.currentAnim?.key !== 'error_bug') {
+        window.errorBug.anims.play('error_bug', true);
+      }
+      const leftX = LAYOUT.furniture.errorBug.pingPong.leftX;
+      const rightX = LAYOUT.furniture.errorBug.pingPong.rightX;
+      const speed = LAYOUT.furniture.errorBug.pingPong.speed;
+      const dir = window.errorBugDir || 1;
+      window.errorBug.x += speed * dir;
+      window.errorBug.y = LAYOUT.furniture.errorBug.y;
+      if (window.errorBug.x >= rightX) {
+        window.errorBug.x = rightX;
+        window.errorBugDir = -1;
+      } else if (window.errorBug.x <= leftX) {
+        window.errorBug.x = leftX;
+        window.errorBugDir = 1;
+      }
+    } else {
+      window.errorBug.setVisible(false);
+      window.errorBug.anims.stop();
+    }
+  }
+
+  if (syncAnimSprite) {
+    if (effectiveStateForServer === 'syncing') {
+      if (!syncAnimSprite.anims.isPlaying || syncAnimSprite.anims.currentAnim?.key !== 'sync_anim') {
+        syncAnimSprite.anims.play('sync_anim', true);
+      }
+    } else {
+      if (syncAnimSprite.anims.isPlaying) syncAnimSprite.anims.stop();
+      syncAnimSprite.setFrame(0);
+    }
+  }
+
+  if (time - lastBubble > BUBBLE_INTERVAL) {
+    showBubble();
+    lastBubble = time;
+  }
+  if (time - lastCatBubble > CAT_BUBBLE_INTERVAL) {
+    showCatBubble();
+    lastCatBubble = time;
+  }
+
+  if (typewriterIndex < typewriterTarget.length && time - lastTypewriter > TYPEWRITER_DELAY) {
+    typewriterText += typewriterTarget[typewriterIndex];
+    statusText.textContent = typewriterText;
+    typewriterIndex++;
+    lastTypewriter = time;
+  }
+
+  moveStar(time);
+}
+
+function normalizeState(s) {
+  if (!s) return 'idle';
+  if (s === 'working') return 'writing';
+  if (s === 'run' || s === 'running') return 'executing';
+  if (s === 'sync') return 'syncing';
+  if (s === 'research') return 'researching';
+  return s;
+}
+
+function fetchStatus() {
+  fetch('/status')
+    .then(response => response.json())
+    .then(data => {
+      const nextState = normalizeState(data.state);
+      const stateInfo = STATES[nextState] || STATES.idle;
+      const changed = (pendingDesiredState === null) && (nextState !== currentState);
+      const nextLine = '[' + stateInfo.name + '] ' + (data.detail || '...');
+      if (changed) {
+        typewriterTarget = nextLine;
+        typewriterText = '';
+        typewriterIndex = 0;
+
+        pendingDesiredState = null;
+        currentState = nextState;
+
+        if (nextState === 'idle') {
+          if (game.textures.exists('sofa_busy')) {
+            sofa.setTexture('sofa_busy');
+            sofa.anims.play('sofa_busy', true);
+          }
+          star.setVisible(false);
+          star.anims.stop();
+          if (window.starWorking) {
+            window.starWorking.setVisible(false);
+            window.starWorking.anims.stop();
+          }
+        } else if (nextState === 'error') {
+          sofa.anims.stop();
+          sofa.setTexture('sofa_idle');
+          star.setVisible(false);
+          star.anims.stop();
+          if (window.starWorking) {
+            window.starWorking.setVisible(false);
+            window.starWorking.anims.stop();
+          }
+        } else if (nextState === 'syncing') {
+          sofa.anims.stop();
+          sofa.setTexture('sofa_idle');
+          star.setVisible(false);
+          star.anims.stop();
+          if (window.starWorking) {
+            window.starWorking.setVisible(false);
+            window.starWorking.anims.stop();
+          }
+        } else {
+          sofa.anims.stop();
+          sofa.setTexture('sofa_idle');
+          star.setVisible(false);
+          star.anims.stop();
+          if (window.starWorking) {
+            window.starWorking.setVisible(true);
+            window.starWorking.anims.play('star_working', true);
+          }
+        }
+
+        if (serverroom) {
+          if (nextState === 'idle') {
+            serverroom.anims.stop();
+            serverroom.setFrame(0);
+          } else {
+            serverroom.anims.play('serverroom_on', true);
+          }
+        }
+
+        if (syncAnimSprite) {
+          if (nextState === 'syncing') {
+            if (!syncAnimSprite.anims.isPlaying || syncAnimSprite.anims.currentAnim?.key !== 'sync_anim') {
+              syncAnimSprite.anims.play('sync_anim', true);
+            }
+          } else {
+            if (syncAnimSprite.anims.isPlaying) syncAnimSprite.anims.stop();
+            syncAnimSprite.setFrame(0);
+          }
+        }
+      } else {
+        if (!typewriterTarget || typewriterTarget !== nextLine) {
+          typewriterTarget = nextLine;
+          typewriterText = '';
+          typewriterIndex = 0;
+        }
+      }
+    })
+    .catch(error => {
+      typewriterTarget = '连接失败，正在重试...';
+      typewriterText = '';
+      typewriterIndex = 0;
+    });
+}
+
+function moveStar(time) {
+  const effectiveState = pendingDesiredState || currentState;
+  const stateInfo = STATES[effectiveState] || STATES.idle;
+  const baseTarget = areas[stateInfo.area] || areas.breakroom;
+
+  const dx = targetX - star.x;
+  const dy = targetY - star.y;
+  const dist = Math.sqrt(dx * dx + dy * dy);
+  const speed = 1.4;
+  const wobble = Math.sin(time / 200) * 0.8;
+
+  if (dist > 3) {
+    star.x += (dx / dist) * speed;
+    star.y += (dy / dist) * speed;
+    star.setY(star.y + wobble);
+    isMoving = true;
+  } else {
+    if (waypoints && waypoints.length > 0) {
+      waypoints.shift();
+      if (waypoints.length > 0) {
+        targetX = waypoints[0].x;
+        targetY = waypoints[0].y;
+        isMoving = true;
+      } else {
+        if (pendingDesiredState !== null) {
+          isMoving = false;
+          currentState = pendingDesiredState;
+          pendingDesiredState = null;
+
+          if (currentState === 'idle') {
+            star.setVisible(false);
+            star.anims.stop();
+            if (window.starWorking) {
+              window.starWorking.setVisible(false);
+              window.starWorking.anims.stop();
+            }
+          } else {
+            star.setVisible(false);
+            star.anims.stop();
+            if (window.starWorking) {
+              window.starWorking.setVisible(true);
+              window.starWorking.anims.play('star_working', true);
+            }
+          }
+        }
+      }
+    } else {
+      if (pendingDesiredState !== null) {
+        isMoving = false;
+        currentState = pendingDesiredState;
+        pendingDesiredState = null;
+
+        if (currentState === 'idle') {
+          star.setVisible(false);
+          star.anims.stop();
+          if (window.starWorking) {
+            window.starWorking.setVisible(false);
+            window.starWorking.anims.stop();
+          }
+          if (game.textures.exists('sofa_busy')) {
+            sofa.setTexture('sofa_busy');
+            sofa.anims.play('sofa_busy', true);
+          }
+        } else {
+          star.setVisible(false);
+          star.anims.stop();
+          if (window.starWorking) {
+            window.starWorking.setVisible(true);
+            window.starWorking.anims.play('star_working', true);
+          }
+          sofa.anims.stop();
+          sofa.setTexture('sofa_idle');
+        }
+      }
+    }
+  }
+}
+
+function showBubble() {
+  if (bubble) { bubble.destroy(); bubble = null; }
+  const texts = BUBBLE_TEXTS[currentState] || BUBBLE_TEXTS.idle;
+  if (currentState === 'idle') return;
+
+  let anchorX = star.x;
+  let anchorY = star.y;
+  if (currentState === 'syncing' && syncAnimSprite && syncAnimSprite.visible) {
+    anchorX = syncAnimSprite.x;
+    anchorY = syncAnimSprite.y;
+  } else if (currentState === 'error' && window.errorBug && window.errorBug.visible) {
+    anchorX = window.errorBug.x;
+    anchorY = window.errorBug.y;
+  } else if (!star.visible && window.starWorking && window.starWorking.visible) {
+    anchorX = window.starWorking.x;
+    anchorY = window.starWorking.y;
+  }
+
+  const text = texts[Math.floor(Math.random() * texts.length)];
+  const bubbleY = anchorY - 70;
+  const bg = game.add.rectangle(anchorX, bubbleY, text.length * 10 + 20, 28, 0xffffff, 0.95);
+  bg.setStrokeStyle(2, 0x000000);
+  const txt = game.add.text(anchorX, bubbleY, text, { fontFamily: 'ArkPixel, monospace', fontSize: '12px', fill: '#000', align: 'center' }).setOrigin(0.5);
+  bubble = game.add.container(0, 0, [bg, txt]);
+  bubble.setDepth(1200);
+  setTimeout(() => { if (bubble) { bubble.destroy(); bubble = null; } }, 3000);
+}
+
+function showCatBubble() {
+  if (!window.catSprite) return;
+  if (window.catBubble) { window.catBubble.destroy(); window.catBubble = null; }
+  const texts = BUBBLE_TEXTS.cat || ['喵~', '咕噜咕噜…'];
+  const text = texts[Math.floor(Math.random() * texts.length)];
+  const anchorX = window.catSprite.x;
+  const anchorY = window.catSprite.y - 60;
+  const bg = game.add.rectangle(anchorX, anchorY, text.length * 10 + 20, 24, 0xfffbeb, 0.95);
+  bg.setStrokeStyle(2, 0xd4a574);
+  const txt = game.add.text(anchorX, anchorY, text, { fontFamily: 'ArkPixel, monospace', fontSize: '11px', fill: '#8b6914', align: 'center' }).setOrigin(0.5);
+  window.catBubble = game.add.container(0, 0, [bg, txt]);
+  window.catBubble.setDepth(2100);
+  setTimeout(() => { if (window.catBubble) { window.catBubble.destroy(); window.catBubble = null; } }, 4000);
+}
+
+function fetchAgents() {
+  fetch('/agents?t=' + Date.now(), { cache: 'no-store' })
+    .then(response => response.json())
+    .then(data => {
+      if (!Array.isArray(data)) return;
+      // 重置位置计数器
+      // 按区域分配不同位置索引，避免重叠
+      const areaSlots = { breakroom: 0, writing: 0, error: 0 };
+      for (let agent of data) {
+        const area = agent.area || 'breakroom';
+        agent._slotIndex = areaSlots[area] || 0;
+        areaSlots[area] = (areaSlots[area] || 0) + 1;
+        renderAgent(agent);
+      }
+      // 移除不再存在的 agent
+      const currentIds = new Set(data.map(a => a.agentId));
+      for (let id in agents) {
+        if (!currentIds.has(id)) {
+          if (agents[id]) {
+            agents[id].destroy();
+            delete agents[id];
+          }
+        }
+      }
+    })
+    .catch(error => {
+      console.error('拉取 agents 失败:', error);
+    });
+}
+
+function getAreaPosition(area, slotIndex) {
+  const positions = AREA_POSITIONS[area] || AREA_POSITIONS.breakroom;
+  const idx = (slotIndex || 0) % positions.length;
+  return positions[idx];
+}
+
+function renderAgent(agent) {
+  const agentId = agent.agentId;
+  const name = agent.name || 'Agent';
+  const area = agent.area || 'breakroom';
+  const authStatus = agent.authStatus || 'pending';
+  const isMain = !!agent.isMain;
+
+  // 获取这个 agent 在区域里的位置
+  const pos = getAreaPosition(area, agent._slotIndex || 0);
+  const baseX = pos.x;
+  const baseY = pos.y;
+
+  // 颜色
+  const bodyColor = AGENT_COLORS[agentId] || AGENT_COLORS.default;
+  const nameColor = NAME_TAG_COLORS[authStatus] || NAME_TAG_COLORS.default;
+
+  // 透明度（离线/待批准/拒绝时变半透明）
+  let alpha = 1;
+  if (authStatus === 'pending') alpha = 0.7;
+  if (authStatus === 'rejected') alpha = 0.4;
+  if (authStatus === 'offline') alpha = 0.5;
+
+  if (!agents[agentId]) {
+    // 新建 agent
+    const container = game.add.container(baseX, baseY);
+    container.setDepth(1200 + (isMain ? 100 : 0)); // 放到最顶层！
+
+    // 像素小人：用星星图标，更明显
+    const starIcon = game.add.text(0, 0, '⭐', {
+      fontFamily: 'ArkPixel, monospace',
+      fontSize: '32px'
+    }).setOrigin(0.5);
+    starIcon.name = 'starIcon';
+
+    // 名字标签（漂浮）
+    const nameTag = game.add.text(0, -36, name, {
+      fontFamily: 'ArkPixel, monospace',
+      fontSize: '14px',
+      fill: '#' + nameColor.toString(16).padStart(6, '0'),
+      stroke: '#000',
+      strokeThickness: 3,
+      backgroundColor: 'rgba(255,255,255,0.95)'
+    }).setOrigin(0.5);
+    nameTag.name = 'nameTag';
+
+    // 状态小点（绿色/黄色/红色）
+    let dotColor = 0x64748b;
+    if (authStatus === 'approved') dotColor = 0x22c55e;
+    if (authStatus === 'pending') dotColor = 0xf59e0b;
+    if (authStatus === 'rejected') dotColor = 0xef4444;
+    if (authStatus === 'offline') dotColor = 0x94a3b8;
+    const statusDot = game.add.circle(20, -20, 5, dotColor, alpha);
+    statusDot.setStrokeStyle(2, 0x000000, alpha);
+    statusDot.name = 'statusDot';
+
+    container.add([starIcon, statusDot, nameTag]);
+    agents[agentId] = container;
+  } else {
+    // 更新 agent
+    const container = agents[agentId];
+    container.setPosition(baseX, baseY);
+    container.setAlpha(alpha);
+    container.setDepth(1200 + (isMain ? 100 : 0));
+
+    // 更新名字和颜色（如果变化）
+    const nameTag = container.getAt(2);
+    if (nameTag && nameTag.name === 'nameTag') {
+      nameTag.setText(name);
+      nameTag.setFill('#' + (NAME_TAG_COLORS[authStatus] || NAME_TAG_COLORS.default).toString(16).padStart(6, '0'));
+    }
+    // 更新状态点颜色
+    const statusDot = container.getAt(1);
+    if (statusDot && statusDot.name === 'statusDot') {
+      let dotColor = 0x64748b;
+      if (authStatus === 'approved') dotColor = 0x22c55e;
+      if (authStatus === 'pending') dotColor = 0xf59e0b;
+      if (authStatus === 'rejected') dotColor = 0xef4444;
+      if (authStatus === 'offline') dotColor = 0x94a3b8;
+      statusDot.fillColor = dotColor;
+    }
+  }
+}
+
+// 启动游戏
+initGame();

frontend/layout.js

@@ -0,0 +1,133 @@
+// Star Office UI - 布局与层级配置
+// 所有坐标、depth、资源路径统一管理在这里
+// 避免 magic numbers，降低改错风险
+
+// 核心规则：
+// - 透明资源（如办公桌）强制 .png，不透明优先 .webp
+// - 层级：低 → sofa(10) → starWorking(900) → desk(1000) → flower(1100)
+
+const LAYOUT = {
+  // === 游戏画布 ===
+  game: {
+    width: 1280,
+    height: 720
+  },
+
+  // === 各区域坐标 ===
+  areas: {
+    door:        { x: 640, y: 550 },
+    writing:     { x: 320, y: 360 },
+    researching: { x: 320, y: 360 },
+    error:       { x: 1066, y: 180 },
+    breakroom:   { x: 640, y: 360 }
+  },
+
+  // === 装饰与家具：坐标 + 原点 + depth ===
+  furniture: {
+    // 沙发
+    sofa: {
+      x: 670,
+      y: 144,
+      origin: { x: 0, y: 0 },
+      depth: 10
+    },
+
+    // 新办公桌（透明 PNG 强制）
+    desk: {
+      x: 218,
+      y: 417,
+      origin: { x: 0.5, y: 0.5 },
+      depth: 1000
+    },
+
+    // 桌上花盆
+    flower: {
+      x: 310,
+      y: 390,
+      origin: { x: 0.5, y: 0.5 },
+      depth: 1100,
+      scale: 0.8
+    },
+
+    // Star 在桌前工作（在 desk 下面）
+    starWorking: {
+      x: 217,
+      y: 333,
+      origin: { x: 0.5, y: 0.5 },
+      depth: 900,
+      scale: 1.32
+    },
+
+    // 植物们
+    plants: [
+      { x: 565, y: 178, depth: 5 },
+      { x: 230, y: 185, depth: 5 },
+      { x: 977, y: 496, depth: 5 }
+    ],
+
+    // 海报
+    poster: {
+      x: 252,
+      y: 66,
+      depth: 4
+    },
+
+    // 咖啡机
+    coffeeMachine: {
+      x: 659,
+      y: 397,
+      origin: { x: 0.5, y: 0.5 },
+      depth: 99
+    },
+
+    // 服务器区
+    serverroom: {
+      x: 1021,
+      y: 142,
+      origin: { x: 0.5, y: 0.5 },
+      depth: 2
+    },
+
+    // 错误 bug
+    errorBug: {
+      x: 1007,
+      y: 221,
+      origin: { x: 0.5, y: 0.5 },
+      depth: 50,
+      scale: 0.9,
+      pingPong: { leftX: 1007, rightX: 1111, speed: 0.6 }
+    },
+
+    // 同步动画
+    syncAnim: {
+      x: 1157,
+      y: 592,
+      origin: { x: 0.5, y: 0.5 },
+      depth: 40
+    },
+
+    // 小猫
+    cat: {
+      x: 94,
+      y: 557,
+      origin: { x: 0.5, y: 0.5 },
+      depth: 2000
+    }
+  },
+
+  // === 牌匾 ===
+  plaque: {
+    x: 640,
+    y: 720 - 36,
+    width: 420,
+    height: 44
+  },
+
+  // === 资源加载规则：哪些强制用 PNG（透明资源） ===
+  forcePng: {
+    desk_v2: true // 新办公桌必须透明，强制 PNG
+  },
+
+  // === 总资源数量（用于加载进度条） ===
+  totalAssets: 15
+};

package.json

@@ -1,5 +1,7 @@
 {
   "dependencies": {
-    "ws": "^8.19.0"
+    "ws": "^8.19.0",
+    "express": "^4.21.0",
+    "http-proxy-middleware": "^3.0.0"
   }
 }

scripts/entrypoint.sh

@@ -26,8 +26,9 @@ export NODE_OPTIONS="${NODE_OPTIONS:+$NODE_OPTIONS }--require /home/node/scripts
 # Enable Telegram API proxy (redirects fetch() to working mirror if needed)
 export NODE_OPTIONS="${NODE_OPTIONS:+$NODE_OPTIONS }--require /home/node/scripts/telegram-proxy.cjs"
 
-# Auto-fill gateway token in Control UI (redirects "/" to "/?token=GATEWAY_TOKEN")
-export NODE_OPTIONS="${NODE_OPTIONS:+$NODE_OPTIONS }--require /home/node/scripts/token-redirect.cjs"
+# token-redirect.cjs is no longer needed — the Express proxy (proxy.cjs)
+# handles token injection for /admin and serves the animation at /
+# export NODE_OPTIONS="${NODE_OPTIONS:+$NODE_OPTIONS }--require /home/node/scripts/token-redirect.cjs"
 
 # ── Extensions symlink ──────────────────────────────────────────────────────
 SYMLINK_START=$(date +%s)

scripts/proxy.cjs

@@ -0,0 +1,374 @@
+/**
+ * proxy.cjs — Express reverse proxy + state bridge for HuggingClaw
+ *
+ * Serves the Star-Office-UI animation at "/" and proxies
+ * OpenClaw's Control UI at "/admin/*" (port 7861).
+ * Also provides state bridge API and A2A pass-through.
+ */
+'use strict';
+
+const express = require('express');
+const { createProxyMiddleware } = require('http-proxy-middleware');
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const LISTEN_PORT = 7860;
+const OPENCLAW_PORT = 7861;
+const OPENCLAW_TARGET = `http://localhost:${OPENCLAW_PORT}`;
+const GATEWAY_TOKEN = process.env.GATEWAY_TOKEN || 'huggingclaw';
+const ROLE = process.env.HUGGINGCLAW_ROLE || 'primary';
+const PEERS = (process.env.A2A_PEERS || '').split(',').filter(Boolean);
+const AGENT_NAME = process.env.AGENT_NAME || 'Star';
+const FRONTEND_DIR = path.resolve(__dirname, '..', 'frontend');
+const STATE_FILE = '/tmp/openclaw-sync-state.json';
+const LOG_FILE = path.join(process.env.HOME || '/home/node', '.openclaw', 'workspace', 'startup.log');
+
+// ── State Bridge ──────────────────────────────────────────────────────────
+
+let currentState = {
+  state: 'syncing',
+  detail: 'Starting up...',
+  progress: 0,
+  updated_at: new Date().toISOString()
+};
+
+let peerStates = {};  // url -> { state, detail, name, ... }
+let openclawReady = false;
+
+function readSyncState() {
+  try {
+    if (fs.existsSync(STATE_FILE)) {
+      const data = JSON.parse(fs.readFileSync(STATE_FILE, 'utf-8'));
+      return data;
+    }
+  } catch (_) {}
+  return null;
+}
+
+function checkOpenClawHealth() {
+  return new Promise((resolve) => {
+    const req = http.get(`${OPENCLAW_TARGET}/`, { timeout: 2000 }, (res) => {
+      resolve(res.statusCode < 500);
+    });
+    req.on('error', () => resolve(false));
+    req.on('timeout', () => { req.destroy(); resolve(false); });
+  });
+}
+
+async function updateState() {
+  const syncState = readSyncState();
+
+  if (syncState && syncState.phase === 'syncing') {
+    currentState = {
+      state: 'syncing',
+      detail: syncState.detail || 'Syncing data...',
+      progress: syncState.progress || 0,
+      updated_at: new Date().toISOString()
+    };
+    return;
+  }
+
+  const healthy = await checkOpenClawHealth();
+  if (!healthy) {
+    if (!openclawReady) {
+      currentState = {
+        state: 'syncing',
+        detail: 'OpenClaw starting up...',
+        progress: 0,
+        updated_at: new Date().toISOString()
+      };
+    } else {
+      currentState = {
+        state: 'error',
+        detail: 'OpenClaw not responding',
+        progress: 0,
+        updated_at: new Date().toISOString()
+      };
+    }
+    return;
+  }
+
+  openclawReady = true;
+
+  // Try to detect activity from log file
+  try {
+    if (fs.existsSync(LOG_FILE)) {
+      const stat = fs.statSync(LOG_FILE);
+      const readSize = Math.min(stat.size, 2048);
+      const fd = fs.openSync(LOG_FILE, 'r');
+      const buf = Buffer.alloc(readSize);
+      fs.readSync(fd, buf, 0, readSize, Math.max(0, stat.size - readSize));
+      fs.closeSync(fd);
+      const tail = buf.toString('utf-8');
+      const lines = tail.split('\n').filter(Boolean);
+      const lastLine = lines[lines.length - 1] || '';
+      const secondAgo = Date.now() - 5000;
+
+      // Detect LLM call
+      if (lastLine.includes('completion') || lastLine.includes('LLM') || lastLine.includes('model')) {
+        currentState = { state: 'writing', detail: 'Calling LLM...', progress: 0, updated_at: new Date().toISOString() };
+        return;
+      }
+      // Detect agent execution
+      if (lastLine.includes('agent') || lastLine.includes('executing') || lastLine.includes('running')) {
+        currentState = { state: 'executing', detail: 'Agent processing...', progress: 0, updated_at: new Date().toISOString() };
+        return;
+      }
+    }
+  } catch (_) {}
+
+  // Default: idle
+  if (syncState && syncState.phase === 'idle') {
+    currentState = {
+      state: 'idle',
+      detail: 'Ready',
+      progress: 0,
+      updated_at: new Date().toISOString()
+    };
+  } else if (currentState.state === 'syncing') {
+    // Transition from syncing to idle once healthy
+    currentState = {
+      state: 'idle',
+      detail: 'Ready',
+      progress: 0,
+      updated_at: new Date().toISOString()
+    };
+  }
+}
+
+// Poll state every 2 seconds
+setInterval(updateState, 2000);
+updateState();
+
+// ── Peer State Polling (primary only) ─────────────────────────────────────
+
+async function fetchPeerStates() {
+  if (ROLE !== 'primary' || PEERS.length === 0) return;
+
+  for (const peerUrl of PEERS) {
+    try {
+      const url = `${peerUrl.replace(/\/$/, '')}/api/state`;
+      const controller = new AbortController();
+      const timeout = setTimeout(() => controller.abort(), 5000);
+      const res = await fetch(url, { signal: controller.signal, cache: 'no-store' });
+      clearTimeout(timeout);
+      if (res.ok) {
+        const data = await res.json();
+        peerStates[peerUrl] = {
+          ...data,
+          online: true,
+          peerUrl
+        };
+      } else {
+        peerStates[peerUrl] = { state: 'idle', detail: 'Unreachable', online: false, peerUrl };
+      }
+    } catch (_) {
+      peerStates[peerUrl] = { state: 'idle', detail: 'Offline', online: false, peerUrl };
+    }
+  }
+}
+
+if (ROLE === 'primary' && PEERS.length > 0) {
+  setInterval(fetchPeerStates, 5000);
+  fetchPeerStates();
+}
+
+// ── Express App ───────────────────────────────────────────────────────────
+
+const app = express();
+app.use(express.json());
+
+// --- API routes (before proxy) ---
+
+// State endpoint
+app.get('/api/state', (req, res) => {
+  res.json(currentState);
+});
+
+// Compat: Star-Office-UI uses /status
+app.get('/status', (req, res) => {
+  res.json(currentState);
+});
+
+// Agents/guests endpoint (for Star-Office-UI multi-agent rendering)
+app.get('/agents', (req, res) => {
+  const agents = [];
+  let slotIndex = 0;
+
+  for (const [peerUrl, peerState] of Object.entries(peerStates)) {
+    // Derive agent name from peer URL
+    let name = 'Agent';
+    if (peerUrl.includes('adam')) name = 'Adam';
+    else if (peerUrl.includes('eve')) name = 'Eve';
+
+    const stateMap = {
+      idle: 'breakroom',
+      writing: 'writing',
+      researching: 'writing',
+      executing: 'writing',
+      syncing: 'writing',
+      error: 'error'
+    };
+
+    agents.push({
+      agentId: name.toLowerCase(),
+      name: name,
+      area: stateMap[peerState.state] || 'breakroom',
+      authStatus: peerState.online ? 'approved' : 'offline',
+      detail: peerState.detail || '',
+      state: peerState.state || 'idle',
+      _slotIndex: slotIndex++
+    });
+  }
+  res.json(agents);
+});
+
+app.get('/api/guests', (req, res) => {
+  // Alias for /agents
+  res.redirect('/agents');
+});
+
+// Stub endpoints that Star-Office-UI tries to call
+app.get('/yesterday-memo', (req, res) => {
+  res.json({ success: false, memo: null });
+});
+
+app.post('/set_state', (req, res) => {
+  const { state, detail } = req.body || {};
+  if (state) {
+    currentState = {
+      state,
+      detail: detail || '',
+      progress: 0,
+      updated_at: new Date().toISOString()
+    };
+    // Also write to state file so it persists
+    try {
+      fs.writeFileSync(STATE_FILE, JSON.stringify({ phase: state, detail }));
+    } catch (_) {}
+  }
+  res.json({ ok: true });
+});
+
+// Asset-related stubs (drawer features we don't use)
+app.get('/assets/auth/status', (req, res) => {
+  res.json({ authenticated: false });
+});
+app.get('/assets', (req, res) => {
+  res.json([]);
+});
+
+// --- Static files ---
+app.use('/frontend', express.static(FRONTEND_DIR, {
+  maxAge: '1h',
+  setHeaders: (res, filePath) => {
+    if (filePath.endsWith('.webp') || filePath.endsWith('.png')) {
+      res.setHeader('Cache-Control', 'public, max-age=86400');
+    }
+  }
+}));
+
+// Serve /static as alias for /frontend (Star-Office-UI references /static/)
+app.use('/static', express.static(FRONTEND_DIR, {
+  maxAge: '1h',
+  setHeaders: (res, filePath) => {
+    if (filePath.endsWith('.webp') || filePath.endsWith('.png')) {
+      res.setHeader('Cache-Control', 'public, max-age=86400');
+    }
+  }
+}));
+
+// --- Animation homepage ---
+app.get('/', (req, res) => {
+  const indexPath = path.join(FRONTEND_DIR, 'index.html');
+  if (fs.existsSync(indexPath)) {
+    let html = fs.readFileSync(indexPath, 'utf-8');
+    // Replace version timestamps
+    html = html.replace(/\{\{VERSION_TIMESTAMP\}\}/g, Date.now().toString());
+    res.type('html').send(html);
+  } else {
+    res.status(503).send('Frontend not ready. Please wait...');
+  }
+});
+
+// --- Admin panel (reverse proxy to OpenClaw) ---
+
+// Redirect /admin to /admin/ for consistent path handling
+app.get('/admin', (req, res) => {
+  const tokenParam = req.query.token ? `?token=${req.query.token}` : `?token=${GATEWAY_TOKEN}`;
+  res.redirect(`/admin/${tokenParam}`);
+});
+
+// Create the proxy middleware
+const openclawProxy = createProxyMiddleware({
+  target: OPENCLAW_TARGET,
+  changeOrigin: true,
+  pathRewrite: { '^/admin': '' },
+  ws: true,
+  on: {
+    proxyRes: (proxyRes, req, res) => {
+      // Inject <base href="/admin/"> for HTML responses
+      const contentType = proxyRes.headers['content-type'] || '';
+      if (contentType.includes('text/html')) {
+        const origWrite = res.write;
+        const origEnd = res.end;
+        let body = '';
+
+        res.write = function(chunk) {
+          body += chunk.toString();
+          return true;
+        };
+
+        res.end = function(chunk) {
+          if (chunk) body += chunk.toString();
+          // Inject base tag after <head>
+          body = body.replace(/<head([^>]*)>/i, '<head$1><base href="/admin/">');
+          // Remove content-length since we modified the body
+          delete proxyRes.headers['content-length'];
+          res.setHeader('content-length', Buffer.byteLength(body));
+          origWrite.call(res, body);
+          origEnd.call(res);
+        };
+      }
+    }
+  }
+});
+
+app.use('/admin', openclawProxy);
+
+// --- A2A pass-through ---
+app.use('/a2a', createProxyMiddleware({
+  target: OPENCLAW_TARGET,
+  changeOrigin: true,
+  ws: true
+}));
+
+app.use('/.well-known', createProxyMiddleware({
+  target: OPENCLAW_TARGET,
+  changeOrigin: true
+}));
+
+// ── Start server ──────────────────────────────────────────────────────────
+
+const server = http.createServer(app);
+
+// Handle WebSocket upgrades for /admin
+server.on('upgrade', (req, socket, head) => {
+  if (req.url.startsWith('/admin')) {
+    openclawProxy.upgrade(req, socket, head);
+  } else if (req.url.startsWith('/a2a')) {
+    // A2A WebSocket if needed
+  }
+});
+
+server.listen(LISTEN_PORT, '0.0.0.0', () => {
+  console.log(`[proxy] HuggingClaw proxy listening on port ${LISTEN_PORT}`);
+  console.log(`[proxy] Role: ${ROLE}`);
+  console.log(`[proxy] Animation: http://localhost:${LISTEN_PORT}/`);
+  console.log(`[proxy] Admin: http://localhost:${LISTEN_PORT}/admin`);
+  console.log(`[proxy] OpenClaw backend: ${OPENCLAW_TARGET}`);
+  if (PEERS.length > 0) {
+    console.log(`[proxy] A2A peers: ${PEERS.join(', ')}`);
+  }
+});

scripts/sync_hf.py

@@ -286,6 +286,11 @@ class OpenClawFullSync:
             return
 
         print(f"[SYNC] ▶ Uploading ~/.openclaw → dataset {HF_REPO_ID}/{DATASET_PATH}/ ...")
+        # Notify state bridge
+        try:
+            Path("/tmp/openclaw-sync-state.json").write_text(json.dumps({"phase": "syncing", "detail": "Uploading data..."}))
+        except Exception:
+            pass
 
         try:
             # Log what will be uploaded
@@ -322,6 +327,11 @@ class OpenClawFullSync:
                 ],
             )
             print(f"[SYNC] ✓ Upload completed at {datetime.now().isoformat()}")
+            # Notify state bridge
+            try:
+                Path("/tmp/openclaw-sync-state.json").write_text(json.dumps({"phase": "idle", "detail": "Ready"}))
+            except Exception:
+                pass
 
             # Verify
             try:
@@ -338,6 +348,11 @@ class OpenClawFullSync:
         except Exception as e:
             print(f"[SYNC] ✗ Upload failed: {e}")
             traceback.print_exc()
+            # Notify state bridge of error
+            try:
+                Path("/tmp/openclaw-sync-state.json").write_text(json.dumps({"phase": "idle", "detail": "Sync failed"}))
+            except Exception:
+                pass
 
     # ── Config helpers ─────────────────────────────────────────────────
 
@@ -378,7 +393,7 @@ class OpenClawFullSync:
             with open(config_path, "w") as f:
                 json.dump({
                     "gateway": {
-                        "mode": "local", "bind": "lan", "port": 7860,
+                        "mode": "local", "bind": "lan", "port": 7861,
                         "trustedProxies": ["0.0.0.0/0"],
                         "controlUi": {
                             "allowInsecureAuth": True,
@@ -436,7 +451,7 @@ class OpenClawFullSync:
             data["gateway"] = {
                 "mode": "local",
                 "bind": "lan",
-                "port": 7860,
+                "port": 7861,
                 "auth": {"token": GATEWAY_TOKEN},
                 "trustedProxies": ["0.0.0.0/0"],
                 "controlUi": {
@@ -490,9 +505,34 @@ class OpenClawFullSync:
             data.setdefault("models", {})["providers"] = providers
             data["agents"]["defaults"]["model"]["primary"] = OPENCLAW_DEFAULT_MODEL
 
-            # Plugin whitelist (only load telegram + whatsapp to speed up startup)
+            # Plugin whitelist
             data.setdefault("plugins", {}).setdefault("entries", {})
-            data["plugins"]["allow"] = ["telegram", "whatsapp"]
+            plugin_allow = ["telegram", "whatsapp"]
+
+            # ── A2A Gateway Plugin ──────────────────────────────────────────
+            a2a_peers_env = os.environ.get("A2A_PEERS", "")
+            if a2a_peers_env:
+                plugin_allow.append("a2a-gateway")
+                peers_list = [
+                    {"url": f"{url.rstrip('/')}/.well-known/agent.json"}
+                    for url in a2a_peers_env.split(",") if url.strip()
+                ]
+                a2a_token = os.environ.get("A2A_PEER_TOKEN", "")
+                a2a_config = {
+                    "enabled": True,
+                    "config": {
+                        "server": {"port": 7861},
+                        "peers": peers_list,
+                    }
+                }
+                if a2a_token:
+                    a2a_config["config"]["security"] = {"inbound": {"token": a2a_token}}
+                    for p in peers_list:
+                        p["auth"] = {"type": "bearer", "token": a2a_token}
+                data["plugins"]["entries"]["a2a-gateway"] = a2a_config
+                print(f"[SYNC] Set A2A gateway plugin with {len(peers_list)} peer(s)")
+
+            data["plugins"]["allow"] = plugin_allow
             if "telegram" not in data["plugins"]["entries"]:
                 data["plugins"]["entries"]["telegram"] = {"enabled": True}
             elif isinstance(data["plugins"]["entries"]["telegram"], dict):
@@ -647,6 +687,42 @@ class OpenClawFullSync:
 
 # ── Main ────────────────────────────────────────────────────────────────────
 
+def start_proxy():
+    """Start the Express proxy server (port 7860) before OpenClaw.
+    This ensures HF Spaces sees the container as ready immediately."""
+    proxy_script = Path(__file__).parent / "proxy.cjs"
+    if not proxy_script.exists():
+        print("[PROXY] WARNING: proxy.cjs not found, skipping proxy startup")
+        return None
+
+    print("[PROXY] Starting Express proxy on port 7860...")
+    env = os.environ.copy()
+    try:
+        proxy_proc = subprocess.Popen(
+            ["node", str(proxy_script)],
+            env=env,
+            stdout=subprocess.PIPE,
+            stderr=subprocess.STDOUT,
+            text=True,
+            bufsize=1
+        )
+
+        # Copy proxy output in background
+        def copy_proxy_output():
+            try:
+                for line in proxy_proc.stdout:
+                    print(f"[PROXY] {line}", end='')
+            except Exception:
+                pass
+
+        threading.Thread(target=copy_proxy_output, daemon=True).start()
+        print(f"[PROXY] Proxy started with PID: {proxy_proc.pid}")
+        return proxy_proc
+    except Exception as e:
+        print(f"[PROXY] ERROR: Failed to start proxy: {e}")
+        return None
+
+
 def main():
     try:
         t_main_start = time.time()
@@ -655,6 +731,9 @@ def main():
         sync = OpenClawFullSync()
         print(f"[TIMER] sync_hf init: {time.time() - t0:.1f}s")
 
+        # 0. Start proxy first (so HF Spaces sees port 7860 ready)
+        proxy_process = start_proxy()
+
         # 1. Restore
         t0 = time.time()
         sync.load_from_repo()
@@ -683,6 +762,12 @@ def main():
                     process.wait(timeout=5)
                 except subprocess.TimeoutExpired:
                     process.kill()
+            if proxy_process:
+                proxy_process.terminate()
+                try:
+                    proxy_process.wait(timeout=3)
+                except subprocess.TimeoutExpired:
+                    proxy_process.kill()
             print("[SYNC] Final sync...")
             sync.save_to_repo()
             sys.exit(0)
@@ -695,12 +780,16 @@ def main():
             print("[SYNC] ERROR: Failed to start OpenClaw process. Exiting.")
             stop_event.set()
             t.join(timeout=5)
+            if proxy_process:
+                proxy_process.terminate()
             sys.exit(1)
 
         exit_code = process.wait()
         print(f"[SYNC] OpenClaw exited with code {exit_code}")
         stop_event.set()
         t.join(timeout=10)
+        if proxy_process:
+            proxy_process.terminate()
         print("[SYNC] Final sync...")
         sync.save_to_repo()
         sys.exit(exit_code)