diff --git a/v2/src/App.svelte b/v2/src/App.svelte
index d412de3..7e0c724 100644
--- a/v2/src/App.svelte
+++ b/v2/src/App.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import SessionList from './lib/components/Sidebar/SessionList.svelte';
   import TilingGrid from './lib/components/Layout/TilingGrid.svelte';
   import { addPane, focusPaneByIndex, getPanes } from './lib/stores/layout';
+  import { startAgentDispatcher, stopAgentDispatcher } from './lib/agent-dispatcher';
 
   function newTerminal() {
     const id = crypto.randomUUID();
@@ -14,7 +15,19 @@
     });
   }
 
+  function newAgent() {
+    const id = crypto.randomUUID();
+    const num = getPanes().filter(p => p.type === 'agent').length + 1;
+    addPane({
+      id,
+      type: 'agent',
+      title: `Agent ${num}`,
+    });
+  }
+
   onMount(() => {
+    startAgentDispatcher();
+
     function handleKeydown(e: KeyboardEvent) {
       // Ctrl+N — new terminal
       if (e.ctrlKey && !e.shiftKey && e.key === 'n') {
@@ -23,6 +36,13 @@
         return;
       }
 
+      // Ctrl+Shift+N — new agent
+      if (e.ctrlKey && e.shiftKey && e.key === 'N') {
+        e.preventDefault();
+        newAgent();
+        return;
+      }
+
       // Ctrl+1-4 — focus pane by index
       if (e.ctrlKey && !e.shiftKey && e.key >= '1' && e.key <= '4') {
         e.preventDefault();
@@ -32,7 +52,10 @@
     }
 
     window.addEventListener('keydown', handleKeydown);
-    return () => window.removeEventListener('keydown', handleKeydown);
+    return () => {
+      window.removeEventListener('keydown', handleKeydown);
+      stopAgentDispatcher();
+    };
   });
 </script>
 
diff --git a/v2/src/lib/adapters/agent-bridge.ts b/v2/src/lib/adapters/agent-bridge.ts
new file mode 100644
index 0000000..4eb261b
--- /dev/null
+++ b/v2/src/lib/adapters/agent-bridge.ts
@@ -0,0 +1,49 @@
+// Agent Bridge — Tauri IPC adapter for sidecar communication
+// Mirrors pty-bridge.ts pattern: invoke for commands, listen for events
+
+import { invoke } from '@tauri-apps/api/core';
+import { listen, type UnlistenFn } from '@tauri-apps/api/event';
+
+export interface AgentQueryOptions {
+  session_id: string;
+  prompt: string;
+  cwd?: string;
+  max_turns?: number;
+  max_budget_usd?: number;
+  resume_session_id?: string;
+}
+
+export async function queryAgent(options: AgentQueryOptions): Promise<void> {
+  return invoke('agent_query', { options });
+}
+
+export async function stopAgent(sessionId: string): Promise<void> {
+  return invoke('agent_stop', { sessionId });
+}
+
+export async function isAgentReady(): Promise<boolean> {
+  return invoke<boolean>('agent_ready');
+}
+
+export interface SidecarMessage {
+  type: string;
+  sessionId?: string;
+  event?: Record<string, unknown>;
+  message?: string;
+  exitCode?: number | null;
+  signal?: string | null;
+}
+
+export async function onSidecarMessage(
+  callback: (msg: SidecarMessage) => void,
+): Promise<UnlistenFn> {
+  return listen<SidecarMessage>('sidecar-message', (event) => {
+    callback(event.payload as SidecarMessage);
+  });
+}
+
+export async function onSidecarExited(callback: () => void): Promise<UnlistenFn> {
+  return listen('sidecar-exited', () => {
+    callback();
+  });
+}
diff --git a/v2/src/lib/adapters/sdk-messages.ts b/v2/src/lib/adapters/sdk-messages.ts
index fc85e13..e27509e 100644
--- a/v2/src/lib/adapters/sdk-messages.ts
+++ b/v2/src/lib/adapters/sdk-messages.ts
@@ -1,25 +1,234 @@
 // SDK Message Adapter — insulates UI from Claude Agent SDK wire format changes
 // This is the ONLY place that knows SDK internals.
-// Phase 3: full implementation
+
+export type AgentMessageType =
+  | 'init'
+  | 'text'
+  | 'thinking'
+  | 'tool_call'
+  | 'tool_result'
+  | 'status'
+  | 'cost'
+  | 'error'
+  | 'unknown';
 
 export interface AgentMessage {
   id: string;
-  type: 'text' | 'tool_call' | 'tool_result' | 'subagent_spawn' | 'subagent_stop' | 'status' | 'cost' | 'unknown';
+  type: AgentMessageType;
   parentId?: string;
   content: unknown;
   timestamp: number;
 }
 
+export interface InitContent {
+  sessionId: string;
+  model: string;
+  cwd: string;
+  tools: string[];
+}
+
+export interface TextContent {
+  text: string;
+}
+
+export interface ThinkingContent {
+  text: string;
+}
+
+export interface ToolCallContent {
+  toolUseId: string;
+  name: string;
+  input: unknown;
+}
+
+export interface ToolResultContent {
+  toolUseId: string;
+  output: unknown;
+}
+
+export interface StatusContent {
+  subtype: string;
+  message?: string;
+}
+
+export interface CostContent {
+  totalCostUsd: number;
+  durationMs: number;
+  inputTokens: number;
+  outputTokens: number;
+  numTurns: number;
+  isError: boolean;
+  result?: string;
+  errors?: string[];
+}
+
+export interface ErrorContent {
+  message: string;
+}
+
 /**
- * Adapt a raw SDK message to our internal format.
+ * Adapt a raw SDK stream-json message to our internal format.
  * When SDK changes wire format, only this function needs updating.
  */
-export function adaptSDKMessage(raw: Record<string, unknown>): AgentMessage {
-  // Phase 3: implement based on actual SDK message types
-  return {
-    id: (raw.id as string) ?? crypto.randomUUID(),
-    type: 'unknown',
-    content: raw,
-    timestamp: Date.now(),
-  };
+export function adaptSDKMessage(raw: Record<string, unknown>): AgentMessage[] {
+  const uuid = (raw.uuid as string) ?? crypto.randomUUID();
+  const timestamp = Date.now();
+  const parentId = raw.parent_tool_use_id as string | undefined;
+
+  switch (raw.type) {
+    case 'system':
+      return adaptSystemMessage(raw, uuid, timestamp);
+    case 'assistant':
+      return adaptAssistantMessage(raw, uuid, timestamp, parentId);
+    case 'user':
+      return adaptUserMessage(raw, uuid, timestamp, parentId);
+    case 'result':
+      return adaptResultMessage(raw, uuid, timestamp);
+    default:
+      return [{
+        id: uuid,
+        type: 'unknown',
+        content: raw,
+        timestamp,
+      }];
+  }
+}
+
+function adaptSystemMessage(
+  raw: Record<string, unknown>,
+  uuid: string,
+  timestamp: number,
+): AgentMessage[] {
+  const subtype = raw.subtype as string;
+
+  if (subtype === 'init') {
+    return [{
+      id: uuid,
+      type: 'init',
+      content: {
+        sessionId: raw.session_id as string,
+        model: raw.model as string,
+        cwd: raw.cwd as string,
+        tools: (raw.tools as string[]) ?? [],
+      } satisfies InitContent,
+      timestamp,
+    }];
+  }
+
+  return [{
+    id: uuid,
+    type: 'status',
+    content: {
+      subtype,
+      message: raw.status as string | undefined,
+    } satisfies StatusContent,
+    timestamp,
+  }];
+}
+
+function adaptAssistantMessage(
+  raw: Record<string, unknown>,
+  uuid: string,
+  timestamp: number,
+  parentId?: string,
+): AgentMessage[] {
+  const messages: AgentMessage[] = [];
+  const msg = raw.message as Record<string, unknown> | undefined;
+  if (!msg) return messages;
+
+  const content = msg.content as Array<Record<string, unknown>> | undefined;
+  if (!Array.isArray(content)) return messages;
+
+  for (const block of content) {
+    switch (block.type) {
+      case 'text':
+        messages.push({
+          id: `${uuid}-text-${messages.length}`,
+          type: 'text',
+          parentId,
+          content: { text: block.text as string } satisfies TextContent,
+          timestamp,
+        });
+        break;
+      case 'thinking':
+        messages.push({
+          id: `${uuid}-think-${messages.length}`,
+          type: 'thinking',
+          parentId,
+          content: { text: (block.thinking ?? block.text) as string } satisfies ThinkingContent,
+          timestamp,
+        });
+        break;
+      case 'tool_use':
+        messages.push({
+          id: `${uuid}-tool-${messages.length}`,
+          type: 'tool_call',
+          parentId,
+          content: {
+            toolUseId: block.id as string,
+            name: block.name as string,
+            input: block.input,
+          } satisfies ToolCallContent,
+          timestamp,
+        });
+        break;
+    }
+  }
+
+  return messages;
+}
+
+function adaptUserMessage(
+  raw: Record<string, unknown>,
+  uuid: string,
+  timestamp: number,
+  parentId?: string,
+): AgentMessage[] {
+  const messages: AgentMessage[] = [];
+  const msg = raw.message as Record<string, unknown> | undefined;
+  if (!msg) return messages;
+
+  const content = msg.content as Array<Record<string, unknown>> | undefined;
+  if (!Array.isArray(content)) return messages;
+
+  for (const block of content) {
+    if (block.type === 'tool_result') {
+      messages.push({
+        id: `${uuid}-result-${messages.length}`,
+        type: 'tool_result',
+        parentId,
+        content: {
+          toolUseId: block.tool_use_id as string,
+          output: block.content ?? raw.tool_use_result,
+        } satisfies ToolResultContent,
+        timestamp,
+      });
+    }
+  }
+
+  return messages;
+}
+
+function adaptResultMessage(
+  raw: Record<string, unknown>,
+  uuid: string,
+  timestamp: number,
+): AgentMessage[] {
+  const usage = raw.usage as Record<string, number> | undefined;
+
+  return [{
+    id: uuid,
+    type: 'cost',
+    content: {
+      totalCostUsd: (raw.total_cost_usd as number) ?? 0,
+      durationMs: (raw.duration_ms as number) ?? 0,
+      inputTokens: usage?.input_tokens ?? 0,
+      outputTokens: usage?.output_tokens ?? 0,
+      numTurns: (raw.num_turns as number) ?? 0,
+      isError: (raw.is_error as boolean) ?? false,
+      result: raw.result as string | undefined,
+      errors: raw.errors as string[] | undefined,
+    } satisfies CostContent,
+    timestamp,
+  }];
 }
diff --git a/v2/src/lib/agent-dispatcher.ts b/v2/src/lib/agent-dispatcher.ts
new file mode 100644
index 0000000..e694cb7
--- /dev/null
+++ b/v2/src/lib/agent-dispatcher.ts
@@ -0,0 +1,90 @@
+// Agent Dispatcher — connects sidecar bridge events to agent store
+// Single listener that routes sidecar messages to the correct agent session
+
+import { onSidecarMessage, type SidecarMessage } from './adapters/agent-bridge';
+import { adaptSDKMessage } from './adapters/sdk-messages';
+import type { InitContent, CostContent } from './adapters/sdk-messages';
+import {
+  updateAgentStatus,
+  setAgentSdkSessionId,
+  setAgentModel,
+  appendAgentMessages,
+  updateAgentCost,
+} from './stores/agents';
+
+let unlistenFn: (() => void) | null = null;
+
+export async function startAgentDispatcher(): Promise<void> {
+  if (unlistenFn) return;
+
+  unlistenFn = await onSidecarMessage((msg: SidecarMessage) => {
+    const sessionId = msg.sessionId;
+    if (!sessionId) return;
+
+    switch (msg.type) {
+      case 'agent_started':
+        updateAgentStatus(sessionId, 'running');
+        break;
+
+      case 'agent_event':
+        handleAgentEvent(sessionId, msg.event!);
+        break;
+
+      case 'agent_stopped':
+        updateAgentStatus(sessionId, 'done');
+        break;
+
+      case 'agent_error':
+        updateAgentStatus(sessionId, 'error', msg.message);
+        break;
+
+      case 'agent_log':
+        // Debug logging — could route to a log panel later
+        break;
+    }
+  });
+}
+
+function handleAgentEvent(sessionId: string, event: Record<string, unknown>): void {
+  const messages = adaptSDKMessage(event);
+
+  for (const msg of messages) {
+    switch (msg.type) {
+      case 'init': {
+        const init = msg.content as InitContent;
+        setAgentSdkSessionId(sessionId, init.sessionId);
+        setAgentModel(sessionId, init.model);
+        break;
+      }
+
+      case 'cost': {
+        const cost = msg.content as CostContent;
+        updateAgentCost(sessionId, {
+          costUsd: cost.totalCostUsd,
+          inputTokens: cost.inputTokens,
+          outputTokens: cost.outputTokens,
+          numTurns: cost.numTurns,
+          durationMs: cost.durationMs,
+        });
+        if (cost.isError) {
+          updateAgentStatus(sessionId, 'error', cost.errors?.join('; '));
+        } else {
+          updateAgentStatus(sessionId, 'done');
+        }
+        break;
+      }
+    }
+  }
+
+  // Append all messages to the session history
+  if (messages.length > 0) {
+    appendAgentMessages(sessionId, messages);
+  }
+}
+
+export function stopAgentDispatcher(): void {
+  if (unlistenFn) {
+    unlistenFn();
+    unlistenFn = null;
+  }
+}
diff --git a/v2/src/lib/components/Agent/AgentPane.svelte b/v2/src/lib/components/Agent/AgentPane.svelte
new file mode 100644
index 0000000..1a6383c
--- /dev/null
+++ b/v2/src/lib/components/Agent/AgentPane.svelte
@@ -0,0 +1,419 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { queryAgent, stopAgent, isAgentReady } from '../../adapters/agent-bridge';
+  import {
+    getAgentSession,
+    createAgentSession,
+    removeAgentSession,
+    type AgentSession,
+  } from '../../stores/agents';
+  import type {
+    AgentMessage,
+    TextContent,
+    ThinkingContent,
+    ToolCallContent,
+    ToolResultContent,
+    CostContent,
+    ErrorContent,
+  } from '../../adapters/sdk-messages';
+
+  interface Props {
+    sessionId: string;
+    prompt?: string;
+    cwd?: string;
+    onExit?: () => void;
+  }
+
+  let { sessionId, prompt: initialPrompt = '', cwd, onExit }: Props = $props();
+
+  let session = $derived(getAgentSession(sessionId));
+  let inputPrompt = $state(initialPrompt);
+  let scrollContainer: HTMLDivElement | undefined = $state();
+  let autoScroll = $state(true);
+
+  onMount(async () => {
+    if (initialPrompt) {
+      await startQuery(initialPrompt);
+    }
+  });
+
+  onDestroy(() => {
+    if (session?.status === 'running' || session?.status === 'starting') {
+      stopAgent(sessionId).catch(() => {});
+    }
+  });
+
+  async function startQuery(text: string) {
+    if (!text.trim()) return;
+
+    const ready = await isAgentReady();
+    if (!ready) {
+      createAgentSession(sessionId, text);
+      const { updateAgentStatus } = await import('../../stores/agents');
+      updateAgentStatus(sessionId, 'error', 'Sidecar not ready — agent features unavailable');
+      return;
+    }
+
+    createAgentSession(sessionId, text);
+    await queryAgent({
+      session_id: sessionId,
+      prompt: text,
+      cwd,
+      max_turns: 50,
+    });
+    inputPrompt = '';
+  }
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    startQuery(inputPrompt);
+  }
+
+  function handleStop() {
+    stopAgent(sessionId).catch(() => {});
+  }
+
+  function scrollToBottom() {
+    if (autoScroll && scrollContainer) {
+      scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    }
+  }
+
+  // Auto-scroll when new messages arrive
+  $effect(() => {
+    if (session?.messages.length) {
+      scrollToBottom();
+    }
+  });
+
+  function formatToolInput(input: unknown): string {
+    if (typeof input === 'string') return input;
+    try {
+      return JSON.stringify(input, null, 2);
+    } catch {
+      return String(input);
+    }
+  }
+
+  function truncate(text: string, maxLen: number): string {
+    if (text.length <= maxLen) return text;
+    return text.slice(0, maxLen) + '...';
+  }
+</script>
+
+<div class="agent-pane">
+  {#if !session || session.messages.length === 0}
+    <div class="prompt-area">
+      <form onsubmit={handleSubmit} class="prompt-form">
+        <textarea
+          bind:value={inputPrompt}
+          placeholder="Ask Claude something..."
+          class="prompt-input"
+          rows="3"
+          onkeydown={(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              startQuery(inputPrompt);
+            }
+          }}
+        ></textarea>
+        <button type="submit" class="send-btn" disabled={!inputPrompt.trim()}>Send</button>
+      </form>
+    </div>
+  {:else}
+    <div class="messages" bind:this={scrollContainer}>
+      {#each session.messages as msg (msg.id)}
+        <div class="message msg-{msg.type}">
+          {#if msg.type === 'init'}
+            <div class="msg-init">
+              <span class="label">Session started</span>
+              <span class="model">{(msg.content as import('../../adapters/sdk-messages').InitContent).model}</span>
+            </div>
+          {:else if msg.type === 'text'}
+            <div class="msg-text">{(msg.content as TextContent).text}</div>
+          {:else if msg.type === 'thinking'}
+            <details class="msg-thinking">
+              <summary>Thinking...</summary>
+              <pre>{(msg.content as ThinkingContent).text}</pre>
+            </details>
+          {:else if msg.type === 'tool_call'}
+            {@const tc = msg.content as ToolCallContent}
+            <details class="msg-tool-call">
+              <summary>
+                <span class="tool-name">{tc.name}</span>
+                <span class="tool-id">{truncate(tc.toolUseId, 12)}</span>
+              </summary>
+              <pre class="tool-input">{formatToolInput(tc.input)}</pre>
+            </details>
+          {:else if msg.type === 'tool_result'}
+            {@const tr = msg.content as ToolResultContent}
+            <details class="msg-tool-result">
+              <summary>Tool result</summary>
+              <pre class="tool-output">{formatToolInput(tr.output)}</pre>
+            </details>
+          {:else if msg.type === 'cost'}
+            {@const cost = msg.content as CostContent}
+            <div class="msg-cost">
+              <span>${cost.totalCostUsd.toFixed(4)}</span>
+              <span>{cost.inputTokens + cost.outputTokens} tokens</span>
+              <span>{cost.numTurns} turns</span>
+              <span>{(cost.durationMs / 1000).toFixed(1)}s</span>
+            </div>
+          {:else if msg.type === 'error'}
+            <div class="msg-error">{(msg.content as ErrorContent).message}</div>
+          {:else if msg.type === 'status'}
+            <div class="msg-status">{JSON.stringify(msg.content)}</div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+
+    <div class="footer">
+      {#if session.status === 'running' || session.status === 'starting'}
+        <div class="running-indicator">
+          <span class="pulse"></span>
+          <span>Running...</span>
+          <button class="stop-btn" onclick={handleStop}>Stop</button>
+        </div>
+      {:else if session.status === 'done'}
+        <div class="done-bar">
+          <span class="cost">${session.costUsd.toFixed(4)}</span>
+          <span class="tokens">{session.inputTokens + session.outputTokens} tokens</span>
+          <span class="duration">{(session.durationMs / 1000).toFixed(1)}s</span>
+        </div>
+      {:else if session.status === 'error'}
+        <div class="error-bar">
+          <span>Error: {session.error ?? 'Unknown'}</span>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .agent-pane {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 13px;
+  }
+
+  .prompt-area {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 24px;
+  }
+
+  .prompt-form {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+    max-width: 600px;
+  }
+
+  .prompt-input {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--border-radius);
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 13px;
+    padding: 10px;
+    resize: vertical;
+  }
+
+  .prompt-input:focus {
+    outline: none;
+    border-color: var(--accent);
+  }
+
+  .send-btn {
+    align-self: flex-end;
+    background: var(--accent);
+    color: var(--ctp-crust);
+    border: none;
+    border-radius: var(--border-radius);
+    padding: 6px 16px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  .send-btn:hover { opacity: 0.9; }
+  .send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+  .messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .message { padding: 4px 0; }
+
+  .msg-init {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--text-muted);
+    font-size: 11px;
+  }
+
+  .msg-init .model {
+    background: var(--bg-surface);
+    padding: 1px 6px;
+    border-radius: 3px;
+    font-family: var(--font-mono);
+  }
+
+  .msg-text {
+    white-space: pre-wrap;
+    word-break: break-word;
+    line-height: 1.5;
+  }
+
+  .msg-thinking {
+    color: var(--ctp-overlay1);
+    font-size: 12px;
+  }
+
+  .msg-thinking summary {
+    cursor: pointer;
+    color: var(--ctp-mauve);
+  }
+
+  .msg-thinking pre {
+    margin: 4px 0 0 12px;
+    white-space: pre-wrap;
+    font-size: 11px;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .msg-tool-call, .msg-tool-result {
+    border-left: 2px solid var(--ctp-blue);
+    padding-left: 8px;
+    font-size: 12px;
+  }
+
+  .msg-tool-call summary, .msg-tool-result summary {
+    cursor: pointer;
+    color: var(--ctp-blue);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .tool-name {
+    font-weight: 600;
+    color: var(--ctp-green);
+  }
+
+  .tool-id {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--text-muted);
+  }
+
+  .tool-input, .tool-output {
+    margin: 4px 0 0 0;
+    white-space: pre-wrap;
+    font-size: 11px;
+    max-height: 300px;
+    overflow-y: auto;
+    background: var(--bg-surface);
+    padding: 6px 8px;
+    border-radius: 3px;
+    color: var(--text-secondary);
+  }
+
+  .msg-tool-result {
+    border-left-color: var(--ctp-teal);
+  }
+
+  .msg-tool-result summary {
+    color: var(--ctp-teal);
+  }
+
+  .msg-cost {
+    display: flex;
+    gap: 12px;
+    padding: 4px 8px;
+    background: var(--bg-surface);
+    border-radius: 3px;
+    font-size: 11px;
+    color: var(--ctp-yellow);
+    font-family: var(--font-mono);
+  }
+
+  .msg-error {
+    color: var(--ctp-red);
+    background: color-mix(in srgb, var(--ctp-red) 10%, transparent);
+    padding: 6px 8px;
+    border-radius: 3px;
+    font-size: 12px;
+  }
+
+  .msg-status {
+    color: var(--text-muted);
+    font-size: 11px;
+    font-style: italic;
+  }
+
+  .footer {
+    border-top: 1px solid var(--border);
+    padding: 6px 12px;
+    flex-shrink: 0;
+  }
+
+  .running-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--ctp-blue);
+  }
+
+  .pulse {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--ctp-blue);
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+  }
+
+  .stop-btn {
+    margin-left: auto;
+    background: var(--ctp-red);
+    color: var(--ctp-crust);
+    border: none;
+    border-radius: 3px;
+    padding: 2px 10px;
+    font-size: 11px;
+    cursor: pointer;
+  }
+
+  .stop-btn:hover { opacity: 0.9; }
+
+  .done-bar, .error-bar {
+    display: flex;
+    gap: 12px;
+    font-size: 11px;
+    font-family: var(--font-mono);
+  }
+
+  .done-bar { color: var(--ctp-green); }
+  .error-bar { color: var(--ctp-red); }
+</style>
diff --git a/v2/src/lib/components/Layout/TilingGrid.svelte b/v2/src/lib/components/Layout/TilingGrid.svelte
index dbe8ced..a5c9c8d 100644
--- a/v2/src/lib/components/Layout/TilingGrid.svelte
+++ b/v2/src/lib/components/Layout/TilingGrid.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import PaneContainer from './PaneContainer.svelte';
   import TerminalPane from '../Terminal/TerminalPane.svelte';
+  import AgentPane from '../Agent/AgentPane.svelte';
   import {
     getPanes,
     getGridTemplate,
@@ -47,9 +48,15 @@
               args={pane.args}
               onExit={() => removePane(pane.id)}
             />
+          {:else if pane.type === 'agent'}
+            <AgentPane
+              sessionId={pane.id}
+              cwd={pane.cwd}
+              onExit={() => removePane(pane.id)}
+            />
           {:else}
             <div class="placeholder">
-              <p>{pane.type} pane — coming in Phase 3/4</p>
+              <p>{pane.type} pane — coming in Phase 4</p>
             </div>
           {/if}
         </PaneContainer>
diff --git a/v2/src/lib/components/Sidebar/SessionList.svelte b/v2/src/lib/components/Sidebar/SessionList.svelte
index efabee7..db2dc0b 100644
--- a/v2/src/lib/components/Sidebar/SessionList.svelte
+++ b/v2/src/lib/components/Sidebar/SessionList.svelte
@@ -16,19 +16,32 @@
 
   function newTerminal() {
     const id = crypto.randomUUID();
-    const num = panes.length + 1;
+    const num = panes.filter(p => p.type === 'terminal').length + 1;
     addPane({
       id,
       type: 'terminal',
       title: `Terminal ${num}`,
     });
   }
+
+  function newAgent() {
+    const id = crypto.randomUUID();
+    const num = panes.filter(p => p.type === 'agent').length + 1;
+    addPane({
+      id,
+      type: 'agent',
+      title: `Agent ${num}`,
+    });
+  }
 </script>
 
 <div class="session-list">
   <div class="header">
     <h2>Sessions</h2>
-    <button class="new-btn" onclick={newTerminal} title="New terminal (Ctrl+N)">+</button>
+    <div class="header-buttons">
+      <button class="new-btn" onclick={newAgent} title="New agent (Ctrl+Shift+N)">A</button>
+      <button class="new-btn" onclick={newTerminal} title="New terminal (Ctrl+N)">+</button>
+    </div>
   </div>
 
   <div class="layout-presets">
@@ -45,14 +58,14 @@
   {#if panes.length === 0}
     <div class="empty-state">
       <p>No sessions yet.</p>
-      <p class="hint">Click + or press Ctrl+N</p>
+      <p class="hint">Ctrl+N terminal / Ctrl+Shift+N agent</p>
     </div>
   {:else}
     <ul class="pane-list">
       {#each panes as pane (pane.id)}
         <li class="pane-item" class:focused={pane.focused}>
           <button class="pane-btn" onclick={() => focusPane(pane.id)}>
-            <span class="pane-icon">{pane.type === 'terminal' ? '>' : '#'}</span>
+            <span class="pane-icon">{pane.type === 'terminal' ? '>' : pane.type === 'agent' ? '*' : '#'}</span>
             <span class="pane-name">{pane.title}</span>
           </button>
           <button class="remove-btn" onclick={() => removePane(pane.id)}>&times;</button>
@@ -82,6 +95,11 @@
     color: var(--text-primary);
   }
 
+  .header-buttons {
+    display: flex;
+    gap: 4px;
+  }
+
   .new-btn {
     background: var(--bg-surface);
     border: 1px solid var(--border);
@@ -90,7 +108,8 @@
     height: 24px;
     border-radius: var(--border-radius);
     cursor: pointer;
-    font-size: 16px;
+    font-size: 12px;
+    font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/v2/src/lib/stores/agents.ts b/v2/src/lib/stores/agents.ts
index 26dba97..a9003ae 100644
--- a/v2/src/lib/stores/agents.ts
+++ b/v2/src/lib/stores/agents.ts
@@ -1,34 +1,91 @@
 // Agent tracking state — Svelte 5 runes
-// Phase 3: SDK agent lifecycle, subagent tree
+// Manages agent session lifecycle and message history
 
-export type AgentStatus = 'idle' | 'running' | 'thinking' | 'waiting' | 'done' | 'error';
+import type { AgentMessage } from '../adapters/sdk-messages';
 
-export interface AgentState {
+export type AgentStatus = 'idle' | 'starting' | 'running' | 'done' | 'error';
+
+export interface AgentSession {
   id: string;
-  sessionId: string;
-  parentId?: string;
+  sdkSessionId?: string;
   status: AgentStatus;
   model?: string;
-  costUsd?: number;
-  tokensIn?: number;
-  tokensOut?: number;
+  prompt: string;
+  messages: AgentMessage[];
+  costUsd: number;
+  inputTokens: number;
+  outputTokens: number;
+  numTurns: number;
+  durationMs: number;
+  error?: string;
 }
 
-let agents = $state<AgentState[]>([]);
+let sessions = $state<AgentSession[]>([]);
 
-export function getAgents() {
-  return agents;
+export function getAgentSessions(): AgentSession[] {
+  return sessions;
 }
 
-export function getAgentTree(rootId: string): AgentState[] {
-  const result: AgentState[] = [];
-  const root = agents.find(a => a.id === rootId);
-  if (!root) return result;
-
-  result.push(root);
-  const children = agents.filter(a => a.parentId === rootId);
-  for (const child of children) {
-    result.push(...getAgentTree(child.id));
-  }
-  return result;
+export function getAgentSession(id: string): AgentSession | undefined {
+  return sessions.find(s => s.id === id);
+}
+
+export function createAgentSession(id: string, prompt: string): void {
+  sessions.push({
+    id,
+    status: 'starting',
+    prompt,
+    messages: [],
+    costUsd: 0,
+    inputTokens: 0,
+    outputTokens: 0,
+    numTurns: 0,
+    durationMs: 0,
+  });
+}
+
+export function updateAgentStatus(id: string, status: AgentStatus, error?: string): void {
+  const session = sessions.find(s => s.id === id);
+  if (!session) return;
+  session.status = status;
+  if (error) session.error = error;
+}
+
+export function setAgentSdkSessionId(id: string, sdkSessionId: string): void {
+  const session = sessions.find(s => s.id === id);
+  if (session) session.sdkSessionId = sdkSessionId;
+}
+
+export function setAgentModel(id: string, model: string): void {
+  const session = sessions.find(s => s.id === id);
+  if (session) session.model = model;
+}
+
+export function appendAgentMessage(id: string, message: AgentMessage): void {
+  const session = sessions.find(s => s.id === id);
+  if (!session) return;
+  session.messages.push(message);
+}
+
+export function appendAgentMessages(id: string, messages: AgentMessage[]): void {
+  const session = sessions.find(s => s.id === id);
+  if (!session) return;
+  session.messages.push(...messages);
+}
+
+export function updateAgentCost(
+  id: string,
+  cost: { costUsd: number; inputTokens: number; outputTokens: number; numTurns: number; durationMs: number },
+): void {
+  const session = sessions.find(s => s.id === id);
+  if (!session) return;
+  session.costUsd = cost.costUsd;
+  session.inputTokens = cost.inputTokens;
+  session.outputTokens = cost.outputTokens;
+  session.numTurns = cost.numTurns;
+  session.durationMs = cost.durationMs;
+}
+
+export function removeAgentSession(id: string): void {
+  sessions = sessions.filter(s => s.id !== id);
 }