feat(server,frontend): real-time sync architecture with message accumulator

- Add message-accumulator.js: cascades diff-based message accumulation
- Add 3-second cascade polling with broadcastToAll (was undefined!)
- Add /api/bridge/approve endpoint: tries accept/reject Step→Command→Terminal
- Add persistent approve/reject buttons in chat header toolbar
- Frontend: loadSessionMessages (trajectory + accumulated), applyNewMessages (WS push)
- Status change detection: _prevStatusKey tracking prevents unnecessary re-renders
- actionInProgress flag prevents DOM replacement during button fetch
- Known issues: Trajectory 341 hard limit, Cascade no command-approval state

public/js/chat-panel.js

@@ -60,10 +60,7 @@ class ChatPanel {
         this.containerEl.style.display = 'none';
     }
 
-    /**
-     * 구조화된 메시지 배열로 채팅 렌더링
-     */
-    updateChat(messages) {
+    updateChat(messages, hasMore = false, scrollToBottom = true) {
         if (!messages || !Array.isArray(messages) || messages.length === 0) {
             this.messagesEl.innerHTML = `
                 <div class="chat-welcome">
@@ -73,14 +70,27 @@ class ChatPanel {
             return;
         }
 
-        // 변경 감지 — 같은 내용이면 리렌더 안 함
-        const hash = JSON.stringify(messages).length + ':' + messages.length;
+        // 변경 감지 — 실제 내용 기반 hash
+        const contentKey = messages.map(m => (m.type || '') + (m.text || '') + (m.title || '') + (m.html || '').substring(0, 30)).join('|');
+        const hash = contentKey.length + ':' + messages.length + ':' + contentKey.substring(0, 200);
         if (hash === this._lastHash) return;
         this._lastHash = hash;
+        this._shownCount = messages.length;
 
+        const prevScrollTop = this.messagesEl.scrollTop;
+        const prevScrollHeight = this.messagesEl.scrollHeight;
         const wasAtBottom = this._isScrolledToBottom();
         const frag = document.createDocumentFragment();
 
+        // 상단 "더 보기" 영역
+        if (hasMore) {
+            const loader = document.createElement('div');
+            loader.className = 'load-more-indicator';
+            loader.id = 'loadMoreIndicator';
+            loader.textContent = '⬆ 스크롤하여 이전 메시지 로드';
+            frag.appendChild(loader);
+        }
+
         for (const msg of messages) {
             const el = this._renderMessage(msg);
             if (el) frag.appendChild(el);
@@ -89,7 +99,51 @@ class ChatPanel {
         this.messagesEl.innerHTML = '';
         this.messagesEl.appendChild(frag);
 
-        if (wasAtBottom) this._scrollToBottom();
+        // 스크롤 이벤트: 최상단 → 이전 메시지 로드
+        this.messagesEl.onscroll = () => {
+            if (this.messagesEl.scrollTop < 5 && this.onLoadMore) {
+                this.onLoadMore();
+            }
+        };
+
+        // 스크롤 위치 결정
+        if (scrollToBottom || wasAtBottom) {
+            this._scrollToBottom();
+        } else {
+            // 기존 스크롤 위치 유지
+            this.messagesEl.scrollTop = prevScrollTop;
+        }
+    }
+
+    /**
+     * 이전 메시지를 상단에 추가 (스크롤 위치 보존)
+     */
+    prependMessages(msgs) {
+        if (!msgs || msgs.length === 0) return;
+        const prevHeight = this.messagesEl.scrollHeight;
+        const frag = document.createDocumentFragment();
+        for (const msg of msgs) {
+            const el = this._renderMessage(msg);
+            if (el) frag.appendChild(el);
+        }
+        // 로딩 인디케이터 다음에 삽입
+        const indicator = document.getElementById('loadMoreIndicator');
+        if (indicator) {
+            indicator.after(frag);
+        } else {
+            this.messagesEl.prepend(frag);
+        }
+        this._shownCount = (this._shownCount || 0) + msgs.length;
+        // 스크롤 위치 보존
+        this.messagesEl.scrollTop = this.messagesEl.scrollHeight - prevHeight;
+        // 더 이상 로드할 게 없으면 인디케이터 숨기기
+        if (indicator && this.messagesEl.children.length - 1 >= this._shownCount) {
+            indicator.remove();
+        }
+    }
+
+    getShownCount() {
+        return this._shownCount || 0;
     }
 
     /**
@@ -320,9 +374,12 @@ class ChatPanel {
 
             // api_call: 직접 API 호출 (승인/거절 등)
             if (btn.action === 'api_call' && btn.endpoint) {
-                el.addEventListener('click', async () => {
+                el.addEventListener('click', async (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
                     el.disabled = true;
                     el.textContent = '처리 중...';
+                    this.actionInProgress = true; // polling에 의한 DOM 교체 방지
                     try {
                         const res = await fetch(btn.endpoint, {
                             method: 'POST',
@@ -339,6 +396,8 @@ class ChatPanel {
                         }
                     } catch (e) {
                         el.textContent = `오류: ${e.message}`;
+                    } finally {
+                        this.actionInProgress = false;
                     }
                 });
             } else if (btn.action === 'switch_mirror') {
@@ -406,7 +465,7 @@ class ChatPanel {
     _renderUser(msg) {
         const wrapper = document.createElement('div');
         wrapper.className = 'msg-user';
-        wrapper.textContent = msg.content;
+        wrapper.textContent = msg.text || msg.content || '';
         return wrapper;
     }
 
@@ -416,7 +475,7 @@ class ChatPanel {
     _renderStatus(msg) {
         const wrapper = document.createElement('div');
         wrapper.className = 'msg-status';
-        wrapper.textContent = msg.content;
+        wrapper.textContent = msg.text || msg.content || '';
         return wrapper;
     }
 }