diff --git a/src/respawn-controller.ts b/src/respawn-controller.ts
index b7acd0c2..210abde4 100644
--- a/src/respawn-controller.ts
+++ b/src/respawn-controller.ts
@@ -26,6 +26,10 @@ export interface RespawnConfig {
   interStepDelayMs: number;
   /** Whether to enable respawn loop */
   enabled: boolean;
+  /** Whether to send /clear after update prompt */
+  sendClear: boolean;
+  /** Whether to send /init after /clear */
+  sendInit: boolean;
 }
 
 export interface RespawnEvents {
@@ -43,6 +47,8 @@ const DEFAULT_CONFIG: RespawnConfig = {
   updatePrompt: 'update all the docs and CLAUDE.md',
   interStepDelayMs: 1000,        // 1 second between steps
   enabled: true,
+  sendClear: true,               // send /clear after update prompt
+  sendInit: true,                // send /init after /clear
 };
 
 /**
@@ -306,7 +312,14 @@ export class RespawnController extends EventEmitter {
         if (this.promptDetected && !this.workingDetected) {
           this.log('Update docs completed');
           this.emit('stepCompleted', 'update');
-          this.sendClear();
+          // Proceed based on config
+          if (this.config.sendClear) {
+            this.sendClear();
+          } else if (this.config.sendInit) {
+            this.sendInit();
+          } else {
+            this.completeCycle();
+          }
         }
       }, 3000); // 3 second verification
     }
@@ -332,7 +345,12 @@ export class RespawnController extends EventEmitter {
       this.idleTimer = setTimeout(() => {
         this.log('/clear completed');
         this.emit('stepCompleted', 'clear');
-        this.sendInit();
+        // Proceed based on config
+        if (this.config.sendInit) {
+          this.sendInit();
+        } else {
+          this.completeCycle();
+        }
       }, 1000); // 1 second for clear
     }
   }
diff --git a/src/session.ts b/src/session.ts
index 92dd904d..8958ff3a 100644
--- a/src/session.ts
+++ b/src/session.ts
@@ -2,6 +2,9 @@ import { EventEmitter } from 'node:events';
 import { v4 as uuidv4 } from 'uuid';
 import * as pty from 'node-pty';
 import { SessionState, SessionStatus, SessionConfig } from './types.js';
+import { TaskTracker, type BackgroundTask } from './task-tracker.js';
+
+export type { BackgroundTask } from './task-tracker.js';
 
 // Maximum terminal buffer size in characters (default 5MB of text)
 const MAX_TERMINAL_BUFFER_SIZE = 5 * 1024 * 1024;
@@ -37,6 +40,13 @@ export interface SessionEvents {
   exit: (code: number | null) => void;
   completion: (result: string, cost: number) => void;
   terminal: (data: string) => void;  // Raw terminal data
+  // Background task events
+  taskCreated: (task: BackgroundTask) => void;
+  taskUpdated: (task: BackgroundTask) => void;
+  taskCompleted: (task: BackgroundTask) => void;
+  taskFailed: (task: BackgroundTask, error: string) => void;
+  // Auto-clear event
+  autoClear: (data: { tokens: number; threshold: number }) => void;
 }
 
 export class Session extends EventEmitter {
@@ -62,6 +72,14 @@ export class Session extends EventEmitter {
   private _isWorking: boolean = false;
   private _lastPromptTime: number = 0;
   private activityTimeout: NodeJS.Timeout | null = null;
+  private _taskTracker: TaskTracker;
+
+  // Token tracking for auto-clear
+  private _totalInputTokens: number = 0;
+  private _totalOutputTokens: number = 0;
+  private _autoClearThreshold: number = 100000; // Default 100k tokens
+  private _autoClearEnabled: boolean = false;
+  private _isClearing: boolean = false; // Prevent recursive clearing
 
   constructor(config: Partial<SessionConfig> & { workingDir: string }) {
     super();
@@ -69,6 +87,13 @@ export class Session extends EventEmitter {
     this.workingDir = config.workingDir;
     this.createdAt = config.createdAt || Date.now();
     this._lastActivityAt = this.createdAt;
+
+    // Initialize task tracker and forward events
+    this._taskTracker = new TaskTracker();
+    this._taskTracker.on('taskCreated', (task) => this.emit('taskCreated', task));
+    this._taskTracker.on('taskUpdated', (task) => this.emit('taskUpdated', task));
+    this._taskTracker.on('taskCompleted', (task) => this.emit('taskCompleted', task));
+    this._taskTracker.on('taskFailed', (task, error) => this.emit('taskFailed', task, error));
   }
 
   get status(): SessionStatus {
@@ -123,6 +148,50 @@ export class Session extends EventEmitter {
     return this._lastPromptTime;
   }
 
+  get taskTracker(): TaskTracker {
+    return this._taskTracker;
+  }
+
+  get runningTaskCount(): number {
+    return this._taskTracker.getRunningCount();
+  }
+
+  get taskTree(): BackgroundTask[] {
+    return this._taskTracker.getTaskTree();
+  }
+
+  get taskStats(): { total: number; running: number; completed: number; failed: number } {
+    return this._taskTracker.getStats();
+  }
+
+  // Token tracking getters and setters
+  get totalTokens(): number {
+    return this._totalInputTokens + this._totalOutputTokens;
+  }
+
+  get inputTokens(): number {
+    return this._totalInputTokens;
+  }
+
+  get outputTokens(): number {
+    return this._totalOutputTokens;
+  }
+
+  get autoClearThreshold(): number {
+    return this._autoClearThreshold;
+  }
+
+  get autoClearEnabled(): boolean {
+    return this._autoClearEnabled;
+  }
+
+  setAutoClear(enabled: boolean, threshold?: number): void {
+    this._autoClearEnabled = enabled;
+    if (threshold !== undefined) {
+      this._autoClearThreshold = threshold;
+    }
+  }
+
   isIdle(): boolean {
     return this._status === 'idle';
   }
@@ -166,6 +235,19 @@ export class Session extends EventEmitter {
         maxTextOutput: MAX_TEXT_OUTPUT_SIZE,
         maxMessages: MAX_MESSAGES,
       },
+      // Background task tracking
+      taskStats: this._taskTracker.getStats(),
+      taskTree: this._taskTracker.getTaskTree(),
+      // Token tracking
+      tokens: {
+        input: this._totalInputTokens,
+        output: this._totalOutputTokens,
+        total: this._totalInputTokens + this._totalOutputTokens,
+      },
+      autoClear: {
+        enabled: this._autoClearEnabled,
+        threshold: this._autoClearThreshold,
+      },
     };
   }
 
@@ -370,12 +452,23 @@ export class Session extends EventEmitter {
             this._claudeSessionId = msg.session_id;
           }
 
+          // Process message for task tracking
+          this._taskTracker.processMessage(msg);
+
           if (msg.type === 'assistant' && msg.message?.content) {
             for (const block of msg.message.content) {
               if (block.type === 'text' && block.text) {
                 this._textOutput += block.text;
               }
             }
+            // Track tokens from usage
+            if (msg.message.usage) {
+              this._totalInputTokens += msg.message.usage.input_tokens || 0;
+              this._totalOutputTokens += msg.message.usage.output_tokens || 0;
+
+              // Check if we should auto-clear
+              this.checkAutoClear();
+            }
           }
 
           if (msg.type === 'result' && msg.total_cost_usd) {
@@ -396,6 +489,40 @@ export class Session extends EventEmitter {
     }
   }
 
+  // Check if we should auto-clear based on token threshold
+  private checkAutoClear(): void {
+    if (!this._autoClearEnabled || this._isClearing) return;
+
+    const totalTokens = this._totalInputTokens + this._totalOutputTokens;
+    if (totalTokens >= this._autoClearThreshold) {
+      this._isClearing = true;
+      console.log(`[Session] Auto-clear triggered: ${totalTokens} tokens >= ${this._autoClearThreshold} threshold`);
+
+      // Wait for Claude to be idle before clearing
+      const checkAndClear = () => {
+        if (!this._isWorking) {
+          // Send /clear command
+          this.write('/clear\n');
+          // Reset token counts
+          this._totalInputTokens = 0;
+          this._totalOutputTokens = 0;
+          this.emit('autoClear', { tokens: totalTokens, threshold: this._autoClearThreshold });
+
+          // Wait a moment then re-enable
+          setTimeout(() => {
+            this._isClearing = false;
+          }, 5000);
+        } else {
+          // Check again in 2 seconds
+          setTimeout(checkAndClear, 2000);
+        }
+      };
+
+      // Start checking after a short delay
+      setTimeout(checkAndClear, 1000);
+    }
+  }
+
   // Send input to the PTY (for interactive sessions)
   write(data: string): void {
     if (this.ptyProcess) {
@@ -510,5 +637,6 @@ export class Session extends EventEmitter {
     this._textOutput = '';
     this._errorBuffer = '';
     this._messages = [];
+    this._taskTracker.clear();
   }
 }
diff --git a/src/task-tracker.ts b/src/task-tracker.ts
new file mode 100644
index 00000000..f2567e46
--- /dev/null
+++ b/src/task-tracker.ts
@@ -0,0 +1,284 @@
+import { EventEmitter } from 'node:events';
+
+/**
+ * Represents a background task spawned by Claude Code
+ */
+export interface BackgroundTask {
+  id: string;
+  parentId: string | null;
+  description: string;
+  subagentType: string;
+  status: 'running' | 'completed' | 'failed';
+  startTime: number;
+  endTime?: number;
+  output?: string;
+  children: string[];
+}
+
+export interface TaskTrackerEvents {
+  taskCreated: (task: BackgroundTask) => void;
+  taskUpdated: (task: BackgroundTask) => void;
+  taskCompleted: (task: BackgroundTask) => void;
+  taskFailed: (task: BackgroundTask, error: string) => void;
+}
+
+/**
+ * TaskTracker parses Claude Code's output to detect and track background tasks.
+ *
+ * Claude Code outputs JSON messages. When it spawns a task via the Task tool,
+ * we see tool_use blocks with the task parameters. We track these and match
+ * them with tool_result blocks to track completion.
+ */
+export class TaskTracker extends EventEmitter {
+  private tasks: Map<string, BackgroundTask> = new Map();
+  private taskStack: string[] = []; // Stack of active task IDs for nesting
+  private pendingToolUses: Map<string, { description: string; subagentType: string; parentId: string | null }> = new Map();
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * Process a Claude message to detect task events
+   */
+  processMessage(msg: any): void {
+    if (!msg || !msg.message?.content) return;
+
+    for (const block of msg.message.content) {
+      if (block.type === 'tool_use' && block.name === 'Task') {
+        this.handleTaskToolUse(block);
+      } else if (block.type === 'tool_result') {
+        this.handleToolResult(block);
+      }
+    }
+  }
+
+  /**
+   * Process raw terminal output to detect task patterns
+   * This is a fallback for when JSON parsing doesn't capture everything
+   */
+  processTerminalOutput(data: string): void {
+    // Detect task launch patterns in terminal output
+    // Claude Code shows things like "Launching explore agent..." or similar
+    const launchPatterns = [
+      /Launching\s+(\w+)\s+agent/i,
+      /Starting\s+(\w+)\s+task/i,
+      /Spawning\s+(\w+)\s+agent/i,
+    ];
+
+    for (const pattern of launchPatterns) {
+      const match = data.match(pattern);
+      if (match) {
+        // This is a heuristic detection - might create duplicate tasks
+        // but we dedupe by checking if we already have a running task of this type
+        const agentType = match[1].toLowerCase();
+        const existingRunning = Array.from(this.tasks.values()).find(
+          t => t.subagentType === agentType && t.status === 'running'
+        );
+        if (!existingRunning) {
+          this.createTaskFromTerminal(agentType, data);
+        }
+      }
+    }
+
+    // Detect task completion patterns
+    const completePatterns = [
+      /Task\s+completed/i,
+      /Agent\s+finished/i,
+      /Background\s+task\s+done/i,
+    ];
+
+    for (const pattern of completePatterns) {
+      if (pattern.test(data)) {
+        // Complete the most recent running task
+        const runningTask = this.getMostRecentRunningTask();
+        if (runningTask) {
+          this.completeTask(runningTask.id);
+        }
+      }
+    }
+  }
+
+  private handleTaskToolUse(block: any): void {
+    const toolUseId = block.id;
+    const params = block.input || {};
+
+    const description = params.description || params.prompt?.substring(0, 50) || 'Background task';
+    const subagentType = params.subagent_type || 'general';
+
+    // Determine parent (current top of stack or null)
+    const parentId = this.taskStack.length > 0 ? this.taskStack[this.taskStack.length - 1] : null;
+
+    // Store pending tool use - task starts when we see activity
+    this.pendingToolUses.set(toolUseId, { description, subagentType, parentId });
+
+    // Create the task immediately
+    const task: BackgroundTask = {
+      id: toolUseId,
+      parentId,
+      description,
+      subagentType,
+      status: 'running',
+      startTime: Date.now(),
+      children: [],
+    };
+
+    this.tasks.set(toolUseId, task);
+    this.taskStack.push(toolUseId);
+
+    // Update parent's children list
+    if (parentId) {
+      const parent = this.tasks.get(parentId);
+      if (parent) {
+        parent.children.push(toolUseId);
+      }
+    }
+
+    this.emit('taskCreated', task);
+  }
+
+  private handleToolResult(block: any): void {
+    const toolUseId = block.tool_use_id;
+    const task = this.tasks.get(toolUseId);
+
+    if (task) {
+      task.status = block.is_error ? 'failed' : 'completed';
+      task.endTime = Date.now();
+      task.output = typeof block.content === 'string'
+        ? block.content
+        : JSON.stringify(block.content);
+
+      // Remove from stack
+      const stackIndex = this.taskStack.indexOf(toolUseId);
+      if (stackIndex !== -1) {
+        this.taskStack.splice(stackIndex, 1);
+      }
+
+      if (block.is_error) {
+        this.emit('taskFailed', task, task.output || 'Unknown error');
+      } else {
+        this.emit('taskCompleted', task);
+      }
+    }
+
+    // Clean up pending
+    this.pendingToolUses.delete(toolUseId);
+  }
+
+  private createTaskFromTerminal(agentType: string, context: string): void {
+    const taskId = `terminal-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const parentId = this.taskStack.length > 0 ? this.taskStack[this.taskStack.length - 1] : null;
+
+    const task: BackgroundTask = {
+      id: taskId,
+      parentId,
+      description: `${agentType} agent`,
+      subagentType: agentType,
+      status: 'running',
+      startTime: Date.now(),
+      children: [],
+    };
+
+    this.tasks.set(taskId, task);
+    this.taskStack.push(taskId);
+
+    if (parentId) {
+      const parent = this.tasks.get(parentId);
+      if (parent) {
+        parent.children.push(taskId);
+      }
+    }
+
+    this.emit('taskCreated', task);
+  }
+
+  private completeTask(taskId: string): void {
+    const task = this.tasks.get(taskId);
+    if (task && task.status === 'running') {
+      task.status = 'completed';
+      task.endTime = Date.now();
+
+      const stackIndex = this.taskStack.indexOf(taskId);
+      if (stackIndex !== -1) {
+        this.taskStack.splice(stackIndex, 1);
+      }
+
+      this.emit('taskCompleted', task);
+    }
+  }
+
+  private getMostRecentRunningTask(): BackgroundTask | undefined {
+    // Return the task at the top of the stack
+    if (this.taskStack.length > 0) {
+      const taskId = this.taskStack[this.taskStack.length - 1];
+      return this.tasks.get(taskId);
+    }
+    return undefined;
+  }
+
+  /**
+   * Get the task tree as a nested structure
+   */
+  getTaskTree(): BackgroundTask[] {
+    const rootTasks: BackgroundTask[] = [];
+
+    for (const task of this.tasks.values()) {
+      if (!task.parentId) {
+        rootTasks.push(task);
+      }
+    }
+
+    return rootTasks;
+  }
+
+  /**
+   * Get all tasks as a flat map
+   */
+  getAllTasks(): Map<string, BackgroundTask> {
+    return new Map(this.tasks);
+  }
+
+  /**
+   * Get a specific task by ID
+   */
+  getTask(taskId: string): BackgroundTask | undefined {
+    return this.tasks.get(taskId);
+  }
+
+  /**
+   * Get count of currently running tasks
+   */
+  getRunningCount(): number {
+    let count = 0;
+    for (const task of this.tasks.values()) {
+      if (task.status === 'running') count++;
+    }
+    return count;
+  }
+
+  /**
+   * Get summary statistics
+   */
+  getStats(): { total: number; running: number; completed: number; failed: number } {
+    let running = 0, completed = 0, failed = 0;
+
+    for (const task of this.tasks.values()) {
+      switch (task.status) {
+        case 'running': running++; break;
+        case 'completed': completed++; break;
+        case 'failed': failed++; break;
+      }
+    }
+
+    return { total: this.tasks.size, running, completed, failed };
+  }
+
+  /**
+   * Clear all tasks (e.g., when session is cleared)
+   */
+  clear(): void {
+    this.tasks.clear();
+    this.taskStack = [];
+    this.pendingToolUses.clear();
+  }
+}
diff --git a/src/types.ts b/src/types.ts
index 30af4173..fed43c37 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -70,6 +70,10 @@ export interface RespawnConfig {
   interStepDelayMs: number;
   /** Whether to enable respawn loop */
   enabled: boolean;
+  /** Whether to send /clear after update prompt */
+  sendClear: boolean;
+  /** Whether to send /init after /clear */
+  sendInit: boolean;
 }
 
 export interface AppConfig {
@@ -211,6 +215,8 @@ export const DEFAULT_CONFIG: AppConfig = {
     updatePrompt: 'update all the docs and CLAUDE.md',
     interStepDelayMs: 1000,        // 1 second between steps
     enabled: false,                // disabled by default
+    sendClear: true,               // send /clear after update prompt
+    sendInit: true,                // send /init after /clear
   },
 };
 
diff --git a/src/web/public/app.js b/src/web/public/app.js
index 635ef393..a36ffb5e 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -1,66 +1,43 @@
-// Claudeman App with xterm.js terminal
+// Claudeman App - Tab-based Terminal UI
 class ClaudemanApp {
   constructor() {
     this.sessions = new Map();
     this.cases = [];
     this.currentRun = null;
     this.totalCost = 0;
-    this.totalTasks = 0;
     this.eventSource = null;
-    this.sessionsCollapsed = true;
-    this.settings = this.loadSettings();
     this.terminal = null;
     this.fitAddon = null;
-    this.activeSessionId = null;  // Currently active interactive session
-    this.respawnStatus = {};      // Respawn status per session
-    this.respawnEnabled = false;  // Whether respawn is enabled for new sessions (disabled by default)
+    this.activeSessionId = null;
+    this.respawnStatus = {};
+    this.respawnTimers = {}; // Track timed respawn timers
+    this.terminalBuffers = new Map(); // Store terminal content per session
 
-    // Terminal write batching for performance
+    // Terminal write batching
     this.pendingWrites = '';
     this.writeFrameScheduled = false;
 
     this.init();
   }
 
-  // Batch terminal writes using requestAnimationFrame for smooth rendering
-  batchTerminalWrite(data) {
-    this.pendingWrites += data;
-    if (!this.writeFrameScheduled) {
-      this.writeFrameScheduled = true;
-      requestAnimationFrame(() => {
-        if (this.pendingWrites && this.terminal) {
-          this.terminal.write(this.pendingWrites);
-          this.pendingWrites = '';
-        }
-        this.writeFrameScheduled = false;
-      });
-    }
-  }
-
   init() {
     this.initTerminal();
     this.loadFontSize();
     this.connectSSE();
     this.loadState();
-    this.loadCases();
     this.loadQuickStartCases();
-    this.startTimerUpdates();
     this.setupEventListeners();
-
-    // Start with sessions collapsed
-    document.getElementById('sessionsPanel').classList.add('collapsed');
   }
 
   initTerminal() {
-    // Initialize xterm.js
     this.terminal = new Terminal({
       theme: {
-        background: '#1a1a2e',
+        background: '#0d0d0d',
         foreground: '#e0e0e0',
         cursor: '#e0e0e0',
-        cursorAccent: '#1a1a2e',
+        cursorAccent: '#0d0d0d',
         selection: 'rgba(255, 255, 255, 0.3)',
-        black: '#1a1a2e',
+        black: '#0d0d0d',
         red: '#ff6b6b',
         green: '#51cf66',
         yellow: '#ffd43b',
@@ -77,9 +54,9 @@ class ClaudemanApp {
         brightCyan: '#66d9e8',
         brightWhite: '#ffffff',
       },
-      fontFamily: '"Fira Code", "Cascadia Code", "JetBrains Mono", "SF Mono", Monaco, "Andale Mono", Consolas, monospace',
+      fontFamily: '"Fira Code", "Cascadia Code", "JetBrains Mono", "SF Mono", Monaco, monospace',
       fontSize: 14,
-      lineHeight: 1.3,
+      lineHeight: 1.2,
       cursorBlink: true,
       cursorStyle: 'block',
       scrollback: 10000,
@@ -94,27 +71,14 @@ class ClaudemanApp {
     this.fitAddon.fit();
 
     // Welcome message
-    this.terminal.writeln('\x1b[1;36m╔═══════════════════════════════════════════════════════════════╗');
-    this.terminal.writeln('║              \x1b[1;33m⚡ Claudeman Terminal \x1b[1;36m                           ║');
-    this.terminal.writeln('╠═══════════════════════════════════════════════════════════════╣');
-    this.terminal.writeln('║  \x1b[0;90mCtrl+Enter\x1b[1;36m  Quick Start          \x1b[0;90mCtrl+K\x1b[1;36m  Kill All Sessions  ║');
-    this.terminal.writeln('║  \x1b[0;90mCtrl+L\x1b[1;36m      Clear Terminal        \x1b[0;90mCtrl+1/2/3\x1b[1;36m  Switch Tabs  ║');
-    this.terminal.writeln('║  \x1b[0;90mCtrl++/-\x1b[1;36m    Font Size             \x1b[0;90mEscape\x1b[1;36m  Close Modals    ║');
-    this.terminal.writeln('╚═══════════════════════════════════════════════════════════════╝\x1b[0m');
-    this.terminal.writeln('');
+    this.showWelcome();
 
     // Handle resize
-    window.addEventListener('resize', () => {
-      if (this.fitAddon) {
-        this.fitAddon.fit();
-      }
-    });
+    window.addEventListener('resize', () => this.fitAddon && this.fitAddon.fit());
 
-    // Resize observer for container changes
     const resizeObserver = new ResizeObserver(() => {
       if (this.fitAddon) {
         this.fitAddon.fit();
-        // Notify server of resize
         if (this.activeSessionId) {
           const dims = this.fitAddon.proposeDimensions();
           if (dims) {
@@ -129,7 +93,7 @@ class ClaudemanApp {
     });
     resizeObserver.observe(container);
 
-    // Handle keyboard input - send to active session
+    // Handle keyboard input
     this.terminal.onData((data) => {
       if (this.activeSessionId) {
         fetch(`/api/sessions/${this.activeSessionId}/input`, {
@@ -141,65 +105,77 @@ class ClaudemanApp {
     });
   }
 
+  showWelcome() {
+    this.terminal.writeln('\x1b[1;36m  Claudeman Terminal\x1b[0m');
+    this.terminal.writeln('\x1b[90m  Click "Quick Start" or press Ctrl+Enter to begin\x1b[0m');
+    this.terminal.writeln('');
+  }
+
+  batchTerminalWrite(data) {
+    this.pendingWrites += data;
+    if (!this.writeFrameScheduled) {
+      this.writeFrameScheduled = true;
+      requestAnimationFrame(() => {
+        if (this.pendingWrites && this.terminal) {
+          this.terminal.write(this.pendingWrites);
+          this.pendingWrites = '';
+        }
+        this.writeFrameScheduled = false;
+      });
+    }
+  }
+
   setupEventListeners() {
-    // Duration select
-    document.getElementById('durationSelect').addEventListener('change', (e) => {
-      const customGroup = document.getElementById('customDurationGroup');
-      customGroup.style.display = e.target.value === 'custom' ? 'block' : 'none';
-    });
-
-    // Quick Start case select
-    document.getElementById('quickStartCase').addEventListener('change', (e) => {
-      this.handleQuickStartSelect(e.target.value);
-    });
-
-    // Keyboard shortcuts
     document.addEventListener('keydown', (e) => {
-      // Escape to close modals
+      // Escape - close panels and modals
       if (e.key === 'Escape') {
-        this.closeCaseSelector();
+        this.closeAllPanels();
         this.closeHelp();
       }
 
-      // Ctrl/Cmd + ? to show help
+      // Ctrl/Cmd + ? - help
       if ((e.ctrlKey || e.metaKey) && (e.key === '?' || e.key === '/')) {
         e.preventDefault();
         this.showHelp();
       }
 
-      // Ctrl/Cmd + Enter to quick start (when not in terminal)
-      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && document.activeElement.tagName !== 'TEXTAREA') {
+      // Ctrl/Cmd + Enter - quick start
+      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
         e.preventDefault();
         this.quickStart();
       }
 
-      // Ctrl/Cmd + K to kill all sessions
+      // Ctrl/Cmd + N - new session
+      if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
+        e.preventDefault();
+        this.createNewSession();
+      }
+
+      // Ctrl/Cmd + W - close active session
+      if ((e.ctrlKey || e.metaKey) && e.key === 'w') {
+        e.preventDefault();
+        this.killActiveSession();
+      }
+
+      // Ctrl/Cmd + Tab - next session
+      if ((e.ctrlKey || e.metaKey) && e.key === 'Tab') {
+        e.preventDefault();
+        this.nextSession();
+      }
+
+      // Ctrl/Cmd + K - kill all
       if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
         e.preventDefault();
         this.killAllSessions();
       }
 
-      // Ctrl/Cmd + L to clear terminal
-      if ((e.ctrlKey || e.metaKey) && e.key === 'l' && document.activeElement !== document.getElementById('promptInput')) {
+      // Ctrl/Cmd + L - clear terminal
+      if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
         e.preventDefault();
         this.clearTerminal();
       }
 
-      // Ctrl/Cmd + 1/2/3 to switch tabs
-      if ((e.ctrlKey || e.metaKey) && e.key === '1') {
-        e.preventDefault();
-        this.switchTab('run');
-      }
-      if ((e.ctrlKey || e.metaKey) && e.key === '2') {
-        e.preventDefault();
-        this.switchTab('cases');
-      }
-      if ((e.ctrlKey || e.metaKey) && e.key === '3') {
-        e.preventDefault();
-        this.switchTab('settings');
-      }
-
-      // Ctrl/Cmd + +/- for font size
+      // Ctrl/Cmd + +/- - font size
       if ((e.ctrlKey || e.metaKey) && (e.key === '=' || e.key === '+')) {
         e.preventDefault();
         this.increaseFontSize();
@@ -211,170 +187,139 @@ class ClaudemanApp {
     });
   }
 
-  // Settings
-  loadSettings() {
-    try {
-      return JSON.parse(localStorage.getItem('claudeman-settings') || '{}');
-    } catch {
-      return {};
-    }
-  }
+  // ========== SSE Connection ==========
 
-  saveSettings() {
-    this.settings = {
-      defaultDir: document.getElementById('defaultDirInput').value,
-      autoScroll: document.getElementById('autoScrollOutput').checked,
-      soundOnComplete: document.getElementById('soundOnComplete').checked,
-    };
-    localStorage.setItem('claudeman-settings', JSON.stringify(this.settings));
-    alert('Settings saved!');
-  }
-
-  // Tabs
-  switchTab(tabName) {
-    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-    document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
-
-    document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
-    document.getElementById(`tab-${tabName}`).classList.add('active');
-
-    if (tabName === 'cases') {
-      this.loadCases();
-    }
-  }
-
-  // SSE Connection
   connectSSE() {
     this.eventSource = new EventSource('/api/events');
 
-    this.eventSource.onopen = () => {
-      this.setConnectionStatus('connected');
-    };
-
+    this.eventSource.onopen = () => this.setConnectionStatus('connected');
     this.eventSource.onerror = () => {
       this.setConnectionStatus('disconnected');
       setTimeout(() => this.connectSSE(), 3000);
     };
 
     this.eventSource.addEventListener('init', (e) => {
-      const data = JSON.parse(e.data);
-      this.handleInit(data);
+      this.handleInit(JSON.parse(e.data));
     });
 
     this.eventSource.addEventListener('session:created', (e) => {
       const data = JSON.parse(e.data);
       this.sessions.set(data.id, data);
-      this.renderSessions();
-      this.terminal.writeln(`\x1b[1;32m► Session created: ${data.id.slice(0, 8)}\x1b[0m`);
+      this.renderSessionTabs();
+      this.updateCost();
     });
 
     this.eventSource.addEventListener('session:updated', (e) => {
       const data = JSON.parse(e.data);
       this.sessions.set(data.id, data);
-      this.updateStats();
-      this.renderSessions();
+      this.renderSessionTabs();
+      this.updateCost();
+      // Update tokens display if this is the active session
+      if (data.id === this.activeSessionId && data.tokens) {
+        this.updateRespawnTokens(data.tokens.total);
+      }
+    });
+
+    this.eventSource.addEventListener('session:deleted', (e) => {
+      const data = JSON.parse(e.data);
+      this.sessions.delete(data.id);
+      this.terminalBuffers.delete(data.id);
+      if (this.activeSessionId === data.id) {
+        this.activeSessionId = null;
+        this.terminal.clear();
+        this.showWelcome();
+      }
+      this.renderSessionTabs();
     });
 
-    // Handle raw terminal data from PTY - use batched writes for performance
     this.eventSource.addEventListener('session:terminal', (e) => {
       const data = JSON.parse(e.data);
-      this.batchTerminalWrite(data.data);
-    });
-
-    this.eventSource.addEventListener('session:output', (e) => {
-      const data = JSON.parse(e.data);
-      // Terminal data is handled by session:terminal, so skip duplicate writes
-      this.updateSessionOutput(data.id, data.data);
-    });
-
-    this.eventSource.addEventListener('session:message', (e) => {
-      // JSON messages - we can show these differently if needed
+      if (data.id === this.activeSessionId) {
+        this.batchTerminalWrite(data.data);
+      }
     });
 
     this.eventSource.addEventListener('session:completion', (e) => {
       const data = JSON.parse(e.data);
       this.totalCost += data.cost || 0;
-      this.totalTasks++;
-      this.terminal.writeln('');
-      this.terminal.writeln(`\x1b[1;32m✓ Completed (Cost: $${(data.cost || 0).toFixed(4)})\x1b[0m`);
-      this.updateStats();
-      this.setRunning(false);
-
-      if (this.settings.soundOnComplete) {
-        this.playSound();
+      this.updateCost();
+      if (data.id === this.activeSessionId) {
+        this.terminal.writeln('');
+        this.terminal.writeln(`\x1b[1;32m Done (Cost: $${(data.cost || 0).toFixed(4)})\x1b[0m`);
       }
     });
 
     this.eventSource.addEventListener('session:error', (e) => {
       const data = JSON.parse(e.data);
-      this.terminal.writeln(`\x1b[1;31m❌ Error: ${data.error}\x1b[0m`);
+      if (data.id === this.activeSessionId) {
+        this.terminal.writeln(`\x1b[1;31m Error: ${data.error}\x1b[0m`);
+      }
     });
 
     this.eventSource.addEventListener('session:exit', (e) => {
       const data = JSON.parse(e.data);
-      this.terminal.writeln('');
-      this.terminal.writeln(`\x1b[90m[Session ${data.id.slice(0, 8)} exited with code ${data.code}]\x1b[0m`);
+      const session = this.sessions.get(data.id);
+      if (session) {
+        session.status = 'stopped';
+        this.renderSessionTabs();
+      }
     });
 
-    this.eventSource.addEventListener('scheduled:created', (e) => {
+    this.eventSource.addEventListener('session:idle', (e) => {
       const data = JSON.parse(e.data);
-      this.currentRun = data;
+      const session = this.sessions.get(data.id);
+      if (session) {
+        session.status = 'idle';
+        this.renderSessionTabs();
+      }
+    });
+
+    this.eventSource.addEventListener('session:working', (e) => {
+      const data = JSON.parse(e.data);
+      const session = this.sessions.get(data.id);
+      if (session) {
+        session.status = 'busy';
+        this.renderSessionTabs();
+      }
+    });
+
+    // Scheduled run events
+    this.eventSource.addEventListener('scheduled:created', (e) => {
+      this.currentRun = JSON.parse(e.data);
       this.showTimer();
     });
 
     this.eventSource.addEventListener('scheduled:updated', (e) => {
-      const data = JSON.parse(e.data);
-      this.currentRun = data;
+      this.currentRun = JSON.parse(e.data);
       this.updateTimer();
     });
 
     this.eventSource.addEventListener('scheduled:completed', (e) => {
-      const data = JSON.parse(e.data);
-      this.currentRun = data;
+      this.currentRun = JSON.parse(e.data);
       this.hideTimer();
-      this.terminal.writeln('');
-      this.terminal.writeln(`\x1b[1;33m🎉 Scheduled run completed! Tasks: ${data.completedTasks}, Cost: $${data.totalCost.toFixed(4)}\x1b[0m`);
-      this.setRunning(false);
-
-      if (this.settings.soundOnComplete) {
-        this.playSound();
-      }
+      this.showToast('Scheduled run completed!', 'success');
     });
 
     this.eventSource.addEventListener('scheduled:stopped', (e) => {
-      const data = JSON.parse(e.data);
-      this.currentRun = data;
+      this.currentRun = null;
       this.hideTimer();
-      this.terminal.writeln('');
-      this.terminal.writeln('\x1b[1;33m⏹ Scheduled run stopped.\x1b[0m');
-      this.setRunning(false);
-    });
-
-    this.eventSource.addEventListener('scheduled:log', (e) => {
-      const data = JSON.parse(e.data);
-      this.terminal.writeln(`\x1b[90m${data.log}\x1b[0m`);
-    });
-
-    this.eventSource.addEventListener('case:created', (e) => {
-      this.loadCases();
-      this.loadQuickStartCases();
     });
 
     // Respawn events
     this.eventSource.addEventListener('respawn:started', (e) => {
       const data = JSON.parse(e.data);
       this.respawnStatus[data.sessionId] = data.status;
-      this.showRespawnBanner();
-      this.updatePageTitle();
-      this.terminal.writeln(`\x1b[1;32m🔄 Respawn loop started for session ${data.sessionId.slice(0, 8)}\x1b[0m`);
+      if (data.sessionId === this.activeSessionId) {
+        this.showRespawnBanner();
+      }
     });
 
     this.eventSource.addEventListener('respawn:stopped', (e) => {
       const data = JSON.parse(e.data);
       delete this.respawnStatus[data.sessionId];
-      this.hideRespawnBanner();
-      this.updatePageTitle();
-      this.terminal.writeln(`\x1b[1;33m⏹ Respawn loop stopped\x1b[0m`);
+      if (data.sessionId === this.activeSessionId) {
+        this.hideRespawnBanner();
+      }
     });
 
     this.eventSource.addEventListener('respawn:stateChanged', (e) => {
@@ -382,7 +327,9 @@ class ClaudemanApp {
       if (this.respawnStatus[data.sessionId]) {
         this.respawnStatus[data.sessionId].state = data.state;
       }
-      this.updateRespawnBanner(data.state);
+      if (data.sessionId === this.activeSessionId) {
+        this.updateRespawnBanner(data.state);
+      }
     });
 
     this.eventSource.addEventListener('respawn:cycleStarted', (e) => {
@@ -390,232 +337,267 @@ class ClaudemanApp {
       if (this.respawnStatus[data.sessionId]) {
         this.respawnStatus[data.sessionId].cycleCount = data.cycleNumber;
       }
-      document.getElementById('respawnCycleCount').textContent = data.cycleNumber;
-      this.terminal.writeln(`\x1b[1;36m─── Respawn Cycle #${data.cycleNumber} Started ───\x1b[0m`);
-    });
-
-    this.eventSource.addEventListener('respawn:cycleCompleted', (e) => {
-      const data = JSON.parse(e.data);
-      this.terminal.writeln(`\x1b[1;32m✓ Respawn Cycle #${data.cycleNumber} Completed\x1b[0m`);
+      if (data.sessionId === this.activeSessionId) {
+        document.getElementById('respawnCycleCount').textContent = data.cycleNumber;
+      }
     });
 
     this.eventSource.addEventListener('respawn:stepSent', (e) => {
       const data = JSON.parse(e.data);
-      document.getElementById('respawnStep').textContent = `Sending: ${data.input}`;
+      if (data.sessionId === this.activeSessionId) {
+        document.getElementById('respawnStep').textContent = data.input;
+      }
     });
 
-    this.eventSource.addEventListener('respawn:stepCompleted', (e) => {
+    // Respawn timer events
+    this.eventSource.addEventListener('respawn:timerStarted', (e) => {
       const data = JSON.parse(e.data);
-      document.getElementById('respawnStep').textContent = `Completed: ${data.step}`;
+      this.respawnTimers[data.sessionId] = {
+        endAt: data.endAt,
+        startedAt: data.startedAt,
+        durationMinutes: data.durationMinutes
+      };
+      if (data.sessionId === this.activeSessionId) {
+        this.showRespawnTimer();
+      }
     });
 
-    this.eventSource.addEventListener('respawn:log', (e) => {
+    // Auto-clear event
+    this.eventSource.addEventListener('session:autoClear', (e) => {
       const data = JSON.parse(e.data);
-      console.log('[Respawn]', data.message);
+      if (data.sessionId === this.activeSessionId) {
+        this.showToast(`Auto-cleared at ${data.tokens.toLocaleString()} tokens`, 'info');
+        this.updateRespawnTokens(0);
+      }
     });
 
-    this.eventSource.addEventListener('respawn:error', (e) => {
+    // Background task events
+    this.eventSource.addEventListener('task:created', (e) => {
       const data = JSON.parse(e.data);
-      this.terminal.writeln(`\x1b[1;31m❌ Respawn error: ${data.error}\x1b[0m`);
+      this.renderSessionTabs();
+      if (data.sessionId === this.activeSessionId) {
+        this.renderTaskPanel();
+      }
     });
-  }
 
-  playSound() {
-    try {
-      const audio = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdH2JkJOQjIJ5cGlpcXuFjpWYl5KKgHZsZWdveYSNlZmYk4yBdmtlZmt1gIqSlpeUjoV7cWlnbHV/iZGWl5SSiYB2bGdqcHqEjJOWlZGMhHpwa2ducHmEjJOUk5CMhHpwa2dqb3eFjJOUk4+LgnhvamdscHqEjJKTko6KgXdtaGltdH6HjpKTkY2Jf3Zsa2twd4GIjpKSkI2Jf3ZsamttdH2GjZGSkI2Jf3VramttdX2GjJCRj4yIf3VramtudX6GjJCQjo2If3VraWttdn6FjI+Pjo2If3VraWptdn+FjI+PjoyHfnRqaWptdn6Fi4+PjoyHfnRqaGlsdn6Fi46OjYyHfnRpZ2lsdX2FjI6OjYuHfXNpZ2lrdX2EjI2OjYuGfXNpZmlrdX2EjI2NjIuGfXNoZmlrdXyEi42NjIqGfHNnZWhqdHyDi4yMi4qFfHJnZWhpdHyDioyMi4qFfHJnZGdpdHuDiouLioqEe3FmZGdocnuCiYuLioqEe3FmZGZocnuCiYqKiYmDenBmZGZncnqBiIqJiYiDenBmY2ZncnqBiImIiIiDenBlY2VncXqAh4iIiIiCeW9lY2VmcXmAh4eHh4eCeW9kYmVmcHl/hoaGhoeBd25kYmRlcHh+hYWFhYaBd21jYWRlb3d9hYSEhYWAdmxiYWNkbnd8hIODhISAdjxhYWNkbXZ7g4KCg4N/dWtgYGJja3V6goGBgoJ+dGpfX2FiaXR5gYCAf4F9c2leX2BhZ3N4gH9/f4B8cmhcXV9fZnJ3f318fX57cGdcXF5eZXF1fXt7e3x6b2ZbW11dZG9zent6eXp5bWRaW1xbY25yfHl4eXh4a2JZWltaYWxxeXd2d3Z2aF9XWVlYX2xvdXR0dHRzZVxVV1dWXmpsdHJxcnFwYllUVVRUW2dqdnBvcHBuXldSU1JSWmVodW5tbm1sWlNQUU9PV2Nlc2xramxpV1FOUFE=');
-      audio.volume = 0.3;
-      audio.play();
-    } catch {}
+    this.eventSource.addEventListener('task:completed', (e) => {
+      const data = JSON.parse(e.data);
+      this.renderSessionTabs();
+      if (data.sessionId === this.activeSessionId) {
+        this.renderTaskPanel();
+      }
+    });
+
+    this.eventSource.addEventListener('task:failed', (e) => {
+      const data = JSON.parse(e.data);
+      this.renderSessionTabs();
+      if (data.sessionId === this.activeSessionId) {
+        this.renderTaskPanel();
+      }
+    });
+
+    this.eventSource.addEventListener('task:updated', (e) => {
+      const data = JSON.parse(e.data);
+      if (data.sessionId === this.activeSessionId) {
+        this.renderTaskPanel();
+      }
+    });
   }
 
   setConnectionStatus(status) {
-    const el = document.getElementById('connectionStatus');
-    const dot = el.querySelector('.status-dot');
-    const text = el.querySelector('span:last-child');
-
+    const dot = document.querySelector('.status-dot');
+    const text = document.querySelector('.status-text');
     dot.className = 'status-dot ' + status;
-
-    if (status === 'connected') {
-      text.textContent = 'Connected';
-      text.onclick = null;
-      text.style.cursor = 'default';
-      this.showToast('Connected to server', 'success');
-    } else {
-      text.innerHTML = '<span>Disconnected</span> <button class="btn btn-xs" style="margin-left:0.5rem">Retry</button>';
-      text.querySelector('button').onclick = () => this.reconnectSSE();
-      this.showToast('Connection lost. Click retry to reconnect.', 'warning');
-    }
-  }
-
-  // Manually reconnect SSE
-  reconnectSSE() {
-    if (this.eventSource) {
-      this.eventSource.close();
-      this.eventSource = null;
-    }
-    this.showToast('Reconnecting...', 'info');
-    this.connectSSE();
-  }
-
-  // Show a toast notification
-  showToast(message, type = 'info') {
-    const toast = document.createElement('div');
-    toast.className = `toast toast-${type}`;
-    toast.textContent = message;
-
-    // Create container if needed
-    let container = document.querySelector('.toast-container');
-    if (!container) {
-      container = document.createElement('div');
-      container.className = 'toast-container';
-      document.body.appendChild(container);
-    }
-    container.appendChild(toast);
-
-    // Animate in
-    requestAnimationFrame(() => {
-      toast.classList.add('show');
-    });
-
-    // Remove after delay
-    setTimeout(() => {
-      toast.classList.remove('show');
-      setTimeout(() => toast.remove(), 300);
-    }, 3000);
+    text.textContent = status === 'connected' ? 'Connected' : 'Disconnected';
   }
 
   handleInit(data) {
     this.sessions.clear();
     data.sessions.forEach(s => this.sessions.set(s.id, s));
 
+    if (data.respawnStatus) {
+      this.respawnStatus = data.respawnStatus;
+    }
+
+    this.totalCost = data.sessions.reduce((sum, s) => sum + (s.totalCost || 0), 0);
+    this.totalCost += data.scheduledRuns.reduce((sum, r) => sum + (r.totalCost || 0), 0);
+
     const activeRun = data.scheduledRuns.find(r => r.status === 'running');
     if (activeRun) {
       this.currentRun = activeRun;
       this.showTimer();
     }
 
-    // Load respawn status
-    if (data.respawnStatus) {
-      this.respawnStatus = data.respawnStatus;
-      // Show respawn banner if any session has active respawn
-      const hasActiveRespawn = Object.values(this.respawnStatus).some(s => s.state !== 'stopped');
-      if (hasActiveRespawn) {
-        this.showRespawnBanner();
-        const activeStatus = Object.values(this.respawnStatus).find(s => s.state !== 'stopped');
-        if (activeStatus) {
-          this.updateRespawnBanner(activeStatus.state);
-          document.getElementById('respawnCycleCount').textContent = activeStatus.cycleCount || 0;
-        }
-      }
+    this.updateCost();
+    this.renderSessionTabs();
+
+    // Auto-select first session if any
+    if (this.sessions.size > 0 && !this.activeSessionId) {
+      const firstSession = this.sessions.values().next().value;
+      this.selectSession(firstSession.id);
     }
-
-    this.totalCost = data.sessions.reduce((sum, s) => sum + (s.totalCost || 0), 0);
-    this.totalCost += data.scheduledRuns.reduce((sum, r) => sum + (r.totalCost || 0), 0);
-    this.totalTasks = data.scheduledRuns.reduce((sum, r) => sum + (r.completedTasks || 0), 0);
-
-    this.updateStats();
-    this.renderSessions();
   }
 
   async loadState() {
     try {
       const res = await fetch('/api/status');
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const data = await res.json();
       this.handleInit(data);
     } catch (err) {
       console.error('Failed to load state:', err);
-      this.showToast('Failed to load state: ' + err.message, 'error');
     }
   }
 
-  // Cases
-  async loadCases() {
+  // ========== Session Tabs ==========
+
+  renderSessionTabs() {
+    const container = document.getElementById('sessionTabs');
+
+    // Build tabs HTML
+    let html = '';
+    for (const [id, session] of this.sessions) {
+      const isActive = id === this.activeSessionId;
+      const status = session.status || 'idle';
+      const name = this.getSessionName(session);
+      const taskStats = session.taskStats || { running: 0, total: 0 };
+      const hasRunningTasks = taskStats.running > 0;
+
+      html += `
+        <div class="session-tab ${isActive ? 'active' : ''}" data-id="${id}" onclick="app.selectSession('${id}')">
+          <span class="tab-status ${status}"></span>
+          <span class="tab-name">${this.escapeHtml(name)}</span>
+          ${hasRunningTasks ? `<span class="tab-badge" onclick="event.stopPropagation(); app.toggleTaskPanel()">${taskStats.running}</span>` : ''}
+          <span class="tab-close" onclick="event.stopPropagation(); app.closeSession('${id}')">&times;</span>
+        </div>
+      `;
+    }
+
+    // Add the "+" button
+    html += `
+      <div class="session-tab new-tab" onclick="app.createNewSession()" title="New Session (Ctrl+N)">
+        <span>+</span>
+      </div>
+    `;
+
+    container.innerHTML = html;
+  }
+
+  getSessionName(session) {
+    if (session.workingDir) {
+      return session.workingDir.split('/').pop() || session.workingDir;
+    }
+    return session.id.slice(0, 8);
+  }
+
+  async selectSession(sessionId) {
+    if (this.activeSessionId === sessionId) return;
+
+    this.activeSessionId = sessionId;
+    this.renderSessionTabs();
+
+    // Load terminal buffer for this session
     try {
-      const res = await fetch('/api/cases');
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      this.cases = await res.json();
-      this.renderCases();
+      const res = await fetch(`/api/sessions/${sessionId}/terminal`);
+      const data = await res.json();
+      this.terminal.clear();
+      if (data.terminalBuffer) {
+        this.terminal.write(data.terminalBuffer);
+      }
+
+      // Send resize
+      const dims = this.fitAddon.proposeDimensions();
+      if (dims) {
+        fetch(`/api/sessions/${sessionId}/resize`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ cols: dims.cols, rows: dims.rows })
+        });
+      }
+
+      // Update respawn banner
+      if (this.respawnStatus[sessionId]) {
+        this.showRespawnBanner();
+        this.updateRespawnBanner(this.respawnStatus[sessionId].state);
+        document.getElementById('respawnCycleCount').textContent = this.respawnStatus[sessionId].cycleCount || 0;
+      } else {
+        this.hideRespawnBanner();
+      }
+
+      // Update task panel if open
+      if (document.getElementById('taskPanel').classList.contains('open')) {
+        this.renderTaskPanel();
+      }
+
+      this.terminal.focus();
     } catch (err) {
-      console.error('Failed to load cases:', err);
-      this.showToast('Failed to load cases', 'error');
+      console.error('Failed to load session terminal:', err);
     }
   }
 
-  // Quick Start
+  async closeSession(sessionId) {
+    try {
+      await fetch(`/api/sessions/${sessionId}`, { method: 'DELETE' });
+      this.sessions.delete(sessionId);
+      this.terminalBuffers.delete(sessionId);
+
+      if (this.activeSessionId === sessionId) {
+        this.activeSessionId = null;
+        // Select another session or show welcome
+        if (this.sessions.size > 0) {
+          const nextSession = this.sessions.values().next().value;
+          this.selectSession(nextSession.id);
+        } else {
+          this.terminal.clear();
+          this.showWelcome();
+        }
+      }
+
+      this.renderSessionTabs();
+    } catch (err) {
+      this.showToast('Failed to close session', 'error');
+    }
+  }
+
+  nextSession() {
+    const ids = Array.from(this.sessions.keys());
+    if (ids.length <= 1) return;
+
+    const currentIndex = ids.indexOf(this.activeSessionId);
+    const nextIndex = (currentIndex + 1) % ids.length;
+    this.selectSession(ids[nextIndex]);
+  }
+
+  // ========== Quick Start ==========
+
   async loadQuickStartCases() {
     try {
       const res = await fetch('/api/cases');
       const cases = await res.json();
+      this.cases = cases;
+
       const select = document.getElementById('quickStartCase');
+      const newSessionSelect = document.getElementById('newSessionCase');
 
-      // Preserve current selection
-      const currentValue = select.value;
-
-      // Clear and rebuild options
-      select.innerHTML = '<option value="testcase">testcase (default)</option>';
-
-      // Add existing cases (skip testcase if it exists)
+      // Build options
+      let options = '<option value="testcase">testcase</option>';
       cases.forEach(c => {
         if (c.name !== 'testcase') {
-          const option = document.createElement('option');
-          option.value = c.name;
-          option.textContent = c.name;
-          select.appendChild(option);
+          options += `<option value="${c.name}">${c.name}</option>`;
         }
       });
 
-      // Add "Create new..." option
-      const createOption = document.createElement('option');
-      createOption.value = '__create_new__';
-      createOption.textContent = '+ Create new...';
-      select.appendChild(createOption);
-
-      // Restore selection if it still exists
-      if ([...select.options].some(o => o.value === currentValue)) {
-        select.value = currentValue;
-      }
+      select.innerHTML = options;
+      newSessionSelect.innerHTML = options;
     } catch (err) {
-      console.error('Failed to load Quick Start cases:', err);
-    }
-  }
-
-  handleQuickStartSelect(value) {
-    if (value === '__create_new__') {
-      const newName = prompt('Enter a name for the new case:', '');
-      const select = document.getElementById('quickStartCase');
-
-      if (newName && newName.trim()) {
-        const cleanName = newName.trim().replace(/[^a-zA-Z0-9_-]/g, '-');
-        if (cleanName) {
-          // Add the new option and select it
-          const option = document.createElement('option');
-          option.value = cleanName;
-          option.textContent = cleanName;
-          // Insert before the "Create new..." option
-          select.insertBefore(option, select.lastElementChild);
-          select.value = cleanName;
-        } else {
-          select.value = 'testcase';
-        }
-      } else {
-        // Revert to default
-        select.value = 'testcase';
-      }
+      console.error('Failed to load cases:', err);
     }
   }
 
   async quickStart() {
-    const select = document.getElementById('quickStartCase');
-    let caseName = select.value;
-
-    if (caseName === '__create_new__') {
-      caseName = 'testcase';
-    }
+    const caseName = document.getElementById('quickStartCase').value || 'testcase';
 
     this.terminal.clear();
-    this.terminal.writeln('\x1b[1;32m⚡ Quick Start: Launching Claude session...\x1b[0m');
-    this.terminal.writeln(`\x1b[90mCase: ${caseName}\x1b[0m`);
+    this.terminal.writeln(`\x1b[1;32m Starting session in ${caseName}...\x1b[0m`);
     this.terminal.writeln('');
 
     try {
@@ -626,19 +608,12 @@ class ClaudemanApp {
       });
       const data = await res.json();
 
-      if (!data.success) {
-        throw new Error(data.error);
-      }
+      if (!data.success) throw new Error(data.error);
 
       this.activeSessionId = data.sessionId;
-      this.terminal.writeln(`\x1b[1;32m✓ Session started in ${data.casePath}\x1b[0m`);
-      this.terminal.writeln('');
-
-      // Reload cases in case a new one was created
       this.loadQuickStartCases();
-      this.loadCases();
 
-      // Send initial resize
+      // Send resize
       const dims = this.fitAddon.proposeDimensions();
       if (dims) {
         await fetch(`/api/sessions/${data.sessionId}/resize`, {
@@ -648,196 +623,144 @@ class ClaudemanApp {
         });
       }
 
-      // Focus the terminal
       this.terminal.focus();
-
     } catch (err) {
-      this.terminal.writeln(`\x1b[1;31m❌ Error: ${err.message}\x1b[0m`);
+      this.terminal.writeln(`\x1b[1;31m Error: ${err.message}\x1b[0m`);
     }
   }
 
-  renderCases() {
-    const list = document.getElementById('casesList');
+  // ========== New Session ==========
 
-    if (this.cases.length === 0) {
-      list.innerHTML = '<p class="empty-state">No cases yet. Create one to get started.</p>';
-      return;
-    }
-
-    list.innerHTML = this.cases.map(c => `
-      <div class="case-card" onclick="app.useCase('${c.path}')">
-        <span class="case-icon">📁</span>
-        <div class="case-info">
-          <div class="case-name">${this.escapeHtml(c.name)}</div>
-          <div class="case-path">${this.escapeHtml(c.path)}</div>
-        </div>
-      </div>
-    `).join('');
+  createNewSession() {
+    document.getElementById('newSessionPanel').classList.add('open');
   }
 
-  useCase(path) {
-    document.getElementById('dirInput').value = path;
-    this.switchTab('run');
+  hideNewSessionPanel() {
+    document.getElementById('newSessionPanel').classList.remove('open');
   }
 
-  showCreateCase() {
-    document.getElementById('createCaseForm').style.display = 'block';
-    document.getElementById('caseNameInput').focus();
-  }
+  async createSessionFromPanel() {
+    const caseName = document.getElementById('newSessionCase').value;
+    const customDir = document.getElementById('newSessionDir').value.trim();
 
-  hideCreateCase() {
-    document.getElementById('createCaseForm').style.display = 'none';
-    document.getElementById('caseNameInput').value = '';
-    document.getElementById('caseDescInput').value = '';
-  }
-
-  async createCase() {
-    const name = document.getElementById('caseNameInput').value.trim();
-    const description = document.getElementById('caseDescInput').value.trim();
-
-    if (!name) {
-      alert('Please enter a case name');
-      return;
-    }
+    this.hideNewSessionPanel();
 
     try {
-      const res = await fetch('/api/cases', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name, description })
-      });
-      const data = await res.json();
+      if (customDir) {
+        // Create session with custom directory
+        const createRes = await fetch('/api/sessions', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ workingDir: customDir })
+        });
+        const createData = await createRes.json();
+        if (!createData.success) throw new Error(createData.error);
 
-      if (data.success) {
-        this.hideCreateCase();
-        this.loadCases();
-        alert(`Case "${name}" created!`);
+        // Start interactive
+        await fetch(`/api/sessions/${createData.session.id}/interactive`, {
+          method: 'POST'
+        });
+
+        this.selectSession(createData.session.id);
       } else {
-        alert('Error: ' + data.error);
+        // Use quick-start with case
+        const res = await fetch('/api/quick-start', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ caseName })
+        });
+        const data = await res.json();
+        if (!data.success) throw new Error(data.error);
+
+        this.selectSession(data.sessionId);
       }
     } catch (err) {
-      alert('Error creating case: ' + err.message);
+      this.showToast('Failed to create session: ' + err.message, 'error');
     }
   }
 
-  selectCase() {
-    this.loadCases().then(() => {
-      const grid = document.getElementById('caseSelectorGrid');
+  // ========== Directory Input ==========
 
-      if (this.cases.length === 0) {
-        grid.innerHTML = '<p class="empty-state">No cases. Create one in the Cases tab.</p>';
+  toggleDirInput() {
+    const btn = document.querySelector('#dirDisplay').parentElement;
+    const input = document.getElementById('dirInput');
+
+    if (input.classList.contains('hidden')) {
+      input.classList.remove('hidden');
+      btn.style.display = 'none';
+      input.focus();
+    }
+  }
+
+  hideDirInput() {
+    const btn = document.querySelector('#dirDisplay').parentElement;
+    const input = document.getElementById('dirInput');
+
+    setTimeout(() => {
+      input.classList.add('hidden');
+      btn.style.display = '';
+
+      const value = input.value.trim();
+      document.getElementById('dirDisplay').textContent = value || 'No directory';
+    }, 100);
+  }
+
+  // ========== Respawn Panel ==========
+
+  toggleRespawnPanel() {
+    const panel = document.getElementById('respawnPanel');
+    panel.classList.toggle('open');
+
+    // Show "Enable on Current" button if there's an active session
+    const enableOnCurrentBtn = document.getElementById('enableOnCurrentBtn');
+    if (this.activeSessionId && this.sessions.has(this.activeSessionId)) {
+      const session = this.sessions.get(this.activeSessionId);
+      // Only show if session is running (has a PID)
+      if (session.pid) {
+        enableOnCurrentBtn.style.display = '';
       } else {
-        grid.innerHTML = this.cases.map(c => `
-          <div class="case-card" onclick="app.selectCaseAndClose('${c.path}')">
-            <span class="case-icon">📁</span>
-            <div class="case-info">
-              <div class="case-name">${this.escapeHtml(c.name)}</div>
-            </div>
-          </div>
-        `).join('');
+        enableOnCurrentBtn.style.display = 'none';
       }
-
-      document.getElementById('caseSelectorModal').classList.add('active');
-    });
-  }
-
-  selectCaseAndClose(path) {
-    document.getElementById('dirInput').value = path;
-    this.closeCaseSelector();
-  }
-
-  closeCaseSelector() {
-    document.getElementById('caseSelectorModal').classList.remove('active');
-  }
-
-  // Help modal
-  showHelp() {
-    document.getElementById('helpModal').classList.add('active');
-  }
-
-  closeHelp() {
-    document.getElementById('helpModal').classList.remove('active');
-  }
-
-  // Actions
-  async startRun() {
-    const prompt = document.getElementById('promptInput').value.trim();
-    const dir = document.getElementById('dirInput').value.trim();
-    const durationSelect = document.getElementById('durationSelect').value;
-
-    let duration = 0;
-    if (durationSelect === 'custom') {
-      duration = parseInt(document.getElementById('customDuration').value) || 0;
     } else {
-      duration = parseInt(durationSelect) || 0;
-    }
-
-    if (!prompt) {
-      this.showToast('Please enter a prompt', 'warning');
-      return;
-    }
-
-    // Confirm for long runs (over 30 minutes)
-    if (duration >= 30) {
-      const hours = Math.floor(duration / 60);
-      const mins = duration % 60;
-      const timeStr = hours > 0 ? `${hours}h ${mins}m` : `${mins} minutes`;
-      if (!confirm(`Start a ${timeStr} timed run? This will use API credits for the duration.`)) {
-        return;
-      }
-    }
-
-    this.setRunning(true);
-    this.terminal.writeln('');
-    this.terminal.writeln(`\x1b[1;36m─── Starting: ${prompt.substring(0, 60)}${prompt.length > 60 ? '...' : ''} ───\x1b[0m`);
-    this.terminal.writeln('');
-
-    try {
-      if (duration > 0) {
-        const res = await fetch('/api/scheduled', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            prompt,
-            workingDir: dir || undefined,
-            durationMinutes: duration
-          })
-        });
-        const data = await res.json();
-        if (!data.success) {
-          throw new Error(data.error);
-        }
-      } else {
-        const res = await fetch('/api/run', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            prompt,
-            workingDir: dir || undefined
-          })
-        });
-        const data = await res.json();
-        if (!data.success) {
-          throw new Error(data.error);
-        }
-      }
-    } catch (err) {
-      this.terminal.writeln(`\x1b[1;31m❌ Error: ${err.message}\x1b[0m`);
-      this.setRunning(false);
+      enableOnCurrentBtn.style.display = 'none';
     }
   }
 
-  // Start an interactive Claude Code session
-  async startInteractive() {
+  getRespawnConfig() {
+    const updatePrompt = document.getElementById('respawnPrompt').value;
+    const idleTimeout = parseInt(document.getElementById('respawnIdleTimeout').value) || 5;
+    const stepDelay = parseInt(document.getElementById('respawnStepDelay').value) || 1;
+    const sendClear = document.getElementById('respawnSendClear').checked;
+    const sendInit = document.getElementById('respawnSendInit').checked;
+    const durationStr = document.getElementById('respawnDuration').value;
+    const durationMinutes = durationStr ? parseInt(durationStr) : null;
+    const autoClearEnabled = document.getElementById('autoClearEnabled').checked;
+    const autoClearThreshold = parseInt(document.getElementById('autoClearThreshold').value) || 100000;
+
+    return {
+      respawnConfig: {
+        updatePrompt,
+        idleTimeoutMs: idleTimeout * 1000,
+        interStepDelayMs: stepDelay * 1000,
+        sendClear,
+        sendInit,
+      },
+      durationMinutes,
+      autoClearEnabled,
+      autoClearThreshold
+    };
+  }
+
+  async startInteractiveWithRespawn() {
+    this.toggleRespawnPanel();
+
     const dir = document.getElementById('dirInput').value.trim();
-    const respawnEnabled = document.getElementById('respawnEnabled').checked;
+    const { respawnConfig, durationMinutes, autoClearEnabled, autoClearThreshold } = this.getRespawnConfig();
 
     this.terminal.clear();
-    this.terminal.writeln('\x1b[1;36m─── Starting Interactive Claude Code Session ───\x1b[0m');
-    if (respawnEnabled) {
-      this.terminal.writeln('\x1b[90mRespawn loop enabled. Claude will auto-restart when idle.\x1b[0m');
-    } else {
-      this.terminal.writeln('\x1b[90mType your prompts directly. Session persists even if you close the browser.\x1b[0m');
+    this.terminal.writeln('\x1b[1;32m Starting session with respawn...\x1b[0m');
+    if (durationMinutes) {
+      this.terminal.writeln(`\x1b[90m Duration: ${durationMinutes} minutes\x1b[0m`);
     }
     this.terminal.writeln('');
 
@@ -849,47 +772,28 @@ class ClaudemanApp {
         body: JSON.stringify({ workingDir: dir || undefined })
       });
       const createData = await createRes.json();
-      if (!createData.success) {
-        throw new Error(createData.error);
-      }
+      if (!createData.success) throw new Error(createData.error);
 
       const sessionId = createData.session.id;
       this.activeSessionId = sessionId;
 
-      // Get respawn config from UI
-      const respawnConfig = respawnEnabled ? {
-        enabled: true,
-        updatePrompt: document.getElementById('respawnPrompt').value || 'update all the docs and CLAUDE.md',
-        idleTimeoutMs: (parseInt(document.getElementById('respawnIdleTimeout').value) || 5) * 1000,
-        interStepDelayMs: (parseInt(document.getElementById('respawnStepDelay').value) || 1) * 1000,
-      } : null;
+      // Start interactive with respawn
+      await fetch(`/api/sessions/${sessionId}/interactive-respawn`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ respawnConfig, durationMinutes })
+      });
 
-      // Start interactive mode with respawn
-      let interactiveRes;
-      if (respawnConfig) {
-        interactiveRes = await fetch(`/api/sessions/${sessionId}/interactive-respawn`, {
+      // Set auto-clear if enabled
+      if (autoClearEnabled) {
+        await fetch(`/api/sessions/${sessionId}/auto-clear`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ respawnConfig })
-        });
-      } else {
-        interactiveRes = await fetch(`/api/sessions/${sessionId}/interactive`, {
-          method: 'POST'
+          body: JSON.stringify({ enabled: true, threshold: autoClearThreshold })
         });
       }
 
-      const interactiveData = await interactiveRes.json();
-      if (!interactiveData.success) {
-        throw new Error(interactiveData.error);
-      }
-
-      this.terminal.writeln(`\x1b[1;32m► Connected to session ${sessionId.slice(0, 8)}\x1b[0m`);
-      if (respawnConfig) {
-        this.terminal.writeln(`\x1b[90m  Respawn: ${respawnConfig.updatePrompt.substring(0, 40)}...\x1b[0m`);
-      }
-      this.terminal.writeln('');
-
-      // Send initial resize
+      // Send resize
       const dims = this.fitAddon.proposeDimensions();
       if (dims) {
         await fetch(`/api/sessions/${sessionId}/resize`, {
@@ -899,163 +803,193 @@ class ClaudemanApp {
         });
       }
 
-      // Focus the terminal
       this.terminal.focus();
-
     } catch (err) {
-      this.terminal.writeln(`\x1b[1;31m❌ Error: ${err.message}\x1b[0m`);
-      this.activeSessionId = null;
+      this.terminal.writeln(`\x1b[1;31m Error: ${err.message}\x1b[0m`);
     }
   }
 
-  // Respawn controls
-  toggleRespawnDetails() {
-    const details = document.getElementById('respawnDetails');
-    details.style.display = details.style.display === 'none' ? 'block' : 'none';
+  async enableRespawnOnCurrent() {
+    if (!this.activeSessionId) {
+      this.showToast('No active session', 'warning');
+      return;
+    }
+
+    this.toggleRespawnPanel();
+
+    const { respawnConfig, durationMinutes, autoClearEnabled, autoClearThreshold } = this.getRespawnConfig();
+
+    try {
+      // Enable respawn on existing session
+      const res = await fetch(`/api/sessions/${this.activeSessionId}/respawn/enable`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ config: respawnConfig, durationMinutes })
+      });
+      const data = await res.json();
+      if (data.error) throw new Error(data.error);
+
+      // Set auto-clear if enabled
+      if (autoClearEnabled) {
+        await fetch(`/api/sessions/${this.activeSessionId}/auto-clear`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ enabled: true, threshold: autoClearThreshold })
+        });
+      }
+
+      this.showToast('Respawn enabled on current session', 'success');
+      this.terminal.focus();
+    } catch (err) {
+      this.showToast('Failed to enable respawn: ' + err.message, 'error');
+    }
   }
 
   showRespawnBanner() {
     document.getElementById('respawnBanner').style.display = 'flex';
+    // Also show timer if there's a timed respawn
+    if (this.activeSessionId && this.respawnTimers[this.activeSessionId]) {
+      this.showRespawnTimer();
+    }
+    // Show tokens if session has token data
+    const session = this.sessions.get(this.activeSessionId);
+    if (session && session.tokens) {
+      this.updateRespawnTokens(session.tokens.total);
+    }
   }
 
   hideRespawnBanner() {
     document.getElementById('respawnBanner').style.display = 'none';
+    this.hideRespawnTimer();
   }
 
   updateRespawnBanner(state) {
-    const stateEl = document.getElementById('respawnState');
-    stateEl.textContent = state.replace(/_/g, ' ');
+    document.getElementById('respawnState').textContent = state.replace(/_/g, ' ');
+  }
 
-    // Update indicator animation based on state
-    const indicator = document.querySelector('.respawn-indicator');
-    if (state === 'watching') {
-      indicator.style.animationPlayState = 'paused';
-    } else {
-      indicator.style.animationPlayState = 'running';
+  showRespawnTimer() {
+    const timerEl = document.getElementById('respawnTimer');
+    timerEl.style.display = '';
+    this.updateRespawnTimer();
+    // Update every second
+    if (this.respawnTimerInterval) clearInterval(this.respawnTimerInterval);
+    this.respawnTimerInterval = setInterval(() => this.updateRespawnTimer(), 1000);
+  }
+
+  hideRespawnTimer() {
+    document.getElementById('respawnTimer').style.display = 'none';
+    if (this.respawnTimerInterval) {
+      clearInterval(this.respawnTimerInterval);
+      this.respawnTimerInterval = null;
     }
   }
 
-  async toggleRespawn() {
-    if (!this.activeSessionId) return;
+  updateRespawnTimer() {
+    if (!this.activeSessionId || !this.respawnTimers[this.activeSessionId]) {
+      this.hideRespawnTimer();
+      return;
+    }
 
-    const status = this.respawnStatus[this.activeSessionId];
-    if (!status) return;
+    const timer = this.respawnTimers[this.activeSessionId];
+    const now = Date.now();
+    const remaining = Math.max(0, timer.endAt - now);
 
-    // TODO: Add pause/resume endpoints if needed
-    this.terminal.writeln('\x1b[90mRespawn toggle not yet implemented\x1b[0m');
+    if (remaining <= 0) {
+      document.getElementById('respawnTimer').textContent = 'Time up';
+      delete this.respawnTimers[this.activeSessionId];
+      this.hideRespawnTimer();
+      return;
+    }
+
+    document.getElementById('respawnTimer').textContent = this.formatTime(remaining);
+  }
+
+  updateRespawnTokens(totalTokens) {
+    const tokensEl = document.getElementById('respawnTokens');
+    if (totalTokens > 0) {
+      tokensEl.style.display = '';
+      tokensEl.textContent = `${(totalTokens / 1000).toFixed(1)}k tokens`;
+    } else {
+      tokensEl.style.display = 'none';
+    }
   }
 
   async stopRespawn() {
     if (!this.activeSessionId) return;
+    try {
+      await fetch(`/api/sessions/${this.activeSessionId}/respawn/stop`, { method: 'POST' });
+      delete this.respawnTimers[this.activeSessionId];
+    } catch (err) {
+      this.showToast('Failed to stop respawn', 'error');
+    }
+  }
+
+  // ========== Kill Sessions ==========
+
+  async killActiveSession() {
+    if (!this.activeSessionId) {
+      this.showToast('No active session', 'warning');
+      return;
+    }
+    await this.closeSession(this.activeSessionId);
+  }
+
+  async killAllSessions() {
+    if (this.sessions.size === 0) return;
+
+    if (!confirm(`Kill all ${this.sessions.size} session(s)?`)) return;
 
     try {
-      const res = await fetch(`/api/sessions/${this.activeSessionId}/respawn/stop`, {
-        method: 'POST'
-      });
-      const data = await res.json();
-      if (!data.success) {
-        throw new Error(data.error || 'Failed to stop respawn');
-      }
+      await fetch('/api/sessions', { method: 'DELETE' });
+      this.sessions.clear();
+      this.terminalBuffers.clear();
+      this.activeSessionId = null;
+      this.respawnStatus = {};
+      this.hideRespawnBanner();
+      this.renderSessionTabs();
+      this.terminal.clear();
+      this.showWelcome();
+      this.showToast('All sessions killed', 'success');
     } catch (err) {
-      this.terminal.writeln(`\x1b[1;31m❌ Error stopping respawn: ${err.message}\x1b[0m`);
+      this.showToast('Failed to kill sessions', 'error');
     }
   }
 
-  async startRespawnForSession(sessionId) {
-    const respawnConfig = {
-      enabled: true,
-      updatePrompt: document.getElementById('respawnPrompt').value || 'update all the docs and CLAUDE.md',
-      idleTimeoutMs: (parseInt(document.getElementById('respawnIdleTimeout').value) || 5) * 1000,
-      interStepDelayMs: (parseInt(document.getElementById('respawnStepDelay').value) || 1) * 1000,
-    };
+  // ========== Terminal Controls ==========
 
-    try {
-      const res = await fetch(`/api/sessions/${sessionId}/respawn/start`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(respawnConfig)
-      });
-      const data = await res.json();
-      if (!data.success) {
-        throw new Error(data.error || 'Failed to start respawn');
-      }
-      this.terminal.writeln(`\x1b[1;32m🔄 Respawn started for session ${sessionId.slice(0, 8)}\x1b[0m`);
-    } catch (err) {
-      this.terminal.writeln(`\x1b[1;31m❌ Error starting respawn: ${err.message}\x1b[0m`);
-    }
-  }
-
-  async stopCurrentRun() {
-    if (!this.currentRun) return;
-
-    try {
-      await fetch(`/api/scheduled/${this.currentRun.id}`, {
-        method: 'DELETE'
-      });
-    } catch (err) {
-      alert('Error stopping run: ' + err.message);
-    }
-  }
-
-  setRunning(running) {
-    const btn = document.getElementById('runBtn');
-    if (running) {
-      btn.disabled = true;
-      btn.innerHTML = '<span class="loading"></span> Running...';
-    } else {
-      btn.disabled = false;
-      btn.innerHTML = '<span class="btn-icon">▶</span> Run';
-    }
-  }
-
-  // Terminal
   clearTerminal() {
     this.terminal.clear();
-    this.terminal.writeln('\x1b[90mTerminal cleared\x1b[0m');
   }
 
-  // Copy terminal contents to clipboard
   async copyTerminal() {
     try {
-      // Get all text from terminal
       const buffer = this.terminal.buffer.active;
       let text = '';
       for (let i = 0; i < buffer.length; i++) {
         const line = buffer.getLine(i);
-        if (line) {
-          text += line.translateToString(true) + '\n';
-        }
+        if (line) text += line.translateToString(true) + '\n';
       }
-
-      // Strip trailing empty lines
-      text = text.replace(/\n+$/, '\n');
-
-      await navigator.clipboard.writeText(text);
-      this.showToast('Terminal output copied to clipboard', 'success');
+      await navigator.clipboard.writeText(text.replace(/\n+$/, '\n'));
+      this.showToast('Copied to clipboard', 'success');
     } catch (err) {
-      this.showToast('Failed to copy: ' + err.message, 'error');
+      this.showToast('Failed to copy', 'error');
     }
   }
 
-  // Font size controls
   increaseFontSize() {
     const current = this.terminal.options.fontSize || 14;
-    const newSize = Math.min(current + 2, 24);
-    this.setFontSize(newSize);
+    this.setFontSize(Math.min(current + 2, 24));
   }
 
   decreaseFontSize() {
     const current = this.terminal.options.fontSize || 14;
-    const newSize = Math.max(current - 2, 10);
-    this.setFontSize(newSize);
+    this.setFontSize(Math.max(current - 2, 10));
   }
 
   setFontSize(size) {
     this.terminal.options.fontSize = size;
-    document.getElementById('fontSizeDisplay').textContent = `${size}px`;
+    document.getElementById('fontSizeDisplay').textContent = size;
     this.fitAddon.fit();
-
-    // Save preference
     localStorage.setItem('claudeman-font-size', size);
   }
 
@@ -1065,33 +999,29 @@ class ClaudemanApp {
       const size = parseInt(saved, 10);
       if (size >= 10 && size <= 24) {
         this.terminal.options.fontSize = size;
-        document.getElementById('fontSizeDisplay').textContent = `${size}px`;
+        document.getElementById('fontSizeDisplay').textContent = size;
       }
     }
   }
 
-  // Timer
+  // ========== Timer ==========
+
   showTimer() {
-    document.getElementById('timerBanner').style.display = 'block';
-    // Set started time
-    if (this.currentRun && this.currentRun.startedAt) {
-      const startDate = new Date(this.currentRun.startedAt);
-      const timeStr = startDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-      document.getElementById('timerStarted').textContent = `Started: ${timeStr}`;
-    }
+    document.getElementById('timerBanner').style.display = 'flex';
     this.updateTimer();
+    this.timerInterval = setInterval(() => this.updateTimer(), 1000);
   }
 
   hideTimer() {
     document.getElementById('timerBanner').style.display = 'none';
-    this.currentRun = null;
+    if (this.timerInterval) {
+      clearInterval(this.timerInterval);
+      this.timerInterval = null;
+    }
   }
 
   updateTimer() {
-    if (!this.currentRun || this.currentRun.status !== 'running') {
-      this.updatePageTitle();
-      return;
-    }
+    if (!this.currentRun || this.currentRun.status !== 'running') return;
 
     const now = Date.now();
     const remaining = Math.max(0, this.currentRun.endAt - now);
@@ -1101,282 +1031,157 @@ class ClaudemanApp {
 
     document.getElementById('timerValue').textContent = this.formatTime(remaining);
     document.getElementById('timerProgress').style.width = `${percent}%`;
-    document.getElementById('timerTasks').textContent = `${this.currentRun.completedTasks} tasks completed`;
-    document.getElementById('timerCost').textContent = `$${this.currentRun.totalCost.toFixed(4)}`;
-
-    // Update page title with timer
-    document.title = `${this.formatTime(remaining)} - Claudeman`;
+    document.getElementById('timerMeta').textContent =
+      `${this.currentRun.completedTasks} tasks | $${this.currentRun.totalCost.toFixed(2)}`;
   }
 
-  // Update page title based on current state
-  updatePageTitle() {
-    const sessionCount = this.sessions.size;
-    const hasRespawn = Object.values(this.respawnStatus).some(s => s.state !== 'stopped');
-
-    if (this.currentRun && this.currentRun.status === 'running') {
-      // Title updated by updateTimer()
-      return;
-    } else if (hasRespawn) {
-      document.title = `🔄 Respawning - Claudeman`;
-    } else if (sessionCount > 0) {
-      document.title = `(${sessionCount}) Claudeman`;
-    } else {
-      document.title = 'Claudeman';
+  async stopCurrentRun() {
+    if (!this.currentRun) return;
+    try {
+      await fetch(`/api/scheduled/${this.currentRun.id}`, { method: 'DELETE' });
+    } catch (err) {
+      this.showToast('Failed to stop run', 'error');
     }
   }
 
-  startTimerUpdates() {
-    setInterval(() => this.updateTimer(), 1000);
-    // Also update session durations every 30 seconds
-    setInterval(() => this.renderSessions(), 30000);
-  }
-
   formatTime(ms) {
-    const totalSeconds = Math.floor(ms / 1000);
-    const hours = Math.floor(totalSeconds / 3600);
-    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    const seconds = totalSeconds % 60;
-
-    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    const s = Math.floor(ms / 1000);
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    const sec = s % 60;
+    return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
   }
 
-  // Stats
-  updateStats() {
-    // Calculate total cost from sessions and total cost tracker
-    let sessionsCost = 0;
-    this.sessions.forEach(s => {
-      sessionsCost += s.totalCost || 0;
-    });
-    const displayCost = Math.max(this.totalCost, sessionsCost);
+  // ========== Cost ==========
 
-    document.getElementById('statSessions').textContent = this.sessions.size;
-    document.getElementById('statCost').textContent = `$${displayCost.toFixed(2)}`;
-    document.getElementById('statTasks').textContent = this.totalTasks;
+  updateCost() {
+    let cost = this.totalCost;
+    this.sessions.forEach(s => cost = Math.max(cost, s.totalCost || 0));
+    document.getElementById('headerCost').textContent = `$${cost.toFixed(2)}`;
   }
 
-  // Sessions
-  toggleSessions() {
-    const panel = document.getElementById('sessionsPanel');
-    panel.classList.toggle('collapsed');
-    this.sessionsCollapsed = panel.classList.contains('collapsed');
+  // ========== Help Modal ==========
+
+  showHelp() {
+    document.getElementById('helpModal').classList.add('active');
   }
 
-  renderSessions() {
-    const count = this.sessions.size;
-    document.getElementById('sessionCount').textContent = count;
-    this.updatePageTitle();
+  closeHelp() {
+    document.getElementById('helpModal').classList.remove('active');
+  }
 
-    const list = document.getElementById('sessionsList');
+  closeAllPanels() {
+    document.getElementById('respawnPanel').classList.remove('open');
+    document.getElementById('newSessionPanel').classList.remove('open');
+    document.getElementById('taskPanel').classList.remove('open');
+  }
 
-    if (count === 0) {
-      list.innerHTML = '<div style="padding: 1rem; color: var(--text-muted);">No active sessions</div>';
+  // ========== Task Panel ==========
+
+  toggleTaskPanel() {
+    const panel = document.getElementById('taskPanel');
+    panel.classList.toggle('open');
+    if (panel.classList.contains('open')) {
+      this.renderTaskPanel();
+    }
+  }
+
+  renderTaskPanel() {
+    const session = this.sessions.get(this.activeSessionId);
+    const body = document.getElementById('taskPanelBody');
+    const stats = document.getElementById('taskPanelStats');
+
+    if (!session || !session.taskTree || session.taskTree.length === 0) {
+      body.innerHTML = '<div class="task-empty">No background tasks</div>';
+      stats.textContent = '0 tasks';
       return;
     }
 
-    list.innerHTML = Array.from(this.sessions.values()).map(s => {
-      const respawn = this.respawnStatus[s.id];
-      const respawnHtml = respawn ? `
-        <div class="session-respawn">
-          <span class="session-respawn-dot ${respawn.state === 'stopped' ? 'stopped' : ''}"></span>
-          <span class="session-respawn-state">${respawn.state.replace(/_/g, ' ')}</span>
-          <span class="session-respawn-actions">
-            <button class="btn btn-sm" onclick="event.stopPropagation(); app.stopRespawnForSession('${s.id}')">Stop</button>
-          </span>
-        </div>
-      ` : `
-        <div class="session-respawn">
-          <span class="session-respawn-dot stopped"></span>
-          <span class="session-respawn-state">No respawn</span>
-          <span class="session-respawn-actions">
-            <button class="btn btn-sm" onclick="event.stopPropagation(); app.startRespawnForSession('${s.id}')">Start</button>
-          </span>
-        </div>
-      `;
+    const taskStats = session.taskStats || { running: 0, completed: 0, failed: 0, total: 0 };
+    stats.textContent = `${taskStats.running} running, ${taskStats.completed} done`;
 
-      // Resource usage display
-      const bufferStats = s.bufferStats || {};
-      const terminalSize = bufferStats.terminalBufferSize || 0;
-      const textSize = bufferStats.textOutputSize || 0;
-      const msgCount = bufferStats.messageCount || 0;
-      const totalMemory = terminalSize + textSize;
+    // Render task tree recursively
+    const renderTask = (task, allTasks) => {
+      const statusIcon = task.status === 'running' ? '' :
+                        task.status === 'completed' ? '&#x2713;' : '&#x2717;';
+      const duration = task.endTime
+        ? `${((task.endTime - task.startTime) / 1000).toFixed(1)}s`
+        : `${((Date.now() - task.startTime) / 1000).toFixed(0)}s...`;
 
-      // Color coding based on usage
-      const memoryPercent = bufferStats.maxTerminalBuffer ?
-        (terminalSize / bufferStats.maxTerminalBuffer * 100) : 0;
-      const memoryClass = memoryPercent > 80 ? 'high' : memoryPercent > 50 ? 'medium' : 'low';
-
-      // Session duration
-      const duration = this.formatDuration(Date.now() - s.createdAt);
-
-      const resourceHtml = `
-        <div class="session-resources">
-          <div class="resource-item">
-            <span class="resource-label">⏱</span>
-            <span class="resource-value">${duration}</span>
-          </div>
-          <div class="resource-item">
-            <span class="resource-label">Memory:</span>
-            <span class="resource-value ${memoryClass}">${this.formatBytes(totalMemory)}</span>
-          </div>
-          <div class="resource-item">
-            <span class="resource-label">Messages:</span>
-            <span class="resource-value">${msgCount}</span>
-          </div>
-        </div>
-      `;
-
-      // Extract short working directory name
-      const workingDir = s.workingDir || '';
-      const shortDir = workingDir.split('/').pop() || workingDir;
+      let childrenHtml = '';
+      if (task.children && task.children.length > 0) {
+        childrenHtml = '<div class="task-children">';
+        for (const childId of task.children) {
+          // Find child task in allTasks map
+          const childTask = allTasks.find(t => t.id === childId);
+          if (childTask) {
+            childrenHtml += `<div class="task-node">${renderTask(childTask, allTasks)}</div>`;
+          }
+        }
+        childrenHtml += '</div>';
+      }
 
       return `
-        <div class="session-card ${this.activeSessionId === s.id ? 'active' : ''}" data-session="${s.id}" onclick="app.selectSession('${s.id}')">
-          <div class="session-card-header">
-            <div class="session-status">
-              <span class="session-status-dot ${s.status}"></span>
-              <span>${s.id.slice(0, 8)}</span>
-              ${shortDir ? `<span class="session-dir" title="${this.escapeHtml(workingDir)}">${this.escapeHtml(shortDir)}</span>` : ''}
-            </div>
-            <div class="session-actions">
-              <span class="session-cost">$${(s.totalCost || 0).toFixed(4)}</span>
-              <button class="btn btn-xs btn-danger" onclick="event.stopPropagation(); app.deleteSession('${s.id}')" title="Kill session">✕</button>
+        <div class="task-item">
+          <span class="task-status-icon ${task.status}">${statusIcon}</span>
+          <div class="task-info">
+            <div class="task-description">${this.escapeHtml(task.description)}</div>
+            <div class="task-meta">
+              <span class="task-type">${task.subagentType}</span>
+              <span>${duration}</span>
             </div>
           </div>
-          ${resourceHtml}
-          ${respawnHtml}
         </div>
+        ${childrenHtml}
       `;
-    }).join('');
-  }
+    };
 
-  // Select a session to view its terminal
-  selectSession(sessionId) {
-    this.activeSessionId = sessionId;
-    this.renderSessions();
+    // Flatten all tasks for lookup
+    const allTasks = this.flattenTaskTree(session.taskTree);
 
-    // Load the session's terminal buffer
-    this.loadSessionTerminal(sessionId);
-  }
-
-  // Load terminal buffer for a session
-  async loadSessionTerminal(sessionId) {
-    try {
-      const res = await fetch(`/api/sessions/${sessionId}/terminal`);
-      const data = await res.json();
-      if (data.terminalBuffer) {
-        this.terminal.clear();
-        this.terminal.writeln(`\x1b[90m--- Session ${sessionId.slice(0, 8)} terminal ---\x1b[0m`);
-        this.terminal.write(data.terminalBuffer);
-      }
-    } catch (err) {
-      console.error('Failed to load terminal buffer:', err);
+    // Render only root tasks (those without parents or with null parentId)
+    let html = '<div class="task-tree">';
+    for (const task of session.taskTree) {
+      html += `<div class="task-node">${renderTask(task, allTasks)}</div>`;
     }
+    html += '</div>';
+
+    body.innerHTML = html;
   }
 
-  async stopRespawnForSession(sessionId) {
-    try {
-      const res = await fetch(`/api/sessions/${sessionId}/respawn/stop`, {
-        method: 'POST'
-      });
-      const data = await res.json();
-      if (!data.success) {
-        throw new Error(data.error || 'Failed to stop respawn');
-      }
-    } catch (err) {
-      this.terminal.writeln(`\x1b[1;31m❌ Error stopping respawn: ${err.message}\x1b[0m`);
+  flattenTaskTree(tasks, result = []) {
+    for (const task of tasks) {
+      result.push(task);
+      // Children are stored as IDs, not nested objects in taskTree
+      // The task tree from server already has the structure we need
     }
+    return result;
   }
 
-  // Kill all sessions
-  async killAllSessions() {
-    const count = this.sessions.size;
-    if (count === 0) {
-      this.terminal.writeln('\x1b[90mNo sessions to kill\x1b[0m');
-      return;
+  // ========== Toast ==========
+
+  showToast(message, type = 'info') {
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+    toast.textContent = message;
+
+    let container = document.querySelector('.toast-container');
+    if (!container) {
+      container = document.createElement('div');
+      container.className = 'toast-container';
+      document.body.appendChild(container);
     }
+    container.appendChild(toast);
 
-    if (!confirm(`Kill all ${count} session(s)? This will stop all running Claude processes.`)) {
-      return;
-    }
+    requestAnimationFrame(() => toast.classList.add('show'));
 
-    this.terminal.writeln(`\x1b[1;33m⚠ Killing ${count} session(s)...\x1b[0m`);
-
-    try {
-      const res = await fetch('/api/sessions', {
-        method: 'DELETE'
-      });
-      const data = await res.json();
-      if (data.success) {
-        this.terminal.writeln(`\x1b[1;32m✓ Killed ${data.data.killed} session(s)\x1b[0m`);
-        this.sessions.clear();
-        this.activeSessionId = null;
-        this.respawnStatus = {};
-        this.hideRespawnBanner();
-        this.renderSessions();
-      } else {
-        throw new Error(data.error);
-      }
-    } catch (err) {
-      this.terminal.writeln(`\x1b[1;31m❌ Error: ${err.message}\x1b[0m`);
-    }
+    setTimeout(() => {
+      toast.classList.remove('show');
+      setTimeout(() => toast.remove(), 200);
+    }, 3000);
   }
 
-  // Kill a single session
-  async deleteSession(sessionId) {
-    if (!confirm(`Kill session ${sessionId.slice(0, 8)}?`)) {
-      return;
-    }
-
-    try {
-      const res = await fetch(`/api/sessions/${sessionId}`, {
-        method: 'DELETE'
-      });
-      const data = await res.json();
-      if (data.success) {
-        this.terminal.writeln(`\x1b[1;32m✓ Session ${sessionId.slice(0, 8)} killed\x1b[0m`);
-        this.sessions.delete(sessionId);
-        if (this.activeSessionId === sessionId) {
-          this.activeSessionId = null;
-        }
-        delete this.respawnStatus[sessionId];
-        this.renderSessions();
-      } else {
-        throw new Error(data.error);
-      }
-    } catch (err) {
-      this.terminal.writeln(`\x1b[1;31m❌ Error: ${err.message}\x1b[0m`);
-    }
-  }
-
-  // Format bytes for display
-  formatBytes(bytes) {
-    if (bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-  }
-
-  // Format duration in human-readable format
-  formatDuration(ms) {
-    const seconds = Math.floor(ms / 1000);
-    if (seconds < 60) return `${seconds}s`;
-
-    const minutes = Math.floor(seconds / 60);
-    if (minutes < 60) return `${minutes}m`;
-
-    const hours = Math.floor(minutes / 60);
-    const remainingMinutes = minutes % 60;
-    if (hours < 24) return `${hours}h ${remainingMinutes}m`;
-
-    const days = Math.floor(hours / 24);
-    const remainingHours = hours % 24;
-    return `${days}d ${remainingHours}h`;
-  }
-
-  updateSessionOutput(sessionId, text) {
-    // Sessions list shows brief info, main terminal shows full output
-  }
+  // ========== Utility ==========
 
   escapeHtml(text) {
     if (!text) return '';
diff --git a/src/web/public/index.html b/src/web/public/index.html
index 46174e88..9a28e147 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -14,278 +14,195 @@
 </head>
 <body>
   <div class="app">
-    <!-- Header -->
+    <!-- Compact Header with Session Tabs -->
     <header class="header">
-      <div class="header-left">
-        <h1 class="logo">⚡ Claudeman</h1>
-        <div class="connection-status" id="connectionStatus">
-          <span class="status-dot"></span>
-          <span>Connecting</span>
+      <div class="header-brand">
+        <span class="logo">Claudeman</span>
+      </div>
+
+      <!-- Session Tabs -->
+      <div class="session-tabs" id="sessionTabs">
+        <div class="session-tab new-tab" onclick="app.createNewSession()" title="New Session (Ctrl+N)">
+          <span>+</span>
         </div>
       </div>
-      <div class="header-stats">
-        <div class="stat-item">
-          <span class="stat-value" id="statSessions">0</span>
-          <span class="stat-label">Sessions</span>
-        </div>
-        <div class="stat-item">
-          <span class="stat-value" id="statCost">$0.00</span>
-          <span class="stat-label">Total Cost</span>
-        </div>
-        <div class="stat-item">
-          <span class="stat-value" id="statTasks">0</span>
-          <span class="stat-label">Tasks Done</span>
+
+      <div class="header-right">
+        <div class="connection-status" id="connectionStatus">
+          <span class="status-dot"></span>
+          <span class="status-text">Connecting</span>
         </div>
+        <div class="header-cost" id="headerCost">$0.00</div>
       </div>
     </header>
 
     <!-- Timer Banner (shown when timed run is active) -->
     <div class="timer-banner" id="timerBanner" style="display: none;">
-      <div class="timer-info">
-        <span class="timer-label">Time Remaining</span>
+      <div class="timer-content">
         <span class="timer-value" id="timerValue">00:00:00</span>
+        <div class="timer-progress"><div class="timer-progress-fill" id="timerProgress"></div></div>
+        <span class="timer-meta" id="timerMeta">0 tasks | $0.00</span>
       </div>
-      <div class="timer-progress">
-        <div class="timer-progress-fill" id="timerProgress"></div>
-      </div>
-      <div class="timer-meta">
-        <span id="timerStarted" class="timer-started">Started: --:--</span>
-        <span id="timerTasks">0 tasks completed</span>
-        <span id="timerCost">$0.00</span>
-        <button class="btn btn-sm btn-danger" onclick="app.stopCurrentRun()">Stop</button>
-      </div>
+      <button class="btn-icon-only" onclick="app.stopCurrentRun()" title="Stop">&#x25A0;</button>
     </div>
 
-    <!-- Respawn Banner (shown when respawn loop is active) -->
+    <!-- Respawn Banner -->
     <div class="respawn-banner" id="respawnBanner" style="display: none;">
-      <div class="respawn-status-info">
-        <span class="respawn-indicator">🔄</span>
-        <span class="respawn-state" id="respawnState">Watching</span>
-        <span class="respawn-cycles">Cycle: <span id="respawnCycleCount">0</span></span>
-      </div>
-      <div class="respawn-step" id="respawnStep"></div>
-      <div class="respawn-actions">
-        <button class="btn btn-sm" onclick="app.toggleRespawn()">
-          <span id="respawnToggleText">Pause</span>
-        </button>
-        <button class="btn btn-sm btn-danger" onclick="app.stopRespawn()">Stop</button>
-      </div>
+      <span class="respawn-indicator">&#x21BB;</span>
+      <span class="respawn-state" id="respawnState">Watching</span>
+      <span class="respawn-cycles">Cycle <span id="respawnCycleCount">0</span></span>
+      <span class="respawn-timer" id="respawnTimer" style="display: none;"></span>
+      <span class="respawn-tokens" id="respawnTokens" style="display: none;"></span>
+      <span class="respawn-step" id="respawnStep"></span>
+      <button class="btn-icon-only" onclick="app.stopRespawn()" title="Stop Respawn">&#x25A0;</button>
     </div>
 
-    <!-- Main Content -->
+    <!-- Main Terminal Area -->
     <main class="main">
-      <!-- Control Panel -->
-      <section class="control-panel">
-        <!-- Tabs -->
-        <div class="tabs">
-          <button class="tab active" data-tab="run" onclick="app.switchTab('run')">Run</button>
-          <button class="tab" data-tab="cases" onclick="app.switchTab('cases')">Cases</button>
-          <button class="tab" data-tab="settings" onclick="app.switchTab('settings')">Settings</button>
-        </div>
-
-        <!-- Run Tab -->
-        <div class="tab-content active" id="tab-run">
-          <!-- Quick Start Section -->
-          <div class="quick-start-section">
-            <div class="quick-start-header">
-              <span class="quick-start-icon">&#9889;</span>
-              <span class="quick-start-title">Quick Start</span>
-            </div>
-            <div class="quick-start-controls">
-              <select id="quickStartCase" class="quick-start-select">
-                <option value="testcase">testcase (default)</option>
-              </select>
-              <button class="btn btn-quick-start" onclick="app.quickStart()">
-                <span class="btn-icon">&#9889;</span>
-                Quick Start
-              </button>
-            </div>
-            <p class="quick-start-hint">Start an interactive Claude session in one click</p>
-          </div>
-
-          <div class="section-divider">
-            <span>or configure a custom run</span>
-          </div>
-
-          <div class="form-group">
-            <label>Prompt</label>
-            <textarea id="promptInput" placeholder="What should Claude do?" rows="6"></textarea>
-          </div>
-
-          <div class="form-group">
-            <label>Working Directory</label>
-            <div class="input-with-button">
-              <input type="text" id="dirInput" placeholder="Current directory">
-              <button class="btn btn-sm" onclick="app.selectCase()">Select Case</button>
-            </div>
-          </div>
-
-          <div class="form-row">
-            <div class="form-group">
-              <label>Duration</label>
-              <select id="durationSelect">
-                <option value="0">Single run</option>
-                <option value="5">5 minutes</option>
-                <option value="15">15 minutes</option>
-                <option value="30">30 minutes</option>
-                <option value="60">1 hour</option>
-                <option value="120">2 hours</option>
-                <option value="240">4 hours</option>
-                <option value="480">8 hours</option>
-                <option value="720">12 hours</option>
-                <option value="custom">Custom...</option>
-              </select>
-            </div>
-            <div class="form-group" id="customDurationGroup" style="display: none;">
-              <label>Minutes</label>
-              <input type="number" id="customDuration" value="60" min="1" max="1440">
-            </div>
-          </div>
-
-          <!-- Respawn Settings (for Interactive Sessions) -->
-          <div class="respawn-settings" id="respawnSettings">
-            <div class="respawn-header">
-              <label>
-                <input type="checkbox" id="respawnEnabled">
-                Enable Auto-Respawn Loop
-              </label>
-              <button class="btn btn-sm" onclick="app.toggleRespawnDetails()">⚙️</button>
-            </div>
-            <div class="respawn-details" id="respawnDetails" style="display: none;">
-              <div class="form-group">
-                <label>Update Prompt</label>
-                <input type="text" id="respawnPrompt" value="update all the docs and CLAUDE.md">
-              </div>
-              <div class="form-row">
-                <div class="form-group">
-                  <label>Idle Timeout (sec)</label>
-                  <input type="number" id="respawnIdleTimeout" value="5" min="1" max="60">
-                </div>
-                <div class="form-group">
-                  <label>Step Delay (sec)</label>
-                  <input type="number" id="respawnStepDelay" value="1" min="0" max="10">
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-actions">
-            <button class="btn btn-primary btn-large" id="runBtn" onclick="app.startRun()">
-              <span class="btn-icon">▶</span>
-              Run Prompt
-            </button>
-            <button class="btn btn-large" id="interactiveBtn" onclick="app.startInteractive()" style="background: #22c55e;">
-              <span class="btn-icon">💻</span>
-              Interactive Session
-            </button>
-          </div>
-        </div>
-
-        <!-- Cases Tab -->
-        <div class="tab-content" id="tab-cases">
-          <div class="section-header">
-            <h3>Your Cases</h3>
-            <button class="btn btn-sm btn-primary" onclick="app.showCreateCase()">+ New Case</button>
-          </div>
-
-          <div class="cases-list" id="casesList">
-            <p class="empty-state">Loading cases...</p>
-          </div>
-
-          <!-- Create Case Form (hidden by default) -->
-          <div class="create-case-form" id="createCaseForm" style="display: none;">
-            <h4>Create New Case</h4>
-            <div class="form-group">
-              <label>Case Name</label>
-              <input type="text" id="caseNameInput" placeholder="my-project">
-              <span class="form-hint">Letters, numbers, hyphens, underscores only</span>
-            </div>
-            <div class="form-group">
-              <label>Description</label>
-              <input type="text" id="caseDescInput" placeholder="Project description (optional)">
-            </div>
-            <div class="form-actions">
-              <button class="btn btn-sm" onclick="app.hideCreateCase()">Cancel</button>
-              <button class="btn btn-sm btn-primary" onclick="app.createCase()">Create</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Settings Tab -->
-        <div class="tab-content" id="tab-settings">
-          <div class="form-group">
-            <label>Default Directory</label>
-            <input type="text" id="defaultDirInput" placeholder="~/projects">
-          </div>
-          <div class="form-group">
-            <label>
-              <input type="checkbox" id="autoScrollOutput" checked>
-              Auto-scroll output
-            </label>
-          </div>
-          <div class="form-group">
-            <label>
-              <input type="checkbox" id="soundOnComplete">
-              Sound on completion
-            </label>
-          </div>
-          <div class="form-actions">
-            <button class="btn btn-sm btn-primary" onclick="app.saveSettings()">Save Settings</button>
-          </div>
-        </div>
-      </section>
-
-      <!-- Terminal Panel -->
-      <section class="output-panel">
-        <div class="output-header">
-          <h2>Terminal</h2>
-          <div class="output-actions">
-            <div class="font-controls">
-              <button class="btn btn-xs" onclick="app.decreaseFontSize()" title="Decrease font size (Ctrl+-)">A-</button>
-              <span class="font-size-display" id="fontSizeDisplay">14px</span>
-              <button class="btn btn-xs" onclick="app.increaseFontSize()" title="Increase font size (Ctrl+=)">A+</button>
-            </div>
-            <button class="btn btn-sm" onclick="app.copyTerminal()" title="Copy terminal output">Copy</button>
-            <button class="btn btn-sm" onclick="app.clearTerminal()">Clear</button>
-          </div>
-        </div>
-
-        <div class="terminal-container" id="terminalContainer"></div>
-      </section>
+      <div class="terminal-container" id="terminalContainer"></div>
     </main>
 
-    <!-- Sessions Panel (collapsible) -->
-    <aside class="sessions-panel" id="sessionsPanel">
-      <div class="sessions-header">
-        <div class="sessions-header-left" onclick="app.toggleSessions()">
-          <h3>Sessions <span class="session-count" id="sessionCount">0</span></h3>
-          <span class="toggle-icon" id="toggleIcon">▼</span>
+    <!-- Bottom Toolbar -->
+    <footer class="toolbar">
+      <div class="toolbar-left">
+        <!-- Quick Start -->
+        <div class="toolbar-group">
+          <button class="btn-toolbar btn-primary" onclick="app.quickStart()" title="Quick Start (Ctrl+Enter)">
+            Quick Start
+          </button>
+          <select id="quickStartCase" class="toolbar-select" title="Select case">
+            <option value="testcase">testcase</option>
+          </select>
         </div>
-        <button class="btn btn-sm btn-danger kill-all-btn" onclick="event.stopPropagation(); app.killAllSessions()" title="Kill all sessions">
-          ✕ Kill All
-        </button>
-      </div>
-      <div class="sessions-list" id="sessionsList"></div>
-    </aside>
 
-    <!-- Case Selector Modal -->
-    <div class="modal" id="caseSelectorModal">
-      <div class="modal-backdrop" onclick="app.closeCaseSelector()"></div>
-      <div class="modal-content">
-        <div class="modal-header">
-          <h3>Select Case</h3>
-          <button class="modal-close" onclick="app.closeCaseSelector()">&times;</button>
+        <!-- Directory -->
+        <div class="toolbar-group">
+          <button class="btn-toolbar" onclick="app.toggleDirInput()" title="Set working directory">
+            <span id="dirDisplay">No directory</span>
+          </button>
+          <input type="text" id="dirInput" class="toolbar-input hidden" placeholder="Working directory..." onblur="app.hideDirInput()">
         </div>
-        <div class="modal-body">
-          <div class="cases-grid" id="caseSelectorGrid">
-            <p class="empty-state">Loading...</p>
+
+        <!-- Respawn Settings -->
+        <div class="toolbar-group">
+          <button class="btn-toolbar" onclick="app.toggleRespawnPanel()" id="respawnToggleBtn" title="Respawn settings">
+            Respawn
+          </button>
+        </div>
+      </div>
+
+      <div class="toolbar-right">
+        <!-- Font Controls -->
+        <button class="btn-toolbar btn-sm" onclick="app.decreaseFontSize()" title="Decrease font (Ctrl+-)">A-</button>
+        <span class="font-size-display" id="fontSizeDisplay">14</span>
+        <button class="btn-toolbar btn-sm" onclick="app.increaseFontSize()" title="Increase font (Ctrl++)">A+</button>
+
+        <div class="toolbar-divider"></div>
+
+        <button class="btn-toolbar" onclick="app.copyTerminal()" title="Copy terminal">Copy</button>
+        <button class="btn-toolbar" onclick="app.clearTerminal()" title="Clear terminal (Ctrl+L)">Clear</button>
+
+        <div class="toolbar-divider"></div>
+
+        <button class="btn-toolbar btn-danger" onclick="app.killActiveSession()" title="Kill current session">Kill</button>
+      </div>
+    </footer>
+
+    <!-- Respawn Settings Panel (slide-up) -->
+    <div class="respawn-panel" id="respawnPanel">
+      <div class="respawn-panel-header">
+        <span>Respawn Settings</span>
+        <button class="btn-close" onclick="app.toggleRespawnPanel()">&times;</button>
+      </div>
+      <div class="respawn-panel-body">
+        <div class="form-row">
+          <label>Update Prompt</label>
+          <input type="text" id="respawnPrompt" value="update all the docs and CLAUDE.md" placeholder="Prompt to send when idle">
+        </div>
+        <div class="form-row-inline">
+          <div class="form-col">
+            <label>Idle Timeout</label>
+            <div class="input-suffix">
+              <input type="number" id="respawnIdleTimeout" value="5" min="1" max="60">
+              <span>sec</span>
+            </div>
           </div>
+          <div class="form-col">
+            <label>Step Delay</label>
+            <div class="input-suffix">
+              <input type="number" id="respawnStepDelay" value="1" min="0" max="10">
+              <span>sec</span>
+            </div>
+          </div>
+        </div>
+        <div class="form-row">
+          <label>Run Duration (optional)</label>
+          <div class="input-suffix">
+            <input type="number" id="respawnDuration" value="" min="1" placeholder="No limit">
+            <span>min</span>
+          </div>
+          <span class="form-hint">Leave empty for unlimited. Respawn stops after duration.</span>
+        </div>
+        <div class="form-row">
+          <label>After Update Prompt:</label>
+          <div class="checkbox-group">
+            <label class="checkbox-label">
+              <input type="checkbox" id="respawnSendClear" checked>
+              <span>Send /clear</span>
+              <span class="checkbox-hint">Clear conversation context</span>
+            </label>
+            <label class="checkbox-label">
+              <input type="checkbox" id="respawnSendInit" checked>
+              <span>Send /init</span>
+              <span class="checkbox-hint">Reinitialize session</span>
+            </label>
+          </div>
+        </div>
+        <div class="form-row">
+          <label>Auto-Clear Context</label>
+          <div class="checkbox-group">
+            <label class="checkbox-label">
+              <input type="checkbox" id="autoClearEnabled">
+              <span>Enable Auto-Clear</span>
+              <span class="checkbox-hint">Clear at token threshold</span>
+            </label>
+          </div>
+          <div class="input-suffix" style="margin-top: 0.5rem;">
+            <input type="number" id="autoClearThreshold" value="100000" min="10000" max="500000" step="10000">
+            <span>tokens</span>
+          </div>
+        </div>
+        <div class="form-actions">
+          <button class="btn-toolbar" onclick="app.toggleRespawnPanel()">Cancel</button>
+          <button class="btn-toolbar btn-success" onclick="app.enableRespawnOnCurrent()" id="enableOnCurrentBtn" style="display: none;">Enable on Current</button>
+          <button class="btn-toolbar btn-primary" onclick="app.startInteractiveWithRespawn()">Start New + Respawn</button>
         </div>
       </div>
     </div>
 
-    <!-- Help Button -->
-    <button class="help-btn" onclick="app.showHelp()" title="Keyboard shortcuts (Ctrl+?)">?</button>
+    <!-- New Session Panel (slide-up) -->
+    <div class="new-session-panel" id="newSessionPanel">
+      <div class="respawn-panel-header">
+        <span>New Session</span>
+        <button class="btn-close" onclick="app.hideNewSessionPanel()">&times;</button>
+      </div>
+      <div class="respawn-panel-body">
+        <div class="form-row">
+          <label>Case / Project</label>
+          <select id="newSessionCase" class="form-select">
+            <option value="testcase">testcase (default)</option>
+          </select>
+        </div>
+        <div class="form-row">
+          <label>Or specify directory</label>
+          <input type="text" id="newSessionDir" placeholder="~/projects/my-project">
+        </div>
+        <div class="form-actions">
+          <button class="btn-toolbar" onclick="app.hideNewSessionPanel()">Cancel</button>
+          <button class="btn-toolbar btn-success" onclick="app.createSessionFromPanel()">Create Session</button>
+        </div>
+      </div>
+    </div>
 
     <!-- Help Modal -->
     <div class="modal" id="helpModal">
@@ -296,60 +213,36 @@
           <button class="modal-close" onclick="app.closeHelp()">&times;</button>
         </div>
         <div class="modal-body">
-          <div class="shortcuts-list">
-            <div class="shortcut-group">
-              <h4>General</h4>
-              <div class="shortcut-row">
-                <kbd>Ctrl</kbd>+<kbd>Enter</kbd>
-                <span>Quick Start</span>
-              </div>
-              <div class="shortcut-row">
-                <kbd>Ctrl</kbd>+<kbd>K</kbd>
-                <span>Kill all sessions</span>
-              </div>
-              <div class="shortcut-row">
-                <kbd>Ctrl</kbd>+<kbd>?</kbd>
-                <span>Show this help</span>
-              </div>
-              <div class="shortcut-row">
-                <kbd>Escape</kbd>
-                <span>Close modals</span>
-              </div>
-            </div>
-            <div class="shortcut-group">
-              <h4>Terminal</h4>
-              <div class="shortcut-row">
-                <kbd>Ctrl</kbd>+<kbd>L</kbd>
-                <span>Clear terminal</span>
-              </div>
-              <div class="shortcut-row">
-                <kbd>Ctrl</kbd>+<kbd>+</kbd>
-                <span>Increase font size</span>
-              </div>
-              <div class="shortcut-row">
-                <kbd>Ctrl</kbd>+<kbd>-</kbd>
-                <span>Decrease font size</span>
-              </div>
-            </div>
-            <div class="shortcut-group">
-              <h4>Navigation</h4>
-              <div class="shortcut-row">
-                <kbd>Ctrl</kbd>+<kbd>1</kbd>
-                <span>Run tab</span>
-              </div>
-              <div class="shortcut-row">
-                <kbd>Ctrl</kbd>+<kbd>2</kbd>
-                <span>Cases tab</span>
-              </div>
-              <div class="shortcut-row">
-                <kbd>Ctrl</kbd>+<kbd>3</kbd>
-                <span>Settings tab</span>
-              </div>
-            </div>
+          <div class="shortcuts-grid">
+            <div><kbd>Ctrl</kbd>+<kbd>Enter</kbd></div><div>Quick Start</div>
+            <div><kbd>Ctrl</kbd>+<kbd>N</kbd></div><div>New Session</div>
+            <div><kbd>Ctrl</kbd>+<kbd>W</kbd></div><div>Close Session</div>
+            <div><kbd>Ctrl</kbd>+<kbd>Tab</kbd></div><div>Next Session</div>
+            <div><kbd>Ctrl</kbd>+<kbd>K</kbd></div><div>Kill All Sessions</div>
+            <div><kbd>Ctrl</kbd>+<kbd>L</kbd></div><div>Clear Terminal</div>
+            <div><kbd>Ctrl</kbd>+<kbd>+</kbd></div><div>Increase Font</div>
+            <div><kbd>Ctrl</kbd>+<kbd>-</kbd></div><div>Decrease Font</div>
+            <div><kbd>Ctrl</kbd>+<kbd>?</kbd></div><div>Show Help</div>
+            <div><kbd>Escape</kbd></div><div>Close Panels</div>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- Task Tree Panel (slide-up) -->
+    <div class="task-panel" id="taskPanel">
+      <div class="task-panel-header">
+        <span>Background Tasks</span>
+        <div class="task-panel-stats" id="taskPanelStats">0 running</div>
+        <button class="btn-close" onclick="app.toggleTaskPanel()">&times;</button>
+      </div>
+      <div class="task-panel-body" id="taskPanelBody">
+        <div class="task-empty">No background tasks</div>
+      </div>
+    </div>
+
+    <!-- Help Button -->
+    <button class="help-btn" onclick="app.showHelp()" title="Keyboard shortcuts (Ctrl+?)">?</button>
   </div>
 
   <script src="app.js"></script>
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 52b82276..767d5829 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -1,10 +1,12 @@
-/* Variables */
+/* Claudeman - Terminal-First UI */
+
 :root {
   --bg-dark: #0a0a0a;
   --bg-card: #141414;
   --bg-input: #1a1a1a;
   --bg-hover: #222;
   --border: #2a2a2a;
+  --border-light: #333;
   --text: #eee;
   --text-dim: #888;
   --text-muted: #555;
@@ -13,1369 +15,635 @@
   --green: #22c55e;
   --yellow: #eab308;
   --red: #ef4444;
-  --radius: 8px;
+  --header-height: 36px;
+  --toolbar-height: 40px;
 }
 
-/* Reset */
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   background: var(--bg-dark);
   color: var(--text);
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
 }
 
-/* Layout */
+/* App Layout - Terminal First */
 .app {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: 100vh;
 }
 
-/* Header */
+/* Compact Header */
 .header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 1rem 1.5rem;
-  background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
+  height: var(--header-height);
+  padding: 0 0.75rem;
+  background: var(--bg-card);
   border-bottom: 1px solid var(--border);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  flex-shrink: 0;
 }
 
-.header-left {
+.header-brand {
   display: flex;
   align-items: center;
-  gap: 1.5rem;
+  padding-right: 0.75rem;
+  border-right: 1px solid var(--border);
+  margin-right: 0.5rem;
 }
 
 .logo {
-  font-size: 1.3rem;
-  font-weight: 700;
-  background: linear-gradient(135deg, #60a5fa, #3b82f6, #818cf8);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  letter-spacing: 0.02em;
-}
-
-.connection-status {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.75rem;
-  color: var(--text-dim);
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--yellow);
-  box-shadow: 0 0 8px var(--yellow);
-  animation: statusPulse 2s ease-in-out infinite;
-}
-
-.status-dot.connected {
-  background: var(--green);
-  box-shadow: 0 0 8px var(--green);
-}
-
-.status-dot.disconnected {
-  background: var(--red);
-  box-shadow: 0 0 8px var(--red);
-}
-
-@keyframes statusPulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.7; transform: scale(1.1); }
-}
-
-.header-stats {
-  display: flex;
-  gap: 2rem;
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.stat-value {
-  font-size: 1.25rem;
+  font-size: 0.85rem;
   font-weight: 600;
-  color: var(--green);
-}
-
-.stat-label {
-  font-size: 0.7rem;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-/* Timer Banner */
-.timer-banner {
-  background: linear-gradient(135deg, #1e3a5f 0%, #152238 50%, #0f172a 100%);
-  border-bottom: 1px solid rgba(59, 130, 246, 0.4);
-  padding: 1.25rem 1.5rem;
-  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.15);
-}
-
-.timer-info {
-  display: flex;
-  align-items: baseline;
-  gap: 1rem;
-  margin-bottom: 0.75rem;
-}
-
-.timer-label {
-  font-size: 0.875rem;
-  color: var(--text-dim);
-}
-
-.timer-value {
-  font-size: 2.5rem;
-  font-weight: 700;
-  font-family: 'SF Mono', Monaco, monospace;
   color: var(--accent-hover);
-  letter-spacing: 0.05em;
+  letter-spacing: -0.02em;
 }
 
-.timer-progress {
-  height: 8px;
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  overflow: hidden;
-  margin-bottom: 0.75rem;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.timer-progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6);
-  background-size: 200% 100%;
-  animation: progressShimmer 2s linear infinite;
-  transition: width 1s linear;
-  border-radius: 4px;
-}
-
-@keyframes progressShimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-.timer-meta {
+/* Session Tabs */
+.session-tabs {
   display: flex;
   align-items: center;
-  gap: 1.5rem;
-  font-size: 0.875rem;
-  color: var(--text-dim);
-}
-
-.timer-started {
-  font-family: 'SF Mono', Monaco, monospace;
-  color: var(--text-muted);
-}
-
-/* Main */
-.main {
-  display: grid;
-  grid-template-columns: 350px 1fr;
+  gap: 2px;
   flex: 1;
-  overflow: hidden;
+  overflow-x: auto;
+  padding: 0 0.25rem;
 }
 
-/* Control Panel */
-.control-panel {
-  padding: 1.5rem;
-  background: var(--bg-card);
-  border-right: 1px solid var(--border);
-  overflow-y: auto;
+.session-tabs::-webkit-scrollbar {
+  height: 0;
 }
 
-.control-panel h2 {
-  font-size: 1rem;
-  font-weight: 600;
-  margin-bottom: 1.25rem;
-  color: var(--text-dim);
-}
-
-.form-group {
-  margin-bottom: 1rem;
-}
-
-.form-group label {
-  display: block;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-dim);
-  margin-bottom: 0.5rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.form-group input,
-.form-group textarea {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  background: linear-gradient(135deg, #1a1a1a 0%, #141414 100%);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text);
-  font-size: 0.875rem;
-  font-family: inherit;
-  transition: all 0.2s ease;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.form-group input::placeholder,
-.form-group textarea::placeholder {
-  color: var(--text-muted);
-  opacity: 0.7;
-}
-
-.form-group textarea {
-  min-height: 120px;
-  resize: vertical;
-}
-
-.form-group input:focus,
-.form-group textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), inset 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.form-group input:hover:not(:focus),
-.form-group textarea:hover:not(:focus) {
-  border-color: var(--text-muted);
-}
-
-.form-hint {
-  display: block;
-  font-size: 0.7rem;
-  color: var(--text-muted);
-  margin-top: 0.25rem;
-}
-
-.form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-.form-actions {
-  margin-top: 1.5rem;
-}
-
-/* Buttons */
-.btn {
-  display: inline-flex;
+.session-tab {
+  display: flex;
   align-items: center;
-  justify-content: center;
   gap: 0.5rem;
-  padding: 0.625rem 1.125rem;
-  border: none;
-  border-radius: 6px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  letter-spacing: 0.01em;
-}
-
-.btn:active {
-  transform: translateY(1px);
-  box-shadow: none;
-}
-
-.btn-primary {
-  background: linear-gradient(135deg, #4f8ff7 0%, #3b82f6 50%, #2563eb 100%);
-  color: white;
-  border: 1px solid rgba(59, 130, 246, 0.3);
-}
-
-.btn-primary:hover {
-  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
-  transform: translateY(-1px);
-}
-
-.btn-primary:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: none;
-}
-
-.btn-danger {
-  background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
-  color: white;
-  border: 1px solid rgba(239, 68, 68, 0.3);
-}
-
-.btn-danger:hover {
-  background: linear-gradient(135deg, #fca5a5 0%, #ef4444 50%, #dc2626 100%);
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
-  transform: translateY(-1px);
-}
-
-.btn-success {
-  background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
-  color: white;
-  border: 1px solid rgba(34, 197, 94, 0.3);
-}
-
-.btn-success:hover {
-  background: linear-gradient(135deg, #86efac 0%, #22c55e 50%, #16a34a 100%);
-  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
-  transform: translateY(-1px);
-}
-
-.btn-large {
-  width: 100%;
-  padding: 0.875rem 1.5rem;
-  font-size: 1rem;
-  border-radius: 8px;
-}
-
-.btn-sm {
-  padding: 0.4rem 0.85rem;
-  font-size: 0.75rem;
-  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
-  color: var(--text-dim);
-  border: 1px solid var(--border);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-
-.btn-sm:hover {
-  background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
-  color: var(--text);
-  border-color: var(--text-muted);
-}
-
-.btn-sm.btn-danger {
+  padding: 0.35rem 0.75rem;
   background: transparent;
-  border-color: var(--red);
-  color: var(--red);
-}
-
-.btn-sm.btn-danger:hover {
-  background: var(--red);
-  color: white;
-}
-
-.btn-xs {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.65rem;
-  background: transparent;
-  color: var(--text-muted);
-  border: 1px solid var(--border);
+  border: 1px solid transparent;
   border-radius: 4px;
-  box-shadow: none;
+  color: var(--text-dim);
+  font-size: 0.75rem;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s;
+  max-width: 150px;
 }
 
-.btn-xs:hover {
+.session-tab:hover {
   background: var(--bg-hover);
   color: var(--text);
 }
 
-.btn-xs.btn-danger {
-  border-color: rgba(239, 68, 68, 0.5);
-  color: var(--red);
+.session-tab.active {
+  background: var(--bg-dark);
+  border-color: var(--border-light);
+  color: var(--text);
 }
 
-.btn-xs.btn-danger:hover {
-  background: var(--red);
-  color: white;
-  border-color: var(--red);
-}
-
-.btn-icon {
-  font-size: 0.875rem;
-  opacity: 0.9;
-}
-
-/* Output Panel */
-.output-panel {
-  display: flex;
-  flex-direction: column;
-  padding: 1.5rem;
-  overflow: hidden;
-}
-
-.output-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.output-header h2 {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--text-dim);
-}
-
-.output-container {
-  flex: 1;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1rem;
-  overflow-y: auto;
-  font-family: 'SF Mono', Monaco, Consolas, monospace;
-  font-size: 0.8125rem;
-  line-height: 1.7;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-/* Terminal container for xterm.js */
-.terminal-container {
-  flex: 1;
-  background: linear-gradient(135deg, #1a1a2e 0%, #141424 100%);
-  border: 1px solid rgba(59, 130, 246, 0.2);
-  border-radius: 12px;
-  overflow: hidden;
-  min-height: 400px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.02);
-}
-
-.terminal-container .xterm {
-  height: 100%;
-  padding: 0.75rem;
-}
-
-.terminal-container .xterm-viewport {
-  background: transparent !important;
-}
-
-.output-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--text-muted);
-  text-align: center;
-}
-
-.placeholder-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  opacity: 0.3;
-}
-
-.placeholder-text {
-  font-size: 0.875rem;
-}
-
-/* Sessions Panel */
-.sessions-panel {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: var(--bg-card);
-  border-top: 1px solid var(--border);
-  max-height: 50vh;
-  overflow: hidden;
-  transition: max-height 0.3s ease;
-}
-
-.sessions-panel.collapsed {
-  max-height: 44px;
-}
-
-.sessions-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1.5rem;
-  user-select: none;
-}
-
-.sessions-header-left {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  flex: 1;
-}
-
-.sessions-header-left:hover {
-  opacity: 0.8;
-}
-
-.sessions-header h3 {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-dim);
-}
-
-.kill-all-btn {
-  padding: 0.4rem 0.85rem;
-  font-size: 0.7rem;
-  background: transparent;
-  border: 1px solid rgba(239, 68, 68, 0.4);
-  color: var(--red);
-  border-radius: 6px;
-  font-weight: 500;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.kill-all-btn:hover {
-  background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
-  color: white;
-  border-color: var(--red);
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
-  transform: translateY(-1px);
-}
-
-.kill-all-btn:active {
-  transform: translateY(0);
-  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
-}
-
-.session-count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  background: var(--accent);
-  border-radius: 10px;
-  font-size: 0.7rem;
-  color: white;
-  margin-left: 0.5rem;
-}
-
-.toggle-icon {
-  color: var(--text-muted);
-  transition: transform 0.3s;
-}
-
-.sessions-panel.collapsed .toggle-icon {
-  transform: rotate(180deg);
-}
-
-.sessions-list {
-  display: flex;
-  gap: 1rem;
-  padding: 0 1.5rem 1rem;
-  overflow-x: auto;
-}
-
-.session-card {
-  flex-shrink: 0;
-  width: 300px;
-  background: linear-gradient(135deg, #1a1a1a 0%, #141414 100%);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  overflow: hidden;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-.session-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.875rem 1rem;
-  background: linear-gradient(135deg, #141414 0%, #0a0a0a 100%);
-  border-bottom: 1px solid var(--border);
-}
-
-.session-status {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.75rem;
-}
-
-.session-status-dot {
-  width: 8px;
-  height: 8px;
+.session-tab .tab-status {
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
+  flex-shrink: 0;
 }
 
-.session-status-dot.idle { background: var(--green); box-shadow: 0 0 6px var(--green); }
-.session-status-dot.busy { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); animation: pulse 1.5s infinite; }
-.session-status-dot.error { background: var(--red); box-shadow: 0 0 6px var(--red); }
-.session-status-dot.stopped { background: var(--text-muted); }
+.session-tab .tab-status.idle { background: var(--green); }
+.session-tab .tab-status.busy { background: var(--yellow); animation: pulse 1.5s infinite; }
+.session-tab .tab-status.error { background: var(--red); }
+
+.session-tab .tab-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.session-tab .tab-close {
+  opacity: 0;
+  padding: 0 0.2rem;
+  font-size: 0.9rem;
+  line-height: 1;
+  color: var(--text-muted);
+  transition: opacity 0.15s;
+}
+
+.session-tab:hover .tab-close {
+  opacity: 1;
+}
+
+.session-tab .tab-close:hover {
+  color: var(--red);
+}
+
+.session-tab.new-tab {
+  padding: 0.35rem 0.5rem;
+  color: var(--text-muted);
+  font-size: 1rem;
+  font-weight: 300;
+}
+
+.session-tab.new-tab:hover {
+  color: var(--green);
+}
 
 @keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.4; }
 }
 
-.session-actions {
+/* Header Right */
+.header-right {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 1rem;
+  margin-left: auto;
+  padding-left: 0.75rem;
+  border-left: 1px solid var(--border);
 }
 
-.session-cost {
+.connection-status {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.7rem;
+  color: var(--text-dim);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--yellow);
+}
+
+.status-dot.connected { background: var(--green); }
+.status-dot.disconnected { background: var(--red); }
+
+.header-cost {
   font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--green);
+  font-family: 'SF Mono', Monaco, monospace;
+}
+
+/* Timer Banner - Compact */
+.timer-banner {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.4rem 1rem;
+  background: linear-gradient(90deg, #1e3a5f, #152238);
+  border-bottom: 1px solid rgba(59, 130, 246, 0.3);
+  flex-shrink: 0;
+}
+
+.timer-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+}
+
+.timer-value {
+  font-size: 1rem;
+  font-weight: 600;
+  font-family: 'SF Mono', Monaco, monospace;
+  color: var(--accent-hover);
+}
+
+.timer-progress {
+  flex: 1;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 2px;
+  max-width: 200px;
+}
+
+.timer-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #3b82f6, #60a5fa);
+  border-radius: 2px;
+  transition: width 1s linear;
+}
+
+.timer-meta {
+  font-size: 0.7rem;
+  color: var(--text-dim);
+}
+
+/* Respawn Banner - Compact */
+.respawn-banner {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.35rem 1rem;
+  background: linear-gradient(90deg, #1e3a1e, #132513);
+  border-bottom: 1px solid rgba(34, 197, 94, 0.3);
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+.respawn-indicator {
+  color: var(--green);
+  animation: spin 2s linear infinite;
+}
+
+.respawn-state {
   color: var(--green);
   font-weight: 500;
+  text-transform: capitalize;
 }
 
-.session-dir {
-  font-size: 0.65rem;
+.respawn-cycles {
+  color: var(--text-dim);
+}
+
+.respawn-step {
+  flex: 1;
   color: var(--text-muted);
-  font-family: 'SF Mono', Monaco, monospace;
-  background: rgba(255, 255, 255, 0.05);
-  padding: 0.125rem 0.375rem;
-  border-radius: 4px;
-  max-width: 80px;
+  font-family: monospace;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* Session Resources Display */
-.session-resources {
-  display: flex;
-  gap: 1rem;
-  padding: 0.5rem 0.75rem;
-  background: var(--bg-dark);
-  border-top: 1px solid var(--border);
-  font-size: 0.65rem;
-}
-
-.resource-item {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.resource-label {
-  color: var(--text-muted);
-}
-
-.resource-value {
-  font-weight: 500;
-  color: var(--text-dim);
+.respawn-timer {
+  color: var(--accent-hover);
   font-family: 'SF Mono', Monaco, monospace;
+  font-weight: 500;
+  padding: 0 0.5rem;
+  border-left: 1px solid rgba(34, 197, 94, 0.3);
+  border-right: 1px solid rgba(34, 197, 94, 0.3);
 }
 
-.resource-value.low {
-  color: var(--green);
-}
-
-.resource-value.medium {
-  color: var(--yellow);
-}
-
-.resource-value.high {
-  color: var(--red);
-}
-
-/* Active session card */
-.session-card.active {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(59, 130, 246, 0.15);
-  animation: activeGlow 2s ease-in-out infinite;
-}
-
-@keyframes activeGlow {
-  0%, 100% { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(59, 130, 246, 0.15); }
-  50% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4), 0 4px 16px rgba(59, 130, 246, 0.25); }
-}
-
-.session-card:hover {
-  border-color: var(--text-muted);
-  cursor: pointer;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-}
-
-.session-card:active {
-  transform: translateY(0);
-}
-
-.session-output {
-  height: 120px;
-  padding: 0.75rem;
-  overflow-y: auto;
+.respawn-tokens {
+  color: var(--text-dim);
   font-family: 'SF Mono', Monaco, monospace;
   font-size: 0.7rem;
-  line-height: 1.6;
-  color: var(--text-dim);
-  white-space: pre-wrap;
-}
-
-.session-output:empty::after {
-  content: 'Waiting...';
-  color: var(--text-muted);
-}
-
-/* Message styling in output */
-.msg-system { color: var(--text-muted); }
-.msg-assistant { color: var(--text); }
-.msg-error { color: var(--red); }
-.msg-cost { color: var(--green); font-weight: 500; }
-
-/* Scrollbar */
-::-webkit-scrollbar { width: 10px; height: 10px; }
-::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 5px;
-}
-::-webkit-scrollbar-thumb {
-  background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
-  border-radius: 5px;
-  border: 2px solid transparent;
-  background-clip: padding-box;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%);
-  background-clip: padding-box;
-}
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-/* Tooltips */
-[title] {
-  position: relative;
-}
-
-.tooltip {
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-8px);
-  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
-  color: var(--text);
-  padding: 0.5rem 0.75rem;
-  border-radius: 6px;
-  font-size: 0.75rem;
-  white-space: nowrap;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.2s ease, transform 0.2s ease;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  border: 1px solid var(--border);
-  z-index: 1000;
-}
-
-.tooltip::after {
-  content: '';
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 6px solid transparent;
-  border-top-color: #1a1a1a;
-}
-
-/* Responsive - Tablets */
-@media (max-width: 1024px) {
-  .main {
-    grid-template-columns: 300px 1fr;
-  }
-
-  .quick-start-section {
-    padding: 1rem;
-  }
-
-  .cases-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Responsive - Small Tablets / Large Phones */
-@media (max-width: 768px) {
-  .main {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
-  }
-
-  .control-panel {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-    max-height: 50vh;
-    overflow-y: auto;
-  }
-
-  .form-row {
-    grid-template-columns: 1fr;
-  }
-
-  .header {
-    padding: 0.75rem 1rem;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-  }
-
-  .header-left {
-    gap: 0.75rem;
-  }
-
-  .logo {
-    font-size: 1.1rem;
-  }
-
-  .header-stats {
-    display: none;
-  }
-
-  .connection-status {
-    font-size: 0.65rem;
-  }
-
-  .sessions-panel {
-    position: relative;
-    max-height: none;
-  }
-
-  .sessions-list {
-    flex-direction: column;
-    padding: 0 1rem 1rem;
-  }
-
-  .session-card {
-    width: 100%;
-  }
-
-  .timer-banner {
-    padding: 1rem;
-  }
-
-  .timer-value {
-    font-size: 2rem;
-  }
-
-  .timer-meta {
-    flex-wrap: wrap;
-    gap: 0.75rem;
-  }
-
-  .output-panel {
-    padding: 1rem;
-  }
-
-  .terminal-container {
-    min-height: 300px;
-    border-radius: 8px;
-  }
-
-  .quick-start-controls {
-    flex-direction: column;
-  }
-
-  .btn-quick-start {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .tabs {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    padding-bottom: 0.5rem;
-  }
-
-  .tab {
-    white-space: nowrap;
-    padding: 0.5rem 1rem;
-  }
-
-  .respawn-banner {
-    flex-wrap: wrap;
-    padding: 0.75rem 1rem;
-    gap: 0.5rem;
-  }
-
-  .respawn-step {
-    width: 100%;
-    order: 3;
-  }
-
-  .modal-content {
-    width: 95%;
-    max-height: 90vh;
-  }
-
-  .modal-body {
-    max-height: 70vh;
-  }
-}
-
-/* Responsive - Phones */
-@media (max-width: 480px) {
-  .header {
-    padding: 0.5rem 0.75rem;
-  }
-
-  .logo {
-    font-size: 1rem;
-  }
-
-  .connection-status span:last-child {
-    display: none;
-  }
-
-  .control-panel {
-    padding: 1rem;
-    max-height: 40vh;
-  }
-
-  .output-panel {
-    padding: 0.75rem;
-  }
-
-  .terminal-container {
-    min-height: 250px;
-    border-radius: 6px;
-  }
-
-  .quick-start-section {
-    padding: 0.875rem;
-    border-radius: 8px;
-  }
-
-  .quick-start-header {
-    margin-bottom: 0.5rem;
-  }
-
-  .quick-start-title {
-    font-size: 0.9rem;
-  }
-
-  .form-group label {
-    font-size: 0.7rem;
-  }
-
-  .form-group input,
-  .form-group textarea {
-    padding: 0.625rem 0.875rem;
-    font-size: 16px; /* Prevents iOS zoom on focus */
-  }
-
-  select {
-    padding: 0.625rem 2rem 0.625rem 0.75rem;
-    font-size: 16px; /* Prevents iOS zoom on focus */
-  }
-
-  .btn {
-    padding: 0.75rem 1rem;
-    font-size: 0.875rem;
-  }
-
-  .btn-large {
-    padding: 1rem 1.25rem;
-  }
-
-  .sessions-header {
-    padding: 0.5rem 1rem;
-  }
-
-  .sessions-list {
-    padding: 0 0.75rem 0.75rem;
-  }
-
-  .session-card-header {
-    padding: 0.75rem;
-  }
-
-  .session-output {
-    height: 100px;
-    padding: 0.5rem;
-  }
-
-  .timer-banner {
-    padding: 0.75rem 1rem;
-  }
-
-  .timer-value {
-    font-size: 1.75rem;
-  }
-
-  .timer-info {
-    gap: 0.5rem;
-  }
-
-  .toast-container {
-    top: auto;
-    bottom: 1rem;
-    right: 0.5rem;
-    left: 0.5rem;
-  }
-
-  .toast {
-    padding: 0.75rem 1rem;
-    font-size: 0.8rem;
-  }
-}
-
-/* Touch optimizations */
-@media (hover: none) and (pointer: coarse) {
-  .btn {
-    min-height: 44px;
-    min-width: 44px;
-  }
-
-  .btn-sm {
-    min-height: 36px;
-    padding: 0.5rem 0.75rem;
-  }
-
-  .btn-xs {
-    min-height: 32px;
-    padding: 0.375rem 0.625rem;
-    font-size: 0.7rem;
-  }
-
-  .tab {
-    min-height: 44px;
-    padding: 0.75rem 1.25rem;
-  }
-
-  .case-card {
-    padding: 1rem;
-  }
-
-  .session-card:hover {
-    transform: none;
-  }
-
-  .case-card:hover {
-    transform: none;
-  }
-
-  .modal-close {
-    min-width: 44px;
-    min-height: 44px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-/* Loading state */
-.loading {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(59, 130, 246, 0.2);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.loading-lg {
-  width: 32px;
-  height: 32px;
-  border-width: 3px;
-}
-
-.loading-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  gap: 1rem;
-  color: var(--text-muted);
 }
 
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
 
-/* Empty state */
-.empty-state {
-  text-align: center;
-  padding: 2rem;
-  color: var(--text-muted);
-  font-size: 0.875rem;
-}
-
-.empty-state-icon {
-  font-size: 2.5rem;
-  margin-bottom: 1rem;
-  opacity: 0.5;
-}
-
-.empty-state-title {
-  font-size: 1rem;
-  font-weight: 500;
-  color: var(--text-dim);
-  margin-bottom: 0.5rem;
-}
-
-.empty-state-text {
-  font-size: 0.8rem;
-  color: var(--text-muted);
-}
-
-/* Error state */
-.error-state {
-  text-align: center;
-  padding: 2rem;
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  border-radius: var(--radius);
-  color: var(--red);
-}
-
-.error-state-icon {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
-}
-
-/* Success state */
-.success-state {
-  text-align: center;
-  padding: 1rem;
-  background: rgba(34, 197, 94, 0.1);
-  border: 1px solid rgba(34, 197, 94, 0.3);
-  border-radius: var(--radius);
-  color: var(--green);
-}
-
-/* Toast notifications */
-.toast-container {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  z-index: 10000;
-  pointer-events: none;
-}
-
-.toast {
-  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 0.875rem 1.25rem;
-  font-size: 0.875rem;
-  color: var(--text);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-  transform: translateX(100%);
-  opacity: 0;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  pointer-events: auto;
-}
-
-.toast.show {
-  transform: translateX(0);
-  opacity: 1;
-}
-
-.toast-success {
-  border-color: rgba(34, 197, 94, 0.4);
-  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
-}
-
-.toast-error {
-  border-color: rgba(239, 68, 68, 0.4);
-  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
-}
-
-.toast-warning {
-  border-color: rgba(234, 179, 8, 0.4);
-  background: linear-gradient(135deg, rgba(234, 179, 8, 0.2) 0%, rgba(234, 179, 8, 0.1) 100%);
-}
-
-.toast-info {
-  border-color: rgba(59, 130, 246, 0.4);
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
-}
-
-/* Tabs */
-.tabs {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1.25rem;
-  border-bottom: 1px solid var(--border);
-  padding-bottom: 0.75rem;
-}
-
-.tab {
-  padding: 0.625rem 1.25rem;
-  background: transparent;
-  border: none;
-  border-radius: 8px 8px 0 0;
-  color: var(--text-dim);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-}
-
-.tab:hover {
-  color: var(--text);
-  background: rgba(255, 255, 255, 0.05);
-}
-
-.tab.active {
-  color: var(--accent);
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
-}
-
-.tab.active::after {
-  content: '';
-  position: absolute;
-  bottom: -0.75rem;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, var(--accent), rgba(59, 130, 246, 0.5));
-  border-radius: 2px 2px 0 0;
-}
-
-.tab-content {
-  display: none;
-}
-
-.tab-content.active {
-  display: block;
-}
-
-/* Section Header */
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.section-header h3 {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-dim);
-}
-
-/* Input with button */
-.input-with-button {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.input-with-button input {
+/* Main - Terminal Area */
+.main {
   flex: 1;
+  display: flex;
+  overflow: hidden;
+  background: var(--bg-dark);
 }
 
-/* Select */
-select {
-  width: 100%;
-  padding: 0.75rem 2.5rem 0.75rem 1rem;
-  background: linear-gradient(135deg, #1a1a1a 0%, #141414 100%);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text);
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.75rem center;
-  background-size: 16px;
+.terminal-container {
+  flex: 1;
+  background: #0d0d0d;
+  overflow: hidden;
 }
 
-select:hover {
-  border-color: var(--text-muted);
-}
-
-select:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), inset 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-select option {
-  background: var(--bg-card);
-  color: var(--text);
+.terminal-container .xterm {
+  height: 100%;
   padding: 0.5rem;
 }
 
-/* Cases List */
-.cases-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  max-height: 200px;
-  overflow-y: auto;
+.terminal-container .xterm-viewport {
+  background: transparent !important;
 }
 
-.case-card {
+/* Bottom Toolbar */
+.toolbar {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.875rem 1rem;
-  background: linear-gradient(135deg, #1a1a1a 0%, #141414 100%);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  justify-content: space-between;
+  height: var(--toolbar-height);
+  padding: 0 0.5rem;
+  background: var(--bg-card);
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
 }
 
-.case-card:hover {
-  border-color: var(--accent);
-  background: linear-gradient(135deg, #222 0%, #1a1a1a 100%);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+.toolbar-left,
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 
-.case-card:active {
-  transform: translateY(0);
+.toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 0;
 }
 
-.case-icon {
-  font-size: 1.25rem;
+.toolbar-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--border);
+  margin: 0 0.5rem;
 }
 
-.case-info {
-  flex: 1;
-}
-
-.case-name {
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.case-path {
-  font-size: 0.7rem;
-  color: var(--text-muted);
-  font-family: monospace;
-}
-
-/* Create Case Form */
-.create-case-form {
-  margin-top: 1rem;
-  padding: 1rem;
+.btn-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.75rem;
   background: var(--bg-input);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
+  border-radius: 4px;
+  color: var(--text-dim);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
 }
 
-.create-case-form h4 {
-  font-size: 0.875rem;
-  margin-bottom: 1rem;
+.btn-toolbar:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+  border-color: var(--border-light);
+}
+
+.btn-toolbar.btn-sm {
+  padding: 0.3rem 0.5rem;
+  font-size: 0.7rem;
+}
+
+.btn-toolbar.btn-primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: white;
+}
+
+.btn-toolbar.btn-primary:hover {
+  background: var(--accent-hover);
+}
+
+.btn-toolbar.btn-success {
+  background: var(--green);
+  border-color: var(--green);
+  color: white;
+}
+
+.btn-toolbar.btn-success:hover {
+  background: #16a34a;
+}
+
+.btn-toolbar.btn-danger {
+  color: var(--red);
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+.btn-toolbar.btn-danger:hover {
+  background: var(--red);
+  color: white;
+  border-color: var(--red);
+}
+
+.btn-icon-only {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-dim);
+  font-size: 0.7rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn-icon-only:hover {
+  background: var(--bg-hover);
   color: var(--text);
 }
 
-/* Checkbox */
-input[type="checkbox"] {
-  margin-right: 0.5rem;
+.toolbar-select {
+  padding: 0.4rem 1.5rem 0.4rem 0.5rem;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+  color: var(--text-dim);
+  font-size: 0.75rem;
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.4rem center;
+  max-width: 120px;
+}
+
+.toolbar-select:hover {
+  border-color: var(--border-light);
+}
+
+.toolbar-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.toolbar-input {
+  padding: 0.4rem 0.5rem;
+  background: var(--bg-input);
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 0.75rem;
+  width: 200px;
+}
+
+.toolbar-input:focus {
+  outline: none;
+}
+
+.toolbar-input.hidden {
+  display: none;
+}
+
+.font-size-display {
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  min-width: 20px;
+  text-align: center;
+  font-family: 'SF Mono', Monaco, monospace;
+}
+
+/* Slide-up Panels */
+.respawn-panel,
+.new-session-panel {
+  position: fixed;
+  bottom: var(--toolbar-height);
+  left: 50%;
+  transform: translateX(-50%) translateY(100%);
+  width: 400px;
+  max-width: 90vw;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
+  z-index: 100;
+  transition: transform 0.2s ease;
+}
+
+.respawn-panel.open,
+.new-session-panel.open {
+  transform: translateX(-50%) translateY(0);
+}
+
+.respawn-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.btn-close {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0 0.25rem;
+  line-height: 1;
+}
+
+.btn-close:hover {
+  color: var(--text);
+}
+
+.respawn-panel-body {
+  padding: 1rem;
+}
+
+.form-row {
+  margin-bottom: 0.75rem;
+}
+
+.form-row label {
+  display: block;
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  margin-bottom: 0.35rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.form-row input[type="text"],
+.form-row input[type="number"],
+.form-select {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 0.8rem;
+}
+
+.form-row input:focus,
+.form-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.form-row-inline {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.form-col {
+  flex: 1;
+}
+
+.form-col label {
+  display: block;
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  margin-bottom: 0.35rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.input-suffix {
+  display: flex;
+  align-items: center;
+}
+
+.input-suffix input {
+  flex: 1;
+  border-radius: 4px 0 0 4px;
+  border-right: none;
+}
+
+.input-suffix span {
+  padding: 0.5rem 0.5rem;
+  background: var(--bg-hover);
+  border: 1px solid var(--border);
+  border-radius: 0 4px 4px 0;
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.checkbox-label:hover {
+  border-color: var(--border-light);
+}
+
+.checkbox-label input[type="checkbox"] {
   accent-color: var(--accent);
 }
 
+.checkbox-label span:first-of-type {
+  font-size: 0.8rem;
+  color: var(--text);
+}
+
+.checkbox-hint {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+
+.form-hint {
+  display: block;
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  margin-top: 0.35rem;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border);
+}
+
 /* Modal */
 .modal {
   display: none;
@@ -1393,401 +661,342 @@ input[type="checkbox"] {
 .modal-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(4px);
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(2px);
 }
 
 .modal-content {
   position: relative;
-  background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
+  background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 8px;
   width: 90%;
-  max-width: 500px;
-  max-height: 80vh;
-  overflow: hidden;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-  animation: modalSlideIn 0.2s ease-out;
-}
-
-@keyframes modalSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-20px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+  max-width: 400px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
 }
 
 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.25rem 1.5rem;
+  padding: 1rem;
   border-bottom: 1px solid var(--border);
-  background: linear-gradient(135deg, #141414 0%, #0a0a0a 100%);
 }
 
 .modal-header h3 {
-  font-size: 1.125rem;
-  font-weight: 600;
+  font-size: 0.95rem;
+  font-weight: 500;
 }
 
 .modal-close {
   background: transparent;
-  border: 1px solid var(--border);
+  border: none;
   color: var(--text-dim);
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   cursor: pointer;
-  padding: 0.25rem 0.5rem;
   line-height: 1;
-  border-radius: 6px;
-  transition: all 0.2s ease;
 }
 
 .modal-close:hover {
   color: var(--text);
-  background: var(--bg-hover);
-  border-color: var(--text-muted);
 }
 
 .modal-body {
-  padding: 1.5rem;
-  max-height: 60vh;
-  overflow-y: auto;
+  padding: 1rem;
 }
 
-/* Cases Grid (in modal) */
-.cases-grid {
+.shortcuts-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
-}
-
-.cases-grid .case-card {
-  flex-direction: column;
-  align-items: flex-start;
-  text-align: left;
-}
-
-/* Respawn Settings */
-.respawn-settings {
-  margin-top: 1rem;
-  padding: 0.75rem;
-  background: var(--bg-input);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-}
-
-.respawn-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.respawn-header label {
-  display: flex;
-  align-items: center;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem 1rem;
   font-size: 0.8rem;
-  color: var(--text);
-  text-transform: none;
-  letter-spacing: normal;
-  margin: 0;
 }
 
-.respawn-details {
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--border);
+.shortcuts-grid > div:nth-child(odd) {
+  text-align: right;
 }
 
-/* Respawn Banner */
-.respawn-banner {
-  background: linear-gradient(135deg, #1e3a1e 0%, #132513 50%, #0f1f0f 100%);
-  border-bottom: 1px solid rgba(34, 197, 94, 0.4);
-  padding: 0.875rem 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  box-shadow: 0 2px 12px rgba(34, 197, 94, 0.15);
-}
-
-.respawn-status-info {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.respawn-indicator {
-  font-size: 1.25rem;
-  animation: spin 2s linear infinite;
-}
-
-.respawn-state {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--green);
-  text-transform: capitalize;
-}
-
-.respawn-cycles {
-  font-size: 0.75rem;
-  color: var(--text-dim);
-}
-
-.respawn-step {
-  flex: 1;
-  font-size: 0.75rem;
-  color: var(--text-dim);
-  font-family: monospace;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.respawn-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-/* Session Card Respawn Status */
-.session-respawn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  background: var(--bg-dark);
-  border-top: 1px solid var(--border);
-  font-size: 0.7rem;
-}
-
-.session-respawn-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--green);
-  animation: pulse 1.5s infinite;
-}
-
-.session-respawn-dot.paused {
-  background: var(--yellow);
-  animation: none;
-}
-
-.session-respawn-dot.stopped {
-  background: var(--text-muted);
-  animation: none;
-}
-
-.session-respawn-state {
-  color: var(--text-dim);
-}
-
-.session-respawn-actions {
-  margin-left: auto;
-  display: flex;
-  gap: 0.25rem;
-}
-
-.session-respawn-actions button {
-  padding: 0.2rem 0.4rem;
-  font-size: 0.65rem;
-}
-
-/* Quick Start Section */
-.quick-start-section {
-  background: linear-gradient(135deg, #0d4020 0%, #082010 50%, #051208 100%);
-  border: 1px solid rgba(34, 197, 94, 0.4);
-  border-radius: 12px;
-  padding: 1.25rem;
-  margin-bottom: 1rem;
-  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.02);
-}
-
-.quick-start-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-}
-
-.quick-start-icon {
-  font-size: 1.25rem;
-  color: var(--green);
-}
-
-.quick-start-title {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--green);
-}
-
-.quick-start-controls {
-  display: flex;
-  gap: 0.5rem;
-  align-items: stretch;
-}
-
-.quick-start-select {
-  flex: 1;
-  padding: 0.625rem 0.75rem;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(34, 197, 94, 0.3);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-size: 0.875rem;
-}
-
-.quick-start-select:focus {
-  outline: none;
-  border-color: var(--green);
-}
-
-.btn-quick-start {
-  background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
-  color: #000;
-  font-weight: 600;
-  padding: 0.75rem 1.5rem;
-  border: 1px solid rgba(34, 197, 94, 0.4);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  white-space: nowrap;
-  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-}
-
-.btn-quick-start:hover {
-  background: linear-gradient(135deg, #86efac 0%, #4ade80 50%, #22c55e 100%);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
-}
-
-.btn-quick-start:active {
-  transform: translateY(0);
-  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
-}
-
-.quick-start-hint {
-  font-size: 0.7rem;
-  color: rgba(34, 197, 94, 0.7);
-  margin-top: 0.5rem;
-}
-
-/* Section Divider */
-.section-divider {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin: 1.25rem 0;
-  color: var(--text-muted);
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.section-divider::before,
-.section-divider::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: var(--border);
-}
-
-/* Font Controls */
-.font-controls {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin-right: 0.5rem;
-}
-
-.font-size-display {
-  font-size: 0.7rem;
-  color: var(--text-muted);
-  min-width: 32px;
-  text-align: center;
-  font-family: 'SF Mono', Monaco, monospace;
-}
-
-/* Output Actions */
-.output-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* Keyboard Shortcuts Modal */
-.shortcuts-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.shortcut-group h4 {
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
-  margin-bottom: 0.75rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.shortcut-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 0;
-  font-size: 0.875rem;
-}
-
-.shortcut-row span {
+.shortcuts-grid > div:nth-child(even) {
   color: var(--text-dim);
 }
 
 kbd {
   display: inline-block;
-  padding: 0.25rem 0.5rem;
-  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
+  padding: 0.15rem 0.4rem;
+  background: var(--bg-input);
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: 3px;
   font-family: 'SF Mono', Monaco, monospace;
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   color: var(--text);
-  box-shadow: 0 2px 0 var(--border);
-  min-width: 24px;
-  text-align: center;
 }
 
-/* Help button */
+/* Help Button */
 .help-btn {
   position: fixed;
-  bottom: 1rem;
-  right: 1rem;
-  width: 40px;
-  height: 40px;
+  bottom: calc(var(--toolbar-height) + 0.5rem);
+  right: 0.5rem;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
+  background: var(--bg-card);
   border: 1px solid var(--border);
-  color: var(--text-dim);
-  font-size: 1.25rem;
+  color: var(--text-muted);
+  font-size: 0.85rem;
   cursor: pointer;
-  z-index: 100;
+  z-index: 50;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s ease;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  transition: all 0.15s;
 }
 
 .help-btn:hover {
-  background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
+  background: var(--bg-hover);
   color: var(--text);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
+/* Toast Notifications */
+.toast-container {
+  position: fixed;
+  top: calc(var(--header-height) + 0.5rem);
+  right: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  z-index: 10000;
+  pointer-events: none;
+}
+
+.toast {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.6rem 1rem;
+  font-size: 0.8rem;
+  color: var(--text);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  transform: translateX(100%);
+  opacity: 0;
+  transition: all 0.2s ease;
+  pointer-events: auto;
+}
+
+.toast.show {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.toast-success { border-color: rgba(34, 197, 94, 0.4); }
+.toast-error { border-color: rgba(239, 68, 68, 0.4); }
+.toast-warning { border-color: rgba(234, 179, 8, 0.4); }
+.toast-info { border-color: rgba(59, 130, 246, 0.4); }
+
+/* Task Badge on Session Tab */
+.session-tab .tab-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  background: var(--yellow);
+  border-radius: 8px;
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: #000;
+  animation: pulse 1.5s infinite;
+}
+
+.session-tab .tab-badge.completed {
+  background: var(--green);
+  animation: none;
+}
+
+/* Task Panel */
+.task-panel {
+  position: fixed;
+  bottom: var(--toolbar-height);
+  right: 0.5rem;
+  width: 350px;
+  max-width: calc(100vw - 1rem);
+  max-height: 50vh;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
+  z-index: 100;
+  transform: translateY(100%);
+  transition: transform 0.2s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.task-panel.open {
+  transform: translateY(0);
+}
+
+.task-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1rem;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.8rem;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.task-panel-stats {
+  margin-left: auto;
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  padding: 0.2rem 0.5rem;
+  background: var(--bg-input);
+  border-radius: 10px;
+}
+
+.task-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.task-empty {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.8rem;
+}
+
+/* Task Tree */
+.task-tree {
+  font-size: 0.75rem;
+}
+
+.task-node {
+  border-left: 2px solid var(--border);
+  padding-left: 0.75rem;
+  margin-left: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.task-node:first-child {
+  border-left: none;
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.task-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.4rem 0.5rem;
+  background: var(--bg-input);
+  border-radius: 4px;
+  margin-bottom: 0.25rem;
+}
+
+.task-status-icon {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.6rem;
+}
+
+.task-status-icon.running {
+  background: var(--yellow);
+  animation: pulse 1.5s infinite;
+}
+
+.task-status-icon.completed {
+  background: var(--green);
+  color: white;
+}
+
+.task-status-icon.failed {
+  background: var(--red);
+  color: white;
+}
+
+.task-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.task-description {
+  color: var(--text);
+  word-break: break-word;
+}
+
+.task-meta {
+  display: flex;
+  gap: 0.5rem;
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  margin-top: 0.2rem;
+}
+
+.task-type {
+  color: var(--accent);
+}
+
+.task-children {
+  margin-top: 0.25rem;
+}
+
+/* Task toggle button in toolbar */
+.task-toggle-btn {
+  position: relative;
+}
+
+.task-toggle-btn .badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 3px;
+  background: var(--yellow);
+  border-radius: 7px;
+  font-size: 0.6rem;
+  font-weight: 600;
+  color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-light);
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+  .header-brand {
+    display: none;
+  }
+
+  .toolbar-left .toolbar-group:not(:first-child) {
+    display: none;
+  }
+
+  .respawn-panel,
+  .new-session-panel {
+    width: 100%;
+    max-width: 100%;
+    border-radius: 8px 8px 0 0;
+  }
 }
diff --git a/src/web/server.ts b/src/web/server.ts
index 0dba930f..b993131e 100644
--- a/src/web/server.ts
+++ b/src/web/server.ts
@@ -5,7 +5,7 @@ import { fileURLToPath } from 'node:url';
 import { existsSync, mkdirSync, writeFileSync, readdirSync } from 'node:fs';
 import { homedir } from 'node:os';
 import { EventEmitter } from 'node:events';
-import { Session, ClaudeMessage } from '../session.js';
+import { Session, ClaudeMessage, type BackgroundTask } from '../session.js';
 import { RespawnController, RespawnConfig, RespawnState } from '../respawn-controller.js';
 import { getStore } from '../state-store.js';
 import { generateClaudeMd } from '../templates/claude-md.js';
@@ -48,6 +48,7 @@ export class WebServer extends EventEmitter {
   private app: FastifyInstance;
   private sessions: Map<string, Session> = new Map();
   private respawnControllers: Map<string, RespawnController> = new Map();
+  private respawnTimers: Map<string, { timer: NodeJS.Timeout; endAt: number; startedAt: number }> = new Map();
   private scheduledRuns: Map<string, ScheduledRun> = new Map();
   private sseClients: Set<FastifyReply> = new Set();
   private store = getStore();
@@ -345,7 +346,7 @@ export class WebServer extends EventEmitter {
     // Start interactive session WITH respawn enabled
     this.app.post('/api/sessions/:id/interactive-respawn', async (req) => {
       const { id } = req.params as { id: string };
-      const body = req.body as { respawnConfig?: Partial<RespawnConfig> } | undefined;
+      const body = req.body as { respawnConfig?: Partial<RespawnConfig>; durationMinutes?: number } | undefined;
       const session = this.sessions.get(id);
 
       if (!session) {
@@ -367,6 +368,11 @@ export class WebServer extends EventEmitter {
         this.setupRespawnListeners(id, controller);
         controller.start();
 
+        // Set up timed stop if duration specified
+        if (body?.durationMinutes && body.durationMinutes > 0) {
+          this.setupTimedRespawn(id, body.durationMinutes);
+        }
+
         this.broadcast('respawn:started', { sessionId: id, status: controller.getStatus() });
 
         return {
@@ -379,6 +385,69 @@ export class WebServer extends EventEmitter {
       }
     });
 
+    // Enable respawn on an EXISTING interactive session
+    this.app.post('/api/sessions/:id/respawn/enable', async (req) => {
+      const { id } = req.params as { id: string };
+      const body = req.body as { config?: Partial<RespawnConfig>; durationMinutes?: number } | undefined;
+      const session = this.sessions.get(id);
+
+      if (!session) {
+        return { error: 'Session not found' };
+      }
+
+      // Check if session is running (has a PID)
+      if (!session.pid) {
+        return { error: 'Session is not running. Start it first.' };
+      }
+
+      // Stop existing controller if any
+      const existingController = this.respawnControllers.get(id);
+      if (existingController) {
+        existingController.stop();
+      }
+
+      // Create and start new respawn controller
+      const controller = new RespawnController(session, body?.config);
+      this.respawnControllers.set(id, controller);
+      this.setupRespawnListeners(id, controller);
+      controller.start();
+
+      // Set up timed stop if duration specified
+      if (body?.durationMinutes && body.durationMinutes > 0) {
+        this.setupTimedRespawn(id, body.durationMinutes);
+      }
+
+      this.broadcast('respawn:started', { sessionId: id, status: controller.getStatus() });
+
+      return {
+        success: true,
+        message: 'Respawn enabled on existing session',
+        respawnStatus: controller.getStatus(),
+      };
+    });
+
+    // Set auto-clear on a session
+    this.app.post('/api/sessions/:id/auto-clear', async (req) => {
+      const { id } = req.params as { id: string };
+      const body = req.body as { enabled: boolean; threshold?: number };
+      const session = this.sessions.get(id);
+
+      if (!session) {
+        return { error: 'Session not found' };
+      }
+
+      session.setAutoClear(body.enabled, body.threshold);
+      this.broadcast('session:updated', session.toDetailedState());
+
+      return {
+        success: true,
+        autoClear: {
+          enabled: session.autoClearEnabled,
+          threshold: session.autoClearThreshold,
+        },
+      };
+    });
+
     // Quick run (create session, run prompt, return result)
     this.app.post('/api/run', async (req) => {
       const { prompt, workingDir } = req.body as QuickRunRequest;
@@ -585,6 +654,31 @@ export class WebServer extends EventEmitter {
       this.broadcast('session:idle', { id: session.id });
       this.broadcast('session:updated', session.toDetailedState());
     });
+
+    // Background task events
+    session.on('taskCreated', (task: BackgroundTask) => {
+      this.broadcast('task:created', { sessionId: session.id, task });
+      this.broadcast('session:updated', session.toDetailedState());
+    });
+
+    session.on('taskUpdated', (task: BackgroundTask) => {
+      this.broadcast('task:updated', { sessionId: session.id, task });
+    });
+
+    session.on('taskCompleted', (task: BackgroundTask) => {
+      this.broadcast('task:completed', { sessionId: session.id, task });
+      this.broadcast('session:updated', session.toDetailedState());
+    });
+
+    session.on('taskFailed', (task: BackgroundTask, error: string) => {
+      this.broadcast('task:failed', { sessionId: session.id, task, error });
+      this.broadcast('session:updated', session.toDetailedState());
+    });
+
+    session.on('autoClear', (data: { tokens: number; threshold: number }) => {
+      this.broadcast('session:autoClear', { sessionId: session.id, ...data });
+      this.broadcast('session:updated', session.toDetailedState());
+    });
   }
 
   private setupRespawnListeners(sessionId: string, controller: RespawnController): void {
@@ -617,6 +711,30 @@ export class WebServer extends EventEmitter {
     });
   }
 
+  private setupTimedRespawn(sessionId: string, durationMinutes: number): void {
+    // Clear existing timer if any
+    const existing = this.respawnTimers.get(sessionId);
+    if (existing) {
+      clearTimeout(existing.timer);
+    }
+
+    const now = Date.now();
+    const endAt = now + durationMinutes * 60 * 1000;
+
+    const timer = setTimeout(() => {
+      // Stop respawn when time is up
+      const controller = this.respawnControllers.get(sessionId);
+      if (controller) {
+        controller.stop();
+        this.broadcast('respawn:stopped', { sessionId, reason: 'duration_expired' });
+      }
+      this.respawnTimers.delete(sessionId);
+    }, durationMinutes * 60 * 1000);
+
+    this.respawnTimers.set(sessionId, { timer, endAt, startedAt: now });
+    this.broadcast('respawn:timerStarted', { sessionId, durationMinutes, endAt, startedAt: now });
+  }
+
   private async startScheduledRun(prompt: string, workingDir: string, durationMinutes: number): Promise<ScheduledRun> {
     const id = uuidv4();
     const now = Date.now();