Files
project-lyra/UI_THINKING_STREAM.md
serversdwn 64429b19e6 feat: Implement Trillium notes executor for searching and creating notes via ETAPI
- Added `trillium.py` for searching and creating notes with Trillium's ETAPI.
- Implemented `search_notes` and `create_note` functions with appropriate error handling and validation.

feat: Add web search functionality using DuckDuckGo

- Introduced `web_search.py` for performing web searches without API keys.
- Implemented `search_web` function with result handling and validation.

feat: Create provider-agnostic function caller for iterative tool calling

- Developed `function_caller.py` to manage LLM interactions with tools.
- Implemented iterative calling logic with error handling and tool execution.

feat: Establish a tool registry for managing available tools

- Created `registry.py` to define and manage tool availability and execution.
- Integrated feature flags for enabling/disabling tools based on environment variables.

feat: Implement event streaming for tool calling processes

- Added `stream_events.py` to manage Server-Sent Events (SSE) for tool calling.
- Enabled real-time updates during tool execution for enhanced user experience.

test: Add tests for tool calling system components

- Created `test_tools.py` to validate functionality of code execution, web search, and tool registry.
- Implemented asynchronous tests to ensure proper execution and result handling.

chore: Add Dockerfile for sandbox environment setup

- Created `Dockerfile` to set up a Python environment with necessary dependencies for code execution.

chore: Add debug regex script for testing XML parsing

- Introduced `debug_regex.py` to validate regex patterns against XML tool calls.

chore: Add HTML template for displaying thinking stream events

- Created `test_thinking_stream.html` for visualizing tool calling events in a user-friendly format.

test: Add tests for OllamaAdapter XML parsing

- Developed `test_ollama_parser.py` to validate XML parsing with various test cases, including malformed XML.
2025-12-26 03:49:20 -05:00

3.1 KiB

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)

Added button to session selector:

<button id="thinkingStreamBtn" title="Show thinking stream in new window">🧠 Show Work</button>

Added event listener to open stream window:

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)

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)

Added purple/violet theme for the thinking button:

#thinkingStreamBtn {
  background: rgba(138, 43, 226, 0.2);
  border-color: #8a2be2;
}

How To Use

  1. Open Chat Interface

  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