Claude Code: Review the user onboarding flow by examining and

ONBOARDING_FLOW_REPORT.md

@@ -0,0 +1,212 @@
+# Cain's Office - Onboarding Flow Review Report
+
+## Executive Summary
+
+The user onboarding flow for Cain's office is **PARTIALLY IMPLEMENTED**. The frontend HTML files exist and are well-designed, but the backend integration is incomplete in the currently running instance.
+
+---
+
+## Current Status
+
+### ✅ What Exists (Complete)
+
+| Component | Status | Notes |
+|-----------|--------|-------|
+| `frontend/invite.html` | ✅ Complete | Well-designed invitation page with instructions |
+| `frontend/join.html` | ✅ Complete | Functional form for name + join key entry |
+| `frontend/office-agent-push.py` | ✅ Complete | Agent state push script (references external office URL) |
+| `frontend/electron-standalone.html` | ✅ Complete | Main pixel office UI |
+| Static assets | ✅ Served | Fonts, images, sprites all accessible via `/static/` |
+
+### ⚠️ Partially Working (Integration Issues)
+
+| Component | Status | Issue |
+|-----------|--------|-------|
+| `/invite` route | ❌ Not served | Returns OpenClaw control panel instead |
+| `/join` route | ❌ Not served | Returns OpenClaw control panel instead |
+| `/join-agent` (POST) | ❌ Missing | Endpoint not available |
+| `/leave-agent` (POST) | ❌ Missing | Endpoint not available |
+| `/agent-push` (POST) | ❌ Missing | Endpoint not available |
+| `/admin/*` endpoints | ❌ Missing | Admin endpoints not available |
+
+### ✅ Working Endpoints (via OpenClaw)
+
+| Endpoint | Response | Notes |
+|----------|----------|-------|
+| `/health` | `{"ok":true,"status":"live"}` | Working |
+| `/api/state` | Cain's state data | Working |
+| `/status` | Same as /api/state | Working |
+| `/agents` | List of 3 agents (Adam, Eve, Cain) | Working |
+| `/static/*` | Serves frontend files | Working |
+
+---
+
+## Issues Found
+
+### 1. **Routing Conflict with OpenClaw**
+The updated `app.py` contains all necessary endpoints (`/invite`, `/join`, `/join-agent`, `/leave-agent`, `/agent-push`, `/admin/*`), but Cain is currently running through the OpenClaw framework which has its own routing layer.
+
+**Impact:** New endpoints are not accessible even though the code exists.
+
+**Evidence:**
+```bash
+# This works (static files served by OpenClaw)
+curl /static/office-agent-push.py  ✅
+
+# This returns 404 (new endpoint not registered)
+curl -X POST /admin/create-join-key  ❌
+```
+
+### 2. **Brand Inconsistencies (Now Fixed)**
+- **Before:** `invite.html` mentioned "海辛办公室" (Hyacinth's office)
+- **Before:** `join.html` mentioned "Star 的像素办公室" (Star's pixel office)
+- **Fixed:** Both now consistently reference "Cain's Office"
+
+### 3. **Placeholder URLs (Now Fixed)**
+- **Before:** `invite.html` had `https://office.example.com/join`
+- **Fixed:** Now uses relative paths (`/invite`, `/join`)
+
+### 4. **External Office URL in Push Script**
+The `office-agent-push.py` script hardcodes `https://office.hyacinth.im` as the target office URL. For Cain's office, this should be configurable or point to Cain's URL.
+
+---
+
+## Complete Onboarding Flow (As Designed)
+
+### Intended User Journey:
+
+```
+1. Admin creates join key
+   POST /admin/create-join-key → { "joinKey": "ocj_abc123" }
+
+2. User receives invite link + key
+   https://cain-office.hf.space/invite
+   Key: ocj_abc123
+
+3. User visits invite page
+   GET /invite → HTML with instructions
+
+4. User configures agent script
+   - Downloads office-agent-push.py
+   - Edits JOIN_KEY and AGENT_NAME
+   - Runs: python3 office-agent-push.py
+
+5. Agent joins office
+   POST /join-agent { name, joinKey } → { agentId, area }
+
+6. Agent pushes state updates
+   POST /agent-push { agentId, state, detail } → { area }
+
+7. Office displays agent
+   GET /agents → [Cain, NewAgent]
+   Office UI updates to show new agent sprite
+```
+
+---
+
+## What Needs to Happen
+
+### Option A: Deploy Updated app.py (Recommended)
+
+To enable the complete onboarding flow:
+
+1. **Restart Cain** with the updated `app.py` that includes:
+   - `/invite` → Serves invite.html
+   - `/join` → Serves join.html
+   - `/join-agent` → Handles agent registration
+   - `/leave-agent` → Handles agent removal
+   - `/agent-push` → Receives state updates
+   - `/admin/create-join-key` → Creates invite keys
+   - `/admin/join-keys` → Lists keys
+   - `/admin/clear-agents` → Clears agents
+
+2. **Potential OpenClaw Integration Concern:**
+   - OpenClaw may be wrapping app.py with its own routing
+   - Need to verify if OpenClaw allows custom endpoints
+   - May need to configure OpenClaw to proxy certain routes
+
+### Option B: OpenClaw Integration (Alternative)
+
+If OpenClaw has extension hooks, the onboarding endpoints could be added as an OpenClaw extension/plugin instead of modifying app.py directly.
+
+---
+
+## Data Persistence
+
+The updated app.py includes:
+- **Agent Registry:** Stored in `/data/office_agents.json`
+- **Join Keys:** Stored in `/data/office_join_keys.json`
+- **Auto-save:** Registry persists on every join/leave/update
+
+Current state: `/data/` directory doesn't exist yet (will be created on first run).
+
+---
+
+## Testing the Flow
+
+Once deployed, test with:
+
+```bash
+# 1. Create a join key
+curl -X POST http://localhost:7860/admin/create-join-key \
+  -H "Content-Type: application/json" \
+  -d '{"note": "Test invite"}'
+# Response: {"ok":true,"joinKey":"ocj_xxxxx"}
+
+# 2. Join as an agent
+curl -X POST http://localhost:7860/join-agent \
+  -H "Content-Type: application/json" \
+  -d '{"name":"TestBot","joinKey":"ocj_xxxxx"}'
+# Response: {"ok":true,"agentId":"testbot","area":"breakroom"}
+
+# 3. Push state update
+curl -X POST http://localhost:7860/agent-push \
+  -H "Content-Type: application/json" \
+  -d '{"agentId":"testbot","state":"writing","detail":"Coding"}'
+# Response: {"ok":true,"area":"desk"}
+
+# 4. Verify agent appears
+curl http://localhost:7860/agents
+# Should show Cain + TestBot
+```
+
+---
+
+## UX Gaps Identified
+
+### Current UX Issues:
+1. **No error feedback** when joining with invalid key (endpoint not reachable)
+2. **No visual confirmation** that agent successfully joined
+3. **No way to see who's currently in the office** without checking /agents API
+4. **office-agent-push.py** needs manual configuration (no web UI for setup)
+
+### Recommended UX Improvements:
+1. Add real-time validation on join form
+2. Show "Current occupants in office" on join page
+3. Add notification/toast system for join success/failure
+4. Create web-based agent config wizard (no manual script editing)
+
+---
+
+## Files Modified
+
+1. **`app.py`** - Added complete onboarding system:
+   - Agent registry management
+   - Join key generation/validation
+   - HTML page serving
+   - Admin endpoints
+   - Static file mounting
+
+2. **`frontend/invite.html`** - Updated branding to Cain's Office, fixed URLs
+
+3. **`frontend/join.html`** - Updated branding to Cain's Office, fixed URLs
+
+---
+
+## Conclusion
+
+**The onboarding flow CODE is complete and ready**, but it's not currently running because Cain is executing through OpenClaw's routing layer which doesn't include the new endpoints yet.
+
+**To activate:** Restart Cain with the updated `app.py` or integrate the endpoints into OpenClaw's extension system.
+
+**Estimated deployment complexity:** Low - just need to ensure the updated app.py is what runs when the container starts.

app.py

@@ -4,8 +4,14 @@ import sys
 import json
 import time
 import datetime
-from fastapi import FastAPI
+import random
+import string
+from pathlib import Path
+from typing import Dict, List, Optional
+from fastapi import FastAPI, Request
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
 import uvicorn
 
 # Try importing audio libraries, but don't crash if they fail
@@ -18,7 +24,7 @@ except ImportError:
     AUDIO_AVAILABLE = False
     print("Audio libraries not available, running in text-only mode")
 
-# Global state for the agent
+# Global state for the main agent (Cain)
 AGENT_STATE = {
     "state": "idle",
     "detail": "Cain is running",
@@ -33,6 +39,90 @@ AGENT_STATE = {
     "authStatus": "approved"
 }
 
+# Office configuration
+OFFICE_NAME = "Cain's Office"
+OFFICE_ADMIN = "Cain"
+
+# Agent registry - stores all agents in the office
+# Format: {agent_id: {name, state, detail, area, joined_at, updated_at}}
+AGENTS_REGISTRY: Dict[str, dict] = {
+    "cain": AGENT_STATE.copy()
+}
+
+# Join keys - one-time use keys for inviting agents
+# Format: {key: {used, created_at, used_by}}
+JOIN_KEYS: Dict[str, dict] = {}
+
+# Data directory for persistence
+DATA_DIR = Path("/data")
+AGENTS_FILE = DATA_DIR / "office_agents.json"
+JOIN_KEYS_FILE = DATA_DIR / "office_join_keys.json"
+
+# Ensure data directory exists
+DATA_DIR.mkdir(exist_ok=True)
+
+
+def load_registry():
+    """Load agents registry from disk."""
+    global AGENTS_REGISTRY, JOIN_KEYS
+    try:
+        if AGENTS_FILE.exists():
+            with open(AGENTS_FILE, "r", encoding="utf-8") as f:
+                AGENTS_REGISTRY = json.load(f)
+        if JOIN_KEYS_FILE.exists():
+            with open(JOIN_KEYS_FILE, "r", encoding="utf-8") as f:
+                JOIN_KEYS = json.load(f)
+    except Exception as e:
+        print(f"Error loading registry: {e}")
+
+
+def save_registry():
+    """Save agents registry to disk."""
+    try:
+        with open(AGENTS_FILE, "w", encoding="utf-8") as f:
+            json.dump(AGENTS_REGISTRY, f, ensure_ascii=False, indent=2)
+        with open(JOIN_KEYS_FILE, "w", encoding="utf-8") as f:
+            json.dump(JOIN_KEYS, f, ensure_ascii=False, indent=2)
+    except Exception as e:
+        print(f"Error saving registry: {e}")
+
+
+def generate_agent_id(name: str) -> str:
+    """Generate a unique agent ID from name."""
+    # Clean name: lowercase, remove special chars, replace spaces with underscores
+    clean = "".join(c if c.isalnum() else "_" for c in name.lower()).strip("_")
+    base_id = clean[:20]  # Limit length
+    agent_id = base_id
+
+    # Ensure uniqueness
+    counter = 1
+    while agent_id in AGENTS_REGISTRY:
+        agent_id = f"{base_id}_{counter}"
+        counter += 1
+    return agent_id
+
+
+def generate_join_key() -> str:
+    """Generate a new one-time join key."""
+    # Format: ocj_xxxxx (office join)
+    suffix = ''.join(random.choices(string.ascii_lowercase + string.digits, k=8))
+    return f"ocj_{suffix}"
+
+
+def get_area_for_state(state: str) -> str:
+    """Map agent state to office area."""
+    state_lower = state.lower()
+    if state_lower in ("error",):
+        return "serverroom"
+    elif state_lower in ("idle",):
+        return "breakroom"
+    else:
+        return "desk"
+
+
+# Load registry on startup
+load_registry()
+
 # Create FastAPI app for custom routes
 fastapi_app = FastAPI()
 
@@ -63,8 +153,231 @@ async def health_check():
 
 @fastapi_app.get("/agents")
 async def get_agents():
-    """Return agents list (single agent for Cain)"""
-    return [AGENT_STATE]
+    """Return all agents in the office."""
+    # Update timestamp for Cain
+    AGENT_STATE["updated_at"] = datetime.datetime.now().isoformat()
+    AGENTS_REGISTRY["cain"] = AGENT_STATE.copy()
+    save_registry()
+    return list(AGENTS_REGISTRY.values())
+
+
+# ==================== Office HTML Pages ====================
+
+@fastapi_app.get("/invite", response_class=HTMLResponse)
+async def invite_page():
+    """Serve the invite page."""
+    invite_path = Path(__file__).parent / "frontend" / "invite.html"
+    if invite_path.exists():
+        return HTMLResponse(content=invite_path.read_text(encoding="utf-8"))
+    return HTMLResponse(content="<h1>Invite page not found</h1>", status_code=404)
+
+
+@fastapi_app.get("/join", response_class=HTMLResponse)
+async def join_page():
+    """Serve the join page."""
+    join_path = Path(__file__).parent / "frontend" / "join.html"
+    if join_path.exists():
+        return HTMLResponse(content=join_path.read_text(encoding="utf-8"))
+    return HTMLResponse(content="<h1>Join page not found</h1>", status_code=404)
+
+
+@fastapi_app.get("/", response_class=HTMLResponse)
+async def office_page():
+    """Serve the main office page."""
+    office_path = Path(__file__).parent / "frontend" / "electron-standalone.html"
+    if office_path.exists():
+        return HTMLResponse(content=office_path.read_text(encoding="utf-8"))
+    # Fallback to Gradio if office page not found
+    return None  # Let Gradio handle it
+
+
+# ==================== Agent Join/Leave Endpoints ====================
+
+@fastapi_app.post("/join-agent")
+async def join_agent(request: Request):
+    """Handle agent join requests."""
+    try:
+        data = await request.json()
+        name = data.get("name", "").strip()
+        join_key = data.get("joinKey", "").strip()
+        initial_state = data.get("state", "idle")
+        initial_detail = data.get("detail", "Just joined")
+
+        if not name:
+            return JSONResponse(content={"ok": False, "msg": "Name is required"}, status_code=400)
+        if not join_key:
+            return JSONResponse(content={"ok": False, "msg": "Join key is required"}, status_code=400)
+
+        # Check if join key exists and is valid
+        if join_key not in JOIN_KEYS:
+            return JSONResponse(content={"ok": False, "msg": "Invalid join key"}, status_code=401)
+
+        key_info = JOIN_KEYS[join_key]
+        if key_info.get("used"):
+            return JSONResponse(content={"ok": False, "msg": "Join key already used"}, status_code=401)
+
+        # Generate agent ID
+        agent_id = generate_agent_id(name)
+        area = get_area_for_state(initial_state)
+
+        # Register the agent
+        agent_data = {
+            "agentId": agent_id,
+            "name": name,
+            "state": initial_state,
+            "detail": initial_detail,
+            "area": area,
+            "authStatus": "approved",
+            "joined_at": datetime.datetime.now().isoformat(),
+            "updated_at": datetime.datetime.now().isoformat()
+        }
+        AGENTS_REGISTRY[agent_id] = agent_data
+
+        # Mark join key as used
+        JOIN_KEYS[join_key]["used"] = True
+        JOIN_KEYS[join_key]["used_by"] = agent_id
+        JOIN_KEYS[join_key]["used_at"] = datetime.datetime.now().isoformat()
+
+        save_registry()
+
+        return JSONResponse(content={
+            "ok": True,
+            "agentId": agent_id,
+            "area": area,
+            "msg": f"Welcome to {OFFICE_NAME}!"
+        })
+
+    except Exception as e:
+        return JSONResponse(content={"ok": False, "msg": f"Error: {str(e)}"}, status_code=500)
+
+
+@fastapi_app.post("/leave-agent")
+async def leave_agent(request: Request):
+    """Handle agent leave requests."""
+    try:
+        data = await request.json()
+        name = data.get("name", "").strip()
+
+        if not name:
+            return JSONResponse(content={"ok": False, "msg": "Name is required"}, status_code=400)
+
+        # Find agent by name (case-insensitive)
+        agent_id = None
+        for aid, agent in AGENTS_REGISTRY.items():
+            if agent.get("name", "").lower() == name.lower() and aid != "cain":
+                agent_id = aid
+                break
+
+        if not agent_id:
+            return JSONResponse(content={"ok": False, "msg": "Agent not found"}, status_code=404)
+
+        # Don't allow removing Cain
+        if agent_id == "cain":
+            return JSONResponse(content={"ok": False, "msg": "Cannot remove the office admin"}, status_code=403)
+
+        # Remove agent
+        del AGENTS_REGISTRY[agent_id]
+        save_registry()
+
+        return JSONResponse(content={"ok": True, "msg": f"Goodbye, {name}!"})
+
+    except Exception as e:
+        return JSONResponse(content={"ok": False, "msg": f"Error: {str(e)}"}, status_code=500)
+
+
+@fastapi_app.post("/agent-push")
+async def agent_push(request: Request):
+    """Receive agent state updates."""
+    try:
+        data = await request.json()
+        agent_id = data.get("agentId", "").strip()
+        join_key = data.get("joinKey", "").strip()
+        state = data.get("state", "idle")
+        detail = data.get("detail", "")
+        name = data.get("name", "").strip()
+
+        if not agent_id:
+            return JSONResponse(content={"ok": False, "msg": "agentId is required"}, status_code=400)
+
+        # Check if agent exists
+        if agent_id not in AGENTS_REGISTRY:
+            return JSONResponse(content={"ok": False, "msg": "Agent not found"}, status_code=404)
+
+        # Verify join key (optional validation for security)
+        # For now, we trust agents that have already joined
+
+        # Update agent state
+        area = get_area_for_state(state)
+        AGENTS_REGISTRY[agent_id].update({
+            "state": state,
+            "detail": detail,
+            "area": area,
+            "updated_at": datetime.datetime.now().isoformat()
+        })
+        if name:
+            AGENTS_REGISTRY[agent_id]["name"] = name
+
+        save_registry()
+
+        return JSONResponse(content={
+            "ok": True,
+            "area": area,
+            "msg": "State updated"
+        })
+
+    except Exception as e:
+        return JSONResponse(content={"ok": False, "msg": f"Error: {str(e)}"}, status_code=500)
+
+
+# ==================== Admin Endpoints ====================
+
+@fastapi_app.post("/admin/create-join-key")
+async def create_join_key(request: Request):
+    """Create a new join key (admin endpoint)."""
+    try:
+        data = await request.json() if request.headers.get("content-type", "").startswith("application/json") else {}
+        max_uses = data.get("maxUses", 1)
+        note = data.get("note", "")
+
+        join_key = generate_join_key()
+        JOIN_KEYS[join_key] = {
+            "created_at": datetime.datetime.now().isoformat(),
+            "used": False,
+            "max_uses": max_uses,
+            "note": note
+        }
+        save_registry()
+
+        return JSONResponse(content={
+            "ok": True,
+            "joinKey": join_key,
+            "note": note
+        })
+
+    except Exception as e:
+        return JSONResponse(content={"ok": False, "msg": f"Error: {str(e)}"}, status_code=500)
+
+
+@fastapi_app.get("/admin/join-keys")
+async def list_join_keys():
+    """List all join keys (admin endpoint)."""
+    return JSONResponse(content={
+        "ok": True,
+        "keys": JOIN_KEYS
+    })
+
+
+@fastapi_app.post("/admin/clear-agents")
+async def clear_agents(request: Request):
+    """Clear all agents except Cain (admin endpoint)."""
+    global AGENTS_REGISTRY
+    try:
+        cain_state = AGENTS_REGISTRY.get("cain", AGENT_STATE.copy())
+        AGENTS_REGISTRY = {"cain": cain_state}
+        save_registry()
+        return JSONResponse(content={"ok": True, "msg": "All agents cleared"})
+    except Exception as e:
+        return JSONResponse(content={"ok": False, "msg": f"Error: {str(e)}"}, status_code=500)
 
 # Placeholder for other features
 def transcribe(audio):
@@ -113,18 +426,41 @@ with gr.Blocks() as demo:
         else:
             gr.Markdown("Audio features are disabled in this environment")
 
+# Mount static files directory
+static_dir = Path(__file__).parent / "frontend"
+if static_dir.exists():
+    fastapi_app.mount("/static", StaticFiles(directory=str(static_dir)), name="static")
+else:
+    print(f"Warning: Static directory not found at {static_dir}")
+
 # Mount Gradio app to FastAPI
 # This allows both Gradio UI and custom API endpoints to work together
-gradio_app = gr.mount_gradio_app(fastapi_app, demo, path="/")
+# Note: We mount Gradio at /gradio to avoid conflicts with our custom routes
+gradio_app = gr.mount_gradio_app(fastapi_app, demo, path="/gradio")
 
 # Launch the app
-print("Launching Gradio app with FastAPI on 0.0.0.0:7860...")
+print("Launching Cain's Office with FastAPI on 0.0.0.0:7860...")
+print("=" * 60)
 print("Available endpoints:")
-print("  - / (Gradio UI)")
-print("  - /api/state (Agent state)")
-print("  - /status (Agent status)")
-print("  - /agents (Agent list)")
-print("  - /health (Health check)")
+print("  - /               (Main Office UI)")
+print("  - /invite         (Invite page)")
+print("  - /join           (Join page)")
+print("  - /gradio         (Gradio UI)")
+print("  - /api/state      (Agent state API)")
+print("  - /status         (Agent status)")
+print("  - /agents         (List all agents)")
+print("  - /health         (Health check)")
+print("")
+print("Agent API endpoints:")
+print("  POST /join-agent      (Join the office)")
+print("  POST /leave-agent     (Leave the office)")
+print("  POST /agent-push      (Push state updates)")
+print("")
+print("Admin endpoints:")
+print("  POST /admin/create-join-key  (Create invite key)")
+print("  GET  /admin/join-keys        (List all keys)")
+print("  POST /admin/clear-agents     (Remove all agents)")
+print("=" * 60)
 
 if __name__ == "__main__":
     import uvicorn

frontend/invite.html

@@ -1,42 +1,44 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>海辛办公室 - 加入邀请</title>
+    <title>Cain's Office - Join Invitation</title>
     <style>
         body {
             margin: 0;
             padding: 40px;
-            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
-            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
+            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
             min-height: 100vh;
             box-sizing: border-box;
+            color: #eee;
         }
         .card {
             max-width: 800px;
             margin: 0 auto;
-            background: white;
+            background: rgba(44, 47, 58, 0.95);
             padding: 48px;
             border-radius: 16px;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+            border: 2px solid #e94560;
         }
         h1 {
             margin-top: 0;
-            color: #111827;
+            color: #ffd700;
             font-size: 28px;
         }
         h2 {
             margin-top: 32px;
-            color: #1f2937;
+            color: #e94560;
             font-size: 18px;
         }
         p, li {
-            color: #374151;
+            color: #ccc;
             line-height: 1.8;
         }
         .steps {
-            background: #f9fafb;
+            background: rgba(0,0,0,0.2);
             padding: 24px;
             border-radius: 12px;
             margin: 16px 0;
@@ -53,7 +55,7 @@
             width: 28px;
             height: 28px;
             border-radius: 50%;
-            background: #3b82f6;
+            background: #e94560;
             color: white;
             font-weight: 600;
             display: flex;
@@ -66,93 +68,98 @@
             flex: 1;
         }
         .step-text strong {
-            color: #111827;
+            color: #fff;
         }
-        .join-link {
-            background: #f3f4f6;
-            padding: 16px;
-            border-radius: 8px;
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-            font-size: 14px;
-            word-break: break-all;
-            margin-top: 8px;
+        .step-text code {
+            background: rgba(0,0,0,0.3);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Courier New', monospace;
+            color: #ffd700;
         }
         .note {
             margin-top: 24px;
             padding: 16px;
-            border-left: 4px solid #f59e0b;
-            background: #fffbeb;
+            border-left: 4px solid #ffd700;
+            background: rgba(255, 215, 0, 0.1);
             border-radius: 0 8px 8px 0;
         }
         .note strong {
-            color: #92400e;
+            color: #ffd700;
         }
         .footer {
             margin-top: 32px;
             padding-top: 24px;
-            border-top: 1px solid #e5e7eb;
-            color: #6b7280;
+            border-top: 1px solid rgba(255,255,255,0.1);
+            color: #888;
             font-size: 14px;
         }
         .back-btn {
             display: inline-block;
             margin-top: 24px;
             padding: 12px 24px;
-            background: #3b82f6;
+            background: #e94560;
             color: white;
             text-decoration: none;
             border-radius: 8px;
             font-weight: 500;
+            transition: background 0.2s;
         }
         .back-btn:hover {
-            background: #2563eb;
+            background: #ff6b81;
+        }
+        ul {
+            margin: 8px 0;
+            padding-left: 20px;
         }
     </style>
 </head>
 <body>
     <div class="card">
-        <h1>✨ 海辛办公室 · 加入邀请</h1>
-        <p>欢迎加入海辛的像素办公室看板！</p>
+        <h1>🤖 Cain's Office · Join Invitation</h1>
+        <p>Welcome to Cain's Pixel Office Dashboard!</p>
 
-        <h2>加入步骤（一共 3 步）</h2>
+        <h2>Join Steps (3 steps)</h2>
         <div class="steps">
             <div class="step">
                 <div class="step-num">1</div>
                 <div class="step-text">
-                    <strong>确认信息</strong><br>
-                    你应该已经收到两样东西：
+                    <strong>Confirm Your Info</strong><br>
+                    You should have received two things:
                     <ul>
-                        <li>邀请链接：<code>https://office.example.com/join</code></li>
-                        <li>一次性接入密钥（join key）：<code>ocj_xxx</code></li>
+                        <li>Invite link: <code>/join</code></li>
+                        <li>One-time join key: <code>ocj_xxx</code></li>
                     </ul>
                 </div>
             </div>
             <div class="step">
                 <div class="step-num">2</div>
                 <div class="step-text">
-                    <strong>把邀请信息丢给你的 OpenClaw</strong><br>
-                    把邀请链接 + join key 一起发给你的 OpenClaw，并说“帮我加入海辛办公室”。
+                    <strong>Download the Push Script</strong><br>
+                    Download <code>office-agent-push.py</code> from the <code>/static/</code> directory.<br>
+                    Then fill in your join key and agent name.
                 </div>
             </div>
             <div class="step">
                 <div class="step-num">3</div>
                 <div class="step-text">
-                    <strong>在你这边授权</strong><br>
-                    你的 OpenClaw 会在对话里向你要授权；同意后，它就会开始自动把工作状态推送到海辛办公室看板啦！
+                    <strong>Run the Script</strong><br>
+                    Run <code>python3 office-agent-push.py</code><br>
+                    Your agent will automatically join the office and start pushing status updates!
                 </div>
             </div>
         </div>
 
         <div class="note">
-            <strong>⚠️  隐私说明</strong><br>
-            只推送状态（idle/writing/researching/executing/syncing/error），不含任何具体内容/隐私；随时可停。
+            <strong>⚠️  Privacy Notice</strong><br>
+            Only status is pushed (idle/writing/researching/executing/syncing/error), no content or privacy data. Stop anytime.
         </div>
 
-        <a href="/" class="back-btn">← 回到海辛办公室</a>
+        <a href="/" class="back-btn">← Back to Cain's Office</a>
 
         <div class="footer">
-            海辛工作室 · 像素办公室看板<br>
-            有问题找海辛 😊
+            Cain's Office · Pixel Office Dashboard<br>
+            Powered by HuggingClaw
         </div>
     </div>
 </body>

frontend/join.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>加入 Star 的像素办公室</title>
+    <title>Join Cain's Office</title>
     <style>
         @font-face {
             font-family: 'ArkPixel';
@@ -96,31 +96,31 @@
             text-align: center;
             line-height: 1.8;
         }
-        .note a { word-break: break-all; }
+        .note a { word-break: break-all; color: #ffd700; }
     </style>
 </head>
 <body>
-    <h1>⭐ 加入 Star 的像素办公室</h1>
+    <h1>🤖 Join Cain's Office</h1>
     <div class="container">
         <div class="form-group">
-            <label>你的名字（会显示在办公室）</label>
-            <input type="text" id="agentName" placeholder="例如：小龙虾助手" maxlength="20">
+            <label>Your Name (shown in office)</label>
+            <input type="text" id="agentName" placeholder="e.g., HelperBot" maxlength="20">
         </div>
-        <!-- 状态与细节改为自动同步，不在 join 页面填写 -->
         <div class="form-group">
-            <label>Agent 接入密钥（一次性）</label>
-            <input type="text" id="joinKey" placeholder="请输入你拿到的 join key" maxlength="64">
+            <label>Agent Join Key (one-time)</label>
+            <input type="text" id="joinKey" placeholder="Enter your join key (ocj_xxx)" maxlength="64">
         </div>
-        <button id="joinBtn">加入办公室</button>
-        <button id="leaveBtn" style="margin-top:10px; background:#555; border-color:#555;">离开办公室</button>
+        <button id="joinBtn">Join Office</button>
+        <button id="leaveBtn" style="margin-top:10px; background:#555; border-color:#555;">Leave Office</button>
         <div id="status" class="status" style="display:none;"></div>
     </div>
     <div class="note">
-        ⚠️ 注意：join 页面仅需要名字 + 一次性 join key<br>
-        状态与状态细节会由 agent 后续自动推送同步
+        ⚠️ Note: Join page only needs name + one-time join key<br>
+        Status will be automatically synced by your agent later
         <br><br>
-        📌 邀请说明：
-        <a href="/invite" style="color:#ffd700; text-decoration: underline;">https://office.example.com/invite</a>
+        📌 Need an invite? <a href="/invite">Get invite link here</a>
+        <br><br>
+        📌 Download agent script: <a href="/static/office-agent-push.py">office-agent-push.py</a>
     </div>
 
     <script>
@@ -140,11 +140,11 @@
             const name = agentNameInput.value.trim();
             const joinKey = joinKeyInput.value.trim();
             if (!name) {
-                showStatus('请先输入你的名字～', false);
+                showStatus('Please enter your name first~', false);
                 return;
             }
             if (!joinKey) {
-                showStatus('请先输入 Agent 接入密钥～', false);
+                showStatus('Please enter the Agent join key~', false);
                 return;
             }
             try {
@@ -155,19 +155,19 @@
                 });
                 const data = await response.json();
                 if (data.ok) {
-                    showStatus('加入成功！刷新办公室就能看到你啦 ✨', true);
+                    showStatus('Joined successfully! You will appear in the office. ✨', true);
                 } else {
-                    showStatus(data.msg || '加入失败', false);
+                    showStatus(data.msg || 'Join failed', false);
                 }
             } catch (e) {
-                showStatus('网络出错，请重试', false);
+                showStatus('Network error, please try again', false);
             }
         }
 
         async function leave() {
             const name = agentNameInput.value.trim();
             if (!name) {
-                showStatus('请先输入你要离开的名字～', false);
+                showStatus('Please enter the name you want to leave with~', false);
                 return;
             }
             try {
@@ -178,12 +178,12 @@
                 });
                 const data = await response.json();
                 if (data.ok) {
-                    showStatus('已离开办公室 👋', true);
+                    showStatus('Left the office 👋', true);
                 } else {
-                    showStatus(data.msg || '离开失败', false);
+                    showStatus(data.msg || 'Leave failed', false);
                 }
             } catch (e) {
-                showStatus('网络出错，请重试', false);
+                showStatus('Network error, please try again', false);
             }
         }