navigator.clipboard.writeText(c.cmd)} title="Copier">
-
{c.cmd}
+
{ navigator.clipboard.writeText(c.cmd); setCopiedIdx(i); setTimeout(() => setCopiedIdx(-1), 1200); }}>
+ {copiedIdx === i ? '✓ Copié' : c.cmd}
{c.count}×
))}
diff --git a/web/src/components/Shell.jsx b/web/src/components/Shell.jsx
index 230f573..dd8a6f5 100644
--- a/web/src/components/Shell.jsx
+++ b/web/src/components/Shell.jsx
@@ -1,13 +1,62 @@
-import { useState, useRef, useEffect, useCallback } from 'react'
+import { useState, useRef, useEffect, useCallback, useMemo } 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 } from 'lucide-react'
+import { Plus, X, Monitor, Globe, ChevronDown, Pencil, Trash2, Search, Copy, Send, Eye, Bot } from 'lucide-react'
import '@xterm/xterm/css/xterm.css'
import { useI18n } from '../i18n'
+const AI_TAB_ID = 0
const MAX_TABS = 7
const SHELL_MAX_TOKENS = 100000
+const TABS_STORAGE_KEY = 'muyue_shell_tabs'
+
+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) {
+ parts.push({ type: 'text', content: text.slice(lastIndex) })
+ }
+ return parts
+}
+
+function formatText(text) {
+ let html = text
+ .replace(/&/g, '&').replace(//g, '>')
+
+ html = html
+ .replace(/\*\*(.+?)\*\*/g, '
$1')
+ .replace(/`([^`]+)`/g, '
$1')
+ .replace(/^### (.+)$/gm, '
$1
')
+ .replace(/^## (.+)$/gm, '
$1
')
+ .replace(/^# (.+)$/gm, '
$1
')
+ .replace(/^\s*[-*] (.+)$/gm, '
• $1
')
+ .replace(/^\s*(\d+)[.)] (.+)$/gm, '
$1 $2
')
+ .replace(/\n/g, '
')
+
+ html = html
+ .replace(/
\s*
/g, '
')
+ .replace(/
\s*(
{
+ try {
+ const raw = localStorage.getItem(TABS_STORAGE_KEY)
+ if (raw) {
+ const parsed = JSON.parse(raw)
+ if (Array.isArray(parsed) && parsed.length > 0) {
+ return parsed.map(t => ({ ...t, connected: false }))
+ }
+ }
+ } catch {}
+ return null
+ })()
+
+ const [tabs, setTabs] = useState(savedTabs || [
+ { id: AI_TAB_ID, name: 'AI Terminal', type: 'ai', shell: '', connected: false, ai: true },
{ id: 1, name: 'Local Shell', type: 'local', shell: '', connected: false },
])
- const [activeTab, setActiveTab] = useState(1)
+ const [activeTab, setActiveTab] = useState(() => {
+ if (savedTabs) {
+ const aiTab = savedTabs.find(t => t.ai)
+ return aiTab ? aiTab.id : savedTabs[0].id
+ }
+ return AI_TAB_ID
+ })
const [sshConnections, setSshConnections] = useState([])
const [systemTerminals, setSystemTerminals] = useState([])
const [showMenu, setShowMenu] = useState(false)
@@ -160,6 +230,8 @@ export default function Shell({ api }) {
theme: 'default',
})
+ useEffect(() => { settingsRef.current = terminalSettings }, [terminalSettings])
+
const [sshForm, setSshForm] = useState({
name: '', host: '', port: 22, user: '', key_path: '',
})
@@ -170,6 +242,9 @@ export default function Shell({ api }) {
const [aiTokens, setAiTokens] = useState(0)
const [aiAtLimit, setAiAtLimit] = useState(false)
const [analyzing, setAnalyzing] = useState(false)
+ const [showAnalysis, setShowAnalysis] = useState(false)
+ const [analysisContent, setAnalysisContent] = useState('')
+ const [renderTick, setRenderTick] = useState(0)
const aiMessagesRef = useRef(null)
const aiLoadedRef = useRef(false)
@@ -177,6 +252,21 @@ export default function Shell({ api }) {
aiMessagesRef.current?.scrollTo(0, aiMessagesRef.current.scrollHeight)
}, [aiMessages])
+ useEffect(() => {
+ const ms = aiLoading ? 1000 : 5000
+ const iv = setInterval(() => setRenderTick(t => t + 1), ms)
+ return () => clearInterval(iv)
+ }, [aiLoading])
+
+ useEffect(() => {
+ api.getShellAnalysis?.().then(d => {
+ if (d?.analysis) setAnalysisContent(d.analysis)
+ }).catch(() => {
+ const stored = localStorage.getItem('shell_analysis')
+ if (stored) setAnalysisContent(stored)
+ })
+ }, [])
+
useEffect(() => {
if (aiLoadedRef.current) return
aiLoadedRef.current = true
@@ -193,6 +283,11 @@ export default function Shell({ api }) {
})
}, [])
+ useEffect(() => {
+ const maxId = tabs.reduce((max, t) => Math.max(max, t.id), 0)
+ nextIdRef.current = maxId + 1
+ }, [])
+
useEffect(() => {
api.getTerminalSessions().then(d => {
setSshConnections(d.ssh || [])
@@ -213,12 +308,13 @@ export default function Shell({ api }) {
if (tabsRef.current[tabId]) return
const container = document.getElementById(`terminal-${tabId}`)
- if (!container) return
+ if (!container || container.offsetHeight === 0) return
+ const s = settingsRef.current
const { term, fitAddon } = createTerminal(container, {
- fontSize: terminalSettings.fontSize,
- fontFamily: terminalSettings.fontFamily,
- theme: terminalSettings.theme,
+ fontSize: s.fontSize,
+ fontFamily: s.fontFamily,
+ theme: s.theme,
})
let initPayload
@@ -271,26 +367,40 @@ export default function Shell({ api }) {
const tab = tabs.find(t => t.id === activeTab)
if (!tab) return
- const container = document.getElementById(`terminal-${tab.id}`)
- if (!container) return
-
- if (!tabsRef.current[tab.id]) {
- const timer = setTimeout(() => {
+ const tryInit = (attempt) => {
+ if (attempt > 10) return
+ const container = document.getElementById(`terminal-${tab.id}`)
+ if (!container || container.offsetHeight === 0) {
+ setTimeout(() => tryInit(attempt + 1), 100)
+ return
+ }
+ if (!tabsRef.current[tab.id]) {
initTerminal(tab.id, tab)
- requestAnimationFrame(() => {
- const entry = tabsRef.current[tab.id]
- if (entry) entry.fitAddon.fit()
- })
- }, 100)
- return () => clearTimeout(timer)
- } else {
+ }
requestAnimationFrame(() => {
const entry = tabsRef.current[tab.id]
if (entry) entry.fitAddon.fit()
})
}
+
+ tryInit(0)
}, [activeTab, tabs, initTerminal])
+ useEffect(() => {
+ const iv = setInterval(() => {
+ for (const tab of tabs) {
+ const entry = tabsRef.current[tab.id]
+ if (entry) {
+ const el = document.getElementById(`terminal-${tab.id}`)
+ if (el && el.offsetParent !== null) {
+ entry.fitAddon.fit()
+ }
+ }
+ }
+ }, 2000)
+ return () => clearInterval(iv)
+ }, [tabs])
+
useEffect(() => {
const onKey = (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return
@@ -309,8 +419,8 @@ export default function Shell({ api }) {
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])
+ const newTab = { id, name: name || `${t('shell.localShell')} ${tabs.length}`, type: 'local', shell: shell || '', connected: false }
+ setTabs(prev => { const next = [...prev, newTab]; localStorage.setItem(TABS_STORAGE_KEY, JSON.stringify(next.map(t => ({ id: t.id, name: t.name, type: t.type, shell: t.shell, ai: t.ai || false, host: t.host, port: t.port, user: t.user, key_path: t.key_path })))); return next })
setActiveTab(id)
setShowMenu(false)
}
@@ -328,14 +438,15 @@ export default function Shell({ api }) {
key_path: conn.key_path || '',
connected: false,
}
- setTabs(prev => [...prev, newTab])
+ setTabs(prev => { const next = [...prev, newTab]; localStorage.setItem(TABS_STORAGE_KEY, JSON.stringify(next.map(t => ({ id: t.id, name: t.name, type: t.type, shell: t.shell, ai: t.ai || false, host: t.host, port: t.port, user: t.user, key_path: t.key_path })))); return next })
setActiveTab(id)
setShowMenu(false)
}
const closeTab = (tabId, e) => {
if (e) e.stopPropagation()
- if (tabs.length <= 1) return
+ const tab = tabs.find(t => t.id === tabId)
+ if (!tab || tab.ai || tabs.length <= 1) return
if (tabsRef.current[tabId]) {
const { ws, resizeObserver, onResize, term } = tabsRef.current[tabId]
@@ -392,17 +503,25 @@ export default function Shell({ api }) {
}
const sendToTerminal = useCallback((code) => {
- const tab = tabs.find(t => t.id === activeTab)
- if (!tab) return
- const entry = tabsRef.current[tab.id]
- if (!entry?.ws || entry.ws.readyState !== WebSocket.OPEN) return
- entry.ws.send(JSON.stringify({ type: 'input', data: code + '\r' }))
- }, [tabs, activeTab])
+ const aiEntry = tabsRef.current[AI_TAB_ID]
+ if (aiEntry?.ws && aiEntry.ws.readyState === WebSocket.OPEN) {
+ aiEntry.ws.send(JSON.stringify({ type: 'input', data: code + '\r' }))
+ }
+ }, [])
+
+ const focusAiTerminal = useCallback(() => {
+ setActiveTab(AI_TAB_ID)
+ setTimeout(() => {
+ const entry = tabsRef.current[AI_TAB_ID]
+ if (entry) entry.term.focus()
+ }, 150)
+ }, [])
const handleAiSend = async () => {
if (!aiInput.trim() || aiLoading || aiAtLimit) return
const text = aiInput.trim()
setAiInput('')
+ focusAiTerminal()
if (text === '/clear') {
try {
@@ -453,11 +572,73 @@ export default function Shell({ api }) {
setAiLoading(false)
}
+ useEffect(() => {
+ const handler = (e) => {
+ const msg = e.detail?.message
+ if (!msg) return
+ setAiInput(msg)
+ setActiveTab(AI_TAB_ID)
+ setTimeout(() => {
+ handleAiSendDirect(msg)
+ }, 100)
+ }
+ window.addEventListener('ask-ai-terminal', handler)
+ return () => window.removeEventListener('ask-ai-terminal', handler)
+ }, [])
+
+ const handleAiSendDirect = async (text) => {
+ if (!text || aiLoading || aiAtLimit) return
+ setAiInput('')
+
+ if (text === '/clear') {
+ try {
+ await api.clearShellChat()
+ setAiMessages([{ role: 'assistant', content: t('shell.aiWelcome') || 'Contexte effacé. Prêt.' }])
+ setAiTokens(0)
+ setAiAtLimit(false)
+ } catch {}
+ return
+ }
+
+ setAiMessages(prev => [...prev, { role: 'user', content: text }])
+ setAiLoading(true)
+
+ try {
+ let accumulated = ''
+ await api.sendShellChat(text, {}, true, (partial) => {
+ accumulated = partial
+ setAiMessages(prev => {
+ const filtered = prev.filter(m => !m._streaming)
+ return [...filtered, { role: 'assistant', content: partial, _streaming: true }]
+ })
+ })
+
+ setAiMessages(prev => {
+ const filtered = prev.filter(m => !m._streaming)
+ return [...filtered, { role: 'assistant', content: accumulated }]
+ })
+ api.getShellChatHistory().then(d => {
+ setAiTokens(d.tokens || 0)
+ setAiAtLimit(d.at_limit || false)
+ }).catch(() => {})
+ } catch (err) {
+ if (err.message.includes('context limit')) {
+ setAiAtLimit(true)
+ }
+ setAiMessages(prev => [...prev.filter(m => !m._streaming), { role: 'assistant', content: `Erreur: ${err.message}` }])
+ }
+ setAiLoading(false)
+ }
+
const handleAnalyze = async () => {
setAnalyzing(true)
setAiMessages(prev => [...prev, { role: 'system', content: 'Analyse du système en cours...' }])
try {
const d = await api.analyzeSystem()
+ if (d.analysis) {
+ setAnalysisContent(d.analysis)
+ localStorage.setItem('shell_analysis', d.analysis)
+ }
setAiMessages(prev => [...prev.filter(m => m.content !== 'Analyse du système en cours...'), {
role: 'system',
content: 'Analyse système terminée et sauvegardée. Le contexte système est maintenant disponible.'
@@ -476,13 +657,14 @@ export default function Shell({ api }) {
{tabs.map((tab, i) => (
setActiveTab(tab.id)}
- onDoubleClick={(e) => startRename(tab.id, e)}
+ onDoubleClick={(e) => !tab.ai && startRename(tab.id, e)}
>
- {tab.type === 'ssh' &&
}
- {tab.type === 'local' &&
}
+ {tab.ai &&
}
+ {!tab.ai && tab.type === 'ssh' &&
}
+ {!tab.ai && tab.type === 'local' &&
}
{editingTab === tab.id ? (
{tab.name}
)}
{i + 1}
- {tabs.length > 1 && (
+ {!tab.ai && tabs.length > 1 && (