From a8053bc0b595efabeeee28e94ced31afcb0d2915 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Sun, 21 Dec 2025 18:24:07 +0000
Subject: [PATCH] feat: integrate ToolCallSheetProvider in AgentStreamView
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrapped AgentStreamView content with ToolCallSheetProvider to enable
tool call details to open in a bottom sheet on tap instead of expanding
inline. This improves mobile UX for viewing tool call information.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../app/src/components/agent-stream-view.tsx  | 114 +++++++++---------
 plan.md                                       |   3 +-
 2 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/packages/app/src/components/agent-stream-view.tsx b/packages/app/src/components/agent-stream-view.tsx
index 80b52722c..55a0a5cba 100644
--- a/packages/app/src/components/agent-stream-view.tsx
+++ b/packages/app/src/components/agent-stream-view.tsx
@@ -41,6 +41,7 @@ import {
   extractEditEntries,
   extractReadEntries,
 } from "@/utils/tool-call-parsers";
+import { ToolCallSheetProvider } from "./tool-call-sheet";
 
 const MAX_CHAT_WIDTH = 960;
 type PermissionResolvedMessage = Extract<
@@ -382,63 +383,64 @@ export function AgentStreamView({
   );
 
   return (
-    <View style={stylesheet.container}>
-      <FlatList
-        ref={flatListRef}
-        data={flatListData}
-        renderItem={renderStreamItem}
-        keyExtractor={(item) => item.id}
-        contentContainerStyle={{
-          paddingVertical: 0,
-          flexGrow: 1,
-        }}
-        style={stylesheet.list}
-        onScroll={handleScroll}
-        onScrollBeginDrag={handleScrollBeginDrag}
-        onScrollEndDrag={handleScrollEnd}
-        onMomentumScrollBegin={handleMomentumScrollBegin}
-        onMomentumScrollEnd={handleScrollEnd}
-        scrollEventThrottle={16}
-        ListEmptyComponent={
-          <View style={[stylesheet.emptyState, stylesheet.contentWrapper]}>
-            <Text style={stylesheet.emptyStateText}>
-              Start chatting with this agent...
-            </Text>
-          </View>
-        }
-        ListHeaderComponent={listHeaderComponent}
-        extraData={flatListExtraData}
-        maintainVisibleContentPosition={{
-          minIndexForVisible: 0,
-          autoscrollToTopThreshold: 40,
-        }}
-        initialNumToRender={12}
-        windowSize={10}
-        inverted
-      />
+    <ToolCallSheetProvider>
+      <View style={stylesheet.container}>
+        <FlatList
+          ref={flatListRef}
+          data={flatListData}
+          renderItem={renderStreamItem}
+          keyExtractor={(item) => item.id}
+          contentContainerStyle={{
+            paddingVertical: 0,
+            flexGrow: 1,
+          }}
+          style={stylesheet.list}
+          onScroll={handleScroll}
+          onScrollBeginDrag={handleScrollBeginDrag}
+          onScrollEndDrag={handleScrollEnd}
+          onMomentumScrollBegin={handleMomentumScrollBegin}
+          onMomentumScrollEnd={handleScrollEnd}
+          scrollEventThrottle={16}
+          ListEmptyComponent={
+            <View style={[stylesheet.emptyState, stylesheet.contentWrapper]}>
+              <Text style={stylesheet.emptyStateText}>
+                Start chatting with this agent...
+              </Text>
+            </View>
+          }
+          ListHeaderComponent={listHeaderComponent}
+          extraData={flatListExtraData}
+          maintainVisibleContentPosition={{
+            minIndexForVisible: 0,
+            autoscrollToTopThreshold: 40,
+          }}
+          initialNumToRender={12}
+          windowSize={10}
+          inverted
+        />
 
-      {/* Scroll to bottom button */}
-      {!isNearBottom && (
-        <Animated.View
-          style={stylesheet.scrollToBottomContainer}
-          entering={scrollIndicatorFadeIn}
-          exiting={scrollIndicatorFadeOut}
-        >
-          <View style={stylesheet.scrollToBottomInner}>
-            <Pressable
-              style={stylesheet.scrollToBottomButton}
-              onPress={scrollToBottom}
-            >
-              <ChevronDown
-                size={24}
-                color={stylesheet.scrollToBottomIcon.color}
-              />
-            </Pressable>
-          </View>
-        </Animated.View>
-      )}
-
-    </View>
+        {/* Scroll to bottom button */}
+        {!isNearBottom && (
+          <Animated.View
+            style={stylesheet.scrollToBottomContainer}
+            entering={scrollIndicatorFadeIn}
+            exiting={scrollIndicatorFadeOut}
+          >
+            <View style={stylesheet.scrollToBottomInner}>
+              <Pressable
+                style={stylesheet.scrollToBottomButton}
+                onPress={scrollToBottom}
+              >
+                <ChevronDown
+                  size={24}
+                  color={stylesheet.scrollToBottomIcon.color}
+                />
+              </Pressable>
+            </View>
+          </Animated.View>
+        )}
+      </View>
+    </ToolCallSheetProvider>
   );
 }
 
diff --git a/plan.md b/plan.md
index 67e2d94bc..19900a569 100644
--- a/plan.md
+++ b/plan.md
@@ -546,12 +546,13 @@ interface ToolCallSheetData {
   - Run typecheck after changes.
   - **Done (2025-12-21 19:25)**: Updated `ToolCall` in `message.tsx` to use `useToolCallSheet` hook. On tap, calls `openToolCall()` with tool data instead of expanding inline. Removed ~300 lines of unused code including `toolCallStylesheet`, `formatFullValue`, `buildLineDiffFromStrings`, `isStructuredToolResult`, and inline rendering logic (all now in `tool-call-sheet.tsx`). Cleaned up imports (`ScrollView`, `DiffViewer`, `DiffLine` no longer needed). Typecheck passes.
 
-- [ ] **Implement**: Integrate ToolCallSheetProvider in agent stream view.
+- [x] **Implement**: Integrate ToolCallSheetProvider in agent stream view.
 
   - Wrap `AgentStreamView` content with `ToolCallSheetProvider`
   - Or add at the agent screen level if needed for proper context scope
   - Ensure sheet renders above the stream content
   - Run typecheck after changes.
+  - **Done (2025-12-21 20:48)**: Added `ToolCallSheetProvider` import and wrapped the entire return content of `AgentStreamView` with it. The provider wraps the `View` container which includes the `FlatList` and scroll-to-bottom button, ensuring the bottom sheet renders above the stream content. Typecheck passes.
 
 - [ ] **Test**: Verify tool call bottom sheet works on mobile web.