Show agent thinking and tool calls in the chat UI

[GeneralJerel]

Summary

Surface the agent's thinking process and tool call activity in the chat UI so users can see how the agent reasons, not just the final answer.

Current State

• Tool calls: The ToolReasoning component (apps/app/src/components/tool-rendering.tsx) already renders tool names, arguments, and status (executing → complete) via useDefaultRenderTool. This is a good foundation but is minimal — it shows what tool was called, not why.
• Thinking/reasoning: Not shown at all. The agent's intermediate thought process is invisible to the user. There is no UI for streaming thinking tokens or displaying step-by-step reasoning.

Proposal

1. Agent thinking display

Show the agent's reasoning as it works through a problem. This could be:

• Streaming thinking tokens — If using a model with extended thinking (e.g. Claude with thinking blocks), render these in a collapsible "Thinking…" section above the response. Show the thinking text streaming in real-time with a subtle visual treatment (muted text, indented, or in a distinct container).
• Step-by-step reasoning — For multi-step agent tasks, show each reasoning step as the agent progresses (e.g., "Analyzing your request…", "Looking up existing todos…", "Organizing by priority…").

2. Enhanced tool call visualization

Build on the existing ToolReasoning component:

• Execution timeline — When multiple tools are called in sequence, show them as a vertical timeline so users see the agent's workflow.
• Tool results — Show a summary of what the tool returned (e.g., "Found 3 todos" or "Updated 2 items"), not just the arguments passed in.
• Duration — Show how long each tool call took.
• Grouped display — Collapse completed tool calls into a compact summary, expand only the active one.

3. Thinking + tools combined view

When the agent thinks, then calls a tool, then thinks again — show this as a coherent narrative:

🧠 Thinking: "The user wants to organize their todos by priority..."
🔧 get_todos → returned 5 todos
🧠 Thinking: "I'll group these into high/medium/low priority..."
🔧 manage_todos → updated 5 todos
✅ "I've organized your todos by priority!"

Implementation Notes

• CopilotKit's useDefaultRenderTool already provides the hook point for tool rendering
• The agent backend (apps/agent/main.py) would need to emit thinking/reasoning events — this could be done via LangGraph's streaming callbacks or by adding thinking state to AgentState
• For models with native thinking (Claude extended thinking), CopilotKit may already surface thinking tokens — needs investigation
• The ToolReasoning component at apps/app/src/components/tool-rendering.tsx is the starting point for enhanced tool visualization

Design Considerations

• Thinking should be collapsible by default after completion — users who want transparency can expand it, but it shouldn't clutter the chat for those who don't
• Tool calls should feel like a progress indicator, not noise — compact when done, detailed when active
• The overall effect should make the agent feel more trustworthy and transparent without overwhelming the UI