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-item.tsx

@@ -59,9 +59,17 @@ export default function MessageItem(props: MessageItemProps) {
           </div>
         </Show>
 
-        <For each={props.message.parts}>{(part) => <MessagePart part={part} />}</For>
+        <For each={props.message.parts}>
+          {(part) => <MessagePart part={part} key={part.id || `${part.type}-${Math.random()}`} />}
+        </For>
       </div>
 
+      <Show when={props.message.status === "sending"}>
+        <div class="message-sending">
+          <span class="generating-spinner">●</span> Sending...
+        </div>
+      </Show>
+
       <Show when={props.message.status === "error"}>
         <div class="message-error">⚠ Message failed to send</div>
       </Show>