From d3e3a83a0dabdcb4809e3eb4602db8e9b557f947 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Tue, 7 Apr 2026 17:15:18 +0700
Subject: [PATCH] Render speak tool calls inline as spoken messages

Instead of showing speak tool calls as expandable tool call badges,
render them inline with a mic icon header matching assistant message
styling.
---
 .../app/src/components/agent-stream-view.tsx  | 16 +++++
 packages/app/src/components/message.tsx       | 60 +++++++++++++++++++
 2 files changed, 76 insertions(+)

diff --git a/packages/app/src/components/agent-stream-view.tsx b/packages/app/src/components/agent-stream-view.tsx
index f99667d54..0dccd9e61 100644
--- a/packages/app/src/components/agent-stream-view.tsx
+++ b/packages/app/src/components/agent-stream-view.tsx
@@ -26,6 +26,7 @@ import { Check, ChevronDown, X } from "lucide-react-native";
 import { usePanelStore } from "@/stores/panel-store";
 import {
   AssistantMessage,
+  SpeakMessage,
   UserMessage,
   ActivityLog,
   ToolCall,
@@ -359,6 +360,21 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
 
             if (payload.source === "agent") {
               const data = payload.data;
+
+              if (
+                data.name === "speak" &&
+                data.detail.type === "unknown" &&
+                typeof data.detail.input === "string" &&
+                data.detail.input.trim()
+              ) {
+                return (
+                  <SpeakMessage
+                    message={data.detail.input}
+                    timestamp={item.timestamp.getTime()}
+                  />
+                );
+              }
+
               return (
                 <ToolCall
                   toolName={data.name}
diff --git a/packages/app/src/components/message.tsx b/packages/app/src/components/message.tsx
index 3bc5eacb3..978c21745 100644
--- a/packages/app/src/components/message.tsx
+++ b/packages/app/src/components/message.tsx
@@ -39,6 +39,7 @@ import {
   Copy,
   TriangleAlertIcon,
   Scissors,
+  MicVocal,
 } from "lucide-react-native";
 import { StyleSheet, useUnistyles, UnistylesRuntime } from "react-native-unistyles";
 import Animated, {
@@ -913,6 +914,65 @@ export const AssistantMessage = memo(function AssistantMessage({
   );
 });
 
+interface SpeakMessageProps {
+  message: string;
+  timestamp: number;
+  disableOuterSpacing?: boolean;
+}
+
+const speakMessageStylesheet = StyleSheet.create((theme) => ({
+  container: {
+    paddingHorizontal: theme.spacing[2],
+    paddingVertical: theme.spacing[3],
+  },
+  containerSpacing: {
+    marginBottom: theme.spacing[4],
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    marginBottom: theme.spacing[2],
+  },
+  headerLabel: {
+    fontFamily: Fonts.sans,
+    fontSize: 12,
+    fontWeight: "500",
+    color: theme.colors.foregroundMuted,
+  },
+  text: {
+    fontFamily: Fonts.sans,
+    fontSize: theme.fontSize.base,
+    lineHeight: 22,
+    color: theme.colors.foreground,
+  },
+}));
+
+export const SpeakMessage = memo(function SpeakMessage({
+  message,
+  timestamp,
+  disableOuterSpacing,
+}: SpeakMessageProps) {
+  const { theme } = useUnistyles();
+  const resolvedDisableOuterSpacing = useDisableOuterSpacing(disableOuterSpacing);
+
+  return (
+    <View
+      testID="speak-message"
+      style={[
+        speakMessageStylesheet.container,
+        !resolvedDisableOuterSpacing && speakMessageStylesheet.containerSpacing,
+      ]}
+    >
+      <View style={speakMessageStylesheet.header}>
+        <MicVocal size={14} color={theme.colors.foregroundMuted} />
+        <Text style={speakMessageStylesheet.headerLabel}>Spoke</Text>
+      </View>
+      <Text style={speakMessageStylesheet.text}>{message}</Text>
+    </View>
+  );
+});
+
 interface ActivityLogProps {
   type: "system" | "info" | "success" | "error" | "artifact";
   message: string;