# Thinking Stream UI Integration

## What Was Added

Added a "🧠 Show Work" button to the main chat interface that opens a dedicated thinking stream window.

## Changes Made

### 1. Main Chat Interface ([core/ui/index.html](core/ui/index.html))

Added button to session selector:
```html
<button id="thinkingStreamBtn" title="Show thinking stream in new window">🧠 Show Work</button>
```

Added event listener to open stream window:
```javascript
document.getElementById("thinkingStreamBtn").addEventListener("click", () => {
  const streamUrl = `/thinking-stream.html?session=${currentSession}`;
  const windowFeatures = "width=600,height=800,menubar=no,toolbar=no,location=no,status=no";
  window.open(streamUrl, `thinking_${currentSession}`, windowFeatures);
});
```

### 2. Thinking Stream Window ([core/ui/thinking-stream.html](core/ui/thinking-stream.html))

New dedicated page for the thinking stream:
- **Header**: Shows connection status with live indicator
- **Events Area**: Scrollable list of thinking events
- **Footer**: Clear button and session info

Features:
- Auto-reconnecting SSE connection
- Color-coded event types
- Slide-in animations for new events
- Automatic scrolling to latest event
- Session ID from URL parameter

### 3. Styling ([core/ui/style.css](core/ui/style.css))

Added purple/violet theme for the thinking button:
```css
#thinkingStreamBtn {
  background: rgba(138, 43, 226, 0.2);
  border-color: #8a2be2;
}
```

## How To Use

1. **Open Chat Interface**
   - Navigate to http://localhost:7078 (relay)
   - Select or create a session

2. **Open Thinking Stream**
   - Click the "🧠 Show Work" button
   - A new window opens showing the thinking stream

3. **Send a Message**
   - Type a message that requires tools (e.g., "Calculate 50/2 in Python")
   - Watch the thinking stream window for real-time updates

4. **Observe Events**
   - 🤔 Thinking iterations
   - 🔧 Tool calls
   - 📊 Tool results
   - ✅ Completion

## Event Types & Colors

| Event | Icon | Color | Description |
|-------|------|-------|-------------|
| Connected | ✓ | Green | Stream established |
| Thinking | 🤔 | Light Green | LLM processing |
| Tool Call | 🔧 | Orange | Tool invocation |
| Tool Result | 📊 | Blue | Tool output |
| Done | ✅ | Purple | Task complete |
| Error | ❌ | Red | Something failed |

## Architecture

```
User clicks "Show Work"
        ↓
Opens thinking-stream.html?session=xxx
        ↓
Connects to SSE: /stream/thinking/{session}
        ↓
User sends message in main chat
        ↓
FunctionCaller emits events
        ↓
Events appear in thinking stream window
```

## Mobile Support

The thinking stream window is responsive:
- Desktop: Side-by-side windows
- Mobile: Use browser's tab switcher to swap between chat and thinking stream

## Future Enhancements

Potential improvements:
- **Embedded panel**: Option to show thinking stream in a split panel within main UI
- **Event filtering**: Toggle event types on/off
- **Export**: Download thinking trace as JSON
- **Replay**: Replay past thinking sessions
- **Statistics**: Show timing, token usage per step