diff --git a/src/web/frontend/components/ActivityStream.e2e.test.tsx b/src/web/frontend/components/ActivityStream.e2e.test.tsx
index a3c298a..1028448 100644
--- a/src/web/frontend/components/ActivityStream.e2e.test.tsx
+++ b/src/web/frontend/components/ActivityStream.e2e.test.tsx
@@ -540,4 +540,184 @@ describe('E2E: ActivityStream Display and Scrolling', () => {
expect(screen.getAllByText(/bd-bbb/).length).toBeGreaterThan(0);
});
});
+
+ describe('Edit tool inline diff rendering', () => {
+ it('should render inline diff for Edit tool events', () => {
+ const events = [
+ createMockEvent({
+ tool: 'Edit',
+ message: 'Editing file',
+ tool_args: {
+ file_path: '/src/example.ts',
+ old_string: 'const x = 1;',
+ new_string: 'const x = 2;',
+ },
+ }),
+ ];
+
+ const { container } = render(
+
+ );
+
+ // DiffView should be rendered within the event item
+ const diffView = container.querySelector('.event-item .diff-view');
+ expect(diffView).toBeInTheDocument();
+
+ // File path should be shown
+ expect(diffView?.textContent).toContain('/src/example.ts');
+ });
+
+ it('should show collapsed diff by default in compact mode', () => {
+ const events = [
+ createMockEvent({
+ tool: 'Edit',
+ message: 'Editing file',
+ tool_args: {
+ file_path: '/src/test.ts',
+ old_string: 'old line 1\nold line 2',
+ new_string: 'new line 1\nnew line 2',
+ },
+ }),
+ ];
+
+ const { container } = render(
+
+ );
+
+ const diffView = container.querySelector('.diff-view');
+ expect(diffView).toHaveClass('compact');
+
+ // Diff content should not be visible when collapsed
+ const diffContent = container.querySelector('.diff-content');
+ expect(diffContent).not.toBeInTheDocument();
+ });
+
+ it('should expand diff on toggle click', async () => {
+ const events = [
+ createMockEvent({
+ tool: 'Edit',
+ message: 'Editing file',
+ tool_args: {
+ file_path: '/src/test.ts',
+ old_string: 'old line',
+ new_string: 'new line',
+ },
+ }),
+ ];
+
+ const { container } = render(
+
+ );
+
+ // Initially collapsed
+ expect(container.querySelector('.diff-content')).not.toBeInTheDocument();
+
+ // Click the toggle button
+ const toggleButton = container.querySelector('.diff-toggle');
+ expect(toggleButton).toBeInTheDocument();
+ await userEvent.click(toggleButton!);
+
+ // Diff content should now be visible
+ const diffContent = container.querySelector('.diff-content');
+ expect(diffContent).toBeInTheDocument();
+
+ // Should show diff lines
+ const diffLines = container.querySelectorAll('.diff-line');
+ expect(diffLines.length).toBeGreaterThan(0);
+ });
+
+ it('should display diff summary with added/removed counts', () => {
+ const events = [
+ createMockEvent({
+ tool: 'Edit',
+ message: 'Editing file',
+ tool_args: {
+ file_path: '/src/test.ts',
+ old_string: 'line 1\nline 2\nline 3',
+ new_string: 'line 1\nline 2 modified\nline 3',
+ },
+ }),
+ ];
+
+ const { container } = render(
+
+ );
+
+ const diffSummary = container.querySelector('.diff-summary');
+ expect(diffSummary).toBeInTheDocument();
+ expect(diffSummary?.textContent).toMatch(/\d+ removed/);
+ expect(diffSummary?.textContent).toMatch(/\d+ added/);
+ });
+
+ it('should not render diff for non-Edit tools', () => {
+ const events = [
+ createMockEvent({
+ tool: 'Read',
+ message: 'Reading file',
+ tool_args: {
+ file_path: '/src/test.ts',
+ },
+ }),
+ ];
+
+ const { container } = render(
+
+ );
+
+ const diffView = container.querySelector('.event-item .diff-view');
+ expect(diffView).not.toBeInTheDocument();
+ });
+
+ it('should handle Edit events with missing diff data gracefully', () => {
+ const events = [
+ createMockEvent({
+ tool: 'Edit',
+ message: 'Editing file',
+ tool_args: {
+ file_path: '/src/test.ts',
+ // old_string and new_string missing
+ },
+ }),
+ ];
+
+ const { container } = render(
+
+ );
+
+ // Should not render diff view when data is incomplete
+ const diffView = container.querySelector('.event-item .diff-view');
+ expect(diffView).not.toBeInTheDocument();
+ });
+
+ it('should render multi-line diffs correctly', async () => {
+ const events = [
+ createMockEvent({
+ tool: 'Edit',
+ message: 'Multi-line edit',
+ tool_args: {
+ file_path: '/src/component.tsx',
+ old_string: 'const a = 1;\nconst b = 2;\nconst c = 3;',
+ new_string: 'const a = 1;\nconst b = 20;\nconst c = 3;',
+ },
+ }),
+ ];
+
+ const { container } = render(
+
+ );
+
+ // Expand the diff
+ const toggleButton = container.querySelector('.diff-toggle');
+ if (toggleButton) {
+ await userEvent.click(toggleButton);
+ }
+
+ // Check for diff line types
+ const removedLines = container.querySelectorAll('.diff-line-removed');
+ const addedLines = container.querySelectorAll('.diff-line-added');
+
+ expect(removedLines.length).toBeGreaterThan(0);
+ expect(addedLines.length).toBeGreaterThan(0);
+ });
+ });
});