diff --git a/web/src/components/Shell.jsx b/web/src/components/Shell.jsx
index 6d857e0..3c3fb79 100644
--- a/web/src/components/Shell.jsx
+++ b/web/src/components/Shell.jsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import { useState, useRef, useEffect, useCallback, useMemo, memo, Fragment } from 'react'
import { Terminal as XTerm } from '@xterm/xterm'
import { FitAddon } from '@xterm/addon-fit'
import { WebLinksAddon } from '@xterm/addon-web-links'
@@ -409,6 +409,7 @@ export default function Shell({ api, isSudo }) {
})
const activeTabRef = useRef(activeTab)
useEffect(() => { activeTabRef.current = activeTab }, [activeTab])
+ const tabIdsKey = useMemo(() => tabs.map(t => t.id).join(','), [tabs])
const [sshConnections, setSshConnections] = useState([])
const [systemTerminals, setSystemTerminals] = useState([])
const [showMenu, setShowMenu] = useState(false)
@@ -474,8 +475,22 @@ export default function Shell({ api, isSudo }) {
const aiLoadedRef = useRef(false)
const aiLoadingRef = useRef(false)
const analysisSavingRef = useRef(false)
+ const _streamRafRef = useRef(null)
+ const _streamPendingRef = useRef(null)
+
+ const _flushStreamUpdate = useCallback(() => {
+ _streamRafRef.current = null
+ const pending = _streamPendingRef.current
+ if (!pending) return
+ _streamPendingRef.current = null
+ setAiMessages(pending)
+ }, [])
useEffect(() => {
+ if (_streamRafRef.current) {
+ cancelAnimationFrame(_streamRafRef.current)
+ _streamRafRef.current = null
+ }
aiMessagesRef.current?.scrollTo(0, aiMessagesRef.current.scrollHeight)
}, [aiMessages])
@@ -760,7 +775,7 @@ export default function Shell({ api, isSudo }) {
pending.forEach(clearTimeout)
observer?.disconnect()
}
- }, [tabs, initTerminal, initPendingTabs, configLoaded])
+ }, [tabIdsKey, initTerminal, initPendingTabs, configLoaded])
useEffect(() => {
const entry = tabsRef.current[activeTab]
@@ -778,12 +793,18 @@ export default function Shell({ api, isSudo }) {
const wrapper = document.querySelector('.shell-layout')?.parentElement
if (wrapper && wrapper.classList.contains('tab-hidden')) return
const entry = tabsRef.current[activeTabRef.current]
- if (entry) {
- entry.fitAddon.fit()
+ if (entry && entry.fitAddon && entry.term) {
+ const container = document.getElementById(`terminal-${activeTabRef.current}`)
+ if (!container) return
+ const rect = container.getBoundingClientRect()
+ const dims = entry.fitAddon.proposeDimensions()
+ if (dims && entry.term.cols !== dims.cols || entry.term.rows !== dims.rows) {
+ entry.fitAddon.fit()
+ }
}
}, 2000)
return () => clearInterval(iv)
- }, [tabs])
+ }, [tabIdsKey])
useEffect(() => {
return () => {
@@ -813,25 +834,26 @@ export default function Shell({ api, isSudo }) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return
if (!e.altKey && !(e.key === 'Tab' && e.shiftKey)) return
+ const currentTabs = tabsRef.current._tabList || []
if (e.key === 'Tab' && e.shiftKey) {
const shellTab = document.querySelector('.shell-layout')
if (!shellTab || shellTab.closest('.tab-hidden')) return
e.preventDefault()
- const idx = tabs.findIndex(t => t.id === activeTab)
- const next = (idx + 1) % tabs.length
- setActiveTab(tabs[next].id)
+ const idx = currentTabs.findIndex(t => t.id === activeTabRef.current)
+ const next = (idx + 1) % currentTabs.length
+ setActiveTab(currentTabs[next].id)
return
}
const num = parseInt(e.key)
- if (num >= 1 && num <= tabs.length) {
+ if (num >= 1 && num <= currentTabs.length) {
e.preventDefault()
- setActiveTab(tabs[num - 1].id)
+ setActiveTab(currentTabs[num - 1].id)
}
}
window.addEventListener('keydown', onKey)
return () => window.removeEventListener('keydown', onKey)
- }, [tabs])
+ }, [])
useEffect(() => {
if (showSearch && searchInputRef.current) {
@@ -1103,16 +1125,31 @@ export default function Shell({ api, isSudo }) {
setAiLoading(true)
try {
- let accumulated = ''
- let toolCalls = []
+ let segments = []
+ let textStartIdx = 0
const controller = new AbortController()
+ const _updateLastText = (text) => {
+ if (!text) return
+ const last = segments.length > 0 ? segments[segments.length - 1] : null
+ if (last && last.type === 'text') {
+ last.content = text
+ } else {
+ segments.push({ type: 'text', content: text })
+ }
+ }
+
await api.sendShellChat(trimmed, {}, true, (partial, event) => {
if (event && event.tool_call) {
- toolCalls = [...toolCalls, { call: event.tool_call, result: null }]
+ _updateLastText(partial.slice(textStartIdx))
+ textStartIdx = partial.length
+ segments.push({ type: 'tool', call: event.tool_call, result: null })
+ const snap = segments.map(s => ({ ...s, ...(s.type === 'tool' ? { call: s.call, result: s.result } : {}) }))
+ if (_streamRafRef.current) { cancelAnimationFrame(_streamRafRef.current); _streamRafRef.current = null }
+ _streamPendingRef.current = null
setAiMessages(prev => {
const filtered = prev.filter(m => !m._streaming)
- return [...filtered, { role: 'assistant', content: accumulated, _streaming: true, _tabId: currentTab, _toolCalls: [...toolCalls] }]
+ return [...filtered, { role: 'assistant', _streaming: true, _tabId: currentTab, _segments: snap }]
})
return
}
@@ -1120,12 +1157,15 @@ export default function Shell({ api, isSudo }) {
if (event.tool_result.sudo_blocked) {
setSudoModal({ command: event.tool_result.command || event.tool_result.content })
}
- const idx = toolCalls.findIndex(tc => tc.call && tc.call.tool_call_id === event.tool_result.tool_call_id)
- if (idx >= 0) {
- toolCalls[idx] = { ...toolCalls[idx], result: event.tool_result }
+ const segIdx = segments.findIndex(s => s.type === 'tool' && s.call && s.call.tool_call_id === event.tool_result.tool_call_id)
+ if (segIdx >= 0) {
+ segments[segIdx].result = event.tool_result
+ const snap = segments.map(s => ({ ...s, ...(s.type === 'tool' ? { call: s.call, result: s.result } : {}) }))
+ if (_streamRafRef.current) { cancelAnimationFrame(_streamRafRef.current); _streamRafRef.current = null }
+ _streamPendingRef.current = null
setAiMessages(prev => {
const filtered = prev.filter(m => !m._streaming)
- return [...filtered, { role: 'assistant', content: accumulated, _streaming: true, _tabId: currentTab, _toolCalls: [...toolCalls] }]
+ return [...filtered, { role: 'assistant', _streaming: true, _tabId: currentTab, _segments: snap }]
})
}
return
@@ -1133,23 +1173,37 @@ export default function Shell({ api, isSudo }) {
if (event && (event.thinking !== undefined || event.thinking_end)) {
return
}
- accumulated = partial
- setAiMessages(prev => {
+ _updateLastText(partial.slice(textStartIdx))
+ const nextMsgs = prev => {
const filtered = prev.filter(m => !m._streaming)
- return [...filtered, { role: 'assistant', content: partial, _streaming: true, _tabId: currentTab, _toolCalls: toolCalls.length > 0 ? [...toolCalls] : undefined }]
- })
+ const snap = segments.map(s => ({ ...s, ...(s.type === 'tool' ? { call: s.call, result: s.result } : {}) }))
+ return [...filtered, { role: 'assistant', _streaming: true, _tabId: currentTab, _segments: snap }]
+ }
+ _streamPendingRef.current = nextMsgs
+ if (!_streamRafRef.current) {
+ _streamRafRef.current = requestAnimationFrame(_flushStreamUpdate)
+ }
}, controller.signal)
- const finalMsg = { role: 'assistant', content: accumulated, _tabId: currentTab }
- if (toolCalls.length > 0) {
- finalMsg._toolCalls = toolCalls
+ if (_streamRafRef.current) { cancelAnimationFrame(_streamRafRef.current); _streamRafRef.current = null }
+ _streamPendingRef.current = null
+
+ const allText = segments.filter(s => s.type === 'text').map(s => s.content).join('')
+ const toolSegs = segments.filter(s => s.type === 'tool')
+
+ const finalMsg = { role: 'assistant', content: allText, _tabId: currentTab }
+ if (toolSegs.length > 0 || segments.length > 1) {
finalMsg.content = JSON.stringify({
- content: accumulated,
- tool_calls: toolCalls.map(tc => tc.call),
- tool_results: toolCalls.map(tc => ({
- tool_call_id: tc.call?.tool_call_id,
- result: tc.result?.content || '',
- is_error: tc.result?.is_error || false,
+ segments: segments.map(s => s.type === 'text'
+ ? { type: 'text', content: s.content }
+ : { type: 'tool', call: s.call, result: { content: s.result?.content || '', is_error: s.result?.is_error || false, tool_call_id: s.call?.tool_call_id } }
+ ),
+ content: allText,
+ tool_calls: toolSegs.map(s => s.call),
+ tool_results: toolSegs.map(s => ({
+ tool_call_id: s.call?.tool_call_id,
+ result: s.result?.content || '',
+ is_error: s.result?.is_error || false,
})),
})
}
@@ -1159,10 +1213,10 @@ export default function Shell({ api, isSudo }) {
return [...filtered, finalMsg]
})
- if (analysisSavingRef.current && accumulated) {
+ if (analysisSavingRef.current && allText) {
analysisSavingRef.current = false
- setAnalysisContent(accumulated)
- try { localStorage.setItem('shell_analysis', accumulated) } catch {}
+ setAnalysisContent(allText)
+ try { localStorage.setItem('shell_analysis', allText) } catch {}
setAnalyzing(false)
}
@@ -1182,7 +1236,7 @@ export default function Shell({ api, isSudo }) {
}
setAiLoading(false)
aiLoadingRef.current = false
- }, [api, t, aiAtLimit, focusAiTerminal])
+ }, [api, t, aiAtLimit, focusAiTerminal, _flushStreamUpdate])
const handleAiSend = () => _sendAiMessage(aiInput, false)
@@ -1190,7 +1244,7 @@ export default function Shell({ api, isSudo }) {
const handler = (e) => {
const msg = e.detail?.message
if (!msg) return
- setAiInput(msg)
+ setAiInput('')
setTimeout(() => _sendAiMessage(msg, true), 100)
}
window.addEventListener('ask-ai-terminal', handler)
@@ -1378,11 +1432,9 @@ Sois concret : cite les vraies versions, les vrais chemins, les vrais nombres. L
-
-
Analyste Système
+
Analyste Système
+
-
setShowAnalysis(true)}
@@ -1627,7 +1679,39 @@ function MermaidBlock({ code }) {
return
}
-function ShellAIMessage({ msg, sendToTerminal, terminalTabId }) {
+const _renderParts = (parts, copiedIdx, setCopiedIdx, sendToTerminal, terminalTabId) => parts.map((part, i) => {
+ if (part.type === 'code' && part.lang === 'mermaid') {
+ return (
+
+ )
+ }
+ if (part.type === 'code') {
+ return (
+
+ {part.lang &&
{part.lang}
}
+
{part.content}
+
+ {
+ navigator.clipboard.writeText(part.content)
+ setCopiedIdx(i)
+ setTimeout(() => setCopiedIdx(null), 1500)
+ }} title="Copier">
+
+ sendToTerminal(part.content, terminalTabId)} title="Envoyer au terminal">
+
+
+
{content}
}
+ // Ordered segments (streaming or final with segments)
+ let segments = msg._segments || null
+ if (!segments) {
+ try {
+ const parsed = JSON.parse(content)
+ if (parsed && Array.isArray(parsed.segments)) {
+ segments = parsed.segments
+ }
+ } catch {}
+ }
+
+ if (segments && segments.length > 0) {
+ const hasTools = segments.some(s => s.type === 'tool')
+ if (hasTools) {
+ return (
+
+ {segments.map((seg, i) => {
+ if (seg.type === 'text') {
+ if (!seg.content) return null
+ return {_renderParts(renderContent(seg.content), copiedIdx, setCopiedIdx, sendToTerminal, terminalTabId)}
+ }
+ if (seg.type === 'tool') {
+ const r = seg.result
+ const result = r && (r.content !== undefined || r.is_error !== undefined)
+ ? { content: r.content, is_error: r.is_error }
+ : null
+ return
+ )
+ }
+ }
+
+ // Fallback: old format (all tools then all text)
let parsedToolCalls = null
let parsedToolResults = null
let displayContent = content
- let streamingToolCalls = msg._toolCalls || null
try {
const parsed = JSON.parse(content)
if (parsed && Array.isArray(parsed.tool_calls)) {
- if (!streamingToolCalls) {
- parsedToolCalls = parsed.tool_calls
- parsedToolResults = parsed.tool_results || null
- }
+ parsedToolCalls = parsed.tool_calls
+ parsedToolResults = parsed.tool_results || null
displayContent = parsed.content || ''
}
} catch {}
@@ -1660,9 +1777,6 @@ function ShellAIMessage({ msg, sendToTerminal, terminalTabId }) {
return (
- {streamingToolCalls && streamingToolCalls.map((tc, i) => (
-
- ))}
{parsedToolCalls && parsedToolCalls.map((tc, i) => {
const resultData = parsedToolResults
? parsedToolResults.find(r => r.tool_call_id === tc.tool_call_id)
@@ -1672,37 +1786,7 @@ function ShellAIMessage({ msg, sendToTerminal, terminalTabId }) {
: null
return
})}
- {parts.map((part, i) => {
- if (part.type === 'code' && part.lang === 'mermaid') {
- return (
-
- )
- }
- if (part.type === 'code') {
- return (
-
- {part.lang &&
{part.lang}
}
-
{part.content}
-
- {
- navigator.clipboard.writeText(part.content)
- setCopiedIdx(i)
- setTimeout(() => setCopiedIdx(null), 1500)
- }} title="Copier">
-
- sendToTerminal(part.content, terminalTabId)} title="Envoyer au terminal">
-
-
-
- )
- }
- return
- })}
+ {_renderParts(parts, copiedIdx, setCopiedIdx, sendToTerminal, terminalTabId)}
{icon}
{label}
+ {isAgent && !result && (
+ {currentCount}/{maxAgents}
+ )}
{!result && {isErr ? '✗' : '✓'} }
{argsPreview}
+ {isAgent && !result && (
+
+ handleModeChange('sync')}
+ >
+ Exécuter et attendre
+
+ handleModeChange('async')}
+ >
+ Exécuter en arrière-plan
+
+
+ )}
{truncatedResult && (
{truncatedResult}
@@ -249,10 +280,16 @@ function FeedItem({ msg }) {
let parsedToolCalls = null
let parsedToolResults = null
+ let parsedSegments = null
let displayContent = msg.content
try {
const parsed = JSON.parse(msg.content)
- if (parsed && Array.isArray(parsed.tool_calls)) {
+ if (parsed && Array.isArray(parsed.segments)) {
+ parsedSegments = parsed.segments
+ parsedToolCalls = parsed.tool_calls || null
+ parsedToolResults = parsed.tool_results || null
+ displayContent = parsed.content || ''
+ } else if (parsed && Array.isArray(parsed.tool_calls)) {
parsedToolCalls = parsed.tool_calls
parsedToolResults = parsed.tool_results || null
displayContent = parsed.content || ''
@@ -292,32 +329,63 @@ function FeedItem({ msg }) {
))}
)}
- {parsedToolCalls && parsedToolCalls.map((tc, i) => {
- const resultData = parsedToolResults
- ? parsedToolResults.find(r => r.tool_call_id === tc.tool_call_id)
- : null
- const result = resultData
- ? { content: resultData.result, is_error: resultData.is_error }
- : null
- return
- })}
- {cleanContent && (
-
- {renderContent(cleanContent).map((part, i) =>
- part.type === 'code' ? (
-
- ) : (
-
+ {parsedSegments && parsedSegments.some(s => s.type === 'tool') ? (
+ parsedSegments.map((seg, i) => {
+ if (seg.type === 'text') {
+ if (!seg.content) return null
+ const c = seg.content.replace(/
]*>[\s\S]*?<\/think>/gi, '')
+ if (!c) return null
+ return (
+
+ {renderContent(c).map((part, j) =>
+ part.type === 'code' ? (
+
)
+ }
+ if (seg.type === 'tool') {
+ const r = seg.result
+ const result = r && (r.content !== undefined || r.is_error !== undefined)
+ ? { content: r.content, is_error: r.is_error }
+ : null
+ return
+ {renderContent(cleanContent).map((part, i) =>
+ part.type === 'code' ? (
+
)}
-
+
)}
)
}
-function StreamingItem({ content, thinking, toolCalls }) {
+function StreamingItem({ content, thinking, toolCalls, segments }) {
const rank = RANKS.general
const cleanContent = content.replace(/
]*>[\s\S]*?<\/think>/gi, '')
const hasToolCalls = toolCalls && toolCalls.length > 0
@@ -333,6 +401,8 @@ function StreamingItem({ content, thinking, toolCalls }) {
return formatText(thinking)
}, [thinking])
+ const hasOrderedSegments = segments && segments.some(s => s.type === 'tool')
+
return (
@@ -346,25 +416,54 @@ function StreamingItem({ content, thinking, toolCalls }) {
{rank.label}
{thinking &&
}
- {hasToolCalls && toolCalls.map((tc, i) => (
-
- ))}
- {!thinking && !cleanContent && !hasToolCalls && (
+ {hasOrderedSegments ? (
+ segments.map((seg, i) => {
+ if (seg.type === 'text') {
+ if (!seg.content) return null
+ const parts = renderContent(seg.content)
+ return (
+
+ {parts.map((part, j) =>
+ part.type === 'code' ? (
+
+ )
+ }
+ if (seg.type === 'tool') {
+ return
+ }
+ return null
+ })
+ ) : (
+ <>
+ {hasToolCalls && toolCalls.map((tc, i) => (
+
+ ))}
+ {cleanContent && (
+
+ {renderedContent.map((part, i) =>
+ part.type === 'code' ? (
+
+ )}
+
+ )}
+ {!thinking && !cleanContent && !hasToolCalls && !hasOrderedSegments && (
)}
- {cleanContent && (
-
- {renderedContent.map((part, i) =>
- part.type === 'code' ? (
-
+ {!hasOrderedSegments && cleanContent && (
+
)}
@@ -379,12 +478,17 @@ export default function Studio({ api }) {
const [streaming, setStreaming] = useState('')
const [streamThinking, setStreamThinking] = useState('')
const [streamToolCalls, setStreamToolCalls] = useState([])
+ const [streamSegments, setStreamSegments] = useState(null)
const [loaded, setLoaded] = useState(false)
const [tokenInfo, setTokenInfo] = useState({ used: 0, max: 150000, summarizeAt: 120000 })
const [contextCollapsed, setContextCollapsed] = useState(false)
const [messagesCollapsed, setMessagesCollapsed] = useState(false)
const [sudoModal, setSudoModal] = useState(null)
const [attachedImages, setAttachedImages] = useState([])
+ const [activeAgents, setActiveAgents] = useState({ crush: 0, claude: 0 })
+ const [toolModes, setToolModes] = useState({})
+ const MAX_CRUSH_AGENTS = 2
+ const MAX_CLAUDE_AGENTS = 2
const messagesEnd = useRef(null)
const feedRef = useRef(null)
const textareaRef = useRef(null)
@@ -584,9 +688,19 @@ export default function Studio({ api }) {
abortRef.current = controller
try {
- let accumulated = ''
+ let segments = []
+ let textStartIdx = 0
let thinking = ''
- let toolCalls = []
+
+ const _updateLastText = (text) => {
+ if (!text) return
+ const last = segments.length > 0 ? segments[segments.length - 1] : null
+ if (last && last.type === 'text') {
+ last.content = text
+ } else {
+ segments.push({ type: 'text', content: text })
+ }
+ }
await api.sendChat(text, true, (partial, event) => {
if (event && (event.thinking_start || event.thinking_end || event.thinking !== undefined)) {
@@ -597,28 +711,47 @@ export default function Studio({ api }) {
return
}
if (event && event.tool_call) {
- toolCalls = [...toolCalls, { call: event.tool_call, result: null }]
- setStreamToolCalls([...toolCalls])
- accumulated = ''
- setStreaming('')
+ _updateLastText(partial.slice(textStartIdx))
+ textStartIdx = partial.length
+ segments.push({ type: 'tool', call: event.tool_call, result: null })
+ const toolName = event.tool_call.name
+ if (toolName === 'crush_run' || toolName === 'claude_run') {
+ const agentType = toolName === 'crush_run' ? 'crush' : 'claude'
+ setActiveAgents(prev => ({ ...prev, [agentType]: prev[agentType] + 1 }))
+ }
+ const snap = segments.map(s => ({ ...s }))
+ setStreamToolCalls(snap.filter(s => s.type === 'tool'))
+ setStreamSegments(snap)
+ setStreaming(partial)
return
}
if (event && event.tool_result) {
if (event.tool_result.sudo_blocked) {
setSudoModal({ command: event.tool_result.command || event.tool_result.content })
}
- const idx = toolCalls.findIndex(tc => tc.call && tc.call.tool_call_id === event.tool_result.tool_call_id)
- if (idx >= 0) {
- toolCalls[idx] = { ...toolCalls[idx], result: event.tool_result }
- setStreamToolCalls([...toolCalls])
+ const segIdx = segments.findIndex(s => s.type === 'tool' && s.call && s.call.tool_call_id === event.tool_result.tool_call_id)
+ if (segIdx >= 0) {
+ segments[segIdx].result = event.tool_result
+ const toolName = segments[segIdx].call?.name
+ if (toolName === 'crush_run' || toolName === 'claude_run') {
+ const agentType = toolName === 'crush_run' ? 'crush' : 'claude'
+ setActiveAgents(prev => ({ ...prev, [agentType]: Math.max(0, prev[agentType] - 1) }))
+ }
+ const snap = segments.map(s => ({ ...s }))
+ setStreamToolCalls(snap.filter(s => s.type === 'tool'))
+ setStreamSegments(snap)
}
return
}
- accumulated = partial
+ _updateLastText(partial.slice(textStartIdx))
setStreaming(partial)
+ const snap = segments.map(s => ({ ...s }))
+ setStreamSegments(snap)
}, controller.signal, images)
- const finalContent = accumulated || t('studio.noResponse')
+ const allText = segments.filter(s => s.type === 'text').map(s => s.content).join('')
+ const toolSegs = segments.filter(s => s.type === 'tool')
+ const finalContent = allText || t('studio.noResponse')
const aiMsg = {
id: (Date.now() + 1).toString(),
role: 'assistant',
@@ -626,14 +759,18 @@ export default function Studio({ api }) {
time: new Date().toISOString(),
}
if (thinking) aiMsg.thinking = thinking
- if (toolCalls.length > 0) {
+ if (toolSegs.length > 0 || segments.length > 1) {
aiMsg.content = JSON.stringify({
- content: finalContent,
- tool_calls: toolCalls.map(tc => tc.call),
- tool_results: toolCalls.map(tc => ({
- tool_call_id: tc.call?.tool_call_id,
- result: tc.result?.content || '',
- is_error: tc.result?.is_error || false,
+ segments: segments.map(s => s.type === 'text'
+ ? { type: 'text', content: s.content }
+ : { type: 'tool', call: s.call, result: { content: s.result?.content || '', is_error: s.result?.is_error || false, tool_call_id: s.call?.tool_call_id } }
+ ),
+ content: allText,
+ tool_calls: toolSegs.map(s => s.call),
+ tool_results: toolSegs.map(s => ({
+ tool_call_id: s.call?.tool_call_id,
+ result: s.result?.content || '',
+ is_error: s.result?.is_error || false,
})),
})
}
@@ -661,6 +798,9 @@ export default function Studio({ api }) {
setStreaming('')
setStreamThinking('')
setStreamToolCalls([])
+ setStreamSegments(null)
+ setActiveAgents({ crush: 0, claude: 0 })
+ setToolModes({})
abortRef.current = null
refreshTokens()
}
@@ -672,6 +812,10 @@ export default function Studio({ api }) {
}
}, [])
+ const handleToolModeChange = useCallback((toolCallId, mode) => {
+ setToolModes(prev => ({ ...prev, [toolCallId]: mode }))
+ }, [])
+
const COMMANDS = ['/clear', '/summarize', '/help', '/model', '/model change']
const handleKeyDown = (e) => {
@@ -695,29 +839,61 @@ export default function Studio({ api }) {
if (afterSlash) {
const partial = afterSlash[0]
const matches = COMMANDS.filter(c => c.startsWith(partial) && c !== partial)
- if (matches.length === 1) {
- const completed = matches[0] + ' '
- const newText = val.slice(0, pos - afterSlash[0].length) + completed + val.slice(pos)
- setInput(newText)
- requestAnimationFrame(() => {
- ta.selectionStart = ta.selectionEnd = pos - afterSlash[0].length + completed.length
- })
+ if (matches.length >= 1) {
+ let completed = matches[0]
+ for (const m of matches) {
+ while (!m.startsWith(completed)) completed = completed.slice(0, -1)
+ }
+ if (completed === partial && matches.length === 1) completed = matches[0]
+ if (completed.length > partial.length) {
+ const suffix = completed[completed.length - 1] === ' ' ? '' : (matches.length === 1 ? ' ' : '')
+ completed += suffix
+ const newText = val.slice(0, pos - afterSlash[0].length) + completed + val.slice(pos)
+ setInput(newText)
+ requestAnimationFrame(() => {
+ ta.selectionStart = ta.selectionEnd = pos - afterSlash[0].length + completed.length
+ })
+ }
}
}
}
}
+ const [summarizedExpanded, setSummarizedExpanded] = useState(false)
+
const handleToggleCollapsed = useCallback(() => {
setMessagesCollapsed(prev => !prev)
}, [])
const renderMessages = () => {
- if (messagesCollapsed && messages.length > 4) {
+ const summarizedMsgs = messages.filter(m => m.summarized)
+ const activeMsgs = messages.filter(m => !m.summarized)
+
+ const renderSummaryBlock = () => summarizedMsgs.length > 0 && (
+
+
setSummarizedExpanded(prev => !prev)}>
+
+
+
Résumé · {summarizedMsgs.length} messages
+
{summarizedExpanded ? 'masquer' : 'voir'}
+
+ {summarizedExpanded && summarizedMsgs.map(msg => (
+
+ ))}
+
+ )
+
+ if (messagesCollapsed && activeMsgs.length > 4) {
const visibleCount = 4
- const hiddenCount = messages.length - visibleCount
+ const hiddenCount = activeMsgs.length - visibleCount
return (
<>
- {messages.slice(0, visibleCount).map(msg => (
+ {renderSummaryBlock()}
+ {activeMsgs.slice(0, visibleCount).map(msg => (
))}
@@ -730,9 +906,15 @@ export default function Studio({ api }) {
)
}
- return messages.map(msg => (
-
- ))
+
+ return (
+ <>
+ {renderSummaryBlock()}
+ {activeMsgs.map(msg => (
+
+ ))}
+
+ )
}
if (!loaded) {
@@ -753,7 +935,7 @@ export default function Studio({ api }) {
{renderMessages()}
{(streaming || streamThinking || loading || streamToolCalls.length > 0) && (
-
+
)}
diff --git a/web/src/i18n/en.js b/web/src/i18n/en.js
index 5a4d0b3..0cc4767 100644
--- a/web/src/i18n/en.js
+++ b/web/src/i18n/en.js
@@ -211,8 +211,27 @@ const en = {
resetConfirm: 'Are you sure? All preferences will be erased.',
resetDone: 'Settings reset.',
applyStarship: 'Apply starship',
+ apply: 'Apply',
+ remove: 'Remove',
starshipApplied: 'Starship theme applied! Restart your shell to see the result.',
starshipError: 'Failed to apply starship theme.',
+ systemConfig: 'System Configuration',
+ aiToolsConfig: 'Tools & Environments',
+ configureViaAI: 'Configure',
+ toolCrushDesc: 'Autonomous AI agent for code writing and refactoring.',
+ toolClaudeDesc: 'AI coding assistant by Anthropic.',
+ toolGhDesc: 'Command-line interface for GitHub.',
+ toolDockerDesc: 'Application containerization platform.',
+ toolGoDesc: 'Programming language and runtime environment.',
+ toolNodeDesc: 'JavaScript runtime and package manager.',
+ toolPythonDesc: 'Programming language, pip and uv manager.',
+ toolStarshipDesc: 'Modern and customizable shell prompt.',
+ systemUpdate: 'System Update',
+ systemUpdateDescSudo: 'Updates the system and all tools (sshpass, crush, claude, gh, etc.).',
+ systemUpdateDescNoSudo: 'Shows update commands to run manually.',
+ updateBtn: 'Update',
+ notInstalled: 'Not installed',
+ install: 'Install',
},
}
diff --git a/web/src/i18n/fr.js b/web/src/i18n/fr.js
index a811078..b006f36 100644
--- a/web/src/i18n/fr.js
+++ b/web/src/i18n/fr.js
@@ -211,8 +211,27 @@ const fr = {
resetConfirm: '\u00cates-vous s\u00fbr ? Toutes les pr\u00e9f\u00e9rences seront effac\u00e9es.',
resetDone: 'Param\u00e8tres r\u00e9initialis\u00e9s.',
applyStarship: 'Appliquer starship',
+ apply: 'Appliquer',
+ remove: 'Retirer',
starshipApplied: 'Th\u00e8me starship appliqu\u00e9 ! Red\u00e9marrez votre shell pour voir le r\u00e9sultat.',
starshipError: '\u00c9chec de l\u2019application du th\u00e8me starship.',
+ systemConfig: 'Configuration Syst\u00e8me',
+ aiToolsConfig: 'Outils & Environnements',
+ configureViaAI: 'Configurer',
+ toolCrushDesc: 'Agent IA autonome pour l\u2019\u00e9criture et le refactoring de code.',
+ toolClaudeDesc: 'Assistant de codage IA par Anthropic.',
+ toolGhDesc: 'Interface en ligne de commande pour GitHub.',
+ toolDockerDesc: 'Plateforme de conteneurisation d\u2019applications.',
+ toolGoDesc: 'Langage de programmation et environnement d\u2019ex\u00e9cution.',
+ toolNodeDesc: 'Environnement d\u2019ex\u00e9cution JavaScript et gestionnaire de paquets.',
+ toolPythonDesc: 'Langage de programmation, pip et gestionnaire uv.',
+ toolStarshipDesc: 'Prompt shell moderne et personnalisable.',
+ systemUpdate: 'Mise à jour système',
+ systemUpdateDescSudo: 'Met à jour le système et tous les outils (sshpass, crush, claude, gh, etc.).',
+ systemUpdateDescNoSudo: 'Affiche les commandes de mise à jour à exécuter manuellement.',
+ updateBtn: 'Mettre à jour',
+ notInstalled: 'Non installé',
+ install: 'Installer',
},
}
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index a0dc8b5..a09cb17 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -379,11 +379,11 @@ input::placeholder { color: var(--text-disabled); }
.shell-menu-item-row { display: flex; align-items: center; }
.shell-menu-item-icon {
display: flex; align-items: center; justify-content: center;
- width: 24px; height: 24px; border-radius: var(--radius);
- background: transparent; border: none; color: var(--text-disabled);
+ width: 26px; height: 26px; border-radius: var(--radius);
+ background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
cursor: pointer; transition: all 0.1s; flex-shrink: 0;
}
-.shell-menu-item-icon:hover { background: var(--accent-bg); color: var(--accent); }
+.shell-menu-item-icon:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-dim); }
.shell-menu-empty {
font-size: 12px; color: var(--text-disabled); padding: 8px 10px;
font-style: italic;
@@ -459,7 +459,7 @@ input::placeholder { color: var(--text-disabled); }
.shell-ai-token-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s, background 0.3s; }
.shell-ai-token-fill.warn { background: var(--warning); }
.shell-ai-token-text { font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary); white-space: nowrap; }
-.ai-panel-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
+.ai-panel-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.ai-message { padding: 8px 12px; border-radius: var(--radius); font-size: 13px; line-height: 1.5; word-break: break-word; }
.ai-message.user { background: var(--bg-elevated); border-left: 3px solid var(--accent-bright); color: var(--text-primary); }
.ai-message.user.analysis { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated)); }
@@ -511,7 +511,7 @@ input::placeholder { color: var(--text-disabled); }
.shell-mermaid-loading { padding: 16px; text-align: center; color: var(--text-tertiary); font-size: 12px; }
.shell-mermaid-error { padding: 10px 12px; color: var(--accent-bright); font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; }
-.ai-message table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12px; display: block; overflow-x: auto; }
+.ai-message table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12px; display: block; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.ai-message thead, .ai-message tbody { display: table-row-group; }
.ai-message th { background: var(--bg-surface); padding: 4px 8px; text-align: left; font-weight: 600; border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
.ai-message td { padding: 3px 8px; border: 1px solid var(--border); color: var(--text-primary); white-space: nowrap; }
@@ -1024,8 +1024,10 @@ input::placeholder { color: var(--text-disabled); }
.feed-content tr:nth-child(even) td { background: var(--bg-surface); }
.feed-content hr, .ai-message hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.inline-code { background: var(--bg-input); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 13px; color: var(--accent-muted); }
-.msg-h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 10px 0 4px; display: block; }
-.msg-h4 { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin: 8px 0 3px; display: block; }
+.msg-h1 { font-size: 20px; font-weight: 800; color: var(--accent); margin: 16px 0 8px; display: block; }
+.msg-h2 { font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 12px 0 6px; display: block; }
+.msg-h3 { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 10px 0 4px; display: block; }
+.msg-h4 { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 8px 0 3px; display: block; }
.msg-bullet { display: block; padding-left: 4px; margin: 1px 0; color: var(--text-primary); }
.msg-step { display: flex; gap: 8px; align-items: baseline; margin: 1px 0; }
.msg-step-num { color: var(--accent); font-weight: 700; font-family: var(--font-mono); font-size: 13px; flex-shrink: 0; min-width: 20px; }
@@ -1133,6 +1135,22 @@ input::placeholder { color: var(--text-disabled); }
.feed-collapsed-count { font-size: 10px; color: var(--text-disabled); font-family: var(--font-mono); }
.feed-expanded-messages { animation: fadeIn 0.2s ease-out; }
+.feed-summary-block { margin: 4px 0; }
+.feed-summary-header {
+ display: flex; align-items: center; gap: 10px;
+ padding: 8px 16px;
+ background: var(--bg-surface); border: 1px solid var(--border);
+ border-radius: var(--radius); cursor: pointer;
+ transition: all 0.2s ease;
+}
+.feed-summary-header:hover { background: var(--bg-hover); border-color: var(--accent-dim); }
+.feed-summary-header svg { color: var(--accent); flex-shrink: 0; }
+.feed-summary-text { font-size: 11px; color: var(--text-tertiary); flex: 1; font-weight: 600; }
+.feed-summary-toggle { font-size: 10px; color: var(--accent); font-family: var(--font-mono); }
+
+.skill-list-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
+.skills-list { display: flex; flex-direction: column; gap: 2px; }
+
/* ── Studio Tool Blocks ── */
.studio-tool-block {
background: var(--bg-surface);
@@ -1294,3 +1312,51 @@ input::placeholder { color: var(--text-disabled); }
.shell-xterm-instance .xterm-link:hover {
color: var(--accent-muted) !important;
}
+
+.config-ai-tools-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+ gap: 10px;
+ margin-bottom: 8px;
+}
+
+.config-ai-tool-card {
+ display: flex;
+ flex-direction: column;
+ padding: 14px;
+ border-radius: var(--radius);
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ transition: border-color 0.15s;
+ min-height: 120px;
+}
+
+.config-ai-tool-card:hover {
+ border-color: var(--accent-dim);
+}
+
+.config-ai-tool-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 8px;
+}
+
+.config-ai-tool-icon {
+ font-size: 18px;
+ line-height: 1;
+}
+
+.config-ai-tool-name {
+ font-weight: 600;
+ font-size: 13px;
+ color: var(--text-primary);
+}
+
+.config-ai-tool-desc {
+ font-size: 11px;
+ color: var(--text-tertiary);
+ line-height: 1.4;
+ margin-bottom: 10px;
+ flex: 1;
+}