claude-opencode-viewer 2.6.45 → 2.6.47

package/index-pc.html

@@ -390,8 +390,26 @@
       content: '';
       animation: loading-dots 1.2s steps(4, end) infinite;
     }
-    #terminal.transitioning #switch-overlay { display: flex;
+    #terminal.transitioning #switch-overlay { display: flex; }
+    #init-overlay {
+      display: none;
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: #0a0a0a;
+      color: #ccc;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      font-weight: 600;
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      letter-spacing: 1px;
+      z-index: 10;
+    }
+    #init-overlay::after {
+      content: '';
+      animation: loading-dots 1.2s steps(4, end) infinite;
     }
+    #init-overlay.visible { display: flex; }
 
 
     /* 选择模式：原位文本层 */
@@ -1019,6 +1037,7 @@
       <div id="terminal-container">
         <div id="terminal" style="position:relative;">
           <div id="switch-overlay">正在切换</div>
+          <div id="init-overlay"></div>
           <div id="select-text-layer">
             <div id="select-hint">长按选择文本 · 点右上角 ✕ 返回终端</div>
             <pre id="select-text-pre"></pre>
@@ -1054,7 +1073,7 @@
           selectionBackground: '#264f78',
         },
         allowProposedApi: true,
-        scrollback: isIOS ? 200 : isMobile ? 1000 : 3000,
+        scrollback: isIOS ? 2000 : isMobile ? 5000 : 50000,
         smoothScrollDuration: 0,
         scrollOnUserInput: true,
       });
@@ -1591,11 +1610,19 @@
         currentMode = mode;
         modeSelect.value = mode;
         document.getElementById('mode-label').textContent = '';
+        var label = mode === 'claude' ? 'Claude' : 'OpenCode';
+        var initOv = document.getElementById('init-overlay');
+        initOv.textContent = '正在启动 ' + label + (sessionId ? '（恢复会话）' : '');
+        initOv.classList.add('visible');
         var msg = { type: 'init', mode: mode };
         if (sessionId) msg.sessionId = sessionId;
         ws.send(JSON.stringify(msg));
       }
 
+      function hideInitOverlay() {
+        document.getElementById('init-overlay').classList.remove('visible');
+      }
+
       function getTimeAgo(ts) {
         var diff = Date.now() - ts;
         var min = Math.floor(diff / 60000);
@@ -1671,6 +1698,7 @@
               }
             }
             else if (msg.type === 'restored') {
+              hideInitOverlay();
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();
@@ -1679,13 +1707,16 @@
               }
             }
             else if (msg.type === 'restore-error') {
+              hideInitOverlay();
               term.write('恢复失败: ' + msg.error + '\r\n');
             }
             else if (msg.type === 'started') {
+              hideInitOverlay();
               rebindTouchScroll();
               preloadData();
             }
             else if (msg.type === 'new-session-ok') {
+              hideInitOverlay();
               if (writeTimer) { cancelAnimationFrame(writeTimer); writeTimer = null; }
               writeBuffer = '';
               term.reset();

package/index.html

@@ -30,12 +30,14 @@
     }
     #loading-overlay.hidden { display: none !important; }
   </style>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css" media="print" onload="this.media='all'">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@6.0.0/css/xterm.min.css" media="print" onload="this.media='all'">
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     html, body { margin: 0; padding: 0; overflow: hidden; }
 
-    /* 参考 cc-viewer 的 App.jsx 行 1319: 移动端容器使用 100vw/100vh */
+    /* 隐藏 xterm textarea 的闪烁光标 (cc-viewer TerminalPanel.module.css) */
+    .xterm-helper-textarea { caret-color: transparent !important; }
+
     #layout {
       position: fixed;
       top: 0;
@@ -54,8 +56,7 @@
       background: #111;
       border-bottom: 1px solid #222;
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       flex-shrink: 0;
       height: 40px;
@@ -91,8 +92,7 @@
 
     #session-history-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       background: #111;
@@ -126,8 +126,7 @@
 
     .session-item {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       gap: 8px;
       padding: 8px 12px;
       background: #1a1a1a;
@@ -211,8 +210,7 @@
       cursor: pointer;
       border-radius: 4px;
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       gap: 3px;
       flex-shrink: 0;
     }
@@ -253,8 +251,7 @@
       cursor: pointer;
       border-radius: 50%;
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: center;
       transition: all 0.15s;
       -webkit-tap-highlight-color: transparent;
@@ -299,8 +296,7 @@
 
     #claude-detail-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       padding: 10px 12px;
       background: #111;
       border-bottom: 1px solid #222;
@@ -353,8 +349,7 @@
     #mode-switcher {
       display: flex;
       gap: 4px;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
     }
 
     #mode-label {
@@ -407,8 +402,7 @@
       top: 0; left: 0; right: 0; bottom: 0;
       background: #0a0a0a;
       color: #ccc;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: center;
       font-size: 16px;
       font-family: -apple-system, BlinkMacSystemFont, sans-serif;
@@ -426,6 +420,7 @@
       display: flex;
       gap: 6px;
       padding: 8px 10px;
+      padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
       background: #111;
       border-top: 1px solid #222;
       overflow-x: auto;
@@ -444,22 +439,19 @@
       font-family: Menlo, Monaco, monospace;
       cursor: pointer;
       user-select: none;
+      -webkit-user-select: none;
       -webkit-tap-highlight-color: transparent;
+      -webkit-touch-callout: none;
       touch-action: pan-x;
       min-width: 44px;
       min-height: 44px;
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: center;
-      border: none;
       outline: none;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
     }
 
-    .virtual-key:active {
+    .virtual-key-pressed {
       background: #333;
       border-color: #555;
       color: #fff;
@@ -468,19 +460,19 @@
     /* 消息查看器 */
     #message-viewer {
       display: none;
-      position: fixed;
-      top: 0; left: 0; right: 0; bottom: 0;
+      position: absolute;
+      inset: 0;
       background: #0a0a0a;
       z-index: 1000;
       flex-direction: column;
+      overflow: hidden;
     }
     #message-viewer.visible {
       display: flex;
     }
     #msg-viewer-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       padding: 10px 14px;
       background: #111;
@@ -506,61 +498,68 @@
     }
     #msg-viewer-content {
       flex: 1;
-      overflow-y: auto;
+      overflow: auto;
       -webkit-overflow-scrolling: touch;
+      overscroll-behavior: contain;
       padding: 12px;
     }
-    .msg-item {
-      margin-bottom: 16px;
-      padding: 10px 12px;
-      border-radius: 8px;
-      border: 1px solid #222;
-    }
-    .msg-user {
-      background: #1a2332;
-      border-color: #2a4a7c;
-    }
-    .msg-assistant {
-      background: #1a2e1a;
-      border-color: #2a5a3a;
-    }
-    .msg-role {
-      font-size: 11px;
-      color: #888;
-      font-weight: 600;
-      text-transform: uppercase;
-      margin-bottom: 6px;
-    }
-    .msg-text {
-      color: #ddd;
-      font-size: 13px;
-      line-height: 1.6;
+    /* 聊天气泡布局（参考 cc-viewer ChatMessage） */
+    .msg-row { display: flex; gap: 8px; padding: 6px 12px; align-items: flex-start; }
+    .msg-row-end { display: flex; gap: 8px; padding: 6px 12px; justify-content: flex-end; align-items: flex-start; }
+    .msg-avatar {
+      width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 12px; color: #fff; font-weight: 600;
+    }
+    .msg-content-col { min-width: 0; max-width: 85%; }
+    .msg-label { font-size: 10px; color: #888; margin-bottom: 2px; }
+    .msg-label-right { text-align: right; }
+    .msg-bubble {
+      border-radius: 8px; border: 1px solid #333; padding: 8px 12px;
+      font-size: 13px; line-height: 1.6; word-break: break-word;
+      -webkit-user-select: text; user-select: text;
+    }
+    .msg-bubble-user {
+      background: #1668dc; color: #fff; border-color: #4a9eff;
       white-space: pre-wrap;
-      word-break: break-word;
-      -webkit-user-select: text;
-      user-select: text;
-    }
-    .msg-text pre {
-      background: #0d0d0d;
-      border: 1px solid #333;
-      border-radius: 4px;
-      padding: 8px;
-      overflow-x: auto;
-      font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
-      font-size: 12px;
-      line-height: 1.4;
-      white-space: pre;
-      -webkit-overflow-scrolling: touch;
-    }
-    .msg-tool {
-      margin-top: 6px;
-      padding: 6px 8px;
-      background: #1a1a0a;
-      border: 1px solid #333;
-      border-radius: 4px;
-      font-size: 11px;
-      color: #f0ad4e;
     }
+    .msg-bubble-assistant {
+      background: #111; color: #ddd; border-color: #2a2a2a;
+    }
+    /* 工具标签 */
+    .msg-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 4px; }
+    .msg-tool-tag {
+      display: inline-block; padding: 2px 8px; border-radius: 4px;
+      background: #1a1a2a; border: 1px solid #333; color: #aaa;
+      font-size: 11px; white-space: nowrap;
+    }
+    /* Markdown 富文本（助手气泡内） */
+    .msg-bubble-assistant pre {
+      background: #0d1117; border: 1px solid #2a2a2a; border-radius: 6px;
+      padding: 12px; overflow-x: auto; font-size: 13px; line-height: 1.5;
+    }
+    .msg-bubble-assistant code {
+      background: #14141F; padding: 2px 6px; border-radius: 4px;
+      font-size: 13px; color: #aeafff;
+    }
+    .msg-bubble-assistant pre code { background: none; padding: 0; color: inherit; }
+    .msg-bubble-assistant p { margin: 6px 0; }
+    .msg-bubble-assistant ul, .msg-bubble-assistant ol { padding-left: 20px; margin: 6px 0; }
+    .msg-bubble-assistant li { margin: 2px 0; }
+    .msg-bubble-assistant h1, .msg-bubble-assistant h2, .msg-bubble-assistant h3 { margin: 12px 0 6px 0; color: #fff; }
+    .msg-bubble-assistant h1 { font-size: 1.3em; }
+    .msg-bubble-assistant h2 { font-size: 1.15em; }
+    .msg-bubble-assistant h3 { font-size: 1.05em; }
+    .msg-bubble-assistant blockquote {
+      border-left: 3px solid #3b82f6; margin: 8px 0; padding: 4px 12px; color: #888;
+    }
+    .msg-bubble-assistant table { border-collapse: collapse; margin: 8px 0; font-size: 13px; }
+    .msg-bubble-assistant th, .msg-bubble-assistant td { border: 1px solid #6b7280; padding: 6px 10px; }
+    .msg-bubble-assistant th { background: #1e1e1e; color: #fff; }
+    .msg-bubble-assistant a { color: #60a5fa; }
+    .msg-bubble-assistant img { max-width: 100%; height: auto; border-radius: 6px; }
+    .msg-bubble-assistant hr { border: none; border-top: 1px solid #2a2a2a; margin: 12px 0; }
+    .msg-bubble-assistant strong { color: #e5e5e5; }
     .msg-empty {
       text-align: center;
       padding: 40px 20px;
@@ -607,8 +606,7 @@
 
     #git-diff-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       background: #111;
@@ -632,8 +630,7 @@
 
     .git-diff-file-item {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       padding: 6px 12px;
       cursor: pointer;
       color: #ccc;
@@ -677,8 +674,7 @@
 
     .git-diff-content-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       gap: 10px;
       padding: 8px 12px;
       border-bottom: 1px solid #2a2a2a;
@@ -718,8 +714,7 @@
       flex: 1;
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: center;
       gap: 12px;
       color: #333;
@@ -752,8 +747,7 @@
     #docs-bar.visible { display: flex; }
     #docs-header {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: space-between;
       padding: 12px 16px;
       background: #111;
@@ -773,8 +767,7 @@
     }
     .docs-file-item {
       display: flex;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       padding: 8px 12px;
       cursor: pointer;
       color: #ccc;
@@ -820,8 +813,7 @@
       flex: 1;
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
-      padding-top: 40px;
+      align-items: center;
       justify-content: center;
       gap: 12px;
       color: #333;
@@ -1102,21 +1094,24 @@
         </div>
       </div>
     </div>
-  </div>
 
-  <div id="message-viewer">
-    <div id="msg-viewer-header">
-      <span>会话消息</span>
-      <button id="msg-viewer-close">✕</button>
-    </div>
-    <div id="msg-viewer-content">
-      <div class="msg-empty">加载中...</div>
+    <div id="message-viewer">
+      <div id="msg-viewer-header">
+        <span>会话消息</span>
+        <button id="msg-viewer-close">✕</button>
+      </div>
+      <div id="msg-viewer-content">
+        <div class="msg-empty">加载中...</div>
+      </div>
     </div>
   </div>
 
   <div id="copy-toast">已复制</div>
-  <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-webgl@0.18.0/lib/addon-webgl.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@6.0.0/lib/xterm.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-webgl@0.19.0/lib/addon-webgl.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-unicode11@0.9.0/lib/addon-unicode11.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked@15.0.7/marked.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.4/dist/purify.min.js"></script>
   <script>
     (function() {
       var isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
@@ -1129,6 +1124,9 @@
 
       var term = new Terminal({
         cursorBlink: !isMobile,
+        cursorStyle: 'bar',
+        cursorWidth: 1,
+        cursorInactiveStyle: 'none',
         fontSize: fontSize,
         fontFamily: 'Menlo, Monaco, "Courier New", monospace',
         theme: {
@@ -1138,13 +1136,23 @@
           selectionBackground: '#264f78',
         },
         allowProposedApi: true,
-        scrollback: isIOS ? 200 : isMobile ? 1000 : 3000,
+        scrollback: isIOS ? 2000 : isMobile ? 5000 : 50000,
         smoothScrollDuration: 0,
         scrollOnUserInput: true,
       });
 
       term.open(document.getElementById('terminal'));
 
+
+      // Unicode 11 宽字符支持：box-drawing、CJK、emoji 等字符宽度精确计算
+      if (window.Unicode11Addon) {
+        try {
+          var unicode11 = new Unicode11Addon.Unicode11Addon();
+          term.loadAddon(unicode11);
+          term.unicode.activeVersion = '11';
+        } catch(e) {}
+      }
+
       // WebGL 渲染器：GPU 加速绘制，非 iOS 设备启用（iOS WebGL 性能差）
       if (!isIOS && window.WebglAddon) {
         try {
@@ -1302,6 +1310,7 @@
           var lineHeight = (newCellDims && newCellDims.height) || cellDims.height;
           var rows = Math.max(5, Math.min(Math.floor(availH / lineHeight), 100));
           term.resize(MOBILE_COLS, rows);
+          term.scrollToBottom();
           if (ws && ws.readyState === 1 && !isTransitioning) {
             ws.send(JSON.stringify({ type: 'resize', cols: MOBILE_COLS, rows: rows, mobile: true }));
           }
@@ -1834,6 +1843,11 @@
         if (seq && ws && ws.readyState === 1 && !isTransitioning) {
           ws.send(JSON.stringify({ type: 'input', data: seq }));
         }
+        // 手机端主动 blur xterm textarea，防止系统键盘弹出
+        if (isMobile) {
+          var xtermTa = terminalEl.querySelector('.xterm-helper-textarea');
+          if (xtermTa) xtermTa.blur();
+        }
       }
 
       function scrollTerminal(lines) {
@@ -1841,111 +1855,62 @@
         doScroll(lines);
       }
 
-      // 参考 cc-viewer 的 TerminalPanel.jsx 行 519-546: 虚拟按键触摸处理
-      // 每个按键独立绑定事件，不在容器上绑定
+      // 虚拟按键触摸处理
       var vkStartX = 0, vkStartY = 0, vkMoved = false, vkTarget = null;
-      var scrollInterval = null; // 长按滚动定时器
 
       function setupVirtualKeyEvents() {
         var keys = document.querySelectorAll('.virtual-key');
         keys.forEach(function(key) {
-          // 防止元素获得焦点
           key.setAttribute('tabindex', '-1');
 
-          // 移动端触摸事件
           key.addEventListener('touchstart', function(e) {
             var touch = e.touches[0];
             vkStartX = touch.clientX;
             vkStartY = touch.clientY;
             vkMoved = false;
             vkTarget = e.currentTarget;
-            vkTarget.style.background = '#333';
-
-            // 如果是滚动按钮，阻止默认行为（防止键盘弹出）并启动持续滚动
-            var scrollLines = e.currentTarget.getAttribute('data-scroll');
-            if (scrollLines) {
-              e.preventDefault(); // 关键：阻止默认行为，防止键盘弹出
-              scrollTerminal(parseInt(scrollLines, 10));
-              scrollInterval = setInterval(function() {
-                scrollTerminal(parseInt(scrollLines, 10));
-              }, 100);
-            }
-          }, { passive: false }); // 必须是 false 才能调用 preventDefault()
+            vkTarget.classList.add('virtual-key-pressed');
+          }, { passive: true });
 
           key.addEventListener('touchmove', function(e) {
             if (vkMoved) return;
             var touch = e.touches[0];
             var dx = touch.clientX - vkStartX;
             var dy = touch.clientY - vkStartY;
-            if (dx * dx + dy * dy > 64) { // 8px 阈值
+            if (dx * dx + dy * dy > 64) {
               vkMoved = true;
-              if (vkTarget) {
-                vkTarget.style.background = '';
-              }
             }
           }, { passive: true });
 
           key.addEventListener('touchend', function(e) {
-            // 清除滚动定时器
-            if (scrollInterval) {
-              clearInterval(scrollInterval);
-              scrollInterval = null;
-            }
-
+            e.preventDefault();
             if (vkTarget) {
-              vkTarget.style.background = '';
+              vkTarget.classList.remove('virtual-key-pressed');
               vkTarget = null;
             }
-
-            // 如果没有移动，触发按键功能并阻止默认行为
             if (!vkMoved) {
-              e.preventDefault(); // 阻止默认行为
-              var scrollLines = e.currentTarget.getAttribute('data-scroll');
-              if (!scrollLines) {
-                // 非滚动按钮才触发按键
+              var xtermTa = terminalEl.querySelector('.xterm-helper-textarea');
+              if (xtermTa) xtermTa.blur();
+              var scrollAttr = e.currentTarget.getAttribute('data-scroll');
+              if (scrollAttr) {
+                scrollTerminal(parseInt(scrollAttr, 10));
+              } else {
                 var keyName = e.currentTarget.getAttribute('data-key');
                 sendKey(keyName);
               }
             }
           }, { passive: false });
 
-          // PC端点击支持
           key.addEventListener('click', function(e) {
             e.preventDefault();
-            var scrollLines = e.currentTarget.getAttribute('data-scroll');
-            if (scrollLines) {
-              scrollTerminal(parseInt(scrollLines, 10));
+            var scrollAttr = e.currentTarget.getAttribute('data-scroll');
+            if (scrollAttr) {
+              scrollTerminal(parseInt(scrollAttr, 10));
             } else {
               var keyName = e.currentTarget.getAttribute('data-key');
               sendKey(keyName);
             }
           });
-          
-          // PC端鼠标按下支持（长按滚动）
-          key.addEventListener('mousedown', function(e) {
-            e.preventDefault();
-            var scrollLines = e.currentTarget.getAttribute('data-scroll');
-            if (scrollLines) {
-              scrollTerminal(parseInt(scrollLines, 10));
-              scrollInterval = setInterval(function() {
-                scrollTerminal(parseInt(scrollLines, 10));
-              }, 100);
-            }
-          });
-          
-          key.addEventListener('mouseup', function(e) {
-            if (scrollInterval) {
-              clearInterval(scrollInterval);
-              scrollInterval = null;
-            }
-          });
-          
-          key.addEventListener('mouseleave', function(e) {
-            if (scrollInterval) {
-              clearInterval(scrollInterval);
-              scrollInterval = null;
-            }
-          });
         });
       }
 
@@ -2404,7 +2369,6 @@
 
         messageViewer.classList.add('visible');
         msgViewerContent.innerHTML = '<div class="msg-empty">加载中...</div>';
-        unbindTouchScroll();
 
         if (currentMode === 'claude') {
           // Claude 模式：从 JSONL 文件读取消息
@@ -2465,22 +2429,12 @@
       }
 
       function formatMsgText(text) {
-        // 将 markdown 代码块转为 <pre>，其余部分转义
-        var parts = text.split(/(```[\s\S]*?```)/g);
-        var result = '';
-        for (var i = 0; i < parts.length; i++) {
-          var p = parts[i];
-          if (p.startsWith('```') && p.endsWith('```')) {
-            // 去掉首尾 ```（可能带语言标记）
-            var inner = p.slice(3, -3);
-            var nlIdx = inner.indexOf('\n');
-            if (nlIdx !== -1) inner = inner.slice(nlIdx + 1);
-            result += '<pre>' + escapeHtml(inner) + '</pre>';
-          } else {
-            result += escapeHtml(p);
-          }
+        if (!text) return '';
+        try {
+          return DOMPurify.sanitize(marked.parse(text, { breaks: true }));
+        } catch (e) {
+          return escapeHtml(text);
         }
-        return result;
       }
 
       function renderMessages(messages) {
@@ -2491,19 +2445,30 @@
         var html = '';
         messages.forEach(function(msg) {
           var role = msg.role || 'unknown';
-          var roleLabel = role === 'user' ? '用户' : role === 'assistant' ? '助手' : role;
-          var cls = role === 'user' ? 'msg-user' : role === 'assistant' ? 'msg-assistant' : '';
-          html += '<div class="msg-item ' + cls + '">';
-          html += '<div class="msg-role">' + roleLabel + '</div>';
-          if (msg.text) {
-            html += '<div class="msg-text">' + formatMsgText(msg.text) + '</div>';
-          }
-          if (msg.toolCalls && msg.toolCalls.length > 0) {
-            msg.toolCalls.forEach(function(tc) {
-              html += '<div class="msg-tool">🔧 ' + escapeHtml(tc.name || 'tool') + '</div>';
-            });
+          if (role === 'user') {
+            html += '<div class="msg-row-end">';
+            html += '<div class="msg-content-col">';
+            html += '<div class="msg-label msg-label-right">用户</div>';
+            html += '<div class="msg-bubble msg-bubble-user">' + escapeHtml(msg.text || '') + '</div>';
+            html += '</div>';
+            html += '<div class="msg-avatar" style="background:#1e40af">U</div>';
+            html += '</div>';
+          } else if (role === 'assistant') {
+            html += '<div class="msg-row">';
+            html += '<div class="msg-avatar" style="background:#000;border:1px solid #333">A</div>';
+            html += '<div class="msg-content-col">';
+            html += '<div class="msg-label">助手</div>';
+            html += '<div class="msg-bubble msg-bubble-assistant">' + formatMsgText(msg.text || '') + '</div>';
+            if (msg.toolCalls && msg.toolCalls.length > 0) {
+              html += '<div class="msg-tools">';
+              msg.toolCalls.forEach(function(tc) {
+                html += '<span class="msg-tool-tag">🔧 ' + escapeHtml(tc.name || 'tool') + '</span>';
+              });
+              html += '</div>';
+            }
+            html += '</div>';
+            html += '</div>';
           }
-          html += '</div>';
         });
         msgViewerContent.innerHTML = html;
         msgViewerContent.scrollTop = msgViewerContent.scrollHeight;
@@ -2515,7 +2480,6 @@
 
       function closeMessageViewer() {
         messageViewer.classList.remove('visible');
-        rebindTouchScroll();
       }
 
       msgViewerClose.addEventListener('click', function(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-opencode-viewer",
-  "version": "2.6.45",
+  "version": "2.6.47",
   "description": "A unified terminal viewer for Claude Code and OpenCode with seamless switching",
   "type": "module",
   "main": "server.js",