refactor(ui): Antigravity-style conversation — task cards group tool actions, remove internal steps, mode badges

public/js/chat-panel.js

@@ -122,7 +122,7 @@ class ChatPanel {
 
         const toggle = document.createElement('span');
         toggle.className = 'msg-toggle';
-        toggle.textContent = msg.collapsed ? '▸' : '▾';
+        toggle.textContent = '▾';
 
         const title = document.createElement('span');
         title.className = 'msg-card-title';
@@ -131,7 +131,17 @@ class ChatPanel {
         header.appendChild(toggle);
         header.appendChild(title);
 
-        // 요약
+        // 모드 뱃지
+        if (msg.mode) {
+            const badge = document.createElement('span');
+            badge.className = 'msg-mode-badge';
+            const modeMap = { PLANNING: '📋', EXECUTION: '⚙️', VERIFICATION: '✅' };
+            badge.textContent = modeMap[msg.mode] || msg.mode;
+            badge.title = msg.mode;
+            header.appendChild(badge);
+        }
+
+        // 요약  
         if (msg.summary) {
             const summary = document.createElement('div');
             summary.className = 'msg-card-summary';
@@ -141,26 +151,32 @@ class ChatPanel {
 
         card.appendChild(header);
 
-        // 하위 항목
-        if (msg.steps && msg.steps.length > 0) {
+        // 도구 호출 목록 (tools)
+        const toolList = msg.tools || msg.steps || [];
+        if (toolList.length > 0) {
             const body = document.createElement('div');
             body.className = 'msg-card-body';
-            if (msg.collapsed) body.style.display = 'none';
 
-            for (const step of msg.steps) {
+            for (const tool of toolList) {
                 const row = document.createElement('div');
                 row.className = 'msg-step';
 
                 const icon = document.createElement('span');
                 icon.className = 'msg-step-icon';
-                icon.textContent = step.icon || '•';
+                icon.textContent = tool.icon || '•';
 
                 const text = document.createElement('span');
                 text.className = 'msg-step-text';
-                text.textContent = step.text;
+                text.textContent = tool.label || tool.text || '';
+
+                const check = document.createElement('span');
+                check.className = 'msg-step-check';
+                check.textContent = tool.done ? '✓' : '…';
+                check.style.color = tool.done ? '#22c55e' : '#94a3b8';
 
                 row.appendChild(icon);
                 row.appendChild(text);
+                row.appendChild(check);
                 body.appendChild(row);
             }
 
@@ -175,7 +191,7 @@ class ChatPanel {
             });
         }
 
-        // 카드 내부 액션 버튼 (Cancel, Review Changes 등)
+        // 카드 내부 액션 버튼
         if (msg.actions && msg.actions.length > 0) {
             const actionsDiv = document.createElement('div');
             actionsDiv.className = 'msg-card-actions';
@@ -192,7 +208,7 @@ class ChatPanel {
                 if (btn.x && btn.y) {
                     el.style.cursor = 'pointer';
                     el.addEventListener('click', (e) => {
-                        e.stopPropagation(); // 카드 토글 방지
+                        e.stopPropagation();
                         if (this.onActionClick) {
                             this.onActionClick({ label: btn.label, x: btn.x, y: btn.y });
                         }