@herbcaudill/ralph 0.2.0 → 0.3.0

package/dist/components/EventDisplay.replay.test.js

@@ -0,0 +1,403 @@
+import React from "react";
+import { render } from "ink-testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { readFileSync } from "fs";
+import { join } from "path";
+import { EventDisplay } from "./EventDisplay.js";
+/**
+ * Helper function to replay an event log file and return the rendered output
+ */
+async function replay(logFile) {
+    // Read the event log
+    const logPath = join(process.cwd(), "test/event-logs", logFile);
+    const logContent = readFileSync(logPath, "utf-8");
+    // Parse JSON events (multi-line JSON objects separated by blank lines)
+    const events = [];
+    const jsonObjects = logContent.split("\n\n");
+    for (const jsonStr of jsonObjects) {
+        if (!jsonStr.trim())
+            continue;
+        try {
+            const event = JSON.parse(jsonStr);
+            events.push(event);
+        }
+        catch {
+            // Skip invalid JSON
+        }
+    }
+    // Render with all events
+    const { lastFrame } = render(React.createElement(EventDisplay, { events: events }));
+    // Wait for rendering
+    await vi.waitFor(() => {
+        const output = lastFrame() ?? "";
+        expect(output.length).toBeGreaterThan(0);
+    }, { timeout: 1000 });
+    return lastFrame() ?? "";
+}
+describe("EventDisplay replay tests", () => {
+    it("replays 1.txt", async () => {
+        expect(await replay("1.txt")).toMatchInlineSnapshot(`
+      "I'll start by checking the types, unit tests, and end-to-end tests as instructed.
+
+        TodoWrite
+                      [~] Run typecheck to verify types
+                      [ ] Run unit tests via pnpm test
+                      [ ] Run end-to-end tests via pnpm test:pw
+
+        $ pnpm typecheck
+
+      Good! Types check successfully. Now let me run the unit tests.
+
+        TodoWrite
+                      [x] Run typecheck to verify types
+                      [~] Run unit tests via pnpm test
+                      [ ] Run end-to-end tests via pnpm test:pw
+
+        $ pnpm test
+
+      Perfect! Unit tests pass. Now let me run the end-to-end tests.
+
+        TodoWrite
+                      [x] Run typecheck to verify types
+                      [x] Run unit tests via pnpm test
+                      [~] Run end-to-end tests via pnpm test:pw
+
+        $ pnpm test:pw"
+    `);
+    });
+    it("replays 2.txt", async () => {
+        expect(await replay("2.txt")).toMatchInlineSnapshot(`
+      "I'll start by checking that the project builds successfully and running tests.
+
+        $ pnpm build
+
+        $ pnpm test
+
+      Good! The build is successful and all tests pass. Now let me check the todo list to find the
+      highest-priority task.
+
+        Read .ralph/todo.md
+
+      Looking at the todo list, I'll prioritize the "Inline code blocks are being put in separate
+      paragraphs" issue. This is a functional bug affecting the display quality, whereas the others are
+      enhancements. Let me investigate this issue first.
+
+        Read src/components/StreamingText.tsx
+
+      Let me check the tests to understand the expected behavior and see if there's a failing test case:
+
+        Read src/components/StreamingText.test.tsx
+
+      I need to understand where StreamingText is being used and what the actual problem is. Let me check
+      where it's called from and look at some example output:
+
+        Grep StreamingText
+
+        Read src/components/EventDisplay.tsx
+
+      I see the issue now! In EventDisplay.tsx:70, there's a <Box flexDirection="column" gap={1}> which
+      wraps each StreamingText component. Each StreamingText (which represents text blocks) is being
+      placed in its own box with a gap, causing inline code to appear in separate paragraphs.
+
+      The problem is that each text block from Claude's message content is being rendered as a separate
+      StreamingText component with gaps between them. This works fine for separate paragraphs, but inline
+      code within a sentence gets split incorrectly.
+
+      Let me look at how the events are being split into blocks:
+
+        Read src/components/eventToBlocks.ts
+
+      Now I understand the issue. Claude's message content can have multiple text blocks (e.g., "Here's
+      the code: ", then a tool_use block, then " and that's it"). Each text block becomes a separate
+      ContentBlock with type "text", and EventDisplay renders each one as a separate <StreamingText>
+      component in a Box with gap={1}, causing unwanted spacing.
+
+      The fix should be to merge consecutive text blocks together. Let me write a test first to
+      demonstrate the problem:
+
+        Read src/components/EventDisplay.test.tsx
+
+      Now let me add a test that demonstrates the inline code block problem and then fix it:
+
+        Edit src/components/EventDisplay.test.tsx
+
+      Now let me run the test to confirm it fails (demonstrating the problem):
+
+        $ pnpm test EventDisplay.test.tsx
+
+      Perfect! The test fails as expected, confirming the bug. Now I need to fix it by modifying
+      eventToBlocks to merge consecutive text blocks:
+
+        Edit src/components/eventToBlocks.ts
+
+      Now I need to also flush the text buffer at the end of the loop:
+
+        Edit src/components/eventToBlocks.ts
+
+      Now let me run the tests again to verify the fix works:
+
+        $ pnpm test EventDisplay.test.tsx
+
+      The test still fails. This suggests the problem might also be in EventDisplay, not just
+      eventToBlocks. Let me debug by adding a simpler test to see what's happening in eventToBlocks:
+
+        Read src/components/eventToBlocks.test.ts
+
+      I see! The existing test "extracts multiple text blocks" expects them NOT to be merged. I need to
+      update this test and add a new one specifically for consecutive text blocks:
+
+        Edit src/components/eventToBlocks.test.ts
+
+      Now let me add a test for text blocks separated by tool calls:
+
+        Read src/components/eventToBlocks.test.ts
+
+      Let me add a test that specifically checks text blocks separated by tool calls:
+
+        Edit src/components/eventToBlocks.test.ts
+
+      Now let me run all tests to verify my changes to eventToBlocks work:
+
+        $ pnpm test eventToBlocks.test.ts
+
+      I need to look at this failing test:
+
+        Read src/components/eventToBlocks.test.ts
+
+      This test expects 3 separate IDs for 3 text blocks, but my code now merges them into 1. I need to
+      update this test to reflect the new behavior:
+
+        Edit src/components/eventToBlocks.test.ts
+
+      Now let me run the eventToBlocks tests again:
+
+        $ pnpm test eventToBlocks.test.ts
+
+      Great! Now let me run the EventDisplay test again:
+
+        $ pnpm test EventDisplay.test.tsx
+
+      The problem is still happening at the EventDisplay level. Let me check what's actually being
+      rendered. The issue must be in how EventDisplay merges the events. Let me look more carefully at the
+       EventDisplay logic:
+
+        Read src/components/EventDisplay.tsx
+
+      I see! The EventDisplay is doing its own deduplication, but it's NOT merging consecutive text
+      blocks. The text blocks in the test data remain separate even after eventToBlocks merges them,
+      because my test is creating a single event with 3 separate text blocks in content.
+
+      Wait, let me re-check the flow. EventDisplay calls eventToBlocks on each merged event. So if
+      eventToBlocks correctly merges text blocks, then EventDisplay should get a single merged text block.
+       Let me debug by adding a console log or looking at what's actually happening.
+
+      Let me write a simpler test to see what's going on:
+
+        $ cat > test-merge.ts << 'EOF'
+          import { eventToBlocks } from "./src/components/eventToBlocks.js"
+
+          const event = {
+           type: "assistant",
+           message: {
+           id: "msg_123",
+           content: [
+           { type: "text", text: "Use the " },
+           { type: "text", text: "\`console.log()\`" },
+           { type: "text", text: " function to debug." },
+           ],
+           },
+          }
+
+          const result = eventToBlocks(event)
+          console.log("Result:", JSON.stringify(result, null, 2))
+          EOF
+          tsx test-merge.ts
+
+      Let me check if my fix is actually working by looking at the eventToBlocks implementation more
+      carefully. Actually, let me just trace through what should happen:
+
+      1. eventToBlocks receives an event with 3 text blocks
+      2. It loops through content
+      3. First text block: adds "Use the " to textBuffer
+      4. Second text block: adds "console.log()" to textBuffer (now "Use the console.log()")
+      5. Third text block: adds " function to debug." to textBuffer (now "Use the console.log() function
+      to debug.")
+      6. After the loop, it flushes the textBuffer as one merged text block
+
+      That should work! Let me check if there's an issue with my implementation. Let me re-read the code:
+
+        Read src/components/eventToBlocks.ts
+
+      The code looks correct. Let me check if the EventDisplay is receiving the correct merged content. I
+      think the issue might be in how EventDisplay deduplicates and merges content before calling
+      eventToBlocks. Let me look at that logic again:
+
+        Read src/components/EventDisplay.tsx
+
+      Ah! I see the problem now. In the test, we're providing a single event with one message containing 3
+       text blocks. EventDisplay keeps the text blocks separate in uniqueContent (lines 36-54), so they
+      stay as 3 separate blocks before being passed to eventToBlocks. Then eventToBlocks merges them. But
+      there's still the Box with gap={1} that creates spacing.
+
+      Wait, actually looking at the logic again - eventToBlocks should merge them, and return a single
+      ContentBlock. Then that single block gets rendered as a single <StreamingText> component. So there
+      should be no gaps.
+
+      Let me add some logging to see what's actually happening. But actually, I think the problem is that
+      the test is checking for newlines in the output. Ink's Box with flexDirection="column" adds newlines
+       between elements. So even if I have 1 StreamingText, the Box might still add newlines around it.
+
+      Actually wait - if eventToBlocks returns 1 block, then there's only 1 child in the Box, so there
+      should be no gaps. Let me trace through more carefully what the test is doing:
+
+      In the test, we render <EventDisplay events={[...]} />. The EventDisplay:
+      1. Filters to assistant messages
+      2. Merges by message ID (only 1 message)
+      3. Deduplicates (all 3 text blocks are unique)
+      4. Calls eventToBlocks on the merged event
+      5. eventToBlocks should merge the 3 text blocks into 1
+      6. Renders the blocks
+
+      Let me print what lastFrame() actually returns by modifying the test temporarily:
+
+        Edit src/components/EventDisplay.test.tsx
+
+        $ pnpm test EventDisplay.test.tsx 2>&1 | grep -A 20 "merges consecutive"
+
+      Aha! The output is "Use the\\n\\nconsole.log()\\n\\n function to debug." - there are TWO newlines
+      between each part! This tells me that the 3 text blocks are NOT being merged by eventToBlocks.
+      They're still coming through as 3 separate parts.
+
+      This means the EventDisplay deduplication logic is keeping them separate, OR there's a bug in my
+      eventToBlocks implementation. Let me add logging to eventToBlocks to see:
+
+        Edit src/components/eventToBlocks.ts
+
+        $ pnpm test EventDisplay.test.tsx 2>&1 | grep -A 30 "eventToBlocks content"
+
+      Perfect! So eventToBlocks IS receiving the 3 separate text blocks:
+      json
+      [
+        { "type": "text", "text": "Use the " },
+        { "type": "text", "text": "console.log()" },
+        { "type": "text", "text": " function to debug." }
+      ]
+
+
+      But the output still shows them on 3 separate lines. This means my merging logic isn't working. Let
+      me add more logging to see what's happening in the loop:
+
+        Edit src/components/eventToBlocks.ts
+
+        Edit src/components/eventToBlocks.ts
+
+        $ pnpm test EventDisplay.test.tsx 2>&1 | grep -A 50 "merges consecutive text blocks to prevent
+          unwanted gaps"
+
+      EXCELLENT! The merging IS working correctly:
+      - eventToBlocks returns: [{ "type": "text", "content": "Use the console.log() function to debug.",
+      "id": "msg_123-0" }]
+
+      But the output is still: "Use the\\n\\nconsole.log()\\n\\n function to debug."
+
+      This means the problem is in how StreamingText is rendering! The backticks in the merged text are
+      being split up by StreamingText's markdown processing. Let me check the StreamingText component
+      logic again - it must be detecting the backticks and rendering them as separate Text components, and
+       those are getting newlines between them!
+
+      Oh wait, I see it now! Look at EventDisplay:69-76:
+
+      tsx
+      <Box flexDirection="column" gap={1}>
+        {contentBlocks.map(block =>
+          block.type === "text" ?
+            <StreamingText key={block.id} content={block.content} />
+          : <ToolUse key={block.id} name={block.name} arg={block.arg} />,
+        )}
+      </Box>
+
+
+      The Box has gap={1}, which adds gaps between CHILDREN. StreamingText renders multiple <Text>
+      components (one for each formatted segment), and those become CHILDREN of the parent, not siblings.
+      Wait, no - StreamingText returns a fragment <>...</> containing multiple Text components.
+
+      Actually, I think the issue is that Ink is rendering the separate Text components with gaps. Let me
+      check StreamingText more carefully - it returns a fragment with separate Text components. Those Text
+       components might be getting wrapped or treated differently by Ink.
+
+      Actually, I think the real fix is to render StreamingText as inline, not in a column layout. But
+      wait, the Box flexDirection="column" affects the layout of contentBlocks (Text vs ToolUse), not the
+      internal layout of StreamingText.
+
+      Let me check if the problem is in how StreamingText uses fragments. When you return a fragment with
+      multiple <Text> components in Ink, they might be rendered on separate lines. Let me check:
+
+        Read src/components/StreamingText.tsx
+
+      The issue is that StreamingText returns a fragment with multiple <Text> components. In Ink, these
+      might be rendered as separate blocks. The fix is to wrap them in a single <Text> component or use
+      the <Text wrap="wrap"> with inline rendering.
+
+      Let me look at how Ink handles multiple Text components. Actually, the fix is simple - wrap all the
+      text parts in a single Box or Text component with inline rendering:
+
+        Edit src/components/StreamingText.tsx
+
+        Edit src/components/StreamingText.tsx
+
+      Now let me remove the console.log statements and test:
+
+        Edit src/components/eventToBlocks.ts
+
+        Edit src/components/eventToBlocks.ts
+
+        Edit src/components/EventDisplay.test.tsx
+
+      Now let me run all tests:
+
+        $ pnpm test
+
+      Perfect! All tests pass now. Let me verify the build still works:
+
+        $ pnpm build
+
+      Excellent! Now let me update the todo list and progress file, then commit:
+
+        Read .ralph/todo.md
+
+        Edit .ralph/todo.md
+
+        Read .ralph/progress.md
+
+        Edit .ralph/progress.md
+
+      Now let me format the code with Prettier:
+
+        $ pnpm format
+
+      Good! Now let me commit all these changes:
+
+        $ git add -A && git diff --cached --stat
+
+        $ git commit -m "$(cat <<'EOF'
+          Fix inline code blocks appearing in separate paragraphs
+
+          - Modified eventToBlocks.ts to merge consecutive text blocks using a textBuffer
+          - Wrapped StreamingText content in Box component for proper inline rendering
+          - Added test case to verify consecutive text blocks are merged
+          - Updated existing tests to reflect new merging behavior
+
+          Fixes issue where inline code like \`console.log()\` was rendered on separate
+          lines with gaps instead of flowing inline with surrounding text.
+
+          Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
+          EOF
+          )"
+
+      Perfect! Let me verify git status:
+
+        $ git status"
+    `);
+    });
+});
+//# sourceMappingURL=EventDisplay.replay.test.js.map

package/dist/components/EventDisplay.replay.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventDisplay.replay.test.js","sourceRoot":"","sources":["../../src/components/EventDisplay.replay.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD;;GAEG;AACH,KAAK,UAAU,MAAM,CAAC,OAAe;IACnC,qBAAqB;IACrB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,iBAAiB,EAAE,OAAO,CAAC,CAAA;IAC/D,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IAEjD,uEAAuE;IACvE,MAAM,MAAM,GAAmC,EAAE,CAAA;IACjD,MAAM,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IAC5C,KAAK,MAAM,OAAO,IAAI,WAAW,EAAE,CAAC;QAClC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;YAAE,SAAQ;QAC7B,IAAI,CAAC;YACH,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;YACjC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACpB,CAAC;QAAC,MAAM,CAAC;YACP,oBAAoB;QACtB,CAAC;IACH,CAAC;IAED,yBAAyB;IACzB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,YAAY,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAA;IAE9D,qBAAqB;IACrB,MAAM,EAAE,CAAC,OAAO,CACd,GAAG,EAAE;QACH,MAAM,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,CAAA;QAChC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAA;IAC1C,CAAC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,CAClB,CAAA;IAED,OAAO,SAAS,EAAE,IAAI,EAAE,CAAA;AAC1B,CAAC;AAED,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACzC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BnD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2UnD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/dist/components/EventDisplay.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=EventDisplay.test.d.ts.map

package/dist/components/EventDisplay.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventDisplay.test.d.ts","sourceRoot":"","sources":["../../src/components/EventDisplay.test.tsx"],"names":[],"mappings":""}

package/dist/components/EventDisplay.test.js

@@ -0,0 +1,223 @@
+import React from "react";
+import { render } from "ink-testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { EventDisplay } from "./EventDisplay.js";
+describe("EventDisplay", () => {
+    it("filters out stream_event types and only shows assistant messages", async () => {
+        const events = [
+            {
+                type: "stream_event",
+                event: {
+                    type: "content_block_delta",
+                    delta: { type: "text_delta", text: "Streaming..." },
+                },
+            },
+            {
+                type: "assistant",
+                message: {
+                    id: "msg_123",
+                    content: [{ type: "text", text: "Complete message" }],
+                },
+            },
+        ];
+        const { lastFrame } = render(React.createElement(EventDisplay, { events: events }));
+        await vi.waitFor(() => {
+            const output = lastFrame() ?? "";
+            expect(output).toContain("Complete message");
+            // Should not show streaming events
+            expect(output).not.toContain("Streaming...");
+        });
+    });
+    it("deduplicates events with the same message ID", async () => {
+        const events = [
+            {
+                type: "assistant",
+                message: {
+                    id: "msg_123",
+                    content: [{ type: "text", text: "First version" }],
+                },
+            },
+            {
+                type: "assistant",
+                message: {
+                    id: "msg_123",
+                    content: [
+                        { type: "text", text: "First version" },
+                        { type: "text", text: "Updated version" },
+                    ],
+                },
+            },
+        ];
+        const { lastFrame } = render(React.createElement(EventDisplay, { events: events }));
+        // Wait for useEffect to complete
+        await vi.waitFor(() => {
+            const output = lastFrame() ?? "";
+            expect(output).toContain("Updated version");
+        });
+        const output = lastFrame() ?? "";
+        // Should not duplicate the first text
+        expect(output.match(/First version/g)?.length).toBe(1);
+    });
+    it("handles multiple different messages", async () => {
+        const events = [
+            {
+                type: "assistant",
+                message: {
+                    id: "msg_123",
+                    content: [{ type: "text", text: "Message 1" }],
+                },
+            },
+            {
+                type: "assistant",
+                message: {
+                    id: "msg_456",
+                    content: [{ type: "text", text: "Message 2" }],
+                },
+            },
+        ];
+        const { lastFrame } = render(React.createElement(EventDisplay, { events: events }));
+        await vi.waitFor(() => {
+            const output = lastFrame() ?? "";
+            expect(output).toContain("Message 1");
+            expect(output).toContain("Message 2");
+        });
+    });
+    it("handles tool use events", async () => {
+        const events = [
+            {
+                type: "assistant",
+                message: {
+                    id: "msg_123",
+                    content: [
+                        {
+                            type: "tool_use",
+                            name: "Read",
+                            input: { file_path: "/absolute/path/file.ts" },
+                        },
+                    ],
+                },
+            },
+        ];
+        const { lastFrame } = render(React.createElement(EventDisplay, { events: events }));
+        await vi.waitFor(() => {
+            const output = lastFrame() ?? "";
+            expect(output).toContain("Read");
+            expect(output).toContain("file.ts");
+        });
+    });
+    it("updates display when new events arrive", async () => {
+        const events1 = [
+            {
+                type: "assistant",
+                message: {
+                    id: "msg_123",
+                    content: [{ type: "text", text: "Initial" }],
+                },
+            },
+        ];
+        const { lastFrame, rerender } = render(React.createElement(EventDisplay, { events: events1 }));
+        await vi.waitFor(() => {
+            expect(lastFrame()).toContain("Initial");
+        });
+        const events2 = [
+            ...events1,
+            {
+                type: "assistant",
+                message: {
+                    id: "msg_456",
+                    content: [{ type: "text", text: "New message" }],
+                },
+            },
+        ];
+        rerender(React.createElement(EventDisplay, { events: events2 }));
+        await vi.waitFor(() => {
+            const output = lastFrame() ?? "";
+            expect(output).toContain("Initial");
+            expect(output).toContain("New message");
+        });
+    });
+    it("handles partial message updates without duplicating keys", async () => {
+        // Simulate streaming where the same message gets updated multiple times
+        const events = [
+            {
+                type: "assistant",
+                message: {
+                    id: "msg_123",
+                    content: [{ type: "text", text: "Thinking..." }],
+                },
+            },
+            {
+                type: "assistant",
+                message: {
+                    id: "msg_123",
+                    content: [
+                        { type: "text", text: "Thinking..." },
+                        {
+                            type: "tool_use",
+                            id: "toolu_read1",
+                            name: "Read",
+                            input: { file_path: "/path/file.ts" },
+                        },
+                    ],
+                },
+            },
+            {
+                type: "assistant",
+                message: {
+                    id: "msg_123",
+                    content: [
+                        { type: "text", text: "Thinking..." },
+                        {
+                            type: "tool_use",
+                            id: "toolu_read1",
+                            name: "Read",
+                            input: { file_path: "/path/file.ts" },
+                        },
+                        {
+                            type: "tool_use",
+                            id: "toolu_edit1",
+                            name: "Edit",
+                            input: { file_path: "/path/file.ts" },
+                        },
+                    ],
+                },
+            },
+        ];
+        const { lastFrame } = render(React.createElement(EventDisplay, { events: events }));
+        await vi.waitFor(() => {
+            const output = lastFrame() ?? "";
+            // Should only see one instance of each tool
+            expect(output.match(/Read/g)?.length).toBe(1);
+            expect(output.match(/Edit/g)?.length).toBe(1);
+        });
+    });
+    it("merges consecutive text blocks to prevent unwanted gaps", async () => {
+        // When Claude outputs text in multiple blocks (e.g., before and after inline code),
+        // we should merge them into one StreamingText component to avoid gaps
+        const events = [
+            {
+                type: "assistant",
+                message: {
+                    id: "msg_123",
+                    content: [
+                        { type: "text", text: "Use the " },
+                        { type: "text", text: "`console.log()`" },
+                        { type: "text", text: " function to debug." },
+                    ],
+                },
+            },
+        ];
+        const { lastFrame } = render(React.createElement(EventDisplay, { events: events }));
+        await vi.waitFor(() => {
+            const output = lastFrame() ?? "";
+            expect(output).toContain("Use the");
+            expect(output).toContain("console.log()");
+            expect(output).toContain("function to debug");
+        });
+        // The output should be on one line without extra spacing
+        const output = lastFrame() ?? "";
+        const lines = output.split("\n").filter(l => l.trim());
+        expect(lines.length).toBe(1);
+    });
+});
+//# sourceMappingURL=EventDisplay.test.js.map

package/dist/components/EventDisplay.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventDisplay.test.js","sourceRoot":"","sources":["../../src/components/EventDisplay.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,kEAAkE,EAAE,KAAK,IAAI,EAAE;QAChF,MAAM,MAAM,GAAG;YACb;gBACE,IAAI,EAAE,cAAc;gBACpB,KAAK,EAAE;oBACL,IAAI,EAAE,qBAAqB;oBAC3B,KAAK,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,cAAc,EAAE;iBACpD;aACF;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC;iBACtD;aACF;SACF,CAAA;QAED,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,YAAY,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAA;QAE9D,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;YACpB,MAAM,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,CAAA;YAChC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAA;YAC5C,mCAAmC;YACnC,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;QAC9C,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,MAAM,GAAG;YACb;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;iBACnD;aACF;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE;wBACP,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE;wBACvC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,EAAE;qBAC1C;iBACF;aACF;SACF,CAAA;QAED,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,YAAY,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAA;QAE9D,iCAAiC;QACjC,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;YACpB,MAAM,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,CAAA;YAChC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;QAC7C,CAAC,CAAC,CAAA;QAEF,MAAM,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,CAAA;QAChC,sCAAsC;QACtC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACxD,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,MAAM,GAAG;YACb;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;iBAC/C;aACF;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;iBAC/C;aACF;SACF,CAAA;QAED,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,YAAY,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAA;QAE9D,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;YACpB,MAAM,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,CAAA;YAChC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;YACrC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;QACvC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,MAAM,GAAG;YACb;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE;wBACP;4BACE,IAAI,EAAE,UAAU;4BAChB,IAAI,EAAE,MAAM;4BACZ,KAAK,EAAE,EAAE,SAAS,EAAE,wBAAwB,EAAE;yBAC/C;qBACF;iBACF;aACF;SACF,CAAA;QAED,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,YAAY,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAA;QAE9D,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;YACpB,MAAM,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,CAAA;YAChC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;YAChC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;QACrC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,OAAO,GAAG;YACd;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iBAC7C;aACF;SACF,CAAA;QAED,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,oBAAC,YAAY,IAAC,MAAM,EAAE,OAAO,GAAI,CAAC,CAAA;QAEzE,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;YACpB,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;QAC1C,CAAC,CAAC,CAAA;QAEF,MAAM,OAAO,GAAG;YACd,GAAG,OAAO;YACV;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;iBACjD;aACF;SACF,CAAA;QAED,QAAQ,CAAC,oBAAC,YAAY,IAAC,MAAM,EAAE,OAAO,GAAI,CAAC,CAAA;QAE3C,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;YACpB,MAAM,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,CAAA;YAChC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;YACnC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;QACzC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;QACxE,wEAAwE;QACxE,MAAM,MAAM,GAAG;YACb;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;iBACjD;aACF;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE;wBACP,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE;wBACrC;4BACE,IAAI,EAAE,UAAU;4BAChB,EAAE,EAAE,aAAa;4BACjB,IAAI,EAAE,MAAM;4BACZ,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE;yBACtC;qBACF;iBACF;aACF;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE;wBACP,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE;wBACrC;4BACE,IAAI,EAAE,UAAU;4BAChB,EAAE,EAAE,aAAa;4BACjB,IAAI,EAAE,MAAM;4BACZ,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE;yBACtC;wBACD;4BACE,IAAI,EAAE,UAAU;4BAChB,EAAE,EAAE,aAAa;4BACjB,IAAI,EAAE,MAAM;4BACZ,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE;yBACtC;qBACF;iBACF;aACF;SACF,CAAA;QAED,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,YAAY,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAA;QAE9D,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;YACpB,MAAM,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,CAAA;YAChC,4CAA4C;YAC5C,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;YAC7C,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAC/C,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,yDAAyD,EAAE,KAAK,IAAI,EAAE;QACvE,oFAAoF;QACpF,sEAAsE;QACtE,MAAM,MAAM,GAAG;YACb;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE;oBACP,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE;wBACP,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE;wBAClC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,EAAE;wBACzC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,qBAAqB,EAAE;qBAC9C;iBACF;aACF;SACF,CAAA;QAED,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,YAAY,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAA;QAE9D,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;YACpB,MAAM,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,CAAA;YAChC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;YACnC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CAAA;YACzC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAA;QAC/C,CAAC,CAAC,CAAA;QAEF,yDAAyD;QACzD,MAAM,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,CAAA;QAChC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAA;QACtD,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IAC9B,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/dist/components/Header.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare const Header: ({ claudeVersion, ralphVersion }: Props) => React.JSX.Element;
+type Props = {
+    claudeVersion: string;
+    ralphVersion: string;
+};
+export {};
+//# sourceMappingURL=Header.d.ts.map

package/dist/components/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,MAAM,GAAI,iCAAiC,KAAK,sBAiB5D,CAAA;AAED,KAAK,KAAK,GAAG;IACX,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA"}