cameron.stream
A React Native app for the ultimate thinking partner.
refactor(ui): replace tool call preview with details icon
Removed the inline '> memory()' preview which was cluttered and not helpful.
Now shows a clean info icon in the bottom right that expands to show the
full tool call details when clicked.
This is much cleaner and follows standard UI patterns for showing
additional details on demand.
+36
-23
+36
-23
src/components/ToolCallItem.tsx
+36
-23
src/components/ToolCallItem.tsx
···
202
202
</TouchableOpacity>
203
203
)}
204
204
{hideHeader && (
205
-
<TouchableOpacity
206
-
style={styles.embeddedHeader}
207
-
onPress={() => setExpanded((e) => !e)}
208
-
activeOpacity={0.7}
209
-
>
210
-
<Ionicons
211
-
name={expanded ? 'chevron-down' : 'chevron-forward'}
212
-
size={14}
213
-
color={theme.colors.text.tertiary}
214
-
style={styles.embeddedChevron}
215
-
/>
216
-
<Text style={[styles.callText, { color: theme.colors.text.primary }]} numberOfLines={expanded ? 0 : 1}>
217
-
{expanded ? prettyCallText : `${toolName}()`}
218
-
</Text>
219
-
</TouchableOpacity>
205
+
<View style={styles.embeddedContainer}>
206
+
{/* Details button - bottom right */}
207
+
<TouchableOpacity
208
+
style={styles.detailsButton}
209
+
onPress={() => setExpanded((e) => !e)}
210
+
activeOpacity={0.7}
211
+
>
212
+
<Ionicons
213
+
name="information-circle-outline"
214
+
size={16}
215
+
color={theme.colors.text.tertiary}
216
+
/>
217
+
</TouchableOpacity>
218
+
219
+
{/* Expanded tool call details */}
220
+
{expanded && (
221
+
<View style={styles.expandedDetails}>
222
+
<Text style={[styles.callText, { color: theme.colors.text.primary }]}>
223
+
{prettyCallText}
224
+
</Text>
225
+
</View>
226
+
)}
227
+
</View>
220
228
)}
221
229
{showResult && !!resultText && (
222
230
<TouchableOpacity
···
255
263
chevron: {
256
264
marginLeft: 4,
257
265
},
258
-
embeddedHeader: {
259
-
flexDirection: 'row',
260
-
alignItems: 'flex-start',
261
-
paddingVertical: 2,
262
-
marginBottom: 4,
266
+
embeddedContainer: {
267
+
position: 'relative',
268
+
width: '100%',
269
+
},
270
+
detailsButton: {
271
+
position: 'absolute',
272
+
bottom: 0,
273
+
right: 0,
274
+
padding: 4,
275
+
zIndex: 10,
263
276
},
264
-
embeddedChevron: {
265
-
marginRight: 6,
266
-
marginTop: 2,
277
+
expandedDetails: {
278
+
paddingTop: 8,
279
+
paddingBottom: 4,
267
280
},
268
281
displayName: {
269
282
fontSize: 16,