diff --git a/assets/js/collaborative-editor/components/ChatInterface.tsx b/assets/js/collaborative-editor/components/ChatInterface.tsx
deleted file mode 100644
index 1a5a53b457..0000000000
--- a/assets/js/collaborative-editor/components/ChatInterface.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-import { cn } from '#/utils/cn';
-
-/**
- * ChatInterface Component
- *
- * AI Assistant chat interface for conversing with the AI.
- *
- * Features:
- * - Message list with user and assistant messages
- * - Input field for sending messages
- * - Auto-scroll to latest message
- * - Loading states
- * - Error handling
- */
-
-interface Message {
-  id: string;
-  content: string;
-  role: 'user' | 'assistant';
-  status: 'pending' | 'processing' | 'success' | 'error' | 'cancelled';
-  code?: string;
-  inserted_at: string;
-}
-
-interface ChatInterfaceProps {
-  messages?: Message[];
-  onSendMessage?: (content: string) => void;
-  isLoading?: boolean;
-}
-
-export function ChatInterface({
-  messages = [],
-  onSendMessage,
-  isLoading = false,
-}: ChatInterfaceProps) {
-  const [input, setInput] = useState('');
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    const textarea = textareaRef.current;
-    if (!textarea) return;
-
-    textarea.style.height = 'auto';
-    textarea.style.height = `${textarea.scrollHeight}px`;
-  }, [input]);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!input.trim() || isLoading) return;
-
-    onSendMessage?.(input.trim());
-    setInput('');
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit(e);
-    }
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="flex-1 overflow-y-auto">
-        {messages.length === 0 ? (
-          <div className="flex items-center justify-center h-full">
-            <div className="flex items-center gap-2 text-gray-600">
-              <span className="hero-arrow-path h-5 w-5 animate-spin" />
-              <span className="text-sm">Loading session...</span>
-            </div>
-          </div>
-        ) : (
-          messages.map(message => (
-            <div
-              key={message.id}
-              className={cn(
-                'group px-6 py-4',
-                message.role === 'assistant' ? 'bg-gray-50/50' : 'bg-white'
-              )}
-            >
-              <div className="max-w-3xl mx-auto">
-                {message.role === 'assistant' ? (
-                  <div>
-                    <div className="space-y-3">
-                      <div className="text-[15px] text-gray-900 leading-7 whitespace-pre-wrap">
-                        {message.content}
-                      </div>
-
-                      {message.code && (
-                        <div className="rounded-lg overflow-hidden border border-gray-200 bg-white">
-                          <div className="px-4 py-2 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
-                            <span className="text-xs font-medium text-gray-700">
-                              Workflow YAML
-                            </span>
-                            <button
-                              type="button"
-                              className="text-xs text-gray-600 hover:text-gray-900 font-medium transition-colors"
-                            >
-                              Copy
-                            </button>
-                          </div>
-                          <pre className="p-4 text-xs text-gray-900 overflow-x-auto font-mono leading-relaxed">
-                            <code>{message.code}</code>
-                          </pre>
-                        </div>
-                      )}
-
-                      {message.status === 'error' && (
-                        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-red-50 border border-red-200">
-                          <span className="hero-exclamation-circle h-4 w-4 text-red-600 flex-shrink-0" />
-                          <span className="text-sm text-red-700">
-                            Failed to send message. Please try again.
-                          </span>
-                        </div>
-                      )}
-
-                      {message.status === 'processing' && (
-                        <div className="flex items-center gap-2 text-gray-600">
-                          <div className="flex items-center gap-1">
-                            <span className="inline-block w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce" />
-                            <span className="inline-block w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce [animation-delay:0.15s]" />
-                            <span className="inline-block w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce [animation-delay:0.3s]" />
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ) : (
-                  <div className="flex justify-end">
-                    <div className="flex flex-col items-end max-w-[85%]">
-                      <div className="rounded-2xl bg-gray-100 border border-gray-200 px-4 py-3">
-                        <div className="text-[15px] text-gray-900 leading-6 whitespace-pre-wrap">
-                          {message.content}
-                        </div>
-                      </div>
-
-                      {message.status === 'error' && (
-                        <div className="flex items-center gap-2 mt-2 px-3 py-1.5 rounded-lg bg-red-50 border border-red-200">
-                          <span className="hero-exclamation-circle h-3.5 w-3.5 text-red-600" />
-                          <span className="text-xs text-red-700">
-                            Failed to send
-                          </span>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          ))
-        )}
-      </div>
-
-      <div className="flex-none border-t border-gray-200 bg-white">
-        <div className="py-4 px-4">
-          <form onSubmit={handleSubmit}>
-            <div className="relative">
-              <div
-                className={cn(
-                  'rounded-xl border-2 transition-all duration-200',
-                  'bg-white',
-                  input.trim()
-                    ? 'border-primary-300'
-                    : 'border-gray-200 hover:border-gray-300'
-                )}
-              >
-                <textarea
-                  ref={textareaRef}
-                  value={input}
-                  onChange={e => setInput(e.target.value)}
-                  onKeyDown={handleKeyDown}
-                  placeholder="Message Assistant..."
-                  disabled={isLoading}
-                  rows={1}
-                  className={cn(
-                    'block w-full px-4 py-3 bg-transparent resize-none',
-                    'text-[15px] text-gray-900 placeholder:text-gray-400',
-                    'border-0 outline-none focus:outline-none focus:ring-0',
-                    'disabled:text-gray-400 disabled:cursor-not-allowed'
-                  )}
-                  style={{
-                    minHeight: '52px',
-                    maxHeight: '200px',
-                    overflow: 'hidden',
-                    overflowY: 'auto',
-                  }}
-                />
-
-                <div className="flex items-center justify-between px-3 py-2 border-t border-gray-100">
-                  <div className="flex items-center gap-1.5">
-                    <span className="hero-shield-exclamation h-3.5 w-3.5 text-amber-500" />
-                    <span className="text-[11px] font-medium text-gray-600">
-                      Do not include PII or sensitive data
-                    </span>
-                  </div>
-
-                  <button
-                    type="submit"
-                    disabled={!input.trim() || isLoading}
-                    className={cn(
-                      'inline-flex items-center justify-center',
-                      'h-7 w-7 rounded-lg',
-                      'transition-all duration-200',
-                      'focus:outline-none focus:ring-2 focus:ring-offset-2',
-                      input.trim() && !isLoading
-                        ? 'bg-primary-600 hover:bg-primary-700 text-white focus:ring-primary-500'
-                        : 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                    )}
-                    aria-label={isLoading ? 'Sending...' : 'Send message'}
-                  >
-                    {isLoading ? (
-                      <span className="hero-arrow-path h-4 w-4 animate-spin" />
-                    ) : (
-                      <span className="hero-paper-airplane-solid h-4 w-4" />
-                    )}
-                  </button>
-                </div>
-              </div>
-
-              <div className="mt-2 text-center">
-                <span className="text-[11px] text-gray-500">
-                  Press{' '}
-                  <kbd className="px-1 py-0.5 bg-gray-100 rounded text-[10px] font-medium border border-gray-200">
-                    Enter
-                  </kbd>{' '}
-                  to send,{' '}
-                  <kbd className="px-1 py-0.5 bg-gray-100 rounded text-[10px] font-medium border border-gray-200">
-                    Shift + Enter
-                  </kbd>{' '}
-                  for new line
-                </span>
-              </div>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/assets/test/collaborative-editor/components/ChatInterface.test.tsx b/assets/test/collaborative-editor/components/ChatInterface.test.tsx
deleted file mode 100644
index f4fe2f3851..0000000000
--- a/assets/test/collaborative-editor/components/ChatInterface.test.tsx
+++ /dev/null
@@ -1,380 +0,0 @@
-/**
- * ChatInterface - Tests for AI Assistant chat interface
- *
- * Tests the full chat interface including message display and input.
- * This is a simpler component that combines MessageList-like display with input.
- */
-
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { ChatInterface } from '../../../js/collaborative-editor/components/ChatInterface';
-import { createMockAIMessage } from '../__helpers__/aiAssistantHelpers';
-
-describe('ChatInterface', () => {
-  let mockSendMessage: ReturnType<typeof vi.fn>;
-
-  beforeEach(() => {
-    mockSendMessage = vi.fn();
-    vi.clearAllMocks();
-  });
-
-  describe('Empty State', () => {
-    it('should render loading state when no messages', () => {
-      render(<ChatInterface messages={[]} />);
-
-      expect(screen.getByText(/Loading session/)).toBeInTheDocument();
-    });
-
-    it('should show spinner in loading state', () => {
-      render(<ChatInterface messages={[]} />);
-
-      const spinner = document.querySelector('.hero-arrow-path.animate-spin');
-      expect(spinner).toBeInTheDocument();
-    });
-  });
-
-  describe('Message Display', () => {
-    it('should render user messages', () => {
-      const messages = [
-        createMockAIMessage({ role: 'user', content: 'Hello AI' }),
-      ];
-
-      render(<ChatInterface messages={messages} />);
-
-      expect(screen.getByText('Hello AI')).toBeInTheDocument();
-    });
-
-    it('should render assistant messages', () => {
-      const messages = [
-        createMockAIMessage({
-          role: 'assistant',
-          content: 'Hello! How can I help?',
-        }),
-      ];
-
-      render(<ChatInterface messages={messages} />);
-
-      expect(screen.getByText('Hello! How can I help?')).toBeInTheDocument();
-    });
-
-    it('should render multiple messages', () => {
-      const messages = [
-        createMockAIMessage({ id: '1', role: 'user', content: 'Question' }),
-        createMockAIMessage({ id: '2', role: 'assistant', content: 'Answer' }),
-      ];
-
-      render(<ChatInterface messages={messages} />);
-
-      expect(screen.getByText('Question')).toBeInTheDocument();
-      expect(screen.getByText('Answer')).toBeInTheDocument();
-    });
-
-    it('should show code block for messages with code', () => {
-      const messages = [
-        createMockAIMessage({
-          role: 'assistant',
-          content: 'Here is a workflow:',
-          code: 'name: Test\njobs: {}',
-        }),
-      ];
-
-      render(<ChatInterface messages={messages} />);
-
-      expect(screen.getByText('Workflow YAML')).toBeInTheDocument();
-      expect(screen.getByText(/name: Test/)).toBeInTheDocument();
-    });
-
-    it('should show error state for failed messages', () => {
-      const messages = [
-        createMockAIMessage({
-          role: 'assistant',
-          content: 'Message',
-          status: 'error',
-        }),
-      ];
-
-      render(<ChatInterface messages={messages} />);
-
-      expect(screen.getByText(/Failed to send message/)).toBeInTheDocument();
-    });
-
-    it('should show processing state with animated dots', () => {
-      const messages = [
-        createMockAIMessage({
-          role: 'assistant',
-          content: 'Thinking...',
-          status: 'processing',
-        }),
-      ];
-
-      const { container } = render(<ChatInterface messages={messages} />);
-
-      const dots = container.querySelectorAll('.animate-bounce');
-      expect(dots.length).toBeGreaterThanOrEqual(3);
-    });
-
-    it('should show error for failed user messages', () => {
-      const messages = [
-        createMockAIMessage({
-          role: 'user',
-          content: 'Failed',
-          status: 'error',
-        }),
-      ];
-
-      render(<ChatInterface messages={messages} />);
-
-      expect(screen.getByText(/Failed to send/)).toBeInTheDocument();
-    });
-  });
-
-  describe('Input Field', () => {
-    it('should render input textarea', () => {
-      render(<ChatInterface />);
-
-      expect(
-        screen.getByPlaceholderText('Message Assistant...')
-      ).toBeInTheDocument();
-    });
-
-    it('should update textarea value on input', async () => {
-      render(<ChatInterface />);
-
-      const textarea = screen.getByPlaceholderText(
-        'Message Assistant...'
-      ) as HTMLTextAreaElement;
-
-      await userEvent.type(textarea, 'Test message');
-
-      expect(textarea.value).toBe('Test message');
-    });
-
-    it('should disable textarea when loading', () => {
-      render(<ChatInterface isLoading />);
-
-      const textarea = screen.getByPlaceholderText('Message Assistant...');
-      expect(textarea).toBeDisabled();
-    });
-
-    it('should show warning about sensitive data', () => {
-      render(<ChatInterface />);
-
-      expect(
-        screen.getByText(/Do not include PII or sensitive data/)
-      ).toBeInTheDocument();
-    });
-  });
-
-  describe('Message Submission', () => {
-    it('should call onSendMessage when form submitted', async () => {
-      render(<ChatInterface onSendMessage={mockSendMessage} />);
-
-      const textarea = screen.getByPlaceholderText('Message Assistant...');
-      await userEvent.type(textarea, 'Test message');
-
-      const form = textarea.closest('form')!;
-      await userEvent.click(screen.getByRole('button', { name: /send/i }));
-
-      expect(mockSendMessage).toHaveBeenCalledWith('Test message');
-    });
-
-    it('should clear input after submission', async () => {
-      render(<ChatInterface onSendMessage={mockSendMessage} />);
-
-      const textarea = screen.getByPlaceholderText(
-        'Message Assistant...'
-      ) as HTMLTextAreaElement;
-      await userEvent.type(textarea, 'Test');
-
-      await userEvent.click(screen.getByRole('button', { name: /send/i }));
-
-      expect(textarea.value).toBe('');
-    });
-
-    it('should not submit empty message', async () => {
-      render(<ChatInterface onSendMessage={mockSendMessage} />);
-
-      const sendButton = screen.getByRole('button', { name: /send/i });
-      await userEvent.click(sendButton);
-
-      expect(mockSendMessage).not.toHaveBeenCalled();
-    });
-
-    it('should trim whitespace from message', async () => {
-      render(<ChatInterface onSendMessage={mockSendMessage} />);
-
-      const textarea = screen.getByPlaceholderText('Message Assistant...');
-      await userEvent.type(textarea, '  Hello  ');
-
-      await userEvent.click(screen.getByRole('button', { name: /send/i }));
-
-      expect(mockSendMessage).toHaveBeenCalledWith('Hello');
-    });
-
-    it('should not submit while loading', async () => {
-      render(<ChatInterface onSendMessage={mockSendMessage} isLoading />);
-
-      const textarea = screen.getByPlaceholderText('Message Assistant...');
-      await userEvent.type(textarea, 'Test');
-
-      const sendButton = screen.getByRole('button', { name: /sending/i });
-      await userEvent.click(sendButton);
-
-      expect(mockSendMessage).not.toHaveBeenCalled();
-    });
-
-    it('should submit on Enter key', async () => {
-      render(<ChatInterface onSendMessage={mockSendMessage} />);
-
-      const textarea = screen.getByPlaceholderText('Message Assistant...');
-      await userEvent.type(textarea, 'Test{Enter}');
-
-      expect(mockSendMessage).toHaveBeenCalledWith('Test');
-    });
-
-    it('should not submit on Shift+Enter', async () => {
-      render(<ChatInterface onSendMessage={mockSendMessage} />);
-
-      const textarea = screen.getByPlaceholderText('Message Assistant...');
-      await userEvent.type(textarea, 'Line 1{Shift>}{Enter}{/Shift}Line 2');
-
-      expect(mockSendMessage).not.toHaveBeenCalled();
-      expect((textarea as HTMLTextAreaElement).value).toContain('\n');
-    });
-  });
-
-  describe('Send Button', () => {
-    it('should render send button', () => {
-      render(<ChatInterface />);
-
-      expect(
-        screen.getByRole('button', { name: /send message/i })
-      ).toBeInTheDocument();
-    });
-
-    it('should disable send button when input empty', () => {
-      render(<ChatInterface />);
-
-      const sendButton = screen.getByRole('button', { name: /send/i });
-      expect(sendButton).toBeDisabled();
-    });
-
-    it('should enable send button when input has text', async () => {
-      render(<ChatInterface />);
-
-      const textarea = screen.getByPlaceholderText('Message Assistant...');
-      await userEvent.type(textarea, 'Test');
-
-      const sendButton = screen.getByRole('button', { name: /send/i });
-      expect(sendButton).toBeEnabled();
-    });
-
-    it('should show loading spinner when loading', () => {
-      render(<ChatInterface isLoading />);
-
-      const sendButton = screen.getByRole('button', { name: /sending/i });
-      expect(sendButton.querySelector('.animate-spin')).toBeInTheDocument();
-    });
-
-    it('should show send icon when not loading', () => {
-      render(<ChatInterface />);
-
-      const sendButton = screen.getByRole('button', { name: /send/i });
-      expect(
-        sendButton.querySelector('.hero-paper-airplane-solid')
-      ).toBeInTheDocument();
-    });
-  });
-
-  describe('Layout', () => {
-    it('should have scrollable message area', () => {
-      const messages = [createMockAIMessage({ role: 'user', content: 'Test' })];
-
-      const { container } = render(<ChatInterface messages={messages} />);
-
-      const scrollArea = container.querySelector('.overflow-y-auto');
-      expect(scrollArea).toBeInTheDocument();
-    });
-
-    it('should have fixed input area at bottom', () => {
-      const { container } = render(<ChatInterface />);
-
-      const inputArea = container.querySelector('.flex-none');
-      expect(inputArea).toBeInTheDocument();
-    });
-
-    it('should use full height layout', () => {
-      const { container } = render(<ChatInterface />);
-
-      const layout = container.querySelector('.h-full');
-      expect(layout).toBeInTheDocument();
-    });
-  });
-
-  describe('Keyboard Hint', () => {
-    it('should show keyboard shortcuts hint', () => {
-      render(<ChatInterface />);
-
-      expect(screen.getByText(/Press/)).toBeInTheDocument();
-      expect(screen.getByText(/to send/)).toBeInTheDocument();
-      expect(screen.getByText(/for new line/)).toBeInTheDocument();
-    });
-  });
-
-  describe('Props Handling', () => {
-    it('should handle undefined messages', () => {
-      render(<ChatInterface />);
-
-      expect(screen.getByText(/Loading session/)).toBeInTheDocument();
-    });
-
-    it('should handle missing onSendMessage', async () => {
-      render(<ChatInterface />);
-
-      const textarea = screen.getByPlaceholderText('Message Assistant...');
-      await userEvent.type(textarea, 'Test');
-
-      const form = textarea.closest('form')!;
-      expect(() =>
-        userEvent.click(screen.getByRole('button', { name: /send/i }))
-      ).not.toThrow();
-    });
-
-    it('should default isLoading to false', () => {
-      render(<ChatInterface />);
-
-      const textarea = screen.getByPlaceholderText('Message Assistant...');
-      expect(textarea).not.toBeDisabled();
-    });
-  });
-
-  describe('Message Styling', () => {
-    it('should apply different backgrounds for user vs assistant', () => {
-      const messages = [
-        createMockAIMessage({ id: '1', role: 'user', content: 'User' }),
-        createMockAIMessage({ id: '2', role: 'assistant', content: 'AI' }),
-      ];
-
-      const { container } = render(<ChatInterface messages={messages} />);
-
-      // Assistant message has gray background
-      const assistantBg = container.querySelector('.bg-gray-50\\/50');
-      expect(assistantBg).toBeInTheDocument();
-
-      // User message is right-aligned
-      const userAlign = container.querySelector('.justify-end');
-      expect(userAlign).toBeInTheDocument();
-    });
-
-    it('should style user messages as bubbles', () => {
-      const messages = [createMockAIMessage({ role: 'user', content: 'Test' })];
-
-      const { container } = render(<ChatInterface messages={messages} />);
-
-      const bubble = container.querySelector('.rounded-2xl');
-      expect(bubble).toBeInTheDocument();
-    });
-  });
-});