Implement comprehensive tool call rendering with state persistence

- Implement tool-specific rendering for all 14 tool types (read, edit, write, bash, webfetch, todowrite, task, etc.)
- Each tool shows contextually relevant information (file previews, diffs, command output, todo lists)
- Add metadata-driven content display using preview, diff, output, and todos from tool state
- Implement status-based rendering (pending, running, completed, error) with animations
- Create global state store for expandable items (tool calls and reasoning sections)
- Fix state persistence: expanded tool calls and reasoning sections remain expanded when new messages arrive
- Fix scroll position preservation during live message updates
- Fix reasoning toggle loop by replacing native details element with custom expandable
- Add comprehensive documentation in TOOL_CALL_IMPLEMENTATION.md
- Reduce font sizes for better readability in expanded tool content
- Add proper keying to For loops to prevent component recreation
- Match TUI patterns for tool names, actions, and content formatting

src/components/message-stream.tsx

@@ -2,8 +2,10 @@ import { For, Show, createSignal, createEffect, createMemo } from "solid-js"
 import type { Message } from "../types/message"
 import MessageItem from "./message-item"
 import ToolCall from "./tool-call"
+import { sseManager } from "../lib/sse-manager"
 
 interface MessageStreamProps {
+  instanceId: string
   sessionId: string
   messages: Message[]
   messagesInfo?: Map<string, any>
@@ -21,6 +23,8 @@ export default function MessageStream(props: MessageStreamProps) {
   const [autoScroll, setAutoScroll] = createSignal(true)
   const [showScrollButton, setShowScrollButton] = createSignal(false)
 
+  const connectionStatus = () => sseManager.getStatus(props.instanceId)
+
   function scrollToBottom() {
     if (containerRef) {
       containerRef.scrollTop = containerRef.scrollHeight
@@ -81,6 +85,26 @@ export default function MessageStream(props: MessageStreamProps) {
 
   return (
     <div class="message-stream-container">
+      <div class="connection-status">
+        <Show when={connectionStatus() === "connected"}>
+          <span class="status-indicator connected">
+            <span class="status-dot" />
+            Connected
+          </span>
+        </Show>
+        <Show when={connectionStatus() === "connecting"}>
+          <span class="status-indicator connecting">
+            <span class="status-dot" />
+            Connecting...
+          </span>
+        </Show>
+        <Show when={connectionStatus() === "error" || connectionStatus() === "disconnected"}>
+          <span class="status-indicator disconnected">
+            <span class="status-dot" />
+            Disconnected
+          </span>
+        </Show>
+      </div>
       <div ref={containerRef} class="message-stream" onScroll={handleScroll}>
         <Show when={!props.loading && displayItems().length === 0}>
           <div class="empty-state">
@@ -107,24 +131,27 @@ export default function MessageStream(props: MessageStreamProps) {
           </div>
         </Show>
 
-        <For each={displayItems()}>
-          {(item) => (
-            <Show
-              when={item.type === "message"}
-              fallback={
-                <div class="tool-call-message">
-                  <div class="tool-call-header-label">
-                    <span class="tool-call-icon">🔧</span>
-                    <span>Tool Call</span>
-                    <span class="tool-name">{item.data?.tool || "unknown"}</span>
+        <For each={displayItems()} fallback={null}>
+          {(item, index) => {
+            const key = item.type === "message" ? `msg-${item.data.id}` : `tool-${item.data.id}`
+            return (
+              <Show
+                when={item.type === "message"}
+                fallback={
+                  <div class="tool-call-message" data-key={key}>
+                    <div class="tool-call-header-label">
+                      <span class="tool-call-icon">🔧</span>
+                      <span>Tool Call</span>
+                      <span class="tool-name">{item.data?.tool || "unknown"}</span>
+                    </div>
+                    <ToolCall toolCall={item.data} toolCallId={item.data.id} />
                   </div>
-                  <ToolCall toolCall={item.data} />
-                </div>
-              }
-            >
-              <MessageItem message={item.data} messageInfo={item.messageInfo} />
-            </Show>
-          )}
+                }
+              >
+                <MessageItem message={item.data} messageInfo={item.messageInfo} />
+              </Show>
+            )
+          }}
         </For>
       </div>