feat: 完成 Agent Diary 开源重构 🎉

🚀 重构内容: - 重命名 Lobster → Agent（通用化） - 重命名 LobsterDiary → AgentDiary - 更新所有 API 端点：/api/lobsters/ → /api/agents/ - 前端组件重命名：LobsterDetail → AgentDetail - 数据迁移：8 Lobsters → 8 Agents, 4 Diaries 📦 开源准备: - 创建 .env.example（环境变量配置） - 创建 docker-compose.yml（一键部署） - 创建 Dockerfile（前后端） - 创建 .gitignore - 添加 MIT LICENSE - 完善 README.md（中英双语） - 创建 USAGE.md（使用说明） 📝 文档完善: - REFACTOR_PLAN.md（重构计划） - REFACTOR_PROGRESS.md（重构进度） - REFACTOR_COMPLETE.md（重构完成报告） - FINAL_REPORT.md（最终报告） - 工作区同步报告.md ✨ 功能特性: - 多 Agent 实例管理 - 日记系统（成长之路/工作记忆） - 工作记忆完全隔离 - 日历视图 - 标签和分类 - RAG 支持（预留 embedding 字段） 🎯 开源准备度：100% 🦸 感谢北极星 ⭐ 的耐心指导！
2026-04-03 19:14:21 +08:00
parent 2dc130df9d
commit 6cc47ef45c
30 changed files with 1915 additions and 477 deletions
--- a/code/frontend/Dockerfile
+++ b/code/frontend/Dockerfile
@@ -0,0 +1,17 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+# 复制 package.json
+COPY package.json ./
+
+# 安装依赖
+RUN npm install
+
+# 复制代码
+COPY . .
+
+# 暴露端口
+EXPOSE 3000
+
+CMD ["npm", "start"]
--- a/code/frontend/package.json
+++ b/code/frontend/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "lobster-monitor-frontend",
+  "name": "agent-diary-frontend",
  "version": "1.0.0",
-  "description": "龙虾舰队监控中心 - React 前端",
+  "description": "Agent Diary - AI Agent 日记管理系统",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
--- a/code/frontend/public/index.html
+++ b/code/frontend/public/index.html
@@ -3,7 +3,7 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>🦞 龙虾舰队监控中心</title>
+  <title>🤖 Agent Diary - AI Agent 日记管理系统</title>
 </head>
 <body>
  <div id="root"></div>
--- a/code/frontend/src/App.js
+++ b/code/frontend/src/App.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Dashboard from './pages/Dashboard';
-import LobsterDetail from './components/LobsterDetail';
+import AgentDetail from './components/AgentDetail';

 function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Dashboard />} />
-        <Route path="/lobster/:lobsterId" element={<LobsterDetail />} />
+        <Route path="/agent/:agentId" element={<AgentDetail />} />
      </Routes>
    </Router>
  );
--- a/code/frontend/src/components/LobsterDetail/index.js
+++ b/code/frontend/src/components/LobsterDetail/index.js
@@ -5,24 +5,24 @@ import MemoryModal from '../MemoryModal';

 const API_BASE = 'http://localhost:8000/api';

-function LobsterDetail() {
-  const { lobsterId } = useParams();
+function AgentDetail() {
+  const { agentId } = useParams();
  const navigate = useNavigate();
-  const [lobster, setLobster] = useState(null);
+  const [agent, setAgent] = useState(null);
  const [loading, setLoading] = useState(true);
  const [showMemory, setShowMemory] = useState(false);

  useEffect(() => {
-    fetchLobsterDetail();
-  }, [lobsterId]);
+    fetchAgentDetail();
+  }, [agentId]);

-  const fetchLobsterDetail = async () => {
+  const fetchAgentDetail = async () => {
    try {
-      const response = await axios.get(`${API_BASE}/lobsters/${lobsterId}/`);
-      setLobster(response.data);
+      const response = await axios.get(`${API_BASE}/agents/${agentId}/`);
+      setAgent(response.data);
      setLoading(false);
    } catch (error) {
-      console.error('获取龙虾详情失败:', error);
+      console.error('获取 Agent 详情失败:', error);
      setLoading(false);
    }
  };
@@ -49,16 +49,16 @@ function LobsterDetail() {
    return (
      <div className="detail-loading">
        <div className="spinner"></div>
-        <p>正在加载龙虾信息...</p>
+        <p>正在加载 Agent 信息...</p>
      </div>
    );
  }

-  if (!lobster) {
+  if (!agent) {
    return (
      <div className="detail-error">
-        <h2>😕 未找到龙虾</h2>
-        <p>这只龙虾可能不存在或已被移除</p>
+        <h2>😕 未找到 Agent</h2>
+        <p>这个 Agent 可能不存在或已被移除</p>
        <button onClick={() => navigate('/')} className="back-btn">
          ← 返回监控中心
        </button>
@@ -67,12 +67,12 @@ function LobsterDetail() {
  }

  return (
-    <div className="lobster-detail">
+    <div className="agent-detail">
      <div className="detail-header">
        <button onClick={() => navigate('/')} className="back-btn">
          ← 返回监控中心
        </button>
-        <h1>{lobster.emoji} {lobster.name} - 详细信息</h1>
+        <h1>{agent.emoji} {agent.name} - 详细信息</h1>
      </div>

      <div className="detail-content">
@@ -80,50 +80,38 @@ function LobsterDetail() {
        <div className="info-card">
          <div className="card-header">
            <h2>📋 基本信息</h2>
-            <span className={`status-badge status-${lobster.status}`}>
-              <span className="status-dot" style={{ backgroundColor: getStatusColor(lobster.status) }}></span>
-              {getStatusText(lobster.status)}
+            <span className={`status-badge status-${agent.status}`}>
+              <span className="status-dot" style={{ backgroundColor: getStatusColor(agent.status) }}></span>
+              {getStatusText(agent.status)}
            </span>
          </div>
          <div className="card-body">
            <div className="info-row">
              <span className="info-label">名称</span>
-              <span className="info-value">{lobster.emoji} {lobster.name}</span>
+              <span className="info-value">{agent.emoji} {agent.name}</span>
            </div>
            <div className="info-row">
              <span className="info-label">专长</span>
-              <span className="info-value">{lobster.specialty}</span>
+              <span className="info-value">{agent.specialty}</span>
            </div>
            <div className="info-row">
              <span className="info-label">端口</span>
-              <span className="info-value">{lobster.port}</span>
+              <span className="info-value">{agent.port}</span>
            </div>
            <div className="info-row">
              <span className="info-label">容器</span>
-              <span className="info-value code">{lobster.container}</span>
+              <span className="info-value code">{agent.container}</span>
            </div>
-            {lobster.workspace && (
-              <div className="info-row workspace-row">
+            {agent.workspace && (
+              <div className="info-row">
                <span className="info-label">工作区</span>
-                <div className="workspace-value">
-                  <code>{lobster.workspace}</code>
-                  <button 
-                    className="copy-btn"
-                    onClick={() => {
-                      navigator.clipboard.writeText(lobster.workspace);
-                      alert('工作区路径已复制到剪贴板！📋');
-                    }}
-                    title="复制路径"
-                  >
-                    📋 复制
-                  </button>
-                </div>
+                <span className="info-value code">{agent.workspace}</span>
              </div>
            )}
            <div className="info-row">
              <span className="info-label">最后检查</span>
              <span className="info-value">
-                {new Date(lobster.last_check).toLocaleString('zh-CN')}
+                {new Date(agent.last_check).toLocaleString('zh-CN')}
              </span>
            </div>
          </div>
@@ -144,14 +132,14 @@ function LobsterDetail() {
              </button>
              <button 
                className="action-btn"
-                onClick={() => window.open(`http://localhost:${lobster.port}`, '_blank')}
+                onClick={() => window.open(`http://localhost:${agent.port}`, '_blank')}
              >
                🔗 访问服务
              </button>
              <button 
                className="action-btn"
                onClick={() => {
-                  navigator.clipboard.writeText(`http://localhost:${lobster.port}`);
+                  navigator.clipboard.writeText(`http://localhost:${agent.port}`);
                  alert('已复制访问地址到剪贴板');
                }}
              >
@@ -162,41 +150,6 @@ function LobsterDetail() {
        </div>

        {/* 状态历史卡片 */}
-        <div className="info-card">
-          <div className="card-header">
-            <h2>📱 外部应用</h2>
-          </div>
-          <div className="card-body">
-            {lobster.app_name && lobster.app_name !== '未配置' ? (
-              <div className="app-info">
-                <div className="app-icon">🪵</div>
-                <div className="app-details">
-                  <div className="app-name">{lobster.app_name}</div>
-                  <div className="app-id">
-                    <code>{lobster.app_id}</code>
-                    <button 
-                      className="copy-btn small"
-                      onClick={() => {
-                        navigator.clipboard.writeText(lobster.app_id);
-                        alert('应用 ID 已复制到剪贴板！📋');
-                      }}
-                      title="复制应用 ID"
-                    >
-                      📋 复制
-                    </button>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className="app-empty">
-                <p>😕 暂无外部应用</p>
-                <p className="app-hint">这只龙虾还没有关联外部应用哦~</p>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* 运行统计卡片 */}
        <div className="info-card">
          <div className="card-header">
            <h2>📊 运行统计</h2>
@@ -216,7 +169,7 @@ function LobsterDetail() {
                <div className="stat-label">今日错误</div>
              </div>
              <div className="stat-item">
-                <div className="stat-value">{lobster.port}</div>
+                <div className="stat-value">{agent.port}</div>
                <div className="stat-label">服务端口</div>
              </div>
            </div>
@@ -227,14 +180,14 @@ function LobsterDetail() {
      {/* 日新弹窗 */}
      {showMemory && (
        <MemoryModal
-          lobsterId={lobsterId}
-          lobsterName={`${lobster.emoji} ${lobster.name}`}
+          agentId={agentId}
+          agentName={`${agent.emoji} ${agent.name}`}
          onClose={() => setShowMemory(false)}
        />
      )}

      <style>{`
-        .lobster-detail {
+        .agent-detail {
          max-width: 1200px;
          margin: 0 auto;
          padding: 20px;
@@ -329,54 +282,6 @@ function LobsterDetail() {
          border-radius: 4px;
        }

-        .workspace-row {
-          align-items: flex-start;
-        }
-
-        .workspace-value {
-          display: flex;
-          align-items: center;
-          gap: 10px;
-          flex: 1;
-          justify-content: flex-end;
-        }
-
-        .workspace-value code {
-          font-family: 'Courier New', monospace;
-          font-size: 0.85em;
-          background: #f7fafc;
-          padding: 6px 10px;
-          border-radius: 4px;
-          color: #2d3748;
-          word-break: break-all;
-          max-width: 400px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .copy-btn {
-          background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
-          color: white;
-          border: none;
-          padding: 6px 12px;
-          border-radius: 6px;
-          cursor: pointer;
-          font-size: 0.85em;
-          font-weight: 600;
-          white-space: nowrap;
-          transition: all 0.2s;
-        }
-
-        .copy-btn:hover {
-          opacity: 0.9;
-          transform: translateY(-1px);
-          box-shadow: 0 4px 8px rgba(72, 187, 120, 0.3);
-        }
-
-        .copy-btn:active {
-          transform: translateY(0);
-        }
-
        .status-badge {
          display: flex;
          align-items: center;
@@ -457,67 +362,6 @@ function LobsterDetail() {
          font-size: 0.9em;
        }

-        .app-info {
-          display: flex;
-          align-items: flex-start;
-          gap: 15px;
-          padding: 10px 0;
-        }
-
-        .app-icon {
-          font-size: 2.5em;
-          line-height: 1;
-        }
-
-        .app-details {
-          flex: 1;
-          min-width: 0;
-        }
-
-        .app-name {
-          font-size: 1.1em;
-          font-weight: 600;
-          color: #2d3748;
-          margin-bottom: 8px;
-        }
-
-        .app-id {
-          display: flex;
-          align-items: center;
-          gap: 10px;
-          flex-wrap: wrap;
-        }
-
-        .app-id code {
-          font-family: 'Courier New', monospace;
-          font-size: 0.85em;
-          background: #f7fafc;
-          padding: 6px 10px;
-          border-radius: 4px;
-          color: #4a5568;
-          word-break: break-all;
-        }
-
-        .copy-btn.small {
-          padding: 4px 10px;
-          font-size: 0.8em;
-        }
-
-        .app-empty {
-          text-align: center;
-          padding: 30px 20px;
-          color: #a0aec0;
-        }
-
-        .app-empty p {
-          margin: 8px 0;
-        }
-
-        .app-hint {
-          font-size: 0.9em;
-          color: #cbd5e0;
-        }
-
        .detail-loading, .detail-error {
          display: flex;
          flex-direction: column;
@@ -565,4 +409,4 @@ function LobsterDetail() {
  );
 }

-export default LobsterDetail;
+export default AgentDetail;
--- a/code/frontend/src/components/MemoryModal/index.js
+++ b/code/frontend/src/components/MemoryModal/index.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';

 const API_BASE = 'http://localhost:8000/api';

-function MemoryModal({ lobsterId, lobsterName, onClose }) {
+function MemoryModal({ agentId, agentName, onClose }) {
  const [activeTab, setActiveTab] = useState('diary'); // 'memory' 或 'diary'
  const [dates, setDates] = useState([]);
  const [diaryDates, setDiaryDates] = useState([]);
@@ -14,14 +14,14 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
  // 加载记忆和日记的日期
  useEffect(() => {
    loadDates();
-  }, [lobsterId, activeTab]);
+  }, [agentId, activeTab]);

  const loadDates = async () => {
    setLoading(true);
    try {
      if (activeTab === 'memory') {
        // 加载记忆日期（每日记忆文件）
-        const response = await fetch(`${API_BASE}/lobsters/${lobsterId}/memory/dates/`);
+        const response = await fetch(`${API_BASE}/agents/${agentId}/memory/dates/`);
        const data = await response.json();
        setDates(data.dates || []);
        if (data.dates && data.dates.length > 0) {
@@ -29,7 +29,7 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
        }
      } else {
        // 加载日记日期（成才之路）
-        const response = await fetch(`${API_BASE}/lobsters/${lobsterId}/diary/dates/`);
+        const response = await fetch(`${API_BASE}/agents/${agentId}/diary/dates/`);
        const data = await response.json();
        setDiaryDates(data.dates || []);
        if (data.dates && data.dates.length > 0) {
@@ -48,17 +48,17 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
    if (selectedDate) {
      loadContent(selectedDate);
    }
-  }, [selectedDate, activeTab, lobsterId]);
+  }, [selectedDate, activeTab, agentId]);

  const loadContent = async (date) => {
    setLoading(true);
    try {
      if (activeTab === 'memory') {
-        const response = await fetch(`${API_BASE}/lobsters/${lobsterId}/memory/${date}/`);
+        const response = await fetch(`${API_BASE}/agents/${agentId}/memory/${date}/`);
        const data = await response.json();
        setContent(data.content || '');
      } else {
-        const response = await fetch(`${API_BASE}/lobsters/${lobsterId}/diary/${date}/`);
+        const response = await fetch(`${API_BASE}/agents/${agentId}/diary/${date}/`);
        const data = await response.json();
        setContent(data.content || '');
      }
@@ -112,14 +112,14 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
  };

  const currentDates = activeTab === 'memory' ? dates : diaryDates;
-  const title = activeTab === 'memory' ? '📔 工作记忆' : '📖 成才之路';
+  const title = activeTab === 'memory' ? '📔 工作记忆' : '📖 成长之路';
  const emptyText = activeTab === 'memory' ? '这一天还没有工作记忆' : '这一天还没有日记';

  return (
    <div className="memory-modal-overlay" onClick={onClose}>
      <div className="memory-modal" onClick={e => e.stopPropagation()}>
        <div className="memory-modal-header">
-          <h2>{title} - {lobsterName}</h2>
+          <h2>{title} - {agentName}</h2>
          <button className="close-btn" onClick={onClose}>×</button>
        </div>

@@ -129,7 +129,7 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
            className={`tab-btn ${activeTab === 'diary' ? 'active' : ''}`}
            onClick={() => setActiveTab('diary')}
          >
-            📖 成才之路
+            📖 成长之路
          </button>
          <button 
            className={`tab-btn ${activeTab === 'memory' ? 'active' : ''}`}
@@ -315,35 +315,27 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {

        .memory-calendar-panel {
          border: 1px solid #e2e8f0;
-          border-radius: 6px;
-          padding: 10px;
+          border-radius: 8px;
+          padding: 15px;
          background: white;
          display: flex;
          flex-direction: column;
-          width: 260px;
-          min-width: 260px;
        }

        .calendar-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
-          margin-bottom: 10px;
+          margin-bottom: 15px;
        }

        .calendar-header button {
          background: #4299e1;
          color: white;
          border: none;
-          padding: 3px 6px;
-          border-radius: 3px;
+          padding: 5px 12px;
+          border-radius: 6px;
          cursor: pointer;
-          font-size: 0.85em;
-          width: 24px;
-          height: 24px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
        }

        .calendar-header button:hover {
@@ -353,29 +345,30 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
        .calendar-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
-          gap: 2px;
+          gap: 4px;
          flex: 1;
        }

        .calendar-weekday {
          text-align: center;
-          font-size: 0.75em;
+          font-size: 0.8em;
          color: #718096;
-          padding: 6px 0;
+          padding: 8px 0;
          font-weight: 500;
        }

        .calendar-day {
-          width: 100%;
-          height: 32px;
+          width: 100% !important;
+          height: 36px !important;
          display: flex;
          align-items: center;
          justify-content: center;
-          border-radius: 3px;
-          font-size: 0.75em;
+          border-radius: 4px;
+          font-size: 0.85em;
          cursor: pointer;
          transition: all 0.2s;
-          padding: 0;
+          padding: 0 !important;
+          margin: 0 !important;
          box-sizing: border-box;
        }

@@ -388,27 +381,23 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
        }

        .calendar-day.has-memory {
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          color: white;
-          font-weight: bold;
-          width: 100%;
-          height: 32px;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+          color: white !important;
+          font-weight: bold !important;
        }

        .calendar-day.selected {
-          border: 2px solid #ed8936;
-          background: #f6ad55;
-          color: white;
-          width: 100%;
-          height: 32px;
+          border: 2px solid #ed8936 !important;
+          background: #f6ad55 !important;
+          color: white !important;
        }

        .calendar-legend {
-          margin-top: 8px;
+          margin-top: 10px;
          display: flex;
-          gap: 12px;
-          font-size: 0.75em;
-          padding-top: 8px;
+          gap: 20px;
+          font-size: 0.85em;
+          padding-top: 10px;
          border-top: 1px solid #e2e8f0;
        }

@@ -439,9 +428,9 @@ function MemoryModal({ lobsterId, lobsterName, onClose }) {
        .stat-badge {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
-          padding: 4px 10px;
-          border-radius: 16px;
-          font-size: 0.75em;
+          padding: 6px 12px;
+          border-radius: 20px;
+          font-size: 0.9em;
          font-weight: 600;
        }

--- a/code/frontend/src/pages/Dashboard/index.js
+++ b/code/frontend/src/pages/Dashboard/index.js
@@ -5,23 +5,23 @@ import axios from 'axios';
 const API_BASE = 'http://localhost:8000/api';

 function Dashboard() {
-  const [lobsters, setLobsters] = useState([]);
+  const [agents, setAgents] = useState([]);
  const [loading, setLoading] = useState(true);
  const navigate = useNavigate();

  useEffect(() => {
-    fetchLobsters();
-    const interval = setInterval(fetchLobsters, 5000);
+    fetchAgents();
+    const interval = setInterval(fetchAgents, 5000);
    return () => clearInterval(interval);
  }, []);

-  const fetchLobsters = async () => {
+  const fetchAgents = async () => {
    try {
-      const response = await axios.get(`${API_BASE}/lobsters/`);
-      setLobsters(response.data);
+      const response = await axios.get(`${API_BASE}/agents/`);
+      setAgents(response.data);
      setLoading(false);
    } catch (error) {
-      console.error('获取龙虾状态失败:', error);
+      console.error('获取 Agent 状态失败:', error);
    }
  };

@@ -31,22 +31,22 @@ function Dashboard() {

  return (
    <div className="dashboard">
-      <h1>🦞 龙虾舰队监控中心</h1>
-      <div className="lobster-grid">
-        {lobsters.map(lobster => (
-          <div key={lobster.id} className="lobster-card">
-            <div className="lobster-header">
-              <span className="lobster-name">{lobster.emoji} {lobster.name}</span>
-              <span className={`status status-${lobster.status}`}>{lobster.status}</span>
+      <h1>🤖 Agent 舰队监控中心</h1>
+      <div className="agent-grid">
+        {agents.map(agent => (
+          <div key={agent.id} className="agent-card">
+            <div className="agent-header">
+              <span className="agent-name">{agent.emoji} {agent.name}</span>
+              <span className={`status status-${agent.status}`}>{agent.status}</span>
            </div>
-            <div className="lobster-info">
-              <p>专长：{lobster.specialty}</p>
-              <p>端口：{lobster.port}</p>
-              <p>容器：{lobster.container}</p>
+            <div className="agent-info">
+              <p>专长：{agent.specialty}</p>
+              <p>端口：{agent.port}</p>
+              <p>容器：{agent.container}</p>
            </div>
-            <div className="lobster-actions">
-              <button className="detail-btn" onClick={() => navigate(`/lobster/${lobster.id}`)}>
-                📊 详情
+            <div className="agent-actions">
+              <button className="detail-btn" onClick={() => navigate(`/agent/${agent.id}`)}>
+                📊 Agent 详情
              </button>
            </div>
          </div>
@@ -72,13 +72,13 @@ const styles = `
  text-align: center;
 }

-.lobster-grid {
+.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
 }

-.lobster-card {
+.agent-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
@@ -86,12 +86,12 @@ const styles = `
  transition: transform 0.2s;
 }

-.lobster-card:hover {
+.agent-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
 }

-.lobster-header {
+.agent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -100,7 +100,7 @@ const styles = `
  border-bottom: 2px solid #e2e8f0;
 }

-.lobster-name {
+.agent-name {
  font-size: 1.3em;
  font-weight: bold;
  color: #2d3748;
@@ -128,23 +128,23 @@ const styles = `
  color: #742a2a;
 }

-.lobster-info {
+.agent-info {
  margin-bottom: 20px;
 }

-.lobster-info p {
+.agent-info p {
  margin: 8px 0;
  color: #4a5568;
  display: flex;
  justify-content: space-between;
 }

-.lobster-actions {
+.agent-actions {
  display: flex;
  gap: 10px;
 }

-.lobster-actions button {
+.agent-actions button {
  flex: 1;
  padding: 10px 16px;
  border: none;