diff --git a/go.mod b/go.mod index 86e96fc..2383d31 100644 --- a/go.mod +++ b/go.mod @@ -4,6 +4,8 @@ go 1.24.3 require ( github.com/charmbracelet/huh v1.0.0 + github.com/creack/pty/v2 v2.0.1 + github.com/gorilla/websocket v1.5.3 gopkg.in/yaml.v3 v3.0.1 ) diff --git a/go.sum b/go.sum index 05e1d54..52799d5 100644 --- a/go.sum +++ b/go.sum @@ -44,10 +44,14 @@ github.com/clipperhouse/uax29/v2 v2.5.0 h1:x7T0T4eTHDONxFJsL94uKNKPHrclyFI0lm7+w github.com/clipperhouse/uax29/v2 v2.5.0/go.mod h1:Wn1g7MK6OoeDT0vL+Q0SQLDz/KpfsVRgg6W7ihQeh4g= github.com/creack/pty v1.1.24 h1:bJrF4RRfyJnbTJqzRLHzcGaZK1NeM5kTC9jGgovnR1s= github.com/creack/pty v1.1.24/go.mod h1:08sCNb52WyoAwi2QDyzUCTgcvVFhUzewun7wtTfvcwE= +github.com/creack/pty/v2 v2.0.1 h1:RDY1VY5b+7m2mfPsugucOYPIxMp+xal5ZheSyVzUA+k= +github.com/creack/pty/v2 v2.0.1/go.mod h1:2dSssKp3b86qYEMwA/FPwc3ff+kYpDdQI8osU8J7gxQ= github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY= github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto= github.com/erikgeiser/coninput v0.0.0-20211004153227-1c3628e74d0f h1:Y/CXytFA4m6baUTXGLOoWe4PQhGxaX0KpnayAqC48p4= github.com/erikgeiser/coninput v0.0.0-20211004153227-1c3628e74d0f/go.mod h1:vw97MGsxSvLiUE2X8qFplwetxpGLQrlU1Q9AUEIzCaM= +github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg= +github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE= github.com/lucasb-eyer/go-colorful v1.3.0 h1:2/yBRLdWBZKrf7gB40FoiKfAWYQ0lqNcbuQwVHXptag= github.com/lucasb-eyer/go-colorful v1.3.0/go.mod h1:R4dSotOR9KMtayYi1e77YzuveK+i7ruzyGqttikkLy0= github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY= diff --git a/internal/api/handlers.go b/internal/api/handlers.go index deda482..9793049 100644 --- a/internal/api/handlers.go +++ b/internal/api/handlers.go @@ -8,6 +8,7 @@ import ( "github.com/muyue/muyue/internal/config" "github.com/muyue/muyue/internal/lsp" "github.com/muyue/muyue/internal/mcp" + "github.com/muyue/muyue/internal/orchestrator" "github.com/muyue/muyue/internal/scanner" "github.com/muyue/muyue/internal/skills" "github.com/muyue/muyue/internal/updater" @@ -244,3 +245,83 @@ func (s *Server) handleTerminal(w http.ResponseWriter, r *http.Request) { } writeJSON(w, result) } + +func (s *Server) handleChat(w http.ResponseWriter, r *http.Request) { + if r.Method != "POST" { + writeError(w, "POST only", http.StatusMethodNotAllowed) + return + } + var body struct { + Message string `json:"message"` + Stream bool `json:"stream"` + } + if err := json.NewDecoder(r.Body).Decode(&body); err != nil { + writeError(w, err.Error(), http.StatusBadRequest) + return + } + if body.Message == "" { + writeError(w, "no message", http.StatusBadRequest) + return + } + + orb, err := orchestrator.New(s.config) + if err != nil { + writeError(w, err.Error(), http.StatusServiceUnavailable) + return + } + orb.SetSystemPrompt(`You are Muyue Studio's AI orchestrator. You help the user with software development tasks. You can: +- Create and manage development plans with step-by-step workflows +- Propose agents (tools like Crush, Claude Code, etc.) to execute specific tasks +- Track progress across multi-step tasks +- Suggest file modifications, code reviews, and architecture decisions + +Be concise, actionable, and structured. When proposing a plan, use clear numbered steps. When referencing files, use relative paths. You are embedded in the Muyue desktop app.`) + + if body.Stream { + w.Header().Set("Content-Type", "text/event-stream") + w.Header().Set("Cache-Control", "no-cache") + w.Header().Set("Connection", "keep-alive") + w.Header().Set("Access-Control-Allow-Origin", "*") + w.WriteHeader(http.StatusOK) + flusher, canFlush := w.(http.Flusher) + + chunkSize := 8 + result, err := orb.Send(body.Message) + if err != nil { + data, _ := json.Marshal(map[string]string{"error": err.Error()}) + w.Write([]byte("data: " + string(data) + "\n\n")) + if canFlush { + flusher.Flush() + } + return + } + + runes := []rune(result) + for i := 0; i < len(runes); i += chunkSize { + end := i + chunkSize + if end > len(runes) { + end = len(runes) + } + chunk := string(runes[i:end]) + data, _ := json.Marshal(map[string]string{"content": chunk}) + w.Write([]byte("data: " + string(data) + "\n\n")) + if canFlush { + flusher.Flush() + } + } + + data, _ := json.Marshal(map[string]string{"done": "true"}) + w.Write([]byte("data: " + string(data) + "\n\n")) + if canFlush { + flusher.Flush() + } + return + } + + result, err := orb.Send(body.Message) + if err != nil { + writeError(w, err.Error(), http.StatusInternalServerError) + return + } + writeJSON(w, map[string]string{"content": result}) +} diff --git a/internal/api/server.go b/internal/api/server.go index 21644f4..9150623 100644 --- a/internal/api/server.go +++ b/internal/api/server.go @@ -2,6 +2,7 @@ package api import ( "net/http" + "strings" "github.com/muyue/muyue/internal/config" "github.com/muyue/muyue/internal/scanner" @@ -37,10 +38,15 @@ func (s *Server) routes() { s.mux.HandleFunc("/api/scan", s.handleScan) s.mux.HandleFunc("/api/preferences", s.handleUpdatePreferences) s.mux.HandleFunc("/api/terminal", s.handleTerminal) + s.mux.HandleFunc("/api/ws/terminal", s.handleTerminalWS) s.mux.HandleFunc("/api/mcp/configure", s.handleMCPConfigure) } func (s *Server) ServeHTTP(w http.ResponseWriter, r *http.Request) { + if strings.HasPrefix(r.URL.Path, "/api/ws/") { + s.mux.ServeHTTP(w, r) + return + } w.Header().Set("Content-Type", "application/json") w.Header().Set("Access-Control-Allow-Origin", "*") w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, OPTIONS") diff --git a/internal/api/terminal.go b/internal/api/terminal.go new file mode 100644 index 0000000..0834256 --- /dev/null +++ b/internal/api/terminal.go @@ -0,0 +1,120 @@ +package api + +import ( + "encoding/json" + "log" + "net/http" + "os" + "os/exec" + "sync" + "time" + + "github.com/creack/pty/v2" + "github.com/gorilla/websocket" +) + +var upgrader = websocket.Upgrader{ + CheckOrigin: func(r *http.Request) bool { return true }, +} + +type wsMessage struct { + Type string `json:"type"` + Data string `json:"data"` + Rows uint16 `json:"rows,omitempty"` + Cols uint16 `json:"cols,omitempty"` +} + +func (s *Server) handleTerminalWS(w http.ResponseWriter, r *http.Request) { + conn, err := upgrader.Upgrade(w, r, nil) + if err != nil { + log.Printf("ws upgrade: %v", err) + return + } + defer conn.Close() + + shell := "/bin/sh" + if s, err := exec.LookPath("bash"); err == nil { + shell = s + } + + cmd := exec.Command(shell) + cmd.Env = append(os.Environ(), "TERM=xterm-256color") + + ptmx, err := pty.Start(cmd) + if err != nil { + log.Printf("pty start: %v", err) + conn.WriteJSON(wsMessage{Type: "error", Data: err.Error()}) + return + } + defer func() { + ptmx.Close() + if cmd.Process != nil { + cmd.Process.Kill() + cmd.Wait() + } + }() + + var once sync.Once + cleanup := func() { + once.Do(func() { + ptmx.Close() + if cmd.Process != nil { + cmd.Process.Kill() + cmd.Wait() + } + }) + } + + // PTY -> WebSocket + go func() { + buf := make([]byte, 4096) + for { + n, err := ptmx.Read(buf) + if err != nil { + cleanup() + conn.WriteMessage(websocket.CloseMessage, + websocket.FormatCloseMessage(websocket.CloseNormalClosure, "")) + return + } + if err := conn.WriteJSON(wsMessage{ + Type: "output", + Data: string(buf[:n]), + }); err != nil { + cleanup() + return + } + } + }() + + // WebSocket -> PTY + conn.SetReadLimit(1 << 20) // 1MB + conn.SetReadDeadline(time.Time{}) + + for { + _, raw, err := conn.ReadMessage() + if err != nil { + cleanup() + return + } + + var msg wsMessage + if err := json.Unmarshal(raw, &msg); err != nil { + continue + } + + switch msg.Type { + case "input": + if _, err := ptmx.Write([]byte(msg.Data)); err != nil { + cleanup() + return + } + case "resize": + if msg.Rows > 0 && msg.Cols > 0 { + pty.Setsize(ptmx, &pty.Winsize{ + Rows: msg.Rows, + Cols: msg.Cols, + }) + } + } + } +} diff --git a/internal/orchestrator/orchestrator.go b/internal/orchestrator/orchestrator.go index 792ec24..daa2d0c 100644 --- a/internal/orchestrator/orchestrator.go +++ b/internal/orchestrator/orchestrator.go @@ -41,11 +41,12 @@ type ChatResponse struct { } type Orchestrator struct { - config *config.MuyueConfig - provider *config.AIProvider - client *http.Client - history []Message - histMu sync.Mutex + config *config.MuyueConfig + provider *config.AIProvider + client *http.Client + history []Message + histMu sync.Mutex + systemPrompt string } var sharedHTTPClient = &http.Client{ @@ -77,6 +78,10 @@ func New(cfg *config.MuyueConfig) (*Orchestrator, error) { }, nil } +func (o *Orchestrator) SetSystemPrompt(prompt string) { + o.systemPrompt = prompt +} + func (o *Orchestrator) Send(userMessage string) (string, error) { o.histMu.Lock() o.history = append(o.history, Message{ @@ -88,9 +93,15 @@ func (o *Orchestrator) Send(userMessage string) (string, error) { o.history = o.history[len(o.history)-maxHistorySize:] } + messages := make([]Message, 0, len(o.history)+1) + if o.systemPrompt != "" { + messages = append(messages, Message{Role: "system", Content: o.systemPrompt}) + } + messages = append(messages, o.history...) + reqBody := ChatRequest{ Model: o.provider.Model, - Messages: o.history, + Messages: messages, Stream: false, } o.histMu.Unlock() diff --git a/internal/version/version.go b/internal/version/version.go index fef4eda..125e0ec 100644 --- a/internal/version/version.go +++ b/internal/version/version.go @@ -2,7 +2,7 @@ package version const ( Name = "muyue" - Version = "0.2.1" + Version = "0.3.0" Author = "La Légion de Muyue" ) diff --git a/web/package-lock.json b/web/package-lock.json index a128dc7..40cbe43 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -6,6 +6,9 @@ "": { "name": "muyue-web", "dependencies": { + "@xterm/addon-fit": "^0.11.0", + "@xterm/addon-web-links": "^0.12.0", + "@xterm/xterm": "^6.0.0", "react": "^19.2.5", "react-dom": "^19.2.5" }, @@ -396,6 +399,27 @@ } } }, + "node_modules/@xterm/addon-fit": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz", + "integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==", + "license": "MIT" + }, + "node_modules/@xterm/addon-web-links": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.12.0.tgz", + "integrity": "sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw==", + "license": "MIT" + }, + "node_modules/@xterm/xterm": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.0.0.tgz", + "integrity": "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==", + "license": "MIT", + "workspaces": [ + "addons/*" + ] + }, "node_modules/detect-libc": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", diff --git a/web/package.json b/web/package.json index 6f36f7a..e974527 100644 --- a/web/package.json +++ b/web/package.json @@ -8,6 +8,9 @@ "preview": "vite preview" }, "dependencies": { + "@xterm/addon-fit": "^0.11.0", + "@xterm/addon-web-links": "^0.12.0", + "@xterm/xterm": "^6.0.0", "react": "^19.2.5", "react-dom": "^19.2.5" }, diff --git a/web/src/api/client.js b/web/src/api/client.js index 8470963..fc6b267 100644 --- a/web/src/api/client.js +++ b/web/src/api/client.js @@ -27,6 +27,42 @@ const api = { configureMCP: () => request('/mcp/configure', { method: 'POST' }), savePreferences: (prefs) => request('/preferences', { method: 'PUT', body: JSON.stringify(prefs) }), runCommand: (command, cwd) => request('/terminal', { method: 'POST', body: JSON.stringify({ command, cwd }) }), + sendChat: (message, stream = true) => { + if (!stream) { + return request('/chat', { method: 'POST', body: JSON.stringify({ message, stream: false }) }) + } + return new Promise((resolve, reject) => { + fetch(`${API_BASE}/chat`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ message, stream: true }), + }).then(async (res) => { + if (!res.ok) { + const err = await res.json().catch(() => ({ error: res.statusText })) + reject(new Error(err.error || res.statusText)) + return + } + const reader = res.body.getReader() + const decoder = new TextDecoder() + let full = '' + while (true) { + const { done, value } = await reader.read() + if (done) break + const text = decoder.decode(value, { stream: true }) + for (const line of text.split('\n')) { + if (!line.startsWith('data: ')) continue + try { + const data = JSON.parse(line.slice(6)) + if (data.error) { reject(new Error(data.error)); return } + if (data.done) { resolve(full); return } + if (data.content) full += data.content + } catch {} + } + } + resolve(full) + }).catch(reject) + }) + }, } export default api diff --git a/web/src/components/Shell.jsx b/web/src/components/Shell.jsx index 77a9fe4..ca16c22 100644 --- a/web/src/components/Shell.jsx +++ b/web/src/components/Shell.jsx @@ -1,65 +1,142 @@ -import { useState, useRef, useEffect } from 'react' +import { useState, useRef, useEffect, useCallback } from 'react' +import { Terminal } from '@xterm/xterm' +import { FitAddon } from '@xterm/addon-fit' +import { WebLinksAddon } from '@xterm/addon-web-links' +import '@xterm/xterm/css/xterm.css' import { useI18n } from '../i18n' export default function Shell({ api }) { const { t } = useI18n() - const [history, setHistory] = useState([]) - const [input, setInput] = useState('') - const [cwd, setCwd] = useState('~') - const [showAi, setShowAi] = useState(false) + const termRef = useRef(null) + const fitAddonRef = useRef(null) + const wsRef = useRef(null) + const containerRef = useRef(null) + const [aiMessages, setAiMessages] = useState([ { role: 'ai', content: t('shell.aiWelcome') } ]) const [aiInput, setAiInput] = useState('') const [aiLoading, setAiLoading] = useState(false) - const [cmdHistory, setCmdHistory] = useState([]) - const [histIdx, setHistIdx] = useState(-1) - const outputRef = useRef(null) + const [connected, setConnected] = useState(false) + const aiMessagesRef = useRef(null) useEffect(() => { - outputRef.current?.scrollTo(0, outputRef.current.scrollHeight) - }, [history]) + aiMessagesRef.current?.scrollTo(0, aiMessagesRef.current.scrollHeight) + }, [aiMessages]) - const handleCommand = async (cmd) => { - if (!cmd.trim()) return - if (cmd === 'clear') { setHistory([]); return } + const getWsUrl = useCallback(() => { + const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:' + return `${proto}//${window.location.host}/api/ws/terminal` + }, []) - setCmdHistory(prev => [...prev, cmd]) - setHistIdx(-1) - setHistory(prev => [...prev, { type: 'cmd', text: `${cwd} $ ${cmd}` }]) + useEffect(() => { + if (!containerRef.current) return - try { - const res = await api.runCommand(cmd, cwd === '~' ? '' : cwd) - if (res.output) setHistory(prev => [...prev, { type: 'out', text: res.output }]) - if (res.error) setHistory(prev => [...prev, { type: 'err', text: res.error }]) - if (cmd.startsWith('cd ')) { - const dir = cmd.slice(3).trim() - setCwd(dir === '~' ? '~' : dir) + 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 fitAddon = new FitAddon() + const webLinksAddon = new WebLinksAddon() + term.loadAddon(fitAddon) + term.loadAddon(webLinksAddon) + term.open(containerRef.current) + fitAddon.fit() + + 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 })) } - } catch (err) { - setHistory(prev => [...prev, { type: 'err', text: err.message }]) } - } - const handleKeyDown = (e) => { - if (e.key === 'Enter') { - e.preventDefault() - handleCommand(input) - setInput('') - } else if (e.key === 'ArrowUp') { - e.preventDefault() - if (cmdHistory.length === 0) return - const newIdx = histIdx === -1 ? cmdHistory.length - 1 : Math.max(0, histIdx - 1) - setHistIdx(newIdx) - setInput(cmdHistory[newIdx]) - } else if (e.key === 'ArrowDown') { - e.preventDefault() - if (histIdx === -1) return - const newIdx = histIdx + 1 - if (newIdx >= cmdHistory.length) { setHistIdx(-1); setInput('') } - else { setHistIdx(newIdx); setInput(cmdHistory[newIdx]) } + 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 = () => { + setConnected(false) + term.write('\r\n\x1b[33m— Connection closed —\x1b[0m\r\n') + } + + ws.onerror = () => { + setConnected(false) + 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 })) + } + }) + + const onResize = () => { + if (containerRef.current?.offsetParent !== null) { + fitAddon.fit() + } + } + + const resizeObserver = new ResizeObserver(onResize) + resizeObserver.observe(containerRef.current) + window.addEventListener('resize', onResize) + + return () => { + window.removeEventListener('resize', onResize) + resizeObserver.disconnect() + ws.close() + term.dispose() + } + }, [getWsUrl]) const handleAiSend = async () => { if (!aiInput.trim() || aiLoading) return @@ -78,60 +155,37 @@ export default function Shell({ api }) { } return ( -
-
+
+
{t('shell.terminal')} - {cwd} + - -
- -
- {history.map((line, i) => ( -
- {line.text} -
- ))} -
- -
- › - setInput(e.target.value)} - onKeyDown={handleKeyDown} - autoFocus - />
+
- {showAi && ( -
-
{t('shell.aiAssistant')}
-
- {aiMessages.map((msg, i) => ( -
- {msg.content} -
- ))} - {aiLoading &&
} -
-
- setAiInput(e.target.value)} - onKeyDown={e => e.key === 'Enter' && handleAiSend()} - placeholder={t('shell.askAi')} - /> - -
+
+
{t('shell.aiAssistant')}
+
+ {aiMessages.map((msg, i) => ( +
+ {msg.content} +
+ ))} + {aiLoading &&
}
- )} +
+ setAiInput(e.target.value)} + onKeyDown={e => e.key === 'Enter' && handleAiSend()} + placeholder={t('shell.askAi')} + /> + +
+
) } diff --git a/web/src/components/Studio.jsx b/web/src/components/Studio.jsx index 9965c20..c7e1482 100644 --- a/web/src/components/Studio.jsx +++ b/web/src/components/Studio.jsx @@ -1,37 +1,320 @@ -import { useState, useRef, useEffect } from 'react' +import { useState, useRef, useEffect, useCallback } from 'react' import { useI18n } from '../i18n' +const MSG_ID = () => Math.random().toString(36).slice(2, 10) + +function parsePlanBlocks(text) { + const plans = [] + const regex = /(?:^|\n)(?:###?\s+|(?:\d+\.\s+)?)\[?PLAN[^\]]*\]?:?\s*(.*?)(?=\n(?:###?\s+|(?:\d+\.\s+)?)\[?PLAN|\n## |\n### |\n$)/gis + const matches = text.matchAll(regex) + for (const m of matches) { + plans.push({ id: MSG_ID(), title: m[1].trim(), content: m[0].trim() }) + } + if (plans.length === 0 && /plan|workflow/i.test(text)) { + const lines = text.split('\n').filter(l => /^\s*[-*]\s|^\s*\d+\.\s/.test(l)) + if (lines.length > 0) { + plans.push({ id: MSG_ID(), title: text.split('\n')[0].slice(0, 80), content: text.trim() }) + } + } + return plans +} + +function parseAgentMentions(text) { + const agents = new Set() + const names = ['crush', 'claude', 'claude code', 'ollama', 'copilot', 'cursor', 'agent'] + for (const name of names) { + if (new RegExp('\\b' + name + '\\b', 'i').test(text)) { + agents.add(name) + } + } + return [...agents] +} + +function parseSteps(text) { + const steps = [] + const lines = text.split('\n') + for (const line of lines) { + const match = line.match(/^\s*(\d+)[.)]\s+(.+)/) + if (match) { + steps.push({ num: match[1], text: match[2].trim() }) + } + const bulletMatch = line.match(/^\s*[-*]\s+(.+)/) + if (bulletMatch) { + steps.push({ num: String(steps.length + 1), text: bulletMatch[1].trim() }) + } + } + return steps +} + +function renderContent(text) { + const parts = [] + let i = 0 + 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, '>') + .replace(/\*\*(.+?)\*\*/g, '$1') + .replace(/`([^`]+)`/g, '$1') + .replace(/^### (.+)$/gm, '

$1

') + .replace(/^## (.+)$/gm, '

$1

') + .replace(/^\s*[-*] (.+)$/gm, '$1') + .replace(/^\s*(\d+)[.)] (.+)$/gm, '$1$2') + return html +} + +function MessageBubble({ msg }) { + const { t } = useI18n() + const [expanded, setExpanded] = useState(null) + const plans = msg.role === 'ai' ? parsePlanBlocks(msg.content) : [] + const steps = msg.role === 'ai' ? parseSteps(msg.content) : [] + const agents = msg.role === 'ai' ? parseAgentMentions(msg.content) : [] + + return ( +
+ {msg.role === 'ai' && ( +
+ +
+ )} +
+
+ {renderContent(msg.content).map((part, i) => + part.type === 'code' ? ( +
+ {part.lang &&
{part.lang}
} + 
{part.content}
+
+ ) : ( + + ) + )} +
+ {msg.role === 'ai' && (plans.length > 0 || agents.length > 0) && ( +
+ {plans.map(plan => ( +
setExpanded(expanded === plan.id ? null : plan.id)}> + + {plan.title.slice(0, 60)} + {expanded === plan.id ? '\u25B2' : '\u25BC'} +
+ ))} + {agents.map(agent => ( + + {agent} + + ))} +
+ )} + {expanded && plans.find(p => p.id === expanded) && ( +
+
{t('studio.planDetail')}
+ {steps.length > 0 && ( +
+ {steps.map(step => ( +
+ {step.num} + {step.text} +
+ ))} +
+ )} +
+ 
{plans.find(p => p.id === expanded).content}
+
+
+ )} +
+
+ ) +} + +function StreamingMessage({ content }) { + return ( +
+
+ +
+
+
+ {renderContent(content).map((part, i) => + part.type === 'code' ? ( +
+ {part.lang &&
{part.lang}
} + 
{part.content}
+
+ ) : ( + + ) + )} +
+ +
+
+ ) +} + +function ContextPanel({ messages, selectedPlan, onSelectPlan }) { + const { t } = useI18n() + const [tab, setTab] = useState('plans') + + const allPlans = [] + const allAgents = new Set() + const activities = [] + + for (let i = messages.length - 1; i >= 0; i--) { + const msg = messages[i] + if (msg.role === 'ai') { + const plans = parsePlanBlocks(msg.content) + for (const plan of plans) { + if (!allPlans.find(p => p.title === plan.title)) { + allPlans.push({ ...plan, msgIndex: i }) + } + } + parseAgentMentions(msg.content).forEach(a => allAgents.add(a)) + } + activities.push({ role: msg.role, content: msg.content.slice(0, 100), time: msg.time }) + } + + const tabs = [ + { id: 'plans', label: t('studio.plans'), count: allPlans.length }, + { id: 'agents', label: t('studio.agents'), count: allAgents.size }, + { id: 'activity', label: t('studio.activity'), count: activities.length }, + ] + + return ( +
+
+ {tabs.map(t2 => ( +
setTab(t2.id)} + > + {t2.label} + {t2.count > 0 && {t2.count}} +
+ ))} +
+
+ {tab === 'plans' && ( + allPlans.length > 0 ? ( +
+ {allPlans.map(plan => ( +
onSelectPlan(selectedPlan === plan.id ? null : plan.id)} + > + +
{plan.title}
+ {parseSteps(plan.content).length} {t('studio.steps')} +
+ ))} +
+ ) : ( +
{t('studio.noPlansYet')}
+ ) + )} + {tab === 'agents' && ( + allAgents.size > 0 ? ( +
+ {[...allAgents].map(agent => ( +
+
+ {agent} + {t('studio.mentioned')} +
+ ))} +
+ ) : ( +
{t('studio.noAgentsYet')}
+ ) + )} + {tab === 'activity' && ( +
+ {activities.map((act, i) => ( +
+
+
+ {act.role === 'user' ? t('studio.you') + ': ' : 'AI: '} + {act.content}{act.content.length >= 100 ? '...' : ''} +
+
+ ))} +
+ )} +
+
+ ) +} + export default function Studio({ api }) { - const { t, layout } = useI18n() + const { t } = useI18n() const [messages, setMessages] = useState([ - { role: 'ai', content: t('studio.welcome') }, - { role: 'ai', content: t('studio.configureHint') }, + { id: MSG_ID(), role: 'ai', content: t('studio.welcomeNew'), time: new Date() }, ]) const [input, setInput] = useState('') - const [sidebarPanel, setSidebarPanel] = useState('chat') const [loading, setLoading] = useState(false) + const [streaming, setStreaming] = useState('') + const [selectedPlan, setSelectedPlan] = useState(null) + const [showContext, setShowContext] = useState(true) const messagesEnd = useRef(null) + const textareaRef = useRef(null) useEffect(() => { messagesEnd.current?.scrollIntoView({ behavior: 'smooth' }) - }, [messages]) + }, [messages, streaming]) - const handleSend = () => { + useEffect(() => { + if (textareaRef.current) { + textareaRef.current.style.height = 'auto' + textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 200) + 'px' + } + }, [input]) + + const handleSend = useCallback(async () => { if (!input.trim() || loading) return const text = input.trim() - setMessages(prev => [...prev, { role: 'user', content: text }]) setInput('') + const userMsg = { id: MSG_ID(), role: 'user', content: text, time: new Date() } + setMessages(prev => [...prev, userMsg]) setLoading(true) + setStreaming('') - api.runCommand(`echo "AI response simulation for: ${text}"`, '') - .then(res => { - setMessages(prev => [...prev, { role: 'ai', content: res.output || res.error || t('studio.noResponse') }]) - }) - .catch(err => { - setMessages(prev => [...prev, { role: 'ai', content: `${t('studio.error')}: ${err.message}` }]) - }) - .finally(() => setLoading(false)) - } + try { + let accumulated = '' + await api.sendChat(text, true).then(full => { + accumulated = full + }).catch(() => {}) + + const finalContent = accumulated || t('studio.noResponse') + setMessages(prev => [...prev, { id: MSG_ID(), role: 'ai', content: finalContent, time: new Date() }]) + } catch (err) { + setMessages(prev => [...prev, { id: MSG_ID(), role: 'ai', content: `${t('studio.error')}: ${err.message}`, time: new Date() }]) + } finally { + setLoading(false) + setStreaming('') + } + }, [input, loading, api, t]) const handleKeyDown = (e) => { if (e.key === 'Enter' && !e.shiftKey) { @@ -40,99 +323,69 @@ export default function Studio({ api }) { } } - const sidebarItems = [ - { id: 'chat', label: t('studio.chat'), icon: '#' }, - { id: 'agents', label: t('studio.agents'), icon: '*' }, - { id: 'workflows', label: t('studio.workflows'), icon: '~' }, - ] - return ( -
-
-
- - {t('studio.chat')} - {loading && } - -
- -
- {messages.map((msg, i) => ( -
- {msg.content} -
+
+
+
+ {messages.map(msg => ( + ))} + {streaming && } + {loading && !streaming && ( +
+
+ +
+
+
+ +
+
+
+ )}
-
- setInput(e.target.value)} - onKeyDown={handleKeyDown} - placeholder={t('studio.placeholder')} - disabled={loading} - /> - +
+
+