@rooode/dsh-plugin-preview 0.1.3 → 0.1.5

package/lib/client.js

@@ -33,8 +33,13 @@
     const SUPPORTED_EXTENSIONS = new Set([
       '.md', '.markdown', '.mdown', '.mkdn', '.mdwn',
       '.txt', '.log', '.json', '.yaml', '.yml',
-      '.js', '.jsx', '.ts', '.tsx', '.html', '.css', '.scss',
-      '.py', '.sh', '.bash', '.ps1', '.sql', '.toml', '.xml'
+      '.js', '.jsx', '.ts', '.tsx', '.html', '.css', '.scss', '.less',
+      '.java', '.jav', '.jsp',
+      '.cpp', '.c', '.cc', '.cxx', '.h', '.hpp', '.hxx', '.inl',
+      '.py', '.pyw', '.ipynb',
+      '.go', '.rs', '.cs', '.kt',
+      '.sh', '.bash', '.zsh', '.ps1', '.bat', '.cmd',
+      '.sql', '.toml', '.xml', '.svg', '.ini', '.env', '.properties'
     ]);
 
     // =========================================================================
@@ -172,13 +177,49 @@
       if (ext === '.yaml' || ext === '.yml' || ext === '.toml' || ext === '.ini') return { icon: '⚙️', color: '#f97316' };
       if (ext === '.html' || ext === '.htm') return { icon: '🌐', color: '#ef4444' };
       if (ext === '.css' || ext === '.scss' || ext === '.less') return { icon: '#', color: '#06b6d4' };
-      if (ext === '.py') return { icon: '🐍', color: '#38bdf8' };
-      if (ext === '.sh' || ext === '.bash' || ext === '.ps1') return { icon: '⌨️', color: '#8b5cf6' };
+      if (ext === '.java' || ext === '.jav') return { icon: '☕', color: '#ea580c' };
+      if (['.cpp', '.cc', '.cxx', '.hpp', '.hxx'].includes(ext)) return { icon: 'C++', color: '#0284c7' };
+      if (ext === '.c' || ext === '.h') return { icon: 'C', color: '#64748b' };
+      if (ext === '.py' || ext === '.pyw') return { icon: '🐍', color: '#38bdf8' };
+      if (ext === '.go') return { icon: 'GO', color: '#00add8' };
+      if (ext === '.rs') return { icon: '🦀', color: '#ea580c' };
+      if (ext === '.cs') return { icon: 'C#', color: '#a855f7' };
+      if (ext === '.kt') return { icon: 'KT', color: '#7c3aed' };
+      if (ext === '.sh' || ext === '.bash' || ext === '.ps1' || ext === '.zsh') return { icon: '⌨️', color: '#8b5cf6' };
       if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'].includes(ext)) return { icon: '🖼️', color: '#ec4899' };
       if (ext === '.log' || ext === '.txt') return { icon: '📄', color: '#64748b' };
       return { icon: '📄', color: '#94a3b8' };
     }
 
+    
+    function getFileTypeCategory(filePath) {
+      if (!filePath) return 'text';
+      const ext = getFileExtension(filePath).toLowerCase();
+      if (['.md', '.markdown', '.mdown', '.mkdn', '.mdwn'].includes(ext)) return 'markdown';
+      if (['.json', '.jsonc', '.json5', '.geojson', '.lock'].includes(ext)) return 'json';
+      if (['.yaml', '.yml'].includes(ext)) return 'yaml';
+      if (['.js', '.jsx', '.mjs', '.cjs', '.ts', '.tsx', '.mts', '.cts'].includes(ext)) return 'javascript';
+      if (['.java', '.jav', '.jsp'].includes(ext)) return 'java';
+      if (['.cpp', '.c', '.cc', '.cxx', '.h', '.hpp', '.hxx', '.inl'].includes(ext)) return 'cpp';
+      if (['.py', '.pyw', '.ipynb'].includes(ext)) return 'python';
+      if (['.go'].includes(ext)) return 'go';
+      if (['.rs'].includes(ext)) return 'rust';
+      if (['.cs'].includes(ext)) return 'csharp';
+      if (['.html', '.htm', '.svg', '.xml'].includes(ext)) return 'markup';
+      if (['.css', '.scss', '.less', '.sass'].includes(ext)) return 'css';
+      if (['.sh', '.bash', '.zsh', '.ps1', '.bat', '.cmd'].includes(ext)) return 'shell';
+      if (['.sql'].includes(ext)) return 'sql';
+      if (['.toml', '.ini', '.env', '.properties', '.conf', '.cfg', '.gitignore', '.gitattributes', '.editorconfig'].includes(ext)) return 'config';
+      return 'text';
+    }
+
+    function getDefaultViewMode(category) {
+      if (category === 'markdown') return 'preview';
+      if (category === 'json') return 'json-tree';
+      if (category === 'yaml') return 'code';
+      return 'code';
+    }
+
     function getCurrentWorkspaceRoot() {
       if (clientCtx && clientCtx.workspaces) {
         try {
@@ -248,12 +289,15 @@
         globalActiveTabId = globalTabs[existingIndex].id;
         globalTabs[existingIndex].lastActiveAt = Date.now();
       } else {
+        const category = getFileTypeCategory(fullPath);
+        const defaultMode = getDefaultViewMode(category);
         const newTab = {
           id: tabId,
           filePath: fullPath,
           title: fileName,
           extension: ext,
-          viewMode: options.viewMode || 'preview',
+          category: category,
+          viewMode: options.viewMode || defaultMode,
           pinned: false,
           createdAt: Date.now(),
           lastActiveAt: Date.now(),
@@ -1053,10 +1097,961 @@
     }
 
     // =========================================================================
+    
+    // =========================================================================
+    // Multi-Language Syntax Highlighting & Tokenizers (Single-Pass Safe)
+    // =========================================================================
+    function highlightJSON(jsonStr) {
+      if (!jsonStr) return '';
+      const regex = /("(?:\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?|[{}\[\],:])/g;
+      let lastIndex = 0;
+      let out = '';
+      let match;
+
+      while ((match = regex.exec(jsonStr)) !== null) {
+        const raw = match[0];
+        const index = match.index;
+        if (index > lastIndex) {
+          out += escapeHtml(jsonStr.slice(lastIndex, index));
+        }
+        lastIndex = regex.lastIndex;
+
+        if (raw.startsWith('"')) {
+          if (raw.endsWith(':')) {
+            const keyText = raw.slice(0, -1).trim();
+            out += '<span class="tok-key">' + escapeHtml(keyText) + '</span>:';
+          } else {
+            out += '<span class="tok-string">' + escapeHtml(raw) + '</span>';
+          }
+        } else if (raw === 'true' || raw === 'false') {
+          out += '<span class="tok-boolean">' + raw + '</span>';
+        } else if (raw === 'null') {
+          out += '<span class="tok-null">' + raw + '</span>';
+        } else if (/^-?\d/.test(raw)) {
+          out += '<span class="tok-number">' + raw + '</span>';
+        } else if (/[{}\[\]]/.test(raw)) {
+          out += '<span class="tok-bracket">' + escapeHtml(raw) + '</span>';
+        } else if (/[:,]/.test(raw)) {
+          out += '<span class="tok-punctuation">' + raw + '</span>';
+        } else {
+          out += escapeHtml(raw);
+        }
+      }
+
+      if (lastIndex < jsonStr.length) {
+        out += escapeHtml(jsonStr.slice(lastIndex));
+      }
+      return out;
+    }
+
+    function highlightYAML(yamlStr) {
+      if (!yamlStr) return '';
+      const lines = yamlStr.split('\n');
+      return lines.map(line => {
+        const commentIdx = line.indexOf('#');
+        let mainPart = line;
+        let commentPart = '';
+        if (commentIdx !== -1) {
+          mainPart = line.slice(0, commentIdx);
+          commentPart = '<span class="tok-comment">' + escapeHtml(line.slice(commentIdx)) + '</span>';
+        }
+
+        let highlightedMain = '';
+        const kvMatch = mainPart.match(/^(\s*-\s+)?([a-zA-Z0-9_\-./@$]+)(\s*:\s*)(.*)$/);
+        if (kvMatch) {
+          const prefix = kvMatch[1] ? '<span class="tok-operator">' + escapeHtml(kvMatch[1]) + '</span>' : '';
+          const key = '<span class="tok-key">' + escapeHtml(kvMatch[2]) + '</span>';
+          const colon = '<span class="tok-punctuation">' + escapeHtml(kvMatch[3]) + '</span>';
+          let val = kvMatch[4];
+          const trimmedVal = val.trim();
+          let valHtml = escapeHtml(val);
+          if (/^(true|false|yes|no|on|off)$/i.test(trimmedVal)) {
+            valHtml = '<span class="tok-boolean">' + escapeHtml(val) + '</span>';
+          } else if (/^(null|~)$/i.test(trimmedVal)) {
+            valHtml = '<span class="tok-null">' + escapeHtml(val) + '</span>';
+          } else if (/^-?\d+(\.\d+)?$/.test(trimmedVal)) {
+            valHtml = '<span class="tok-number">' + escapeHtml(val) + '</span>';
+          } else if (/^["'].*["']$/.test(trimmedVal)) {
+            valHtml = '<span class="tok-string">' + escapeHtml(val) + '</span>';
+          } else if (trimmedVal.startsWith('&') || trimmedVal.startsWith('*')) {
+            valHtml = '<span class="tok-type">' + escapeHtml(val) + '</span>';
+          }
+          highlightedMain = prefix + key + colon + valHtml;
+        } else {
+          const bulletMatch = mainPart.match(/^(\s*-\s+)(.*)$/);
+          if (bulletMatch) {
+            highlightedMain = '<span class="tok-operator">' + escapeHtml(bulletMatch[1]) + '</span>' + escapeHtml(bulletMatch[2]);
+          } else {
+            highlightedMain = escapeHtml(mainPart);
+          }
+        }
+        return highlightedMain + commentPart;
+      }).join('\n');
+    }
+
+    function highlightJS(code) {
+      if (!code) return '';
+      const keywords = new Set([
+        'const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'do',
+        'switch', 'case', 'break', 'continue', 'default', 'new', 'delete', 'typeof', 'instanceof',
+        'void', 'yield', 'await', 'async', 'try', 'catch', 'finally', 'throw', 'class',
+        'extends', 'super', 'this', 'import', 'export', 'from', 'as', 'type', 'interface',
+        'enum', 'implements', 'declare', 'namespace', 'public', 'private', 'protected',
+        'readonly', 'static', 'abstract', 'get', 'set', 'of', 'in', 'debugger', 'constructor'
+      ]);
+      const types = new Set([
+        'Promise', 'Array', 'Object', 'String', 'Number', 'Boolean', 'Map', 'Set', 'WeakMap',
+        'WeakSet', 'JSON', 'Math', 'RegExp', 'Date', 'Error', 'Symbol', 'React', 'ReactDOM',
+        'null', 'undefined', 'true', 'false', 'any', 'unknown', 'never', 'void', 'string',
+        'number', 'boolean', 'bigint', 'Record', 'Partial', 'Required', 'Pick', 'Omit'
+      ]);
+
+      const tokenRegex = /(\/\*[\s\S]*?\*\/|\/\/.*$|`(?:\[\s\S]|[^`\])*`|"(?:\\[\s\S]|[^"\\])*"|'(?:\\[\s\S]|[^'\\])*'|\b(?:0x[0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?n?)\b|\b[a-zA-Z_$][a-zA-Z0-9_$]*\b|=>|===|!==|<=|>=|&&|\|\||\?\?|\?\.|[+\-*/%=!&|^~<>?:;,{}()\[\].])/gm;
+
+      let lastIndex = 0;
+      let out = '';
+      let match;
+
+      while ((match = tokenRegex.exec(code)) !== null) {
+        const raw = match[0];
+        const index = match.index;
+        if (index > lastIndex) {
+          out += escapeHtml(code.slice(lastIndex, index));
+        }
+        lastIndex = tokenRegex.lastIndex;
+
+        if (raw.startsWith('/*') || raw.startsWith('//')) {
+          out += '<span class="tok-comment">' + escapeHtml(raw) + '</span>';
+        } else if (raw.startsWith('`') || raw.startsWith('"') || raw.startsWith("'")) {
+          out += '<span class="tok-string">' + escapeHtml(raw) + '</span>';
+        } else if (/^\d|^0x/.test(raw)) {
+          out += '<span class="tok-number">' + escapeHtml(raw) + '</span>';
+        } else if (/^[a-zA-Z_$]/.test(raw)) {
+          if (keywords.has(raw)) {
+            out += '<span class="tok-keyword">' + escapeHtml(raw) + '</span>';
+          } else if (types.has(raw)) {
+            out += '<span class="tok-type">' + escapeHtml(raw) + '</span>';
+          } else {
+            const remainder = code.slice(lastIndex);
+            if (/^\s*\(/.test(remainder)) {
+              out += '<span class="tok-func">' + escapeHtml(raw) + '</span>';
+            } else {
+              out += escapeHtml(raw);
+            }
+          }
+        } else if (/^(=>|===|!==|<=|>=|&&|\|\||\?\?|\?\.|[+\-*/%=!&|^~<>])$/.test(raw)) {
+          out += '<span class="tok-operator">' + escapeHtml(raw) + '</span>';
+        } else if (/^[{}()\[\]]$/.test(raw)) {
+          out += '<span class="tok-bracket">' + escapeHtml(raw) + '</span>';
+        } else if (/^[,;:?]$/.test(raw)) {
+          out += '<span class="tok-punctuation">' + escapeHtml(raw) + '</span>';
+        } else {
+          out += escapeHtml(raw);
+        }
+      }
+
+      if (lastIndex < code.length) {
+        out += escapeHtml(code.slice(lastIndex));
+      }
+      return out;
+    }
+
+    function highlightJava(code) {
+      if (!code) return '';
+      const keywords = new Set([
+        'public', 'private', 'protected', 'class', 'interface', 'enum', 'record', 'extends',
+        'implements', 'static', 'final', 'abstract', 'void', 'return', 'if', 'else', 'for',
+        'while', 'do', 'switch', 'case', 'break', 'continue', 'default', 'new', 'this', 'super',
+        'try', 'catch', 'finally', 'throw', 'throws', 'import', 'package', 'synchronized',
+        'volatile', 'transient', 'native', 'strictfp', 'instanceof', 'assert', 'yield', 'sealed',
+        'permits', 'var', 'const', 'goto'
+      ]);
+      const types = new Set([
+        'int', 'long', 'short', 'byte', 'float', 'double', 'boolean', 'char', 'void',
+        'String', 'Object', 'Integer', 'Long', 'Boolean', 'Double', 'Float', 'Byte', 'Short', 'Character',
+        'List', 'Map', 'Set', 'ArrayList', 'HashMap', 'HashSet', 'LinkedList', 'TreeMap', 'TreeSet',
+        'Optional', 'Stream', 'Arrays', 'Collections', 'System', 'Thread', 'Exception', 'RuntimeException',
+        'Throwable', 'Error', 'Class', 'StringBuilder', 'StringBuffer', 'CompletableFuture', 'Future',
+        'null', 'true', 'false'
+      ]);
+
+      const tokenRegex = /(\/\*[\s\S]*?\*\/|\/\/.*$|"""[\s\S]*?"""|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|@[a-zA-Z0-9_.]+|\b(?:0x[0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?[fFdDlL]?)\b|\b[a-zA-Z_$][a-zA-Z0-9_$]*\b|->|::|==|!=|<=|>=|&&|\|\||\+\+|--|\+=|-=|\*=|\/=|%=|&=|\|=|\^=|>>>=|>>=|<<=|[+\-*/%=!&|^~<>?:;,{}()\[\].])/gm;
+
+      let lastIndex = 0;
+      let out = '';
+      let match;
+
+      while ((match = tokenRegex.exec(code)) !== null) {
+        const raw = match[0];
+        const index = match.index;
+        if (index > lastIndex) {
+          out += escapeHtml(code.slice(lastIndex, index));
+        }
+        lastIndex = tokenRegex.lastIndex;
+
+        if (raw.startsWith('/*') || raw.startsWith('//')) {
+          out += '<span class="tok-comment">' + escapeHtml(raw) + '</span>';
+        } else if (raw.startsWith('"""') || raw.startsWith('"') || raw.startsWith("'")) {
+          out += '<span class="tok-string">' + escapeHtml(raw) + '</span>';
+        } else if (raw.startsWith('@')) {
+          out += '<span class="tok-attr">' + escapeHtml(raw) + '</span>';
+        } else if (/^\d|^0x/.test(raw)) {
+          out += '<span class="tok-number">' + escapeHtml(raw) + '</span>';
+        } else if (/^[a-zA-Z_$]/.test(raw)) {
+          if (keywords.has(raw)) {
+            out += '<span class="tok-keyword">' + escapeHtml(raw) + '</span>';
+          } else if (types.has(raw)) {
+            out += '<span class="tok-type">' + escapeHtml(raw) + '</span>';
+          } else {
+            const remainder = code.slice(lastIndex);
+            if (/^\s*\(/.test(remainder)) {
+              out += '<span class="tok-func">' + escapeHtml(raw) + '</span>';
+            } else {
+              out += escapeHtml(raw);
+            }
+          }
+        } else if (/^(->|::|==|!=|<=|>=|&&|\|\||\+\+|--|\+=|-=|\*=|\/=|%=|&=|\|=|\^=|>>>=|>>=|<<=|[+\-*/%=!&|^~<>])$/.test(raw)) {
+          out += '<span class="tok-operator">' + escapeHtml(raw) + '</span>';
+        } else if (/^[{}()\[\]]$/.test(raw)) {
+          out += '<span class="tok-bracket">' + escapeHtml(raw) + '</span>';
+        } else if (/^[,;:?]$/.test(raw)) {
+          out += '<span class="tok-punctuation">' + escapeHtml(raw) + '</span>';
+        } else {
+          out += escapeHtml(raw);
+        }
+      }
+
+      if (lastIndex < code.length) {
+        out += escapeHtml(code.slice(lastIndex));
+      }
+      return out;
+    }
+
+    function highlightCpp(code) {
+      if (!code) return '';
+      const keywords = new Set([
+        'class', 'struct', 'union', 'enum', 'template', 'typename', 'namespace', 'using',
+        'typedef', 'public', 'private', 'protected', 'virtual', 'override', 'final', 'const',
+        'constexpr', 'consteval', 'constinit', 'static', 'inline', 'auto', 'void', 'return',
+        'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'break', 'continue', 'default',
+        'new', 'delete', 'this', 'try', 'catch', 'throw', 'noexcept', 'explicit', 'friend',
+        'mutable', 'volatile', 'concept', 'requires', 'co_await', 'co_yield', 'co_return',
+        'decltype', 'sizeof', 'alignas', 'alignof', 'static_cast', 'dynamic_cast',
+        'reinterpret_cast', 'const_cast', 'operator', 'export', 'import', 'module'
+      ]);
+      const types = new Set([
+        'int', 'long', 'short', 'char', 'float', 'double', 'bool', 'void', 'wchar_t', 'char8_t',
+        'char16_t', 'char32_t', 'size_t', 'int8_t', 'int16_t', 'int32_t', 'int64_t',
+        'uint8_t', 'uint16_t', 'uint32_t', 'uint64_t', 'nullptr', 'true', 'false',
+        'string', 'wstring', 'vector', 'map', 'unordered_map', 'set', 'unordered_set',
+        'pair', 'tuple', 'unique_ptr', 'shared_ptr', 'weak_ptr', 'make_unique', 'make_shared',
+        'std', 'cout', 'cin', 'cerr', 'endl', 'array', 'deque', 'list', 'queue', 'stack'
+      ]);
+
+      const tokenRegex = /(\/\*[\s\S]*?\*\/|\/\/.*$|#(?:include|define|ifdef|ifndef|endif|if|else|elif|pragma|undef|error)\b.*$|R"\(.*?\)"|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\b(?:0x[0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?[uUlLfF]?)\b|\b[a-zA-Z_][a-zA-Z0-9_]*\b|::|->\*|->|==|!=|<=|>=|<=>|&&|\|\||\+\+|--|\+=|-=|\*=|\/=|%=|&=|\|=|\^=|>>=|<<=|<<|>>|[+\-*/%=!&|^~<>?:;,{}()\[\].])/gm;
+
+      let lastIndex = 0;
+      let out = '';
+      let match;
+
+      while ((match = tokenRegex.exec(code)) !== null) {
+        const raw = match[0];
+        const index = match.index;
+        if (index > lastIndex) {
+          out += escapeHtml(code.slice(lastIndex, index));
+        }
+        lastIndex = tokenRegex.lastIndex;
+
+        if (raw.startsWith('/*') || raw.startsWith('//')) {
+          out += '<span class="tok-comment">' + escapeHtml(raw) + '</span>';
+        } else if (raw.startsWith('#')) {
+          const spaceIdx = raw.indexOf(' ');
+          if (spaceIdx !== -1) {
+            const dir = raw.slice(0, spaceIdx);
+            const rest = raw.slice(spaceIdx);
+            out += '<span class="tok-keyword">' + escapeHtml(dir) + '</span><span class="tok-string">' + escapeHtml(rest) + '</span>';
+          } else {
+            out += '<span class="tok-keyword">' + escapeHtml(raw) + '</span>';
+          }
+        } else if (raw.startsWith('R"') || raw.startsWith('"') || raw.startsWith("'")) {
+          out += '<span class="tok-string">' + escapeHtml(raw) + '</span>';
+        } else if (/^\d|^0x/.test(raw)) {
+          out += '<span class="tok-number">' + escapeHtml(raw) + '</span>';
+        } else if (/^[a-zA-Z_]/.test(raw)) {
+          if (keywords.has(raw)) {
+            out += '<span class="tok-keyword">' + escapeHtml(raw) + '</span>';
+          } else if (types.has(raw)) {
+            out += '<span class="tok-type">' + escapeHtml(raw) + '</span>';
+          } else {
+            const remainder = code.slice(lastIndex);
+            if (/^\s*\(/.test(remainder)) {
+              out += '<span class="tok-func">' + escapeHtml(raw) + '</span>';
+            } else {
+              out += escapeHtml(raw);
+            }
+          }
+        } else if (/^(::|->\*|->|==|!=|<=|>=|<=>|&&|\|\||\+\+|--|\+=|-=|\*=|\/=|%=|&=|\|=|\^=|>>=|<<=|<<|>>|[+\-*/%=!&|^~<>])$/.test(raw)) {
+          out += '<span class="tok-operator">' + escapeHtml(raw) + '</span>';
+        } else if (/^[{}()\[\]]$/.test(raw)) {
+          out += '<span class="tok-bracket">' + escapeHtml(raw) + '</span>';
+        } else if (/^[,;:?]$/.test(raw)) {
+          out += '<span class="tok-punctuation">' + escapeHtml(raw) + '</span>';
+        } else {
+          out += escapeHtml(raw);
+        }
+      }
+
+      if (lastIndex < code.length) {
+        out += escapeHtml(code.slice(lastIndex));
+      }
+      return out;
+    }
+
+    function highlightPython(code) {
+      if (!code) return '';
+      const pyKeywords = new Set([
+        'def', 'class', 'import', 'from', 'return', 'if', 'elif', 'else', 'for', 'while',
+        'try', 'except', 'finally', 'raise', 'with', 'as', 'lambda', 'pass', 'yield',
+        'async', 'await', 'global', 'nonlocal', 'assert', 'del', 'in', 'is', 'not', 'and', 'or',
+        'match', 'case'
+      ]);
+      const pyBuiltins = new Set([
+        'True', 'False', 'None', 'self', 'cls', 'print', 'len', 'range', 'dict', 'list',
+        'set', 'tuple', 'str', 'int', 'float', 'bool', 'type', 'isinstance', 'enumerate', 'zip',
+        'super', 'sum', 'min', 'max', 'any', 'all', 'open', 'map', 'filter'
+      ]);
+
+      const tokenRegex = /("""[\s\S]*?"""|'''[\s\S]*?'''|#.*$|@[a-zA-Z0-9_.]+|f?"(?:\\[\s\S]|[^"\\])*"|f?'(?:\\[\s\S]|[^'\\])*'|\b\d+(?:\.\d+)?\b|\b[a-zA-Z_][a-zA-Z0-9_]*\b|==|!=|<=|>=|\+=|-=|\*=|\/=|->|[+\-*/%=&|^~<>?:;,{}()\[\].])/gm;
+
+      let lastIndex = 0;
+      let out = '';
+      let match;
+
+      while ((match = tokenRegex.exec(code)) !== null) {
+        const raw = match[0];
+        const index = match.index;
+        if (index > lastIndex) {
+          out += escapeHtml(code.slice(lastIndex, index));
+        }
+        lastIndex = tokenRegex.lastIndex;
+
+        if (raw.startsWith('#')) {
+          out += '<span class="tok-comment">' + escapeHtml(raw) + '</span>';
+        } else if (raw.startsWith('"""') || raw.startsWith("'''") || raw.startsWith('"') || raw.startsWith("'") || raw.startsWith('f"') || raw.startsWith("f'")) {
+          out += '<span class="tok-string">' + escapeHtml(raw) + '</span>';
+        } else if (raw.startsWith('@')) {
+          out += '<span class="tok-attr">' + escapeHtml(raw) + '</span>';
+        } else if (/^\d/.test(raw)) {
+          out += '<span class="tok-number">' + escapeHtml(raw) + '</span>';
+        } else if (/^[a-zA-Z_]/.test(raw)) {
+          if (pyKeywords.has(raw)) {
+            out += '<span class="tok-keyword">' + escapeHtml(raw) + '</span>';
+          } else if (pyBuiltins.has(raw)) {
+            out += '<span class="tok-type">' + escapeHtml(raw) + '</span>';
+          } else {
+            const remainder = code.slice(lastIndex);
+            if (/^\s*\(/.test(remainder)) {
+              out += '<span class="tok-func">' + escapeHtml(raw) + '</span>';
+            } else {
+              out += escapeHtml(raw);
+            }
+          }
+        } else if (/^(==|!=|<=|>=|\+=|-=|\*=|\/=|->|[+\-*/%=&|^~<>])$/.test(raw)) {
+          out += '<span class="tok-operator">' + escapeHtml(raw) + '</span>';
+        } else if (/^[{}()\[\]]$/.test(raw)) {
+          out += '<span class="tok-bracket">' + escapeHtml(raw) + '</span>';
+        } else if (/^[,;:?]$/.test(raw)) {
+          out += '<span class="tok-punctuation">' + escapeHtml(raw) + '</span>';
+        } else {
+          out += escapeHtml(raw);
+        }
+      }
+
+      if (lastIndex < code.length) {
+        out += escapeHtml(code.slice(lastIndex));
+      }
+      return out;
+    }
+
+    function highlightHTML(code) {
+      if (!code) return '';
+      const tokenRegex = /(<!--[\s\S]*?-->|<\/?[a-zA-Z0-9\-:]+|(?:[a-zA-Z0-9\-:]+)=("[^"]*"|'[^']*')|\/?>)/g;
+      let lastIndex = 0;
+      let out = '';
+      let match;
+
+      while ((match = tokenRegex.exec(code)) !== null) {
+        const raw = match[0];
+        const index = match.index;
+        if (index > lastIndex) {
+          out += escapeHtml(code.slice(lastIndex, index));
+        }
+        lastIndex = tokenRegex.lastIndex;
+
+        if (raw.startsWith('<!--')) {
+          out += '<span class="tok-comment">' + escapeHtml(raw) + '</span>';
+        } else if (raw.startsWith('<')) {
+          out += '<span class="tok-bracket">&lt;</span><span class="tok-tag">' + escapeHtml(raw.slice(raw.startsWith('</') ? 2 : 1)) + '</span>';
+        } else if (raw.endsWith('>')) {
+          out += '<span class="tok-bracket">' + escapeHtml(raw) + '</span>';
+        } else if (raw.includes('=')) {
+          const eqIdx = raw.indexOf('=');
+          const attrName = raw.slice(0, eqIdx);
+          const attrVal = raw.slice(eqIdx + 1);
+          out += '<span class="tok-attr">' + escapeHtml(attrName) + '</span>=<span class="tok-string">' + escapeHtml(attrVal) + '</span>';
+        } else {
+          out += escapeHtml(raw);
+        }
+      }
+
+      if (lastIndex < code.length) {
+        out += escapeHtml(code.slice(lastIndex));
+      }
+      return out;
+    }
+
+    function highlightGenericCode(code, category) {
+      if (!code) return '';
+      if (category === 'sql') {
+        const sqlKeywords = /\b(SELECT|FROM|WHERE|INSERT|INTO|UPDATE|DELETE|JOIN|LEFT|RIGHT|INNER|OUTER|GROUP|BY|ORDER|HAVING|LIMIT|OFFSET|AS|ON|AND|OR|NOT|NULL|IS|CREATE|TABLE|DROP|ALTER|ADD|INDEX|PRIMARY|KEY)\b/gi;
+        return escapeHtml(code)
+          .replace(sqlKeywords, '<span class="tok-keyword">$1</span>')
+          .replace(/(--.*$)/gm, '<span class="tok-comment">$1</span>')
+          .replace(/('[^']*')/g, '<span class="tok-string">$1</span>');
+      }
+      if (category === 'go') {
+        const goKeywords = /\b(package|import|func|return|var|const|type|struct|interface|map|chan|go|defer|if|else|for|range|switch|case|default|select|break|continue|fallthrough)\b/g;
+        return escapeHtml(code)
+          .replace(/(\b(?:string|int|int64|int32|uint|uint64|byte|rune|bool|float32|float64|error|nil|true|false)\b)/g, '<span class="tok-type">$1</span>')
+          .replace(goKeywords, '<span class="tok-keyword">$1</span>')
+          .replace(/(\/\/.*$)/gm, '<span class="tok-comment">$1</span>')
+          .replace(/("(?:\\[\s\S]|[^"\\])*")/g, '<span class="tok-string">$1</span>');
+      }
+      if (category === 'rust') {
+        const rsKeywords = /\b(fn|let|mut|pub|struct|enum|impl|trait|type|use|mod|crate|return|if|else|match|loop|while|for|in|break|continue|async|await|where|unsafe|as|ref|move)\b/g;
+        return escapeHtml(code)
+          .replace(/(\b(?:i8|i16|i32|i64|i128|isize|u8|u16|u32|u64|u128|usize|f32|f64|bool|char|str|String|Vec|Option|Result|Some|None|Ok|Err|true|false)\b)/g, '<span class="tok-type">$1</span>')
+          .replace(rsKeywords, '<span class="tok-keyword">$1</span>')
+          .replace(/(\/\/.*$)/gm, '<span class="tok-comment">$1</span>')
+          .replace(/("(?:\\[\s\S]|[^"\\])*")/g, '<span class="tok-string">$1</span>');
+      }
+      const lines = code.split('\n');
+      return lines.map(line => {
+        const commentIdx = line.indexOf('#');
+        let mainPart = line;
+        let commentPart = '';
+        if (commentIdx !== -1) {
+          mainPart = line.slice(0, commentIdx);
+          commentPart = '<span class="tok-comment">' + escapeHtml(line.slice(commentIdx)) + '</span>';
+        }
+        let h = escapeHtml(mainPart);
+        h = h.replace(/^([a-zA-Z0-9_\-.]+)(\s*=\s*)(.*)$/, (m, k, eq, v) => {
+          return '<span class="tok-key">' + k + '</span>' + eq + '<span class="tok-string">' + v + '</span>';
+        });
+        h = h.replace(/(\$[a-zA-Z0-9_{}]+)/g, '<span class="tok-type">$1</span>');
+        h = h.replace(/\b(if|then|else|elif|fi|for|in|do|done|case|esac|echo|cd|export|npm|pnpm|node|git|curl)\b/g, '<span class="tok-keyword">$1</span>');
+        return h + commentPart;
+      }).join('\n');
+    }
+
+    function highlightCode(rawCode, category) {
+      if (!rawCode) return '';
+      if (category === 'json') return highlightJSON(rawCode);
+      if (category === 'yaml') return highlightYAML(rawCode);
+      if (category === 'javascript') return highlightJS(rawCode);
+      if (category === 'java') return highlightJava(rawCode);
+      if (category === 'cpp') return highlightCpp(rawCode);
+      if (category === 'python') return highlightPython(rawCode);
+      if (category === 'markup') return highlightHTML(rawCode);
+      if (category === 'css') return highlightCSS(rawCode);
+      if (category === 'shell' || category === 'config' || category === 'sql' || category === 'go' || category === 'rust' || category === 'csharp') return highlightGenericCode(rawCode, category);
+      return escapeHtml(rawCode);
+    }
+
+    // =========================================================================
+    // Lightweight YAML to JSON Recursive Parser
+    // =========================================================================
+    function parseYamlScalar(val) {
+      if (!val) return '';
+      const v = val.trim();
+      if (/^(true|yes|on)$/i.test(v)) return true;
+      if (/^(false|no|off)$/i.test(v)) return false;
+      if (/^(null|~)$/i.test(v)) return null;
+      if (/^-?\d+$/.test(v)) return parseInt(v, 10);
+      if (/^-?\d+\.\d+$/.test(v)) return parseFloat(v);
+      if ((v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))) {
+        return v.slice(1, -1);
+      }
+      return v;
+    }
+
+    function parseYamlToJson(yamlStr) {
+      if (!yamlStr) return { ok: true, data: {} };
+      try {
+        const rawLines = yamlStr.split('\n');
+        const lines = [];
+        for (const raw of rawLines) {
+          const cIdx = raw.indexOf('#');
+          const l = cIdx !== -1 ? raw.slice(0, cIdx) : raw;
+          if (l.trim()) {
+            lines.push({ indent: l.search(/\S/), text: l.trim() });
+          }
+        }
+        if (lines.length === 0) return { ok: true, data: {} };
+
+        let idx = 0;
+        function parseBlock(currentIndent) {
+          let isArr = false;
+          if (idx < lines.length && lines[idx].text.startsWith('- ')) {
+            isArr = true;
+          }
+          const container = isArr ? [] : {};
+
+          while (idx < lines.length) {
+            const line = lines[idx];
+            if (line.indent < currentIndent) break;
+            if (line.indent > currentIndent) break;
+
+            idx++;
+
+            if (isArr) {
+              if (line.text.startsWith('- ')) {
+                const itemText = line.text.slice(2).trim();
+                if (!itemText) {
+                  if (idx < lines.length && lines[idx].indent > line.indent) {
+                    container.push(parseBlock(lines[idx].indent));
+                  } else {
+                    container.push(null);
+                  }
+                } else if (itemText.includes(':')) {
+                  const colonPos = itemText.indexOf(':');
+                  const k = itemText.slice(0, colonPos).trim().replace(/^['"]|['"]$/g, '');
+                  const v = itemText.slice(colonPos + 1).trim();
+                  const obj = {};
+                  if (!v) {
+                    if (idx < lines.length && lines[idx].indent > line.indent) {
+                      obj[k] = parseBlock(lines[idx].indent);
+                    } else {
+                      obj[k] = {};
+                    }
+                  } else {
+                    obj[k] = parseYamlScalar(v);
+                  }
+                  while (idx < lines.length && lines[idx].indent === line.indent + 2 && !lines[idx].text.startsWith('- ')) {
+                    const nextLine = lines[idx++];
+                    const cPos = nextLine.text.indexOf(':');
+                    if (cPos !== -1) {
+                      const nk = nextLine.text.slice(0, cPos).trim().replace(/^['"]|['"]$/g, '');
+                      const nv = nextLine.text.slice(cPos + 1).trim();
+                      if (!nv && idx < lines.length && lines[idx].indent > nextLine.indent) {
+                        obj[nk] = parseBlock(lines[idx].indent);
+                      } else {
+                        obj[nk] = parseYamlScalar(nv);
+                      }
+                    }
+                  }
+                  container.push(obj);
+                } else {
+                  container.push(parseYamlScalar(itemText));
+                }
+              }
+            } else {
+              const colonPos = line.text.indexOf(':');
+              if (colonPos !== -1) {
+                const k = line.text.slice(0, colonPos).trim().replace(/^['"]|['"]$/g, '');
+                const v = line.text.slice(colonPos + 1).trim();
+                if (!v) {
+                  if (idx < lines.length && lines[idx].indent > line.indent) {
+                    container[k] = parseBlock(lines[idx].indent);
+                  } else {
+                    container[k] = {};
+                  }
+                } else {
+                  container[k] = parseYamlScalar(v);
+                }
+              }
+            }
+          }
+          return container;
+        }
+
+        const root = parseBlock(lines[0].indent);
+        return { ok: true, data: root };
+      } catch (err) {
+        return { ok: false, error: err.message };
+      }
+    }
+
+    // =========================================================================
+    // Code Symbol Outline Extractor
+    // =========================================================================
+    function extractCodeSymbols(content, category) {
+      if (!content) return [];
+      const lines = content.split('\n');
+      const symbols = [];
+
+      if (category === 'javascript') {
+        lines.forEach((line, idx) => {
+          const lineNum = idx + 1;
+          const trimmed = line.trim();
+          if (trimmed.startsWith('//') || trimmed.startsWith('/*') || trimmed.startsWith('*') || trimmed.startsWith('return ')) return;
+
+          const classMatch = trimmed.match(/\bclass\s+([a-zA-Z0-9_$]+)/);
+          if (classMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: classMatch[1], kind: 'class', line: lineNum, text: `🔷 class ${classMatch[1]}` });
+            return;
+          }
+
+          const funcMatch = trimmed.match(/\b(?:async\s+)?function\s*([a-zA-Z0-9_$]+)\s*\(/);
+          if (funcMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: funcMatch[1], kind: 'function', line: lineNum, text: `⚡ fn ${funcMatch[1]}()` });
+            return;
+          }
+
+          const arrowMatch = trimmed.match(/(?:const|let|var)\s+([a-zA-Z0-9_$]+)\s*=\s*(?:async\s*)?(?:\([^)]*\)|[a-zA-Z0-9_$]+)\s*=>/);
+          if (arrowMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: arrowMatch[1], kind: 'function', line: lineNum, text: `⚡ fn ${arrowMatch[1]}()` });
+            return;
+          }
+
+          const typeMatch = trimmed.match(/\b(?:interface|type|enum)\s+([a-zA-Z0-9_$]+)/);
+          if (typeMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: typeMatch[1], kind: 'type', line: lineNum, text: `🏷️ ${typeMatch[1]}` });
+            return;
+          }
+
+          if (trimmed.startsWith('export default')) {
+            symbols.push({ id: `line-${lineNum}`, name: 'default export', kind: 'export', line: lineNum, text: `📦 export default` });
+          }
+        });
+      } else if (category === 'java') {
+        lines.forEach((line, idx) => {
+          const lineNum = idx + 1;
+          const trimmed = line.trim();
+          if (trimmed.startsWith('//') || trimmed.startsWith('/*') || trimmed.startsWith('*') || trimmed.startsWith('throw ') || trimmed.startsWith('return ')) return;
+
+          const pkgMatch = trimmed.match(/^package\s+([a-zA-Z0-9_.]+);/);
+          if (pkgMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: pkgMatch[1], kind: 'package', line: lineNum, text: `📦 package ${pkgMatch[1]}` });
+            return;
+          }
+
+          const classMatch = trimmed.match(/\b(?:public|protected|private|static|final|abstract\s+)*(class|interface|enum|record)\s+([a-zA-Z0-9_]+)/);
+          if (classMatch) {
+            const typeIcon = classMatch[1] === 'interface' ? '🏷️' : classMatch[1] === 'enum' ? '🔢' : '🔷';
+            symbols.push({ id: `line-${lineNum}`, name: classMatch[2], kind: classMatch[1], line: lineNum, text: `${typeIcon} ${classMatch[1]} ${classMatch[2]}` });
+            return;
+          }
+
+          const methodMatch = trimmed.match(/^(?:@\w+\s+)*(?:public|protected|private|static|final|synchronized|abstract|default|native|\s)*(?:<[^>]+>\s+)?([a-zA-Z0-9_<>[],.\s]+(?:\s*\[\s*\])?\s+)?([a-zA-Z0-9_]+)\s*\([^)]*\)\s*(?:throws\s+[a-zA-Z0-9_,\s]+)?\s*\{?$/);
+          if (methodMatch) {
+            const name = methodMatch[2];
+            if (!['if', 'for', 'while', 'switch', 'catch', 'return', 'throw', 'new', 'this', 'super'].includes(name)) {
+              symbols.push({ id: `line-${lineNum}`, name, kind: 'method', line: lineNum, text: `⚡ ${name}()` });
+            }
+          }
+        });
+      } else if (category === 'cpp') {
+        lines.forEach((line, idx) => {
+          const lineNum = idx + 1;
+          const trimmed = line.trim();
+          if (trimmed.startsWith('//') || trimmed.startsWith('/*') || trimmed.startsWith('*') || trimmed.startsWith('#') || trimmed.startsWith('throw ') || trimmed.startsWith('return ')) return;
+
+          const nsMatch = trimmed.match(/^namespace\s+([a-zA-Z0-9_:]+)/);
+          if (nsMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: nsMatch[1], kind: 'namespace', line: lineNum, text: `📦 namespace ${nsMatch[1]}` });
+            return;
+          }
+
+          const classMatch = trimmed.match(/\b(class|struct|union|enum\s+class|enum)\s+([a-zA-Z0-9_]+)/);
+          if (classMatch && !trimmed.endsWith(';')) {
+            symbols.push({ id: `line-${lineNum}`, name: classMatch[2], kind: classMatch[1], line: lineNum, text: `🔷 ${classMatch[1]} ${classMatch[2]}` });
+            return;
+          }
+
+          const funcMatch = trimmed.match(/^(?:(?:inline|virtual|static|constexpr|const|explicit|friend|auto|[a-zA-Z0-9_:<>&*~]+)\s+)+([a-zA-Z0-9_~]+)\s*\([^)]*\)\s*(?:const|noexcept|override|final|\s)*\s*\{?$/);
+          if (funcMatch && !['if', 'for', 'while', 'switch', 'catch', 'return', 'else', 'sizeof', 'decltype'].includes(funcMatch[1])) {
+            symbols.push({ id: `line-${lineNum}`, name: funcMatch[1], kind: 'function', line: lineNum, text: `⚡ fn ${funcMatch[1]}()` });
+          }
+        });
+      } else if (category === 'python') {
+        lines.forEach((line, idx) => {
+          const lineNum = idx + 1;
+          const trimmed = line.trim();
+          if (trimmed.startsWith('#')) return;
+
+          const classMatch = trimmed.match(/^classs+([a-zA-Z0-9_]+)/);
+          if (classMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: classMatch[1], kind: 'class', line: lineNum, text: `🔷 class ${classMatch[1]}` });
+            return;
+          }
+          const funcMatch = line.match(/^(\s*)(?:async\s+)?defs+([a-zA-Z0-9_]+)/);
+          if (funcMatch) {
+            const prefix = funcMatch[1].length > 0 ? '  ' : '';
+            symbols.push({ id: `line-${lineNum}`, name: funcMatch[2], kind: 'function', line: lineNum, text: `${prefix}⚡ def ${funcMatch[2]}()` });
+          }
+        });
+      } else if (category === 'yaml') {
+        lines.forEach((line, idx) => {
+          const lineNum = idx + 1;
+          const topKeyMatch = line.match(/^([a-zA-Z0-9_\-./@$]+)\s*:/);
+          if (topKeyMatch && !line.startsWith('#')) {
+            symbols.push({ id: `line-${lineNum}`, name: topKeyMatch[1], kind: 'key', line: lineNum, text: `🔑 ${topKeyMatch[1]}` });
+          }
+        });
+      } else if (category === 'json') {
+        lines.forEach((line, idx) => {
+          const lineNum = idx + 1;
+          const keyMatch = line.match(/^\s{2}"([a-zA-Z0-9_\-./@$]+)"\s*:/);
+          if (keyMatch) {
+            symbols.push({ id: `line-${lineNum}`, name: keyMatch[1], kind: 'key', line: lineNum, text: `🔑 "${keyMatch[1]}"` });
+          }
+        });
+      }
+      return symbols;
+    }
+
+    // =========================================================================
+    // React Component: JSONTreeNode & JSONTreeInspector
+    // =========================================================================
+    function JSONTreeNode({ name, value, path, depth, isArrayItem, index, expandedKeys, onToggle, filterQuery, onCopy }) {
+      const isObject = value !== null && typeof value === 'object';
+      const isArray = Array.isArray(value);
+      const isExpanded = expandedKeys.has(path);
+
+      if (isObject) {
+        const keys = Object.keys(value);
+        const count = keys.length;
+        const typeLabel = isArray ? `Array(${count})` : `Object{${count}}`;
+
+        if (filterQuery) {
+          const matchSelf = (name && String(name).toLowerCase().includes(filterQuery)) || path.toLowerCase().includes(filterQuery);
+          let matchChild = false;
+          try { matchChild = JSON.stringify(value).toLowerCase().includes(filterQuery); } catch (e) {}
+          if (!matchSelf && !matchChild) return null;
+        }
+
+        const previewSummary = isArray
+          ? `[ ${count === 0 ? '' : '...'} ]`
+          : `{ ${keys.slice(0, 3).map(k => `${k}: ...`).join(', ')}${count > 3 ? ', ...' : ''} }`;
+
+        return h('div', { className: 'dsh-json-node-group' },
+          h('div', {
+            className: 'dsh-json-row dsh-json-row-expandable',
+            style: { paddingLeft: `${depth * 16 + 6}px` },
+            onClick: () => onToggle(path),
+          },
+            h('span', { className: `dsh-json-chevron ${isExpanded ? 'expanded' : ''}` }, isExpanded ? '▼' : '▶'),
+            name ? h('span', { className: 'dsh-json-key' }, isArrayItem ? `[${index}]` : `"${name}":`) : null,
+            h('span', { className: 'dsh-json-type-badge' }, typeLabel),
+            !isExpanded ? h('span', { className: 'dsh-json-preview' }, previewSummary) : null,
+            h('span', {
+              className: 'dsh-json-copy-btn',
+              title: `复制字段路径: ${path.replace(/^root\.?/, '')}`,
+              onClick: (e) => {
+                e.stopPropagation();
+                onCopy(path.replace(/^root\.?/, ''), '字段路径');
+              }
+            }, '📋')
+          ),
+          isExpanded ? h('div', { className: 'dsh-json-children' },
+            keys.map((k, i) => h(JSONTreeNode, {
+              key: k,
+              name: isArray ? null : k,
+              value: value[k],
+              path: `${path}.${k}`,
+              depth: depth + 1,
+              isArrayItem: isArray,
+              index: i,
+              expandedKeys,
+              onToggle,
+              filterQuery,
+              onCopy,
+            }))
+          ) : null
+        );
+      }
+
+      // Primitive Value
+      const valType = value === null ? 'null' : typeof value;
+      let valDisplay = String(value);
+      let valClass = `tok-${valType}`;
+
+      if (valType === 'string') {
+        valDisplay = `"${value}"`;
+        valClass = 'tok-string';
+      } else if (valType === 'number') {
+        valClass = 'tok-number';
+      } else if (valType === 'boolean') {
+        valClass = 'tok-boolean';
+      } else if (valType === 'null') {
+        valDisplay = 'null';
+        valClass = 'tok-null';
+      }
+
+      if (filterQuery) {
+        const matchName = name && String(name).toLowerCase().includes(filterQuery);
+        const matchVal = valDisplay.toLowerCase().includes(filterQuery);
+        if (!matchName && !matchVal) return null;
+      }
+
+      const isUrl = typeof value === 'string' && (value.startsWith('http://') || value.startsWith('https://'));
+
+      return h('div', {
+        className: 'dsh-json-row dsh-json-row-leaf',
+        style: { paddingLeft: `${depth * 16 + 22}px` },
+      },
+        name ? h('span', { className: 'dsh-json-key' }, isArrayItem ? `[${index}]:` : `"${name}":`) : null,
+        isUrl ? h('a', {
+          href: value,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+          className: 'dsh-json-link tok-string',
+          onClick: (e) => e.stopPropagation(),
+        }, valDisplay) : h('span', { className: valClass }, valDisplay),
+        h('span', {
+          className: 'dsh-json-copy-btn',
+          title: '复制值',
+          onClick: () => onCopy(String(value), '字段值')
+        }, '📋')
+      );
+    }
+
+    function JSONTreeInspector({ data, rawContent, onFormat, onMinify }) {
+      const [expandedKeys, setExpandedKeys] = useState(new Set(['root', 'root.scripts', 'root.dependencies', 'root.devDependencies']));
+      const [filterQuery, setFilterQuery] = useState('');
+
+      const toggleKey = (path) => {
+        setExpandedKeys(prev => {
+          const next = new Set(prev);
+          if (next.has(path)) next.delete(path);
+          else next.add(path);
+          return next;
+        });
+      };
+
+      const expandAll = () => {
+        const all = new Set();
+        const traverse = (val, p) => {
+          all.add(p);
+          if (val && typeof val === 'object') {
+            for (const k of Object.keys(val)) {
+              traverse(val[k], p ? `${p}.${k}` : k);
+            }
+          }
+        };
+        traverse(data, 'root');
+        setExpandedKeys(all);
+      };
+
+      const collapseAll = () => {
+        setExpandedKeys(new Set(['root']));
+      };
+
+      const handleCopy = (text, label) => {
+        navigator.clipboard.writeText(text).then(() => {
+          showToast(`已复制 ${label || '内容'}`, 'success');
+        });
+      };
+
+      return h('div', { className: 'dsh-json-inspector' },
+        h('div', { className: 'dsh-json-header' },
+          h('div', { className: 'dsh-json-search-box' },
+            h('span', { className: 'dsh-json-search-icon' }, '🔍'),
+            h('input', {
+              type: 'text',
+              placeholder: '过滤属性名或值...',
+              value: filterQuery,
+              onChange: (e) => setFilterQuery(e.target.value),
+              className: 'dsh-json-search-input',
+            }),
+            filterQuery ? h('button', {
+              className: 'dsh-search-clear-btn',
+              onClick: () => setFilterQuery(''),
+            }, '✕') : null
+          ),
+          h('div', { className: 'dsh-json-actions' },
+            h('button', { type: 'button', className: 'dsh-json-btn', onClick: expandAll, title: '展开所有层级' }, '📂 展开全部'),
+            h('button', { type: 'button', className: 'dsh-json-btn', onClick: collapseAll, title: '折叠到根节点' }, '📁 折叠全部'),
+            onFormat ? h('button', { type: 'button', className: 'dsh-json-btn', onClick: onFormat, title: '格式化并复制' }, '⚡ 格式化') : null,
+            onMinify ? h('button', { type: 'button', className: 'dsh-json-btn', onClick: onMinify, title: '压缩并复制' }, '🗜️ 压缩') : null
+          )
+        ),
+        h('div', { className: 'dsh-json-tree-body' },
+          h(JSONTreeNode, {
+            name: Array.isArray(data) ? 'Array' : 'Object',
+            value: data,
+            path: 'root',
+            depth: 0,
+            expandedKeys,
+            onToggle: toggleKey,
+            filterQuery: filterQuery.trim().toLowerCase(),
+            onCopy: handleCopy,
+          })
+        )
+      );
+    }
+
+    // =========================================================================
+    // React Component: CodeEditorView
+    // =========================================================================
+    function CodeEditorView({ content, category, isHighlighted = true, isWordWrap = true, searchQuery = '', onLineClick }) {
+      const lines = useMemo(() => (content ? content.split('\n') : []), [content]);
+
+      const highlightedHtml = useMemo(() => {
+        if (!content) return '';
+        if (!isHighlighted) {
+          let escaped = escapeHtml(content);
+          if (searchQuery.trim()) {
+            const q = escapeHtml(searchQuery.trim());
+            escaped = escaped.replace(new RegExp(`(${q})`, 'gi'), '<mark class="dsh-search-highlight">$1</mark>');
+          }
+          return escaped;
+        }
+        let html = highlightCode(content, category);
+        if (searchQuery.trim()) {
+          try {
+            const q = escapeHtml(searchQuery.trim());
+            const regex = new RegExp(`(${q})(?![^<]*>)`, 'gi');
+            html = html.replace(regex, '<mark class="dsh-search-highlight">$1</mark>');
+          } catch (e) {}
+        }
+        return html;
+      }, [content, category, isHighlighted, searchQuery]);
+
+      return h('div', { className: `dsh-code-editor-view ${isWordWrap ? 'word-wrap' : ''}` },
+        h('div', { className: 'dsh-code-gutter' },
+          lines.map((_, i) => h('div', {
+            key: i,
+            id: `line-gutter-${i + 1}`,
+            className: 'dsh-gutter-line',
+            onClick: () => onLineClick && onLineClick(i + 1),
+            title: `第 ${i + 1} 行 (点击定位)`
+          }, i + 1))
+        ),
+        h('div', { className: 'dsh-code-content' },
+          h('pre', { className: 'dsh-code-pre' },
+            h('code', {
+              className: `dsh-code-lang-${category}`,
+              dangerouslySetInnerHTML: { __html: highlightedHtml }
+            })
+          )
+        )
+      );
+    }
+
     // React Components: MarkdownPreviewView
     // =========================================================================
     function MarkdownPreviewView({ tab, fileInfo, isLoading, error, isTreeOpen, onToggleTree, onRefresh, onOpenNative, onReveal }) {
-      const [viewMode, setViewMode] = useState(tab.viewMode || 'preview');
+      const category = getFileTypeCategory(tab.filePath);
+      const defaultMode = getDefaultViewMode(category);
+      const [viewMode, setViewMode] = useState(tab.viewMode || defaultMode);
+
+      useEffect(() => {
+        const mode = tab.viewMode || getDefaultViewMode(getFileTypeCategory(tab.filePath));
+        setViewMode(mode);
+      }, [tab.id, tab.filePath, tab.viewMode]);
+      const [isWordWrap, setIsWordWrap] = useState(false);
       const [isTocOpen, setIsTocOpen] = useState(false);
       const [searchQuery, setSearchQuery] = useState('');
       const [isSearchOpen, setIsSearchOpen] = useState(false);
@@ -1064,10 +2059,35 @@
       const sourceRef = useRef(null);
 
       const content = fileInfo?.content || '';
-      const tocHeadings = useMemo(() => extractTocHeadings(content), [content]);
 
-      const renderedHtml = useMemo(() => {
-        if (!content) return '';
+      // Outline extraction: markdown headings for md, symbols for code/json/yaml
+      const outlineItems = useMemo(() => {
+        if (!content) return [];
+        if (category === 'markdown') {
+          return extractTocHeadings(content);
+        }
+        return extractCodeSymbols(content, category);
+      }, [content, category]);
+
+      // Parse JSON / YAML structure for tree mode
+      const parsedTreeData = useMemo(() => {
+        if (!content) return { ok: false, error: '空文件' };
+        if (category === 'json' || viewMode === 'json-tree') {
+          if (category === 'yaml') {
+            return parseYamlToJson(content);
+          }
+          try {
+            const data = JSON.parse(content);
+            return { ok: true, data };
+          } catch (e) {
+            return { ok: false, error: e.message };
+          }
+        }
+        return { ok: false };
+      }, [content, category, viewMode]);
+
+      const renderedMarkdownHtml = useMemo(() => {
+        if (!content || category !== 'markdown') return '';
         let html = renderMarkdownToHtml(content);
         if (searchQuery.trim()) {
           try {
@@ -1077,22 +2097,53 @@
           } catch (e) {}
         }
         return html;
-      }, [content, searchQuery]);
+      }, [content, category, searchQuery]);
 
       const handleCopyAll = () => {
         if (!content) return;
         navigator.clipboard.writeText(content).then(() => {
-          showToast('已复制文档全文到剪贴板', 'success');
+          showToast('已复制全文到剪贴板', 'success');
         }).catch(() => {
           showToast('复制失败', 'error');
         });
       };
 
-      const handleTocClick = (headingId) => {
-        if (!contentRef.current) return;
-        const el = contentRef.current.querySelector(`#${headingId}`);
-        if (el) {
-          el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const handleFormatJSON = () => {
+        try {
+          const obj = JSON.parse(content);
+          const formatted = JSON.stringify(obj, null, 2);
+          navigator.clipboard.writeText(formatted).then(() => {
+            showToast('已格式化 JSON 并复制到剪贴板', 'success');
+          });
+        } catch (e) {
+          showToast('JSON 语法错误，无法格式化', 'error');
+        }
+      };
+
+      const handleMinifyJSON = () => {
+        try {
+          const obj = JSON.parse(content);
+          const minified = JSON.stringify(obj);
+          navigator.clipboard.writeText(minified).then(() => {
+            showToast('已压缩为单行 JSON 并复制到剪贴板', 'success');
+          });
+        } catch (e) {
+          showToast('JSON 语法错误，无法压缩', 'error');
+        }
+      };
+
+      const handleOutlineClick = (item) => {
+        if (category === 'markdown') {
+          if (!contentRef.current) return;
+          const el = contentRef.current.querySelector(`#${item.id}`);
+          if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        } else {
+          const el = document.getElementById(`line-gutter-${item.line}`);
+          if (el) {
+            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            el.classList.add('dsh-line-highlight-flash');
+            setTimeout(() => el.classList.remove('dsh-line-highlight-flash'), 1800);
+          }
         }
       };
 
@@ -1113,44 +2164,128 @@
               title: isTreeOpen ? '隐藏工作区目录树 (Ctrl/Cmd+B)' : '展开工作区目录树 (Ctrl/Cmd+B)',
             }, '🗂️ 目录树'),
 
-            h('div', { className: 'dsh-preview-mode-group' },
-              h('button', {
-                type: 'button',
-                className: `dsh-preview-mode-btn ${viewMode === 'preview' ? 'active' : ''}`,
-                onClick: () => handleModeChange('preview'),
-                title: '渲染预览模式 (Markdown Render)',
-              }, '📖 预览'),
-              h('button', {
-                type: 'button',
-                className: `dsh-preview-mode-btn ${viewMode === 'source' ? 'active' : ''}`,
-                onClick: () => handleModeChange('source'),
-                title: '源码模式 (Raw Source)',
-              }, '📝 源码'),
-              h('button', {
-                type: 'button',
-                className: `dsh-preview-mode-btn ${viewMode === 'split' ? 'active' : ''}`,
-                onClick: () => handleModeChange('split'),
-                title: '分栏对比模式 (Split View)',
-              }, '🌓 分栏')
+            // Adaptive View Mode buttons based on File Category
+            category === 'markdown' ? (
+              h('div', { className: 'dsh-preview-mode-group' },
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'preview' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('preview'),
+                  title: 'Markdown 渲染预览 (Markdown Render)',
+                }, '📖 预览'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'source' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('source'),
+                  title: '源码高亮模式 (Source Code)',
+                }, '📝 源码'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'split' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('split'),
+                  title: '分栏对照模式 (Split View)',
+                }, '🌓 分栏')
+              )
+            ) : category === 'json' ? (
+              h('div', { className: 'dsh-preview-mode-group' },
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'json-tree' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('json-tree'),
+                  title: '可视化结构树检查器 (JSON Tree)',
+                }, '🌳 结构树'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'code' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('code'),
+                  title: '语法高亮代码 (Code View)',
+                }, '📜 代码'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'raw' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('raw'),
+                  title: '纯文本模式 (Raw Text)',
+                }, '📝 纯文本')
+              )
+            ) : category === 'yaml' ? (
+              h('div', { className: 'dsh-preview-mode-group' },
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'code' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('code'),
+                  title: 'YAML 语法高亮 (Syntax Highlighting)',
+                }, '📜 高亮'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'json-tree' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('json-tree'),
+                  title: '转为可视化结构树 (YAML as Tree)',
+                }, '🌳 结构树'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'raw' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('raw'),
+                  title: '纯文本模式 (Raw Text)',
+                }, '📝 纯文本')
+              )
+            ) : (
+              h('div', { className: 'dsh-preview-mode-group' },
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'code' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('code'),
+                  title: '语法高亮模式 (Syntax Highlighting)',
+                }, '📜 高亮'),
+                h('button', {
+                  type: 'button',
+                  className: `dsh-preview-mode-btn ${viewMode === 'raw' ? 'active' : ''}`,
+                  onClick: () => handleModeChange('raw'),
+                  title: '纯文本模式 (Raw Text)',
+                }, '📝 纯文本')
+              )
             ),
 
-            tocHeadings.length > 0 ? h('button', {
+            // Outline / TOC Button
+            outlineItems.length > 0 ? h('button', {
               type: 'button',
               className: `dsh-preview-tool-btn ${isTocOpen ? 'active' : ''}`,
               onClick: () => setIsTocOpen(!isTocOpen),
-              title: isTocOpen ? '隐藏目录大纲' : '显示目录大纲 (TOC)',
-            }, `📑 大纲 (${tocHeadings.length})`) : null,
+              title: isTocOpen ? '隐藏大纲侧栏' : '显示大纲侧栏',
+            }, category === 'markdown' ? `📑 大纲 (${outlineItems.length})` : `📑 符号 (${outlineItems.length})`) : null,
+
+            // Word Wrap Toggle
+            h('button', {
+              type: 'button',
+              className: `dsh-preview-tool-btn ${isWordWrap ? 'active' : ''}`,
+              onClick: () => setIsWordWrap(!isWordWrap),
+              title: isWordWrap ? '切换为不自动换行 (水平滚动)' : '切换为自动换行',
+            }, '↩️ 换行'),
 
+            // Search Button
             h('button', {
               type: 'button',
               className: `dsh-preview-tool-btn ${isSearchOpen ? 'active' : ''}`,
               onClick: () => setIsSearchOpen(!isSearchOpen),
-              title: '在文档中查找',
+              title: '在文件中搜索',
             }, '🔍 查找')
           ),
 
           // Right: Action buttons
           h('div', { className: 'dsh-preview-toolbar-right' },
+            category === 'json' ? h('button', {
+              type: 'button',
+              className: 'dsh-preview-tool-btn',
+              onClick: handleFormatJSON,
+              title: '格式化 JSON 并复制',
+            }, '⚡ 格式化') : null,
+
+            category === 'json' ? h('button', {
+              type: 'button',
+              className: 'dsh-preview-tool-btn',
+              onClick: handleMinifyJSON,
+              title: '单行压缩 JSON 并复制',
+            }, '🗜️ 压缩') : null,
+
             h('button', {
               type: 'button',
               className: 'dsh-preview-tool-btn',
@@ -1199,12 +2334,12 @@
           }, '✕') : null
         ) : null,
 
-        // Body area with optional TOC sidebar + Main content
+        // Body Layout
         h('div', { className: 'dsh-preview-body-layout' },
-          // TOC Sidebar
-          isTocOpen && tocHeadings.length > 0 ? h('div', { className: 'dsh-preview-toc-sidebar' },
+          // Outline / TOC Sidebar
+          isTocOpen && outlineItems.length > 0 ? h('div', { className: 'dsh-preview-toc-sidebar' },
             h('div', { className: 'dsh-preview-toc-header' },
-              h('span', { style: { fontWeight: 600, fontSize: 12 } }, '目录大纲 (TOC)'),
+              h('span', { style: { fontWeight: 600, fontSize: 12 } }, category === 'markdown' ? '目录大纲 (TOC)' : '符号与属性大纲'),
               h('button', {
                 type: 'button',
                 className: 'dsh-toc-close-btn',
@@ -1212,73 +2347,95 @@
               }, '✕')
             ),
             h('div', { className: 'dsh-preview-toc-list' },
-              tocHeadings.map((hItem, idx) =>
+              outlineItems.map((item, idx) =>
                 h('div', {
                   key: idx,
-                  className: `dsh-toc-item dsh-toc-level-${hItem.level}`,
-                  onClick: () => handleTocClick(hItem.id),
-                  title: hItem.text,
+                  className: `dsh-toc-item ${item.level ? `dsh-toc-level-${item.level}` : 'dsh-symbol-item'}`,
+                  onClick: () => handleOutlineClick(item),
+                  title: item.text,
                 },
-                  h('span', { className: 'dsh-toc-bullet' }, '•'),
-                  h('span', { className: 'dsh-toc-text' }, hItem.text)
+                  h('span', { className: 'dsh-toc-text' }, item.text)
                 )
               )
             )
           ) : null,
 
-          // Main Viewer
+          // Main View Content
           h('div', { className: 'dsh-preview-main-scroll' },
             isLoading ? h('div', { className: 'dsh-preview-loading' },
               h('div', { className: 'dsh-preview-spinner' }),
-              h('span', null, '正在加载文档内容...')
+              h('span', null, '正在加载文件内容...')
             ) : (error || fileInfo?.error) ? h('div', { className: 'dsh-preview-error-card' },
               h('div', { className: 'dsh-error-icon' }, '⚠️'),
-              h('div', { className: 'dsh-error-title' }, '读取文档失败'),
+              h('div', { className: 'dsh-error-title' }, '读取文件失败'),
               h('div', { className: 'dsh-error-desc' }, error || fileInfo?.error),
               h('div', { className: 'dsh-error-actions' },
                 h('button', { type: 'button', className: 'dsh-btn-retry', onClick: onRefresh }, '重试'),
                 h('button', { type: 'button', className: 'dsh-btn-native', onClick: () => onOpenNative(tab.filePath) }, '在外部打开')
               )
-            ) : viewMode === 'preview' ? (
-              // 1. Preview Mode
+            ) : viewMode === 'json-tree' ? (
+              // JSON / YAML Tree Inspector
+              parsedTreeData.ok ? (
+                h(JSONTreeInspector, {
+                  data: parsedTreeData.data,
+                  rawContent: content,
+                  onFormat: category === 'json' ? handleFormatJSON : null,
+                  onMinify: category === 'json' ? handleMinifyJSON : null,
+                })
+              ) : (
+                h('div', { className: 'dsh-json-parse-error' },
+                  h('div', { style: { fontSize: 28, marginBottom: 8 } }, '⚠️'),
+                  h('div', { style: { fontWeight: 600, fontSize: 14, marginBottom: 4 } }, '结构解析失败'),
+                  h('div', { style: { fontSize: 12, color: '#ef4444', marginBottom: 12 } }, parsedTreeData.error || '无法按树状结构解析'),
+                  h('button', {
+                    type: 'button',
+                    className: 'dsh-btn-native',
+                    onClick: () => handleModeChange('code')
+                  }, '切换到代码高亮模式查看')
+                )
+              )
+            ) : viewMode === 'preview' && category === 'markdown' ? (
+              // Markdown Render View
               h('div', {
                 ref: contentRef,
                 className: 'dsh-markdown-body',
-                dangerouslySetInnerHTML: { __html: renderedHtml },
+                dangerouslySetInnerHTML: { __html: renderedMarkdownHtml },
               })
-            ) : viewMode === 'source' ? (
-              // 2. Source Code Mode
-              h('div', { className: 'dsh-source-view' },
-                h('div', { className: 'dsh-source-line-numbers' },
-                  (content.split('\n') || []).map((_, i) => h('div', { key: i }, i + 1))
-                ),
-                h('pre', { ref: sourceRef, className: 'dsh-source-pre' },
-                  h('code', null, content)
-                )
-              )
-            ) : (
-              // 3. Split Mode
+            ) : viewMode === 'split' && category === 'markdown' ? (
+              // Markdown Split View
               h('div', { className: 'dsh-split-view' },
                 h('div', { className: 'dsh-split-pane dsh-split-source' },
-                  h('div', { className: 'dsh-split-pane-header' }, '📝 原始源码'),
-                  h('div', { className: 'dsh-source-view' },
-                    h('div', { className: 'dsh-source-line-numbers' },
-                      (content.split('\n') || []).map((_, i) => h('div', { key: i }, i + 1))
-                    ),
-                    h('pre', { className: 'dsh-source-pre' },
-                      h('code', null, content)
-                    )
-                  )
+                  h('div', { className: 'dsh-split-pane-header' }, '📝 源码'),
+                  h(CodeEditorView, {
+                    content,
+                    category: 'markdown',
+                    isHighlighted: true,
+                    isWordWrap,
+                    searchQuery,
+                    onLineClick: () => {},
+                  })
                 ),
                 h('div', { className: 'dsh-split-pane dsh-split-render' },
                   h('div', { className: 'dsh-split-pane-header' }, '📖 渲染预览'),
                   h('div', {
                     ref: contentRef,
                     className: 'dsh-markdown-body',
-                    dangerouslySetInnerHTML: { __html: renderedHtml },
+                    dangerouslySetInnerHTML: { __html: renderedMarkdownHtml },
                   })
                 )
               )
+            ) : (
+              // Code View (for code/json/yaml/source/raw modes)
+              h(CodeEditorView, {
+                content,
+                category,
+                isHighlighted: viewMode !== 'raw',
+                isWordWrap,
+                searchQuery,
+                onLineClick: (lineNum) => {
+                  showToast(`已选定第 ${lineNum} 行`, 'info');
+                },
+              })
             )
           )
         ),
@@ -1286,11 +2443,11 @@
         // Status Footer
         h('div', { className: 'dsh-preview-footer' },
           h('div', { className: 'dsh-footer-left', title: fileInfo?.path || tab.filePath },
-            h('span', { className: 'dsh-footer-ext' }, (fileInfo?.extension || tab.extension || '.md').toUpperCase().replace('.', '')),
+            h('span', { className: 'dsh-footer-ext' }, (fileInfo?.extension || tab.extension || category).toUpperCase().replace('.', '')),
             h('span', { className: 'dsh-footer-path' }, fileInfo?.path || tab.filePath)
           ),
           h('div', { className: 'dsh-footer-right' },
-            fileInfo?.size ? h('span', { className: 'dsh-footer-stat' }, `${(fileInfo.size / 1024).toFixed(1)} KB`) : null,
+            fileInfo?.size ? h('span', { className: 'dsh-footer-stat' }, formatBytes(fileInfo.size)) : null,
             fileInfo?.lineCount ? h('span', { className: 'dsh-footer-stat' }, `${fileInfo.lineCount} 行`) : null,
             fileInfo?.wordCount ? h('span', { className: 'dsh-footer-stat' }, `约 ${fileInfo.wordCount} 字`) : null
           )
@@ -1579,6 +2736,7 @@
 
             // Right: Content View or Welcome View
             activeTab ? h(MarkdownPreviewView, {
+              key: activeTab.id,
               tab: activeTab,
               fileInfo: currentFileInfo,
               isLoading: currentLoading,
@@ -3048,6 +4206,298 @@
         .dsh-welcome-btn.primary:hover {
           opacity: 0.9;
         }
+      
+        /* Syntax Highlighting Tokens (Light Theme) */
+        .tok-keyword { color: #0000ff; font-weight: 600; }
+        .tok-string { color: #a31515; }
+        .tok-number { color: #098658; }
+        .tok-boolean { color: #0000ff; font-weight: 600; }
+        .tok-null { color: #708090; font-style: italic; }
+        .tok-key { color: #001080; font-weight: 600; }
+        .tok-comment { color: #008000; font-style: italic; }
+        .tok-type { color: #267f99; }
+        .tok-func { color: #795e26; }
+        .tok-operator { color: #000000; font-weight: 500; }
+        .tok-punctuation, .tok-bracket { color: #333333; }
+        .tok-tag { color: #800000; font-weight: 600; }
+        .tok-attr { color: #e50000; }
+        .tok-prop { color: #001080; }
+        .tok-selector { color: #800000; }
+
+        /* Syntax Highlighting Tokens (Dark Theme) */
+        body[data-ds-dark-theme] .tok-keyword { color: #569cd6; }
+        body[data-ds-dark-theme] .tok-string { color: #ce9178; }
+        body[data-ds-dark-theme] .tok-number { color: #b5cea8; }
+        body[data-ds-dark-theme] .tok-boolean { color: #569cd6; font-weight: 600; }
+        body[data-ds-dark-theme] .tok-null { color: #808080; font-style: italic; }
+        body[data-ds-dark-theme] .tok-key { color: #9cdcfe; font-weight: 600; }
+        body[data-ds-dark-theme] .tok-comment { color: #6a9955; font-style: italic; }
+        body[data-ds-dark-theme] .tok-type { color: #4ec9b0; }
+        body[data-ds-dark-theme] .tok-func { color: #dcdcaa; }
+        body[data-ds-dark-theme] .tok-operator { color: #d4d4d4; }
+        body[data-ds-dark-theme] .tok-punctuation, body[data-ds-dark-theme] .tok-bracket { color: #d4d4d4; }
+        body[data-ds-dark-theme] .tok-tag { color: #569cd6; }
+        body[data-ds-dark-theme] .tok-attr { color: #9cdcfe; }
+        body[data-ds-dark-theme] .tok-prop { color: #9cdcfe; }
+        body[data-ds-dark-theme] .tok-selector { color: #d7ba7d; }
+
+        /* Code Editor Viewer */
+        .dsh-code-editor-view {
+          display: flex;
+          min-height: 100%;
+          font-family: "Cascadia Code", "Fira Code", Consolas, Menlo, monospace;
+          font-size: 13px;
+          line-height: 20px;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          color: var(--dsw-alias-label-primary, #1e293b);
+        }
+        body[data-ds-dark-theme] .dsh-code-editor-view {
+          background: #181b24;
+          color: #d4d4d4;
+        }
+
+        .dsh-code-gutter {
+          width: 44px;
+          min-width: 44px;
+          padding: 12px 6px 12px 0;
+          text-align: right;
+          user-select: none;
+          background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          border-right: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
+          color: var(--dsw-alias-label-tertiary, #94a3b8);
+          font-size: 12px;
+          line-height: 20px;
+          flex-shrink: 0;
+        }
+        body[data-ds-dark-theme] .dsh-code-gutter {
+          background: #141720;
+          border-right-color: #2a3140;
+          color: #64748b;
+        }
+
+        .dsh-gutter-line {
+          height: 20px;
+          cursor: pointer;
+          padding-right: 8px;
+        }
+        .dsh-gutter-line:hover {
+          color: var(--dsw-brand-primary, #0284c7);
+          font-weight: bold;
+        }
+        .dsh-gutter-line.dsh-line-highlight-flash {
+          background: rgba(14, 165, 233, 0.25);
+          color: #0284c7;
+        }
+
+        .dsh-code-content {
+          flex: 1;
+          min-width: 0;
+          padding: 12px 16px;
+          overflow: auto;
+        }
+        .dsh-code-pre {
+          margin: 0;
+          font-family: inherit;
+          font-size: inherit;
+          line-height: 20px;
+          tab-size: 2;
+          white-space: pre;
+        }
+        .dsh-code-editor-view.word-wrap .dsh-code-pre {
+          white-space: pre-wrap;
+          word-break: normal;
+          overflow-wrap: break-word;
+        }
+        .dsh-code-editor-view {
+          display: flex;
+          min-height: 100%;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+          font-size: 12.5px;
+          line-height: 20px;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          color: var(--dsw-alias-label-primary, #1e293b);
+        }
+        .dsh-code-pre code {
+          font-family: inherit;
+        }
+
+        /* Interactive JSON Inspector */
+        .dsh-json-inspector {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          overflow: hidden;
+          font-family: "Cascadia Code", Consolas, monospace;
+          font-size: 12px;
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+        }
+        body[data-ds-dark-theme] .dsh-json-inspector {
+          background: #181b24;
+          color: #d4d4d4;
+        }
+
+        .dsh-json-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 8px 12px;
+          border-bottom: 1px solid var(--dsw-alias-border-l3, #e2e8f0);
+          background: var(--dsw-alias-bg-layer-2, #f8fafc);
+          gap: 12px;
+          flex-shrink: 0;
+        }
+        body[data-ds-dark-theme] .dsh-json-header {
+          border-bottom-color: #2a3140;
+          background: #141720;
+        }
+
+        .dsh-json-search-box {
+          position: relative;
+          display: flex;
+          align-items: center;
+          flex: 1;
+          max-width: 280px;
+        }
+        .dsh-json-search-icon {
+          position: absolute;
+          left: 8px;
+          font-size: 11px;
+          pointer-events: none;
+        }
+        .dsh-json-search-input {
+          width: 100%;
+          height: 26px;
+          border-radius: 6px;
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          padding: 0 24px 0 26px;
+          font-size: 12px;
+          background: #ffffff;
+          color: inherit;
+          outline: none;
+        }
+        body[data-ds-dark-theme] .dsh-json-search-input {
+          background: #1e2330;
+          border-color: #334155;
+          color: #f1f5f9;
+        }
+        .dsh-json-actions {
+          display: flex;
+          gap: 6px;
+        }
+        .dsh-json-btn {
+          padding: 3px 8px;
+          border-radius: 4px;
+          border: 1px solid var(--dsw-alias-border-l2, #cbd5e1);
+          background: var(--dsw-alias-bg-layer-1, #ffffff);
+          color: var(--dsw-alias-label-secondary, #475569);
+          cursor: pointer;
+          font-size: 11px;
+          transition: all 0.15s;
+        }
+        .dsh-json-btn:hover {
+          background: var(--dsw-alias-bg-hover, rgba(0, 0, 0, 0.05));
+          color: var(--dsw-alias-label-primary, #0f172a);
+        }
+        body[data-ds-dark-theme] .dsh-json-btn {
+          background: #1e2330;
+          border-color: #334155;
+          color: #94a3b8;
+        }
+        body[data-ds-dark-theme] .dsh-json-btn:hover {
+          background: #283042;
+          color: #f1f5f9;
+        }
+
+        .dsh-json-tree-body {
+          flex: 1;
+          overflow: auto;
+          padding: 10px 12px;
+        }
+
+        .dsh-json-row {
+          display: flex;
+          align-items: center;
+          min-height: 22px;
+          line-height: 22px;
+          gap: 6px;
+          border-radius: 4px;
+          padding-right: 8px;
+          transition: background 0.1s;
+        }
+        .dsh-json-row:hover {
+          background: rgba(0, 0, 0, 0.03);
+        }
+        body[data-ds-dark-theme] .dsh-json-row:hover {
+          background: rgba(255, 255, 255, 0.04);
+        }
+        .dsh-json-row-expandable {
+          cursor: pointer;
+        }
+
+        .dsh-json-chevron {
+          font-size: 9px;
+          color: #94a3b8;
+          width: 12px;
+          height: 12px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          user-select: none;
+        }
+        .dsh-json-key {
+          color: #001080;
+          font-weight: 600;
+          flex-shrink: 0;
+        }
+        body[data-ds-dark-theme] .dsh-json-key {
+          color: #9cdcfe;
+        }
+        .dsh-json-type-badge {
+          font-size: 10px;
+          color: #94a3b8;
+          background: rgba(0, 0, 0, 0.05);
+          padding: 0 5px;
+          border-radius: 6px;
+          user-select: none;
+        }
+        body[data-ds-dark-theme] .dsh-json-type-badge {
+          background: rgba(255, 255, 255, 0.08);
+          color: #64748b;
+        }
+        .dsh-json-preview {
+          color: #64748b;
+          font-style: italic;
+          font-size: 11px;
+        }
+        body[data-ds-dark-theme] .dsh-json-preview {
+          color: #94a3b8;
+        }
+        .dsh-json-copy-btn {
+          opacity: 0;
+          cursor: pointer;
+          font-size: 10px;
+          margin-left: auto;
+          padding: 1px 4px;
+          border-radius: 3px;
+          transition: opacity 0.15s;
+        }
+        .dsh-json-row:hover .dsh-json-copy-btn {
+          opacity: 0.75;
+        }
+        .dsh-json-copy-btn:hover {
+          opacity: 1;
+          background: rgba(0, 0, 0, 0.08);
+        }
+
+        .dsh-json-parse-error {
+          padding: 36px 16px;
+          text-align: center;
+          color: var(--dsw-alias-label-secondary, #64748b);
+        }
+        .dsh-symbol-item {
+          padding-left: 10px;
+        }
       `;
       document.head.appendChild(style);
     }