refactor: 显示形态收敛前端 (decodeDisplay 统一控制图片/CP437 符号化, MCP 缓冲回归纯文本, Rust decode_bytes 回归纯解码)

Author: Martlet-Tech

src/js/receive.js

@@ -1,6 +1,6 @@
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
-import { timestamp, bytesToHex, getSettings } from './utils.js';
+import { timestamp, bytesToHex, getSettings, decodeDisplay } from './utils.js';
 import { termWrite, clearTerminal } from './terminal.js';
 import { t } from './i18n.js';
 import { ReceiveZoom } from './zoom.js';
@@ -38,6 +38,7 @@ let prevFrameRaw = '';
 
 let openFrame = null;
 let frameText = '';
+let framePure = '';   // pure decoded text of the current frame (MCP buffer)
 
 let contextMenu = null;
 
@@ -370,12 +371,14 @@ function applyFrameActions(actions) {
         openFrame = buildFrameEl(a.marker, '');
         receiveContent.appendChild(openFrame);
         frameText = '';
+        framePure = '';
       }
     } else if (a.type === 'frame-append') {
       if (!openFrame) {
         openFrame = buildFrameEl(null, '');
         receiveContent.appendChild(openFrame);
         frameText = '';
+        framePure = '';
       }
       openFrame.appendChild(document.createTextNode(a.text));
       frameText += a.text;
@@ -393,8 +396,10 @@ function finalizeFrame() {
   if (!openFrame) return;
   const line = openFrame;
   const raw = frameText;
+  const pure = framePure;
   openFrame = null;
   frameText = '';
+  framePure = '';
 
   if (foldEnabled) {
     if (foldActive && foldBadge && raw === foldText) {
@@ -420,7 +425,7 @@ function finalizeFrame() {
         const badge = createFoldBadge(marker, raw, frameRepeat);
         receiveContent.appendChild(badge);
         for (let i = 0; i < frameRepeat - 1; i++) mcpBuffer.pop();
-        mcpBuffer.push(badge.textContent);
+        mcpBuffer.push(pure);
         foldActive = true;
         foldText = raw;
         foldCount = frameRepeat;
@@ -436,7 +441,7 @@ function finalizeFrame() {
   prevFrameRaw = raw;
 
   if (filterText && !matchesFilter(raw)) line.style.display = 'none';
-  mcpBuffer.push(raw);
+  mcpBuffer.push(pure);
   evictIfNeeded();
   if (autoScroll) receiveArea.scrollTop = receiveArea.scrollHeight;
 }
@@ -450,12 +455,14 @@ function appendEchoFrame(text, marker, alreadyHex = false) {
   if (!echoEnabled) return;
   const display = alreadyHex
     ? text
-    : (hexDisplay ? bytesToHex(Array.from(new TextEncoder().encode(text))) : text);
+    : (hexDisplay
+      ? bytesToHex(Array.from(new TextEncoder().encode(text)))
+      : decodeDisplay(Array.from(new TextEncoder().encode(text)), encoding));
   const line = buildFrameEl(marker, '');
   receiveContent.appendChild(line);
   line.appendChild(document.createTextNode(display));
   if (filterText && !matchesFilter(display)) line.style.display = 'none';
-  mcpBuffer.push(display);
+  mcpBuffer.push(text);
   evictIfNeeded();
   if (autoScroll) receiveArea.scrollTop = receiveArea.scrollHeight;
 }
@@ -472,12 +479,17 @@ export async function appendData({ bytes, frameEnd }, direction) {
   termWrite(text);
 
   // Debug view is the mirror: one frame = one div, raw content, long frames
-  // are flushed progressively (256B chunks, see FrameLayout).
-  // Direction marker is decoupled from the timestamp toggle: [R] / [T]
-  // always shown, timestamps append the time when enabled.
+  // are flushed progressively (256B chunks, see FrameLayout). Display form
+  // (hex / control pictures / CP437) is a frontend-only concern — the MCP
+  // buffer receives the pure decoded text.
   const marker = showTimestamp ? `[${direction}-${timestamp()}]` : '[R]';
-  const frameText = hexDisplay ? bytesToHex(bytes) : text;
-  applyFrameActions(layout.push(frameText, { frameEnd: !!frameEnd, marker }));
+  const actions = layout.push(
+    hexDisplay ? bytesToHex(bytes) : decodeDisplay(bytes, encoding),
+    { frameEnd: !!frameEnd, marker },
+  );
+  if (actions.some(a => a.type === 'frame-start')) framePure = '';
+  framePure += text;
+  applyFrameActions(actions);
 }
 
 function appendSentText(text, isHex) {
@@ -585,6 +597,7 @@ function clearReceiveLines() {
   }
   openFrame = null;
   frameText = '';
+  framePure = '';
   layout.reset();
   foldActive = false;
   foldBadge = null;

src/js/utils.js

@@ -88,6 +88,79 @@ export function bytesToHex(bytes) {
   return bytes.map(b => b.toString(16).toUpperCase().padStart(2, '0')).join(' ');
 }
 
+/// CP437 glyphs for bytes 0x80..=0xFF: every high byte gets a displayable
+/// symbol (box drawing, block chars, greek, math) instead of a tofu box.
+const CP437 = [
+  'Ç', 'ü', 'é', 'â', 'ä', 'à', 'å', 'ç', 'ê', 'ë', 'è', 'ï', 'î', 'ì', 'Ä', 'Å',
+  'É', 'æ', 'Æ', 'ô', 'ö', 'ò', 'û', 'ù', 'ÿ', 'Ö', 'Ü', '¢', '£', '¥', '₧', 'ƒ',
+  'á', 'í', 'ó', 'ú', 'ñ', 'Ñ', 'ª', 'º', '¿', '⌐', '¬', '½', '¼', '¡', '«', '»',
+  '░', '▒', '▓', '│', '┤', '╡', '╢', '╖', '╕', '╣', '║', '╗', '╝', '╜', '╛', '┐',
+  '└', '┴', '┬', '├', '─', '┼', '╞', '╟', '╚', '╔', '╩', '╦', '╠', '═', '╬', '╧',
+  '╨', '╤', '╥', '╙', '╘', '╒', '╓', '╫', '╪', '┘', '┌', '█', '▄', '▌', '▐', '▀',
+  'α', 'ß', 'Γ', 'π', 'Σ', 'σ', 'µ', 'τ', 'Φ', 'Θ', 'Ω', 'δ', '∞', 'φ', 'ε', '∩',
+  '≡', '±', '≥', '≤', '⌠', '⌡', '÷', '≈', '°', '∙', '·', '√', 'ⁿ', '²', '■', '\u00a0',
+];
+
+function utf8Len(b) {
+  if (b >= 0xc2 && b <= 0xdf) return 2;
+  if (b >= 0xe0 && b <= 0xef) return 3;
+  if (b >= 0xf0 && b <= 0xf4) return 4;
+  return 0;
+}
+
+/// Display-form decode for the debug mirror (human eyes only; MCP/backend
+/// keep raw decoded text). Walks the raw bytes: ASCII stays as-is, control
+/// chars become control pictures (␀..␟, ␡), valid UTF-8/GBK sequences are
+/// decoded to text, and bytes that form no valid sequence render as CP437
+/// symbols. Pure frontend concern — nothing here feeds the terminal or MCP.
+export function decodeDisplay(bytes, encoding) {
+  const gbk = encoding === 'gbk';
+  const dec = new TextDecoder(gbk ? 'gbk' : 'utf-8');
+  const u8 = bytes instanceof Uint8Array ? bytes : Uint8Array.from(bytes);
+  let out = '';
+  let i = 0;
+  while (i < u8.length) {
+    const b = u8[i];
+    if (b < 0x80) {
+      if (b < 0x20) {
+        out += String.fromCodePoint(0x2400 + b);
+      } else if (b === 0x7f) {
+        out += '\u2421';
+      } else {
+        out += String.fromCharCode(b);
+      }
+      i += 1;
+      continue;
+    }
+    let seqLen = 0;
+    if (gbk) {
+      if (b >= 0x81 && b <= 0xfe && i + 1 < u8.length) {
+        const t = u8[i + 1];
+        if ((t >= 0x40 && t <= 0x7e) || (t >= 0x80 && t <= 0xfe)) seqLen = 2;
+      }
+    } else {
+      seqLen = utf8Len(b);
+      if (seqLen > 0 && i + seqLen <= u8.length) {
+        for (let k = 1; k < seqLen; k++) {
+          const c = u8[i + k];
+          if (c < 0x80 || c > 0xbf) { seqLen = 0; break; }
+        }
+      }
+    }
+    if (seqLen > 0) {
+      const s = dec.decode(u8.subarray(i, i + seqLen));
+      if (!s.includes('\uFFFD')) {
+        out += s;
+        i += seqLen;
+        continue;
+      }
+    }
+    out += CP437[b - 0x80];
+    i += 1;
+  }
+  return out;
+}
+
 export function timestamp() {
   const d = new Date();
   const h = String(d.getHours()).padStart(2, '0');

tests/symbolize-controls.test.js

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+import { decodeDisplay } from '../src/js/utils.js';
+
+const enc = (s) => Array.from(new TextEncoder().encode(s));
+
+describe('decodeDisplay — 调试镜像显示形态（前端专用）', () => {
+  it('keeps ASCII text as-is', () => {
+    expect(decodeDisplay(enc('hello 123'), 'utf-8')).toBe('hello 123');
+  });
+
+  it('maps control chars to control pictures', () => {
+    expect(decodeDisplay(enc('\x1b[32m'), 'utf-8')).toBe('\u241b[32m');
+    expect(decodeDisplay(enc('\r\n'), 'utf-8')).toBe('\u240d\u240a');
+    expect(decodeDisplay(enc('\x00'), 'utf-8')).toBe('\u2400');
+    expect(decodeDisplay(enc('\x7f'), 'utf-8')).toBe('\u2421');
+  });
+
+  it('decodes valid UTF-8 multibyte sequences', () => {
+    expect(decodeDisplay(enc('中文'), 'utf-8')).toBe('中文');
+    expect(decodeDisplay(enc('a中b'), 'utf-8')).toBe('a中b');
+  });
+
+  it('symbolizes invalid high bytes with CP437', () => {
+    expect(decodeDisplay([0x41, 0x80, 0xb3, 0xff], 'utf-8')).toBe('AÇ│\u00a0');
+    // invalid continuation after a valid lead is symbolized per byte
+    expect(decodeDisplay([0xe4, 0x41], 'utf-8')).toBe('ΣA');
+  });
+
+  it('decodes GBK text and symbolizes residual bytes', () => {
+    // 中文 in GBK = D6 D0 CE C4; plus a lone high byte with no trail
+    expect(decodeDisplay([0xd6, 0xd0, 0xce, 0xc4, 0x80], 'gbk')).toBe('中文Ç');
+  });
+
+  it('symbolizes GBK lead without valid trail', () => {
+    expect(decodeDisplay([0x81, 0x20], 'gbk')).toBe('ü ');
+  });
+});