前端未显示 Claude 代码流式输出,但后端正常工作
Problem Description
Claudia's frontend shows an infinite loading spinner when executing Claude Code commands, even though the backend Rust code is working perfectly and Claude Code commands execute successfully. Expected Behavior Claude Code output should stream in real-time in the Claudia UI User should see command responses, tool use, and final results Loading spinner should stop when command completes Actual Behavior Infinite loading spinner with no output displayed Commands execute successfully in background (verified in logs) Frontend never shows Claude's responses Only way to see output is through terminal debug logs Environment OS: macOS (Apple Silicon) Claudia Version: 0.1.0 Claude Code: Working (tested independently) Build: Custom build with PATH fix applied Steps to Reproduce Start Claudia from Terminal: /Applications/Claudia.app/Contents/MacOS/claudia Create or continue a Claude Code session Send any command (e.g., "check if Netlify.toml exists") Observe infinite spinner in UI despite successful execution in logs Technical Analysis ✅ Backend Working Correctly The Rust backend (src-tauri/src/commands/Claude.rs) is functioning perfectly: Rust// Backend properly spawns Claude with streaming let mut child = cmd.spawn().map_err(|e| format!("Failed to spawn Claude: {}", e))?; // Correctly emits session-specific events app.emit(&format!("Claude-output:{}", session_id), &line); app.emit(&format!("Claude-error:{}", session_id), &line); app.emit(&format!("Claude-complete:{}", session_id), status); // Also emits generic events for backward compatibility app.emit("Claude-output", &line); app.emit("Claude-error", &line); app.emit("Claude-complete", status); Verified Working Backend Logs [2025-06-29T20:01:27Z INFO claudia::commands::Claude] Spawned Claude process with PID: Some(54091) and session ID: Claude-1751227287324-98577d0f-75d4-4a9f-89e4-a6487083e625 [2025-06-29T20:01:42Z DEBUG claudia::commands::Claude] Claude stdout: {"type":"assistant","message":...} [2025-06-29T20:01:56Z INFO claudia::commands::Claude] Claude process exited with status: exit status: 0 Cost/Duration: $0.47, 21 seconds, 781 output tokens - Command completed successfully ❌ Frontend Issue The React frontend (in src/ directory) is not properly: Listening to session-specific events like Claude-output:{session_id} Updating the UI with streamed output Stopping the loading spinner when Claude-complete:{session_id} is received Root Cause Event listener mismatch between what the backend emits and what the frontend listens for: Backend emits: Claude-output:Claude-1751227287324-... Frontend probably listens for: Claude-output (generic) ️ Suggested Fix Option 1: Fix Frontend Event Listeners Update React components to listen to session-specific events: TypeScript// Instead of: listen('Claude-output', callback); // Use: listen(Claude-output:${sessionId}, callback); listen(Claude-error:${sessionId}, errorCallback); listen(Claude-complete:${sessionId},
内容来源: winfunc/opcode