Enhance History component: add test for long tool result messages and improve rendering

Author: habedi

src/ui/HistoryItemDisplay.tsx

@@ -105,11 +105,18 @@ function ToolMessageContent({ content }: { content: ToolContent }) {
                     typeof toolResult.output === "string"
                         ? toolResult.output
                         : JSON.stringify(toolResult.output, null, 2);
+
                 return (
-                    <Text key={`tool-result-${index}`} color="cyan">
-                        › Tool Result ({toolResult.toolName}):{`\n`}
-                        {resultString}
-                    </Text>
+                    <Box key={`tool-result-${index}`} flexDirection="column">
+                        <Text color="cyan">› Tool Result ({toolResult.toolName}):</Text>
+                        <Box flexDirection="column">
+                            {resultString.split("\n").map((line, i) => (
+                                <Text key={i} color="cyan">
+                                    {line}
+                                </Text>
+                            ))}
+                        </Box>
+                    </Box>
                 );
             })}
         </Box>

tests/ui/History.test.tsx

@@ -84,4 +84,30 @@ describe("History", () => {
         expect(lastFrame()).toContain("Tool Result (readFile)");
         expect(lastFrame()).toContain("hello world");
     });
+
+    it("should render long tool result messages correctly", () => {
+        const longOutput = "line 1\nline 2\nline 3";
+        const history: Message[] = [
+            {
+                id: "1",
+                role: "tool",
+                content: [
+                    {
+                        type: "tool-result",
+                        toolCallId: "tool-call-456",
+                        toolName: "longTool",
+                        output: longOutput,
+                    },
+                ],
+            },
+        ];
+
+        (useStore as any).mockReturnValue(history);
+
+        const { lastFrame } = render(<History />);
+        expect(lastFrame()).toContain("Tool Result (longTool)");
+        expect(lastFrame()).toContain("line 1");
+        expect(lastFrame()).toContain("line 2");
+        expect(lastFrame()).toContain("line 3");
+    });
 });