|
|
|
|
@@ -149,7 +149,7 @@ function createTerminal(container, settings = {}) {
|
|
|
|
|
return { term, fitAddon }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function connectWebSocket(term, fitAddon, initPayload) {
|
|
|
|
|
function connectWebSocket(term, fitAddon, initPayload, onStateChange) {
|
|
|
|
|
const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
|
|
|
|
|
const ws = new WebSocket(`${proto}//${window.location.host}/api/ws/terminal`)
|
|
|
|
|
|
|
|
|
|
@@ -159,6 +159,7 @@ function connectWebSocket(term, fitAddon, initPayload) {
|
|
|
|
|
if (dims) {
|
|
|
|
|
ws.send(JSON.stringify({ type: 'resize', rows: dims.rows, cols: dims.cols }))
|
|
|
|
|
}
|
|
|
|
|
if (onStateChange) onStateChange(true)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
ws.addEventListener('message', (event) => {
|
|
|
|
|
@@ -176,10 +177,12 @@ function connectWebSocket(term, fitAddon, initPayload) {
|
|
|
|
|
|
|
|
|
|
ws.addEventListener('close', () => {
|
|
|
|
|
term.write('\r\n\x1b[33m— Connection closed —\x1b[0m\r\n')
|
|
|
|
|
if (onStateChange) onStateChange(false)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
ws.addEventListener('error', () => {
|
|
|
|
|
term.write('\r\n\x1b[31m— Connection error —\x1b[0m\r\n')
|
|
|
|
|
if (onStateChange) onStateChange(false)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
term.onData((data) => {
|
|
|
|
|
@@ -335,15 +338,23 @@ export default function Shell({ api }) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const ws = connectWebSocket(term, fitAddon, initPayload)
|
|
|
|
|
const onWsState = (connected) => {
|
|
|
|
|
if (!connected) saveBuffer()
|
|
|
|
|
setTabs(prev => prev.map(t => t.id === tabId ? { ...t, connected } : t))
|
|
|
|
|
}
|
|
|
|
|
const ws = connectWebSocket(term, fitAddon, initPayload, onWsState)
|
|
|
|
|
|
|
|
|
|
// Restore saved terminal buffer
|
|
|
|
|
try {
|
|
|
|
|
const savedBuffers = JSON.parse(localStorage.getItem(TERMINAL_BUFFER_KEY) || '{}')
|
|
|
|
|
if (savedBuffers[tabId]) {
|
|
|
|
|
term.write(savedBuffers[tabId])
|
|
|
|
|
}
|
|
|
|
|
} catch {}
|
|
|
|
|
// Restore saved terminal buffer after first output settles
|
|
|
|
|
const restoreBuffer = () => {
|
|
|
|
|
try {
|
|
|
|
|
const savedBuffers = JSON.parse(localStorage.getItem(TERMINAL_BUFFER_KEY) || '{}')
|
|
|
|
|
if (savedBuffers[tabId]) {
|
|
|
|
|
term.write('\x1b[90m— session restaurée —\x1b[0m\r\n')
|
|
|
|
|
term.write(savedBuffers[tabId])
|
|
|
|
|
}
|
|
|
|
|
} catch {}
|
|
|
|
|
}
|
|
|
|
|
setTimeout(restoreBuffer, 300)
|
|
|
|
|
|
|
|
|
|
const saveBuffer = () => {
|
|
|
|
|
try {
|
|
|
|
|
@@ -361,41 +372,28 @@ export default function Shell({ api }) {
|
|
|
|
|
|
|
|
|
|
const bufferSaveInterval = setInterval(saveBuffer, 5000)
|
|
|
|
|
|
|
|
|
|
// Detect clear command to wipe saved buffer
|
|
|
|
|
let inputBuffer = ''
|
|
|
|
|
term.onData((data) => {
|
|
|
|
|
if (data === '\r') {
|
|
|
|
|
const cmd = inputBuffer.replace(/[\x1b\x00-\x1f]/g, '').trim().toLowerCase()
|
|
|
|
|
if (cmd === 'clear') {
|
|
|
|
|
try {
|
|
|
|
|
const clearBufferOnClear = () => {
|
|
|
|
|
try {
|
|
|
|
|
const buf = term.buffer.active
|
|
|
|
|
const lineY = buf.viewportY + buf.cursorY
|
|
|
|
|
const line = buf.getLine(lineY)
|
|
|
|
|
if (line) {
|
|
|
|
|
const text = line.translateToString(true).trim().toLowerCase()
|
|
|
|
|
if (text === 'clear' || text === '$ clear' || text.endsWith(' clear')) {
|
|
|
|
|
const savedBuffers = JSON.parse(localStorage.getItem(TERMINAL_BUFFER_KEY) || '{}')
|
|
|
|
|
delete savedBuffers[tabId]
|
|
|
|
|
localStorage.setItem(TERMINAL_BUFFER_KEY, JSON.stringify(savedBuffers))
|
|
|
|
|
} catch {}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
inputBuffer = ''
|
|
|
|
|
} else if (data === '\x7f' || data === '\b') {
|
|
|
|
|
inputBuffer = inputBuffer.slice(0, -1)
|
|
|
|
|
} else if (data === '\x03') {
|
|
|
|
|
inputBuffer = ''
|
|
|
|
|
} else if (data.length === 1 && data.charCodeAt(0) >= 32) {
|
|
|
|
|
inputBuffer += data
|
|
|
|
|
} catch {}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
term.onData((data) => {
|
|
|
|
|
if (data === '\r') {
|
|
|
|
|
clearBufferOnClear()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
ws.onopen = () => {
|
|
|
|
|
setTabs(prev => prev.map(t => t.id === tabId ? { ...t, connected: true } : t))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ws.onclose = () => {
|
|
|
|
|
saveBuffer()
|
|
|
|
|
setTabs(prev => prev.map(t => t.id === tabId ? { ...t, connected: false } : t))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ws.onerror = () => {
|
|
|
|
|
setTabs(prev => prev.map(t => t.id === tabId ? { ...t, connected: false } : t))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onResize = () => {
|
|
|
|
|
const el = document.getElementById(`terminal-${tabId}`)
|
|
|
|
|
if (el && el.offsetParent !== null) {
|
|
|
|
|
@@ -507,21 +505,30 @@ export default function Shell({ api }) {
|
|
|
|
|
|
|
|
|
|
const closeTab = (tabId, e) => {
|
|
|
|
|
if (e) e.stopPropagation()
|
|
|
|
|
const tab = tabs.find(t => t.id === tabId)
|
|
|
|
|
if (!tab || tabs.length <= 1) return
|
|
|
|
|
|
|
|
|
|
if (tabsRef.current[tabId]) {
|
|
|
|
|
const { ws, resizeObserver, onResize, term, bufferSaveInterval, saveBuffer } = tabsRef.current[tabId]
|
|
|
|
|
if (saveBuffer) saveBuffer()
|
|
|
|
|
if (bufferSaveInterval) clearInterval(bufferSaveInterval)
|
|
|
|
|
window.removeEventListener('resize', onResize)
|
|
|
|
|
resizeObserver.disconnect()
|
|
|
|
|
ws.close()
|
|
|
|
|
term.dispose()
|
|
|
|
|
delete tabsRef.current[tabId]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setTabs(prev => {
|
|
|
|
|
if (prev.length <= 1) return prev
|
|
|
|
|
const tab = prev.find(t => t.id === tabId)
|
|
|
|
|
if (!tab) return prev
|
|
|
|
|
|
|
|
|
|
const entry = tabsRef.current[tabId]
|
|
|
|
|
if (entry) {
|
|
|
|
|
entry.saveBuffer?.()
|
|
|
|
|
if (entry.bufferSaveInterval) clearInterval(entry.bufferSaveInterval)
|
|
|
|
|
window.removeEventListener('resize', entry.onResize)
|
|
|
|
|
entry.resizeObserver.disconnect()
|
|
|
|
|
entry.ws.close()
|
|
|
|
|
entry.term.dispose()
|
|
|
|
|
delete tabsRef.current[tabId]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Clean buffer from localStorage
|
|
|
|
|
try {
|
|
|
|
|
const savedBuffers = JSON.parse(localStorage.getItem(TERMINAL_BUFFER_KEY) || '{}')
|
|
|
|
|
delete savedBuffers[tabId]
|
|
|
|
|
localStorage.setItem(TERMINAL_BUFFER_KEY, JSON.stringify(savedBuffers))
|
|
|
|
|
} catch {}
|
|
|
|
|
|
|
|
|
|
const next = prev.filter(t => t.id !== tabId)
|
|
|
|
|
if (activeTab === tabId && next.length > 0) {
|
|
|
|
|
setActiveTab(next[next.length - 1].id)
|
|
|
|
|
@@ -566,11 +573,18 @@ export default function Shell({ api }) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const sendToTerminal = useCallback((code) => {
|
|
|
|
|
const entry = tabsRef.current[activeTab]
|
|
|
|
|
if (entry?.ws && entry.ws.readyState === WebSocket.OPEN) {
|
|
|
|
|
entry.ws.send(JSON.stringify({ type: 'input', data: code + '\r' }))
|
|
|
|
|
const sendToTerminal = useCallback((code, tabId) => {
|
|
|
|
|
const targetId = tabId || activeTab
|
|
|
|
|
const entry = tabsRef.current[targetId]
|
|
|
|
|
if (!entry) {
|
|
|
|
|
console.warn('sendToTerminal: no terminal initialized for tab', targetId)
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (!entry.ws || entry.ws.readyState !== WebSocket.OPEN) {
|
|
|
|
|
console.warn('sendToTerminal: WebSocket not ready for tab', targetId)
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
entry.ws.send(JSON.stringify({ type: 'input', data: code + '\r' }))
|
|
|
|
|
}, [activeTab])
|
|
|
|
|
|
|
|
|
|
const focusAiTerminal = useCallback(() => {
|
|
|
|
|
@@ -578,13 +592,16 @@ export default function Shell({ api }) {
|
|
|
|
|
if (entry) entry.term.focus()
|
|
|
|
|
}, [activeTab])
|
|
|
|
|
|
|
|
|
|
const handleAiSend = async () => {
|
|
|
|
|
if (!aiInput.trim() || aiLoading || aiAtLimit) return
|
|
|
|
|
const text = aiInput.trim()
|
|
|
|
|
setAiInput('')
|
|
|
|
|
focusAiTerminal()
|
|
|
|
|
const _sendAiMessage = useCallback(async (text, fromEvent = false) => {
|
|
|
|
|
if (!text || !text.trim() || aiLoading || aiAtLimit) return
|
|
|
|
|
const trimmed = text.trim()
|
|
|
|
|
|
|
|
|
|
if (text === '/clear') {
|
|
|
|
|
if (!fromEvent) {
|
|
|
|
|
setAiInput('')
|
|
|
|
|
focusAiTerminal()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (trimmed === '/clear') {
|
|
|
|
|
try {
|
|
|
|
|
await api.clearShellChat()
|
|
|
|
|
setAiMessages([{ role: 'assistant', content: t('shell.aiWelcome') || 'Contexte effacé. Prêt.' }])
|
|
|
|
|
@@ -594,65 +611,20 @@ export default function Shell({ api }) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (text === '/help') {
|
|
|
|
|
if (trimmed === '/help') {
|
|
|
|
|
setAiMessages(prev => [...prev,
|
|
|
|
|
{ role: 'user', content: text },
|
|
|
|
|
{ role: 'user', content: trimmed },
|
|
|
|
|
{ role: 'assistant', content: 'Commandes disponibles:\n• /clear — Effacer la conversation\n• /help — Afficher l\'aide\n\nJe ne peux pas exécuter de code. Les blocs de code proposés peuvent être copiés ou envoyés directement au terminal actif.' }
|
|
|
|
|
])
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setAiMessages(prev => [...prev, { role: 'user', content: text }])
|
|
|
|
|
setAiMessages(prev => [...prev, { role: 'user', content: trimmed }])
|
|
|
|
|
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 }]
|
|
|
|
|
})
|
|
|
|
|
// Refresh token count
|
|
|
|
|
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 handleAiSendDirect = useCallback(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) => {
|
|
|
|
|
await api.sendShellChat(trimmed, {}, true, (partial) => {
|
|
|
|
|
accumulated = partial
|
|
|
|
|
setAiMessages(prev => {
|
|
|
|
|
const filtered = prev.filter(m => !m._streaming)
|
|
|
|
|
@@ -675,20 +647,20 @@ export default function Shell({ api }) {
|
|
|
|
|
setAiMessages(prev => [...prev.filter(m => !m._streaming), { role: 'assistant', content: `Erreur: ${err.message}` }])
|
|
|
|
|
}
|
|
|
|
|
setAiLoading(false)
|
|
|
|
|
}, [api, t, aiLoading, aiAtLimit])
|
|
|
|
|
}, [api, t, aiLoading, aiAtLimit, focusAiTerminal])
|
|
|
|
|
|
|
|
|
|
const handleAiSend = () => _sendAiMessage(aiInput, false)
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const handler = (e) => {
|
|
|
|
|
const msg = e.detail?.message
|
|
|
|
|
if (!msg) return
|
|
|
|
|
setAiInput(msg)
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
handleAiSendDirect(msg)
|
|
|
|
|
}, 100)
|
|
|
|
|
setTimeout(() => _sendAiMessage(msg, true), 100)
|
|
|
|
|
}
|
|
|
|
|
window.addEventListener('ask-ai-terminal', handler)
|
|
|
|
|
return () => window.removeEventListener('ask-ai-terminal', handler)
|
|
|
|
|
}, [handleAiSendDirect])
|
|
|
|
|
}, [_sendAiMessage])
|
|
|
|
|
|
|
|
|
|
const handleAnalyze = async () => {
|
|
|
|
|
setAnalyzing(true)
|
|
|
|
|
@@ -858,7 +830,7 @@ export default function Shell({ api }) {
|
|
|
|
|
</div>
|
|
|
|
|
<div className="ai-panel-messages" ref={aiMessagesRef}>
|
|
|
|
|
{aiMessages.map((msg, i) => (
|
|
|
|
|
<ShellAIMessage key={i} msg={msg} sendToTerminal={sendToTerminal} />
|
|
|
|
|
<ShellAIMessage key={i} msg={msg} sendToTerminal={sendToTerminal} terminalTabId={activeTab} />
|
|
|
|
|
))}
|
|
|
|
|
{aiLoading && <div style={{ textAlign: 'center', padding: 8 }}><span className="spinner" /></div>}
|
|
|
|
|
</div>
|
|
|
|
|
@@ -950,7 +922,7 @@ export default function Shell({ api }) {
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function ShellAIMessage({ msg, sendToTerminal }) {
|
|
|
|
|
function ShellAIMessage({ msg, sendToTerminal, terminalTabId }) {
|
|
|
|
|
const role = msg.role === 'user' ? 'user' : msg.role === 'system' ? 'system' : 'assistant'
|
|
|
|
|
const content = msg.content || ''
|
|
|
|
|
|
|
|
|
|
@@ -976,7 +948,7 @@ function ShellAIMessage({ msg, sendToTerminal }) {
|
|
|
|
|
<button onClick={() => navigator.clipboard.writeText(part.content)} title="Copier">
|
|
|
|
|
<Copy size={12} /> Copier
|
|
|
|
|
</button>
|
|
|
|
|
<button onClick={() => sendToTerminal(part.content)} title="Envoyer au terminal">
|
|
|
|
|
<button onClick={() => sendToTerminal(part.content, terminalTabId)} title="Envoyer au terminal">
|
|
|
|
|
<Send size={12} /> Terminal
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|