From 34bc597d39506135c1effbfaaa61cb4f39ce58c8 Mon Sep 17 00:00:00 2001
From: cc-dan <cc-dan@local>
Date: Sat, 14 Mar 2026 07:19:13 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=BB=98=E8=AE=A4=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=20+=20Claude/Codex=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/app.js    | 13 +++++++++++--
 public/style.css | 12 ++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/public/app.js b/public/app.js
index 2ce7369..ac11d6b 100644
--- a/public/app.js
+++ b/public/app.js
@@ -1541,7 +1541,7 @@
 
   function createMsgElement(role, content, attachments = []) {
     const div = document.createElement('div');
-    div.className = `msg ${role}`;
+    div.className = `msg ${role}${role === 'assistant' ? ' agent-' + currentAgent : ''}`;
 
     if (role === 'system') {
       const bubble = document.createElement('div');
@@ -1553,7 +1553,13 @@
 
     const avatar = document.createElement('div');
     avatar.className = 'msg-avatar';
-    avatar.textContent = role === 'user' ? 'U' : (currentAgent === 'codex' ? 'O' : 'C');
+    if (role === 'user') {
+      avatar.textContent = 'U';
+    } else if (currentAgent === 'codex') {
+      avatar.innerHTML = `<svg viewBox="0 0 41 41" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"><path d="M37.532 16.87a9.963 9.963 0 0 0-.856-8.184 10.078 10.078 0 0 0-10.855-4.835A9.964 9.964 0 0 0 18.306.5a10.079 10.079 0 0 0-9.614 6.977 9.967 9.967 0 0 0-6.664 4.834 10.08 10.08 0 0 0 1.24 11.817 9.965 9.965 0 0 0 .856 8.185 10.079 10.079 0 0 0 10.855 4.835 9.965 9.965 0 0 0 7.516 3.35 10.078 10.078 0 0 0 9.617-6.981 9.967 9.967 0 0 0 6.663-4.834 10.079 10.079 0 0 0-1.243-11.813zM22.498 37.886a7.474 7.474 0 0 1-4.799-1.735c.061-.033.168-.091.237-.134l7.964-4.6a1.294 1.294 0 0 0 .655-1.134V19.054l3.366 1.944a.12.12 0 0 1 .066.092v9.299a7.505 7.505 0 0 1-7.49 7.496zM6.392 31.006a7.471 7.471 0 0 1-.894-5.023c.06.036.162.099.237.141l7.964 4.6a1.297 1.297 0 0 0 1.308 0l9.724-5.614v3.888a.12.12 0 0 1-.048.103l-8.051 4.649a7.504 7.504 0 0 1-10.24-2.744zM4.297 13.62A7.469 7.469 0 0 1 8.2 10.333c0 .068-.004.19-.004.274v9.201a1.294 1.294 0 0 0 .654 1.132l9.723 5.614-3.366 1.944a.12.12 0 0 1-.114.012L6.044 23.86a7.504 7.504 0 0 1-1.747-10.24zm27.658 6.437l-9.724-5.615 3.367-1.943a.121.121 0 0 1 .114-.012l9.048 5.228a7.498 7.498 0 0 1-1.158 13.528v-9.476a1.293 1.293 0 0 0-.647-1.71zm3.35-5.043c-.059-.037-.162-.099-.236-.141l-7.965-4.6a1.298 1.298 0 0 0-1.308 0l-9.723 5.614v-3.888a.12.12 0 0 1 .048-.103l8.05-4.645a7.497 7.497 0 0 1 11.135 7.763zm-21.063 6.929l-3.367-1.944a.12.12 0 0 1-.065-.092v-9.299a7.497 7.497 0 0 1 12.293-5.756 6.94 6.94 0 0 0-.236.134l-7.965 4.6a1.294 1.294 0 0 0-.654 1.132l-.006 11.225zm1.829-3.943l4.33-2.501 4.332 2.5v4.999l-4.331 2.5-4.331-2.5V18z"/></svg>`;
+    } else {
+      avatar.textContent = '🦀';
+    }
 
     const bubble = document.createElement('div');
     bubble.className = 'msg-bubble';
@@ -2775,6 +2781,9 @@
     if (currentSessionId) {
       send({ type: 'set_mode', sessionId: currentSessionId, mode: currentMode });
     }
+    if (currentMode === 'default') {
+      appendSystemMessage('⚠ 由于项目设计与 CLI 原生逻辑不同，默认模式的授权申请功能暂未实现，建议搭配 Plan 或 YOLO 模式使用。');
+    }
   });
 
   msgInput.addEventListener('input', () => {
diff --git a/public/style.css b/public/style.css
index e618cf8..ba3621e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1015,6 +1015,18 @@ body.session-loading-active {
 }
 .msg.user .msg-avatar { background: var(--bg-bubble-user); color: #fff; }
 .msg.assistant .msg-avatar { background: var(--success); color: #fff; }
+.msg-avatar svg { display: block; flex-shrink: 0; }
+/* Claude avatar: pixel crab emoji on accent bg */
+.msg.assistant.agent-claude .msg-avatar {
+  background: var(--accent);
+  color: #fff;
+  font-size: 18px;
+}
+/* Codex avatar: GPT logo on green bg */
+.msg.assistant.agent-codex .msg-avatar {
+  background: #10a37f;
+  color: #fff;
+}
 
 .msg-bubble {
   padding: 12px 16px;