npm - kiro-mobile-bridge - Versions diffs - 1.0.0 → 1.0.4 - Mend

kiro-mobile-bridge 1.0.0 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/LICENSE +21 -0
package/README.md +130 -221
package/package.json +40 -40
package/src/public/index.html +1960 -1940
package/src/server.js +2488 -2672

package/src/public/index.html CHANGED Viewed

@@ -1,1940 +1,1960 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <meta name="theme-color" content="#1e1e1e">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <title>Kiro Mobile Bridge</title>
-  <link rel="stylesheet" href="https://unpkg.com/@vscode/codicons@0.0.35/dist/codicon.css">
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    html, body { height: 100%; overflow: hidden; background: #1e1e1e; font-family: "Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Ubuntu, "Droid Sans", sans-serif; font-size: 13px; color: #fff; }
-    .app { display: flex; flex-direction: column; height: 100%; height: 100dvh; }
-    /* Navigation Bar (combined header + tabs) */
-    .nav-bar { display: flex; align-items: center; background: #1e1e1e; border-bottom: 1px solid #3c3c3c; padding: 0 8px; flex-shrink: 0; }
-    .status { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 10px 8px; }
-    .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #666; }
-    .status-dot.connected { background: #4caf50; }
-    .status-dot.disconnected { background: #f44336; }
-    .status-text { color: #888; display: none; }
-    .nav-tabs { display: flex; align-items: center; flex: 1; overflow-x: auto; -webkit-overflow-scrolling: touch; }
-    .nav-tabs::-webkit-scrollbar { display: none; }
-    .nav-tab { display: flex; align-items: center; gap: 6px; padding: 10px 16px; color: #888; font-size: 12px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s ease; white-space: nowrap; user-select: none; }
-    .header-title { font-size: 13px; font-weight: 600; color: #888; padding: 10px 12px; white-space: nowrap; }
-    .nav-tab:hover { color: #ccc; background: rgba(255,255,255,0.05); }
-    .nav-tab.active { color: #fff; border-bottom-color: #7138cc; }
-    .nav-tab .codicon { font-size: 14px; }
-    /* Panel Container */
-    .panel-container { flex: 1; overflow: hidden; position: relative; }
-    .panel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; display: none; }
-    .panel.active { display: flex; flex-direction: column; }
-    /* Chat Panel */
-    .chat-container { flex: 1; overflow: hidden; position: relative; }
-    .chat-content { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
-    #chatContent, #chatContent * { font-family: inherit; }
-    #chatContent code, #chatContent pre { font-family: Menlo, Monaco, "Courier New", monospace !important; }
-    #chatContent .codicon { font-family: codicon !important; font-size: 16px; line-height: 1; }
-    /* Editor Panel */
-    .editor-container { flex: 1; overflow: hidden; background: #1e1e1e; display: flex; flex-direction: column; position: relative; }
-    .editor-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #252526; border-bottom: 1px solid #3c3c3c; flex-shrink: 0; user-select: none; }
-    .editor-filename { font-size: 13px; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
-    .editor-search-btn { color: #888; font-size: 16px; cursor: pointer; padding: 4px; border-radius: 4px; }
-    .editor-search-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
-    .editor-explorer-btn { display: flex; align-items: center; gap: 6px; color: #888; font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: 4px; background: #3c3c3c; }
-    .editor-explorer-btn:hover { background: #4a4a4a; }
-    .editor-explorer-text { font-size: 11px; font-weight: 600; color: #888; letter-spacing: 0.5px; }
-    .editor-search-bar { display: none; align-items: center; gap: 8px; padding: 6px 12px; background: #252526; border-bottom: 1px solid #3c3c3c; }
-    .editor-search-bar.open { display: flex; }
-    .editor-search-bar input { flex: 1; padding: 6px 10px; background: #1e1e1e; border: 1px solid #3c3c3c; border-radius: 4px; color: #fff; font-size: 13px; outline: none; }
-    .editor-search-bar input:focus { border-color: #007acc; }
-    .editor-search-count { font-size: 12px; color: #888; min-width: 50px; text-align: center; }
-    .editor-search-nav { color: #888; font-size: 16px; cursor: pointer; padding: 4px; border-radius: 4px; }
-    .editor-search-nav:hover { color: #fff; background: rgba(255,255,255,0.1); }
-    .editor-search-close { color: #888; font-size: 16px; cursor: pointer; padding: 4px; border-radius: 4px; }
-    .editor-search-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
-    .editor-content { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; background: #1e1e1e; }
-    .editor-code { margin: 0; padding: 8px 0; font-family: 'Cascadia Code', 'Fira Code', Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 1.6; color: #d4d4d4; white-space: pre; overflow-x: auto; background: #1e1e1e; }
-    .editor-line { display: flex; min-height: 1.6em; }
-    .editor-line:hover { background: rgba(255,255,255,0.04); }
-    .editor-line-num { width: 45px; min-width: 45px; text-align: right; padding-right: 12px; color: #6e7681; user-select: none; flex-shrink: 0; font-size: 12px; }
-    .editor-line-code { flex: 1; padding-right: 12px; white-space: pre; tab-size: 2; }
-    .search-highlight { background: #ffd500; color: #000; border-radius: 2px; padding: 0 1px; }
-    .search-highlight.current { background: #ff6b00; color: #fff; outline: 2px solid #ff6b00; }
-    /* File Tree Panel */
-    .file-tree-panel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #252526; display: flex; flex-direction: column; z-index: 100; display: none; }
-    .file-tree-panel.open { display: flex; }
-    .file-tree-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #252526; border-bottom: 1px solid #3c3c3c; }
-    .file-tree-header-title { font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
-    .file-tree-close { margin-left: auto; color: #888; cursor: pointer; font-size: 16px; }
-    .file-tree-close:hover { color: #fff; }
-    .file-tree { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0; }
-    .file-tree-folder-header { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer; user-select: none; }
-    .file-tree-folder-header:hover { background: rgba(255,255,255,0.05); }
-    .file-tree-folder-icon { color: #888; font-size: 14px; transition: transform 0.15s; }
-    .file-tree-folder-icon.expanded { transform: rotate(90deg); }
-    .file-tree-folder-name { font-size: 13px; color: #c5c5c5; }
-    .file-tree-folder-contents { padding-left: 16px; display: none; }
-    .file-tree-folder-contents.expanded { display: block; }
-    .file-tree-file { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 24px; cursor: pointer; }
-    .file-tree-file:hover { background: rgba(255,255,255,0.05); }
-    .file-tree-file:active { background: #094771; }
-    .file-tree-file-icon { color: #888; font-size: 14px; }
-    .file-tree-file-name { font-size: 13px; color: #c5c5c5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .file-tree-empty { padding: 20px; text-align: center; color: #666; font-size: 13px; }
-    .file-tree-loading { padding: 20px; text-align: center; color: #888; display: flex; flex-direction: column; align-items: center; gap: 8px; }
-    /* Syntax Highlighting */
-    .tok-kw { color: #569cd6; }
-    .tok-str { color: #ce9178; }
-    .tok-num { color: #b5cea8; }
-    .tok-cmt { color: #6a9955; }
-    .tok-fn { color: #dcdcaa; }
-    .tok-type { color: #4ec9b0; }
-    /* Syntax Highlighting */
-    .token-keyword { color: #569cd6; font-weight: 500; }
-    .token-string { color: #ce9178; }
-    .token-number { color: #b5cea8; }
-    .token-comment { color: #6a9955; font-style: italic; }
-    .token-function { color: #dcdcaa; }
-    .token-type { color: #4ec9b0; }
-    .token-operator { color: #d4d4d4; }
-    /* Loading & Toast */
-    .loading { display: flex; align-items: center; justify-content: center; height: 100%; color: #888; font-size: 14px; flex-direction: column; gap: 12px; }
-    .loading-spinner { width: 24px; height: 24px; border: 2px solid #3c3c3c; border-top-color: #7138cc; border-radius: 50%; animation: spin 1s linear infinite; }
-    @keyframes spin { to { transform: rotate(360deg); } }
-    .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #f44336; color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 13px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 1000; }
-    .toast.visible { opacity: 1; }
-    .toast.success { background: #4caf50; }
-    /* Empty State */
-    .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #888; text-align: center; padding: 20px; }
-    .empty-state .codicon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
-    .empty-state p { font-size: 14px; max-width: 280px; }
-    /* Task List Styling - Match Kiro IDE */
-    [class*="task"], [class*="Task"] {
-      font-family: "Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Ubuntu, "Droid Sans", sans-serif !important;
-    }
-    /* Task section headers (CURRENT TASKS, TASKS IN QUEUE) */
-    [class*="task"] h2, [class*="Task"] h2,
-    [class*="task"] h3, [class*="Task"] h3,
-    [class*="task-header"], [class*="TaskHeader"],
-    [class*="section-title"], [class*="SectionTitle"] {
-      font-size: 13px !important;
-      font-weight: 700 !important;
-      letter-spacing: 0.5px !important;
-      text-transform: uppercase !important;
-      color: #ffffff !important;
-      margin: 0 0 12px 0 !important;
-      padding: 0 !important;
-      line-height: 1.4 !important;
-    }
-    /* Task list containers */
-    [class*="task-list"], [class*="TaskList"],
-    [class*="task-section"], [class*="TaskSection"] {
-      margin-bottom: 24px !important;
-      padding: 0 !important;
-    }
-    /* Empty state messages (No active tasks, No tasks in queue) */
-    [class*="task"] p:empty, [class*="Task"] p:empty,
-    [class*="no-task"], [class*="NoTask"],
-    [class*="empty-task"], [class*="EmptyTask"],
-    [class*="task-empty"], [class*="TaskEmpty"] {
-      font-size: 13px !important;
-      font-style: italic !important;
-      color: #888888 !important;
-      margin: 0 0 16px 0 !important;
-      padding: 0 !important;
-      line-height: 1.6 !important;
-    }
-    /* Catch all paragraphs under task sections that look like empty states */
-    [class*="task"] p, [class*="Task"] p {
-      font-size: 13px !important;
-      line-height: 1.6 !important;
-    }
-    /* Specific targeting for common patterns */
-    div[class*="current"] h2, div[class*="Current"] h2,
-    div[class*="queue"] h2, div[class*="Queue"] h2 {
-      font-size: 13px !important;
-      font-weight: 700 !important;
-      letter-spacing: 0.5px !important;
-      text-transform: uppercase !important;
-      color: #ffffff !important;
-    }
-    /* Horizontal divider between sections */
-    [class*="task-divider"], [class*="TaskDivider"],
-    [class*="task"] hr, [class*="Task"] hr {
-      border: none !important;
-      border-top: 1px solid #3c3c3c !important;
-      margin: 20px 0 !important;
-    }
-    /* Individual task items (when they exist) */
-    [class*="task-item"], [class*="TaskItem"] {
-      padding: 8px 12px !important;
-      margin: 4px 0 !important;
-      background: rgba(255, 255, 255, 0.03) !important;
-      border-radius: 4px !important;
-      border-left: 2px solid #7138cc !important;
-      font-size: 13px !important;
-      color: #cccccc !important;
-      line-height: 1.5 !important;
-    }
-    [class*="task-item"]:hover, [class*="TaskItem"]:hover {
-      background: rgba(255, 255, 255, 0.05) !important;
-    }
-    /* Task item with close button */
-    [class*="task-item"] button, [class*="TaskItem"] button {
-      margin-left: 8px !important;
-      padding: 2px 6px !important;
-      font-size: 11px !important;
-      background: rgba(255, 255, 255, 0.1) !important;
-      border: 1px solid #4a464f !important;
-      border-radius: 3px !important;
-      color: #888 !important;
-      cursor: pointer !important;
-    }
-    [class*="task-item"] button:hover, [class*="TaskItem"] button:hover {
-      background: rgba(255, 255, 255, 0.15) !important;
-      color: #fff !important;
-    }
-  </style>
-</head>
-<body>
-  <div class="app">
-    <!-- Navigation Bar (tabs | title + indicator) -->
-    <nav class="nav-bar">
-      <div class="nav-tabs" id="navTabs">
-        <div class="nav-tab active" data-panel="chat">
-          <span class="codicon codicon-comment-discussion"></span>
-          <span>Chat</span>
-        </div>
-        <div class="nav-tab" data-panel="editor">
-          <span class="codicon codicon-code"></span>
-          <span>Editor</span>
-        </div>
-      </div>
-      <span class="header-title">Kiro Mobile</span>
-      <div class="status">
-        <span class="status-dot" id="statusDot"></span>
-        <span class="status-text" id="statusText">Connecting...</span>
-      </div>
-    </nav>
-    <!-- Panel Container -->
-    <div class="panel-container">
-      <!-- Chat Panel -->
-      <div class="panel active" id="chatPanel">
-        <div class="chat-container" id="chatContainer">
-          <div class="loading" id="chatLoading"><div class="loading-spinner"></div><span>Waiting for Kiro...</span></div>
-          <div class="chat-content" id="chatContent" style="display: none;"></div>
-        </div>
-      </div>
-      <!-- Editor Panel -->
-      <div class="panel" id="editorPanel">
-        <div class="editor-container">
-          <div class="loading" id="editorLoading"><div class="loading-spinner"></div><span>Loading editor...</span></div>
-          <div class="editor-header" id="editorHeader" style="display: none;">
-            <span class="codicon codicon-file-code" style="color: #888;"></span>
-            <span class="editor-filename" id="editorFilename">No file open</span>
-            <span class="editor-search-btn codicon codicon-search" id="editorSearchBtn" title="Find in file"></span>
-            <div class="editor-explorer-btn" id="editorExplorerBtn" title="Open Explorer">
-              <span class="codicon codicon-folder" style="color: #dcb67a;"></span>
-              <span class="editor-explorer-text">EXPLORER</span>
-            </div>
-          </div>
-          <div class="editor-search-bar" id="editorSearchBar">
-            <input type="text" id="editorSearchInput" placeholder="Find in file..." autocomplete="off" />
-            <span class="editor-search-count" id="editorSearchCount"></span>
-            <span class="editor-search-nav codicon codicon-arrow-up" id="editorSearchPrev" title="Previous"></span>
-            <span class="editor-search-nav codicon codicon-arrow-down" id="editorSearchNext" title="Next"></span>
-            <span class="editor-search-close codicon codicon-close" id="editorSearchClose" title="Close"></span>
-          </div>
-          <div class="file-tree-panel" id="fileTreePanel">
-            <div class="file-tree-header">
-              <span class="codicon codicon-folder-opened" style="color: #dcb67a;"></span>
-              <span class="file-tree-header-title">Explorer</span>
-              <span class="file-tree-close codicon codicon-close" id="fileTreeClose"></span>
-            </div>
-            <div class="file-tree" id="fileTree">
-              <div class="file-tree-loading"><div class="loading-spinner"></div>Loading files...</div>
-            </div>
-          </div>
-          <div class="editor-content" id="editorContent" style="display: none;"></div>
-        </div>
-      </div>
-    </div>
-    <div class="toast" id="toast"></div>
-  </div>
-  <script>
-    // State
-    let ws = null, reconnectAttempts = 0, reconnectTimeout = null;
-    let cascades = [], selectedCascadeId = null, currentStyles = null;
-    let isTypingInKiroInput = false;
-    let activePanel = 'chat';
-    let lastSuccessfulSnapshot = null;
-    let navigationPending = false;
-    let workspaceFiles = []; // Cached file list
-    let fileTreeOpen = false;
-    let expandedFolders = new Set(); // Track expanded folders
-    let updateDebounceTimer = null; // Debounce rapid snapshot updates
-    let isRendering = false; // Prevent concurrent renders
-    // DOM Elements
-    const statusDot = document.getElementById('statusDot');
-    const statusText = document.getElementById('statusText');
-    const navTabs = document.getElementById('navTabs');
-    const toast = document.getElementById('toast');
-    const fileTreePanel = document.getElementById('fileTreePanel');
-    const fileTree = document.getElementById('fileTree');
-    const fileTreeClose = document.getElementById('fileTreeClose');
-    // Panel elements
-    const panels = {
-      chat: {
-        panel: document.getElementById('chatPanel'),
-        loading: document.getElementById('chatLoading'),
-        content: document.getElementById('chatContent'),
-        container: document.getElementById('chatContainer')
-      },
-      editor: {
-        panel: document.getElementById('editorPanel'),
-        loading: document.getElementById('editorLoading'),
-        content: document.getElementById('editorContent'),
-        header: document.getElementById('editorHeader'),
-        filename: document.getElementById('editorFilename')
-      }
-    };
-    // Search state
-    let searchMatches = [];
-    let currentMatchIndex = -1;
-    let originalEditorContent = '';
-    // Search DOM elements
-    const editorSearchBtn = document.getElementById('editorSearchBtn');
-    const editorSearchBar = document.getElementById('editorSearchBar');
-    const editorSearchInput = document.getElementById('editorSearchInput');
-    const editorSearchCount = document.getElementById('editorSearchCount');
-    const editorSearchPrev = document.getElementById('editorSearchPrev');
-    const editorSearchNext = document.getElementById('editorSearchNext');
-    const editorSearchClose = document.getElementById('editorSearchClose');
-    // Status management
-    function setStatus(status) {
-      statusDot.className = 'status-dot ' + status;
-      statusText.textContent = status === 'connected' ? 'Connected' : status === 'disconnected' ? 'Disconnected' : 'Connecting...';
-    }
-    function showToast(message, duration = 3000, isSuccess = false) {
-      toast.textContent = message;
-      toast.className = 'toast visible' + (isSuccess ? ' success' : '');
-      setTimeout(() => { toast.classList.remove('visible'); }, duration);
-    }
-    // Navigation
-    navTabs.addEventListener('click', (e) => {
-      const tab = e.target.closest('.nav-tab');
-      if (!tab) return;
-      const panelName = tab.dataset.panel;
-      if (panelName === activePanel) return;
-      // Update tabs
-      navTabs.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
-      tab.classList.add('active');
-      // Update panels
-      Object.keys(panels).forEach(key => {
-        panels[key].panel.classList.toggle('active', key === panelName);
-      });
-      activePanel = panelName;
-      // Fetch content for the new panel
-      if (selectedCascadeId) {
-        fetchPanelContent(panelName, selectedCascadeId);
-      }
-    });
-    // WebSocket connection
-    function connect() {
-      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-      ws = new WebSocket(`${protocol}//${window.location.host}`);
-      ws.onopen = () => {
-        setStatus('connected');
-        reconnectAttempts = 0;
-      };
-      ws.onmessage = (e) => {
-        try {
-          handleMessage(JSON.parse(e.data));
-        } catch (err) {
-          console.error('Failed to parse message:', err);
-        }
-      };
-      ws.onclose = () => {
-        setStatus('disconnected');
-        scheduleReconnect();
-      };
-      ws.onerror = () => {};
-    }
-    function scheduleReconnect() {
-      if (reconnectTimeout) clearTimeout(reconnectTimeout);
-      const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
-      reconnectAttempts++;
-      reconnectTimeout = setTimeout(connect, delay);
-    }
-    function handleMessage(data) {
-      if (data.type === 'cascade_list') {
-        cascades = data.cascades || [];
-        if (!selectedCascadeId && cascades.length > 0) {
-          selectCascade(cascades[0].id);
-        }
-      } else if (data.type === 'snapshot_update' && data.cascadeId === selectedCascadeId) {
-        // Only fetch if user is not typing AND the updated panel is the active one
-        // AND we're not currently rendering (prevent flickering from rapid updates)
-        const panel = data.panel || 'chat';
-        if (!isTypingInKiroInput && panel === activePanel && !isRendering) {
-          // Debounce rapid updates - wait 500ms before fetching
-          if (updateDebounceTimer) clearTimeout(updateDebounceTimer);
-          updateDebounceTimer = setTimeout(() => {
-            fetchPanelContent(panel, data.cascadeId, true); // true = isUpdate (don't scroll)
-          }, 500);
-        }
-      }
-    }
-    function selectCascade(cascadeId) {
-      selectedCascadeId = cascadeId;
-      currentStyles = null;
-      if (cascadeId) {
-        fetchStyles(cascadeId).then(() => {
-          fetchPanelContent(activePanel, cascadeId);
-        });
-      } else {
-        showLoading('chat', 'Waiting for Kiro...');
-      }
-    }
-    async function fetchStyles(cascadeId) {
-      try {
-        const r = await fetch(`/styles/${cascadeId}`);
-        if (r.ok) currentStyles = await r.text();
-      } catch (e) {
-        console.error('Failed to fetch styles:', e);
-      }
-    }
-    function showLoading(panelName, msg = 'Loading...') {
-      const p = panels[panelName];
-      if (p.loading) {
-        p.loading.querySelector('span').textContent = msg;
-        p.loading.style.display = 'flex';
-      }
-      if (p.content) p.content.style.display = 'none';
-      if (p.header) p.header.style.display = 'none';
-    }
-    function hideLoading(panelName) {
-      const p = panels[panelName];
-      if (p.loading) p.loading.style.display = 'none';
-      if (p.content) p.content.style.display = 'block';
-      if (p.header) p.header.style.display = 'flex';
-    }
-    // Fetch panel content
-    async function fetchPanelContent(panelName, cascadeId, isUpdate = false) {
-      switch (panelName) {
-        case 'chat':
-          await fetchChatSnapshot(cascadeId, isUpdate);
-          break;
-        case 'editor':
-          await fetchEditorSnapshot(cascadeId, isUpdate);
-          break;
-      }
-    }
-    // Chat snapshot
-    async function fetchChatSnapshot(cascadeId, isUpdate = false) {
-      try {
-        const r = await fetch(`/snapshot/${cascadeId}`);
-        if (!r.ok) {
-          if (navigationPending) {
-            setTimeout(() => fetchChatSnapshot(cascadeId, isUpdate), 500);
-            return;
-          }
-          if (r.status === 404) showLoading('chat', 'Waiting for snapshot...');
-          return;
-        }
-        const snapshot = await r.json();
-        if (snapshot && snapshot.html && snapshot.html.length > 100) {
-          lastSuccessfulSnapshot = snapshot;
-          navigationPending = false;
-          renderChatSnapshot(snapshot, isUpdate);
-        } else if (lastSuccessfulSnapshot && navigationPending) {
-          setTimeout(() => fetchChatSnapshot(cascadeId, isUpdate), 300);
-        } else {
-          renderChatSnapshot(snapshot);
-        }
-      } catch (e) {
-        if (!navigationPending) showToast('Failed to load chat');
-      }
-    }
-    function renderChatSnapshot(snapshot, isUpdate = false) {
-      // Prevent concurrent renders
-      if (isRendering) return;
-      isRendering = true;
-      // Save scroll position of inner scrollable element before update
-      let innerScrollable = panels.chat.content.querySelector('.overflow-y-auto, [class*="scroll"]');
-      const hadContent = innerScrollable && innerScrollable.scrollHeight > 100;
-      const scrollTop = innerScrollable ? innerScrollable.scrollTop : 0;
-      const scrollHeight = innerScrollable ? innerScrollable.scrollHeight : 0;
-      const clientHeight = innerScrollable ? innerScrollable.clientHeight : 0;
-      const wasAtBottom = !hadContent || (scrollHeight - scrollTop - clientHeight < 100);
-      let html = getBaseStyles();
-      if (currentStyles) html += `<style>${currentStyles}</style>`;
-      html += snapshot.html || '';
-      panels.chat.content.innerHTML = html;
-      // Set background color - use solid dark background instead of transparent
-      if (snapshot.bodyBg) {
-        panels.chat.container.style.background = snapshot.bodyBg;
-      } else {
-        // Fallback to solid dark background matching Kiro IDE
-        panels.chat.container.style.background = '#1e1e1e';
-      }
-      hideLoading('chat');
-      // Find the new inner scrollable element and scroll it
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          // Find all scrollable elements and scroll them
-          const scrollables = panels.chat.content.querySelectorAll('.overflow-y-auto, [class*="scroll"]');
-          scrollables.forEach(el => {
-            if (el.scrollHeight > el.clientHeight + 10) {
-              if (!isUpdate || wasAtBottom) {
-                el.scrollTop = el.scrollHeight;
-              } else if (hadContent) {
-                el.scrollTop = scrollTop;
-              }
-            }
-          });
-          // Also scroll the main container if needed
-          if (!isUpdate || wasAtBottom) {
-            panels.chat.content.scrollTop = panels.chat.content.scrollHeight;
-          }
-          // Release rendering lock
-          isRendering = false;
-        });
-      });
-      makeInteractive();
-    }
-    // Editor snapshot
-    async function fetchEditorSnapshot(cascadeId, isUpdate = false) {
-      try {
-        const r = await fetch(`/editor/${cascadeId}`);
-        if (!r.ok) {
-          showEmptyState('editor', 'codicon-file-code', 'No file is currently open. Open a file in Kiro to view it here.');
-          return;
-        }
-        const data = await r.json();
-        renderEditorSnapshot(data, isUpdate);
-      } catch (e) {
-        showEmptyState('editor', 'codicon-file-code', 'Failed to load editor');
-      }
-    }
-    function renderEditorSnapshot(data, isUpdate = false) {
-      const scrollTop = panels.editor.content.scrollTop;
-      // Update header
-      panels.editor.filename.textContent = data.fileName || 'Untitled';
-      // Show header
-      panels.editor.header.style.display = 'flex';
-      // Store original content for search
-      originalEditorContent = data.content || '';
-      // Reset search when new file loaded
-      closeEditorSearch();
-      // Prefer text content over raw HTML for better mobile display
-      if (data.content && data.content.trim().length > 0) {
-        const lines = data.content.split('\n');
-        let html = '';
-        // Add note if partial content
-        if (data.isPartial || data.note) {
-          html += `<div style="padding: 8px 12px; background: #2d2d30; color: #888; font-size: 11px; border-bottom: 1px solid #3c3c3c;">
-            <span class="codicon codicon-info" style="margin-right: 6px;"></span>
-            ${data.note || 'Showing visible lines only. Scroll in Kiro to see more.'}
-          </div>`;
-        }
-        html += '<pre class="editor-code">';
-        // Use startLine from server if available, otherwise start from 1
-        const startLineNum = data.startLine || 1;
-        // Filter out empty lines at the start if there are too many
-        let startIdx = 0;
-        while (startIdx < lines.length && lines[startIdx].trim() === '' && startIdx < 3) {
-          startIdx++;
-        }
-        const displayLines = lines.slice(startIdx);
-        displayLines.forEach((line, idx) => {
-          const lineNum = startLineNum + startIdx + idx;
-          const highlighted = highlightSyntax(line, data.language);
-          // Preserve whitespace - convert tabs and spaces
-          let preservedLine = highlighted
-            .replace(/\t/g, '    ')
-            .replace(/^ +/, match => '&nbsp;'.repeat(match.length));
-          html += `<div class="editor-line"><span class="editor-line-num">${lineNum}</span><span class="editor-line-code">${preservedLine || '&nbsp;'}</span></div>`;
-        });
-        html += '</pre>';
-        // Add line count info
-        const endLine = startLineNum + startIdx + displayLines.length - 1;
-        html += `<div style="padding: 6px 12px; background: #252526; color: #666; font-size: 11px; border-top: 1px solid #3c3c3c;">
-          Lines ${startLineNum}-${endLine}${data.lineCount ? ` of ${data.lineCount}` : ''}
-        </div>`;
-        panels.editor.content.innerHTML = html;
-        panels.editor.content.style.display = 'block';
-        console.log('[Editor] Rendered', displayLines.length, 'lines of code starting from line', startLineNum);
-      } else if (data.html && data.html.length > 100) {
-        // Fallback to raw HTML if no text content
-        let html = getBaseStyles();
-        if (currentStyles) html += `<style>${currentStyles}</style>`;
-        html += data.html;
-        panels.editor.content.innerHTML = html;
-        panels.editor.content.style.display = 'block';
-        console.log('[Editor] Rendered raw HTML');
-      } else {
-        showEmptyState('editor', 'codicon-file-code', 'No editor content available. Open a file in Kiro to view it here.');
-        return;
-      }
-      hideLoading('editor');
-      // Preserve scroll on updates
-      if (isUpdate) {
-        panels.editor.content.scrollTop = scrollTop;
-      }
-    }
-    // Syntax highlighting (basic)
-    function highlightSyntax(line, language) {
-      let escaped = escapeHtml(line);
-      // Skip syntax highlighting for CSS (too complex with # colors)
-      if (language === 'css' || language === 'html') {
-        return escaped;
-      }
-      // Comments - be careful not to match CSS color codes
-      // Only match // comments and # comments that start at beginning or after whitespace
-      escaped = escaped.replace(/(\/\/.*$)/gm, '<span class="token-comment">$1</span>');
-      escaped = escaped.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="token-comment">$1</span>');
-      // Python/shell comments - only if # is at start of line or after whitespace, not in middle of word
-      if (language === 'python' || language === 'bash' || language === 'sh') {
-        escaped = escaped.replace(/(^|\s)(#.*)$/gm, '$1<span class="token-comment">$2</span>');
-      }
-      // Strings - match quoted strings
-      escaped = escaped.replace(/(&quot;[^&]*?&quot;)/g, '<span class="token-string">$1</span>');
-      escaped = escaped.replace(/(&#39;[^&]*?&#39;)/g, '<span class="token-string">$1</span>');
-      // Keywords
-      const keywords = ['const', 'let', 'var', 'function', 'class', 'return', 'if', 'else', 'for', 'while', 'import', 'export', 'from', 'async', 'await', 'try', 'catch', 'throw', 'new', 'this', 'super', 'extends', 'implements', 'interface', 'type', 'enum', 'public', 'private', 'protected', 'static', 'readonly', 'def', 'self', 'None', 'True', 'False'];
-      keywords.forEach(kw => {
-        const regex = new RegExp(`\\b(${kw})\\b`, 'g');
-        escaped = escaped.replace(regex, '<span class="token-keyword">$1</span>');
-      });
-      // Numbers - but not inside other tokens
-      escaped = escaped.replace(/\b(\d+\.?\d*)\b/g, '<span class="token-number">$1</span>');
-      return escaped;
-    }
-    // Helper functions
-    function escapeHtml(text) {
-      const div = document.createElement('div');
-      div.textContent = text;
-      return div.innerHTML;
-    }
-    function showEmptyState(panelName, icon, message) {
-      const p = panels[panelName];
-      p.content.innerHTML = `
-        <div class="empty-state">
-          <span class="codicon ${icon}"></span>
-          <p>${message}</p>
-        </div>
-      `;
-      hideLoading(panelName);
-    }
-    function toggleSection(header) {
-      header.classList.toggle('collapsed');
-      const content = header.nextElementSibling;
-      if (content) content.classList.toggle('collapsed');
-    }
-    // Base styles for chat panel
-    function getBaseStyles() {
-      return `<style>
-        :root, body, #root, .app {
-          font-family: "Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Ubuntu, "Droid Sans", sans-serif !important;
-          font-size: 13px;
-          --vscode-editor-background: #211d25;
-          --vscode-editor-foreground: #ffffff;
-          --vscode-foreground: #ffffff;
-          --vscode-background: #19161d;
-          --color-text-primary: #ffffff;
-          --color-text-secondary: rgba(255, 255, 255, 0.8);
-          --color-text-tertiary: rgba(255, 255, 255, 0.6);
-          --color-border-primary: #4a464f;
-          --vscode-toggleSwitch-onForeground: #ffffff;
-          --vscode-toggleSwitch-onBackground: #8141e6;
-          --vscode-toggleSwitch-offForeground: #ffffff;
-          --vscode-toggleSwitch-offBackground: #28242e;
-          --vscode-chatTab-foreground: #c1bec6;
-          --vscode-chatTab-background: transparent;
-          --vscode-button-tertiaryForeground: #c1bec6;
-          --vscode-button-tertiaryBackground: transparent;
-          --vscode-button-tertiaryHoverBackground: rgba(255, 255, 255, 0.1);
-          --vscode-button-submitBackground: #7138cc;
-          --vscode-button-submitHoverBackground: #8e47ff;
-          --vscode-input-border: #4a464f;
-          --vscode-chatMessage-background: rgba(255, 255, 255, 0.1);
-          --vscode-agentInProgressIcon-foreground: #7138cc;
-          --vscode-agentAcceptedIcon-foreground: rgba(128, 255, 181, 0.75);
-        }
-        /* Force solid background for all content */
-        body, #root, .app, [class*="chat"], [class*="Chat"], [class*="cascade"], [class*="Cascade"] {
-          background: #1e1e1e !important;
-          background-color: #1e1e1e !important;
-        }
-        /* CRITICAL: Hide tooltips, popovers, and overlay elements - but NOT dropdown buttons */
-        [role="tooltip"],
-        [data-tooltip],
-        [class*="tooltip"]:not(button):not([role="button"]),
-        [class*="Tooltip"]:not(button):not([role="button"]),
-        [class*="popover"]:not(button):not([role="button"]),
-        [class*="Popover"]:not(button):not([role="button"]),
-        [class*="overlay"]:not(button):not([role="button"]):not([class*="dropdown"]),
-        [class*="Overlay"]:not(button):not([role="button"]):not([class*="dropdown"]),
-        [class*="modal"],
-        [class*="Modal"] {
-          display: none !important;
-          visibility: hidden !important;
-          opacity: 0 !important;
-          pointer-events: none !important;
-        }
-        /* ========== MODEL SELECTOR DROPDOWN ========== */
-        /* Dropdown menu panel - needs solid background and proper z-index */
-        [class*="dropdown-menu"], [class*="dropdownMenu"], [class*="DropdownMenu"],
-        [class*="dropdown-content"], [class*="dropdownContent"], [class*="DropdownContent"],
-        [class*="model-list"], [class*="modelList"], [class*="ModelList"],
-        [role="listbox"], [role="menu"] {
-          display: block !important;
-          visibility: visible !important;
-          opacity: 1 !important;
-          pointer-events: auto !important;
-          background: #2d2d30 !important;
-          background-color: #2d2d30 !important;
-          border: 1px solid #4a464f !important;
-          border-radius: 6px !important;
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
-          z-index: 9999 !important;
-          position: absolute !important;
-        }
-        /* Dropdown menu items */
-        [class*="dropdown-item"], [class*="dropdownItem"], [class*="DropdownItem"],
-        [class*="model-option"], [class*="modelOption"], [class*="ModelOption"],
-        [role="option"], [role="menuitem"] {
-          display: flex !important;
-          visibility: visible !important;
-          opacity: 1 !important;
-          pointer-events: auto !important;
-          padding: 8px 12px !important;
-          cursor: pointer !important;
-          background: transparent !important;
-          color: #cccccc !important;
-        }
-        [class*="dropdown-item"]:hover, [class*="dropdownItem"]:hover,
-        [role="option"]:hover, [role="menuitem"]:hover {
-          background: rgba(255, 255, 255, 0.1) !important;
-        }
-        /* Model selector button - NO border, match Kiro style */
-        [class*="model-selector"], [class*="modelSelector"], [class*="ModelSelector"],
-        [class*="model-dropdown"], [class*="modelDropdown"], [class*="ModelDropdown"],
-        button[class*="dropdown"], [role="button"][class*="dropdown"],
-        [class*="select-model"], [class*="selectModel"] {
-          display: inline-flex !important;
-          visibility: visible !important;
-          opacity: 1 !important;
-          pointer-events: auto !important;
-          align-items: center !important;
-          gap: 4px !important;
-          padding: 4px 8px !important;
-          background: transparent !important;
-          border: none !important;
-          border-radius: 4px !important;
-          color: var(--vscode-foreground, #c1bec6) !important;
-          font-size: 12px !important;
-          cursor: pointer !important;
-        }
-        [class*="model-selector"]:hover, [class*="modelSelector"]:hover,
-        button[class*="dropdown"]:hover {
-          background: rgba(255, 255, 255, 0.1) !important;
-        }
-        /* Model selector chevron/arrow icon */
-        [class*="model-selector"] svg, [class*="modelSelector"] svg,
-        [class*="model-dropdown"] svg, button[class*="dropdown"] svg {
-          width: 12px !important;
-          height: 12px !important;
-          flex-shrink: 0 !important;
-        }
-        /* Model name text inside selector */
-        [class*="model-selector"] span, [class*="modelSelector"] span,
-        [class*="model-name"], [class*="modelName"] {
-          overflow: hidden !important;
-          text-overflow: ellipsis !important;
-          white-space: nowrap !important;
-        }
-        /* Reset positioning for captured content to prevent layout issues */
-        #root, .app, [class*="cascade"], [class*="Cascade"] {
-          position: relative !important;
-        }
-        /* Ensure proper stacking and no fixed positioning breaks layout */
-        [style*="position: fixed"],
-        [style*="position:fixed"] {
-          position: absolute !important;
-        }
-        * { font-family: inherit; }
-        code, pre, .monaco-editor { font-family: Menlo, Monaco, "Courier New", monospace !important; }
-        /* Icon sizes - keep them small like in IDE */
-        svg[viewBox="0 0 24 24"] { width: 16px !important; height: 16px !important; }
-        svg[viewBox="0 0 16 16"] { width: 14px !important; height: 14px !important; }
-        svg { color: inherit; max-width: 20px !important; max-height: 20px !important; }
-        svg path, svg rect { fill: currentColor; }
-        svg[fill="none"] path { fill: none; }
-        /* Preserve stroke-based SVG circles (like context window progress ring) */
-        svg circle[stroke] { fill: none !important; }
-        svg circle:not([stroke]) { fill: currentColor; }
-        /* Context window progress circle styling */
-        svg[class*="context"], svg[class*="progress"], [class*="context"] svg {
-          overflow: visible !important;
-        }
-        svg circle[stroke-dasharray] {
-          fill: none !important;
-          stroke-linecap: round !important;
-        }
-        /* Context window indicator - circular progress ring */
-        [class*="context-window"], [class*="contextWindow"], [class*="ContextWindow"],
-        [class*="context-indicator"], [class*="contextIndicator"], [class*="ContextIndicator"],
-        [class*="token-usage"], [class*="tokenUsage"], [class*="TokenUsage"] {
-          display: inline-flex !important;
-          visibility: visible !important;
-          opacity: 1 !important;
-          align-items: center !important;
-          justify-content: center !important;
-          width: 20px !important;
-          height: 20px !important;
-          position: relative !important;
-          flex-shrink: 0 !important;
-        }
-        /* Create gray background circle using box-shadow on the container */
-        [class*="context-window"]::before, [class*="contextWindow"]::before, [class*="ContextWindow"]::before,
-        [class*="context-indicator"]::before, [class*="contextIndicator"]::before {
-          content: '' !important;
-          position: absolute !important;
-          top: 2px !important;
-          left: 2px !important;
-          width: 16px !important;
-          height: 16px !important;
-          border-radius: 50% !important;
-          border: 2px solid #4a464f !important;
-          box-sizing: border-box !important;
-          z-index: 0 !important;
-        }
-        [class*="context-window"] svg, [class*="contextWindow"] svg, [class*="ContextWindow"] svg,
-        [class*="context-indicator"] svg, [class*="contextIndicator"] svg {
-          width: 16px !important;
-          height: 16px !important;
-          transform: rotate(-90deg) !important;
-          position: relative !important;
-          z-index: 1 !important;
-        }
-        [class*="context-window"] svg circle, [class*="contextWindow"] svg circle, [class*="ContextWindow"] svg circle,
-        [class*="context-indicator"] svg circle, [class*="contextIndicator"] svg circle {
-          fill: none !important;
-          stroke-width: 2 !important;
-          stroke-linecap: round !important;
-          stroke: #4ade80 !important;
-        }
-        /* Ensure circles are visible */
-        [class*="context"] svg circle,
-        [class*="Context"] svg circle {
-          display: block !important;
-          visibility: visible !important;
-        }
-        /* ========== CHAT INPUT TOOLBAR AREA ========== */
-        /* The toolbar/footer area containing model selector, context, autopilot, input */
-        [class*="chat-input"], [class*="chatInput"], [class*="ChatInput"],
-        [class*="input-area"], [class*="inputArea"], [class*="InputArea"],
-        [class*="message-input"], [class*="messageInput"], [class*="MessageInput"],
-        [class*="composer"], [class*="Composer"] {
-          display: flex !important;
-          visibility: visible !important;
-          flex-direction: column !important;
-          gap: 8px !important;
-          padding: 8px 12px !important;
-          background: var(--vscode-editor-background, #1e1e1e) !important;
-          border-top: 1px solid var(--color-border-primary, #4a464f) !important;
-        }
-        /* Input toolbar row (contains # button, model selector, context, autopilot) */
-        [class*="input-toolbar"], [class*="inputToolbar"], [class*="InputToolbar"],
-        [class*="chat-toolbar"], [class*="chatToolbar"], [class*="ChatToolbar"],
-        [class*="composer-toolbar"], [class*="composerToolbar"] {
-          display: flex !important;
-          visibility: visible !important;
-          align-items: center !important;
-          gap: 8px !important;
-          flex-wrap: wrap !important;
-        }
-        /* Context button (# symbol) - NO border, match Kiro style */
-        [class*="context-button"], [class*="contextButton"], [class*="ContextButton"],
-        button[aria-label*="context"], button[aria-label*="Context"],
-        [class*="hash-button"], [class*="hashButton"] {
-          display: inline-flex !important;
-          visibility: visible !important;
-          align-items: center !important;
-          justify-content: center !important;
-          width: 28px !important;
-          height: 28px !important;
-          padding: 4px !important;
-          background: transparent !important;
-          border: none !important;
-          border-radius: 4px !important;
-          color: var(--vscode-foreground, #c1bec6) !important;
-          font-size: 16px !important;
-          font-weight: 600 !important;
-          cursor: pointer !important;
-        }
-        [class*="context-button"]:hover, [class*="contextButton"]:hover,
-        button[aria-label*="context"]:hover {
-          background: rgba(255, 255, 255, 0.1) !important;
-        }
-        /* ========== MESSAGE TEXT FLOW - INLINE ELEMENTS ========== */
-        /* Fix text flow so file links and code stay inline with text */
-        [class*="message"] p,
-        [class*="Message"] p,
-        [class*="chat"] p,
-        [class*="Chat"] p {
-          display: block !important;
-        }
-        /* Make file links, code, and inline elements stay inline */
-        [class*="message"] a,
-        [class*="Message"] a,
-        [class*="message"] code,
-        [class*="Message"] code,
-        [class*="message"] span,
-        [class*="Message"] span,
-        [class*="chat"] a,
-        [class*="Chat"] a,
-        [class*="chat"] code,
-        [class*="Chat"] code,
-        [class*="file-link"],
-        [class*="FileLink"],
-        [class*="inline"],
-        code:not(pre code) {
-          display: inline !important;
-          vertical-align: baseline !important;
-        }
-        /* Inline code styling */
-        code:not(pre code) {
-          background: rgba(255, 255, 255, 0.1) !important;
-          padding: 2px 6px !important;
-          border-radius: 3px !important;
-          font-family: Menlo, Monaco, "Courier New", monospace !important;
-          font-size: 12px !important;
-        }
-        /* File badges/chips should be inline */
-        [class*="file-badge"],
-        [class*="FileBadge"],
-        [class*="file-chip"],
-        [class*="FileChip"],
-        [class*="deleted"],
-        [class*="Deleted"],
-        [class*="created"],
-        [class*="Created"],
-        [class*="modified"],
-        [class*="Modified"] {
-          display: inline-flex !important;
-          align-items: center !important;
-          gap: 4px !important;
-          padding: 2px 8px !important;
-          border-radius: 4px !important;
-          background: rgba(255, 255, 255, 0.08) !important;
-          margin: 2px 4px !important;
-          font-size: 12px !important;
-          vertical-align: middle !important;
-        }
-        /* Bullet lists should have proper inline content */
-        ul li, ol li {
-          display: list-item !important;
-        }
-        ul li > *, ol li > * {
-          display: inline !important;
-        }
-        ul li > p, ol li > p {
-          display: inline !important;
-          margin: 0 !important;
-        }
-        [role="switch"], [class*="toggle"] {
-          overflow: visible !important;
-          min-width: 36px !important;
-          flex-shrink: 0 !important;
-        }
-        /* ========== TASK LIST STYLING - EXACT KIRO IDE MATCH ========== */
-        /* Force solid background for task containers */
-        [class*="task"], [class*="Task"],
-        div:has(> h1:contains("CURRENT TASKS")),
-        div:has(> h2:contains("CURRENT TASKS")),
-        div:has(> h3:contains("CURRENT TASKS")),
-        div:has(> h1:contains("TASKS IN QUEUE")),
-        div:has(> h2:contains("TASKS IN QUEUE")),
-        div:has(> h3:contains("TASKS IN QUEUE")) {
-          font-family: "Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Ubuntu, "Droid Sans", sans-serif !important;
-          background: #1e1e1e !important;
-          background-color: #1e1e1e !important;
-        }
-        /* Task section headers - BOLD WHITE UPPERCASE */
-        h1:contains("CURRENT TASKS"),
-        h2:contains("CURRENT TASKS"),
-        h3:contains("CURRENT TASKS"),
-        h1:contains("TASKS IN QUEUE"),
-        h2:contains("TASKS IN QUEUE"),
-        h3:contains("TASKS IN QUEUE"),
-        [class*="task"] h1, [class*="Task"] h1,
-        [class*="task"] h2, [class*="Task"] h2,
-        [class*="task"] h3, [class*="Task"] h3,
-        [class*="task-header"], [class*="TaskHeader"],
-        [class*="section-title"], [class*="SectionTitle"],
-        div[class*="current"] h1, div[class*="Current"] h1,
-        div[class*="current"] h2, div[class*="Current"] h2,
-        div[class*="current"] h3, div[class*="Current"] h3,
-        div[class*="queue"] h1, div[class*="Queue"] h1,
-        div[class*="queue"] h2, div[class*="Queue"] h2,
-        div[class*="queue"] h3, div[class*="Queue"] h3 {
-          font-size: 13px !important;
-          font-weight: 700 !important;
-          letter-spacing: 0.5px !important;
-          text-transform: uppercase !important;
-          color: #ffffff !important;
-          margin: 0 0 12px 0 !important;
-          padding: 0 !important;
-          line-height: 1.4 !important;
-          background: transparent !important;
-        }
-        /* Empty state messages - ITALIC GRAY */
-        p:contains("No active tasks"),
-        p:contains("No tasks in queue"),
-        [class*="task"] p:not([class*="task-item"]),
-        [class*="Task"] p:not([class*="TaskItem"]),
-        [class*="no-task"], [class*="NoTask"],
-        [class*="empty-task"], [class*="EmptyTask"],
-        [class*="task-empty"], [class*="TaskEmpty"] {
-          font-size: 13px !important;
-          font-style: italic !important;
-          color: #888888 !important;
-          margin: 0 0 16px 0 !important;
-          padding: 0 !important;
-          line-height: 1.6 !important;
-          background: transparent !important;
-        }
-        /* Task list containers */
-        [class*="task-list"], [class*="TaskList"],
-        [class*="task-section"], [class*="TaskSection"] {
-          margin-bottom: 24px !important;
-          padding: 0 !important;
-          background: #1e1e1e !important;
-        }
-        /* Horizontal divider between sections */
-        [class*="task-divider"], [class*="TaskDivider"],
-        [class*="task"] hr, [class*="Task"] hr {
-          border: none !important;
-          border-top: 1px solid #3c3c3c !important;
-          margin: 20px 0 !important;
-          background: transparent !important;
-        }
-        /* Individual task items (when they exist) */
-        [class*="task-item"], [class*="TaskItem"] {
-          padding: 8px 12px !important;
-          margin: 4px 0 !important;
-          background: rgba(255, 255, 255, 0.03) !important;
-          border-radius: 4px !important;
-          border-left: 2px solid #7138cc !important;
-          font-size: 13px !important;
-          color: #cccccc !important;
-          line-height: 1.5 !important;
-        }
-        [class*="task-item"]:hover, [class*="TaskItem"]:hover {
-          background: rgba(255, 255, 255, 0.05) !important;
-        }
-        /* Task item with close button */
-        [class*="task-item"] button, [class*="TaskItem"] button {
-          margin-left: 8px !important;
-          padding: 2px 6px !important;
-          font-size: 11px !important;
-          background: rgba(255, 255, 255, 0.1) !important;
-          border: 1px solid #4a464f !important;
-          border-radius: 3px !important;
-          color: #888 !important;
-          cursor: pointer !important;
-        }
-        [class*="task-item"] button:hover, [class*="TaskItem"] button:hover {
-          background: rgba(255, 255, 255, 0.15) !important;
-          color: #fff !important;
-        }
-        .kiro-toggle-switch {
-          display: flex !important;
-          align-items: center !important;
-          gap: 4px !important;
-          padding: 4px !important;
-          border-radius: 6px !important;
-          border: none !important;
-        }
-        .kiro-toggle-switch > input[type="checkbox"] {
-          appearance: none !important;
-          width: 36px !important;
-          height: 18px !important;
-          border-radius: 9px !important;
-          background-color: var(--vscode-toggleSwitch-offBackground) !important;
-          border: 1px solid var(--vscode-input-border) !important;
-          cursor: pointer !important;
-          position: relative !important;
-        }
-        .kiro-toggle-switch > input[type="checkbox"]::after {
-          content: "" !important;
-          position: absolute !important;
-          top: 50% !important;
-          left: 2px !important;
-          transform: translateY(-50%) !important;
-          width: 14px !important;
-          height: 14px !important;
-          border-radius: 50% !important;
-          background-color: #fff !important;
-          transition: left 0.2s !important;
-        }
-        .kiro-toggle-switch > input[type="checkbox"]:checked {
-          background-color: var(--vscode-toggleSwitch-onBackground) !important;
-        }
-        .kiro-toggle-switch > input[type="checkbox"]:checked::after {
-          left: 18px !important;
-        }
-      </style>`;
-    }
-    // Make chat elements interactive
-    function makeInteractive() {
-      const content = panels.chat.content;
-      // Input fields
-      const inputSelectors = ['[data-lexical-editor="true"]', '[contenteditable="true"][role="textbox"]', '[contenteditable="true"]', 'textarea', '.ProseMirror'];
-      for (const selector of inputSelectors) {
-        content.querySelectorAll(selector).forEach(el => {
-          el.style.cursor = 'text';
-          el.addEventListener('focus', () => { isTypingInKiroInput = true; });
-          el.addEventListener('blur', () => { setTimeout(() => { isTypingInKiroInput = false; }, 500); });
-          el.addEventListener('keydown', async (e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-              e.preventDefault();
-              const text = el.textContent || el.value || '';
-              if (text.trim()) {
-                await sendToKiro(text.trim());
-                el.textContent = '';
-                el.innerHTML = '';
-                isTypingInKiroInput = false;
-              }
-            }
-          });
-        });
-      }
-      // Toggle switches
-      content.querySelectorAll('.kiro-toggle-switch, [role="switch"], input[type="checkbox"][role="switch"]').forEach(toggle => {
-        const input = toggle.tagName === 'INPUT' ? toggle : toggle.querySelector('input[type="checkbox"]');
-        const wrapper = toggle.closest('.kiro-toggle-switch') || toggle;
-        wrapper.style.cursor = 'pointer';
-        wrapper.onclick = async (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          const label = wrapper.querySelector('label');
-          const clickInfo = {
-            tag: 'div',
-            text: label ? label.textContent.trim() : 'toggle',
-            role: 'switch',
-            isToggle: true,
-            toggleId: input ? input.id : '',
-            checked: input ? input.checked : false
-          };
-          await sendClickToKiro(clickInfo);
-          return false;
-        };
-      });
-      // Tabs
-      content.querySelectorAll('[role="tab"]').forEach(tab => {
-        const closeBtn = tab.querySelector('[aria-label="close"], [class*="close"]');
-        if (closeBtn) {
-          closeBtn.style.cursor = 'pointer';
-          closeBtn.onclick = async (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            await sendClickToKiro({ tag: 'button', text: 'close', ariaLabel: 'close', role: 'button', isCloseButton: true });
-            return false;
-          };
-        }
-        tab.style.cursor = 'pointer';
-        tab.onclick = async (e) => {
-          if (e.target.closest('[aria-label="close"], [class*="close"], button')) return;
-          e.preventDefault();
-          e.stopPropagation();
-          const labelEl = tab.querySelector('.kiro-tabs-item-label, [class*="label"]');
-          const labelText = labelEl ? labelEl.textContent.trim() : tab.textContent.trim();
-          await sendClickToKiro({ tag: 'div', text: labelText, role: 'tab', isTab: true, tabLabel: labelText });
-          return false;
-        };
-      });
-      // File links - detect file paths in chat and make them clickable to open in Editor
-      const fileExtensions = /\.(ts|tsx|js|jsx|py|java|html|css|json|md|yaml|yml|xml|sql|go|rs|c|cpp|h|cs|rb|php|sh|vue|svelte|astro|cob|cbl)$/i;
-      const filePathPattern = /^[a-zA-Z0-9_\-./\\]+\.[a-zA-Z0-9]+$/;
-      // Look for elements that might contain file paths
-      content.querySelectorAll('a, code, span, [class*="file"], [class*="path"], [data-path]').forEach(el => {
-        if (el.onclick) return;
-        const text = (el.textContent || '').trim();
-        const dataPath = el.getAttribute('data-path') || '';
-        const href = el.getAttribute('href') || '';
-        // Check if this looks like a file path
-        const isFilePath = (
-          fileExtensions.test(text) ||
-          fileExtensions.test(dataPath) ||
-          fileExtensions.test(href) ||
-          (filePathPattern.test(text) && text.includes('/'))
-        );
-        if (isFilePath) {
-          const filePath = dataPath || text || href;
-          el.style.cursor = 'pointer';
-          el.style.textDecoration = 'underline';
-          el.style.color = '#7eb6ff';
-          el.title = `Open ${filePath} in Editor`;
-          el.onclick = async (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            await openFileInEditor(filePath);
-            return false;
-          };
-        }
-      });
-      // Buttons and clickable elements
-      const clickableSelectors = ['button', '[role="button"]', '[role="menuitem"]', '[role="option"]', '[role="checkbox"]', 'a[href]', '[tabindex="0"]'];
-      const allClickables = new Set();
-      clickableSelectors.forEach(sel => {
-        try { content.querySelectorAll(sel).forEach(el => allClickables.add(el)); } catch(e) {}
-      });
-      // Also add dropdown menu items
-      content.querySelectorAll('[class*="dropdown-item"], [class*="dropdownItem"], [class*="model-option"], [class*="modelOption"]').forEach(el => {
-        allClickables.add(el);
-      });
-      allClickables.forEach(el => {
-        if (el.matches && el.matches('[contenteditable], textarea, input:not([type="checkbox"])')) return;
-        if (el.closest('[role="tab"]')) return;
-        if (el.closest('.kiro-toggle-switch')) return;
-        if (el.onclick) return;
-        el.style.cursor = 'pointer';
-        el.onclick = async (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          const clickInfo = getElementClickInfo(el);
-          // Check if this is a model selection item
-          if (el.matches('[role="option"], [role="menuitem"], [class*="model"], [class*="Model"]') ||
-              el.closest('[role="listbox"], [role="menu"], [class*="dropdown-menu"], [class*="dropdownMenu"]')) {
-            clickInfo.isModelSelection = true;
-            clickInfo.modelName = el.textContent?.trim().split('\n')[0] || '';
-          }
-          await sendClickToKiro(clickInfo);
-          return false;
-        };
-      });
-    }
-    function getElementClickInfo(el) {
-      const info = {
-        tag: el.tagName?.toLowerCase() || '',
-        text: (el.textContent || '').trim().substring(0, 100),
-        ariaLabel: el.getAttribute('aria-label') || '',
-        title: el.getAttribute('title') || '',
-        role: el.getAttribute('role') || '',
-        className: el.className || '',
-        isTab: el.getAttribute('role') === 'tab',
-        dataTestId: el.getAttribute('data-testid') || ''
-      };
-      if (!info.ariaLabel) {
-        const parent = el.closest('[aria-label]');
-        if (parent) info.ariaLabel = parent.getAttribute('aria-label') || '';
-      }
-      return info;
-    }
-    async function sendToKiro(message) {
-      if (!message || !selectedCascadeId) return;
-      try {
-        const r = await fetch(`/send/${selectedCascadeId}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ message })
-        });
-        const result = await r.json();
-        if (result.success) showToast('Sent!', 1500, true);
-        else showToast(result.error || 'Failed to send');
-      } catch (e) {
-        showToast('Failed to send');
-      }
-    }
-    async function sendClickToKiro(clickInfo) {
-      if (!selectedCascadeId) return;
-      const isNavigation =
-        clickInfo.ariaLabel?.toLowerCase().includes('back') ||
-        clickInfo.ariaLabel?.toLowerCase().includes('close') ||
-        clickInfo.text?.toLowerCase().includes('back') ||
-        clickInfo.role === 'tab';
-      const isModelSelection = clickInfo.isModelSelection ||
-        clickInfo.role === 'option' ||
-        clickInfo.role === 'menuitem' ||
-        clickInfo.className?.includes('model');
-      if (isNavigation) navigationPending = true;
-      try {
-        await fetch(`/click/${selectedCascadeId}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(clickInfo)
-        });
-        if (isNavigation || isModelSelection) {
-          // Refresh snapshot after navigation or model selection
-          setTimeout(() => fetchChatSnapshot(selectedCascadeId), 300);
-        }
-      } catch (e) {
-        navigationPending = false;
-      }
-    }
-    // Open file in Editor tab
-    async function openFileInEditor(filePath) {
-      if (!selectedCascadeId || !filePath) return;
-      showToast(`Opening ${filePath}...`, 1500);
-      // Switch to Editor tab immediately
-      const editorTab = document.querySelector('[data-panel="editor"]');
-      if (editorTab) {
-        navTabs.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
-        editorTab.classList.add('active');
-        Object.values(panels).forEach(p => {
-          if (p.panel) p.panel.classList.remove('active');
-        });
-        panels.editor.panel.classList.add('active');
-        activePanel = 'editor';
-        // Show loading state
-        showLoading('editor', 'Loading file...');
-      }
-      try {
-        // First, try to read the file directly from filesystem (bypasses Monaco limitation)
-        const readResult = await fetch(`/readFile/${selectedCascadeId}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ filePath })
-        });
-        if (readResult.ok) {
-          const data = await readResult.json();
-          if (data.content) {
-            renderEditorSnapshot(data);
-            showToast(`Opened ${data.fileName || filePath}`, 1500, true);
-            console.log('[Editor] Loaded file directly:', data.fileName, data.lineCount, 'lines');
-            return;
-          }
-        } else {
-          const errorData = await readResult.json().catch(() => ({}));
-          console.log('[Editor] Direct file read failed:', errorData.error || readResult.status);
-        }
-        // Fallback: Try to click on the file link in Kiro to open it in Monaco
-        console.log('[Editor] Falling back to Monaco capture...');
-        const clickResult = await fetch(`/click/${selectedCascadeId}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            tag: 'a',
-            text: filePath,
-            isFileLink: true,
-            filePath: filePath
-          })
-        });
-        const result = await clickResult.json();
-        console.log('Click result:', result);
-        // Wait for the file to open in Kiro
-        await new Promise(resolve => setTimeout(resolve, 800));
-        // Fetch the editor content from Monaco
-        const fetchEditor = async () => {
-          try {
-            const r = await fetch(`/editor/${selectedCascadeId}`);
-            if (r.ok) {
-              const data = await r.json();
-              if (data.content || data.html) {
-                renderEditorSnapshot(data);
-                showToast(`Opened ${data.fileName || filePath}`, 1500, true);
-                return true;
-              }
-            }
-          } catch (e) {}
-          return false;
-        };
-        // Try fetching a few times with delays
-        if (!await fetchEditor()) {
-          await new Promise(resolve => setTimeout(resolve, 500));
-          if (!await fetchEditor()) {
-            await new Promise(resolve => setTimeout(resolve, 500));
-            if (!await fetchEditor()) {
-              showEmptyState('editor', 'codicon-file-code', `Could not load ${filePath}. File may not exist or path is incorrect.`);
-            }
-          }
-        }
-      } catch (e) {
-        showToast('Failed to open file');
-        console.error('Open file error:', e);
-        showEmptyState('editor', 'codicon-file-code', 'Failed to load file. Check console for details.');
-      }
-    }
-    // ==================== File Tree ====================
-    // Toggle file tree panel
-    function toggleFileTree() {
-      fileTreeOpen = !fileTreeOpen;
-      fileTreePanel.classList.toggle('open', fileTreeOpen);
-      if (fileTreeOpen) {
-        // Load files if not cached
-        if (workspaceFiles.length === 0) {
-          fetchWorkspaceFiles();
-        } else {
-          renderFileTree(workspaceFiles);
-        }
-      }
-    }
-    // Close file tree
-    function closeFileTree() {
-      fileTreeOpen = false;
-      fileTreePanel.classList.remove('open');
-    }
-    // Fetch workspace files from server
-    async function fetchWorkspaceFiles() {
-      if (!selectedCascadeId) return;
-      fileTree.innerHTML = '<div class="file-tree-loading"><div class="loading-spinner"></div>Loading files...</div>';
-      try {
-        const r = await fetch(`/files/${selectedCascadeId}`);
-        if (!r.ok) throw new Error('Failed to fetch files');
-        const data = await r.json();
-        workspaceFiles = data.files || [];
-        console.log(`[FileTree] Loaded ${workspaceFiles.length} files`);
-        renderFileTree(workspaceFiles);
-      } catch (e) {
-        console.error('Failed to fetch files:', e);
-        fileTree.innerHTML = '<div class="file-tree-empty">Failed to load files</div>';
-      }
-    }
-    // Build tree structure from flat file list
-    function buildFileTree(files) {
-      const root = { folders: {}, files: [] };
-      files.forEach(file => {
-        const parts = file.path.split(/[/\\]/);
-        let current = root;
-        // Navigate/create folder structure
-        for (let i = 0; i < parts.length - 1; i++) {
-          const folderName = parts[i];
-          if (!current.folders[folderName]) {
-            current.folders[folderName] = { folders: {}, files: [] };
-          }
-          current = current.folders[folderName];
-        }
-        // Add file to current folder
-        current.files.push({ name: parts[parts.length - 1], path: file.path });
-      });
-      return root;
-    }
-    // Get file icon based on extension
-    function getFileIcon(name) {
-      const ext = name.split('.').pop()?.toLowerCase();
-      const iconMap = {
-        'js': 'codicon-file-code', 'jsx': 'codicon-file-code',
-        'ts': 'codicon-file-code', 'tsx': 'codicon-file-code',
-        'html': 'codicon-file-code', 'css': 'codicon-file-code',
-        'json': 'codicon-json', 'md': 'codicon-markdown',
-        'py': 'codicon-file-code', 'java': 'codicon-file-code',
-        'go': 'codicon-file-code', 'rs': 'codicon-file-code',
-        'cob': 'codicon-file-code', 'cbl': 'codicon-file-code',
-        'sql': 'codicon-database', 'txt': 'codicon-file'
-      };
-      return iconMap[ext] || 'codicon-file';
-    }
-    // Render tree node recursively
-    function renderTreeNode(node, path = '', depth = 0) {
-      let html = '';
-      // Sort folders first, then files
-      const folderNames = Object.keys(node.folders).sort();
-      const sortedFiles = [...node.files].sort((a, b) => a.name.localeCompare(b.name));
-      // Render folders
-      folderNames.forEach(folderName => {
-        const folderPath = path ? `${path}/${folderName}` : folderName;
-        const isExpanded = expandedFolders.has(folderPath);
-        html += `
-          <div class="file-tree-folder" data-path="${escapeHtml(folderPath)}">
-            <div class="file-tree-folder-header" data-folder="${escapeHtml(folderPath)}">
-              <span class="file-tree-folder-icon codicon codicon-chevron-right ${isExpanded ? 'expanded' : ''}"></span>
-              <span class="codicon codicon-folder${isExpanded ? '-opened' : ''}" style="color: #dcb67a;"></span>
-              <span class="file-tree-folder-name">${escapeHtml(folderName)}</span>
-            </div>
-            <div class="file-tree-folder-contents ${isExpanded ? 'expanded' : ''}">
-              ${renderTreeNode(node.folders[folderName], folderPath, depth + 1)}
-            </div>
-          </div>
-        `;
-      });
-      // Render files
-      sortedFiles.forEach(file => {
-        html += `
-          <div class="file-tree-file" data-path="${escapeHtml(file.path)}">
-            <span class="file-tree-file-icon codicon ${getFileIcon(file.name)}"></span>
-            <span class="file-tree-file-name">${escapeHtml(file.name)}</span>
-          </div>
-        `;
-      });
-      return html;
-    }
-    // Render file tree
-    function renderFileTree(files) {
-      if (files.length === 0) {
-        fileTree.innerHTML = '<div class="file-tree-empty">No files found</div>';
-        return;
-      }
-      // Build and render tree structure
-      const tree = buildFileTree(files);
-      fileTree.innerHTML = renderTreeNode(tree);
-      // Add click handlers for folders
-      fileTree.querySelectorAll('.file-tree-folder-header').forEach(header => {
-        header.onclick = (e) => {
-          e.stopPropagation();
-          const folderPath = header.dataset.folder;
-          const folder = header.closest('.file-tree-folder');
-          const contents = folder.querySelector('.file-tree-folder-contents');
-          const chevron = header.querySelector('.file-tree-folder-icon');
-          const folderIcon = header.querySelector('.codicon-folder, .codicon-folder-opened');
-          if (expandedFolders.has(folderPath)) {
-            expandedFolders.delete(folderPath);
-            contents.classList.remove('expanded');
-            chevron.classList.remove('expanded');
-            folderIcon.classList.remove('codicon-folder-opened');
-            folderIcon.classList.add('codicon-folder');
-          } else {
-            expandedFolders.add(folderPath);
-            contents.classList.add('expanded');
-            chevron.classList.add('expanded');
-            folderIcon.classList.remove('codicon-folder');
-            folderIcon.classList.add('codicon-folder-opened');
-          }
-        };
-      });
-      // Add click handlers for files
-      fileTree.querySelectorAll('.file-tree-file').forEach(item => {
-        item.onclick = () => {
-          const path = item.dataset.path;
-          closeFileTree();
-          openFileInEditor(path);
-        };
-      });
-    }
-    // Setup file tree event listeners
-    function setupFileTree() {
-      const explorerBtn = document.getElementById('editorExplorerBtn');
-      // Explorer button click toggles file tree
-      explorerBtn.onclick = (e) => {
-        e.stopPropagation();
-        toggleFileTree();
-      };
-      // Close button
-      fileTreeClose.onclick = (e) => {
-        e.stopPropagation();
-        closeFileTree();
-      };
-      // Prevent clicks inside panel from closing it
-      fileTreePanel.onclick = (e) => {
-        e.stopPropagation();
-      };
-      // Close on escape key
-      document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && fileTreeOpen) {
-          closeFileTree();
-        }
-      });
-    }
-    // Initialize file tree
-    setupFileTree();
-    // ==================== Editor Search ====================
-    function openEditorSearch() {
-      editorSearchBar.classList.add('open');
-      editorSearchInput.focus();
-      editorSearchInput.select();
-    }
-    function closeEditorSearch() {
-      editorSearchBar.classList.remove('open');
-      editorSearchInput.value = '';
-      searchMatches = [];
-      currentMatchIndex = -1;
-      editorSearchCount.textContent = '';
-      clearSearchHighlights();
-    }
-    function clearSearchHighlights() {
-      // Restore original HTML for lines that were modified
-      const modifiedLines = panels.editor.content.querySelectorAll('.editor-line-code[data-original-html]');
-      modifiedLines.forEach(el => {
-        el.innerHTML = el.dataset.originalHtml;
-        delete el.dataset.originalHtml;
-      });
-    }
-    function performSearch(query) {
-      clearSearchHighlights();
-      searchMatches = [];
-      currentMatchIndex = -1;
-      if (!query || query.length < 1) {
-        editorSearchCount.textContent = '';
-        return;
-      }
-      const codeElements = panels.editor.content.querySelectorAll('.editor-line-code');
-      const queryLower = query.toLowerCase();
-      codeElements.forEach((lineEl, lineIndex) => {
-        const text = lineEl.textContent;
-        const textLower = text.toLowerCase();
-        let startIndex = 0;
-        let matchIndex;
-        while ((matchIndex = textLower.indexOf(queryLower, startIndex)) !== -1) {
-          searchMatches.push({
-            lineIndex,
-            lineEl,
-            startIndex: matchIndex,
-            endIndex: matchIndex + query.length
-          });
-          startIndex = matchIndex + 1;
-        }
-      });
-      if (searchMatches.length > 0) {
-        highlightMatches(query);
-        currentMatchIndex = 0;
-        scrollToMatch(0);
-        updateSearchCount();
-      } else {
-        editorSearchCount.textContent = 'No results';
-      }
-    }
-    function highlightMatches(query) {
-      const codeElements = panels.editor.content.querySelectorAll('.editor-line-code');
-      const queryLower = query.toLowerCase();
-      codeElements.forEach(lineEl => {
-        const text = lineEl.textContent;
-        const textLower = text.toLowerCase();
-        if (textLower.includes(queryLower)) {
-          // Store original HTML to restore later
-          if (!lineEl.dataset.originalHtml) {
-            lineEl.dataset.originalHtml = lineEl.innerHTML;
-          }
-          // Work with text content, find all match positions
-          const matches = [];
-          let idx = 0;
-          while ((idx = textLower.indexOf(queryLower, idx)) !== -1) {
-            matches.push({ start: idx, end: idx + query.length });
-            idx++;
-          }
-          if (matches.length > 0) {
-            // Rebuild the line with highlights
-            let result = '';
-            let lastEnd = 0;
-            matches.forEach(match => {
-              // Add text before match (escaped)
-              result += escapeHtml(text.slice(lastEnd, match.start));
-              // Add highlighted match
-              result += `<span class="search-highlight">${escapeHtml(text.slice(match.start, match.end))}</span>`;
-              lastEnd = match.end;
-            });
-            // Add remaining text
-            result += escapeHtml(text.slice(lastEnd));
-            lineEl.innerHTML = result;
-          }
-        }
-      });
-    }
-    function scrollToMatch(index) {
-      const highlights = panels.editor.content.querySelectorAll('.search-highlight');
-      // Remove current class from all
-      highlights.forEach(el => el.classList.remove('current'));
-      if (highlights[index]) {
-        highlights[index].classList.add('current');
-        // Get the scroll container and the highlight element
-        const container = panels.editor.content;
-        const element = highlights[index];
-        // Get the line element (parent of the highlight)
-        const lineEl = element.closest('.editor-line');
-        if (lineEl) {
-          // Calculate scroll position to center the line
-          const containerRect = container.getBoundingClientRect();
-          const lineRect = lineEl.getBoundingClientRect();
-          const scrollTop = container.scrollTop + (lineRect.top - containerRect.top) - (containerRect.height / 2) + (lineRect.height / 2);
-          container.scrollTo({
-            top: Math.max(0, scrollTop),
-            behavior: 'smooth'
-          });
-        }
-      }
-    }
-    function updateSearchCount() {
-      if (searchMatches.length > 0) {
-        editorSearchCount.textContent = `${currentMatchIndex + 1}/${searchMatches.length}`;
-      } else {
-        editorSearchCount.textContent = 'No results';
-      }
-    }
-    function goToNextMatch() {
-      if (searchMatches.length === 0) return;
-      currentMatchIndex = (currentMatchIndex + 1) % searchMatches.length;
-      scrollToMatch(currentMatchIndex);
-      updateSearchCount();
-    }
-    function goToPrevMatch() {
-      if (searchMatches.length === 0) return;
-      currentMatchIndex = (currentMatchIndex - 1 + searchMatches.length) % searchMatches.length;
-      scrollToMatch(currentMatchIndex);
-      updateSearchCount();
-    }
-    // Setup editor search
-    function setupEditorSearch() {
-      editorSearchBtn.onclick = () => openEditorSearch();
-      editorSearchClose.onclick = () => closeEditorSearch();
-      editorSearchNext.onclick = () => goToNextMatch();
-      editorSearchPrev.onclick = () => goToPrevMatch();
-      editorSearchInput.oninput = (e) => {
-        performSearch(e.target.value);
-      };
-      editorSearchInput.onkeydown = (e) => {
-        if (e.key === 'Enter') {
-          e.preventDefault();
-          if (e.shiftKey) {
-            goToPrevMatch();
-          } else {
-            goToNextMatch();
-          }
-        } else if (e.key === 'Escape') {
-          closeEditorSearch();
-        }
-      };
-      // Ctrl+F / Cmd+F to open search
-      document.addEventListener('keydown', (e) => {
-        if ((e.ctrlKey || e.metaKey) && e.key === 'f' && activePanel === 'editor') {
-          e.preventDefault();
-          openEditorSearch();
-        }
-      });
-    }
-    setupEditorSearch();
-    // Visibility change handler
-    document.addEventListener('visibilitychange', () => {
-      if (document.visibilityState === 'visible' && (!ws || ws.readyState !== WebSocket.OPEN)) {
-        connect();
-      }
-    });
-    // Initialize
-    connect();
-  </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="theme-color" content="#1e1e1e">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <title>Kiro Mobile Bridge</title>
+  <link rel="stylesheet" href="https://unpkg.com/@vscode/codicons@0.0.35/dist/codicon.css">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { height: 100%; overflow: hidden; background: #1e1e1e; font-family: "Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Ubuntu, "Droid Sans", sans-serif; font-size: 13px; color: #fff; }
+    .app { display: flex; flex-direction: column; height: 100%; height: 100dvh; }
+    /* Navigation Bar (combined header + tabs) */
+    .nav-bar { display: flex; align-items: center; background: #1e1e1e; border-bottom: 1px solid #3c3c3c; padding: 0 8px; flex-shrink: 0; }
+    .status { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 10px 8px; }
+    .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #666; }
+    .status-dot.connected { background: #4caf50; }
+    .status-dot.disconnected { background: #f44336; }
+    .status-text { color: #888; display: none; }
+    .nav-tabs { display: flex; align-items: center; flex: 1; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+    .nav-tabs::-webkit-scrollbar { display: none; }
+    .nav-tab { display: flex; align-items: center; gap: 6px; padding: 10px 16px; color: #888; font-size: 12px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s ease; white-space: nowrap; user-select: none; }
+    .header-title { font-size: 13px; font-weight: 600; color: #888; padding: 10px 12px; white-space: nowrap; }
+    .nav-tab:hover { color: #ccc; background: rgba(255,255,255,0.05); }
+    .nav-tab.active { color: #fff; border-bottom-color: #7138cc; }
+    .nav-tab .codicon { font-size: 14px; }
+    /* Panel Container */
+    .panel-container { flex: 1; overflow: hidden; position: relative; }
+    .panel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; display: none; }
+    .panel.active { display: flex; flex-direction: column; }
+    /* Chat Panel */
+    .chat-container { flex: 1; overflow: hidden; position: relative; }
+    .chat-content { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
+    #chatContent, #chatContent * { font-family: inherit; }
+    #chatContent code, #chatContent pre { font-family: Menlo, Monaco, "Courier New", monospace !important; }
+    #chatContent .codicon { font-family: codicon !important; font-size: 16px; line-height: 1; }
+    /* Editor Panel */
+    .editor-container { flex: 1; overflow: hidden; background: #1e1e1e; display: flex; flex-direction: column; position: relative; }
+    .editor-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #252526; border-bottom: 1px solid #3c3c3c; flex-shrink: 0; user-select: none; }
+    .editor-filename { font-size: 13px; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+    .editor-search-btn { color: #888; font-size: 16px; cursor: pointer; padding: 4px; border-radius: 4px; }
+    .editor-search-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
+    .editor-explorer-btn { display: flex; align-items: center; gap: 6px; color: #888; font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: 4px; background: #3c3c3c; }
+    .editor-explorer-btn:hover { background: #4a4a4a; }
+    .editor-explorer-text { font-size: 11px; font-weight: 600; color: #888; letter-spacing: 0.5px; }
+    .editor-search-bar { display: none; align-items: center; gap: 8px; padding: 6px 12px; background: #252526; border-bottom: 1px solid #3c3c3c; }
+    .editor-search-bar.open { display: flex; }
+    .editor-search-bar input { flex: 1; padding: 6px 10px; background: #1e1e1e; border: 1px solid #3c3c3c; border-radius: 4px; color: #fff; font-size: 13px; outline: none; }
+    .editor-search-bar input:focus { border-color: #007acc; }
+    .editor-search-count { font-size: 12px; color: #888; min-width: 50px; text-align: center; }
+    .editor-search-nav { color: #888; font-size: 16px; cursor: pointer; padding: 4px; border-radius: 4px; }
+    .editor-search-nav:hover { color: #fff; background: rgba(255,255,255,0.1); }
+    .editor-search-close { color: #888; font-size: 16px; cursor: pointer; padding: 4px; border-radius: 4px; }
+    .editor-search-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
+    .editor-content { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; background: #1e1e1e; }
+    .editor-code { margin: 0; padding: 8px 0; font-family: 'Cascadia Code', 'Fira Code', Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 1.6; color: #d4d4d4; white-space: pre; overflow-x: auto; background: #1e1e1e; }
+    .editor-line { display: flex; min-height: 1.6em; }
+    .editor-line:hover { background: rgba(255,255,255,0.04); }
+    .editor-line-num { width: 45px; min-width: 45px; text-align: right; padding-right: 12px; color: #6e7681; user-select: none; flex-shrink: 0; font-size: 12px; }
+    .editor-line-code { flex: 1; padding-right: 12px; white-space: pre; tab-size: 2; }
+    .search-highlight { background: #ffd500; color: #000; border-radius: 2px; padding: 0 1px; }
+    .search-highlight.current { background: #ff6b00; color: #fff; outline: 2px solid #ff6b00; }
+    /* File Tree Panel */
+    .file-tree-panel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #252526; display: flex; flex-direction: column; z-index: 100; display: none; }
+    .file-tree-panel.open { display: flex; }
+    .file-tree-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #252526; border-bottom: 1px solid #3c3c3c; }
+    .file-tree-header-title { font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
+    .file-tree-close { margin-left: auto; color: #888; cursor: pointer; font-size: 16px; }
+    .file-tree-close:hover { color: #fff; }
+    .file-tree { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0; }
+    .file-tree-folder-header { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer; user-select: none; }
+    .file-tree-folder-header:hover { background: rgba(255,255,255,0.05); }
+    .file-tree-folder-icon { color: #888; font-size: 14px; transition: transform 0.15s; }
+    .file-tree-folder-icon.expanded { transform: rotate(90deg); }
+    .file-tree-folder-name { font-size: 13px; color: #c5c5c5; }
+    .file-tree-folder-contents { padding-left: 16px; display: none; }
+    .file-tree-folder-contents.expanded { display: block; }
+    .file-tree-file { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 24px; cursor: pointer; }
+    .file-tree-file:hover { background: rgba(255,255,255,0.05); }
+    .file-tree-file:active { background: #094771; }
+    .file-tree-file-icon { color: #888; font-size: 14px; }
+    .file-tree-file-name { font-size: 13px; color: #c5c5c5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .file-tree-empty { padding: 20px; text-align: center; color: #666; font-size: 13px; }
+    .file-tree-loading { padding: 20px; text-align: center; color: #888; display: flex; flex-direction: column; align-items: center; gap: 8px; }
+    /* Syntax Highlighting */
+    .tok-kw { color: #569cd6; }
+    .tok-str { color: #ce9178; }
+    .tok-num { color: #b5cea8; }
+    .tok-cmt { color: #6a9955; }
+    .tok-fn { color: #dcdcaa; }
+    .tok-type { color: #4ec9b0; }
+    /* Syntax Highlighting */
+    .token-keyword { color: #569cd6; font-weight: 500; }
+    .token-string { color: #ce9178; }
+    .token-number { color: #b5cea8; }
+    .token-comment { color: #6a9955; font-style: italic; }
+    .token-function { color: #dcdcaa; }
+    .token-type { color: #4ec9b0; }
+    .token-operator { color: #d4d4d4; }
+    /* Loading & Toast */
+    .loading { display: flex; align-items: center; justify-content: center; height: 100%; color: #888; font-size: 14px; flex-direction: column; gap: 12px; }
+    .loading-spinner { width: 24px; height: 24px; border: 2px solid #3c3c3c; border-top-color: #7138cc; border-radius: 50%; animation: spin 1s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #f44336; color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 13px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 1000; }
+    .toast.visible { opacity: 1; }
+    .toast.success { background: #4caf50; }
+    /* Empty State */
+    .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #888; text-align: center; padding: 20px; }
+    .empty-state .codicon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
+    .empty-state p { font-size: 14px; max-width: 280px; }
+    /* Task List Styling - Match Kiro IDE */
+    [class*="task"], [class*="Task"] {
+      font-family: "Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Ubuntu, "Droid Sans", sans-serif !important;
+    }
+    /* Task section headers (CURRENT TASKS, TASKS IN QUEUE) */
+    [class*="task"] h2, [class*="Task"] h2,
+    [class*="task"] h3, [class*="Task"] h3,
+    [class*="task-header"], [class*="TaskHeader"],
+    [class*="section-title"], [class*="SectionTitle"] {
+      font-size: 13px !important;
+      font-weight: 700 !important;
+      letter-spacing: 0.5px !important;
+      text-transform: uppercase !important;
+      color: #ffffff !important;
+      margin: 0 0 12px 0 !important;
+      padding: 0 !important;
+      line-height: 1.4 !important;
+    }
+    /* Task list containers */
+    [class*="task-list"], [class*="TaskList"],
+    [class*="task-section"], [class*="TaskSection"] {
+      margin-bottom: 24px !important;
+      padding: 0 !important;
+    }
+    /* Empty state messages (No active tasks, No tasks in queue) */
+    [class*="task"] p:empty, [class*="Task"] p:empty,
+    [class*="no-task"], [class*="NoTask"],
+    [class*="empty-task"], [class*="EmptyTask"],
+    [class*="task-empty"], [class*="TaskEmpty"] {
+      font-size: 13px !important;
+      font-style: italic !important;
+      color: #888888 !important;
+      margin: 0 0 16px 0 !important;
+      padding: 0 !important;
+      line-height: 1.6 !important;
+    }
+    /* Catch all paragraphs under task sections that look like empty states */
+    [class*="task"] p, [class*="Task"] p {
+      font-size: 13px !important;
+      line-height: 1.6 !important;
+    }
+    /* Specific targeting for common patterns */
+    div[class*="current"] h2, div[class*="Current"] h2,
+    div[class*="queue"] h2, div[class*="Queue"] h2 {
+      font-size: 13px !important;
+      font-weight: 700 !important;
+      letter-spacing: 0.5px !important;
+      text-transform: uppercase !important;
+      color: #ffffff !important;
+    }
+    /* Horizontal divider between sections */
+    [class*="task-divider"], [class*="TaskDivider"],
+    [class*="task"] hr, [class*="Task"] hr {
+      border: none !important;
+      border-top: 1px solid #3c3c3c !important;
+      margin: 20px 0 !important;
+    }
+    /* Individual task items (when they exist) */
+    [class*="task-item"], [class*="TaskItem"] {
+      padding: 8px 12px !important;
+      margin: 4px 0 !important;
+      background: rgba(255, 255, 255, 0.03) !important;
+      border-radius: 4px !important;
+      border-left: 2px solid #7138cc !important;
+      font-size: 13px !important;
+      color: #cccccc !important;
+      line-height: 1.5 !important;
+    }
+    [class*="task-item"]:hover, [class*="TaskItem"]:hover {
+      background: rgba(255, 255, 255, 0.05) !important;
+    }
+    /* Task item with close button */
+    [class*="task-item"] button, [class*="TaskItem"] button {
+      margin-left: 8px !important;
+      padding: 2px 6px !important;
+      font-size: 11px !important;
+      background: rgba(255, 255, 255, 0.1) !important;
+      border: 1px solid #4a464f !important;
+      border-radius: 3px !important;
+      color: #888 !important;
+      cursor: pointer !important;
+    }
+    [class*="task-item"] button:hover, [class*="TaskItem"] button:hover {
+      background: rgba(255, 255, 255, 0.15) !important;
+      color: #fff !important;
+    }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <!-- Navigation Bar (tabs | title + indicator) -->
+    <nav class="nav-bar">
+      <div class="nav-tabs" id="navTabs">
+        <div class="nav-tab active" data-panel="chat">
+          <span class="codicon codicon-comment-discussion"></span>
+          <span>Chat</span>
+        </div>
+        <div class="nav-tab" data-panel="editor">
+          <span class="codicon codicon-code"></span>
+          <span>Editor</span>
+        </div>
+      </div>
+      <span class="header-title">Kiro Mobile</span>
+      <div class="status">
+        <span class="status-dot" id="statusDot"></span>
+        <span class="status-text" id="statusText">Connecting...</span>
+      </div>
+    </nav>
+    <!-- Panel Container -->
+    <div class="panel-container">
+      <!-- Chat Panel -->
+      <div class="panel active" id="chatPanel">
+        <div class="chat-container" id="chatContainer">
+          <div class="loading" id="chatLoading"><div class="loading-spinner"></div><span>Waiting for Kiro...</span></div>
+          <div class="chat-content" id="chatContent" style="display: none;"></div>
+        </div>
+      </div>
+      <!-- Editor Panel -->
+      <div class="panel" id="editorPanel">
+        <div class="editor-container">
+          <div class="loading" id="editorLoading"><div class="loading-spinner"></div><span>Loading editor...</span></div>
+          <div class="editor-header" id="editorHeader" style="display: none;">
+            <span class="codicon codicon-file-code" style="color: #888;"></span>
+            <span class="editor-filename" id="editorFilename">No file open</span>
+            <span class="editor-search-btn codicon codicon-search" id="editorSearchBtn" title="Find in file"></span>
+            <div class="editor-explorer-btn" id="editorExplorerBtn" title="Open Explorer">
+              <span class="codicon codicon-folder" style="color: #dcb67a;"></span>
+              <span class="editor-explorer-text">EXPLORER</span>
+            </div>
+          </div>
+          <div class="editor-search-bar" id="editorSearchBar">
+            <input type="text" id="editorSearchInput" placeholder="Find in file..." autocomplete="off" />
+            <span class="editor-search-count" id="editorSearchCount"></span>
+            <span class="editor-search-nav codicon codicon-arrow-up" id="editorSearchPrev" title="Previous"></span>
+            <span class="editor-search-nav codicon codicon-arrow-down" id="editorSearchNext" title="Next"></span>
+            <span class="editor-search-close codicon codicon-close" id="editorSearchClose" title="Close"></span>
+          </div>
+          <div class="file-tree-panel" id="fileTreePanel">
+            <div class="file-tree-header">
+              <span class="codicon codicon-folder-opened" style="color: #dcb67a;"></span>
+              <span class="file-tree-header-title">Explorer</span>
+              <span class="file-tree-close codicon codicon-close" id="fileTreeClose"></span>
+            </div>
+            <div class="file-tree" id="fileTree">
+              <div class="file-tree-loading"><div class="loading-spinner"></div>Loading files...</div>
+            </div>
+          </div>
+          <div class="editor-content" id="editorContent" style="display: none;"></div>
+        </div>
+      </div>
+    </div>
+    <div class="toast" id="toast"></div>
+  </div>
+  <script>
+    // State
+    let ws = null, reconnectAttempts = 0, reconnectTimeout = null;
+    let cascades = [], selectedCascadeId = null, currentStyles = null;
+    let isTypingInKiroInput = false;
+    let activePanel = 'chat';
+    let lastSuccessfulSnapshot = null;
+    let navigationPending = false;
+    let workspaceFiles = []; // Cached file list
+    let fileTreeOpen = false;
+    let expandedFolders = new Set(); // Track expanded folders
+    let updateDebounceTimer = null; // Debounce rapid snapshot updates
+    let isRendering = false; // Prevent concurrent renders
+    // DOM Elements
+    const statusDot = document.getElementById('statusDot');
+    const statusText = document.getElementById('statusText');
+    const navTabs = document.getElementById('navTabs');
+    const toast = document.getElementById('toast');
+    const fileTreePanel = document.getElementById('fileTreePanel');
+    const fileTree = document.getElementById('fileTree');
+    const fileTreeClose = document.getElementById('fileTreeClose');
+    // Panel elements
+    const panels = {
+      chat: {
+        panel: document.getElementById('chatPanel'),
+        loading: document.getElementById('chatLoading'),
+        content: document.getElementById('chatContent'),
+        container: document.getElementById('chatContainer')
+      },
+      editor: {
+        panel: document.getElementById('editorPanel'),
+        loading: document.getElementById('editorLoading'),
+        content: document.getElementById('editorContent'),
+        header: document.getElementById('editorHeader'),
+        filename: document.getElementById('editorFilename')
+      }
+    };
+    // Search state
+    let searchMatches = [];
+    let currentMatchIndex = -1;
+    let originalEditorContent = '';
+    // Search DOM elements
+    const editorSearchBtn = document.getElementById('editorSearchBtn');
+    const editorSearchBar = document.getElementById('editorSearchBar');
+    const editorSearchInput = document.getElementById('editorSearchInput');
+    const editorSearchCount = document.getElementById('editorSearchCount');
+    const editorSearchPrev = document.getElementById('editorSearchPrev');
+    const editorSearchNext = document.getElementById('editorSearchNext');
+    const editorSearchClose = document.getElementById('editorSearchClose');
+    // Status management
+    function setStatus(status) {
+      statusDot.className = 'status-dot ' + status;
+      statusText.textContent = status === 'connected' ? 'Connected' : status === 'disconnected' ? 'Disconnected' : 'Connecting...';
+    }
+    function showToast(message, duration = 3000, isSuccess = false) {
+      toast.textContent = message;
+      toast.className = 'toast visible' + (isSuccess ? ' success' : '');
+      setTimeout(() => { toast.classList.remove('visible'); }, duration);
+    }
+    // Navigation
+    navTabs.addEventListener('click', (e) => {
+      const tab = e.target.closest('.nav-tab');
+      if (!tab) return;
+      const panelName = tab.dataset.panel;
+      if (panelName === activePanel) return;
+      // Update tabs
+      navTabs.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
+      tab.classList.add('active');
+      // Update panels
+      Object.keys(panels).forEach(key => {
+        panels[key].panel.classList.toggle('active', key === panelName);
+      });
+      activePanel = panelName;
+      // Fetch content for the new panel
+      if (selectedCascadeId) {
+        fetchPanelContent(panelName, selectedCascadeId);
+      }
+    });
+    // WebSocket connection
+    function connect() {
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      ws = new WebSocket(`${protocol}//${window.location.host}`);
+      ws.onopen = () => {
+        setStatus('connected');
+        reconnectAttempts = 0;
+      };
+      ws.onmessage = (e) => {
+        try {
+          handleMessage(JSON.parse(e.data));
+        } catch (err) {
+          console.error('Failed to parse message:', err);
+        }
+      };
+      ws.onclose = () => {
+        setStatus('disconnected');
+        scheduleReconnect();
+      };
+      ws.onerror = () => {};
+    }
+    function scheduleReconnect() {
+      if (reconnectTimeout) clearTimeout(reconnectTimeout);
+      const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
+      reconnectAttempts++;
+      reconnectTimeout = setTimeout(connect, delay);
+    }
+    function handleMessage(data) {
+      if (data.type === 'cascade_list') {
+        cascades = data.cascades || [];
+        if (!selectedCascadeId && cascades.length > 0) {
+          selectCascade(cascades[0].id);
+        }
+      } else if (data.type === 'snapshot_update' && data.cascadeId === selectedCascadeId) {
+        // Only fetch if user is not typing AND the updated panel is the active one
+        // AND we're not currently rendering (prevent flickering from rapid updates)
+        const panel = data.panel || 'chat';
+        if (!isTypingInKiroInput && panel === activePanel && !isRendering) {
+          // Debounce rapid updates - wait 500ms before fetching
+          if (updateDebounceTimer) clearTimeout(updateDebounceTimer);
+          updateDebounceTimer = setTimeout(() => {
+            fetchPanelContent(panel, data.cascadeId, true); // true = isUpdate (don't scroll)
+          }, 500);
+        }
+      }
+    }
+    function selectCascade(cascadeId) {
+      selectedCascadeId = cascadeId;
+      currentStyles = null;
+      if (cascadeId) {
+        fetchStyles(cascadeId).then(() => {
+          fetchPanelContent(activePanel, cascadeId);
+        });
+      } else {
+        showLoading('chat', 'Waiting for Kiro...');
+      }
+    }
+    async function fetchStyles(cascadeId) {
+      try {
+        const r = await fetch(`/styles/${cascadeId}`);
+        if (r.ok) currentStyles = await r.text();
+      } catch (e) {
+        console.error('Failed to fetch styles:', e);
+      }
+    }
+    function showLoading(panelName, msg = 'Loading...') {
+      const p = panels[panelName];
+      if (p.loading) {
+        p.loading.querySelector('span').textContent = msg;
+        p.loading.style.display = 'flex';
+      }
+      if (p.content) p.content.style.display = 'none';
+      if (p.header) p.header.style.display = 'none';
+    }
+    function hideLoading(panelName) {
+      const p = panels[panelName];
+      if (p.loading) p.loading.style.display = 'none';
+      if (p.content) p.content.style.display = 'block';
+      if (p.header) p.header.style.display = 'flex';
+    }
+    // Fetch panel content
+    async function fetchPanelContent(panelName, cascadeId, isUpdate = false) {
+      switch (panelName) {
+        case 'chat':
+          await fetchChatSnapshot(cascadeId, isUpdate);
+          break;
+        case 'editor':
+          await fetchEditorSnapshot(cascadeId, isUpdate);
+          break;
+      }
+    }
+    // Chat snapshot
+    async function fetchChatSnapshot(cascadeId, isUpdate = false) {
+      try {
+        const r = await fetch(`/snapshot/${cascadeId}`);
+        if (!r.ok) {
+          if (navigationPending) {
+            setTimeout(() => fetchChatSnapshot(cascadeId, isUpdate), 500);
+            return;
+          }
+          if (r.status === 404) showLoading('chat', 'Waiting for snapshot...');
+          return;
+        }
+        const snapshot = await r.json();
+        if (snapshot && snapshot.html && snapshot.html.length > 100) {
+          lastSuccessfulSnapshot = snapshot;
+          navigationPending = false;
+          renderChatSnapshot(snapshot, isUpdate);
+        } else if (lastSuccessfulSnapshot && navigationPending) {
+          setTimeout(() => fetchChatSnapshot(cascadeId, isUpdate), 300);
+        } else {
+          renderChatSnapshot(snapshot);
+        }
+      } catch (e) {
+        if (!navigationPending) showToast('Failed to load chat');
+      }
+    }
+    function renderChatSnapshot(snapshot, isUpdate = false) {
+      // Prevent concurrent renders
+      if (isRendering) return;
+      isRendering = true;
+      // Save scroll position of inner scrollable element before update
+      let innerScrollable = panels.chat.content.querySelector('.overflow-y-auto, [class*="scroll"]');
+      const hadContent = innerScrollable && innerScrollable.scrollHeight > 100;
+      const scrollTop = innerScrollable ? innerScrollable.scrollTop : 0;
+      const scrollHeight = innerScrollable ? innerScrollable.scrollHeight : 0;
+      const clientHeight = innerScrollable ? innerScrollable.clientHeight : 0;
+      const wasAtBottom = !hadContent || (scrollHeight - scrollTop - clientHeight < 100);
+      let html = getBaseStyles();
+      if (currentStyles) html += `<style>${currentStyles}</style>`;
+      html += snapshot.html || '';
+      panels.chat.content.innerHTML = html;
+      // Set background color - use solid dark background instead of transparent
+      if (snapshot.bodyBg) {
+        panels.chat.container.style.background = snapshot.bodyBg;
+      } else {
+        // Fallback to solid dark background matching Kiro IDE
+        panels.chat.container.style.background = '#1e1e1e';
+      }
+      hideLoading('chat');
+      // Find the new inner scrollable element and scroll it
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          // Find all scrollable elements and scroll them
+          const scrollables = panels.chat.content.querySelectorAll('.overflow-y-auto, [class*="scroll"]');
+          scrollables.forEach(el => {
+            if (el.scrollHeight > el.clientHeight + 10) {
+              if (!isUpdate || wasAtBottom) {
+                el.scrollTop = el.scrollHeight;
+              } else if (hadContent) {
+                el.scrollTop = scrollTop;
+              }
+            }
+          });
+          // Also scroll the main container if needed
+          if (!isUpdate || wasAtBottom) {
+            panels.chat.content.scrollTop = panels.chat.content.scrollHeight;
+          }
+          // Release rendering lock
+          isRendering = false;
+        });
+      });
+      makeInteractive();
+    }
+    // Editor snapshot
+    async function fetchEditorSnapshot(cascadeId, isUpdate = false) {
+      try {
+        const r = await fetch(`/editor/${cascadeId}`);
+        if (!r.ok) {
+          showEmptyState('editor', 'codicon-file-code', 'No file is currently open. Open a file in Kiro to view it here.');
+          return;
+        }
+        const data = await r.json();
+        renderEditorSnapshot(data, isUpdate);
+      } catch (e) {
+        showEmptyState('editor', 'codicon-file-code', 'Failed to load editor');
+      }
+    }
+    function renderEditorSnapshot(data, isUpdate = false) {
+      const scrollTop = panels.editor.content.scrollTop;
+      // Update header
+      panels.editor.filename.textContent = data.fileName || 'Untitled';
+      // Show header
+      panels.editor.header.style.display = 'flex';
+      // Store original content for search
+      originalEditorContent = data.content || '';
+      // Reset search when new file loaded
+      closeEditorSearch();
+      // Prefer text content over raw HTML for better mobile display
+      if (data.content && data.content.trim().length > 0) {
+        const lines = data.content.split('\n');
+        let html = '';
+        // Add note if partial content
+        if (data.isPartial || data.note) {
+          html += `<div style="padding: 8px 12px; background: #2d2d30; color: #888; font-size: 11px; border-bottom: 1px solid #3c3c3c;">
+            <span class="codicon codicon-info" style="margin-right: 6px;"></span>
+            ${data.note || 'Showing visible lines only. Scroll in Kiro to see more.'}
+          </div>`;
+        }
+        html += '<pre class="editor-code">';
+        // Use startLine from server if available, otherwise start from 1
+        const startLineNum = data.startLine || 1;
+        // Filter out empty lines at the start if there are too many
+        let startIdx = 0;
+        while (startIdx < lines.length && lines[startIdx].trim() === '' && startIdx < 3) {
+          startIdx++;
+        }
+        const displayLines = lines.slice(startIdx);
+        displayLines.forEach((line, idx) => {
+          const lineNum = startLineNum + startIdx + idx;
+          const highlighted = highlightSyntax(line, data.language);
+          // Preserve whitespace - convert tabs and spaces
+          let preservedLine = highlighted
+            .replace(/\t/g, '    ')
+            .replace(/^ +/, match => '&nbsp;'.repeat(match.length));
+          html += `<div class="editor-line"><span class="editor-line-num">${lineNum}</span><span class="editor-line-code">${preservedLine || '&nbsp;'}</span></div>`;
+        });
+        html += '</pre>';
+        // Add line count info
+        const endLine = startLineNum + startIdx + displayLines.length - 1;
+        html += `<div style="padding: 6px 12px; background: #252526; color: #666; font-size: 11px; border-top: 1px solid #3c3c3c;">
+          Lines ${startLineNum}-${endLine}${data.lineCount ? ` of ${data.lineCount}` : ''}
+        </div>`;
+        panels.editor.content.innerHTML = html;
+        panels.editor.content.style.display = 'block';
+        console.log('[Editor] Rendered', displayLines.length, 'lines of code starting from line', startLineNum);
+      } else if (data.html && data.html.length > 100) {
+        // Fallback to raw HTML if no text content
+        let html = getBaseStyles();
+        if (currentStyles) html += `<style>${currentStyles}</style>`;
+        html += data.html;
+        panels.editor.content.innerHTML = html;
+        panels.editor.content.style.display = 'block';
+        console.log('[Editor] Rendered raw HTML');
+      } else {
+        showEmptyState('editor', 'codicon-file-code', 'No editor content available. Open a file in Kiro to view it here.');
+        return;
+      }
+      hideLoading('editor');
+      // Preserve scroll on updates
+      if (isUpdate) {
+        panels.editor.content.scrollTop = scrollTop;
+      }
+    }
+    // Syntax highlighting (basic)
+    function highlightSyntax(line, language) {
+      let escaped = escapeHtml(line);
+      // Skip syntax highlighting for CSS (too complex with # colors)
+      if (language === 'css' || language === 'html') {
+        return escaped;
+      }
+      // Comments - be careful not to match CSS color codes
+      // Only match // comments and # comments that start at beginning or after whitespace
+      escaped = escaped.replace(/(\/\/.*$)/gm, '<span class="token-comment">$1</span>');
+      escaped = escaped.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="token-comment">$1</span>');
+      // Python/shell comments - only if # is at start of line or after whitespace, not in middle of word
+      if (language === 'python' || language === 'bash' || language === 'sh') {
+        escaped = escaped.replace(/(^|\s)(#.*)$/gm, '$1<span class="token-comment">$2</span>');
+      }
+      // Strings - match quoted strings
+      escaped = escaped.replace(/(&quot;[^&]*?&quot;)/g, '<span class="token-string">$1</span>');
+      escaped = escaped.replace(/(&#39;[^&]*?&#39;)/g, '<span class="token-string">$1</span>');
+      // Keywords
+      const keywords = ['const', 'let', 'var', 'function', 'class', 'return', 'if', 'else', 'for', 'while', 'import', 'export', 'from', 'async', 'await', 'try', 'catch', 'throw', 'new', 'this', 'super', 'extends', 'implements', 'interface', 'type', 'enum', 'public', 'private', 'protected', 'static', 'readonly', 'def', 'self', 'None', 'True', 'False'];
+      keywords.forEach(kw => {
+        const regex = new RegExp(`\\b(${kw})\\b`, 'g');
+        escaped = escaped.replace(regex, '<span class="token-keyword">$1</span>');
+      });
+      // Numbers - but not inside other tokens
+      escaped = escaped.replace(/\b(\d+\.?\d*)\b/g, '<span class="token-number">$1</span>');
+      return escaped;
+    }
+    // Helper functions
+    function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+    function showEmptyState(panelName, icon, message) {
+      const p = panels[panelName];
+      p.content.innerHTML = `
+        <div class="empty-state">
+          <span class="codicon ${icon}"></span>
+          <p>${message}</p>
+        </div>
+      `;
+      hideLoading(panelName);
+    }
+    function toggleSection(header) {
+      header.classList.toggle('collapsed');
+      const content = header.nextElementSibling;
+      if (content) content.classList.toggle('collapsed');
+    }
+    // Base styles for chat panel
+    function getBaseStyles() {
+      return `<style>
+        :root, body, #root, .app {
+          font-family: "Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Ubuntu, "Droid Sans", sans-serif !important;
+          font-size: 13px;
+          --vscode-editor-background: #211d25;
+          --vscode-editor-foreground: #ffffff;
+          --vscode-foreground: #ffffff;
+          --vscode-background: #19161d;
+          --color-text-primary: #ffffff;
+          --color-text-secondary: rgba(255, 255, 255, 0.8);
+          --color-text-tertiary: rgba(255, 255, 255, 0.6);
+          --color-border-primary: #4a464f;
+          --vscode-toggleSwitch-onForeground: #ffffff;
+          --vscode-toggleSwitch-onBackground: #8141e6;
+          --vscode-toggleSwitch-offForeground: #ffffff;
+          --vscode-toggleSwitch-offBackground: #28242e;
+          --vscode-chatTab-foreground: #c1bec6;
+          --vscode-chatTab-background: transparent;
+          --vscode-button-tertiaryForeground: #c1bec6;
+          --vscode-button-tertiaryBackground: transparent;
+          --vscode-button-tertiaryHoverBackground: rgba(255, 255, 255, 0.1);
+          --vscode-button-submitBackground: #7138cc;
+          --vscode-button-submitHoverBackground: #8e47ff;
+          --vscode-input-border: #4a464f;
+          --vscode-chatMessage-background: rgba(255, 255, 255, 0.1);
+          --vscode-agentInProgressIcon-foreground: #7138cc;
+          --vscode-agentAcceptedIcon-foreground: rgba(128, 255, 181, 0.75);
+        }
+        /* Force solid background for all content */
+        body, #root, .app, [class*="chat"], [class*="Chat"], [class*="cascade"], [class*="Cascade"] {
+          background: #1e1e1e !important;
+          background-color: #1e1e1e !important;
+        }
+        /* CRITICAL: Hide tooltips, popovers, and overlay elements - but NOT dropdown buttons */
+        [role="tooltip"],
+        [data-tooltip],
+        [class*="tooltip"]:not(button):not([role="button"]),
+        [class*="Tooltip"]:not(button):not([role="button"]),
+        [class*="popover"]:not(button):not([role="button"]),
+        [class*="Popover"]:not(button):not([role="button"]),
+        [class*="overlay"]:not(button):not([role="button"]):not([class*="dropdown"]),
+        [class*="Overlay"]:not(button):not([role="button"]):not([class*="dropdown"]),
+        [class*="modal"],
+        [class*="Modal"] {
+          display: none !important;
+          visibility: hidden !important;
+          opacity: 0 !important;
+          pointer-events: none !important;
+        }
+        /* ========== MODEL SELECTOR DROPDOWN ========== */
+        /* Dropdown menu panel - needs solid background and proper z-index */
+        [class*="dropdown-menu"], [class*="dropdownMenu"], [class*="DropdownMenu"],
+        [class*="dropdown-content"], [class*="dropdownContent"], [class*="DropdownContent"],
+        [class*="model-list"], [class*="modelList"], [class*="ModelList"],
+        [role="listbox"], [role="menu"] {
+          display: block !important;
+          visibility: visible !important;
+          opacity: 1 !important;
+          pointer-events: auto !important;
+          background: #2d2d30 !important;
+          background-color: #2d2d30 !important;
+          border: 1px solid #4a464f !important;
+          border-radius: 6px !important;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+          z-index: 9999 !important;
+          position: absolute !important;
+        }
+        /* Dropdown menu items */
+        [class*="dropdown-item"], [class*="dropdownItem"], [class*="DropdownItem"],
+        [class*="model-option"], [class*="modelOption"], [class*="ModelOption"],
+        [role="option"], [role="menuitem"] {
+          display: flex !important;
+          visibility: visible !important;
+          opacity: 1 !important;
+          pointer-events: auto !important;
+          padding: 8px 12px !important;
+          cursor: pointer !important;
+          background: transparent !important;
+          color: #cccccc !important;
+        }
+        [class*="dropdown-item"]:hover, [class*="dropdownItem"]:hover,
+        [role="option"]:hover, [role="menuitem"]:hover {
+          background: rgba(255, 255, 255, 0.1) !important;
+        }
+        /* Model selector button - NO border, match Kiro style */
+        [class*="model-selector"], [class*="modelSelector"], [class*="ModelSelector"],
+        [class*="model-dropdown"], [class*="modelDropdown"], [class*="ModelDropdown"],
+        button[class*="dropdown"], [role="button"][class*="dropdown"],
+        [class*="select-model"], [class*="selectModel"] {
+          display: inline-flex !important;
+          visibility: visible !important;
+          opacity: 1 !important;
+          pointer-events: auto !important;
+          align-items: center !important;
+          gap: 4px !important;
+          padding: 4px 8px !important;
+          background: transparent !important;
+          border: none !important;
+          border-radius: 4px !important;
+          color: var(--vscode-foreground, #c1bec6) !important;
+          font-size: 12px !important;
+          cursor: pointer !important;
+        }
+        [class*="model-selector"]:hover, [class*="modelSelector"]:hover,
+        button[class*="dropdown"]:hover {
+          background: rgba(255, 255, 255, 0.1) !important;
+        }
+        /* Model selector chevron/arrow icon */
+        [class*="model-selector"] svg, [class*="modelSelector"] svg,
+        [class*="model-dropdown"] svg, button[class*="dropdown"] svg {
+          width: 12px !important;
+          height: 12px !important;
+          flex-shrink: 0 !important;
+        }
+        /* Model name text inside selector */
+        [class*="model-selector"] span, [class*="modelSelector"] span,
+        [class*="model-name"], [class*="modelName"] {
+          overflow: hidden !important;
+          text-overflow: ellipsis !important;
+          white-space: nowrap !important;
+        }
+        /* Reset positioning for captured content to prevent layout issues */
+        #root, .app, [class*="cascade"], [class*="Cascade"] {
+          position: relative !important;
+        }
+        /* Ensure proper stacking and no fixed positioning breaks layout */
+        [style*="position: fixed"],
+        [style*="position:fixed"] {
+          position: absolute !important;
+        }
+        * { font-family: inherit; }
+        code, pre, .monaco-editor { font-family: Menlo, Monaco, "Courier New", monospace !important; }
+        /* Icon sizes - keep them small like in IDE */
+        svg[viewBox="0 0 24 24"] { width: 16px !important; height: 16px !important; }
+        svg[viewBox="0 0 16 16"] { width: 14px !important; height: 14px !important; }
+        svg { color: inherit; max-width: 20px !important; max-height: 20px !important; }
+        svg path, svg rect { fill: currentColor; }
+        svg[fill="none"] path { fill: none; }
+        /* Preserve stroke-based SVG circles (like context window progress ring) */
+        svg circle[stroke] { fill: none !important; }
+        svg circle:not([stroke]) { fill: currentColor; }
+        /* Context window progress circle styling */
+        svg[class*="context"], svg[class*="progress"], [class*="context"] svg {
+          overflow: visible !important;
+        }
+        svg circle[stroke-dasharray] {
+          fill: none !important;
+          stroke-linecap: round !important;
+        }
+        /* Context window indicator - circular progress ring */
+        [class*="context-window"], [class*="contextWindow"], [class*="ContextWindow"],
+        [class*="context-indicator"], [class*="contextIndicator"], [class*="ContextIndicator"],
+        [class*="token-usage"], [class*="tokenUsage"], [class*="TokenUsage"] {
+          display: inline-flex !important;
+          visibility: visible !important;
+          opacity: 1 !important;
+          align-items: center !important;
+          justify-content: center !important;
+          width: 20px !important;
+          height: 20px !important;
+          position: relative !important;
+          flex-shrink: 0 !important;
+        }
+        /* Create gray background circle using box-shadow on the container */
+        [class*="context-window"]::before, [class*="contextWindow"]::before, [class*="ContextWindow"]::before,
+        [class*="context-indicator"]::before, [class*="contextIndicator"]::before {
+          content: '' !important;
+          position: absolute !important;
+          top: 2px !important;
+          left: 2px !important;
+          width: 16px !important;
+          height: 16px !important;
+          border-radius: 50% !important;
+          border: 2px solid #4a464f !important;
+          box-sizing: border-box !important;
+          z-index: 0 !important;
+        }
+        [class*="context-window"] svg, [class*="contextWindow"] svg, [class*="ContextWindow"] svg,
+        [class*="context-indicator"] svg, [class*="contextIndicator"] svg {
+          width: 16px !important;
+          height: 16px !important;
+          transform: rotate(-90deg) !important;
+          position: relative !important;
+          z-index: 1 !important;
+        }
+        [class*="context-window"] svg circle, [class*="contextWindow"] svg circle, [class*="ContextWindow"] svg circle,
+        [class*="context-indicator"] svg circle, [class*="contextIndicator"] svg circle {
+          fill: none !important;
+          stroke-width: 2 !important;
+          stroke-linecap: round !important;
+          stroke: #4ade80 !important;
+        }
+        /* Ensure circles are visible */
+        [class*="context"] svg circle,
+        [class*="Context"] svg circle {
+          display: block !important;
+          visibility: visible !important;
+        }
+        /* ========== CHAT INPUT TOOLBAR AREA ========== */
+        /* The toolbar/footer area containing model selector, context, autopilot, input */
+        [class*="chat-input"], [class*="chatInput"], [class*="ChatInput"],
+        [class*="input-area"], [class*="inputArea"], [class*="InputArea"],
+        [class*="message-input"], [class*="messageInput"], [class*="MessageInput"],
+        [class*="composer"], [class*="Composer"] {
+          display: flex !important;
+          visibility: visible !important;
+          flex-direction: column !important;
+          gap: 8px !important;
+          padding: 8px 12px !important;
+          background: var(--vscode-editor-background, #1e1e1e) !important;
+          border-top: 1px solid var(--color-border-primary, #4a464f) !important;
+        }
+        /* Input toolbar row (contains # button, model selector, context, autopilot) */
+        [class*="input-toolbar"], [class*="inputToolbar"], [class*="InputToolbar"],
+        [class*="chat-toolbar"], [class*="chatToolbar"], [class*="ChatToolbar"],
+        [class*="composer-toolbar"], [class*="composerToolbar"] {
+          display: flex !important;
+          visibility: visible !important;
+          align-items: center !important;
+          gap: 8px !important;
+          flex-wrap: wrap !important;
+        }
+        /* Context button (# symbol) - NO border, match Kiro style */
+        [class*="context-button"], [class*="contextButton"], [class*="ContextButton"],
+        button[aria-label*="context"], button[aria-label*="Context"],
+        [class*="hash-button"], [class*="hashButton"] {
+          display: inline-flex !important;
+          visibility: visible !important;
+          align-items: center !important;
+          justify-content: center !important;
+          width: 28px !important;
+          height: 28px !important;
+          padding: 4px !important;
+          background: transparent !important;
+          border: none !important;
+          border-radius: 4px !important;
+          color: var(--vscode-foreground, #c1bec6) !important;
+          font-size: 16px !important;
+          font-weight: 600 !important;
+          cursor: pointer !important;
+        }
+        [class*="context-button"]:hover, [class*="contextButton"]:hover,
+        button[aria-label*="context"]:hover {
+          background: rgba(255, 255, 255, 0.1) !important;
+        }
+        /* ========== MESSAGE TEXT FLOW - INLINE ELEMENTS ========== */
+        /* Fix text flow so file links and code stay inline with text */
+        [class*="message"] p,
+        [class*="Message"] p,
+        [class*="chat"] p,
+        [class*="Chat"] p {
+          display: block !important;
+        }
+        /* Make file links, code, and inline elements stay inline */
+        [class*="message"] a,
+        [class*="Message"] a,
+        [class*="message"] code,
+        [class*="Message"] code,
+        [class*="message"] span,
+        [class*="Message"] span,
+        [class*="chat"] a,
+        [class*="Chat"] a,
+        [class*="chat"] code,
+        [class*="Chat"] code,
+        [class*="file-link"],
+        [class*="FileLink"],
+        [class*="inline"],
+        code:not(pre code) {
+          display: inline !important;
+          vertical-align: baseline !important;
+        }
+        /* Inline code styling */
+        code:not(pre code) {
+          background: rgba(255, 255, 255, 0.1) !important;
+          padding: 2px 6px !important;
+          border-radius: 3px !important;
+          font-family: Menlo, Monaco, "Courier New", monospace !important;
+          font-size: 12px !important;
+        }
+        /* File badges/chips should be inline */
+        [class*="file-badge"],
+        [class*="FileBadge"],
+        [class*="file-chip"],
+        [class*="FileChip"],
+        [class*="deleted"],
+        [class*="Deleted"],
+        [class*="created"],
+        [class*="Created"],
+        [class*="modified"],
+        [class*="Modified"] {
+          display: inline-flex !important;
+          align-items: center !important;
+          gap: 4px !important;
+          padding: 2px 8px !important;
+          border-radius: 4px !important;
+          background: rgba(255, 255, 255, 0.08) !important;
+          margin: 2px 4px !important;
+          font-size: 12px !important;
+          vertical-align: middle !important;
+        }
+        /* Bullet lists should have proper inline content */
+        ul li, ol li {
+          display: list-item !important;
+        }
+        ul li > *, ol li > * {
+          display: inline !important;
+        }
+        ul li > p, ol li > p {
+          display: inline !important;
+          margin: 0 !important;
+        }
+        [role="switch"], [class*="toggle"] {
+          overflow: visible !important;
+          min-width: 36px !important;
+          flex-shrink: 0 !important;
+        }
+        /* ========== TASK LIST STYLING - EXACT KIRO IDE MATCH ========== */
+        /* Force solid background for task containers */
+        [class*="task"], [class*="Task"],
+        div:has(> h1:contains("CURRENT TASKS")),
+        div:has(> h2:contains("CURRENT TASKS")),
+        div:has(> h3:contains("CURRENT TASKS")),
+        div:has(> h1:contains("TASKS IN QUEUE")),
+        div:has(> h2:contains("TASKS IN QUEUE")),
+        div:has(> h3:contains("TASKS IN QUEUE")) {
+          font-family: "Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Ubuntu, "Droid Sans", sans-serif !important;
+          background: #1e1e1e !important;
+          background-color: #1e1e1e !important;
+        }
+        /* Task section headers - BOLD WHITE UPPERCASE */
+        h1:contains("CURRENT TASKS"),
+        h2:contains("CURRENT TASKS"),
+        h3:contains("CURRENT TASKS"),
+        h1:contains("TASKS IN QUEUE"),
+        h2:contains("TASKS IN QUEUE"),
+        h3:contains("TASKS IN QUEUE"),
+        [class*="task"] h1, [class*="Task"] h1,
+        [class*="task"] h2, [class*="Task"] h2,
+        [class*="task"] h3, [class*="Task"] h3,
+        [class*="task-header"], [class*="TaskHeader"],
+        [class*="section-title"], [class*="SectionTitle"],
+        div[class*="current"] h1, div[class*="Current"] h1,
+        div[class*="current"] h2, div[class*="Current"] h2,
+        div[class*="current"] h3, div[class*="Current"] h3,
+        div[class*="queue"] h1, div[class*="Queue"] h1,
+        div[class*="queue"] h2, div[class*="Queue"] h2,
+        div[class*="queue"] h3, div[class*="Queue"] h3 {
+          font-size: 13px !important;
+          font-weight: 700 !important;
+          letter-spacing: 0.5px !important;
+          text-transform: uppercase !important;
+          color: #ffffff !important;
+          margin: 0 0 12px 0 !important;
+          padding: 0 !important;
+          line-height: 1.4 !important;
+          background: transparent !important;
+        }
+        /* Empty state messages - ITALIC GRAY */
+        p:contains("No active tasks"),
+        p:contains("No tasks in queue"),
+        [class*="task"] p:not([class*="task-item"]),
+        [class*="Task"] p:not([class*="TaskItem"]),
+        [class*="no-task"], [class*="NoTask"],
+        [class*="empty-task"], [class*="EmptyTask"],
+        [class*="task-empty"], [class*="TaskEmpty"] {
+          font-size: 13px !important;
+          font-style: italic !important;
+          color: #888888 !important;
+          margin: 0 0 16px 0 !important;
+          padding: 0 !important;
+          line-height: 1.6 !important;
+          background: transparent !important;
+        }
+        /* Task list containers */
+        [class*="task-list"], [class*="TaskList"],
+        [class*="task-section"], [class*="TaskSection"] {
+          margin-bottom: 24px !important;
+          padding: 0 !important;
+          background: #1e1e1e !important;
+        }
+        /* Horizontal divider between sections */
+        [class*="task-divider"], [class*="TaskDivider"],
+        [class*="task"] hr, [class*="Task"] hr {
+          border: none !important;
+          border-top: 1px solid #3c3c3c !important;
+          margin: 20px 0 !important;
+          background: transparent !important;
+        }
+        /* Individual task items (when they exist) */
+        [class*="task-item"], [class*="TaskItem"] {
+          padding: 8px 12px !important;
+          margin: 4px 0 !important;
+          background: rgba(255, 255, 255, 0.03) !important;
+          border-radius: 4px !important;
+          border-left: 2px solid #7138cc !important;
+          font-size: 13px !important;
+          color: #cccccc !important;
+          line-height: 1.5 !important;
+        }
+        [class*="task-item"]:hover, [class*="TaskItem"]:hover {
+          background: rgba(255, 255, 255, 0.05) !important;
+        }
+        /* Task item with close button */
+        [class*="task-item"] button, [class*="TaskItem"] button {
+          margin-left: 8px !important;
+          padding: 2px 6px !important;
+          font-size: 11px !important;
+          background: rgba(255, 255, 255, 0.1) !important;
+          border: 1px solid #4a464f !important;
+          border-radius: 3px !important;
+          color: #888 !important;
+          cursor: pointer !important;
+        }
+        [class*="task-item"] button:hover, [class*="TaskItem"] button:hover {
+          background: rgba(255, 255, 255, 0.15) !important;
+          color: #fff !important;
+        }
+        .kiro-toggle-switch {
+          display: flex !important;
+          align-items: center !important;
+          gap: 4px !important;
+          padding: 4px !important;
+          border-radius: 6px !important;
+          border: none !important;
+        }
+        .kiro-toggle-switch > input[type="checkbox"] {
+          appearance: none !important;
+          width: 36px !important;
+          height: 18px !important;
+          border-radius: 9px !important;
+          background-color: var(--vscode-toggleSwitch-offBackground) !important;
+          border: 1px solid var(--vscode-input-border) !important;
+          cursor: pointer !important;
+          position: relative !important;
+        }
+        .kiro-toggle-switch > input[type="checkbox"]::after {
+          content: "" !important;
+          position: absolute !important;
+          top: 50% !important;
+          left: 2px !important;
+          transform: translateY(-50%) !important;
+          width: 14px !important;
+          height: 14px !important;
+          border-radius: 50% !important;
+          background-color: #fff !important;
+          transition: left 0.2s !important;
+        }
+        .kiro-toggle-switch > input[type="checkbox"]:checked {
+          background-color: var(--vscode-toggleSwitch-onBackground) !important;
+        }
+        .kiro-toggle-switch > input[type="checkbox"]:checked::after {
+          left: 18px !important;
+        }
+      </style>`;
+    }
+    // Make chat elements interactive
+    function makeInteractive() {
+      const content = panels.chat.content;
+      // Input fields
+      const inputSelectors = ['[data-lexical-editor="true"]', '[contenteditable="true"][role="textbox"]', '[contenteditable="true"]', 'textarea', '.ProseMirror'];
+      for (const selector of inputSelectors) {
+        content.querySelectorAll(selector).forEach(el => {
+          el.style.cursor = 'text';
+          el.addEventListener('focus', () => { isTypingInKiroInput = true; });
+          el.addEventListener('blur', () => { setTimeout(() => { isTypingInKiroInput = false; }, 500); });
+          el.addEventListener('keydown', async (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              const text = el.textContent || el.value || '';
+              if (text.trim()) {
+                await sendToKiro(text.trim());
+                el.textContent = '';
+                el.innerHTML = '';
+                isTypingInKiroInput = false;
+              }
+            }
+          });
+        });
+      }
+      // Toggle switches
+      content.querySelectorAll('.kiro-toggle-switch, [role="switch"], input[type="checkbox"][role="switch"]').forEach(toggle => {
+        const input = toggle.tagName === 'INPUT' ? toggle : toggle.querySelector('input[type="checkbox"]');
+        const wrapper = toggle.closest('.kiro-toggle-switch') || toggle;
+        wrapper.style.cursor = 'pointer';
+        wrapper.onclick = async (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          const label = wrapper.querySelector('label');
+          const clickInfo = {
+            tag: 'div',
+            text: label ? label.textContent.trim() : 'toggle',
+            role: 'switch',
+            isToggle: true,
+            toggleId: input ? input.id : '',
+            checked: input ? input.checked : false
+          };
+          await sendClickToKiro(clickInfo);
+          return false;
+        };
+      });
+      // Tabs
+      content.querySelectorAll('[role="tab"]').forEach(tab => {
+        const closeBtn = tab.querySelector('[aria-label="close"], [class*="close"]');
+        if (closeBtn) {
+          closeBtn.style.cursor = 'pointer';
+          closeBtn.onclick = async (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            await sendClickToKiro({ tag: 'button', text: 'close', ariaLabel: 'close', role: 'button', isCloseButton: true });
+            return false;
+          };
+        }
+        tab.style.cursor = 'pointer';
+        tab.onclick = async (e) => {
+          if (e.target.closest('[aria-label="close"], [class*="close"], button')) return;
+          e.preventDefault();
+          e.stopPropagation();
+          const labelEl = tab.querySelector('.kiro-tabs-item-label, [class*="label"]');
+          const labelText = labelEl ? labelEl.textContent.trim() : tab.textContent.trim();
+          await sendClickToKiro({ tag: 'div', text: labelText, role: 'tab', isTab: true, tabLabel: labelText });
+          return false;
+        };
+      });
+      // File links - detect file paths in chat and make them clickable to open in Editor
+      const fileExtensions = /\.(ts|tsx|js|jsx|py|java|html|css|json|md|yaml|yml|xml|sql|go|rs|c|cpp|h|cs|rb|php|sh|vue|svelte|astro|cob|cbl)$/i;
+      const filePathPattern = /^[a-zA-Z0-9_\-./\\]+\.[a-zA-Z0-9]+$/;
+      // Look for elements that might contain file paths
+      content.querySelectorAll('a, code, span, [class*="file"], [class*="path"], [data-path]').forEach(el => {
+        if (el.onclick) return;
+        const text = (el.textContent || '').trim();
+        const dataPath = el.getAttribute('data-path') || '';
+        const href = el.getAttribute('href') || '';
+        // Check if this looks like a file path
+        const isFilePath = (
+          fileExtensions.test(text) ||
+          fileExtensions.test(dataPath) ||
+          fileExtensions.test(href) ||
+          (filePathPattern.test(text) && text.includes('/'))
+        );
+        if (isFilePath) {
+          const filePath = dataPath || text || href;
+          el.style.cursor = 'pointer';
+          el.style.textDecoration = 'underline';
+          el.style.color = '#7eb6ff';
+          el.title = `Open ${filePath} in Editor`;
+          el.onclick = async (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            await openFileInEditor(filePath);
+            return false;
+          };
+        }
+      });
+      // Buttons and clickable elements
+      const clickableSelectors = ['button', '[role="button"]', '[role="menuitem"]', '[role="option"]', '[role="checkbox"]', 'a[href]', '[tabindex="0"]'];
+      const allClickables = new Set();
+      clickableSelectors.forEach(sel => {
+        try { content.querySelectorAll(sel).forEach(el => allClickables.add(el)); } catch(e) {}
+      });
+      // Also add dropdown menu items
+      content.querySelectorAll('[class*="dropdown-item"], [class*="dropdownItem"], [class*="model-option"], [class*="modelOption"]').forEach(el => {
+        allClickables.add(el);
+      });
+      // ADDED: Support for History panel items and other cursor-pointer elements
+      // History items are divs with cursor-pointer class containing session info
+      content.querySelectorAll('[class*="cursor-pointer"], [class*="hover\\:"], [class*="group"]').forEach(el => {
+        // Check if this looks like a history/session item (contains date pattern)
+        const text = el.textContent || '';
+        const hasDate = /\d{1,2}\/\d{1,2}\/\d{4}/.test(text);
+        const hasTime = /\d{1,2}:\d{2}/.test(text);
+        if (hasDate || hasTime || el.classList.contains('cursor-pointer')) {
+          allClickables.add(el);
+        }
+      });
+      // Also look for any div that has inline cursor:pointer style
+      content.querySelectorAll('div, span').forEach(el => {
+        const style = el.getAttribute('style') || '';
+        if (style.includes('cursor') && style.includes('pointer')) {
+          allClickables.add(el);
+        }
+      });
+      allClickables.forEach(el => {
+        if (el.matches && el.matches('[contenteditable], textarea, input:not([type="checkbox"])')) return;
+        if (el.closest('[role="tab"]')) return;
+        if (el.closest('.kiro-toggle-switch')) return;
+        if (el.onclick) return;
+        el.style.cursor = 'pointer';
+        el.onclick = async (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          const clickInfo = getElementClickInfo(el);
+          // Check if this is a model selection item
+          if (el.matches('[role="option"], [role="menuitem"], [class*="model"], [class*="Model"]') ||
+              el.closest('[role="listbox"], [role="menu"], [class*="dropdown-menu"], [class*="dropdownMenu"]')) {
+            clickInfo.isModelSelection = true;
+            clickInfo.modelName = el.textContent?.trim().split('\n')[0] || '';
+          }
+          await sendClickToKiro(clickInfo);
+          return false;
+        };
+      });
+    }
+    function getElementClickInfo(el) {
+      const info = {
+        tag: el.tagName?.toLowerCase() || '',
+        text: (el.textContent || '').trim().substring(0, 100),
+        ariaLabel: el.getAttribute('aria-label') || '',
+        title: el.getAttribute('title') || '',
+        role: el.getAttribute('role') || '',
+        className: el.className || '',
+        isTab: el.getAttribute('role') === 'tab',
+        dataTestId: el.getAttribute('data-testid') || ''
+      };
+      if (!info.ariaLabel) {
+        const parent = el.closest('[aria-label]');
+        if (parent) info.ariaLabel = parent.getAttribute('aria-label') || '';
+      }
+      return info;
+    }
+    async function sendToKiro(message) {
+      if (!message || !selectedCascadeId) return;
+      try {
+        const r = await fetch(`/send/${selectedCascadeId}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ message })
+        });
+        const result = await r.json();
+        if (result.success) showToast('Sent!', 1500, true);
+        else showToast(result.error || 'Failed to send');
+      } catch (e) {
+        showToast('Failed to send');
+      }
+    }
+    async function sendClickToKiro(clickInfo) {
+      if (!selectedCascadeId) return;
+      const isNavigation =
+        clickInfo.ariaLabel?.toLowerCase().includes('back') ||
+        clickInfo.ariaLabel?.toLowerCase().includes('close') ||
+        clickInfo.text?.toLowerCase().includes('back') ||
+        clickInfo.role === 'tab';
+      const isModelSelection = clickInfo.isModelSelection ||
+        clickInfo.role === 'option' ||
+        clickInfo.role === 'menuitem' ||
+        clickInfo.className?.includes('model');
+      if (isNavigation) navigationPending = true;
+      try {
+        await fetch(`/click/${selectedCascadeId}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(clickInfo)
+        });
+        if (isNavigation || isModelSelection) {
+          // Refresh snapshot after navigation or model selection
+          setTimeout(() => fetchChatSnapshot(selectedCascadeId), 300);
+        }
+      } catch (e) {
+        navigationPending = false;
+      }
+    }
+    // Open file in Editor tab
+    async function openFileInEditor(filePath) {
+      if (!selectedCascadeId || !filePath) return;
+      showToast(`Opening ${filePath}...`, 1500);
+      // Switch to Editor tab immediately
+      const editorTab = document.querySelector('[data-panel="editor"]');
+      if (editorTab) {
+        navTabs.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
+        editorTab.classList.add('active');
+        Object.values(panels).forEach(p => {
+          if (p.panel) p.panel.classList.remove('active');
+        });
+        panels.editor.panel.classList.add('active');
+        activePanel = 'editor';
+        // Show loading state
+        showLoading('editor', 'Loading file...');
+      }
+      try {
+        // First, try to read the file directly from filesystem (bypasses Monaco limitation)
+        const readResult = await fetch(`/readFile/${selectedCascadeId}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filePath })
+        });
+        if (readResult.ok) {
+          const data = await readResult.json();
+          if (data.content) {
+            renderEditorSnapshot(data);
+            showToast(`Opened ${data.fileName || filePath}`, 1500, true);
+            console.log('[Editor] Loaded file directly:', data.fileName, data.lineCount, 'lines');
+            return;
+          }
+        } else {
+          const errorData = await readResult.json().catch(() => ({}));
+          console.log('[Editor] Direct file read failed:', errorData.error || readResult.status);
+        }
+        // Fallback: Try to click on the file link in Kiro to open it in Monaco
+        console.log('[Editor] Falling back to Monaco capture...');
+        const clickResult = await fetch(`/click/${selectedCascadeId}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            tag: 'a',
+            text: filePath,
+            isFileLink: true,
+            filePath: filePath
+          })
+        });
+        const result = await clickResult.json();
+        console.log('Click result:', result);
+        // Wait for the file to open in Kiro
+        await new Promise(resolve => setTimeout(resolve, 800));
+        // Fetch the editor content from Monaco
+        const fetchEditor = async () => {
+          try {
+            const r = await fetch(`/editor/${selectedCascadeId}`);
+            if (r.ok) {
+              const data = await r.json();
+              if (data.content || data.html) {
+                renderEditorSnapshot(data);
+                showToast(`Opened ${data.fileName || filePath}`, 1500, true);
+                return true;
+              }
+            }
+          } catch (e) {}
+          return false;
+        };
+        // Try fetching a few times with delays
+        if (!await fetchEditor()) {
+          await new Promise(resolve => setTimeout(resolve, 500));
+          if (!await fetchEditor()) {
+            await new Promise(resolve => setTimeout(resolve, 500));
+            if (!await fetchEditor()) {
+              showEmptyState('editor', 'codicon-file-code', `Could not load ${filePath}. File may not exist or path is incorrect.`);
+            }
+          }
+        }
+      } catch (e) {
+        showToast('Failed to open file');
+        console.error('Open file error:', e);
+        showEmptyState('editor', 'codicon-file-code', 'Failed to load file. Check console for details.');
+      }
+    }
+    // ==================== File Tree ====================
+    // Toggle file tree panel
+    function toggleFileTree() {
+      fileTreeOpen = !fileTreeOpen;
+      fileTreePanel.classList.toggle('open', fileTreeOpen);
+      if (fileTreeOpen) {
+        // Load files if not cached
+        if (workspaceFiles.length === 0) {
+          fetchWorkspaceFiles();
+        } else {
+          renderFileTree(workspaceFiles);
+        }
+      }
+    }
+    // Close file tree
+    function closeFileTree() {
+      fileTreeOpen = false;
+      fileTreePanel.classList.remove('open');
+    }
+    // Fetch workspace files from server
+    async function fetchWorkspaceFiles() {
+      if (!selectedCascadeId) return;
+      fileTree.innerHTML = '<div class="file-tree-loading"><div class="loading-spinner"></div>Loading files...</div>';
+      try {
+        const r = await fetch(`/files/${selectedCascadeId}`);
+        if (!r.ok) throw new Error('Failed to fetch files');
+        const data = await r.json();
+        workspaceFiles = data.files || [];
+        console.log(`[FileTree] Loaded ${workspaceFiles.length} files`);
+        renderFileTree(workspaceFiles);
+      } catch (e) {
+        console.error('Failed to fetch files:', e);
+        fileTree.innerHTML = '<div class="file-tree-empty">Failed to load files</div>';
+      }
+    }
+    // Build tree structure from flat file list
+    function buildFileTree(files) {
+      const root = { folders: {}, files: [] };
+      files.forEach(file => {
+        const parts = file.path.split(/[/\\]/);
+        let current = root;
+        // Navigate/create folder structure
+        for (let i = 0; i < parts.length - 1; i++) {
+          const folderName = parts[i];
+          if (!current.folders[folderName]) {
+            current.folders[folderName] = { folders: {}, files: [] };
+          }
+          current = current.folders[folderName];
+        }
+        // Add file to current folder
+        current.files.push({ name: parts[parts.length - 1], path: file.path });
+      });
+      return root;
+    }
+    // Get file icon based on extension
+    function getFileIcon(name) {
+      const ext = name.split('.').pop()?.toLowerCase();
+      const iconMap = {
+        'js': 'codicon-file-code', 'jsx': 'codicon-file-code',
+        'ts': 'codicon-file-code', 'tsx': 'codicon-file-code',
+        'html': 'codicon-file-code', 'css': 'codicon-file-code',
+        'json': 'codicon-json', 'md': 'codicon-markdown',
+        'py': 'codicon-file-code', 'java': 'codicon-file-code',
+        'go': 'codicon-file-code', 'rs': 'codicon-file-code',
+        'cob': 'codicon-file-code', 'cbl': 'codicon-file-code',
+        'sql': 'codicon-database', 'txt': 'codicon-file'
+      };
+      return iconMap[ext] || 'codicon-file';
+    }
+    // Render tree node recursively
+    function renderTreeNode(node, path = '', depth = 0) {
+      let html = '';
+      // Sort folders first, then files
+      const folderNames = Object.keys(node.folders).sort();
+      const sortedFiles = [...node.files].sort((a, b) => a.name.localeCompare(b.name));
+      // Render folders
+      folderNames.forEach(folderName => {
+        const folderPath = path ? `${path}/${folderName}` : folderName;
+        const isExpanded = expandedFolders.has(folderPath);
+        html += `
+          <div class="file-tree-folder" data-path="${escapeHtml(folderPath)}">
+            <div class="file-tree-folder-header" data-folder="${escapeHtml(folderPath)}">
+              <span class="file-tree-folder-icon codicon codicon-chevron-right ${isExpanded ? 'expanded' : ''}"></span>
+              <span class="codicon codicon-folder${isExpanded ? '-opened' : ''}" style="color: #dcb67a;"></span>
+              <span class="file-tree-folder-name">${escapeHtml(folderName)}</span>
+            </div>
+            <div class="file-tree-folder-contents ${isExpanded ? 'expanded' : ''}">
+              ${renderTreeNode(node.folders[folderName], folderPath, depth + 1)}
+            </div>
+          </div>
+        `;
+      });
+      // Render files
+      sortedFiles.forEach(file => {
+        html += `
+          <div class="file-tree-file" data-path="${escapeHtml(file.path)}">
+            <span class="file-tree-file-icon codicon ${getFileIcon(file.name)}"></span>
+            <span class="file-tree-file-name">${escapeHtml(file.name)}</span>
+          </div>
+        `;
+      });
+      return html;
+    }
+    // Render file tree
+    function renderFileTree(files) {
+      if (files.length === 0) {
+        fileTree.innerHTML = '<div class="file-tree-empty">No files found</div>';
+        return;
+      }
+      // Build and render tree structure
+      const tree = buildFileTree(files);
+      fileTree.innerHTML = renderTreeNode(tree);
+      // Add click handlers for folders
+      fileTree.querySelectorAll('.file-tree-folder-header').forEach(header => {
+        header.onclick = (e) => {
+          e.stopPropagation();
+          const folderPath = header.dataset.folder;
+          const folder = header.closest('.file-tree-folder');
+          const contents = folder.querySelector('.file-tree-folder-contents');
+          const chevron = header.querySelector('.file-tree-folder-icon');
+          const folderIcon = header.querySelector('.codicon-folder, .codicon-folder-opened');
+          if (expandedFolders.has(folderPath)) {
+            expandedFolders.delete(folderPath);
+            contents.classList.remove('expanded');
+            chevron.classList.remove('expanded');
+            folderIcon.classList.remove('codicon-folder-opened');
+            folderIcon.classList.add('codicon-folder');
+          } else {
+            expandedFolders.add(folderPath);
+            contents.classList.add('expanded');
+            chevron.classList.add('expanded');
+            folderIcon.classList.remove('codicon-folder');
+            folderIcon.classList.add('codicon-folder-opened');
+          }
+        };
+      });
+      // Add click handlers for files
+      fileTree.querySelectorAll('.file-tree-file').forEach(item => {
+        item.onclick = () => {
+          const path = item.dataset.path;
+          closeFileTree();
+          openFileInEditor(path);
+        };
+      });
+    }
+    // Setup file tree event listeners
+    function setupFileTree() {
+      const explorerBtn = document.getElementById('editorExplorerBtn');
+      // Explorer button click toggles file tree
+      explorerBtn.onclick = (e) => {
+        e.stopPropagation();
+        toggleFileTree();
+      };
+      // Close button
+      fileTreeClose.onclick = (e) => {
+        e.stopPropagation();
+        closeFileTree();
+      };
+      // Prevent clicks inside panel from closing it
+      fileTreePanel.onclick = (e) => {
+        e.stopPropagation();
+      };
+      // Close on escape key
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && fileTreeOpen) {
+          closeFileTree();
+        }
+      });
+    }
+    // Initialize file tree
+    setupFileTree();
+    // ==================== Editor Search ====================
+    function openEditorSearch() {
+      editorSearchBar.classList.add('open');
+      editorSearchInput.focus();
+      editorSearchInput.select();
+    }
+    function closeEditorSearch() {
+      editorSearchBar.classList.remove('open');
+      editorSearchInput.value = '';
+      searchMatches = [];
+      currentMatchIndex = -1;
+      editorSearchCount.textContent = '';
+      clearSearchHighlights();
+    }
+    function clearSearchHighlights() {
+      // Restore original HTML for lines that were modified
+      const modifiedLines = panels.editor.content.querySelectorAll('.editor-line-code[data-original-html]');
+      modifiedLines.forEach(el => {
+        el.innerHTML = el.dataset.originalHtml;
+        delete el.dataset.originalHtml;
+      });
+    }
+    function performSearch(query) {
+      clearSearchHighlights();
+      searchMatches = [];
+      currentMatchIndex = -1;
+      if (!query || query.length < 1) {
+        editorSearchCount.textContent = '';
+        return;
+      }
+      const codeElements = panels.editor.content.querySelectorAll('.editor-line-code');
+      const queryLower = query.toLowerCase();
+      codeElements.forEach((lineEl, lineIndex) => {
+        const text = lineEl.textContent;
+        const textLower = text.toLowerCase();
+        let startIndex = 0;
+        let matchIndex;
+        while ((matchIndex = textLower.indexOf(queryLower, startIndex)) !== -1) {
+          searchMatches.push({
+            lineIndex,
+            lineEl,
+            startIndex: matchIndex,
+            endIndex: matchIndex + query.length
+          });
+          startIndex = matchIndex + 1;
+        }
+      });
+      if (searchMatches.length > 0) {
+        highlightMatches(query);
+        currentMatchIndex = 0;
+        scrollToMatch(0);
+        updateSearchCount();
+      } else {
+        editorSearchCount.textContent = 'No results';
+      }
+    }
+    function highlightMatches(query) {
+      const codeElements = panels.editor.content.querySelectorAll('.editor-line-code');
+      const queryLower = query.toLowerCase();
+      codeElements.forEach(lineEl => {
+        const text = lineEl.textContent;
+        const textLower = text.toLowerCase();
+        if (textLower.includes(queryLower)) {
+          // Store original HTML to restore later
+          if (!lineEl.dataset.originalHtml) {
+            lineEl.dataset.originalHtml = lineEl.innerHTML;
+          }
+          // Work with text content, find all match positions
+          const matches = [];
+          let idx = 0;
+          while ((idx = textLower.indexOf(queryLower, idx)) !== -1) {
+            matches.push({ start: idx, end: idx + query.length });
+            idx++;
+          }
+          if (matches.length > 0) {
+            // Rebuild the line with highlights
+            let result = '';
+            let lastEnd = 0;
+            matches.forEach(match => {
+              // Add text before match (escaped)
+              result += escapeHtml(text.slice(lastEnd, match.start));
+              // Add highlighted match
+              result += `<span class="search-highlight">${escapeHtml(text.slice(match.start, match.end))}</span>`;
+              lastEnd = match.end;
+            });
+            // Add remaining text
+            result += escapeHtml(text.slice(lastEnd));
+            lineEl.innerHTML = result;
+          }
+        }
+      });
+    }
+    function scrollToMatch(index) {
+      const highlights = panels.editor.content.querySelectorAll('.search-highlight');
+      // Remove current class from all
+      highlights.forEach(el => el.classList.remove('current'));
+      if (highlights[index]) {
+        highlights[index].classList.add('current');
+        // Get the scroll container and the highlight element
+        const container = panels.editor.content;
+        const element = highlights[index];
+        // Get the line element (parent of the highlight)
+        const lineEl = element.closest('.editor-line');
+        if (lineEl) {
+          // Calculate scroll position to center the line
+          const containerRect = container.getBoundingClientRect();
+          const lineRect = lineEl.getBoundingClientRect();
+          const scrollTop = container.scrollTop + (lineRect.top - containerRect.top) - (containerRect.height / 2) + (lineRect.height / 2);
+          container.scrollTo({
+            top: Math.max(0, scrollTop),
+            behavior: 'smooth'
+          });
+        }
+      }
+    }
+    function updateSearchCount() {
+      if (searchMatches.length > 0) {
+        editorSearchCount.textContent = `${currentMatchIndex + 1}/${searchMatches.length}`;
+      } else {
+        editorSearchCount.textContent = 'No results';
+      }
+    }
+    function goToNextMatch() {
+      if (searchMatches.length === 0) return;
+      currentMatchIndex = (currentMatchIndex + 1) % searchMatches.length;
+      scrollToMatch(currentMatchIndex);
+      updateSearchCount();
+    }
+    function goToPrevMatch() {
+      if (searchMatches.length === 0) return;
+      currentMatchIndex = (currentMatchIndex - 1 + searchMatches.length) % searchMatches.length;
+      scrollToMatch(currentMatchIndex);
+      updateSearchCount();
+    }
+    // Setup editor search
+    function setupEditorSearch() {
+      editorSearchBtn.onclick = () => openEditorSearch();
+      editorSearchClose.onclick = () => closeEditorSearch();
+      editorSearchNext.onclick = () => goToNextMatch();
+      editorSearchPrev.onclick = () => goToPrevMatch();
+      editorSearchInput.oninput = (e) => {
+        performSearch(e.target.value);
+      };
+      editorSearchInput.onkeydown = (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          if (e.shiftKey) {
+            goToPrevMatch();
+          } else {
+            goToNextMatch();
+          }
+        } else if (e.key === 'Escape') {
+          closeEditorSearch();
+        }
+      };
+      // Ctrl+F / Cmd+F to open search
+      document.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'f' && activePanel === 'editor') {
+          e.preventDefault();
+          openEditorSearch();
+        }
+      });
+    }
+    setupEditorSearch();
+    // Visibility change handler
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible' && (!ws || ws.readyState !== WebSocket.OPEN)) {
+        connect();
+      }
+    });
+    // Initialize
+    connect();
+  </script>
+</body>
+</html>