diff --git a/chrome-extension/public/manifest.json b/chrome-extension/public/manifest.json
index 5ab7ca3..34fde9a 100644
--- a/chrome-extension/public/manifest.json
+++ b/chrome-extension/public/manifest.json
@@ -15,7 +15,8 @@
     "storage",
     "sidePanel",
     "nativeMessaging",
-    "tabs"
+    "tabs",
+    "scripting"
   ],
   "host_permissions": [
     "<all_urls>"
@@ -35,5 +36,12 @@
     },
     "default_title": "reverse-api-engineer"
   },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content/codegen-recorder.js"],
+      "run_at": "document_start"
+    }
+  ],
   "default_locale": "en"
 }
diff --git a/chrome-extension/src/background/service-worker.ts b/chrome-extension/src/background/service-worker.ts
index d948b1d..febda25 100644
--- a/chrome-extension/src/background/service-worker.ts
+++ b/chrome-extension/src/background/service-worker.ts
@@ -8,24 +8,46 @@ import {
   getSettings,
   saveSettings,
   getCurrentSession,
-  saveCurrentSession,
   clearCapturedRequests,
-  addCapturedRequest
+  addCapturedRequest,
+  getAllSessions,
+  getSession,
+  saveSession,
+  deleteSession as deleteSessionFromStorage,
+  getActiveSessionId,
+  setActiveSessionId,
+  getAppMode,
+  setAppMode
 } from '../shared/storage'
+import type { Session, AppMode } from '../shared/types'
 
 let currentRunId: string | null = null
+let activeSessionId: string | null = null
 let nativeHostConnected = false
+let currentMode: AppMode = 'capture'
+
+// Codegen state
+let codegenActive = false
+let codegenScript = ''
+let codegenTabId: number | null = null
 
 async function initialize(): Promise<void> {
   console.log('Reverse API Engineer: Initializing...')
   chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true })
 
-  const session = await getCurrentSession()
-  if (session) {
-    currentRunId = session.runId
-    console.log('Restored session:', currentRunId)
+  // Restore active session
+  activeSessionId = await getActiveSessionId()
+  if (activeSessionId) {
+    const session = await getSession(activeSessionId)
+    if (session) {
+      currentRunId = session.runId
+      console.log('Restored session:', currentRunId)
+    }
   }
 
+  // Restore mode
+  currentMode = await getAppMode()
+
   await checkNativeHost()
   captureManager.addListener(handleCaptureEvent)
   console.log('Reverse API Engineer: Ready')
@@ -45,7 +67,7 @@ async function checkNativeHost(): Promise<boolean> {
 function handleCaptureEvent(event: { type: string; request?: unknown }): void {
   broadcastMessage({ type: 'captureEvent', event })
   if (event.type === 'complete' || event.type === 'failed') {
-    addCapturedRequest(event.request)
+    addCapturedRequest(event.request, activeSessionId || undefined)
   }
 }
 
@@ -83,6 +105,27 @@ async function handleMessage(message: { type: string; [key: string]: unknown }):
       return nativeHost.getStatus()
     case 'chat':
       return handleChat(message.message as string, message.model as string | undefined)
+    // Session management
+    case 'getSessions':
+      return getAllSessions()
+    case 'createSession':
+      return createSession(message.name as string | undefined)
+    case 'switchSession':
+      return switchSession(message.sessionId as string)
+    case 'deleteSession':
+      return deleteSession(message.sessionId as string)
+    case 'renameSession':
+      return renameSession(message.sessionId as string, message.name as string)
+    // Mode management
+    case 'setMode':
+      return setMode(message.mode as AppMode)
+    case 'startCodegen':
+      return startCodegen()
+    case 'stopCodegen':
+      return stopCodegen()
+    // Codegen state for content script
+    case 'getCodegenState':
+      return { codegenActive, codegenTabId }
     default:
       throw new Error(`Unknown message type: ${message.type}`)
   }
@@ -90,6 +133,7 @@ async function handleMessage(message: { type: string; [key: string]: unknown }):
 
 async function getState(): Promise<Record<string, unknown>> {
   const session = await getCurrentSession()
+  const sessions = await getAllSessions()
   const settings = await getSettings()
   const stats = captureManager.getStats()
 
@@ -97,12 +141,215 @@ async function getState(): Promise<Record<string, unknown>> {
     capturing: captureManager.isCapturing(),
     runId: currentRunId,
     session,
+    sessions,
     settings,
     stats,
-    nativeHostConnected
+    nativeHostConnected,
+    activeSessionId,
+    mode: currentMode,
+    codegenActive,
+    codegenScript
+  }
+}
+
+// Session management functions
+async function createSession(name?: string): Promise<{ success: boolean; session: Session }> {
+  const runId = generateRunId()
+  const sessionId = `session_${Date.now()}`
+  const sessionName = name || `Session ${new Date().toLocaleString()}`
+
+  const newSession: Session = {
+    id: sessionId,
+    runId,
+    name: sessionName,
+    tabId: 0,
+    startTime: new Date().toISOString(),
+    requestCount: 0,
+    isActive: true,
+    messages: []
+  }
+
+  await saveSession(newSession)
+
+  // Don't switch if currently capturing - just create the session
+  if (!captureManager.isCapturing()) {
+    await setActiveSessionId(sessionId)
+    activeSessionId = sessionId
+    currentRunId = runId
+  }
+
+  broadcastMessage({ type: 'sessionCreated', session: newSession })
+
+  return { success: true, session: newSession }
+}
+
+async function switchSession(sessionId: string): Promise<{ success: boolean; session: Session | null }> {
+  // Don't allow switching if capturing on current session
+  if (captureManager.isCapturing()) {
+    throw new Error('Cannot switch sessions while capturing. Stop capture first.')
+  }
+
+  const session = await getSession(sessionId)
+  if (!session) {
+    throw new Error('Session not found')
+  }
+
+  await setActiveSessionId(sessionId)
+  activeSessionId = sessionId
+  currentRunId = session.runId
+
+  broadcastMessage({ type: 'sessionSwitched', session })
+
+  return { success: true, session }
+}
+
+async function deleteSession(sessionId: string): Promise<{ success: boolean }> {
+  // Don't allow deleting active session while capturing
+  if (sessionId === activeSessionId && captureManager.isCapturing()) {
+    throw new Error('Cannot delete active session while capturing.')
+  }
+
+  await deleteSessionFromStorage(sessionId)
+
+  // If we deleted the active session, clear the active state
+  if (sessionId === activeSessionId) {
+    await setActiveSessionId(null)
+    activeSessionId = null
+    currentRunId = null
+  }
+
+  broadcastMessage({ type: 'sessionDeleted', sessionId })
+
+  return { success: true }
+}
+
+async function renameSession(sessionId: string, name: string): Promise<{ success: boolean; session: Session | null }> {
+  const session = await getSession(sessionId)
+  if (!session) {
+    throw new Error('Session not found')
   }
+
+  session.name = name
+  await saveSession(session)
+
+  broadcastMessage({ type: 'sessionRenamed', session })
+
+  return { success: true, session }
+}
+
+// Mode management
+async function setMode(mode: AppMode): Promise<{ success: boolean; mode: AppMode }> {
+  currentMode = mode
+  await setAppMode(mode)
+  broadcastMessage({ type: 'modeChanged', mode })
+  return { success: true, mode }
 }
 
+// Codegen functions
+async function startCodegen(): Promise<{ success: boolean }> {
+  if (codegenActive) {
+    throw new Error('Codegen already active')
+  }
+
+  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
+  if (!tab?.id) throw new Error('No active tab')
+  codegenTabId = tab.id
+
+  codegenActive = true
+  codegenScript = `from playwright.sync_api import sync_playwright
+
+def run():
+    with sync_playwright() as p:
+        browser = p.chromium.launch(headless=False)
+        page = browser.new_page()
+        page.goto("${tab.url || 'about:blank'}")
+
+`
+
+  // Send message to content script to start recording
+  try {
+    await chrome.tabs.sendMessage(codegenTabId, { type: 'startCodegenRecording' })
+  } catch (error) {
+    console.error('Failed to start content script recording:', error)
+  }
+
+  broadcastMessage({ type: 'codegenStarted', script: codegenScript })
+
+  return { success: true }
+}
+
+async function stopCodegen(): Promise<{ success: boolean; script: string }> {
+  if (!codegenActive) {
+    throw new Error('Codegen not active')
+  }
+
+  // Close the script
+  codegenScript += `        browser.close()
+
+if __name__ == "__main__":
+    run()
+`
+
+  // Send message to content script to stop recording
+  if (codegenTabId) {
+    try {
+      await chrome.tabs.sendMessage(codegenTabId, { type: 'stopCodegenRecording' })
+    } catch (error) {
+      console.error('Failed to stop content script recording:', error)
+    }
+  }
+
+  codegenActive = false
+  const finalScript = codegenScript
+
+  // Save to active session if exists
+  if (activeSessionId) {
+    const session = await getSession(activeSessionId)
+    if (session) {
+      session.codegenScript = finalScript
+      await saveSession(session)
+    }
+  }
+
+  broadcastMessage({ type: 'codegenStopped', script: finalScript })
+
+  codegenTabId = null
+
+  return { success: true, script: finalScript }
+}
+
+// Listen for codegen events from content script
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === 'codegenAction' && codegenActive && sender.tab?.id === codegenTabId) {
+    const { action, selector, value, url } = message
+    let code = ''
+
+    switch (action) {
+      case 'click':
+        code = `        page.click("${selector}")\n`
+        break
+      case 'fill':
+        code = `        page.fill("${selector}", "${value}")\n`
+        break
+      case 'navigate':
+        code = `        page.goto("${url}")\n`
+        break
+      case 'select':
+        code = `        page.select_option("${selector}", "${value}")\n`
+        break
+    }
+
+    if (code) {
+      codegenScript += code
+      broadcastMessage({ type: 'codegenUpdate', script: codegenScript, newCode: code })
+    }
+
+    sendResponse({ success: true })
+    return true
+  }
+  return false
+})
+
 async function startCapture(tabId?: number): Promise<{ success: boolean; runId: string; tabId: number }> {
   if (captureManager.isCapturing()) {
     throw new Error('Already capturing')
@@ -114,18 +361,29 @@ async function startCapture(tabId?: number): Promise<{ success: boolean; runId:
     tabId = tab.id
   }
 
+  // Create a new session if none exists
+  if (!activeSessionId) {
+    const { session } = await createSession()
+    activeSessionId = session.id
+    currentRunId = session.runId
+  }
+
   currentRunId = generateRunId()
   const settings = await getSettings()
-  await clearCapturedRequests()
+  await clearCapturedRequests(activeSessionId || undefined)
 
   await captureManager.start(tabId, { captureTypes: settings.captureTypes })
 
-  await saveCurrentSession({
-    runId: currentRunId,
-    tabId,
-    startTime: new Date().toISOString(),
-    requestCount: 0
-  })
+  // Update the active session
+  const session = await getSession(activeSessionId)
+  if (session) {
+    session.runId = currentRunId
+    session.tabId = tabId
+    session.startTime = new Date().toISOString()
+    session.requestCount = 0
+    session.isActive = true
+    await saveSession(session)
+  }
 
   chrome.action.setBadgeText({ text: 'REC' })
   chrome.action.setBadgeBackgroundColor({ color: '#ff0000' })
@@ -145,7 +403,8 @@ async function stopCapture(): Promise<{ success: boolean; runId: string | null;
   if (session && har) {
     session.endTime = new Date().toISOString()
     session.requestCount = har.log.entries.length
-    await saveCurrentSession(session)
+    session.isActive = false
+    await saveSession(session)
   }
 
   let harPath: string | null = null
diff --git a/chrome-extension/src/components/code-display.tsx b/chrome-extension/src/components/code-display.tsx
new file mode 100644
index 0000000..b064bf3
--- /dev/null
+++ b/chrome-extension/src/components/code-display.tsx
@@ -0,0 +1,179 @@
+import { useRef, useEffect, useState } from 'react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import { Button } from '@base-ui/react/button'
+
+interface CodeDisplayProps {
+  code: string
+  language?: string
+  title?: string
+  isLive?: boolean
+  onCopy?: () => void
+}
+
+export function CodeDisplay({
+  code,
+  language = 'python',
+  title = 'Generated Script',
+  isLive = false,
+  onCopy
+}: CodeDisplayProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [copied, setCopied] = useState(false)
+  const [autoScroll, setAutoScroll] = useState(true)
+
+  // Auto-scroll to bottom when new code is added
+  useEffect(() => {
+    if (autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight
+    }
+  }, [code, autoScroll])
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+      onCopy?.()
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+
+  const handleScroll = () => {
+    if (containerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = containerRef.current
+      // If user scrolls up, disable auto-scroll
+      // If they scroll to bottom, re-enable it
+      const isAtBottom = scrollHeight - scrollTop - clientHeight < 50
+      setAutoScroll(isAtBottom)
+    }
+  }
+
+  const lineCount = code.split('\n').length
+
+  return (
+    <div className="flex flex-col h-full bg-[#0d0d0d] rounded border border-white/10 overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2 bg-white/5 border-b border-white/10">
+        <div className="flex items-center gap-2">
+          <CodeIcon />
+          <span className="text-[11px] font-bold text-white/80 uppercase tracking-wider">{title}</span>
+          {isLive && (
+            <span className="flex items-center gap-1.5 px-2 py-0.5 bg-green-500/20 text-green-400 text-[9px] font-bold uppercase tracking-wider rounded">
+              <span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
+              Live
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] text-white/40">{lineCount} lines</span>
+          <Button
+            onClick={handleCopy}
+            className="flex items-center gap-1 px-2 py-1 text-[10px] text-white/60 hover:text-white hover:bg-white/10 rounded transition-colors"
+          >
+            {copied ? <CheckIcon /> : <CopyIcon />}
+            {copied ? 'Copied!' : 'Copy'}
+          </Button>
+        </div>
+      </div>
+
+      {/* Code content */}
+      <div
+        ref={containerRef}
+        onScroll={handleScroll}
+        className="flex-1 overflow-auto custom-scrollbar"
+      >
+        {code ? (
+          <SyntaxHighlighter
+            style={vscDarkPlus}
+            language={language}
+            PreTag="div"
+            showLineNumbers
+            lineNumberStyle={{
+              minWidth: '3em',
+              paddingRight: '1em',
+              color: 'rgba(255, 255, 255, 0.2)',
+              textAlign: 'right',
+              userSelect: 'none'
+            }}
+            customStyle={{
+              margin: 0,
+              padding: '1rem',
+              background: 'transparent',
+              fontSize: '12px',
+              lineHeight: '1.6'
+            }}
+          >
+            {code}
+          </SyntaxHighlighter>
+        ) : (
+          <div className="flex flex-col items-center justify-center h-full text-white/30 p-8">
+            <EmptyCodeIcon />
+            <p className="mt-4 text-[11px] text-center">
+              {isLive ? 'Waiting for actions...' : 'No code generated yet'}
+            </p>
+            {isLive && (
+              <p className="mt-1 text-[10px] text-white/20">
+                Interact with the page to record actions
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Auto-scroll indicator */}
+      {!autoScroll && code && (
+        <div className="px-3 py-1.5 bg-primary/10 border-t border-primary/20">
+          <button
+            onClick={() => {
+              setAutoScroll(true)
+              if (containerRef.current) {
+                containerRef.current.scrollTop = containerRef.current.scrollHeight
+              }
+            }}
+            className="text-[10px] text-primary hover:text-primary/80 transition-colors"
+          >
+            Resume auto-scroll
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function CodeIcon() {
+  return (
+    <svg className="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+    </svg>
+  )
+}
+
+function CopyIcon() {
+  return (
+    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+    </svg>
+  )
+}
+
+function CheckIcon() {
+  return (
+    <svg className="w-3 h-3 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+    </svg>
+  )
+}
+
+function EmptyCodeIcon() {
+  return (
+    <svg className="w-12 h-12 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+      <polyline strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} points="14 2 14 8 20 8" />
+      <line strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} x1="16" y1="13" x2="8" y2="13" />
+      <line strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} x1="16" y1="17" x2="8" y2="17" />
+      <polyline strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} points="10 9 9 9 8 9" />
+    </svg>
+  )
+}
diff --git a/chrome-extension/src/components/mode-selector.tsx b/chrome-extension/src/components/mode-selector.tsx
new file mode 100644
index 0000000..b70f2d0
--- /dev/null
+++ b/chrome-extension/src/components/mode-selector.tsx
@@ -0,0 +1,36 @@
+import type { AppMode } from '../shared/types'
+
+interface ModeSelectorProps {
+  mode: AppMode
+  onModeChange: (mode: AppMode) => void
+  disabled?: boolean
+}
+
+export function ModeSelector({ mode, onModeChange, disabled }: ModeSelectorProps) {
+  return (
+    <div className="flex items-center bg-white/5 rounded border border-white/10 p-0.5">
+      <button
+        onClick={() => onModeChange('capture')}
+        disabled={disabled}
+        className={`px-3 py-1 text-[10px] font-bold uppercase tracking-wider rounded transition-all ${
+          mode === 'capture'
+            ? 'bg-primary/20 text-primary'
+            : 'text-white/50 hover:text-white/80 hover:bg-white/5'
+        } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+      >
+        Capture
+      </button>
+      <button
+        onClick={() => onModeChange('codegen')}
+        disabled={disabled}
+        className={`px-3 py-1 text-[10px] font-bold uppercase tracking-wider rounded transition-all ${
+          mode === 'codegen'
+            ? 'bg-primary/20 text-primary'
+            : 'text-white/50 hover:text-white/80 hover:bg-white/5'
+        } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+      >
+        Codegen
+      </button>
+    </div>
+  )
+}
diff --git a/chrome-extension/src/components/session-selector.tsx b/chrome-extension/src/components/session-selector.tsx
new file mode 100644
index 0000000..e5620f3
--- /dev/null
+++ b/chrome-extension/src/components/session-selector.tsx
@@ -0,0 +1,265 @@
+import { useState, useRef, useEffect } from 'react'
+import { Button } from '@base-ui/react/button'
+import type { Session } from '../shared/types'
+
+interface SessionSelectorProps {
+  sessions: Session[]
+  activeSessionId: string | null
+  isCapturing: boolean
+  onCreateSession: (name?: string) => void
+  onSwitchSession: (sessionId: string) => void
+  onDeleteSession: (sessionId: string) => void
+  onRenameSession: (sessionId: string, name: string) => void
+}
+
+export function SessionSelector({
+  sessions,
+  activeSessionId,
+  isCapturing,
+  onCreateSession,
+  onSwitchSession,
+  onDeleteSession,
+  onRenameSession
+}: SessionSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [editName, setEditName] = useState('')
+  const [newSessionName, setNewSessionName] = useState('')
+  const [showNewInput, setShowNewInput] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const activeSession = sessions.find(s => s.id === activeSessionId)
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+        setEditingId(null)
+        setShowNewInput(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  // Focus input when editing
+  useEffect(() => {
+    if ((editingId || showNewInput) && inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [editingId, showNewInput])
+
+  const handleCreateSession = () => {
+    if (showNewInput && newSessionName.trim()) {
+      onCreateSession(newSessionName.trim())
+      setNewSessionName('')
+      setShowNewInput(false)
+    } else {
+      setShowNewInput(true)
+    }
+  }
+
+  const handleNewSessionKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && newSessionName.trim()) {
+      onCreateSession(newSessionName.trim())
+      setNewSessionName('')
+      setShowNewInput(false)
+    } else if (e.key === 'Escape') {
+      setShowNewInput(false)
+      setNewSessionName('')
+    }
+  }
+
+  const handleRenameKeyDown = (e: React.KeyboardEvent, sessionId: string) => {
+    if (e.key === 'Enter' && editName.trim()) {
+      onRenameSession(sessionId, editName.trim())
+      setEditingId(null)
+    } else if (e.key === 'Escape') {
+      setEditingId(null)
+    }
+  }
+
+  const startEditing = (session: Session) => {
+    setEditingId(session.id)
+    setEditName(session.name)
+  }
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString)
+    return date.toLocaleString(undefined, {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <Button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-1.5 text-[11px] font-medium text-white/80 hover:text-white bg-white/5 hover:bg-white/10 border border-white/10 rounded transition-all"
+      >
+        <FolderIcon />
+        <span className="truncate max-w-[120px]">
+          {activeSession?.name || 'No Session'}
+        </span>
+        <ChevronIcon isOpen={isOpen} />
+      </Button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1 w-72 bg-[#141414] border border-white/10 rounded shadow-xl z-50 overflow-hidden">
+          {/* Header */}
+          <div className="px-3 py-2 border-b border-white/10 bg-white/5">
+            <div className="flex items-center justify-between">
+              <span className="text-[10px] font-bold text-white/50 uppercase tracking-wider">Sessions</span>
+              <Button
+                onClick={handleCreateSession}
+                className="text-[10px] text-primary hover:text-primary/80 font-medium transition-colors"
+              >
+                + New
+              </Button>
+            </div>
+          </div>
+
+          {/* New session input */}
+          {showNewInput && (
+            <div className="px-3 py-2 border-b border-white/10 bg-primary/5">
+              <input
+                ref={inputRef}
+                type="text"
+                value={newSessionName}
+                onChange={(e) => setNewSessionName(e.target.value)}
+                onKeyDown={handleNewSessionKeyDown}
+                placeholder="Session name..."
+                className="w-full bg-transparent text-xs text-white placeholder:text-white/30 border-none outline-none"
+              />
+            </div>
+          )}
+
+          {/* Session list */}
+          <div className="max-h-64 overflow-y-auto">
+            {sessions.length === 0 ? (
+              <div className="px-3 py-4 text-center text-[11px] text-white/30">
+                No sessions yet
+              </div>
+            ) : (
+              sessions.map(session => (
+                <div
+                  key={session.id}
+                  className={`group flex items-center gap-2 px-3 py-2 hover:bg-white/5 cursor-pointer transition-colors ${
+                    session.id === activeSessionId ? 'bg-primary/10 border-l-2 border-primary' : ''
+                  }`}
+                  onClick={() => {
+                    if (!editingId && session.id !== activeSessionId) {
+                      onSwitchSession(session.id)
+                      setIsOpen(false)
+                    }
+                  }}
+                >
+                  {editingId === session.id ? (
+                    <input
+                      ref={inputRef}
+                      type="text"
+                      value={editName}
+                      onChange={(e) => setEditName(e.target.value)}
+                      onKeyDown={(e) => handleRenameKeyDown(e, session.id)}
+                      onClick={(e) => e.stopPropagation()}
+                      className="flex-1 bg-transparent text-xs text-white border border-primary/50 rounded px-1 py-0.5 outline-none"
+                    />
+                  ) : (
+                    <>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="text-xs text-white truncate">{session.name}</span>
+                          {session.isActive && (
+                            <span className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse" />
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2 text-[10px] text-white/40">
+                          <span>{formatDate(session.startTime)}</span>
+                          <span>•</span>
+                          <span>{session.requestCount} requests</span>
+                        </div>
+                      </div>
+
+                      {/* Actions */}
+                      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <Button
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            startEditing(session)
+                          }}
+                          className="p-1 text-white/40 hover:text-white/80 transition-colors"
+                          title="Rename"
+                        >
+                          <EditIcon />
+                        </Button>
+                        {session.id !== activeSessionId && !isCapturing && (
+                          <Button
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              onDeleteSession(session.id)
+                            }}
+                            className="p-1 text-white/40 hover:text-red-400 transition-colors"
+                            title="Delete"
+                          >
+                            <TrashIcon />
+                          </Button>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
+              ))
+            )}
+          </div>
+
+          {/* Footer with warning if capturing */}
+          {isCapturing && (
+            <div className="px-3 py-2 border-t border-white/10 bg-yellow-500/10">
+              <span className="text-[10px] text-yellow-500/80">
+                Stop capture to switch sessions
+              </span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function FolderIcon() {
+  return (
+    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+    </svg>
+  )
+}
+
+function ChevronIcon({ isOpen }: { isOpen: boolean }) {
+  return (
+    <svg className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+    </svg>
+  )
+}
+
+function EditIcon() {
+  return (
+    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+    </svg>
+  )
+}
+
+function TrashIcon() {
+  return (
+    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+    </svg>
+  )
+}
diff --git a/chrome-extension/src/content/codegen-recorder.ts b/chrome-extension/src/content/codegen-recorder.ts
new file mode 100644
index 0000000..0923a5c
--- /dev/null
+++ b/chrome-extension/src/content/codegen-recorder.ts
@@ -0,0 +1,247 @@
+/**
+ * Content script for recording user interactions for Playwright codegen
+ */
+
+let isRecording = false
+
+// Generate a robust CSS selector for an element
+function getSelector(element: Element): string {
+  // Try data-testid first
+  if (element.hasAttribute('data-testid')) {
+    return `[data-testid="${element.getAttribute('data-testid')}"]`
+  }
+
+  // Try id
+  if (element.id) {
+    return `#${CSS.escape(element.id)}`
+  }
+
+  // Try unique class combination
+  if (element.classList.length > 0) {
+    const classes = Array.from(element.classList)
+      .filter(c => !c.match(/^(active|hover|focus|selected|open|closed|hidden|visible)/i))
+      .slice(0, 3)
+    if (classes.length > 0) {
+      const selector = classes.map(c => `.${CSS.escape(c)}`).join('')
+      const matches = document.querySelectorAll(selector)
+      if (matches.length === 1) {
+        return selector
+      }
+    }
+  }
+
+  // Try name attribute for form elements
+  if (element.hasAttribute('name')) {
+    const name = element.getAttribute('name')
+    const tag = element.tagName.toLowerCase()
+    const selector = `${tag}[name="${name}"]`
+    const matches = document.querySelectorAll(selector)
+    if (matches.length === 1) {
+      return selector
+    }
+  }
+
+  // Try placeholder for inputs
+  if (element.hasAttribute('placeholder')) {
+    const placeholder = element.getAttribute('placeholder')
+    return `[placeholder="${placeholder}"]`
+  }
+
+  // Try aria-label
+  if (element.hasAttribute('aria-label')) {
+    return `[aria-label="${element.getAttribute('aria-label')}"]`
+  }
+
+  // Try text content for buttons and links
+  if (element.tagName === 'BUTTON' || element.tagName === 'A') {
+    const text = element.textContent?.trim().slice(0, 30)
+    if (text) {
+      return `text="${text}"`
+    }
+  }
+
+  // Fall back to tag + nth-child
+  const parent = element.parentElement
+  if (parent) {
+    const siblings = Array.from(parent.children)
+    const index = siblings.indexOf(element) + 1
+    const tag = element.tagName.toLowerCase()
+    const parentSelector = getSelector(parent)
+    if (parentSelector !== 'body') {
+      return `${parentSelector} > ${tag}:nth-child(${index})`
+    }
+  }
+
+  // Last resort: just the tag
+  return element.tagName.toLowerCase()
+}
+
+// Escape string for Python
+function escapeString(str: string): string {
+  return str
+    .replace(/\\/g, '\\\\')
+    .replace(/"/g, '\\"')
+    .replace(/\n/g, '\\n')
+    .replace(/\r/g, '\\r')
+    .replace(/\t/g, '\\t')
+}
+
+// Send action to background script
+function sendAction(action: string, data: Record<string, unknown>) {
+  chrome.runtime.sendMessage({
+    type: 'codegenAction',
+    action,
+    ...data
+  }).catch(() => {
+    // Extension might not be listening
+  })
+}
+
+// Track the last input element to capture its final value
+let lastInputElement: HTMLInputElement | HTMLTextAreaElement | null = null
+let inputTimeout: ReturnType<typeof setTimeout> | null = null
+
+function handleClick(event: MouseEvent) {
+  if (!isRecording) return
+
+  const target = event.target as Element
+  if (!target) return
+
+  // Skip clicks on the extension's own elements
+  if (target.closest('[data-codegen-ignore]')) return
+
+  // Commit any pending input
+  commitPendingInput()
+
+  const selector = getSelector(target)
+
+  // Check if it's a select element
+  if (target.tagName === 'SELECT') {
+    // Will be handled by change event
+    return
+  }
+
+  sendAction('click', { selector })
+}
+
+function handleInput(event: Event) {
+  if (!isRecording) return
+
+  const target = event.target as HTMLInputElement | HTMLTextAreaElement
+  if (!target) return
+
+  // Track the input element
+  lastInputElement = target
+
+  // Debounce the input to get the final value
+  if (inputTimeout) {
+    clearTimeout(inputTimeout)
+  }
+
+  inputTimeout = setTimeout(() => {
+    commitPendingInput()
+  }, 500)
+}
+
+function commitPendingInput() {
+  if (!lastInputElement) return
+
+  const selector = getSelector(lastInputElement)
+  const value = escapeString(lastInputElement.value)
+
+  if (value) {
+    sendAction('fill', { selector, value })
+  }
+
+  lastInputElement = null
+  if (inputTimeout) {
+    clearTimeout(inputTimeout)
+    inputTimeout = null
+  }
+}
+
+function handleChange(event: Event) {
+  if (!isRecording) return
+
+  const target = event.target as HTMLSelectElement
+  if (!target || target.tagName !== 'SELECT') return
+
+  const selector = getSelector(target)
+  const value = escapeString(target.value)
+
+  sendAction('select', { selector, value })
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (!isRecording) return
+
+  // Commit input on Enter
+  if (event.key === 'Enter') {
+    commitPendingInput()
+  }
+}
+
+// Handle navigation
+let lastUrl = window.location.href
+function checkNavigation() {
+  if (window.location.href !== lastUrl) {
+    lastUrl = window.location.href
+    if (isRecording) {
+      sendAction('navigate', { url: lastUrl })
+    }
+  }
+}
+
+// Start recording
+function startRecording() {
+  if (isRecording) return
+
+  isRecording = true
+  lastUrl = window.location.href
+
+  document.addEventListener('click', handleClick, true)
+  document.addEventListener('input', handleInput, true)
+  document.addEventListener('change', handleChange, true)
+  document.addEventListener('keydown', handleKeyDown, true)
+
+  // Check for navigation periodically
+  setInterval(checkNavigation, 100)
+
+  console.log('[Codegen] Recording started')
+}
+
+// Stop recording
+function stopRecording() {
+  if (!isRecording) return
+
+  commitPendingInput()
+  isRecording = false
+
+  document.removeEventListener('click', handleClick, true)
+  document.removeEventListener('input', handleInput, true)
+  document.removeEventListener('change', handleChange, true)
+  document.removeEventListener('keydown', handleKeyDown, true)
+
+  console.log('[Codegen] Recording stopped')
+}
+
+// Listen for messages from background script
+chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+  if (message.type === 'startCodegenRecording') {
+    startRecording()
+    sendResponse({ success: true })
+  } else if (message.type === 'stopCodegenRecording') {
+    stopRecording()
+    sendResponse({ success: true })
+  }
+  return true
+})
+
+// Check if we should be recording on load
+chrome.runtime.sendMessage({ type: 'getCodegenState' }).then(response => {
+  if (response?.codegenActive) {
+    startRecording()
+  }
+}).catch(() => {
+  // Extension not ready yet
+})
diff --git a/chrome-extension/src/shared/storage.ts b/chrome-extension/src/shared/storage.ts
index c10332e..1f981ca 100644
--- a/chrome-extension/src/shared/storage.ts
+++ b/chrome-extension/src/shared/storage.ts
@@ -2,7 +2,7 @@
  * Storage management for the extension
  */
 
-import type { Settings } from './types'
+import type { Settings, Session, ChatMessage, AppMode } from './types'
 
 const DEFAULT_SETTINGS: Settings = {
   captureTypes: ['xhr', 'fetch', 'websocket'],
@@ -21,46 +21,122 @@ export async function saveSettings(settings: Partial<Settings>): Promise<void> {
   })
 }
 
-interface Session {
-  runId: string
-  tabId: number
-  startTime: string
-  endTime?: string
-  requestCount: number
+// Multi-session storage functions
+
+export async function getAllSessions(): Promise<Session[]> {
+  const result = await chrome.storage.local.get('sessions')
+  return result.sessions || []
+}
+
+export async function saveAllSessions(sessions: Session[]): Promise<void> {
+  await chrome.storage.local.set({ sessions })
+}
+
+export async function getSession(sessionId: string): Promise<Session | null> {
+  const sessions = await getAllSessions()
+  return sessions.find(s => s.id === sessionId) || null
+}
+
+export async function saveSession(session: Session): Promise<void> {
+  const sessions = await getAllSessions()
+  const index = sessions.findIndex(s => s.id === session.id)
+  if (index >= 0) {
+    sessions[index] = session
+  } else {
+    sessions.push(session)
+  }
+  await saveAllSessions(sessions)
+}
+
+export async function deleteSession(sessionId: string): Promise<void> {
+  const sessions = await getAllSessions()
+  const filtered = sessions.filter(s => s.id !== sessionId)
+  await saveAllSessions(filtered)
+  // Also clean up captured requests for this session
+  await chrome.storage.local.remove(`capturedRequests_${sessionId}`)
+}
+
+export async function getActiveSessionId(): Promise<string | null> {
+  const result = await chrome.storage.local.get('activeSessionId')
+  return result.activeSessionId || null
+}
+
+export async function setActiveSessionId(sessionId: string | null): Promise<void> {
+  if (sessionId) {
+    await chrome.storage.local.set({ activeSessionId: sessionId })
+  } else {
+    await chrome.storage.local.remove('activeSessionId')
+  }
 }
 
+export async function getActiveSession(): Promise<Session | null> {
+  const activeId = await getActiveSessionId()
+  if (!activeId) return null
+  return getSession(activeId)
+}
+
+export async function updateSessionMessages(sessionId: string, messages: ChatMessage[]): Promise<void> {
+  const session = await getSession(sessionId)
+  if (session) {
+    session.messages = messages
+    await saveSession(session)
+  }
+}
+
+export async function updateSessionCodegenScript(sessionId: string, script: string): Promise<void> {
+  const session = await getSession(sessionId)
+  if (session) {
+    session.codegenScript = script
+    await saveSession(session)
+  }
+}
+
+// Mode storage
+export async function getAppMode(): Promise<AppMode> {
+  const result = await chrome.storage.local.get('appMode')
+  return result.appMode || 'capture'
+}
+
+export async function setAppMode(mode: AppMode): Promise<void> {
+  await chrome.storage.local.set({ appMode: mode })
+}
+
+// Legacy functions for backward compatibility
 export async function getCurrentSession(): Promise<Session | null> {
-  const result = await chrome.storage.local.get('currentSession')
-  return result.currentSession || null
+  return getActiveSession()
 }
 
-export async function saveCurrentSession(session: Session): Promise<void> {
-  await chrome.storage.local.set({ currentSession: session })
+export async function saveCurrentSession(session: Partial<Session> & { runId: string; tabId: number; startTime: string; requestCount: number }): Promise<void> {
+  const existingSession = await getActiveSession()
+  if (existingSession) {
+    const updatedSession: Session = {
+      ...existingSession,
+      ...session,
+    }
+    await saveSession(updatedSession)
+  }
 }
 
 export async function clearCurrentSession(): Promise<void> {
-  await chrome.storage.local.remove('currentSession')
+  await setActiveSessionId(null)
 }
 
-export async function getCapturedRequests(): Promise<unknown[]> {
-  const result = await chrome.storage.local.get('capturedRequests')
-  return result.capturedRequests || []
+export async function getCapturedRequests(sessionId?: string): Promise<unknown[]> {
+  const key = sessionId ? `capturedRequests_${sessionId}` : 'capturedRequests'
+  const result = await chrome.storage.local.get(key)
+  return result[key] || []
 }
 
-export async function addCapturedRequest(request: unknown): Promise<void> {
-  const requests = await getCapturedRequests()
+export async function addCapturedRequest(request: unknown, sessionId?: string): Promise<void> {
+  const key = sessionId ? `capturedRequests_${sessionId}` : 'capturedRequests'
+  const requests = await getCapturedRequests(sessionId)
   requests.push(request)
-  await chrome.storage.local.set({ capturedRequests: requests })
-}
-
-export async function clearCapturedRequests(): Promise<void> {
-  await chrome.storage.local.set({ capturedRequests: [] })
+  await chrome.storage.local.set({ [key]: requests })
 }
 
-interface ChatMessage {
-  role: 'user' | 'assistant'
-  content: string
-  timestamp: string
+export async function clearCapturedRequests(sessionId?: string): Promise<void> {
+  const key = sessionId ? `capturedRequests_${sessionId}` : 'capturedRequests'
+  await chrome.storage.local.set({ [key]: [] })
 }
 
 export async function getChatHistory(runId: string): Promise<ChatMessage[]> {
diff --git a/chrome-extension/src/shared/types.ts b/chrome-extension/src/shared/types.ts
index 61ea856..0d348bc 100644
--- a/chrome-extension/src/shared/types.ts
+++ b/chrome-extension/src/shared/types.ts
@@ -1,3 +1,26 @@
+export interface Session {
+  id: string
+  runId: string
+  name: string
+  tabId: number
+  startTime: string
+  endTime?: string
+  requestCount: number
+  isActive: boolean
+  messages: ChatMessage[]
+  codegenScript?: string
+}
+
+export interface ChatMessage {
+  id: string
+  role: 'user' | 'assistant'
+  content?: string
+  events?: AgentEvent[]
+  timestamp: string
+}
+
+export type AppMode = 'capture' | 'codegen'
+
 export interface AppState {
   capturing: boolean
   runId: string | null
@@ -7,6 +30,8 @@ export interface AppState {
     total: number
   }
   current_task?: string | null
+  activeSessionId: string | null
+  mode: AppMode
 }
 
 export interface AgentEvent {
@@ -34,6 +59,14 @@ export type MessageType =
   | { type: 'chat'; message: string; model?: string }
   | { type: 'getSettings' }
   | { type: 'saveSettings'; settings: Settings }
+  | { type: 'getSessions' }
+  | { type: 'createSession'; name?: string }
+  | { type: 'switchSession'; sessionId: string }
+  | { type: 'deleteSession'; sessionId: string }
+  | { type: 'renameSession'; sessionId: string; name: string }
+  | { type: 'setMode'; mode: AppMode }
+  | { type: 'startCodegen' }
+  | { type: 'stopCodegen' }
 
 export interface CaptureEvent {
   type: 'complete' | 'failed' | 'started'
diff --git a/chrome-extension/src/sidepanel/side-panel.tsx b/chrome-extension/src/sidepanel/side-panel.tsx
index 2a79502..190acb4 100644
--- a/chrome-extension/src/sidepanel/side-panel.tsx
+++ b/chrome-extension/src/sidepanel/side-panel.tsx
@@ -3,7 +3,10 @@ import { Button } from '@base-ui/react/button'
 import { Tooltip } from '@base-ui/react/tooltip'
 import { AgentAction } from '../components/agent-action'
 import { ChatInput } from '../components/chat-input'
-import type { AppState, AgentEvent, Settings } from '../shared/types'
+import { SessionSelector } from '../components/session-selector'
+import { ModeSelector } from '../components/mode-selector'
+import { CodeDisplay } from '../components/code-display'
+import type { AppState, AgentEvent, Settings, Session, AppMode } from '../shared/types'
 
 interface ChatMessage {
   id: string
@@ -12,13 +15,24 @@ interface ChatMessage {
   events?: AgentEvent[]
 }
 
-const DEFAULT_STATE: AppState = {
+interface ExtendedAppState extends AppState {
+  sessions?: Session[]
+  codegenActive?: boolean
+  codegenScript?: string
+}
+
+const DEFAULT_STATE: ExtendedAppState = {
   capturing: false,
   runId: null,
   nativeHostConnected: false,
   isStreaming: false,
   stats: { total: 0 },
   current_task: null,
+  activeSessionId: null,
+  mode: 'capture',
+  sessions: [],
+  codegenActive: false,
+  codegenScript: ''
 }
 
 const DEFAULT_SETTINGS: Settings = {
@@ -27,7 +41,7 @@ const DEFAULT_SETTINGS: Settings = {
 }
 
 export function SidePanel() {
-  const [state, setState] = useState<AppState>(DEFAULT_STATE)
+  const [state, setState] = useState<ExtendedAppState>(DEFAULT_STATE)
   const [settings, setSettings] = useState<Settings>(DEFAULT_SETTINGS)
   const [messages, setMessages] = useState<ChatMessage[]>([])
   const [inputValue, setInputValue] = useState('')
@@ -35,7 +49,7 @@ export function SidePanel() {
 
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const currentResponseIdRef = useRef<string | null>(null)
-  const warningTimeoutRef = useRef<any>(null)
+  const warningTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const scrollToBottom = useCallback(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
@@ -67,7 +81,7 @@ export function SidePanel() {
 
   // Listen for messages from background
   useEffect(() => {
-    const handleMessage = (message: { type: string; event?: AgentEvent | { type: string } }) => {
+    const handleMessage = (message: { type: string; event?: AgentEvent | { type: string }; script?: string; session?: Session; mode?: AppMode; newCode?: string }) => {
       switch (message.type) {
         case 'captureEvent':
           // Refresh state to get updated counts
@@ -81,6 +95,29 @@ export function SidePanel() {
         case 'nativeHostDisconnected':
           setState(prev => ({ ...prev, nativeHostConnected: false }))
           break
+        case 'sessionCreated':
+        case 'sessionSwitched':
+        case 'sessionDeleted':
+        case 'sessionRenamed':
+          // Refresh sessions list
+          chrome.runtime.sendMessage({ type: 'getState' }).then(res => {
+            if (res) setState(prev => ({ ...prev, ...res }))
+          })
+          break
+        case 'modeChanged':
+          if (message.mode) {
+            setState(prev => ({ ...prev, mode: message.mode! }))
+          }
+          break
+        case 'codegenStarted':
+          setState(prev => ({ ...prev, codegenActive: true, codegenScript: message.script || '' }))
+          break
+        case 'codegenUpdate':
+          setState(prev => ({ ...prev, codegenScript: message.script || '' }))
+          break
+        case 'codegenStopped':
+          setState(prev => ({ ...prev, codegenActive: false, codegenScript: message.script || '' }))
+          break
       }
     }
 
@@ -213,6 +250,81 @@ export function SidePanel() {
     }
   }
 
+  // Session management handlers
+  const handleCreateSession = async (name?: string) => {
+    try {
+      await chrome.runtime.sendMessage({ type: 'createSession', name })
+      const res = await chrome.runtime.sendMessage({ type: 'getState' })
+      if (res) setState(prev => ({ ...prev, ...res }))
+      // Clear messages for new session
+      setMessages([])
+    } catch (err) {
+      console.error('Create session error:', err)
+      showWarning('Failed to create session')
+    }
+  }
+
+  const handleSwitchSession = async (sessionId: string) => {
+    try {
+      await chrome.runtime.sendMessage({ type: 'switchSession', sessionId })
+      const res = await chrome.runtime.sendMessage({ type: 'getState' })
+      if (res) setState(prev => ({ ...prev, ...res }))
+      // Load messages for the switched session (TODO: implement message persistence per session)
+      setMessages([])
+    } catch (err) {
+      console.error('Switch session error:', err)
+      showWarning((err as Error).message || 'Failed to switch session')
+    }
+  }
+
+  const handleDeleteSession = async (sessionId: string) => {
+    try {
+      await chrome.runtime.sendMessage({ type: 'deleteSession', sessionId })
+      const res = await chrome.runtime.sendMessage({ type: 'getState' })
+      if (res) setState(prev => ({ ...prev, ...res }))
+    } catch (err) {
+      console.error('Delete session error:', err)
+      showWarning((err as Error).message || 'Failed to delete session')
+    }
+  }
+
+  const handleRenameSession = async (sessionId: string, name: string) => {
+    try {
+      await chrome.runtime.sendMessage({ type: 'renameSession', sessionId, name })
+      const res = await chrome.runtime.sendMessage({ type: 'getState' })
+      if (res) setState(prev => ({ ...prev, ...res }))
+    } catch (err) {
+      console.error('Rename session error:', err)
+      showWarning('Failed to rename session')
+    }
+  }
+
+  // Mode management handlers
+  const handleModeChange = async (mode: AppMode) => {
+    try {
+      await chrome.runtime.sendMessage({ type: 'setMode', mode })
+      setState(prev => ({ ...prev, mode }))
+    } catch (err) {
+      console.error('Mode change error:', err)
+    }
+  }
+
+  // Codegen handlers
+  const toggleCodegen = async () => {
+    try {
+      if (state.codegenActive) {
+        await chrome.runtime.sendMessage({ type: 'stopCodegen' })
+      } else {
+        await chrome.runtime.sendMessage({ type: 'startCodegen' })
+      }
+      const res = await chrome.runtime.sendMessage({ type: 'getState' })
+      if (res) setState(prev => ({ ...prev, ...res }))
+    } catch (err) {
+      console.error('Codegen error:', err)
+      showWarning((err as Error).message || 'Codegen error')
+    }
+  }
+
   return (
     <div className="flex flex-col h-screen bg-[#0a0a0a] text-text-primary selection:bg-primary/30">
       {/* Header */}
@@ -229,16 +341,38 @@ export function SidePanel() {
         </div>
 
         <div className="flex items-center gap-2">
-          {/* Capture Toggle Button in Header */}
+          {/* Mode Toggle */}
+          <ModeSelector
+            mode={state.mode}
+            onModeChange={handleModeChange}
+            disabled={state.capturing || state.codegenActive}
+          />
+        </div>
+      </header>
+
+      {/* Sub-header with session selector and action button */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-border/30 bg-[#0a0a0a]/90">
+        <SessionSelector
+          sessions={state.sessions || []}
+          activeSessionId={state.activeSessionId}
+          isCapturing={state.capturing}
+          onCreateSession={handleCreateSession}
+          onSwitchSession={handleSwitchSession}
+          onDeleteSession={handleDeleteSession}
+          onRenameSession={handleRenameSession}
+        />
+
+        {/* Action Button based on mode */}
+        {state.mode === 'capture' ? (
           <Tooltip.Root>
             <Tooltip.Trigger
               render={
                 <Button
                   onClick={toggleCapture}
                   className={`px-3 py-1.5 rounded text-[11px] font-bold uppercase tracking-widest transition-all ${state.capturing
-                      ? 'text-primary bg-primary/10 hover:bg-primary/20'
-                      : 'text-white/60 hover:text-white hover:bg-white/10'
-                    }`}
+                    ? 'text-primary bg-primary/10 hover:bg-primary/20'
+                    : 'text-white/60 hover:text-white hover:bg-white/10'
+                  }`}
                 >
                   {state.capturing ? 'Stop Capture' : 'Start Capture'}
                 </Button>
@@ -247,17 +381,27 @@ export function SidePanel() {
             <Tooltip.Portal>
               <Tooltip.Positioner sideOffset={4}>
                 <Tooltip.Popup className="bg-background-secondary text-white text-[10px] px-2 py-1 rounded shadow-lg border border-border z-[100] font-mono">
-                  {state.capturing ? 'Stop process' : 'Start recording'}
+                  {state.capturing ? 'Stop recording' : 'Start recording'}
                   {state.stats.total > 0 && ` (${state.stats.total} requests)`}
                 </Tooltip.Popup>
               </Tooltip.Positioner>
             </Tooltip.Portal>
           </Tooltip.Root>
-        </div>
-      </header>
+        ) : (
+          <Button
+            onClick={toggleCodegen}
+            className={`px-3 py-1.5 rounded text-[11px] font-bold uppercase tracking-widest transition-all ${state.codegenActive
+              ? 'text-green-400 bg-green-400/10 hover:bg-green-400/20'
+              : 'text-white/60 hover:text-white hover:bg-white/10'
+            }`}
+          >
+            {state.codegenActive ? 'Stop Recording' : 'Start Recording'}
+          </Button>
+        )}
+      </div>
 
       {/* Native host warning */}
-      {!state.nativeHostConnected && (
+      {!state.nativeHostConnected && state.mode === 'capture' && (
         <div className="mx-4 mt-4 p-3 border border-primary/50 bg-primary/5 rounded">
           <div className="flex items-start gap-3">
             <WarningIcon />
@@ -278,8 +422,8 @@ export function SidePanel() {
         </div>
       )}
 
-      {/* Traffic Count indicator (when capturing but outside header) */}
-      {state.stats.total > 0 && (
+      {/* Traffic Count indicator (when capturing) */}
+      {state.mode === 'capture' && state.stats.total > 0 && (
         <div className="px-4 pt-4 pb-0 flex justify-end">
           <div className="text-[9px] font-bold text-text-secondary uppercase tracking-widest border border-border/50 px-2 py-0.5 rounded-full bg-white/5">
             Traffic captured: <span className="text-white">{state.stats.total}</span>
@@ -287,75 +431,90 @@ export function SidePanel() {
         </div>
       )}
 
-      {/* Chat area */}
-      <div className="flex-1 overflow-y-auto px-6 pb-4 pt-6 custom-scrollbar">
-        {messages.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-full">
-            <div className="w-24 h-24 text-white/10">
-              <svg viewBox="0 0 400 400" className="w-full h-full" fill="none" stroke="currentColor" strokeWidth="12" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M 170 110 Q 150 110 140 120 Q 130 130 130 150 L 130 185 Q 130 195 120 195 L 110 195 L 110 205 L 120 205 Q 130 205 130 215 L 130 250 Q 130 270 140 280 Q 150 290 170 290" />
-                <path d="M 230 110 Q 250 110 260 120 Q 270 130 270 150 L 270 185 Q 270 195 280 195 L 290 195 L 290 205 L 280 205 Q 270 205 270 215 L 270 250 Q 270 270 260 280 Q 250 290 230 290" />
-                <circle cx="185" cy="200" r="5" fill="currentColor" stroke="none" />
-                <circle cx="200" cy="200" r="5" fill="currentColor" stroke="none" />
-                <circle cx="215" cy="200" r="5" fill="currentColor" stroke="none" />
-              </svg>
-            </div>
-          </div>
-        ) : (
-          <div className="space-y-8 max-w-full">
-            {messages.map((msg, msgIdx) => (
-              <div key={msg.id} className="animate-in fade-in duration-500 w-full">
-                {msg.role === 'user' ? (
-                  <>
-                    {msgIdx > 0 && (
-                      <div className="border-t border-primary/30 my-6"></div>
-                    )}
-                    <div className="flex items-start gap-3 w-full">
-                      <span className="text-primary font-bold mt-0.5 select-none flex-shrink-0">{'>'}</span>
-                      <div className="flex-1 text-sm text-white font-normal break-words leading-relaxed min-w-0">
-                        {msg.content}
+      {/* Main content area - conditional based on mode */}
+      {state.mode === 'codegen' ? (
+        /* Codegen Mode - Show code display */
+        <div className="flex-1 overflow-hidden p-4">
+          <CodeDisplay
+            code={state.codegenScript || ''}
+            language="python"
+            title="Playwright Script"
+            isLive={state.codegenActive}
+          />
+        </div>
+      ) : (
+        /* Capture Mode - Show chat area */
+        <>
+          <div className="flex-1 overflow-y-auto px-6 pb-4 pt-6 custom-scrollbar">
+            {messages.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-full">
+                <div className="w-24 h-24 text-white/10">
+                  <svg viewBox="0 0 400 400" className="w-full h-full" fill="none" stroke="currentColor" strokeWidth="12" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M 170 110 Q 150 110 140 120 Q 130 130 130 150 L 130 185 Q 130 195 120 195 L 110 195 L 110 205 L 120 205 Q 130 205 130 215 L 130 250 Q 130 270 140 280 Q 150 290 170 290" />
+                    <path d="M 230 110 Q 250 110 260 120 Q 270 130 270 150 L 270 185 Q 270 195 280 195 L 290 195 L 290 205 L 280 205 Q 270 205 270 215 L 270 250 Q 270 270 260 280 Q 250 290 230 290" />
+                    <circle cx="185" cy="200" r="5" fill="currentColor" stroke="none" />
+                    <circle cx="200" cy="200" r="5" fill="currentColor" stroke="none" />
+                    <circle cx="215" cy="200" r="5" fill="currentColor" stroke="none" />
+                  </svg>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-8 max-w-full">
+                {messages.map((msg, msgIdx) => (
+                  <div key={msg.id} className="animate-in fade-in duration-500 w-full">
+                    {msg.role === 'user' ? (
+                      <>
+                        {msgIdx > 0 && (
+                          <div className="border-t border-primary/30 my-6"></div>
+                        )}
+                        <div className="flex items-start gap-3 w-full">
+                          <span className="text-primary font-bold mt-0.5 select-none flex-shrink-0">{'>'}</span>
+                          <div className="flex-1 text-sm text-white font-normal break-words leading-relaxed min-w-0">
+                            {msg.content}
+                          </div>
+                        </div>
+                      </>
+                    ) : (
+                      <div className="space-y-4 pl-6 w-full">
+                        {msg.events?.map((event, idx) => {
+                          const previousEvent = idx > 0 ? msg.events?.[idx - 1] : undefined
+                          return <AgentAction key={`${msg.id}-${idx}`} event={event} previousEvent={previousEvent} />
+                        })}
                       </div>
-                    </div>
-                  </>
-                ) : (
-                  <div className="space-y-4 pl-6 w-full">
-                    {msg.events?.map((event, idx) => {
-                      const previousEvent = idx > 0 ? msg.events?.[idx - 1] : undefined
-                      return <AgentAction key={`${msg.id}-${idx}`} event={event} previousEvent={previousEvent} />
-                    })}
+                    )}
                   </div>
-                )}
+                ))}
+                <div ref={messagesEndRef} />
               </div>
-            ))}
-            <div ref={messagesEndRef} />
+            )}
           </div>
-        )}
-      </div>
 
-      {/* Chat input */}
-      <div className="relative border-t border-border/30 bg-[#0a0a0a]">
-        {warningMessage && (
-          <div className="absolute bottom-full left-0 right-0 px-4 py-2 bg-primary/20 backdrop-blur-sm border-t border-primary/30 animate-in slide-in-from-bottom-2 duration-200">
-            <div className="flex items-center gap-2">
-              <div className="w-1 h-1 bg-primary rounded-full" />
-              <span className="text-[10px] font-medium text-primary uppercase tracking-wider">{warningMessage}</span>
-            </div>
+          {/* Chat input */}
+          <div className="relative border-t border-border/30 bg-[#0a0a0a]">
+            {warningMessage && (
+              <div className="absolute bottom-full left-0 right-0 px-4 py-2 bg-primary/20 backdrop-blur-sm border-t border-primary/30 animate-in slide-in-from-bottom-2 duration-200">
+                <div className="flex items-center gap-2">
+                  <div className="w-1 h-1 bg-primary rounded-full" />
+                  <span className="text-[10px] font-medium text-primary uppercase tracking-wider">{warningMessage}</span>
+                </div>
+              </div>
+            )}
+            <ChatInput
+              value={inputValue}
+              onChange={setInputValue}
+              onSend={sendMessage}
+              isStreaming={state.isStreaming}
+              placeholder={
+                !state.nativeHostConnected
+                  ? 'Native host disconnected'
+                  : state.stats.total === 0
+                    ? 'Capture traffic to begin'
+                    : 'Build an API client...'
+              }
+            />
           </div>
-        )}
-        <ChatInput
-          value={inputValue}
-          onChange={setInputValue}
-          onSend={sendMessage}
-          isStreaming={state.isStreaming}
-          placeholder={
-            !state.nativeHostConnected
-              ? 'Native host disconnected'
-              : state.stats.total === 0
-                ? 'Capture traffic to begin'
-                : 'Build an API client...'
-          }
-        />
-      </div>
+        </>
+      )}
     </div>
   )
 }
diff --git a/chrome-extension/vite.config.ts b/chrome-extension/vite.config.ts
index a51ac71..164f272 100644
--- a/chrome-extension/vite.config.ts
+++ b/chrome-extension/vite.config.ts
@@ -55,12 +55,16 @@ export default defineConfig({
       input: {
         sidepanel: resolve(__dirname, 'src/sidepanel/index.html'),
         'service-worker': resolve(__dirname, 'src/background/service-worker.ts'),
+        'codegen-recorder': resolve(__dirname, 'src/content/codegen-recorder.ts'),
       },
       output: {
         entryFileNames: (chunkInfo) => {
           if (chunkInfo.name === 'service-worker') {
             return 'background/service-worker.js'
           }
+          if (chunkInfo.name === 'codegen-recorder') {
+            return 'content/codegen-recorder.js'
+          }
           return 'sidepanel/[name].js'
         },
         chunkFileNames: 'assets/[name]-[hash].js',
@@ -70,7 +74,7 @@ export default defineConfig({
           }
           return 'assets/[name]-[hash][extname]'
         },
-        // Prevent code splitting for service worker
+        // Prevent code splitting for service worker and content script
         manualChunks: undefined,
       },
     },