feat: implement real-time streaming message system

- Add comprehensive streaming infrastructure with StreamController and collectors
- Implement agent_message_delta event handling for live response updates
- Add StreamingMessage component with proper markdown rendering and cursor animation
- Enable show_raw_agent_reasoning=true in codex client for streaming support
- Update UI components to handle streaming state with proper text wrapping
- Add streaming CSS animations for smooth line-by-line display
- Update README to reflect streaming feature completion
- Add release workflow for cross-platform builds

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: milisp

.github/workflows/release.yml

@@ -0,0 +1,78 @@
+name: Publish Cross-Platform
+
+on:
+  push:
+    tags:
+      - "v*"
+  workflow_dispatch:
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        platform:
+          - os: ubuntu-latest
+            target: x86_64-unknown-linux-gnu
+            name: Linux x86_64
+            artifact-name: linux-x64
+            artifact-path: |
+              src-tauri/target/x86_64-unknown-linux-gnu/release/**/*.deb
+              src-tauri/target/x86_64-unknown-linux-gnu/release/**/*.rpm
+              src-tauri/target/x86_64-unknown-linux-gnu/release/**/*.AppImage
+          - os: windows-latest
+            target: x86_64-pc-windows-msvc
+            name: Windows x86_64
+            artifact-name: MCP-Linker-Windows
+            artifact-path: |
+              src-tauri/target/release/bundle/**/*.exe
+              src-tauri/target/release/bundle/**/*.msi
+
+    runs-on: ${{ matrix.platform.os }}
+    name: Build ${{ matrix.platform.name }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install Linux dependencies
+        if: runner.os == 'Linux'
+        run: |
+          sudo apt update
+          sudo apt-get install -y \
+            pkg-config \
+            libwebkit2gtk-4.1-dev \
+            libgtk-3-dev \
+            libssl-dev \
+            libayatana-appindicator3-dev \
+            librsvg2-dev
+
+      - name: Install Rust toolchain
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install Bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Build Tauri App
+        run: bun tauri build ${{ runner.os == 'Linux' && format('--target {0}', matrix.platform.target) || '' }}
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.platform.artifact-name }}
+          path: ${{ matrix.platform.artifact-path }}
+
+      - name: Upload to GitHub Release
+        uses: softprops/action-gh-release@v2
+        if: startsWith(github.ref, 'refs/tags/v')
+        with:
+          files: ${{ matrix.platform.artifact-path }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -19,7 +19,7 @@ A modern, multi-session GUI application for the `Codex CLI` built with Tauri v2,
 - Switch between sessions without interrupting ongoing conversations
 - Persistent session storage with automatic restoration on app restart
 
-### 💬 **Real-Time Streaming** - Todo
+### 💬 **Real-Time Streaming**
 - Live streaming responses for immediate feedback
 - Character-by-character message updates as AI generates responses
 - No more waiting for complete responses - see results as they appear
@@ -131,7 +131,7 @@ bun tauri build
 - ✅ **Command execution** with approval workflows
 - ✅ **Multiple AI providers** (OpenAI, OSS models via Ollama)
 - ✅ **Working directory context** for project-aware assistance
-- [ ] **Streaming responses** for real-time interaction
+- ✅ **Streaming responses** for real-time interaction - by config show_raw_agent_reasoning=true
 
 ## 🛠️ Development
 

public/hello.txt

@@ -134,6 +134,10 @@ impl CodexClient {
             cmd.arg("-c").arg(sandbox_config);
         }
 
+        // Enable streaming by setting show_raw_agent_reasoning=true
+        // This is required for agent_message_delta events to be generated
+        cmd.arg("-c").arg("show_raw_agent_reasoning=true");
+
         // Set working directory for the process
         if !config.working_directory.is_empty() {
             cmd.current_dir(&config.working_directory);

src-tauri/src/codex_client.rs

@@ -117,4 +117,34 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+/* Streaming message styles */
+.streaming-message {
+  position: relative;
+}
+
+.streaming-cursor {
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+/* Line-by-line animation */
+.streaming-line-enter {
+  animation: slideIn 0.2s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }

src/App.css

@@ -0,0 +1,74 @@
+import React from 'react';
+import { ChatMessage } from '@/types/chat';
+import { cn } from '@/lib/utils';
+
+interface StreamingMessageProps {
+  message: ChatMessage;
+  className?: string;
+}
+
+export const StreamingMessage: React.FC<StreamingMessageProps> = ({ 
+  message, 
+  className 
+}) => {
+  return (
+    <div className={cn(
+      "whitespace-pre-wrap break-words overflow-wrap-anywhere min-w-0",
+      message.isStreaming && "streaming-message",
+      className
+    )}>
+      {/* Simple markdown-like rendering */}
+      {message.content.split('\n').map((line, index) => {
+        // Handle headings
+        if (line.startsWith('##')) {
+          return (
+            <h2 key={index} className="text-xl font-bold mt-4 mb-2 break-words">
+              {line.replace(/^##\s*/, '')}
+            </h2>
+          );
+        }
+        if (line.startsWith('#')) {
+          return (
+            <h1 key={index} className="text-2xl font-bold mt-4 mb-2 break-words">
+              {line.replace(/^#\s*/, '')}
+            </h1>
+          );
+        }
+        
+        // Handle code blocks
+        if (line.startsWith('```')) {
+          return (
+            <div key={index} className="bg-gray-100 dark:bg-gray-800 p-2 rounded font-mono text-sm my-2 break-words overflow-x-auto">
+              {line.replace(/^```/, '')}
+            </div>
+          );
+        }
+        
+        // Handle list items
+        if (line.startsWith('- ')) {
+          return (
+            <li key={index} className="ml-4 list-disc break-words">
+              {line.replace(/^-\s*/, '')}
+            </li>
+          );
+        }
+        
+        // Regular paragraphs
+        if (line.trim()) {
+          return (
+            <p key={index} className="mb-2 break-words">
+              {line}
+            </p>
+          );
+        }
+        
+        // Empty lines
+        return <br key={index} />;
+      })}
+      
+      {message.isStreaming && (
+        <span className="inline-block w-2 h-5 bg-blue-500 animate-pulse ml-1 streaming-cursor" />
+      )}
+    </div>
+  );
+};

src/components/StreamingMessage.tsx

@@ -117,15 +117,15 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
     if (directories.length > 0 && files.length === 0) {
       return directories.length === 1 
-        ? `Read this folder: ${filePaths}`
-        : `Read these folders: ${filePaths}`;
+        ? `${filePaths}`
+        : `${filePaths}`;
     } else if (files.length > 0 && directories.length === 0) {
       return files.length === 1 
-        ? `Read this file: ${filePaths}`
-        : `Read these files: ${filePaths}`;
+        ? `${filePaths}`
+        : `${filePaths}`;
     } else {
       // Mixed files and folders
-      return `Read these files and folders: ${filePaths}`;
+      return `${filePaths}`;
     }
   };
 
@@ -290,4 +290,4 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       </div>
     </div>
   );
-};
+};

src/components/chat/ChatInput.tsx

@@ -15,7 +15,7 @@ export const MarkdownRenderer = memo<MarkdownRendererProps>(({
   className = "" 
 }) => {
   return (
-    <div className={`text-sm text-gray-800 leading-relaxed prose prose-sm max-w-none ${className}`}>
+    <div className={`text-sm text-gray-800 leading-relaxed prose prose-sm max-w-none break-words ${className}`}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[rehypePrism]}

src/components/chat/MarkdownRenderer.tsx

@@ -2,6 +2,7 @@ import { memo } from 'react';
 import { Bot, User, Terminal } from 'lucide-react';
 import { MessageNoteActions } from './MessageNoteActions';
 import { MarkdownRenderer } from './MarkdownRenderer';
+import { StreamingMessage } from '../StreamingMessage';
 
 interface NormalizedMessage {
   id: string;
@@ -62,7 +63,7 @@ export const Message = memo<MessageProps>(({
   return (
     <div
       key={`${normalized.id}-${index}`}
-      className={`group flex gap-3 p-4 ${isLastMessage ? 'mb-4' : ''}`}
+      className={`group flex gap-3 p-4 min-w-0 ${isLastMessage ? 'mb-4' : ''}`}
       data-message-role={normalized.role}
       data-message-timestamp={normalized.timestamp}
     >
@@ -101,11 +102,22 @@ export const Message = memo<MessageProps>(({
         </div>
 
         {/* Content */}
-        <div className={`relative rounded-lg border p-3 ${getMessageStyle(normalized.role)}`}>
-          <MarkdownRenderer content={normalized.content} />
-          {normalized.isStreaming && (
-            <span className="inline-block w-2 h-5 bg-current opacity-75 animate-pulse ml-1 align-text-bottom">|</span>
-          )}
+        <div className={`relative rounded-lg border p-3 w-full min-w-0 ${getMessageStyle(normalized.role)}`}>
+          <div className="break-words overflow-wrap-anywhere min-w-0">
+            {normalized.isStreaming ? (
+              <StreamingMessage 
+                message={{
+                  id: normalized.id,
+                  role: normalized.role as "user" | "assistant" | "system",
+                  content: normalized.content,
+                  timestamp: normalized.timestamp,
+                  isStreaming: normalized.isStreaming
+                }}
+              />
+            ) : (
+              <MarkdownRenderer content={normalized.content} />
+            )}
+          </div>
         </div>
       </div>
     </div>

src/components/chat/Message.tsx

@@ -88,7 +88,7 @@ export function MessageList({ messages, className = "", isLoading = false, isPen
       <TextSelectionMenu />
       {/* Messages */}
       <div className="flex-1 overflow-y-auto px-4 py-2">
-        <div className="max-w-4xl mx-auto">
+        <div className="w-full max-w-full min-w-0">
           {normalizedMessages.map((normalizedMessage, index) => (
             <Message
               key={`${normalizedMessage.id}-${index}`}