feat(v2): add agent tree, status bar, notifications, settings dialog (Phase 5)

Agent tree visualization (SVG) with horizontal layout and bezier edges.
Global status bar with pane counts, active agents pulse, token/cost totals.
Toast notification system with auto-dismiss and agent dispatcher integration.
Settings dialog with SQLite persistence for shell, cwd, and max panes.
Keyboard shortcuts: Ctrl+W close pane, Ctrl+, open settings.

v2/src/lib/components/Agent/AgentPane.svelte

@@ -8,6 +8,7 @@
     type AgentSession,
   } from '../../stores/agents.svelte';
   import { isSidecarAlive, setSidecarAlive } from '../../agent-dispatcher';
+  import AgentTree from './AgentTree.svelte';
   import type {
     AgentMessage,
     TextContent,
@@ -32,6 +33,8 @@
   let scrollContainer: HTMLDivElement | undefined = $state();
   let autoScroll = $state(true);
   let restarting = $state(false);
+  let showTree = $state(false);
+  let hasToolCalls = $derived(session?.messages.some(m => m.type === 'tool_call') ?? false);
 
   onMount(async () => {
     if (initialPrompt) {
@@ -142,6 +145,16 @@
       </form>
     </div>
   {:else}
+    {#if hasToolCalls}
+      <div class="tree-toggle">
+        <button class="tree-btn" onclick={() => showTree = !showTree}>
+          {showTree ? '▼' : '▶'} Agent Tree
+        </button>
+      </div>
+      {#if showTree && session}
+        <AgentTree {session} />
+      {/if}
+    {/if}
     <div class="messages" bind:this={scrollContainer} onscroll={handleScroll}>
       {#each session.messages as msg (msg.id)}
         <div class="message msg-{msg.type}">
@@ -229,6 +242,24 @@
     font-size: 13px;
   }
 
+  .tree-toggle {
+    padding: 4px 12px;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+
+  .tree-btn {
+    background: none;
+    border: none;
+    color: var(--ctp-mauve);
+    font-size: 11px;
+    cursor: pointer;
+    font-family: var(--font-mono);
+    padding: 2px 4px;
+  }
+
+  .tree-btn:hover { color: var(--text-primary); }
+
   .prompt-area {
     display: flex;
     align-items: center;

v2/src/lib/components/Agent/AgentTree.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  import { buildAgentTree, type AgentTreeNode } from '../../utils/agent-tree';
+  import type { AgentSession } from '../../stores/agents.svelte';
+
+  interface Props {
+    session: AgentSession;
+    onNodeClick?: (nodeId: string) => void;
+  }
+
+  let { session, onNodeClick }: Props = $props();
+
+  let tree = $derived(buildAgentTree(
+    session.id,
+    session.messages,
+    session.status,
+    session.costUsd,
+    session.inputTokens + session.outputTokens,
+  ));
+
+  // Layout constants
+  const NODE_W = 100;
+  const NODE_H = 32;
+  const H_GAP = 24;
+  const V_GAP = 12;
+
+  interface LayoutNode {
+    node: AgentTreeNode;
+    x: number;
+    y: number;
+    children: LayoutNode[];
+  }
+
+  function layoutTree(node: AgentTreeNode, x: number, y: number): { layout: LayoutNode; height: number } {
+    if (node.children.length === 0) {
+      return {
+        layout: { node, x, y, children: [] },
+        height: NODE_H,
+      };
+    }
+
+    const childLayouts: LayoutNode[] = [];
+    let childY = y;
+    let totalHeight = 0;
+
+    for (const child of node.children) {
+      const result = layoutTree(child, x + NODE_W + H_GAP, childY);
+      childLayouts.push(result.layout);
+      childY += result.height + V_GAP;
+      totalHeight += result.height + V_GAP;
+    }
+    totalHeight -= V_GAP; // remove trailing gap
+
+    // Center parent vertically relative to children
+    const parentY = childLayouts.length > 0
+      ? (childLayouts[0].y + childLayouts[childLayouts.length - 1].y) / 2
+      : y;
+
+    return {
+      layout: { node, x, y: parentY, children: childLayouts },
+      height: Math.max(NODE_H, totalHeight),
+    };
+  }
+
+  let layoutResult = $derived(layoutTree(tree, 8, 8));
+  let svgHeight = $derived(Math.max(80, layoutResult.height + 24));
+  let svgWidth = $derived(computeWidth(layoutResult.layout));
+
+  function computeWidth(layout: LayoutNode): number {
+    let maxX = layout.x + NODE_W;
+    for (const child of layout.children) {
+      maxX = Math.max(maxX, computeWidth(child));
+    }
+    return maxX + 16;
+  }
+
+  function statusColor(status: string): string {
+    switch (status) {
+      case 'running': return 'var(--ctp-blue)';
+      case 'done': return 'var(--ctp-green)';
+      case 'error': return 'var(--ctp-red)';
+      default: return 'var(--ctp-overlay1)';
+    }
+  }
+
+  function truncateLabel(text: string, maxLen: number): string {
+    return text.length > maxLen ? text.slice(0, maxLen - 1) + '…' : text;
+  }
+</script>
+
+<div class="agent-tree">
+  <svg width={svgWidth} height={svgHeight}>
+    {#snippet renderNode(layout: LayoutNode)}
+      <!-- Edges to children -->
+      {#each layout.children as child}
+        <path
+          d="M {layout.x + NODE_W} {layout.y + NODE_H / 2}
+             C {layout.x + NODE_W + H_GAP / 2} {layout.y + NODE_H / 2},
+               {child.x - H_GAP / 2} {child.y + NODE_H / 2},
+               {child.x} {child.y + NODE_H / 2}"
+          fill="none"
+          stroke="var(--border)"
+          stroke-width="1.5"
+        />
+      {/each}
+
+      <!-- Node rectangle -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <g
+        class="tree-node"
+        onclick={() => onNodeClick?.(layout.node.id)}
+        style="cursor: {onNodeClick ? 'pointer' : 'default'}"
+      >
+        <rect
+          x={layout.x}
+          y={layout.y}
+          width={NODE_W}
+          height={NODE_H}
+          rx="4"
+          fill="var(--bg-surface)"
+          stroke={statusColor(layout.node.status)}
+          stroke-width="1.5"
+        />
+        <!-- Status dot -->
+        <circle
+          cx={layout.x + 10}
+          cy={layout.y + NODE_H / 2}
+          r="3"
+          fill={statusColor(layout.node.status)}
+        />
+        <!-- Label -->
+        <text
+          x={layout.x + 18}
+          y={layout.y + NODE_H / 2 + 1}
+          fill="var(--text-primary)"
+          font-size="10"
+          font-family="var(--font-mono)"
+          dominant-baseline="middle"
+        >{truncateLabel(layout.node.label, 10)}</text>
+      </g>
+
+      <!-- Recurse children -->
+      {#each layout.children as child}
+        {@render renderNode(child)}
+      {/each}
+    {/snippet}
+
+    {@render renderNode(layoutResult.layout)}
+  </svg>
+</div>
+
+<style>
+  .agent-tree {
+    overflow: auto;
+    padding: 4px;
+    background: var(--bg-primary);
+  }
+
+  .tree-node:hover rect {
+    fill: var(--bg-surface-hover, var(--ctp-surface1));
+  }
+</style>

v2/src/lib/components/Notifications/ToastContainer.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { getNotifications, dismissNotification } from '../../stores/notifications.svelte';
+
+  let toasts = $derived(getNotifications());
+</script>
+
+{#if toasts.length > 0}
+  <div class="toast-container">
+    {#each toasts as toast (toast.id)}
+      <div class="toast toast-{toast.type}" role="alert">
+        <span class="toast-icon">
+          {#if toast.type === 'success'}✓
+          {:else if toast.type === 'error'}✕
+          {:else if toast.type === 'warning'}!
+          {:else}i
+          {/if}
+        </span>
+        <span class="toast-message">{toast.message}</span>
+        <button class="toast-close" onclick={() => dismissNotification(toast.id)}>&times;</button>
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .toast-container {
+    position: fixed;
+    top: 12px;
+    right: 12px;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-width: 360px;
+  }
+
+  .toast {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: var(--border-radius);
+    font-size: 12px;
+    color: var(--text-primary);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    animation: slide-in 0.2s ease-out;
+  }
+
+  @keyframes slide-in {
+    from { opacity: 0; transform: translateX(20px); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+
+  .toast-icon {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+
+  .toast-success .toast-icon { background: var(--ctp-green); color: var(--ctp-crust); }
+  .toast-error .toast-icon { background: var(--ctp-red); color: var(--ctp-crust); }
+  .toast-warning .toast-icon { background: var(--ctp-yellow); color: var(--ctp-crust); }
+  .toast-info .toast-icon { background: var(--ctp-blue); color: var(--ctp-crust); }
+
+  .toast-success { border-color: color-mix(in srgb, var(--ctp-green) 30%, transparent); }
+  .toast-error { border-color: color-mix(in srgb, var(--ctp-red) 30%, transparent); }
+  .toast-warning { border-color: color-mix(in srgb, var(--ctp-yellow) 30%, transparent); }
+  .toast-info { border-color: color-mix(in srgb, var(--ctp-blue) 30%, transparent); }
+
+  .toast-message {
+    flex: 1;
+    line-height: 1.3;
+  }
+
+  .toast-close {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 0 2px;
+    flex-shrink: 0;
+  }
+
+  .toast-close:hover { color: var(--text-primary); }
+</style>

v2/src/lib/components/Settings/SettingsDialog.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getSetting, setSetting } from '../../adapters/settings-bridge';
+  import { notify } from '../../stores/notifications.svelte';
+
+  interface Props {
+    open: boolean;
+    onClose: () => void;
+  }
+
+  let { open, onClose }: Props = $props();
+
+  let defaultShell = $state('');
+  let defaultCwd = $state('');
+  let maxPanes = $state('4');
+
+  onMount(async () => {
+    try {
+      defaultShell = (await getSetting('default_shell')) ?? '';
+      defaultCwd = (await getSetting('default_cwd')) ?? '';
+      maxPanes = (await getSetting('max_panes')) ?? '4';
+    } catch {
+      // Use defaults
+    }
+  });
+
+  async function handleSave() {
+    try {
+      if (defaultShell) await setSetting('default_shell', defaultShell);
+      if (defaultCwd) await setSetting('default_cwd', defaultCwd);
+      await setSetting('max_panes', maxPanes);
+      notify('success', 'Settings saved');
+      onClose();
+    } catch (e) {
+      notify('error', `Failed to save settings: ${e}`);
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') onClose();
+  }
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="overlay" onkeydown={handleKeydown}>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div class="backdrop" onclick={onClose}></div>
+    <div class="dialog" role="dialog" aria-label="Settings">
+      <div class="dialog-header">
+        <h2>Settings</h2>
+        <button class="close-btn" onclick={onClose}>&times;</button>
+      </div>
+      <div class="dialog-body">
+        <label class="field">
+          <span class="field-label">Default Shell</span>
+          <input type="text" bind:value={defaultShell} placeholder="$SHELL (auto-detect)" />
+          <span class="field-hint">Leave empty to use system default</span>
+        </label>
+        <label class="field">
+          <span class="field-label">Default Working Directory</span>
+          <input type="text" bind:value={defaultCwd} placeholder="$HOME" />
+          <span class="field-hint">Leave empty for home directory</span>
+        </label>
+        <label class="field">
+          <span class="field-label">Max Panes</span>
+          <input type="number" bind:value={maxPanes} min="1" max="8" />
+          <span class="field-hint">Maximum simultaneous panes (1-8)</span>
+        </label>
+      </div>
+      <div class="dialog-footer">
+        <button class="btn-cancel" onclick={onClose}>Cancel</button>
+        <button class="btn-save" onclick={handleSave}>Save</button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .dialog {
+    position: relative;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    width: 400px;
+    max-height: 80vh;
+    overflow-y: auto;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+
+  .dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .dialog-header h2 {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .close-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 18px;
+    cursor: pointer;
+  }
+
+  .close-btn:hover { color: var(--text-primary); }
+
+  .dialog-body {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .field-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+  }
+
+  .field input {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--border-radius);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    padding: 6px 8px;
+  }
+
+  .field input:focus {
+    outline: none;
+    border-color: var(--accent);
+  }
+
+  .field-hint {
+    font-size: 10px;
+    color: var(--text-muted);
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 16px;
+    border-top: 1px solid var(--border);
+  }
+
+  .btn-cancel, .btn-save {
+    border: none;
+    border-radius: var(--border-radius);
+    padding: 6px 14px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  .btn-cancel {
+    background: var(--bg-surface);
+    color: var(--text-secondary);
+  }
+
+  .btn-cancel:hover { color: var(--text-primary); }
+
+  .btn-save {
+    background: var(--accent);
+    color: var(--ctp-crust);
+  }
+
+  .btn-save:hover { opacity: 0.9; }
+</style>

v2/src/lib/components/StatusBar/StatusBar.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import { getPanes } from '../../stores/layout.svelte';
+  import { getAgentSessions } from '../../stores/agents.svelte';
+
+  let panes = $derived(getPanes());
+  let agentSessions = $derived(getAgentSessions());
+
+  let activeAgents = $derived(agentSessions.filter(s => s.status === 'running' || s.status === 'starting').length);
+  let totalCost = $derived(agentSessions.reduce((sum, s) => sum + s.costUsd, 0));
+  let totalTokens = $derived(agentSessions.reduce((sum, s) => sum + s.inputTokens + s.outputTokens, 0));
+  let terminalCount = $derived(panes.filter(p => p.type === 'terminal').length);
+  let agentCount = $derived(panes.filter(p => p.type === 'agent').length);
+</script>
+
+<div class="status-bar">
+  <div class="left">
+    <span class="item" title="Terminal panes">{terminalCount} terminals</span>
+    <span class="sep"></span>
+    <span class="item" title="Agent panes">{agentCount} agents</span>
+    {#if activeAgents > 0}
+      <span class="sep"></span>
+      <span class="item active">
+        <span class="pulse"></span>
+        {activeAgents} running
+      </span>
+    {/if}
+  </div>
+  <div class="right">
+    {#if totalTokens > 0}
+      <span class="item tokens">{totalTokens.toLocaleString()} tokens</span>
+      <span class="sep"></span>
+    {/if}
+    {#if totalCost > 0}
+      <span class="item cost">${totalCost.toFixed(4)}</span>
+      <span class="sep"></span>
+    {/if}
+    <span class="item version">BTerminal v2</span>
+  </div>
+</div>
+
+<style>
+  .status-bar {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 24px;
+    padding: 0 10px;
+    background: var(--bg-secondary);
+    border-top: 1px solid var(--border);
+    font-size: 11px;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    user-select: none;
+  }
+
+  .left, .right {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .sep {
+    width: 1px;
+    height: 10px;
+    background: var(--border);
+  }
+
+  .item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .active {
+    color: var(--ctp-blue);
+  }
+
+  .pulse {
+    width: 6px;
+    height: 6px;
+    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; }
+  }
+
+  .tokens { color: var(--ctp-overlay1); }
+  .cost { color: var(--ctp-yellow); }
+  .version { color: var(--ctp-overlay0); }
+</style>