diff --git a/web-ui/__mocks__/@hugeicons/react.js b/web-ui/__mocks__/@hugeicons/react.js
index d3fa2e15..16d2bcec 100644
--- a/web-ui/__mocks__/@hugeicons/react.js
+++ b/web-ui/__mocks__/@hugeicons/react.js
@@ -55,4 +55,7 @@ module.exports = {
   ArrowDown01Icon: createIconMock('ArrowDown01Icon'),
   ArrowUp01Icon: createIconMock('ArrowUp01Icon'),
   StopIcon: createIconMock('StopIcon'),
+  // AgentChatPanel
+  ArrowRight01Icon: createIconMock('ArrowRight01Icon'),
+  Alert01Icon: createIconMock('Alert01Icon'),
 };
diff --git a/web-ui/jest.setup.js b/web-ui/jest.setup.js
index 101fb230..37a7063e 100644
--- a/web-ui/jest.setup.js
+++ b/web-ui/jest.setup.js
@@ -1,5 +1,8 @@
 import '@testing-library/jest-dom';
 
+// jsdom does not implement scrollIntoView
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
 // Mock next/navigation
 jest.mock('next/navigation', () => ({
   useRouter() {
diff --git a/web-ui/src/__tests__/components/sessions/AgentChatPanel.test.tsx b/web-ui/src/__tests__/components/sessions/AgentChatPanel.test.tsx
new file mode 100644
index 00000000..7f9389c5
--- /dev/null
+++ b/web-ui/src/__tests__/components/sessions/AgentChatPanel.test.tsx
@@ -0,0 +1,323 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { AgentChatPanel } from '@/components/sessions/AgentChatPanel';
+import { useAgentChat } from '@/hooks/useAgentChat';
+import type { AgentChatState, ChatMessage } from '@/types';
+
+jest.mock('@/hooks/useAgentChat');
+
+const mockUseAgentChat = useAgentChat as jest.MockedFunction<typeof useAgentChat>;
+
+// ── Helpers ─────────────────────────────────────────────────────────────
+
+function makeMessage(overrides: Partial<ChatMessage>): ChatMessage {
+  return {
+    id: Math.random().toString(36).slice(2),
+    role: 'assistant',
+    content: 'Hello',
+    createdAt: new Date().toISOString(),
+    ...overrides,
+  };
+}
+
+function makeState(overrides: Partial<AgentChatState> = {}): AgentChatState {
+  return {
+    messages: [],
+    status: 'idle',
+    costUsd: 0,
+    inputTokens: 0,
+    outputTokens: 0,
+    error: null,
+    connected: true,
+    ...overrides,
+  };
+}
+
+const mockSendMessage = jest.fn();
+const mockInterrupt = jest.fn();
+const mockClearMessages = jest.fn();
+
+function setupMock(state: AgentChatState) {
+  mockUseAgentChat.mockReturnValue({
+    state,
+    sendMessage: mockSendMessage,
+    interrupt: mockInterrupt,
+    clearMessages: mockClearMessages,
+  });
+}
+
+// ── Tests ────────────────────────────────────────────────────────────────
+
+describe('AgentChatPanel', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  // ── Empty state ──────────────────────────────────────────────────────
+
+  it('shows empty state when there are no messages', () => {
+    setupMock(makeState());
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByText('Start a conversation with your agent')).toBeInTheDocument();
+  });
+
+  it('does not show empty state when messages exist', () => {
+    setupMock(makeState({ messages: [makeMessage({ role: 'user', content: 'Hi' })] }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.queryByText('Start a conversation with your agent')).not.toBeInTheDocument();
+    expect(screen.getByText('Hi')).toBeInTheDocument();
+  });
+
+  // ── All 7 message roles ──────────────────────────────────────────────
+
+  it('renders user message with correct role styling', () => {
+    setupMock(makeState({ messages: [makeMessage({ role: 'user', content: 'User msg' })] }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByText('User msg')).toBeInTheDocument();
+  });
+
+  it('renders assistant message', () => {
+    setupMock(makeState({ messages: [makeMessage({ role: 'assistant', content: 'Assistant msg' })] }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByText('Assistant msg')).toBeInTheDocument();
+  });
+
+  it('renders tool_use card collapsed by default with tool name', () => {
+    setupMock(makeState({
+      messages: [makeMessage({
+        role: 'tool_use',
+        content: '',
+        toolName: 'read_file',
+        toolInput: { path: 'src/index.ts' },
+      })],
+    }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByText(/read_file/)).toBeInTheDocument();
+    // JSON body should not be visible when collapsed
+    expect(screen.queryByText(/"path"/)).not.toBeInTheDocument();
+  });
+
+  it('expands tool_use card when clicked', () => {
+    setupMock(makeState({
+      messages: [makeMessage({
+        role: 'tool_use',
+        content: '',
+        toolName: 'read_file',
+        toolInput: { path: 'src/index.ts' },
+      })],
+    }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    const toggle = screen.getByRole('button', { name: /expand/i });
+    fireEvent.click(toggle);
+    expect(screen.getByText(/"path"/)).toBeInTheDocument();
+  });
+
+  it('renders tool_result with first 200 chars visible', () => {
+    const longContent = 'x'.repeat(300);
+    setupMock(makeState({
+      messages: [makeMessage({ role: 'tool_result', content: longContent })],
+    }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByText(/^x{200}$/)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /show more/i })).toBeInTheDocument();
+  });
+
+  it('expands tool_result when Show more clicked', () => {
+    const longContent = 'y'.repeat(300);
+    setupMock(makeState({
+      messages: [makeMessage({ role: 'tool_result', content: longContent })],
+    }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    fireEvent.click(screen.getByRole('button', { name: /show more/i }));
+    expect(screen.getByText(new RegExp(`y{300}`))).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /show less/i })).toBeInTheDocument();
+  });
+
+  it('renders thinking block with content', () => {
+    setupMock(makeState({
+      messages: [makeMessage({ role: 'thinking', content: 'I need to check this' })],
+    }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByText('I need to check this')).toBeInTheDocument();
+  });
+
+  it('renders system message', () => {
+    setupMock(makeState({
+      messages: [makeMessage({ role: 'system', content: 'Session started' })],
+    }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByText('Session started')).toBeInTheDocument();
+  });
+
+  it('renders error card', () => {
+    setupMock(makeState({
+      messages: [makeMessage({ role: 'error', content: 'Something went wrong' })],
+    }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  // ── Streaming cursor ─────────────────────────────────────────────────
+
+  it('shows streaming cursor on last assistant message when status is streaming', () => {
+    const msgs = [makeMessage({ role: 'assistant', content: 'Typing...' })];
+    setupMock(makeState({ messages: msgs, status: 'streaming' }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByTestId('streaming-cursor')).toBeInTheDocument();
+  });
+
+  it('does not show streaming cursor when status is idle', () => {
+    const msgs = [makeMessage({ role: 'assistant', content: 'Done' })];
+    setupMock(makeState({ messages: msgs, status: 'idle' }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.queryByTestId('streaming-cursor')).not.toBeInTheDocument();
+  });
+
+  it('scrollIntoView called when last message content updates (streaming in-place)', () => {
+    const msg = makeMessage({ role: 'assistant', content: 'Hello' });
+    const { rerender } = render(
+      <AgentChatPanel sessionId="sess-1" />
+    );
+    // Initial render with one message
+    setupMock(makeState({ messages: [msg], status: 'streaming' }));
+    rerender(<AgentChatPanel sessionId="sess-1" />);
+
+    // Simulate in-place content update (same id, different content)
+    const updatedMsg = { ...msg, content: 'Hello world' };
+    setupMock(makeState({ messages: [updatedMsg], status: 'streaming' }));
+    rerender(<AgentChatPanel sessionId="sess-1" />);
+
+    expect(window.HTMLElement.prototype.scrollIntoView).toHaveBeenCalled();
+  });
+
+  // ── Input bar ────────────────────────────────────────────────────────
+
+  it('input textarea is enabled when status is idle', () => {
+    setupMock(makeState({ status: 'idle' }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByRole('textbox', { name: /message/i })).not.toBeDisabled();
+  });
+
+  it('input textarea is disabled while thinking', () => {
+    setupMock(makeState({ status: 'thinking' }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByRole('textbox', { name: /message/i })).toBeDisabled();
+  });
+
+  it('input textarea is disabled while streaming', () => {
+    setupMock(makeState({ status: 'streaming' }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByRole('textbox', { name: /message/i })).toBeDisabled();
+  });
+
+  it('calls sendMessage and clears input on Enter', async () => {
+    setupMock(makeState({ status: 'idle' }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    const textarea = screen.getByRole('textbox', { name: /message/i });
+    await userEvent.type(textarea, 'Hello agent');
+    fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: false });
+    expect(mockSendMessage).toHaveBeenCalledWith('Hello agent');
+    expect(textarea).toHaveValue('');
+  });
+
+  it('does not send on Shift+Enter', async () => {
+    setupMock(makeState({ status: 'idle' }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    const textarea = screen.getByRole('textbox', { name: /message/i });
+    await userEvent.type(textarea, 'Hello');
+    fireEvent.keyDown(textarea, { key: 'Enter', shiftKey: true });
+    expect(mockSendMessage).not.toHaveBeenCalled();
+  });
+
+  it('calls sendMessage when Send button clicked', async () => {
+    setupMock(makeState({ status: 'idle' }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    const textarea = screen.getByRole('textbox', { name: /message/i });
+    await userEvent.type(textarea, 'Send this');
+    fireEvent.click(screen.getByRole('button', { name: /send message/i }));
+    expect(mockSendMessage).toHaveBeenCalledWith('Send this');
+  });
+
+  it('does not call sendMessage when input is empty', () => {
+    setupMock(makeState({ status: 'idle' }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    fireEvent.click(screen.getByRole('button', { name: /send message/i }));
+    expect(mockSendMessage).not.toHaveBeenCalled();
+  });
+
+  // ── Interrupt button ─────────────────────────────────────────────────
+
+  it('shows interrupt button during thinking', () => {
+    setupMock(makeState({ status: 'thinking' }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByRole('button', { name: /interrupt agent/i })).toBeInTheDocument();
+  });
+
+  it('shows interrupt button during streaming', () => {
+    setupMock(makeState({ status: 'streaming' }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByRole('button', { name: /interrupt agent/i })).toBeInTheDocument();
+  });
+
+  it('hides interrupt button when idle', () => {
+    setupMock(makeState({ status: 'idle' }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.queryByRole('button', { name: /interrupt agent/i })).not.toBeInTheDocument();
+  });
+
+  it('calls interrupt when interrupt button clicked', () => {
+    setupMock(makeState({ status: 'thinking' }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    fireEvent.click(screen.getByRole('button', { name: /interrupt agent/i }));
+    expect(mockInterrupt).toHaveBeenCalled();
+  });
+
+  // ── Header ───────────────────────────────────────────────────────────
+
+  it('shows cost in header', () => {
+    setupMock(makeState({ costUsd: 0.0031 }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    expect(screen.getByText('$0.0031')).toBeInTheDocument();
+  });
+
+  it('shows green status dot when connected and idle', () => {
+    setupMock(makeState({ status: 'idle', connected: true }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    const dot = screen.getByRole('status', { hidden: true });
+    expect(dot).toHaveClass('bg-green-500');
+  });
+
+  it('shows yellow status dot when connecting', () => {
+    setupMock(makeState({ status: 'connecting', connected: false }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    const dot = screen.getByRole('status', { hidden: true });
+    expect(dot).toHaveClass('bg-yellow-400');
+  });
+
+  it('shows red status dot when disconnected', () => {
+    setupMock(makeState({ status: 'disconnected', connected: false }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    const dot = screen.getByRole('status', { hidden: true });
+    expect(dot).toHaveClass('bg-red-500');
+  });
+
+  // ── Accessibility ────────────────────────────────────────────────────
+
+  it('message log has role=log and aria-live=polite', () => {
+    setupMock(makeState());
+    render(<AgentChatPanel sessionId="sess-1" />);
+    const log = screen.getByRole('log');
+    expect(log).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('tool_use toggle button has aria-expanded', () => {
+    setupMock(makeState({
+      messages: [makeMessage({ role: 'tool_use', content: '', toolName: 'read_file', toolInput: {} })],
+    }));
+    render(<AgentChatPanel sessionId="sess-1" />);
+    const toggle = screen.getByRole('button', { name: /expand/i });
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    fireEvent.click(toggle);
+    expect(toggle).toHaveAttribute('aria-expanded', 'true');
+  });
+});
diff --git a/web-ui/src/components/sessions/AgentChatPanel.tsx b/web-ui/src/components/sessions/AgentChatPanel.tsx
new file mode 100644
index 00000000..342fda88
--- /dev/null
+++ b/web-ui/src/components/sessions/AgentChatPanel.tsx
@@ -0,0 +1,334 @@
+'use client';
+
+import { useRef, useEffect, useState, useCallback } from 'react';
+import {
+  ArtificialIntelligence01Icon,
+  ArrowRight01Icon,
+  Alert01Icon,
+  Idea01Icon,
+  Cancel01Icon,
+  SentIcon,
+} from '@hugeicons/react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { useAgentChat } from '@/hooks/useAgentChat';
+import type { ChatMessage, AgentChatStatus } from '@/types';
+
+// ── Types ────────────────────────────────────────────────────────────────
+
+interface AgentChatPanelProps {
+  sessionId: string;
+  className?: string;
+}
+
+// ── Status dot ───────────────────────────────────────────────────────────
+
+function statusDotClass(status: AgentChatStatus): string {
+  if (status === 'connecting') return 'bg-yellow-400';
+  if (status === 'error' || status === 'disconnected') return 'bg-red-500';
+  return 'bg-green-500';
+}
+
+function statusLabel(status: AgentChatStatus): string {
+  if (status === 'connecting') return 'Status: connecting';
+  if (status === 'error') return 'Status: error';
+  if (status === 'disconnected') return 'Status: disconnected';
+  return 'Status: connected';
+}
+
+// ── Per-role renderers ────────────────────────────────────────────────────
+
+function UserBubble({ message }: { message: ChatMessage }) {
+  return (
+    <div className="flex flex-row-reverse">
+      <div className="max-w-[80%] rounded-lg bg-primary px-3 py-2 text-sm text-primary-foreground leading-relaxed">
+        {message.content}
+      </div>
+    </div>
+  );
+}
+
+function AssistantBubble({
+  message,
+  isLast,
+  status,
+}: {
+  message: ChatMessage;
+  isLast: boolean;
+  status: AgentChatStatus;
+}) {
+  return (
+    <div className="flex flex-row gap-3">
+      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10">
+        <ArtificialIntelligence01Icon className="h-4 w-4 text-primary" />
+      </div>
+      <div className="max-w-[80%] rounded-lg bg-muted px-3 py-2 text-sm text-foreground leading-relaxed">
+        {message.content}
+        {isLast && status === 'streaming' && (
+          <span
+            data-testid="streaming-cursor"
+            className="inline-block w-0.5 h-4 bg-current animate-pulse ml-0.5 align-middle"
+            aria-hidden="true"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ToolUseCard({ message }: { message: ChatMessage }) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="rounded-lg border bg-muted/30 text-sm">
+      <button
+        className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-muted/40 rounded-lg"
+        onClick={() => setExpanded((v) => !v)}
+        aria-expanded={expanded}
+        aria-label={`${expanded ? 'Collapse' : 'Expand'} tool call: ${message.toolName ?? 'tool'}`}
+      >
+        <ArrowRight01Icon
+          className={`h-3 w-3 shrink-0 transition-transform ${expanded ? 'rotate-90' : ''}`}
+        />
+        <span className="font-mono text-xs text-muted-foreground">{message.toolName ?? 'tool'}</span>
+      </button>
+      {expanded && message.toolInput !== undefined && (
+        <pre className="text-xs overflow-x-auto bg-muted/50 rounded-b-lg p-2 mt-0 border-t">
+          {JSON.stringify(message.toolInput, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+function ToolResultCard({ message }: { message: ChatMessage }) {
+  const [expanded, setExpanded] = useState(false);
+  const isTruncated = message.content.length > 200;
+  const displayContent = expanded ? message.content : message.content.slice(0, 200);
+
+  return (
+    <div className="rounded-lg border bg-muted/20 text-sm">
+      <pre className="text-xs overflow-x-auto px-3 py-2 whitespace-pre-wrap break-all">
+        {displayContent}
+      </pre>
+      {isTruncated && (
+        <div className="px-3 pb-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 px-2 text-xs"
+            onClick={() => setExpanded((v) => !v)}
+            aria-label={expanded ? 'Show less' : 'Show more'}
+          >
+            {expanded ? 'Show less' : 'Show more'}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ThinkingBlock({ message }: { message: ChatMessage }) {
+  return (
+    <div className="flex gap-2 border-l-2 border-muted-foreground/30 pl-3 italic text-sm text-muted-foreground">
+      <Idea01Icon className="h-4 w-4 shrink-0 mt-0.5" aria-hidden="true" />
+      <span>{message.content}</span>
+    </div>
+  );
+}
+
+function SystemLine({ message }: { message: ChatMessage }) {
+  return (
+    <p className="text-center text-xs text-muted-foreground py-1">{message.content}</p>
+  );
+}
+
+function ErrorCard({ message }: { message: ChatMessage }) {
+  return (
+    <div className="flex gap-2 rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+      <Alert01Icon className="h-4 w-4 shrink-0 mt-0.5" aria-hidden="true" />
+      <span>{message.content}</span>
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full gap-3 text-muted-foreground">
+      <ArtificialIntelligence01Icon className="h-10 w-10 opacity-40" aria-hidden="true" />
+      <p className="text-sm">Start a conversation with your agent</p>
+    </div>
+  );
+}
+
+function MessageRow({
+  message,
+  isLast,
+  status,
+}: {
+  message: ChatMessage;
+  isLast: boolean;
+  status: AgentChatStatus;
+}) {
+  switch (message.role) {
+    case 'user':
+      return <UserBubble message={message} />;
+    case 'assistant':
+      return <AssistantBubble message={message} isLast={isLast} status={status} />;
+    case 'tool_use':
+      return <ToolUseCard message={message} />;
+    case 'tool_result':
+      return <ToolResultCard message={message} />;
+    case 'thinking':
+      return <ThinkingBlock message={message} />;
+    case 'system':
+      return <SystemLine message={message} />;
+    case 'error':
+      return <ErrorCard message={message} />;
+    default:
+      return null;
+  }
+}
+
+// ── Main component ────────────────────────────────────────────────────────
+
+export function AgentChatPanel({ sessionId, className }: AgentChatPanelProps) {
+  const { state, sendMessage, interrupt } = useAgentChat(sessionId);
+  const { messages, status, costUsd } = state;
+
+  const [value, setValue] = useState('');
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const isBusy = status === 'thinking' || status === 'streaming';
+
+  // Track last message so streaming content updates (same array length) also trigger scroll
+  const lastMessage = messages[messages.length - 1];
+
+  // Auto-scroll on new messages and on in-place streaming updates to the last message
+  useEffect(() => {
+    if (autoScroll && bottomRef.current) {
+      bottomRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [autoScroll, lastMessage?.id, lastMessage?.content]);
+
+  const handleScroll = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    setAutoScroll(scrollHeight - scrollTop - clientHeight < 40);
+  }, []);
+
+  const handleSend = useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed || isBusy) return;
+    sendMessage(trimmed);
+    setValue('');
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+    }
+  }, [value, isBusy, sendMessage]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+
+  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    const el = e.target;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  };
+
+  return (
+    <div className={`flex h-full flex-col rounded-lg border bg-card ${className ?? ''}`}>
+      {/* Header */}
+      <div className="flex items-center justify-between border-b px-4 py-3">
+        <div className="flex items-center gap-2">
+          <span
+            role="status"
+            aria-label={statusLabel(status)}
+            className={`h-2.5 w-2.5 rounded-full ${statusDotClass(status)}`}
+          />
+          <Badge variant="secondary" className="text-xs">
+            claude-sonnet-4-6
+          </Badge>
+        </div>
+        <span className="font-mono text-xs text-muted-foreground">
+          ${costUsd.toFixed(4)}
+        </span>
+      </div>
+
+      {/* Message list */}
+      <div
+        ref={containerRef}
+        onScroll={handleScroll}
+        role="log"
+        aria-live="polite"
+        aria-label="Agent chat messages"
+        className="flex-1 overflow-y-auto px-4 py-4 space-y-3"
+      >
+        {messages.length === 0 ? (
+          <EmptyState />
+        ) : (
+          messages.map((msg, i) => (
+            <MessageRow
+              key={msg.id}
+              message={msg}
+              isLast={i === messages.length - 1}
+              status={status}
+            />
+          ))
+        )}
+        <div ref={bottomRef} />
+      </div>
+
+      {/* Input bar */}
+      <div className="border-t bg-background px-4 py-3">
+        <div className="flex items-end gap-2">
+          {isBusy && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={interrupt}
+              aria-label="Interrupt agent"
+            >
+              <Cancel01Icon className="h-4 w-4 mr-1" />
+              Interrupt
+            </Button>
+          )}
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={handleInput}
+            onKeyDown={handleKeyDown}
+            disabled={isBusy}
+            placeholder="Message your agent... (Enter to send)"
+            rows={1}
+            aria-label="Message input"
+            style={{ maxHeight: '9rem' }}
+            className="flex-1 resize-none rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+          />
+          <Button
+            size="icon"
+            onClick={handleSend}
+            disabled={isBusy || !value.trim()}
+            aria-label="Send message"
+            className="shrink-0"
+          >
+            <SentIcon className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web-ui/src/components/sessions/index.ts b/web-ui/src/components/sessions/index.ts
new file mode 100644
index 00000000..9504f4dd
--- /dev/null
+++ b/web-ui/src/components/sessions/index.ts
@@ -0,0 +1 @@
+export { AgentChatPanel } from './AgentChatPanel';