feat: pivot to island survival simulation with SQLite persistence

Phase 3 - "The Island" transformation:
- Add SQLAlchemy + SQLite for data persistence (database.py)
- Rewrite models.py with User, Agent, WorldState ORM models
- Refactor engine.py for survival mechanics (energy decay, starvation)
- Implement feed command (10 gold -> +20 energy)
- Auto-seed 3 NPCs on startup (Jack/Luna/Bob)
- Update frontend with agent card view and Chinese UI
- Remove old Boss/Player RPG mechanics
- Add .gitignore for database and cache files
- Fix SQLAlchemy session detachment issue

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

frontend/app.js

@@ -1,17 +1,16 @@
 /**
- * The Island - Debug Client JavaScript
- * Handles WebSocket connection, UI interactions, and game state display
+ * The Island - Survival Simulation Client
+ * Handles WebSocket connection, agent display, and user interactions
  */
 
 let ws = null;
 const WS_URL = 'ws://localhost:8080/ws';
 
-// Player state (tracked from server events)
-let playerState = {
-    hp: 100,
-    maxHp: 100,
-    gold: 0
-};
+// User state
+let userGold = 100;
+
+// Agents state
+let agents = [];
 
 // DOM Elements
 const statusDot = document.getElementById('statusDot');
@@ -22,16 +21,8 @@ const usernameInput = document.getElementById('username');
 const messageInput = document.getElementById('message');
 const autoScrollCheckbox = document.getElementById('autoScroll');
 const hideTicksCheckbox = document.getElementById('hideTicks');
-
-// Boss UI Elements
-const bossName = document.getElementById('bossName');
-const bossHpText = document.getElementById('bossHpText');
-const bossHealthBar = document.getElementById('bossHealthBar');
-const bossHealthLabel = document.getElementById('bossHealthLabel');
-
-// Player UI Elements
-const playerHpDisplay = document.getElementById('playerHp');
-const playerGoldDisplay = document.getElementById('playerGold');
+const agentsGrid = document.getElementById('agentsGrid');
+const userGoldDisplay = document.getElementById('userGold');
 
 /**
  * Toggle WebSocket connection
@@ -48,30 +39,30 @@ function toggleConnection() {
  * Establish WebSocket connection
  */
 function connect() {
-    statusText.textContent = 'Connecting...';
+    statusText.textContent = '连接中...';
     connectBtn.disabled = true;
 
     ws = new WebSocket(WS_URL);
 
     ws.onopen = () => {
         statusDot.classList.add('connected');
-        statusText.textContent = 'Connected';
-        connectBtn.textContent = 'Disconnect';
+        statusText.textContent = '已连接';
+        connectBtn.textContent = '断开';
         connectBtn.disabled = false;
-        logEvent({ event_type: 'system', data: { message: 'WebSocket connected' } });
+        logEvent({ event_type: 'system', data: { message: '已连接到荒岛服务器' } });
     };
 
     ws.onclose = () => {
         statusDot.classList.remove('connected');
-        statusText.textContent = 'Disconnected';
-        connectBtn.textContent = 'Connect';
+        statusText.textContent = '未连接';
+        connectBtn.textContent = '连接';
         connectBtn.disabled = false;
-        logEvent({ event_type: 'system', data: { message: 'WebSocket disconnected' } });
+        logEvent({ event_type: 'system', data: { message: '与服务器断开连接' } });
     };
 
     ws.onerror = (error) => {
         console.error('WebSocket error:', error);
-        logEvent({ event_type: 'error', data: { message: 'Connection error' } });
+        logEvent({ event_type: 'error', data: { message: '连接错误' } });
     };
 
     ws.onmessage = (event) => {
@@ -91,122 +82,123 @@ function handleGameEvent(event) {
     const eventType = event.event_type;
     const data = event.data || {};
 
-    // Update UI based on event type
     switch (eventType) {
-        case 'boss_update':
-            updateBossUI(data);
+        case 'agents_update':
+            updateAgentsUI(data.agents);
             break;
-        case 'attack':
-            updateBossFromAttack(data);
-            updatePlayerFromEvent(data);
+        case 'feed':
+        case 'user_update':
+            updateUserGold(data);
             break;
-        case 'heal':
-            updatePlayerFromEvent(data);
-            break;
-        case 'status':
-            updatePlayerFromEvent(data);
-            updateBossFromStatus(data);
-            break;
-        case 'system':
-            // Handle player death/respawn updates
-            if (data.user && data.player_hp !== undefined) {
-                updatePlayerFromEvent(data);
-            }
-            break;
-        case 'tick':
-            if (data.boss_hp !== undefined) {
-                updateBossUI({
-                    boss_hp: data.boss_hp,
-                    boss_max_hp: data.boss_max_hp
-                });
+        case 'check':
+            if (data.user && data.user.username === getCurrentUser()) {
+                userGold = data.user.gold;
+                userGoldDisplay.textContent = userGold;
             }
             break;
     }
 
-    // Log the event
     logEvent(event);
 }
 
 /**
- * Update Boss health bar UI
+ * Get current username
  */
-function updateBossUI(data) {
-    if (data.boss_name) {
-        bossName.textContent = data.boss_name;
+function getCurrentUser() {
+    return usernameInput.value.trim() || '观众001';
+}
+
+/**
+ * Update user gold display
+ */
+function updateUserGold(data) {
+    if (data.user === getCurrentUser() && data.gold !== undefined) {
+        userGold = data.gold;
+        userGoldDisplay.textContent = userGold;
     }
-    if (data.boss_hp !== undefined && data.boss_max_hp !== undefined) {
-        const hp = data.boss_hp;
-        const maxHp = data.boss_max_hp;
-        const percentage = maxHp > 0 ? (hp / maxHp) * 100 : 0;
-
-        bossHpText.textContent = `HP: ${hp} / ${maxHp}`;
-        bossHealthBar.style.width = `${percentage}%`;
-        bossHealthLabel.textContent = `${Math.round(percentage)}%`;
-
-        // Change color based on HP percentage
-        if (percentage <= 25) {
-            bossHealthBar.style.background = 'linear-gradient(90deg, #ff2222 0%, #ff4444 100%)';
-        } else if (percentage <= 50) {
-            bossHealthBar.style.background = 'linear-gradient(90deg, #ff6600 0%, #ff8844 100%)';
-        } else {
-            bossHealthBar.style.background = 'linear-gradient(90deg, #ff4444 0%, #ff6666 100%)';
-        }
+    if (data.user_gold !== undefined && data.user === getCurrentUser()) {
+        userGold = data.user_gold;
+        userGoldDisplay.textContent = userGold;
     }
 }
 
 /**
- * Update boss from attack event
+ * Update agents UI with card view
  */
-function updateBossFromAttack(data) {
-    if (data.boss_hp !== undefined && data.boss_max_hp !== undefined) {
-        updateBossUI({
-            boss_hp: data.boss_hp,
-            boss_max_hp: data.boss_max_hp
-        });
-    }
+function updateAgentsUI(agentsData) {
+    if (!agentsData || agentsData.length === 0) return;
+
+    agents = agentsData;
+    agentsGrid.innerHTML = '';
+
+    agents.forEach(agent => {
+        const card = createAgentCard(agent);
+        agentsGrid.appendChild(card);
+    });
 }
 
 /**
- * Update boss from status event
+ * Create an agent card element
  */
-function updateBossFromStatus(data) {
-    if (data.boss_hp !== undefined && data.boss_max_hp !== undefined) {
-        updateBossUI({
-            boss_name: data.boss_name,
-            boss_hp: data.boss_hp,
-            boss_max_hp: data.boss_max_hp
-        });
-    }
+function createAgentCard(agent) {
+    const isDead = agent.status !== 'Alive';
+    const card = document.createElement('div');
+    card.className = `agent-card ${isDead ? 'dead' : ''}`;
+    card.id = `agent-${agent.id}`;
+
+    const statusClass = isDead ? 'dead' : 'alive';
+    const statusText = isDead ? '已死亡' : '存活';
+
+    card.innerHTML = `
+        <div class="agent-header">
+            <div>
+                <span class="agent-name">${agent.name}</span>
+                <span class="agent-personality">${agent.personality}</span>
+            </div>
+            <span class="agent-status ${statusClass}">${statusText}</span>
+        </div>
+        <div class="stat-bar-container">
+            <div class="stat-bar-label">
+                <span>❤️ 生命值</span>
+                <span>${agent.hp}/100</span>
+            </div>
+            <div class="stat-bar">
+                <div class="stat-bar-fill hp" style="width: ${agent.hp}%"></div>
+            </div>
+        </div>
+        <div class="stat-bar-container">
+            <div class="stat-bar-label">
+                <span>⚡ 体力</span>
+                <span>${agent.energy}/100</span>
+            </div>
+            <div class="stat-bar">
+                <div class="stat-bar-fill energy" style="width: ${agent.energy}%"></div>
+            </div>
+        </div>
+        <button class="feed-btn" onclick="feedAgent('${agent.name}')" ${isDead ? 'disabled' : ''}>
+            🍖 投喂 (10金币)
+        </button>
+    `;
+
+    return card;
 }
 
 /**
- * Update player stats from event data
+ * Feed an agent
  */
-function updatePlayerFromEvent(data) {
-    const currentUser = usernameInput.value.trim() || 'Anonymous';
-
-    // Only update if this event is for the current user
-    if (data.user !== currentUser) return;
-
-    if (data.player_hp !== undefined) {
-        playerState.hp = data.player_hp;
-    }
-    if (data.player_max_hp !== undefined) {
-        playerState.maxHp = data.player_max_hp;
-    }
-    if (data.player_gold !== undefined) {
-        playerState.gold = data.player_gold;
+function feedAgent(agentName) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+        alert('未连接到服务器');
+        return;
     }
 
-    updatePlayerUI();
-}
+    const user = getCurrentUser();
+    const payload = {
+        action: 'send_comment',
+        payload: { user, message: `feed ${agentName}` }
+    };
 
-/**
- * Update player stats UI
- */
-function updatePlayerUI() {
-    playerHpDisplay.textContent = `${playerState.hp}/${playerState.maxHp}`;
-    playerGoldDisplay.textContent = playerState.gold;
+    ws.send(JSON.stringify(payload));
 }
 
 /**
@@ -214,15 +206,15 @@ function updatePlayerUI() {
  */
 function sendComment() {
     if (!ws || ws.readyState !== WebSocket.OPEN) {
-        alert('Not connected to server');
+        alert('未连接到服务器');
         return;
     }
 
-    const user = usernameInput.value.trim() || 'Anonymous';
+    const user = getCurrentUser();
     const message = messageInput.value.trim();
 
     if (!message) {
-        alert('Please enter a message');
+        alert('请输入指令');
         return;
     }
 
@@ -235,25 +227,6 @@ function sendComment() {
     messageInput.value = '';
 }
 
-/**
- * Quick action buttons
- */
-function quickAction(action) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) {
-        alert('Not connected to server');
-        return;
-    }
-
-    const user = usernameInput.value.trim() || 'Anonymous';
-
-    const payload = {
-        action: 'send_comment',
-        payload: { user, message: action }
-    };
-
-    ws.send(JSON.stringify(payload));
-}
-
 /**
  * Format timestamp for display
  */
@@ -269,20 +242,18 @@ function formatEventData(eventType, data) {
     switch (eventType) {
         case 'comment':
             return `${data.user}: ${data.message}`;
-        case 'agent_response':
-            return data.response;
         case 'tick':
-            return `Tick #${data.tick} | Players: ${data.player_count || 0}`;
+            return `Tick #${data.tick} | 第${data.day}天 | 存活: ${data.alive_agents}人`;
         case 'system':
         case 'error':
+        case 'feed':
+        case 'agent_died':
+        case 'check':
             return data.message;
-        case 'attack':
-        case 'heal':
-        case 'status':
-        case 'boss_defeated':
-            return data.message;
-        case 'boss_update':
-            return `Boss ${data.boss_name}: ${data.boss_hp}/${data.boss_max_hp} (${Math.round(data.boss_hp_percentage)}%)`;
+        case 'agents_update':
+            return `角色状态已更新`;
+        case 'user_update':
+            return `${data.user} 金币: ${data.gold}`;
         default:
             return JSON.stringify(data);
     }
@@ -301,8 +272,8 @@ function logEvent(event) {
         return;
     }
 
-    // Skip boss_update events to reduce log noise (they're reflected in the UI)
-    if (eventType === 'boss_update') {
+    // Skip agents_update to reduce noise
+    if (eventType === 'agents_update') {
         return;
     }
 

frontend/debug_client.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>The Island - Debug Client</title>
+    <title>荒岛：人性的试炼</title>
     <style>
         * {
             box-sizing: border-box;
@@ -12,20 +12,26 @@
         }
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            background: linear-gradient(135deg, #1a2a1a 0%, #0d1f0d 100%);
             color: #eee;
             min-height: 100vh;
             padding: 20px;
         }
         .container {
-            max-width: 900px;
+            max-width: 1000px;
             margin: 0 auto;
         }
         h1 {
             text-align: center;
+            margin-bottom: 10px;
+            color: #88cc88;
+            text-shadow: 0 0 10px rgba(136, 204, 136, 0.5);
+        }
+        .subtitle {
+            text-align: center;
+            color: #666;
             margin-bottom: 20px;
-            color: #00d4ff;
-            text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+            font-size: 0.9rem;
         }
         .status-bar {
             display: flex;
@@ -52,87 +58,129 @@
             box-shadow: 0 0 10px rgba(68, 255, 68, 0.5);
         }
 
-        /* Boss Health Bar */
-        .boss-panel {
-            background: rgba(255, 68, 68, 0.1);
-            border: 1px solid rgba(255, 68, 68, 0.3);
+        /* User Stats */
+        .user-panel {
+            background: rgba(136, 204, 136, 0.1);
+            border: 1px solid rgba(136, 204, 136, 0.3);
             border-radius: 12px;
-            padding: 20px;
+            padding: 15px 20px;
             margin-bottom: 20px;
-        }
-        .boss-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 10px;
         }
-        .boss-name {
-            color: #ff6666;
-            font-size: 1.3rem;
-            font-weight: bold;
-        }
-        .boss-hp-text {
-            color: #ffaaaa;
-            font-size: 0.9rem;
-        }
-        .health-bar-container {
-            width: 100%;
-            height: 30px;
-            background: rgba(0, 0, 0, 0.4);
-            border-radius: 15px;
-            overflow: hidden;
-            position: relative;
-        }
-        .health-bar {
-            height: 100%;
-            background: linear-gradient(90deg, #ff4444 0%, #ff6666 100%);
-            border-radius: 15px;
-            transition: width 0.3s ease;
-        }
-        .health-bar-label {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-weight: bold;
-            text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
-        }
-
-        /* Player Stats Panel */
-        .player-panel {
-            background: rgba(0, 212, 255, 0.1);
-            border: 1px solid rgba(0, 212, 255, 0.3);
-            border-radius: 12px;
-            padding: 20px;
-            margin-bottom: 20px;
-        }
-        .player-header {
-            color: #00d4ff;
-            font-size: 1.1rem;
-            margin-bottom: 15px;
-        }
-        .player-stats {
-            display: flex;
-            gap: 30px;
-            flex-wrap: wrap;
-        }
-        .stat-item {
+        .user-info {
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 20px;
         }
-        .stat-icon {
-            font-size: 1.5rem;
+        .gold-display {
+            font-size: 1.3rem;
+            color: #ffd700;
         }
-        .stat-value {
+
+        /* Agent Cards */
+        .agents-section {
+            margin-bottom: 20px;
+        }
+        .section-title {
+            color: #88cc88;
+            margin-bottom: 15px;
+            font-size: 1.1rem;
+        }
+        .agents-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 15px;
+        }
+        .agent-card {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            padding: 20px;
+            transition: all 0.3s;
+        }
+        .agent-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
+        }
+        .agent-card.dead {
+            opacity: 0.5;
+            filter: grayscale(80%);
+            border-color: #444;
+        }
+        .agent-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        .agent-name {
             font-size: 1.2rem;
             font-weight: bold;
         }
-        .stat-label {
+        .agent-personality {
+            font-size: 0.85rem;
+            color: #aaa;
+            background: rgba(255,255,255,0.1);
+            padding: 3px 10px;
+            border-radius: 10px;
+        }
+        .agent-status {
             font-size: 0.8rem;
+            padding: 3px 8px;
+            border-radius: 8px;
+        }
+        .agent-status.alive { background: rgba(68, 255, 68, 0.2); color: #88ff88; }
+        .agent-status.dead { background: rgba(255, 68, 68, 0.2); color: #ff8888; }
+
+        /* Stat Bars */
+        .stat-bar-container {
+            margin-bottom: 10px;
+        }
+        .stat-bar-label {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.85rem;
+            margin-bottom: 5px;
+        }
+        .stat-bar {
+            height: 12px;
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 6px;
+            overflow: hidden;
+        }
+        .stat-bar-fill {
+            height: 100%;
+            border-radius: 6px;
+            transition: width 0.3s ease;
+        }
+        .stat-bar-fill.hp { background: linear-gradient(90deg, #ff4444, #ff6666); }
+        .stat-bar-fill.energy { background: linear-gradient(90deg, #ffaa00, #ffcc44); }
+
+        /* Feed Button */
+        .feed-btn {
+            width: 100%;
+            margin-top: 10px;
+            padding: 8px;
+            background: #88cc88;
+            color: #1a2a1a;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: all 0.2s;
+        }
+        .feed-btn:hover {
+            background: #66aa66;
+        }
+        .feed-btn:disabled {
+            background: #444;
             color: #888;
+            cursor: not-allowed;
         }
 
+        /* Panels */
         .panels {
             display: flex;
             flex-direction: column;
@@ -145,7 +193,7 @@
             padding: 20px;
         }
         .panel h2 {
-            color: #00d4ff;
+            color: #88cc88;
             margin-bottom: 15px;
             font-size: 1.1rem;
         }
@@ -166,39 +214,26 @@
         }
         input[type="text"]:focus {
             outline: none;
-            border-color: #00d4ff;
+            border-color: #88cc88;
         }
         button {
             padding: 10px 20px;
             border: none;
             border-radius: 6px;
-            background: #00d4ff;
-            color: #1a1a2e;
+            background: #88cc88;
+            color: #1a2a1a;
             font-weight: bold;
             cursor: pointer;
             transition: all 0.2s;
         }
         button:hover {
-            background: #00b8e6;
+            background: #66aa66;
             transform: translateY(-1px);
         }
         button:disabled {
-            background: #666;
+            background: #444;
             cursor: not-allowed;
         }
-        .quick-actions {
-            display: flex;
-            gap: 10px;
-            margin-top: 10px;
-            flex-wrap: wrap;
-        }
-        .quick-btn {
-            padding: 8px 16px;
-            font-size: 13px;
-        }
-        .quick-btn.attack { background: #ff6666; }
-        .quick-btn.heal { background: #44ff88; }
-        .quick-btn.status { background: #ffaa44; }
         .controls {
             display: flex;
             gap: 15px;
@@ -212,7 +247,7 @@
             font-size: 14px;
         }
         .event-log {
-            height: 350px;
+            height: 300px;
             overflow-y: auto;
             background: rgba(0, 0, 0, 0.4);
             border-radius: 8px;
@@ -226,17 +261,13 @@
             border-radius: 6px;
             border-left: 3px solid;
         }
-        .event.comment { border-color: #ffaa00; background: rgba(255, 170, 0, 0.1); }
-        .event.agent_response { border-color: #00ff88; background: rgba(0, 255, 136, 0.1); }
-        .event.tick { border-color: #888; background: rgba(136, 136, 136, 0.05); opacity: 0.6; }
-        .event.system { border-color: #00d4ff; background: rgba(0, 212, 255, 0.1); }
+        .event.comment { border-color: #888; background: rgba(136, 136, 136, 0.1); }
+        .event.tick { border-color: #444; background: rgba(68, 68, 68, 0.05); opacity: 0.6; }
+        .event.system { border-color: #88cc88; background: rgba(136, 204, 136, 0.1); }
         .event.error { border-color: #ff4444; background: rgba(255, 68, 68, 0.1); }
-        /* RPG Event Styles */
-        .event.attack { border-color: #ff4444; background: rgba(255, 68, 68, 0.15); color: #ff8888; }
-        .event.heal { border-color: #44ff88; background: rgba(68, 255, 136, 0.15); color: #88ffaa; }
-        .event.status { border-color: #ffaa44; background: rgba(255, 170, 68, 0.1); }
-        .event.boss_update { border-color: #ff6666; background: rgba(255, 102, 102, 0.1); }
-        .event.boss_defeated { border-color: #ffdd00; background: rgba(255, 221, 0, 0.2); color: #ffee88; font-weight: bold; }
+        .event.feed { border-color: #ffaa00; background: rgba(255, 170, 0, 0.1); color: #ffcc66; }
+        .event.agent_died { border-color: #ff4444; background: rgba(255, 68, 68, 0.15); color: #ff8888; }
+        .event.check { border-color: #88cc88; background: rgba(136, 204, 136, 0.1); }
         .event-time { color: #888; font-size: 11px; }
         .event-type { font-weight: bold; text-transform: uppercase; font-size: 11px; }
         .event-data { margin-top: 5px; }
@@ -244,70 +275,57 @@
 </head>
 <body>
     <div class="container">
-        <h1>The Island - Debug Client</h1>
+        <h1>荒岛：人性的试炼</h1>
+        <p class="subtitle">The Island: Trial of Humanity</p>
 
         <div class="status-bar">
             <div class="status-indicator">
                 <div class="status-dot" id="statusDot"></div>
-                <span id="statusText">Disconnected</span>
+                <span id="statusText">未连接</span>
             </div>
-            <button id="connectBtn" onclick="toggleConnection()">Connect</button>
+            <button id="connectBtn" onclick="toggleConnection()">连接</button>
         </div>
 
-        <!-- Boss Health Panel -->
-        <div class="boss-panel">
-            <div class="boss-header">
-                <span class="boss-name" id="bossName">Dragon</span>
-                <span class="boss-hp-text" id="bossHpText">HP: 1000 / 1000</span>
+        <!-- User Panel -->
+        <div class="user-panel">
+            <div class="user-info">
+                <span>玩家:</span>
+                <input type="text" id="username" value="观众001" style="width: 120px;">
             </div>
-            <div class="health-bar-container">
-                <div class="health-bar" id="bossHealthBar" style="width: 100%"></div>
-                <span class="health-bar-label" id="bossHealthLabel">100%</span>
+            <div class="gold-display">
+                💰 <span id="userGold">100</span> 金币
             </div>
         </div>
 
-        <!-- Player Stats Panel -->
-        <div class="player-panel">
-            <div class="player-header">Your Stats</div>
-            <div class="player-stats">
-                <div class="stat-item">
-                    <span class="stat-icon">❤️</span>
-                    <div>
-                        <div class="stat-value" id="playerHp">100/100</div>
-                        <div class="stat-label">HP</div>
-                    </div>
-                </div>
-                <div class="stat-item">
-                    <span class="stat-icon">💰</span>
-                    <div>
-                        <div class="stat-value" id="playerGold">0</div>
-                        <div class="stat-label">Gold</div>
-                    </div>
+        <!-- Agents Section -->
+        <div class="agents-section">
+            <h2 class="section-title">岛上幸存者</h2>
+            <div class="agents-grid" id="agentsGrid">
+                <!-- Agent cards will be dynamically generated -->
+                <div class="agent-card" id="agent-loading">
+                    <p style="text-align: center; color: #666;">等待连接...</p>
                 </div>
             </div>
         </div>
 
         <div class="panels">
             <div class="panel">
-                <h2>Send Command</h2>
+                <h2>发送指令</h2>
                 <div class="input-group">
-                    <input type="text" id="username" placeholder="Username" value="TestUser">
-                    <input type="text" id="message" placeholder="Message (attack, heal, status...)">
-                    <button onclick="sendComment()">Send</button>
-                </div>
-                <div class="quick-actions">
-                    <button class="quick-btn attack" onclick="quickAction('attack')">⚔️ Attack</button>
-                    <button class="quick-btn heal" onclick="quickAction('heal')">💚 Heal</button>
-                    <button class="quick-btn status" onclick="quickAction('status')">📊 Status</button>
+                    <input type="text" id="message" placeholder="输入指令 (feed Jack, check, 查询...)">
+                    <button onclick="sendComment()">发送</button>
                 </div>
+                <p style="margin-top: 10px; font-size: 0.85rem; color: #888;">
+                    指令: <code>feed [名字]</code> - 投喂角色 (消耗10金币) | <code>check</code> - 查询状态
+                </p>
             </div>
 
             <div class="panel">
-                <h2>Event Log</h2>
+                <h2>事件日志</h2>
                 <div class="controls">
-                    <button onclick="clearLog()">Clear Log</button>
-                    <label><input type="checkbox" id="autoScroll" checked> Auto-scroll</label>
-                    <label><input type="checkbox" id="hideTicks"> Hide ticks</label>
+                    <button onclick="clearLog()">清空</button>
+                    <label><input type="checkbox" id="autoScroll" checked> 自动滚动</label>
+                    <label><input type="checkbox" id="hideTicks" checked> 隐藏 Tick</label>
                 </div>
                 <div class="event-log" id="eventLog"></div>
             </div>