feat: add ToolCallSheet component with bottom sheet and context

Create a new component for displaying tool call details in a bottom sheet
on mobile devices. Includes:
- ToolCallSheetProvider and useToolCallSheet hook for state management
- BottomSheetModal with snap points at 50% and 90%
- Header with tool icon, name, and status badge
- Content sections for args, commands, file diffs, file reads, and errors
- Reuses rendering logic from existing ToolCall component

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Mohamed Boudra
2025-12-21 18:18:10 +00:00
co-authored by Claude Opus 4.5
parent 7f1a0cccf6
commit 676125a732
2 changed files with 732 additions and 1 deletions
+2 -1
View File
@@ -526,7 +526,7 @@ interface ToolCallSheetData {
---
- [ ] **Implement**: Create ToolCallSheet component with bottom sheet and context.
- [x] **Implement**: Create ToolCallSheet component with bottom sheet and context.
- Create `tool-call-sheet.tsx` in `packages/app/src/components/`
- Implement `ToolCallSheetContext` with `openToolCall()` and `closeToolCall()`
@@ -535,6 +535,7 @@ interface ToolCallSheetData {
- Add header with tool name, kind icon, status
- Snap points: ["50%", "90%"]
- Run typecheck after changes.
- **Done (2025-12-21 19:15)**: Created `tool-call-sheet.tsx` with `ToolCallSheetProvider` and `useToolCallSheet` hook. Component uses `@gorhom/bottom-sheet` BottomSheetModal with snap points ["50%", "90%"]. Includes header with tool icon, name, and status badge. Content reuses same rendering logic from `ToolCall.renderDetails()` for commands, file edits, file reads, and generic results. Typecheck passes.
- [ ] **Implement**: Update ToolCall component to open bottom sheet on tap.