fix(shell): restore missing MAX_TABS, TABS_STORAGE_KEY, TERMINAL_BUFFER_KEY constants

💘 Generated with Crush

Assisted-by: GLM-5.1 via Crush <crush@charm.land>

web/src/components/Shell.jsx

@@ -1,73 +1,69 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
-import { Terminal as XTerm } from '@xterm/xterm'
-import { FitAddon } from '@xterm/addon-fit'
-import { WebLinksAddon } from '@xterm/addon-web-links'
-import { Plus, X, Monitor, Globe, ChevronDown, Pencil, Trash2, Search, Copy, Send, Eye } from 'lucide-react'
-import '@xterm/xterm/css/xterm.css'
 import { useI18n } from '../i18n'
-
+// === Style thème système pour xterm ===
-const MAX_TABS = 7
+function getCSSVariable(varName) {
-const SHELL_MAX_TOKENS = 100000
+  if (typeof document === 'undefined') return null;
-const TABS_STORAGE_KEY = 'muyue_shell_tabs'
+  return getComputedStyle(document.documentElement).getPropertyValue(varName).trim() || null;
-const TERMINAL_BUFFER_KEY = 'muyue_terminal_buffers'
-
-function renderContent(text) {
-  const parts = []
-  const codeBlockRegex = /(```[\s\S]*?```)/g
-  let match
-  let lastIndex = 0
-  while ((match = codeBlockRegex.exec(text)) !== null) {
-    if (match.index > lastIndex) {
-      parts.push({ type: 'text', content: text.slice(lastIndex, match.index) })
-    }
-    const full = match[1]
-    const firstNewline = full.indexOf('\n')
-    const lang = firstNewline > -1 ? full.slice(3, firstNewline).trim() : ''
-    const code = firstNewline > -1 ? full.slice(firstNewline + 1, -3) : full.slice(3, -3)
-    parts.push({ type: 'code', lang, content: code })
-    lastIndex = match.index + full.length
-  }
-  if (lastIndex < text.length) {
-    const remaining = text.slice(lastIndex)
-    const openBlock = remaining.match(/```(\w*)\n?([\s\S]*)$/)
-    if (openBlock) {
-      if (openBlock.index > 0) {
-        parts.push({ type: 'text', content: remaining.slice(0, openBlock.index) })
-      }
-      parts.push({ type: 'code', lang: openBlock[1] || '', content: openBlock[2] || '' })
-    } else {
-      parts.push({ type: 'text', content: remaining })
-    }
-  }
-  return parts
 }
 
-function formatText(text) {
+function parseHexColor(hex) {
-  let html = text
+  if (!hex || hex.startsWith('var(')) return null;
-    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  hex = hex.replace('#', '');
+  if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
+  if (hex.length !== 6) return null;
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return { r, g, b };
+}
 
-  html = html
+function toRgbString(hex) {
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+  const c = parseHexColor(hex);
-    .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
+  if (!c) return '#000000';
-    .replace(/^### (.+)$/gm, '<h4 class="msg-h4">$1</h4>')
+  return `#${c.r.toString(16).padStart(2, '0')}${c.g.toString(16).padStart(2, '0')}${c.b.toString(16).padStart(2, '0')}`;
-    .replace(/^## (.+)$/gm, '<h3 class="msg-h3">$1</h3>')
+}
-    .replace(/^# (.+)$/gm, '<h2 class="msg-h2">$1</h2>')
-    .replace(/^\s*[-*] (.+)$/gm, '<div class="msg-bullet">• $1</div>')
-    .replace(/^\s*(\d+)[.)] (.+)$/gm, '<div class="msg-step"><span class="msg-step-num">$1</span> $2</div>')
-    .replace(/\n/g, '<br/>')
 
-  html = html
+function buildSystemTheme() {
-    .replace(/<br\/>\s*<br\/>/g, '<br/>')
+  const bg = getCSSVariable('--bg-base') || '#0F0D10';
-    .replace(/<br\/>\s*(<h[234]|<div class="msg-)/g, '$1')
+  const fg = getCSSVariable('--text-primary') || '#EAE0E2';
-    .replace(/(<\/h[234]|<\/div>)\s*<br\/>/g, '$1')
+  const accent = getCSSVariable('--accent-light') || '#FF1A5E';
-    .replace(/\s+on\w+=["'][^"']*["']/gi, '')
+  const accentDim = getCSSVariable('--accent-dim') || '#6B2033';
-    .replace(/javascript:/gi, '')
+  const success = '#00E676';
-    .replace(/data:/gi, '')
+  const warning = '#FFD740';
-
+  const error = getCSSVariable('--accent-bright') || '#FF1744';
-  return html
+  const bgSurface = getCSSVariable('--bg-surface') || bg;
+  const bgElevated = getCSSVariable('--bg-elevated') || bgSurface;
+  const textSecondary = getCSSVariable('--text-secondary') || fg;
+  const textTertiary = getCSSVariable('--text-tertiary') || textSecondary;
+  
+  return {
+    background: toRgbString(bg),
+    foreground: toRgbString(fg),
+    cursor: toRgbString(accent),
+    cursorAccent: toRgbString(bg),
+    selectionBackground: `${toRgbString(accentDim)}44`,
+    selectionForeground: '#FFFFFF',
+    black: toRgbString(bgElevated),
+    red: toRgbString(error),
+    green: toRgbString(success),
+    yellow: toRgbString(warning),
+    blue: toRgbString(getCSSVariable('--accent') || '#448AFF'),
+    magenta: toRgbString(accent),
+    cyan: '#00BCD4',
+    white: toRgbString(fg),
+    brightBlack: toRgbString(bgSurface),
+    brightRed: toRgbString(accent),
+    brightGreen: toRgbString(success),
+    brightYellow: toRgbString(warning),
+    brightBlue: toRgbString(getCSSVariable('--accent-muted') || '#82B1FF'),
+    brightMagenta: toRgbString(getCSSVariable('--accent-soft') || '#FF80AB'),
+    brightCyan: '#84FFFF',
+    brightWhite: '#FFFFFF',
+  };
 }
 
 const THEMES = {
+  system: buildSystemTheme(),
   default: {
     background: '#0A0A0C', foreground: '#EAE0E2', cursor: '#FF0033',
     cursorAccent: '#0A0A0C', selectionBackground: '#FF003344', selectionForeground: '#ffffff',
@@ -125,11 +121,14 @@ const THEMES = {
 }
 
 function getTheme(themeName) {
-  return THEMES[themeName] || THEMES.default
+  if (themeName === 'system' || themeName === 'default') {
+    return buildSystemTheme()
+  }
+  return THEMES[themeName] || buildSystemTheme()
 }
 
 function createTerminal(container, settings = {}) {
-  const theme = getTheme(settings.theme || 'default')
+  const theme = getTheme(settings.theme || 'system')
   const term = new XTerm({
     cursorBlink: true,
     fontSize: settings.fontSize || 12,
@@ -237,10 +236,13 @@ function connectWebSocket(term, fitAddon, initPayload, onStateChange, onFirstMes
 }
 
 export default function Shell({ api }) {
+  const MAX_TABS = 7
+  const TABS_STORAGE_KEY = 'muyue_shell_tabs'
+  const TERMINAL_BUFFER_KEY = 'muyue_terminal_buffers'
   const { t } = useI18n()
   const tabsRef = useRef({})
   const nextIdRef = useRef(1)
-  const settingsRef = useRef({ fontSize: 12, fontFamily: "'JetBrains Mono', 'Fira Code', monospace", theme: 'default' })
+  const settingsRef = useRef({ fontSize: 12, fontFamily: "'JetBrains Mono', 'Fira Code', monospace", theme: 'system' })
   const pendingCommandsRef = useRef({})
 
   const [tabs, setTabs] = useState(() => {
@@ -271,9 +273,13 @@ export default function Shell({ api }) {
     ]
   })
   const [activeTab, setActiveTab] = useState(() => {
-    if (savedTabs) {
+    try {
-      return savedTabs[0]?.id || 1
+      const raw = localStorage.getItem(TABS_STORAGE_KEY)
-    }
+      if (raw) {
+        const parsed = JSON.parse(raw)
+        if (Array.isArray(parsed) && parsed.length > 0) return parsed[0]?.id || 1
+      }
+    } catch {}
     return 1
   })
   const activeTabRef = useRef(activeTab)
@@ -287,7 +293,7 @@ export default function Shell({ api }) {
   const [terminalSettings, setTerminalSettings] = useState({
     fontSize: 12,
     fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Menlo', monospace",
-    theme: 'default',
+    theme: 'system',
   })
 
   useEffect(() => { settingsRef.current = terminalSettings }, [terminalSettings])
@@ -352,7 +358,7 @@ export default function Shell({ api }) {
         setTerminalSettings({
           fontSize: d.terminal.font_size || 12,
           fontFamily: d.terminal.font_family || "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Menlo', monospace",
-          theme: d.terminal.theme || 'default',
+          theme: d.terminal.theme || 'system',
         })
       }
     }).catch(() => {})

web/src/styles/global.css

@@ -1058,3 +1058,76 @@ input::placeholder { color: var(--text-disabled); }
   word-break: break-word;
   background: var(--bg);
 }
+
+/* === XTerm Custom Styling === */
+/* Styles for xterm.js integrated with Muyue theme */
+.shell-xterm-instance .xterm {
+  padding: 4px 8px;
+}
+
+.shell-xterm-instance .xterm-viewport {
+  background-color: var(--bg-base) !important;
+}
+
+.shell-xterm-instance .xterm-screen {
+  background-color: var(--bg-base);
+}
+
+/* Scrollbar styling for xterm */
+.shell-xterm-instance .xterm-viewport::-webkit-scrollbar {
+  width: 8px;
+}
+
+.shell-xterm-instance .xterm-viewport::-webkit-scrollbar-track {
+  background: var(--bg-surface);
+}
+
+.shell-xterm-instance .xterm-viewport::-webkit-scrollbar-thumb {
+  background: var(--accent-dim);
+  border-radius: 4px;
+}
+
+.shell-xterm-instance .xterm-viewport::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-dark);
+}
+
+/* Selection styling */
+.shell-xterm-instance .xterm-selection {
+  background: var(--accent-dim) !important;
+}
+
+/* Focus ring styling */
+.shell-xterm-instance .xterm:focus .xterm-helper-text-container {
+  box-shadow: none;
+}
+
+/* Ensure consistent font rendering */
+.shell-xterm-instance .xterm .xterm-char-measure-element {
+  font-family: var(--font-mono) !important;
+}
+
+/* Bell animation styling */
+.shell-xterm-instance .xterm-bell {
+  animation: xterm-bell-flash 0.3s ease-out;
+}
+
+@keyframes xterm-bell-flash {
+  0% { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 0; }
+}
+
+/* Cursor styling */
+.shell-xterm-instance .xterm-cursor {
+  outline: none !important;
+}
+
+/* Link styling for web links addon */
+.shell-xterm-instance .xterm-link {
+  color: var(--accent-light) !important;
+  text-decoration: underline;
+}
+
+.shell-xterm-instance .xterm-link:hover {
+  color: var(--accent-muted) !important;
+}