Fix AI Chat reasoning display with correct Vercel AI SDK Data Stream Protocol

This commit fixes the reasoning/thinking display in the Studio AI chat by
correcting both the backend stream encoding and frontend parsing to align
with the Vercel AI SDK v6 Data Stream Protocol.

## Backend Changes

**packages/services/service-ai/src/stream/vercel-stream-encoder.ts**
- Add `dataStreamLine()` helper for Data Stream Protocol format
- Fix reasoning event encoding to use `g:` prefix instead of standard SSE:
  - `reasoning-start` → `g:{"text":""}\n`
  - `reasoning-delta` → `g:{"text":"..."}\n`
  - `reasoning-end` → empty string (no marker needed)
- Aligns with Vercel AI SDK protocol specification

**packages/services/service-ai/src/__tests__/vercel-stream-encoder.test.ts**
- Update tests to expect `g:` prefix format for reasoning events
- All 17 tests passing

## Frontend Changes

**apps/studio/src/components/AiChatPanel.tsx**
- Extract reasoning from `message.parts` instead of incorrect `data` property
- Process `reasoning-delta`/`reasoning` parts from message parts array
- Process `step-start`/`step-finish` parts for progress tracking
- Remove unused stream event type interfaces (fixes TypeScript warnings)

## Technical Details

The Vercel AI SDK v6 Data Stream Protocol uses prefix identifiers:
- `0:` - Text content
- `2:` - Custom data annotations
- `g:` - Reasoning/thinking content (DeepSeek R1, OpenAI o1-style models)

Previously the backend was encoding reasoning as standard SSE events
(`data: {"type":"reasoning-delta",...}`) which the frontend couldn't
access through the `useChat` hook. The correct format is the Data Stream
Protocol format (`g:{"text":"..."}\n`) which appears in `message.parts`.

Fixes: #1093 (AI chat reasoning display)

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

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

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Claude

apps/studio/src/components/AiChatPanel.tsx

@@ -34,38 +34,6 @@ interface AgentSummary {
   role: string;
 }
 
-/**
- * Extended stream event types for reasoning and steps.
- * These extend the standard Vercel AI SDK stream events.
- */
-interface ReasoningStartEvent {
-  type: 'reasoning-start';
-  id: string;
-}
-
-interface ReasoningDeltaEvent {
-  type: 'reasoning-delta';
-  id: string;
-  delta: string;
-}
-
-interface ReasoningEndEvent {
-  type: 'reasoning-end';
-  id: string;
-}
-
-interface StepStartEvent {
-  type: 'step-start';
-  stepId: string;
-  stepName: string;
-}
-
-interface StepFinishEvent {
-  type: 'step-finish';
-  stepId: string;
-  stepName: string;
-}
-
 /**
  * Track active thinking/reasoning state during streaming.
  */
@@ -457,10 +425,9 @@ export function AiChatPanel() {
     [baseUrl, selectedAgent],
   );
 
-  const { messages, sendMessage, setMessages, status, error, addToolApprovalResponse, data } = useChat({
+  const { messages, sendMessage, setMessages, status, error, addToolApprovalResponse } = useChat({
     transport,
     messages: initialMessages,
-    streamMode: 'stream-data',
     onFinish: () => {
       // Reset thinking state when stream completes
       setThinkingState({
@@ -473,42 +440,34 @@ export function AiChatPanel() {
 
   const isStreaming = status === 'streaming' || status === 'submitted';
 
-  // Process stream data events for reasoning and step progress
+  // Extract reasoning and step progress from the latest assistant message parts
   useEffect(() => {
-    if (!data || data.length === 0) return;
-
-    // Process each data event from the stream
-    data.forEach((event: any) => {
-      if (event.type === 'reasoning-delta') {
-        setThinkingState((prev) => ({
-          ...prev,
-          reasoning: [...prev.reasoning, event.delta],
-        }));
-      } else if (event.type === 'step-start') {
-        setThinkingState((prev) => {
-          const newActiveSteps = new Map(prev.activeSteps);
-          newActiveSteps.set(event.stepId, {
-            stepName: event.stepName,
-            startedAt: Date.now(),
-          });
-          return {
-            ...prev,
-            activeSteps: newActiveSteps,
-          };
-        });
-      } else if (event.type === 'step-finish') {
-        setThinkingState((prev) => {
-          const newActiveSteps = new Map(prev.activeSteps);
-          newActiveSteps.delete(event.stepId);
-          return {
-            ...prev,
-            activeSteps: newActiveSteps,
-            completedSteps: [...prev.completedSteps, event.stepName],
-          };
+    if (!isStreaming || messages.length === 0) return;
+
+    // Get the latest message
+    const lastMessage = messages[messages.length - 1];
+    if (lastMessage.role !== 'assistant') return;
+
+    // Process message parts for reasoning and steps
+    const reasoning: string[] = [];
+    const activeSteps = new Map<string, { stepName: string; startedAt: number }>();
+    const completedSteps: string[] = [];
+
+    (lastMessage.parts || []).forEach((part: any) => {
+      if (part.type === 'reasoning-delta' || part.type === 'reasoning') {
+        reasoning.push(part.text);
+      } else if (part.type === 'step-start') {
+        activeSteps.set(part.stepId, {
+          stepName: part.stepName,
+          startedAt: Date.now(),
         });
+      } else if (part.type === 'step-finish') {
+        completedSteps.push(part.stepName);
       }
     });
-  }, [data]);
+
+    setThinkingState({ reasoning, activeSteps, completedSteps });
+  }, [messages, isStreaming]);
 
   // Persist messages to localStorage whenever they change
   useEffect(() => {

packages/services/service-ai/src/__tests__/vercel-stream-encoder.test.ts

@@ -129,48 +129,35 @@ describe('encodeStreamPart', () => {
     expect(encodeStreamPart(part)).toBe('');
   });
 
-  it('should encode reasoning-start part as SSE frame', () => {
+  it('should encode reasoning-start part with g: prefix', () => {
     const part = {
       type: 'reasoning-start',
       id: 'r1',
     } as unknown as TextStreamPart<ToolSet>;
 
     const frame = encodeStreamPart(part);
-    const payload = parseSSE(frame);
-    expect(payload).toEqual({
-      type: 'reasoning-start',
-      id: 'r1',
-    });
+    expect(frame).toBe('g:{"text":""}\n');
   });
 
-  it('should encode reasoning-delta part as SSE frame', () => {
+  it('should encode reasoning-delta part with g: prefix', () => {
     const part = {
       type: 'reasoning-delta',
       id: 'r1',
       text: 'Let me think through this step by step...',
     } as unknown as TextStreamPart<ToolSet>;
 
     const frame = encodeStreamPart(part);
-    const payload = parseSSE(frame);
-    expect(payload).toEqual({
-      type: 'reasoning-delta',
-      id: 'r1',
-      delta: 'Let me think through this step by step...',
-    });
+    expect(frame).toBe('g:{"text":"Let me think through this step by step..."}\n');
   });
 
-  it('should encode reasoning-end part as SSE frame', () => {
+  it('should encode reasoning-end part as empty (no specific end marker)', () => {
     const part = {
       type: 'reasoning-end',
       id: 'r1',
     } as unknown as TextStreamPart<ToolSet>;
 
     const frame = encodeStreamPart(part);
-    const payload = parseSSE(frame);
-    expect(payload).toEqual({
-      type: 'reasoning-end',
-      id: 'r1',
-    });
+    expect(frame).toBe('');
   });
 
   it('should pass through custom step events', () => {

packages/services/service-ai/src/stream/vercel-stream-encoder.ts

@@ -23,6 +23,14 @@ function sse(data: object): string {
   return `data: ${JSON.stringify(data)}\n\n`;
 }
 
+/**
+ * Encode data using Vercel AI SDK Data Stream Protocol prefixes.
+ * @see https://ai-sdk.dev/docs/ai-sdk-ui/stream-protocol
+ */
+function dataStreamLine(prefix: string, data: object): string {
+  return `${prefix}:${JSON.stringify(data)}\n`;
+}
+
 // ── Public API ──────────────────────────────────────────────────────
 
 /**
@@ -72,24 +80,15 @@ export function encodeStreamPart(part: TextStreamPart<ToolSet>): string {
       });
 
     // Handle reasoning/thinking streams (DeepSeek R1, o1-style models)
+    // Use 'g:' prefix for reasoning content per Vercel AI SDK protocol
     case 'reasoning-start':
-      return sse({
-        type: 'reasoning-start',
-        id: part.id,
-      });
+      return dataStreamLine('g', { text: '' });
 
     case 'reasoning-delta':
-      return sse({
-        type: 'reasoning-delta',
-        id: part.id,
-        delta: part.text,
-      });
+      return dataStreamLine('g', { text: part.text });
 
     case 'reasoning-end':
-      return sse({
-        type: 'reasoning-end',
-        id: part.id,
-      });
+      return ''; // No specific end marker needed for reasoning
 
     // finish-step and finish are handled by the generator, not here
     default: