diff --git a/public/app.js b/public/app.js
index e1fd290..31a58e9 100644
--- a/public/app.js
+++ b/public/app.js
@@ -116,13 +116,41 @@ function renderBoard() {
       const cardEl = document.createElement('div');
       cardEl.className = 'card';
       cardEl.innerHTML = `
-        <div class="card-head">
-          <h3 class="card-title">${escapeHtml(task.title)}</h3>
-          <span class="badge priority-${task.priority}">${task.priority}</span>
+      <div class="agent-header">
+        <h3 class="agent-name">${agent.emoji || '🤖'} ${escapeHtml(agent.name)}</h3>
+        <span class="agent-status ${statusClass}">${agent.status}</span>
+      </div>
+      <div class="agent-meta">
+        <span class="agent-model">🧠 ${agent.model || 'unknown'}</span>
+        <span class="agent-activity">⏰ ${agent.lastActivity ? new Date(agent.lastActivity).toLocaleString() : 'Never'}</span>
+      </div>
+      <div class="agent-workload">
+        <span class="workload-badge">📋 ${agent.workload} active task${agent.workload !== 1 ? 's' : ''}</span>
+      </div>
+      <div class="agent-body">
+        <div class="agent-section">
+          <h4>📋 Current Task</h4>
+          <p class="agent-task">${agent.currentTask || 'No active task'}</p>
         </div>
-        <p class="card-desc">${escapeHtml(task.description || '')}</p>
-        <p class="meta assignee">${task.assignee || 'Unassigned'}</p>
-        <p class="meta tags">${task.tags.map((t) => `<span class="tag">${escapeHtml(t)}</span>`).join(' ')}</p>
+        <div class="agent-section">
+          <h4>🛠️ Tools</h4>
+          <div class="agent-tools">
+            ${agent.tools.length ? agent.tools.slice(0, 5).map((tool) => \`<span class="tool-tag">\${escapeHtml(tool)}</span>\`).join('') : '<span class="no-data">No tools</span>'}
+            ${agent.tools.length > 5 ? \`<span class="more-tag">+\${agent.tools.length - 5} more</span>\` : ''}
+          </div>
+        </div>
+        <div class="agent-section">
+          <h4>📄 Recent Files</h4>
+          <div class="agent-files">
+            ${agent.files.length ? agent.files.slice(0, 5).map((file) => \`<span class="file-tag">\${escapeHtml(file)}</span>\`).join('') : '<span class="no-data">No files</span>'}
+          </div>
+        </div>
+      </div>
+      <div class="agent-actions">
+        <button class="btn-secondary agent-details-btn" data-agent="\${escapeHtml(agent.name)}">Details</button>
+        <button class="btn-primary agent-assign-btn" data-agent="\${escapeHtml(agent.name)}">Assign Task</button>
+      </div>
+    `<span class="tag">${escapeHtml(t)}</span>`).join(' ')}</p>
         <label>
           <input type="checkbox" class="card-check" ${task.status === 'Done' ? 'checked' : ''} />
           Mark Complete
@@ -419,9 +447,13 @@ function renderAgents(filter = '', statusFilter = '') {
 
     cardEl.innerHTML = `
       <div class="agent-header">
-        <h3 class="agent-name">${escapeHtml(agent.name)}</h3>
+        <h3 class="agent-name">${agent.emoji || '🤖'} ${escapeHtml(agent.name)}</h3>
         <span class="agent-status ${statusClass}">${agent.status}</span>
       </div>
+      <div class="agent-meta">
+        <span class="agent-model">🧠 ${agent.model || 'unknown'}</span>
+        <span class="agent-activity">⏰ ${agent.lastActivity ? new Date(agent.lastActivity).toLocaleString() : 'Never'}</span>
+      </div>
       <div class="agent-workload">
         <span class="workload-badge">📋 ${agent.workload} active task${agent.workload !== 1 ? 's' : ''}</span>
       </div>
@@ -433,7 +465,22 @@ function renderAgents(filter = '', statusFilter = '') {
         <div class="agent-section">
           <h4>🛠️ Tools</h4>
           <div class="agent-tools">
-            ${agent.tools.length ? agent.tools.slice(0, 5).map((tool) => `<span class="tool-tag">${escapeHtml(tool)}</span>`).join('') : '<span class="no-data">No tools</span>'}
+            ${agent.tools.length ? agent.tools.slice(0, 5).map((tool) => \`<span class="tool-tag">\${escapeHtml(tool)}</span>\`).join('') : '<span class="no-data">No tools</span>'}
+            ${agent.tools.length > 5 ? \`<span class="more-tag">+\${agent.tools.length - 5} more</span>\` : ''}
+          </div>
+        </div>
+        <div class="agent-section">
+          <h4>📄 Recent Files</h4>
+          <div class="agent-files">
+            ${agent.files.length ? agent.files.slice(0, 5).map((file) => \`<span class="file-tag">\${escapeHtml(file)}</span>\`).join('') : '<span class="no-data">No files</span>'}
+          </div>
+        </div>
+      </div>
+      <div class="agent-actions">
+        <button class="btn-secondary agent-details-btn" data-agent="\${escapeHtml(agent.name)}">Details</button>
+        <button class="btn-primary agent-assign-btn" data-agent="\${escapeHtml(agent.name)}">Assign Task</button>
+      </div>
+    `<span class="tool-tag">${escapeHtml(tool)}</span>`).join('') : '<span class="no-data">No tools</span>'}
             ${agent.tools.length > 5 ? `<span class="more-tag">+${agent.tools.length - 5} more</span>` : ''}
           </div>
         </div>
diff --git a/server.js b/server.js
index 5c927b1..ce3df85 100644
--- a/server.js
+++ b/server.js
@@ -558,12 +558,44 @@ app.get('/api/agents', (req, res) => {
         });
       };
 
-      const agentPromises = agentDirs.map(async (agentName) => {
-        const agentPath = path.join(AGENTS_DIR, agentName);
-        const workspacePath = path.join(agentPath, 'workspace');
+        // Load openclaw config for identity info
+        let emoji = '🤖';
+        let model = 'unknown';
+        let identityName = agentName;
+        
+        if (fs.existsSync(OPENCLAW_CONFIG)) {
+          try {
+            const openclawConfig = JSON.parse(fs.readFileSync(OPENCLAW_CONFIG, 'utf8'));
+            const agentConfig = openclawConfig.agents?.list?.find(a => a.id === agentName);
+            if (agentConfig) {
+              emoji = agentConfig.identity?.emoji || '🤖';
+              model = agentConfig.model?.primary || 'unknown';
+              identityName = agentConfig.identity?.name || agentName;
+            }
+          } catch {}
+        }
+        
+        // Get last activity from session files
+        let lastActivity = null;
+        const sessionsPath = path.join(agentPath, 'sessions');
+        if (fs.existsSync(sessionsPath)) {
+          const sessionFiles = fs.readdirSync(sessionsPath).filter(f => f.endsWith('.jsonl'));
+          if (sessionFiles.length > 0) {
+            const latestSession = sessionFiles
+              .map(f => ({ file: f, mtime: fs.statSync(path.join(sessionsPath, f)).mtime }))
+              .sort((a, b) => b.mtime - a.mtime)[0];
+            if (latestSession) {
+              lastActivity = latestSession.mtime.toISOString();
+            }
+          }
+        }
         
         const agent = {
-          name: agentName,
+          id: agentName,
+          name: identityName,
+          emoji,
+          model,
+          lastActivity,
           status: 'active',
           currentTask: null,
           tools: [],
@@ -574,10 +606,6 @@ app.get('/api/agents', (req, res) => {
           completedTasks: [],
           capabilities: []
         };
-
-        if (fs.existsSync(workspacePath)) {
-          const files = fs.readdirSync(workspacePath);
-          agent.files = files.filter(f => f.endsWith('.md'));
           
           const memoryPath = path.join(workspacePath, 'MEMORY.md');
           if (fs.existsSync(memoryPath)) {