Highlight tool call pills

packages/app/src/components/message.tsx

@@ -30,6 +30,9 @@ import {
   extractCommandDetails,
   extractEditEntries,
   extractReadEntries,
+  type CommandDetails,
+  type EditEntry,
+  type ReadEntry,
 } from "@/utils/tool-call-parsers";
 import { DiffViewer } from "./diff-viewer";
 
@@ -862,6 +865,9 @@ interface ToolCallProps {
   result?: any;
   error?: any;
   status: "executing" | "completed" | "failed";
+  parsedEditEntries?: EditEntry[];
+  parsedReadEntries?: ReadEntry[];
+  parsedCommandDetails?: CommandDetails | null;
   onOpenDetails?: () => void;
 }
 
@@ -869,10 +875,16 @@ const toolCallStylesheet = StyleSheet.create((theme) => ({
   pressable: {
     marginHorizontal: theme.spacing[2],
     marginBottom: theme.spacing[2],
-    backgroundColor: theme.colors.card,
+    backgroundColor: theme.colors.secondary,
     borderRadius: theme.borderRadius.lg,
     borderWidth: theme.borderWidth[1],
+    borderColor: "transparent",
     overflow: "hidden",
+    shadowColor: theme.colors.palette.black,
+    shadowOpacity: 0.2,
+    shadowOffset: { width: 0, height: 8 },
+    shadowRadius: 16,
+    elevation: 4,
   },
   pressableActive: {
     opacity: 0.8,
@@ -993,11 +1005,17 @@ export const ToolCall = memo(function ToolCall({
   result,
   error,
   status,
+  parsedEditEntries,
+  parsedReadEntries,
+  parsedCommandDetails,
   onOpenDetails,
 }: ToolCallProps) {
-  const editEntries = useMemo(() => extractEditEntries(args, result), [args, result]);
-  const readEntries = useMemo(() => extractReadEntries(result, args), [args, result]);
-  const commandDetails = useMemo(() => extractCommandDetails(args, result), [args, result]);
+  const fallbackEditEntries = useMemo(() => extractEditEntries(args, result), [args, result]);
+  const editEntries = parsedEditEntries ?? fallbackEditEntries;
+  const fallbackReadEntries = useMemo(() => extractReadEntries(result, args), [args, result]);
+  const readEntries = parsedReadEntries ?? fallbackReadEntries;
+  const fallbackCommandDetails = useMemo(() => extractCommandDetails(args, result), [args, result]);
+  const commandDetails = parsedCommandDetails ?? fallbackCommandDetails;
 
   const primaryEditEntry = editEntries[0];
   const primaryReadEntry = readEntries[0];

plan.md

@@ -25,3 +25,10 @@
   - Agent cards now include a provider badge left of the status pill by pulling provider labels from the manifest, with new styles to match the sidebar treatment; ran `npm run typecheck --workspace=@voice-dev/app`.
 - [x] Hydrated agents still show loading state for tool calls, check this properly, it's not fixed. I am also not seeing the tool call output in the agent stream, which is important.
   - Tool snapshots now infer completed/failed states by walking the raw payload (exit codes, tool_result/error flags) when status/result/error are missing, and added regression coverage in `test-idempotent-stream.ts`. The agent stream cards now render command output/read content/diff previews inline plus show failures, and we pass result/error data through so hydrated tool calls immediately display their output. Verified with `npm run typecheck --workspace=@voice-dev/app` and `npx tsx test-idempotent-stream.ts`.
+- [x] Hydrated agent tool calls still lack their responses: after reloading a session we only show the tool metadata pill with a spinner or blank body instead of the diff/read/output sections, so we need to persist and hydrate the parsed payloads (diffs, read text, command stdout) and ensure the hydrated stream entries render them instead of falling back to loading placeholders.
+  - Parsed edit/read/command payloads are now computed inside `StreamItem` reduction, stored alongside tool call metadata, and wired through the stream view + bottom sheet so hydrated sessions immediately render diffs, file contents, and shell output without waiting for new events. Added regression coverage in `test-idempotent-stream.ts` plus ran `npm run typecheck --workspace=@voice-dev/app` and `npx tsx test-idempotent-stream.ts`.
+- [x] When a tool call finishes we currently render two consecutive pills in the agent stream—the original stays in a perpetual loading state while a brand new “completed” pill shows up underneath. We should be tracking tool call ids and updating the existing entry instead of duplicating it so a single pill transitions cleanly from pending to completed.
+  - Deduplicated tool call pills by reconciling late-arriving `callId`s with the pending entry (matching on provider/server/tool) in `packages/app/src/types/stream.ts`, so we now update the existing card instead of appending a new one once completion metadata arrives. Added regression coverage in `test-idempotent-stream.ts` to mimic a start event that lacks a call id until the completion payload, and reran `npm run typecheck --workspace=@voice-dev/app` plus `npx tsx test-idempotent-stream.ts`.
+- [x] Tool call pills in the agent stream blend into the chat background—add a muted highlight treatment (subtle surface color, border, or backdrop) so they stand out more without overpowering nearby messages.
+  - Swapped the tool call pill surface to the secondary color, added a drop shadow, and kept status-colored borders so the cards now float above chat bubbles without feeling overpowering. Verified with `npm run typecheck --workspace=@voice-dev/app`.
+- [ ] The agent type badge in the agent list still has extra padding compared to the status pill; remove the redundant padding so both badges share the same style and rely on spacing between them rather than padding inside the type badge.