feat: add multi-tab terminal with SSH support, config editing, and dashboard redesign

- Terminal: multi-tab sessions, SSH connections, shell detection (zsh/bash/fish/wsl/powershell)
- Config: inline profile & provider editing, system update management
- Dashboard: grid layout with inline tools/notifications/workflows sections
- Add lucide-react icons, i18n keys (FR/EN), and new CSS components

💾 Generated with Crush

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

web/src/components/Shell.jsx

@@ -1,142 +1,311 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
-import { Terminal } from '@xterm/xterm'
+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 } from 'lucide-react'
 import '@xterm/xterm/css/xterm.css'
 import { useI18n } from '../i18n'
 
+const MAX_TABS = 7
+
+const XTERM_THEME = {
+  background: '#0A0A0C',
+  foreground: '#EAE0E2',
+  cursor: '#FF0033',
+  cursorAccent: '#0A0A0C',
+  selectionBackground: '#FF003344',
+  selectionForeground: '#ffffff',
+  black: '#0A0A0C',
+  red: '#FF0033',
+  green: '#00E676',
+  yellow: '#FFD740',
+  blue: '#448AFF',
+  magenta: '#FF1A5E',
+  cyan: '#00BCD4',
+  white: '#EAE0E2',
+  brightBlack: '#5A4F52',
+  brightRed: '#FF5252',
+  brightGreen: '#69F0AE',
+  brightYellow: '#FFFF00',
+  brightBlue: '#82B1FF',
+  brightMagenta: '#FF80AB',
+  brightCyan: '#84FFFF',
+  brightWhite: '#FFFFFF',
+}
+
+function createTerminal(container) {
+  const term = new XTerm({
+    cursorBlink: true,
+    fontSize: 14,
+    fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Menlo', monospace",
+    theme: XTERM_THEME,
+    allowTransparency: false,
+    scrollback: 5000,
+  })
+
+  const fitAddon = new FitAddon()
+  const webLinksAddon = new WebLinksAddon()
+  term.loadAddon(fitAddon)
+  term.loadAddon(webLinksAddon)
+  term.open(container)
+  fitAddon.fit()
+
+  return { term, fitAddon }
+}
+
+function connectWebSocket(term, fitAddon, initPayload) {
+  const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+  const ws = new WebSocket(`${proto}//${window.location.host}/api/ws/terminal`)
+
+  ws.onopen = () => {
+    ws.send(JSON.stringify(initPayload))
+    const dims = fitAddon.proposeDimensions()
+    if (dims) {
+      ws.send(JSON.stringify({ type: 'resize', rows: dims.rows, cols: dims.cols }))
+    }
+  }
+
+  ws.onmessage = (event) => {
+    try {
+      const msg = JSON.parse(event.data)
+      if (msg.type === 'output') {
+        term.write(msg.data)
+      } else if (msg.type === 'error') {
+        term.write(`\r\n\x1b[31mError: ${msg.data}\x1b[0m\r\n`)
+      }
+    } catch {
+      term.write(event.data)
+    }
+  }
+
+  ws.onclose = () => {
+    term.write('\r\n\x1b[33m— Connection closed —\x1b[0m\r\n')
+  }
+
+  ws.onerror = () => {
+    term.write('\r\n\x1b[31m— Connection error —\x1b[0m\r\n')
+  }
+
+  term.onData((data) => {
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'input', data }))
+    }
+  })
+
+  term.onResize(({ rows, cols }) => {
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'resize', rows, cols }))
+    }
+  })
+
+  return ws
+}
+
 export default function Shell({ api }) {
   const { t } = useI18n()
-  const termRef = useRef(null)
-  const fitAddonRef = useRef(null)
-  const wsRef = useRef(null)
-  const containerRef = useRef(null)
+  const tabsRef = useRef({})
+  const nextIdRef = useRef(1)
+
+  const [tabs, setTabs] = useState([
+    { id: 1, name: 'Local Shell', type: 'local', shell: '', connected: false },
+  ])
+  const [activeTab, setActiveTab] = useState(1)
+  const [sshConnections, setSshConnections] = useState([])
+  const [systemTerminals, setSystemTerminals] = useState([])
+  const [showMenu, setShowMenu] = useState(false)
+  const [showSshModal, setShowSshModal] = useState(false)
+  const [editingTab, setEditingTab] = useState(null)
+  const [editName, setEditName] = useState('')
+
+  const [sshForm, setSshForm] = useState({
+    name: '', host: '', port: 22, user: '', key_path: '',
+  })
 
   const [aiMessages, setAiMessages] = useState([
     { role: 'ai', content: t('shell.aiWelcome') }
   ])
   const [aiInput, setAiInput] = useState('')
   const [aiLoading, setAiLoading] = useState(false)
-  const [connected, setConnected] = useState(false)
   const aiMessagesRef = useRef(null)
 
   useEffect(() => {
     aiMessagesRef.current?.scrollTo(0, aiMessagesRef.current.scrollHeight)
   }, [aiMessages])
 
-  const getWsUrl = useCallback(() => {
-    const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-    return `${proto}//${window.location.host}/api/ws/terminal`
+  useEffect(() => {
+    api.getTerminalSessions().then(d => {
+      setSshConnections(d.ssh || [])
+      setSystemTerminals(d.system || [])
+    }).catch(() => {})
   }, [])
 
-  useEffect(() => {
-    if (!containerRef.current) return
+  const initTerminal = useCallback((tabId, tab) => {
+    if (tabsRef.current[tabId]) return
 
-    const term = new Terminal({
-      cursorBlink: true,
-      fontSize: 14,
-      fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Menlo', monospace",
-      theme: {
-        background: '#0A0A0C',
-        foreground: '#EAE0E2',
-        cursor: '#FF0033',
-        cursorAccent: '#0A0A0C',
-        selectionBackground: '#FF003344',
-        selectionForeground: '#ffffff',
-        black: '#0A0A0C',
-        red: '#FF0033',
-        green: '#00E676',
-        yellow: '#FFD740',
-        blue: '#448AFF',
-        magenta: '#FF1A5E',
-        cyan: '#00BCD4',
-        white: '#EAE0E2',
-        brightBlack: '#5A4F52',
-        brightRed: '#FF5252',
-        brightGreen: '#69F0AE',
-        brightYellow: '#FFFF00',
-        brightBlue: '#82B1FF',
-        brightMagenta: '#FF80AB',
-        brightCyan: '#84FFFF',
-        brightWhite: '#FFFFFF',
-      },
-      allowTransparency: false,
-      scrollback: 5000,
-    })
+    const container = document.getElementById(`terminal-${tabId}`)
+    if (!container) return
 
-    const fitAddon = new FitAddon()
-    const webLinksAddon = new WebLinksAddon()
-    term.loadAddon(fitAddon)
-    term.loadAddon(webLinksAddon)
-    term.open(containerRef.current)
-    fitAddon.fit()
+    const { term, fitAddon } = createTerminal(container)
 
-    termRef.current = term
-    fitAddonRef.current = fitAddon
-
-    const ws = new WebSocket(getWsUrl())
-    wsRef.current = ws
-
-    ws.onopen = () => {
-      setConnected(true)
-      const dims = fitAddon.proposeDimensions()
-      if (dims) {
-        ws.send(JSON.stringify({ type: 'resize', rows: dims.rows, cols: dims.cols }))
+    let initPayload
+    if (tab.type === 'ssh') {
+      initPayload = {
+        type: 'ssh',
+        data: JSON.stringify({
+          host: tab.host,
+          port: tab.port || 22,
+          user: tab.user || 'root',
+          key_path: tab.key_path || '',
+        }),
+      }
+    } else {
+      initPayload = {
+        type: 'shell',
+        data: tab.shell || '',
       }
     }
 
-    ws.onmessage = (event) => {
-      try {
-        const msg = JSON.parse(event.data)
-        if (msg.type === 'output') {
-          term.write(msg.data)
-        } else if (msg.type === 'error') {
-          term.write(`\r\n\x1b[31mError: ${msg.data}\x1b[0m\r\n`)
-        }
-      } catch {
-        term.write(event.data)
-      }
+    const ws = connectWebSocket(term, fitAddon, initPayload)
+
+    ws.onopen = () => {
+      setTabs(prev => prev.map(t => t.id === tabId ? { ...t, connected: true } : t))
     }
 
     ws.onclose = () => {
-      setConnected(false)
-      term.write('\r\n\x1b[33m— Connection closed —\x1b[0m\r\n')
+      setTabs(prev => prev.map(t => t.id === tabId ? { ...t, connected: false } : t))
     }
 
     ws.onerror = () => {
-      setConnected(false)
-      term.write('\r\n\x1b[31m— Connection error —\x1b[0m\r\n')
+      setTabs(prev => prev.map(t => t.id === tabId ? { ...t, connected: false } : t))
     }
 
-    term.onData((data) => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: 'input', data }))
-      }
-    })
-
-    term.onResize(({ rows, cols }) => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: 'resize', rows, cols }))
-      }
-    })
-
     const onResize = () => {
-      if (containerRef.current?.offsetParent !== null) {
+      const el = document.getElementById(`terminal-${tabId}`)
+      if (el && el.offsetParent !== null) {
         fitAddon.fit()
       }
     }
 
     const resizeObserver = new ResizeObserver(onResize)
-    resizeObserver.observe(containerRef.current)
+    resizeObserver.observe(container)
     window.addEventListener('resize', onResize)
 
-    return () => {
+    tabsRef.current[tabId] = { term, fitAddon, ws, resizeObserver, onResize }
+  }, [])
+
+  useEffect(() => {
+    const tab = tabs.find(t => t.id === activeTab)
+    if (tab && !tabsRef.current[tab.id]) {
+      const timer = setTimeout(() => initTerminal(tab.id, tab), 50)
+      return () => clearTimeout(timer)
+    } else if (tab && tabsRef.current[tab.id]) {
+      const timer = setTimeout(() => {
+        const { fitAddon } = tabsRef.current[tab.id]
+        fitAddon.fit()
+      }, 50)
+      return () => clearTimeout(timer)
+    }
+  }, [activeTab, tabs, initTerminal])
+
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return
+      if (!e.altKey) return
+
+      const num = parseInt(e.key)
+      if (num >= 1 && num <= tabs.length) {
+        e.preventDefault()
+        setActiveTab(tabs[num - 1].id)
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [tabs])
+
+  const addLocalTab = (shell, name) => {
+    if (tabs.length >= MAX_TABS) return
+    const id = nextIdRef.current++
+    const newTab = { id, name: name || `${t('shell.localShell')} ${tabs.length + 1}`, type: 'local', shell: shell || '', connected: false }
+    setTabs(prev => [...prev, newTab])
+    setActiveTab(id)
+    setShowMenu(false)
+  }
+
+  const addSSHTab = (conn) => {
+    if (tabs.length >= MAX_TABS) return
+    const id = nextIdRef.current++
+    const newTab = {
+      id,
+      name: conn.name || `${conn.user}@${conn.host}`,
+      type: 'ssh',
+      host: conn.host,
+      port: conn.port || 22,
+      user: conn.user || 'root',
+      key_path: conn.key_path || '',
+      connected: false,
+    }
+    setTabs(prev => [...prev, newTab])
+    setActiveTab(id)
+    setShowMenu(false)
+  }
+
+  const closeTab = (tabId, e) => {
+    if (e) e.stopPropagation()
+    if (tabs.length <= 1) return
+
+    if (tabsRef.current[tabId]) {
+      const { ws, resizeObserver, onResize, term } = tabsRef.current[tabId]
       window.removeEventListener('resize', onResize)
       resizeObserver.disconnect()
       ws.close()
       term.dispose()
+      delete tabsRef.current[tabId]
     }
-  }, [getWsUrl])
+
+    setTabs(prev => {
+      const next = prev.filter(t => t.id !== tabId)
+      if (activeTab === tabId) {
+        setActiveTab(next[next.length - 1].id)
+      }
+      return next
+    })
+  }
+
+  const startRename = (tabId, e) => {
+    if (e) e.stopPropagation()
+    const tab = tabs.find(t => t.id === tabId)
+    setEditingTab(tabId)
+    setEditName(tab.name)
+  }
+
+  const finishRename = () => {
+    if (editName.trim() && editingTab) {
+      setTabs(prev => prev.map(t => t.id === editingTab ? { ...t, name: editName.trim() } : t))
+    }
+    setEditingTab(null)
+    setEditName('')
+  }
+
+  const saveSSHConnection = async () => {
+    if (!sshForm.name.trim() || !sshForm.host.trim()) return
+    try {
+      await api.addSSHConnection(sshForm)
+      setSshConnections(prev => [...prev, { ...sshForm }])
+      setSshForm({ name: '', host: '', port: 22, user: '', key_path: '' })
+      setShowSshModal(false)
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  const deleteSSHConnection = async (name) => {
+    try {
+      await api.deleteSSHConnection(name)
+      setSshConnections(prev => prev.filter(c => c.name !== name))
+    } catch (err) {
+      console.error(err)
+    }
+  }
 
   const handleAiSend = async () => {
     if (!aiInput.trim() || aiLoading) return
@@ -144,7 +313,6 @@ export default function Shell({ api }) {
     setAiMessages(prev => [...prev, { role: 'user', content: text }])
     setAiInput('')
     setAiLoading(true)
-
     try {
       const res = await api.runCommand(`echo "AI: ${text}"`, '')
       setAiMessages(prev => [...prev, { role: 'ai', content: res.output || t('shell.noResponse') }])
@@ -157,13 +325,115 @@ export default function Shell({ api }) {
   return (
     <div className="shell-layout">
       <div className="shell-terminal-col">
-        <div className="panel-header">
-          <span className="panel-title">
-            {t('shell.terminal')}
-            <span className={`connection-dot ${connected ? 'on' : 'off'}`} />
-          </span>
+        <div className="shell-tabs-bar">
+          <div className="shell-tabs">
+            {tabs.map((tab, i) => (
+              <div
+                key={tab.id}
+                className={`shell-tab ${activeTab === tab.id ? 'active' : ''}`}
+                onClick={() => setActiveTab(tab.id)}
+                onDoubleClick={(e) => startRename(tab.id, e)}
+              >
+                <span className={`connection-dot ${tab.connected ? 'on' : 'off'}`} />
+                {tab.type === 'ssh' && <Globe size={12} />}
+                {tab.type === 'local' && <Monitor size={12} />}
+                {editingTab === tab.id ? (
+                  <input
+                    className="shell-tab-rename"
+                    value={editName}
+                    onChange={e => setEditName(e.target.value)}
+                    onBlur={finishRename}
+                    onKeyDown={e => { if (e.key === 'Enter') finishRename(); if (e.key === 'Escape') setEditingTab(null) }}
+                    autoFocus
+                    onClick={e => e.stopPropagation()}
+                  />
+                ) : (
+                  <span className="shell-tab-name">{tab.name}</span>
+                )}
+                <span className="shell-tab-index">{i + 1}</span>
+                {tabs.length > 1 && (
+                  <button
+                    className="shell-tab-close"
+                    onClick={(e) => closeTab(tab.id, e)}
+                    title={t('shell.closeTab')}
+                  >
+                    <X size={12} />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+
+          <div className="shell-tab-actions">
+            {tabs.length < MAX_TABS && (
+              <div className="shell-new-tab-wrapper">
+                <button className="shell-new-tab-btn" onClick={() => setShowMenu(!showMenu)} title={t('shell.newTab')}>
+                  <Plus size={16} />
+                  <ChevronDown size={12} />
+                </button>
+                {showMenu && (
+                  <>
+                    <div className="shell-menu-overlay" onClick={() => setShowMenu(false)} />
+                    <div className="shell-new-tab-menu">
+                      <div className="shell-menu-label">{t('shell.systemTerminals')}</div>
+                      {systemTerminals.map(st => (
+                        <button
+                          key={st.name}
+                          className="shell-menu-item"
+                          onClick={() => addLocalTab(st.shell, st.name)}
+                        >
+                          <Monitor size={14} />
+                          <span>{st.name}</span>
+                          <span className="shell-menu-item-sub">{st.shell}</span>
+                        </button>
+                      ))}
+                      <div className="shell-menu-divider" />
+                      <div className="shell-menu-label">{t('shell.savedConnections')}</div>
+                      {sshConnections.length === 0 && (
+                        <div className="shell-menu-empty">{t('shell.noConnections')}</div>
+                      )}
+                      {sshConnections.map(conn => (
+                        <div key={conn.name} className="shell-menu-item-row">
+                          <button
+                            className="shell-menu-item"
+                            onClick={() => addSSHTab(conn)}
+                          >
+                            <Globe size={14} />
+                            <span>{conn.name}</span>
+                            <span className="shell-menu-item-sub">{conn.user}@{conn.host}:{conn.port}</span>
+                          </button>
+                          <button
+                            className="shell-menu-item-icon"
+                            onClick={(e) => { e.stopPropagation(); deleteSSHConnection(conn.name) }}
+                            title={t('shell.deleteConnection')}
+                          >
+                            <Trash2 size={12} />
+                          </button>
+                        </div>
+                      ))}
+                      <div className="shell-menu-divider" />
+                      <button className="shell-menu-item accent" onClick={() => { setShowSshModal(true); setShowMenu(false) }}>
+                        <Plus size={14} />
+                        <span>{t('shell.addConnection')}</span>
+                      </button>
+                    </div>
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="shell-xterm-wrapper">
+          {tabs.map(tab => (
+            <div
+              key={tab.id}
+              id={`terminal-${tab.id}`}
+              className="shell-xterm-instance"
+              style={{ display: activeTab === tab.id ? 'block' : 'none' }}
+            />
+          ))}
         </div>
-        <div className="shell-xterm-wrapper" ref={containerRef} />
       </div>
 
       <div className="shell-ai-col">
@@ -186,6 +456,56 @@ export default function Shell({ api }) {
           <button className="sm" onClick={handleAiSend} disabled={!aiInput.trim()}>{t('shell.send')}</button>
         </div>
       </div>
+
+      {showSshModal && (
+        <div className="shell-modal-overlay" onClick={() => setShowSshModal(false)}>
+          <div className="shell-modal" onClick={e => e.stopPropagation()}>
+            <div className="shell-modal-header">{t('shell.addConnection')}</div>
+            <div className="shell-modal-body">
+              <label className="shell-modal-label">{t('shell.connectionName')}</label>
+              <input
+                value={sshForm.name}
+                onChange={e => setSshForm(f => ({ ...f, name: e.target.value }))}
+                placeholder="prod-server"
+              />
+              <label className="shell-modal-label">{t('shell.host')}</label>
+              <input
+                value={sshForm.host}
+                onChange={e => setSshForm(f => ({ ...f, host: e.target.value }))}
+                placeholder="192.168.1.100"
+              />
+              <div className="shell-modal-row">
+                <div className="shell-modal-field">
+                  <label className="shell-modal-label">{t('shell.port')}</label>
+                  <input
+                    type="number"
+                    value={sshForm.port}
+                    onChange={e => setSshForm(f => ({ ...f, port: parseInt(e.target.value) || 22 }))}
+                  />
+                </div>
+                <div className="shell-modal-field">
+                  <label className="shell-modal-label">{t('shell.user')}</label>
+                  <input
+                    value={sshForm.user}
+                    onChange={e => setSshForm(f => ({ ...f, user: e.target.value }))}
+                    placeholder="root"
+                  />
+                </div>
+              </div>
+              <label className="shell-modal-label">{t('shell.keyPath')} ({t('shell.local')})</label>
+              <input
+                value={sshForm.key_path}
+                onChange={e => setSshForm(f => ({ ...f, key_path: e.target.value }))}
+                placeholder="~/.ssh/id_rsa"
+              />
+            </div>
+            <div className="shell-modal-footer">
+              <button className="ghost" onClick={() => setShowSshModal(false)}>{t('shell.cancel')}</button>
+              <button className="primary" onClick={saveSSHConnection}>{t('shell.save')}</button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }