claude-dev-server 1.1.3 → 1.2.0

package/dist/{chunk-F6IKDNXJ.js → chunk-PAE5WTS2.js}

@@ -196,87 +196,77 @@ async function handleInspect(msg, ws, projectRoot) {
 // src/client/injection.js
 var CLIENT_STYLES = `
 <style id="claude-dev-server-styles">
-.claude-dev-server-toggle {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  width: 44px;
-  height: 44px;
-  background: #1e1e1e;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
-  cursor: pointer;
-  z-index: 999999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  transition: transform 0.2s, background 0.2s;
+* {
+  margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
-.claude-dev-server-toggle:hover {
-  transform: scale(1.1);
-  background: #2d2d2d;
-}
-.claude-dev-server-toggle.hidden {
-  display: none;
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: transparent;
 }
-.claude-dev-server-inspect-btn {
-  position: fixed;
-  bottom: 74px;
-  right: 20px;
-  width: 44px;
-  height: 44px;
-  background: #1e1e1e;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
-  cursor: pointer;
-  z-index: 999999;
+.claude-dev-server-container {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  transition: transform 0.2s, background 0.2s;
-}
-.claude-dev-server-inspect-btn:hover {
-  transform: scale(1.1);
-  background: #2d2d2d;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: transparent;
 }
-.claude-dev-server-inspect-btn.active {
-  background: #007acc;
+.claude-dev-server-left {
+  width: 40%;
+  min-width: 300px;
+  max-width: 60%;
+  overflow: hidden;
+  position: relative;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
 }
-.claude-dev-server-inspect-btn.hidden {
-  display: none;
+.claude-dev-server-left iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
 }
-.claude-dev-server-toggle svg,
-.claude-dev-server-inspect-btn svg {
-  width: 20px;
-  height: 20px;
+.claude-dev-server-divider {
+  width: 6px;
+  background: #3e3e3e;
+  position: relative;
+  cursor: col-resize;
+  transition: background 0.2s;
   flex-shrink: 0;
 }
-.claude-dev-server-panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 650px;
-  height: 100vh;
-  background: #1e1e1e;
-  color: #d4d4d4;
-  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Consolas', monospace;
-  font-size: 13px;
-  box-shadow: -4px 0 20px rgba(0,0,0,0.3);
-  transform: translateX(100%);
-  transition: transform 0.2s ease;
-  z-index: 999999;
+.claude-dev-server-divider:hover,
+.claude-dev-server-divider.dragging {
+  background: #d97757;
+}
+.claude-dev-server-right {
+  flex: 1;
+  min-width: 300px;
+  overflow: hidden;
+  position: relative;
   display: flex;
   flex-direction: column;
 }
-.claude-dev-server-panel.open {
-  transform: translateX(0);
+.claude-dev-server-terminal {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  background: #000;
 }
-.claude-dev-server-header {
+.claude-dev-server-terminal iframe,
+.claude-dev-server-terminal-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+.claude-dev-server-dev-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+.claude-dev-server-terminal-header {
   padding: 8px 12px;
   background: #2d2d2d;
   border-bottom: 1px solid #3e3e3e;
@@ -284,6 +274,7 @@ var CLIENT_STYLES = `
   justify-content: space-between;
   align-items: center;
   user-select: none;
+  min-height: 40px;
 }
 .claude-dev-server-title {
   font-weight: 600;
@@ -292,19 +283,21 @@ var CLIENT_STYLES = `
   align-items: center;
   gap: 8px;
   font-size: 13px;
+  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Consolas', monospace;
 }
-.claude-dev-server-title::before {
-  content: '\u{1F916}';
-  font-size: 14px;
+.claude-dev-server-title svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
 }
 .claude-dev-server-actions {
   display: flex;
   gap: 6px;
 }
 .claude-dev-server-btn {
-  background: #3e3e3e;
+  background: #d97757;
   border: none;
-  color: #d4d4d4;
+  color: #fff;
   cursor: pointer;
   font-family: inherit;
   font-size: 11px;
@@ -316,42 +309,12 @@ var CLIENT_STYLES = `
   gap: 4px;
 }
 .claude-dev-server-btn:hover {
-  background: #4e4e4e;
+  background: #c96a4a;
 }
 .claude-dev-server-btn.active {
-  background: #007acc;
+  background: #b85d3f;
   color: #fff;
 }
-.claude-dev-server-close {
-  background: none;
-  border: none;
-  color: #858585;
-  cursor: pointer;
-  font-size: 18px;
-  padding: 0;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 3px;
-  transition: background 0.15s, color 0.15s;
-}
-.claude-dev-server-close:hover {
-  background: #3e3e3e;
-  color: #fff;
-}
-.claude-dev-server-terminal {
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-  background: #000;
-}
-.claude-dev-server-terminal iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-}
 .claude-dev-server-inspect-overlay {
   position: fixed;
   top: 0;
@@ -359,7 +322,7 @@ var CLIENT_STYLES = `
   right: 0;
   bottom: 0;
   pointer-events: none;
-  z-index: 999998;
+  z-index: 2147483646;
   display: none;
 }
 .claude-dev-server-inspect-overlay.active {
@@ -385,39 +348,22 @@ var CLIENT_STYLES = `
   font-family: monospace;
   white-space: nowrap;
 }
-/* Responsive layout for portrait mode */
+/* Portrait mode */
 @media (orientation: portrait) {
-  .claude-dev-server-toggle {
-    top: auto;
-    bottom: 20px;
-    right: 10px;
-    width: 36px;
-    height: 36px;
+  .claude-dev-server-container {
+    flex-direction: column;
   }
-  .claude-dev-server-inspect-btn {
-    top: auto;
-    bottom: 66px;
-    right: 10px;
-    width: 36px;
-    height: 36px;
-  }
-  .claude-dev-server-panel {
-    top: auto;
-    bottom: 0;
-    right: 0;
-    left: 0;
+  .claude-dev-server-divider {
     width: 100%;
-    height: 80vh;
-    transform: translateY(100%);
-    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
-  }
-  .claude-dev-server-panel.open {
-    transform: translateY(0);
+    height: 6px;
+    cursor: row-resize;
   }
-  .claude-dev-server-toggle svg,
-  .claude-dev-server-inspect-btn svg {
-    width: 16px;
-    height: 16px;
+  .claude-dev-server-right {
+    width: 100%;
+    min-width: unset;
+    max-width: unset;
+    height: 50%;
+    min-height: 200px;
   }
 }
 </style>
@@ -425,15 +371,16 @@ var CLIENT_STYLES = `
 var CLIENT_SCRIPT = `
 (() => {
   let ws = null
-  let panel = null
-  let toggleBtn = null
-  let inspectBtn = null  // \u60AC\u6D6E inspect \u6309\u94AE
-  let terminalContainer = null
-  let terminalIframe = null
+  let ttydIframe = null
+  let devIframe = null
   let overlay = null
-  let isOpen = false
   let isInspectMode = false
   let ttydWsUrl = null
+  let leftPanel = null
+  let divider = null
+  let rightPanel = null
+  let isDragging = false
+  let inspectListenersRegistered = false
 
   // Fetch the WebSocket port from the server
   async function getWsPort() {
@@ -448,75 +395,250 @@ var CLIENT_SCRIPT = `
       connect(port)
     } catch (err) {
       console.error('[Claude Dev Server] Failed to get port:', err)
-      // Retry after 1 second
       setTimeout(initWhenReady, 1000)
       return
     }
-    createToggleBtn()
-    createInspectBtn()
+    // Create overlay first before split layout
     createOverlay()
-    createPanel()
+    createSplitLayout()
   }
 
-  function createToggleBtn() {
-    if (toggleBtn) return
-    toggleBtn = document.createElement('button')
-    toggleBtn.className = 'claude-dev-server-toggle'
-    toggleBtn.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M11.376 24L10.776 23.544L10.44 22.8L10.776 21.312L11.16 19.392L11.472 17.856L11.76 15.96L11.928 15.336L11.904 15.288L11.784 15.312L10.344 17.28L8.16 20.232L6.432 22.056L6.024 22.224L5.304 21.864L5.376 21.192L5.784 20.616L8.16 17.568L9.6 15.672L10.536 14.592L10.512 14.448H10.464L4.128 18.576L3 18.72L2.496 18.264L2.568 17.52L2.808 17.28L4.704 15.96L9.432 13.32L9.504 13.08L9.432 12.96H9.192L8.4 12.912L5.712 12.84L3.384 12.744L1.104 12.624L0.528 12.504L0 11.784L0.048 11.424L0.528 11.112L1.224 11.16L2.736 11.28L5.016 11.424L6.672 11.52L9.12 11.784H9.504L9.552 11.616L9.432 11.52L9.336 11.424L6.96 9.84L4.416 8.16L3.072 7.176L2.352 6.672L1.992 6.216L1.848 5.208L2.496 4.488L3.384 4.56L3.6 4.608L4.488 5.304L6.384 6.768L8.88 8.616L9.24 8.904L9.408 8.808V8.736L9.24 8.472L7.896 6.024L6.456 3.528L5.808 2.496L5.64 1.872C5.576 1.656 5.544 1.416 5.544 1.152L6.288 0.144001L6.696 0L7.704 0.144001L8.112 0.504001L8.736 1.92L9.72 4.152L11.28 7.176L11.736 8.088L11.976 8.904L12.072 9.168H12.24V9.024L12.36 7.296L12.6 5.208L12.84 2.52L12.912 1.752L13.296 0.840001L14.04 0.360001L14.616 0.624001L15.096 1.32L15.024 1.752L14.76 3.6L14.184 6.504L13.824 8.472H14.04L14.28 8.208L15.264 6.912L16.92 4.848L17.64 4.032L18.504 3.12L19.056 2.688H20.088L20.832 3.816L20.496 4.992L19.44 6.336L18.552 7.464L17.28 9.168L16.512 10.536L16.584 10.632H16.752L19.608 10.008L21.168 9.744L22.992 9.432L23.832 9.816L23.928 10.2L23.592 11.016L21.624 11.496L19.32 11.952L15.888 12.768L15.84 12.792L15.888 12.864L17.424 13.008L18.096 13.056H19.728L22.752 13.272L23.544 13.8L24 14.424L23.928 14.928L22.704 15.528L21.072 15.144L17.232 14.232L15.936 13.92H15.744V14.016L16.848 15.096L18.84 16.896L21.36 19.224L21.48 19.8L21.168 20.28L20.832 20.232L18.624 18.552L17.76 17.808L15.84 16.2H15.72V16.368L16.152 17.016L18.504 20.544L18.624 21.624L18.456 21.96L17.832 22.176L17.184 22.056L15.792 20.136L14.376 17.952L13.224 16.008L13.104 16.104L12.408 23.352L12.096 23.712L11.376 24Z" fill="#d97757"/></svg>'
-    toggleBtn.title = 'Open Claude Code (Cmd/Ctrl + \`)'
-    toggleBtn.setAttribute('data-dev-tool', 'true')
-    toggleBtn.addEventListener('click', () => togglePanel(true))
-    document.body.appendChild(toggleBtn)
-  }
+  function createSplitLayout() {
+    // IMPORTANT: Only create layout in the top-level window, not in iframes
+    // This prevents infinite nesting when the dev iframe loads
+    if (window.top !== window.self) {
+      console.log('[Claude Dev Server] Not in top window, skipping layout creation')
+      return
+    }
 
-  function createInspectBtn() {
-    if (inspectBtn) return
-    inspectBtn = document.createElement('button')
-    inspectBtn.className = 'claude-dev-server-inspect-btn'
-    inspectBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 11V4a2 2 0 00-2-2H4a2 2 0 00-2 2v13a2 2 0 002 2h7"/><path d="M12 12l4.166 10 1.48-4.355L22 16.166 12 12z"/><path d="M18 18l3 3"/></svg>'
-    inspectBtn.title = 'Inspect Element (Cmd/Ctrl + Shift + I)'
-    inspectBtn.setAttribute('data-dev-tool', 'true')
+    // Check if already created
+    if (document.querySelector('.claude-dev-server-container')) return
+    // Also check if we're already in an injected page
+    if (window.__CLAUDE_SPLIT_LAYOUT_CREATED__) return
+    window.__CLAUDE_SPLIT_LAYOUT_CREATED__ = true
+
+    // Get original HTML from window variable (set by server)
+    // The HTML is Base64 encoded to avoid any escaping issues
+    let originalHtml
+    if (window.__CLAUDE_ORIGINAL_HTML_BASE64__) {
+      // Decode Base64
+      try {
+        const decoded = atob(window.__CLAUDE_ORIGINAL_HTML_BASE64__)
+        // Handle UTF-8 encoding
+        const bytes = new Uint8Array(decoded.length)
+        for (let i = 0; i < decoded.length; i++) {
+          bytes[i] = decoded.charCodeAt(i)
+        }
+        originalHtml = new TextDecoder().decode(bytes)
+      } catch (e) {
+        console.error('[Claude Dev Server] Failed to decode Base64 HTML:', e)
+        originalHtml = document.documentElement.outerHTML
+      }
+    } else {
+      originalHtml = document.documentElement.outerHTML
+    }
+
+    // Create container
+    const container = document.createElement('div')
+    container.className = 'claude-dev-server-container'
+
+    // Left panel - terminal (Claude)
+    leftPanel = document.createElement('div')
+    leftPanel.className = 'claude-dev-server-left'
+
+    // Terminal header
+    const header = document.createElement('div')
+    header.className = 'claude-dev-server-terminal-header'
+    header.innerHTML = \`
+      <span class="claude-dev-server-title">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+          <path d="M11.376 24L10.776 23.544L10.44 22.8L10.776 21.312L11.16 19.392L11.472 17.856L11.76 15.96L11.928 15.336L11.904 15.288L11.784 15.312L10.344 17.28L8.16 20.232L6.432 22.056L6.024 22.224L5.304 21.864L5.376 21.192L5.784 20.616L8.16 17.568L9.6 15.672L10.536 14.592L10.512 14.448H10.464L4.128 18.576L3 18.72L2.496 18.264L2.568 17.52L2.808 17.28L4.704 15.96L9.432 13.32L9.504 13.08L9.432 12.96H9.192L8.4 12.912L5.712 12.84L3.384 12.744L1.104 12.624L0.528 12.504L0 11.784L0.048 11.424L0.528 11.112L1.224 11.16L2.736 11.28L5.016 11.424L6.672 11.52L9.12 11.784H9.504L9.552 11.616L9.432 11.52L9.336 11.424L6.96 9.84L4.416 8.16L3.072 7.176L2.352 6.672L1.992 6.216L1.848 5.208L2.496 4.488L3.384 4.56L3.6 4.608L4.488 5.304L6.384 6.768L8.88 8.616L9.24 8.904L9.408 8.808V8.736L9.24 8.472L7.896 6.024L6.456 3.528L5.808 2.496L5.64 1.872C5.576 1.656 5.544 1.416 5.544 1.152L6.288 0.144001L6.696 0L7.704 0.144001L8.112 0.504001L8.736 1.92L9.72 4.152L11.28 7.176L11.736 8.088L11.976 8.904L12.072 9.168H12.24V9.024L12.36 7.296L12.6 5.208L12.84 2.52L12.912 1.752L13.296 0.840001L14.04 0.360001L14.616 0.624001L15.096 1.32L15.024 1.752L14.76 3.6L14.184 6.504L13.824 8.472H14.04L14.28 8.208L15.264 6.912L16.92 4.848L17.64 4.032L18.504 3.12L19.056 2.688H20.088L20.832 3.816L20.496 4.992L19.44 6.336L18.552 7.464L17.28 9.168L16.512 10.536L16.584 10.632H16.752L19.608 10.008L21.168 9.744L22.992 9.432L23.832 9.816L23.928 10.2L23.592 11.016L21.624 11.496L19.32 11.952L15.888 12.768L15.84 12.792L15.888 12.864L17.424 13.008L18.096 13.056H19.728L22.752 13.272L23.544 13.8L24 14.424L23.928 14.928L22.704 15.528L21.072 15.144L17.232 14.232L15.936 13.92H15.744V14.016L16.848 15.096L18.84 16.896L21.36 19.224L21.48 19.8L21.168 20.28L20.832 20.232L18.624 18.552L17.76 17.808L15.84 16.2H15.72V16.368L16.152 17.016L18.504 20.544L18.624 21.624L18.456 21.96L17.832 22.176L17.184 22.056L15.792 20.136L14.376 17.952L13.224 16.008L13.104 16.104L12.408 23.352L12.096 23.712L11.376 24Z" fill="#d97757"/>
+        </svg>
+        Claude Code
+      </span>
+      <div class="claude-dev-server-actions">
+        <button class="claude-dev-server-btn claude-dev-server-btn-inspect" title="Inspect Element">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M19 11V4a2 2 0 00-2-2H4a2 2 0 00-2 2v13a2 2 0 002 2h7"/>
+            <path d="M12 12l4.166 10 1.48-4.355L22 16.166 12 12z"/>
+            <path d="M18 18l3 3"/>
+          </svg>
+          Inspect
+        </button>
+      </div>
+    \`
+
+    const inspectBtn = header.querySelector('.claude-dev-server-btn-inspect')
     inspectBtn.addEventListener('click', () => {
       if (isInspectMode) {
         disableInspectMode()
       } else {
-        // \u70B9\u51FB Inspect \u65F6\u5148\u6536\u8D77\u9762\u677F
-        if (isOpen) {
-          togglePanel(false)
-        }
         enableInspectMode()
       }
     })
-    document.body.appendChild(inspectBtn)
-  }
 
-  function createOverlay() {
-    if (overlay) return
-    overlay = document.createElement('div')
-    overlay.className = 'claude-dev-server-inspect-overlay'
+    // Terminal container
+    const terminal = document.createElement('div')
+    terminal.className = 'claude-dev-server-terminal'
+
+    // Ttyd iframe
+    ttydIframe = document.createElement('iframe')
+    ttydIframe.className = 'claude-dev-server-terminal-iframe'
+    ttydIframe.allow = 'clipboard-read; clipboard-write'
+
+    terminal.appendChild(ttydIframe)
+    leftPanel.appendChild(header)
+    leftPanel.appendChild(terminal)
+
+    // Divider - draggable
+    divider = document.createElement('div')
+    divider.className = 'claude-dev-server-divider'
+    setupDraggable(divider)
+
+    // Right panel - dev server
+    rightPanel = document.createElement('div')
+    rightPanel.className = 'claude-dev-server-right'
+
+    // Create dev server iframe with srcdoc
+    devIframe = document.createElement('iframe')
+    devIframe.className = 'claude-dev-server-dev-iframe'
+    // The HTML already has inspect script injected by server
+    devIframe.srcdoc = originalHtml
+
+    rightPanel.appendChild(devIframe)
+
+    // Assemble layout: Claude (left) | divider | dev server (right)
+    container.appendChild(leftPanel)
+    container.appendChild(divider)
+    container.appendChild(rightPanel)
+
+    // Replace body content
+    document.body.innerHTML = ''
+    document.body.appendChild(container)
     document.body.appendChild(overlay)
+
+    // Wait for iframe to load before setting up communication
+    devIframe.onload = () => {
+      console.log('[Claude Dev Server] Dev iframe loaded')
+      // Setup inspect mode communication
+      setupInspectCommunication()
+    }
   }
 
-  function highlightElement(el) {
-    if (!overlay) return
-    overlay.innerHTML = ''
-    const rect = el.getBoundingClientRect()
-    const highlight = document.createElement('div')
-    highlight.className = 'claude-dev-server-highlight'
-    highlight.style.top = rect.top + 'px'
-    highlight.style.left = rect.left + 'px'
-    highlight.style.width = rect.width + 'px'
-    highlight.style.height = rect.height + 'px'
-    const className = el.className ? String(el.className) : ''
-    highlight.dataset.element = el.tagName.toLowerCase() +
-      (el.id ? '#' + el.id : '') +
-      (className ? '.' + className.split(' ').join('.') : '')
-    overlay.appendChild(highlight)
+  function setupInspectCommunication() {
+    // Inspect mode is now handled entirely in the outer layer
+    // We'll access the iframe's document directly
   }
 
-  async function getSourceLocation(el) {
+  function setupIframeInspectListeners() {
+    if (!devIframe || !devIframe.contentDocument) return
+
+    // Prevent duplicate listener registration
+    if (inspectListenersRegistered) {
+      return
+    }
+
+    const iframeDoc = devIframe.contentDocument
+    const iframeWindow = devIframe.contentWindow
+
+    const inspectHandler = (e) => {
+      if (!isInspectMode) return
+
+      e.preventDefault()
+      e.stopPropagation()
+
+      if (e.type === 'click') {
+        const el = e.target
+        const rect = el.getBoundingClientRect()
+        const className = el.className ? String(el.className) : ''
+        // Limit classnames to first 2-3 to avoid overly long selectors
+        const classNames = className.split(' ').filter(c => c).slice(0, 3)
+        const selector = el.tagName.toLowerCase() +
+          (el.id ? '#' + el.id : '') +
+          (classNames.length ? '.' + classNames.join('.') : '')
+
+        // Highlight element
+        if (overlay) {
+          overlay.innerHTML = ''
+
+          // Get iframe position on page
+          const iframeRect = devIframe.getBoundingClientRect()
+
+          // Calculate highlight position relative to main document
+          // Element rect is relative to iframe viewport, need to add iframe position
+          const highlightTop = iframeRect.top + rect.top
+          const highlightLeft = iframeRect.left + rect.left
+
+          const highlight = document.createElement('div')
+          highlight.className = 'claude-dev-server-highlight'
+          highlight.style.top = highlightTop + 'px'
+          highlight.style.left = highlightLeft + 'px'
+          highlight.style.width = rect.width + 'px'
+          highlight.style.height = rect.height + 'px'
+          highlight.dataset.element = selector
+          overlay.appendChild(highlight)
+        }
+
+        // Get source location and send to terminal
+        getSourceLocationFromElement(el).then(location => {
+          if (location) {
+            sendToTerminal(location)
+          }
+          disableInspectMode()
+        })
+      } else if (e.type === 'mousemove') {
+        const el = e.target
+        const rect = el.getBoundingClientRect()
+        const className = el.className ? String(el.className) : ''
+        // Limit classnames to first 2-3 to avoid overly long selectors
+        const classNames = className.split(' ').filter(c => c).slice(0, 3)
+        const selector = el.tagName.toLowerCase() +
+          (el.id ? '#' + el.id : '') +
+          (classNames.length ? '.' + classNames.join('.') : '')
+
+        if (overlay) {
+          overlay.innerHTML = ''
+
+          // Get iframe position on page
+          const iframeRect = devIframe.getBoundingClientRect()
+
+          // Calculate highlight position relative to main document
+          const highlightTop = iframeRect.top + rect.top
+          const highlightLeft = iframeRect.left + rect.left
+
+          const highlight = document.createElement('div')
+          highlight.className = 'claude-dev-server-highlight'
+          highlight.style.top = highlightTop + 'px'
+          highlight.style.left = highlightLeft + 'px'
+          highlight.style.width = rect.width + 'px'
+          highlight.style.height = rect.height + 'px'
+          highlight.dataset.element = selector
+          overlay.appendChild(highlight)
+        }
+      }
+    }
+
+    // Store handler reference for later removal
+    iframeDoc._claudeInspectHandler = inspectHandler
+
+    // Add event listeners in capture phase
+    iframeDoc.addEventListener('click', inspectHandler, true)
+    iframeDoc.addEventListener('mousemove', inspectHandler, true)
+
+    // Mark listeners as registered
+    inspectListenersRegistered = true
+  }
+
+  async function handleInspectElement(elementInfo) {
+    // This is now handled directly in setupIframeInspectListeners
+  }
+
+  async function getSourceLocationFromElement(element) {
+    // Access the iframe's document to detect Next.js chunks
+    const iframeDoc = devIframe?.contentDocument || document
+
     // Early check: detect Next.js by checking for _next/static chunks
-    const hasNextJsChunks = Array.from(document.querySelectorAll('script[src]'))
+    const hasNextJsChunks = Array.from(iframeDoc.querySelectorAll('script[src]'))
       .some(script => script.getAttribute('src')?.includes('/_next/static/chunks/'))
 
     if (hasNextJsChunks) {
@@ -540,16 +662,37 @@ var CLIENT_SCRIPT = `
           const result = await response.json()
           console.log('[Claude Dev Server] Lookup result:', result)
           if (result.file) {
-            const elClassName = el.className ? String(el.className) : ''
-            const selector = el.tagName.toLowerCase() +
-              (el.id ? '#' + el.id : '') +
-              (elClassName ? '.' + elClassName.split(' ').filter(c => c).join('.') : '')
+            const elClassName = element.className ? String(element.className) : ''
+            // Limit classnames to first 2-3 to avoid overly long selectors
+            const classNames = elClassName.split(' ').filter(c => c).slice(0, 3)
+            const selector = element.tagName.toLowerCase() +
+              (element.id ? '#' + element.id : '') +
+              (classNames.length ? '.' + classNames.join('.') : '')
+
+            // Extract text content from element
+            let textContent = ''
+            if (element.nodeType === Node.TEXT_NODE) {
+              textContent = element.textContent ? element.textContent.trim().substring(0, 50) : ''
+            } else if (element.childNodes.length === 1 && element.childNodes[0].nodeType === Node.TEXT_NODE) {
+              textContent = element.childNodes[0].textContent ? element.childNodes[0].textContent.trim().substring(0, 50) : ''
+            } else {
+              for (const child of element.childNodes) {
+                if (child.nodeType === Node.TEXT_NODE && child.textContent && child.textContent.trim()) {
+                  textContent = child.textContent.trim().substring(0, 50)
+                  break
+                }
+              }
+            }
+            if (textContent && textContent.length >= 50) {
+              textContent += '...'
+            }
 
             return {
               url: result.file,
               line: result.line || undefined,
               column: result.column || undefined,
               selector: selector,
+              text: textContent,
               hint: 'File: ' + result.file
             }
           }
@@ -682,12 +825,12 @@ var CLIENT_SCRIPT = `
     }
 
     // Try React DevTools - handle React 18's randomized suffix
-    const elKeys = Object.keys(el)
+    const elKeys = Object.keys(element)
     let fiberKey = elKeys.find(k => k === '__reactFiber__' || k === '__reactInternalInstance' || k.indexOf('__reactFiber') === 0)
     let propsKey = elKeys.find(k => k === '__reactProps__' || k.indexOf('__reactProps') === 0)
 
     if (fiberKey) {
-      const fiber = el[fiberKey]
+      const fiber = element[fiberKey]
       console.log('[Claude Dev Server] Found fiber at key:', fiberKey)
 
       // Log fiber structure for debugging
@@ -835,7 +978,7 @@ var CLIENT_SCRIPT = `
 
     // Try Vue component
     if (!sourceFile) {
-      const vueComponent = el.__vueParentComponent || el.__vnode
+      const vueComponent = element.__vueParentComponent || element.__vnode
       if (vueComponent) {
         const type = vueComponent.type || vueComponent.component
         if (type && type.__file) {
@@ -848,7 +991,7 @@ var CLIENT_SCRIPT = `
     // Try Vite's HMR source map
     if (!sourceFile) {
       // Look for data-vite-dev-id or similar attributes
-      const viteId = el.getAttribute('data-vite-dev-id')
+      const viteId = element.getAttribute('data-vite-dev-id')
       if (viteId) {
         // Extract file path from viteId (remove query params if any)
         const queryIndex = viteId.indexOf('?')
@@ -859,22 +1002,22 @@ var CLIENT_SCRIPT = `
 
     // Check for inline script
     if (!sourceFile) {
-      const inlineScripts = document.querySelectorAll('script:not([src])')
+      const inlineScripts = iframeDoc.querySelectorAll('script:not([src])')
       if (inlineScripts.length > 0) {
         const pathParts = window.location.pathname.split('/')
         const fileName = pathParts[pathParts.length - 1] || 'index.html'
         sourceFile = '/' + fileName
 
-        const html = document.documentElement.outerHTML
-        const elId = el.id ? el.id : ''
-        const elClass = el.className ? el.className : ''
+        const html = iframeDoc.documentElement.outerHTML
+        const elId = element.id ? element.id : ''
+        const elClass = element.className ? element.className : ''
         let elPattern
         if (elId) {
           elPattern = 'id="' + elId + '"'
         } else if (elClass) {
           elPattern = 'class="' + elClass.split(' ')[0] + '"'
         } else {
-          elPattern = el.tagName.toLowerCase()
+          elPattern = element.tagName.toLowerCase()
         }
 
         const matchIndex = html.indexOf(elPattern)
@@ -887,7 +1030,7 @@ var CLIENT_SCRIPT = `
 
     // Find main script
     if (!sourceFile) {
-      const scripts = document.querySelectorAll('script[src]')
+      const scripts = iframeDoc.querySelectorAll('script[src]')
       for (const script of scripts) {
         const src = script.getAttribute('src')
         if (src && !src.includes('cdn') && !src.includes('node_modules') &&
@@ -905,155 +1048,227 @@ var CLIENT_SCRIPT = `
       sourceFile = '/' + fileName
     }
 
-    const elClassName = el.className ? String(el.className) : ''
-    const selector = el.tagName.toLowerCase() +
-      (el.id ? '#' + el.id : '') +
-      (elClassName ? '.' + elClassName.split(' ').filter(c => c).join('.') : '')
+    const elClassName = element.className ? String(element.className) : ''
+    // Limit classnames to first 2-3 to avoid overly long selectors
+    const classNames = elClassName.split(' ').filter(c => c).slice(0, 3)
+    const selector = element.tagName.toLowerCase() +
+      (element.id ? '#' + element.id : '') +
+      (classNames.length ? '.' + classNames.join('.') : '')
+
+    // Get text content for better context
+    let textContent = ''
+    if (element.nodeType === Node.TEXT_NODE) {
+      textContent = element.textContent ? element.textContent.trim().substring(0, 50) : ''
+    } else if (element.childNodes.length === 1 && element.childNodes[0].nodeType === Node.TEXT_NODE) {
+      textContent = element.childNodes[0].textContent ? element.childNodes[0].textContent.trim().substring(0, 50) : ''
+    } else {
+      // Try to get first text node from children
+      for (const child of element.childNodes) {
+        if (child.nodeType === Node.TEXT_NODE && child.textContent && child.textContent.trim()) {
+          textContent = child.textContent.trim().substring(0, 50)
+          break
+        }
+      }
+    }
+    if (textContent && textContent.length >= 50) {
+      textContent += '...'
+    }
 
     return {
       url: sourceFile,
       line: sourceLine,
       column: sourceColumn,
       selector: selector,
+      text: textContent,
       hint: sourceFile ? 'File: ' + sourceFile : 'Element: ' + selector
     }
   }
 
-  function enableInspectMode() {
-    isInspectMode = true
-    overlay && overlay.classList.add('active')
-    document.body.style.cursor = 'crosshair'
-
-    // \u66F4\u65B0\u60AC\u6D6E inspect \u6309\u94AE\u72B6\u6001
-    if (inspectBtn) inspectBtn.classList.add('active')
-
-    // \u68C0\u67E5\u5143\u7D20\u662F\u5426\u5C5E\u4E8E dev tools
-    function isDevToolElement(el) {
-      if (!el) return false
-      // \u68C0\u67E5\u5143\u7D20\u672C\u8EAB
-      if (el.dataset && el.dataset.devTool === 'true') return true
-      // \u68C0\u67E5\u7236\u5143\u7D20
-      let parent = el.parentElement
-      while (parent) {
-        if (parent.dataset && parent.dataset.devTool === 'true') return true
-        parent = parent.parentElement
+  function setupDraggable(divider) {
+    let startX = 0
+    let startWidth = 0
+    let containerWidth = 0
+
+    // Remove existing listeners to avoid duplicates
+    divider.removeEventListener('mousedown', startDrag)
+    divider.removeEventListener('touchstart', startDrag)
+
+    divider.addEventListener('mousedown', startDrag)
+    divider.addEventListener('touchstart', startDrag)
+
+    function startDrag(e) {
+      isDragging = true
+      divider.classList.add('dragging')
+
+      // Disable pointer events on iframes to prevent interference
+      const iframes = document.querySelectorAll('iframe')
+      iframes.forEach(iframe => iframe.style.pointerEvents = 'none')
+
+      const clientX = e.touches ? e.touches[0].clientX : e.clientX
+      startX = clientX
+
+      const container = document.querySelector('.claude-dev-server-container')
+      const leftPanelEl = document.querySelector('.claude-dev-server-left')
+
+      if (container && leftPanelEl) {
+        containerWidth = container.offsetWidth
+        startWidth = leftPanelEl.offsetWidth
       }
-      return false
+
+      e.preventDefault()
     }
 
-    const onMouseMove = async (e) => {
-      if (!isInspectMode) return
-      const el = document.elementFromPoint(e.clientX, e.clientY)
-      // \u5FFD\u7565 dev tools \u5143\u7D20\u548C overlay
-      if (el && el !== overlay && !isDevToolElement(el) && (!overlay || !overlay.contains(el))) {
-        highlightElement(el)
+    function drag(e) {
+      if (!isDragging) return
+
+      // Safety check: if mouse button is not pressed, end drag
+      if (e.buttons === 0 && !e.touches) {
+        endDrag()
+        return
+      }
+
+      const clientX = e.touches ? e.touches[0].clientX : e.clientX
+      const deltaX = clientX - startX
+
+      // Calculate new width in pixels, then convert to percentage
+      let newWidth = startWidth + deltaX
+      let percentage = (newWidth / containerWidth) * 100
+
+      // Clamp between 20% and 80%
+      const clamped = Math.max(20, Math.min(80, percentage))
+
+      const leftPanelEl = document.querySelector('.claude-dev-server-left')
+      if (leftPanelEl) {
+        leftPanelEl.style.flex = 'none'
+        leftPanelEl.style.width = clamped + '%'
       }
     }
 
-    const onClick = async (e) => {
-      if (!isInspectMode) return
-      e.preventDefault()
-      e.stopPropagation()
+    function endDrag() {
+      if (isDragging) {
+        isDragging = false
+        divider.classList.remove('dragging')
 
-      const el = document.elementFromPoint(e.clientX, e.clientY)
-      // \u5FFD\u7565 dev tools \u5143\u7D20\u548C overlay
-      if (el && el !== overlay && !isDevToolElement(el) && (!overlay || !overlay.contains(el))) {
-        const location = await getSourceLocation(el)
-        if (location) {
-          await inspectElement(location, el)
-        }
-        disableInspectMode()
+        // Re-enable pointer events on iframes
+        const iframes = document.querySelectorAll('iframe')
+        iframes.forEach(iframe => iframe.style.pointerEvents = '')
       }
     }
 
-    document.addEventListener('mousemove', onMouseMove, true)
-    document.addEventListener('click', onClick, true)
+    // Use capture phase to ensure events are caught
+    // Remove old listeners first to prevent duplicates
+    document.removeEventListener('mousemove', drag, true)
+    document.removeEventListener('touchmove', drag, true)
+    document.removeEventListener('mouseup', endDrag, true)
+    document.removeEventListener('touchend', endDrag, true)
+
+    document.addEventListener('mousemove', drag, true)
+    document.addEventListener('touchmove', drag, { passive: false, capture: true })
+    document.addEventListener('mouseup', endDrag, true)
+    document.addEventListener('touchend', endDrag, true)
+  }
 
-    if (overlay) overlay._inspectHandlers = { onMouseMove, onClick }
+  function createOverlay() {
+    if (overlay) return
+    overlay = document.createElement('div')
+    overlay.className = 'claude-dev-server-inspect-overlay'
+    document.body.appendChild(overlay)
+  }
+
+  function enableInspectMode() {
+    isInspectMode = true
+    if (overlay) overlay.classList.add('active')
+    // Setup inspect listeners on the iframe
+    setupIframeInspectListeners()
+    // Change cursor in iframe
+    if (devIframe && devIframe.contentDocument && devIframe.contentDocument.body) {
+      devIframe.contentDocument.body.style.cursor = 'crosshair'
+    }
+    const btn = document.querySelector('.claude-dev-server-btn-inspect')
+    if (btn) btn.classList.add('active')
   }
 
   function disableInspectMode() {
     isInspectMode = false
-    if (overlay) overlay.classList.remove('active')
-    document.body.style.cursor = ''
-    if (overlay) overlay.innerHTML = ''
+    if (overlay) {
+      overlay.classList.remove('active')
+      overlay.innerHTML = ''
+    }
+    // Restore cursor in iframe
+    if (devIframe && devIframe.contentDocument && devIframe.contentDocument.body) {
+      devIframe.contentDocument.body.style.cursor = ''
+    }
+    const btn = document.querySelector('.claude-dev-server-btn-inspect')
+    if (btn) btn.classList.remove('active')
 
-    // \u66F4\u65B0\u60AC\u6D6E inspect \u6309\u94AE\u72B6\u6001
-    if (inspectBtn) inspectBtn.classList.remove('active')
+    // Remove inspect listeners to free up resources
+    removeIframeInspectListeners()
+  }
 
-    const btn = panel && panel.querySelector('.claude-dev-server-btn-inspect')
-    if (btn) btn.classList.remove('active')
+  function removeIframeInspectListeners() {
+    if (!devIframe || !devIframe.contentDocument) return
 
-    const handlers = overlay && overlay._inspectHandlers
-    if (handlers) {
-      document.removeEventListener('mousemove', handlers.onMouseMove, true)
-      document.removeEventListener('click', handlers.onClick, true)
+    const iframeDoc = devIframe.contentDocument
+    const existingHandler = iframeDoc._claudeInspectHandler
+
+    if (existingHandler) {
+      iframeDoc.removeEventListener('click', existingHandler, true)
+      iframeDoc.removeEventListener('mousemove', existingHandler, true)
+      delete iframeDoc._claudeInspectHandler
+      inspectListenersRegistered = false
     }
   }
 
-  async function inspectElement(location, el) {
-    // \u6784\u5EFA\u683C\u5F0F\u5316\u7684 prompt
+  async function sendToTerminal(location) {
+    // Use format: @filename <selector> "text content" (without line number)
     const filePath = location.url || location.file || 'unknown'
-    const tagName = el.tagName ? el.tagName.toLowerCase() : ''
-    const id = el.id ? '#' + el.id : ''
-
-    // \u5BF9\u4E8E Tailwind CSS \u7B49\u5927\u91CF class \u7684\u60C5\u51B5\uFF0C\u53EA\u53D6\u524D 2-3 \u4E2A class
-    let className = ''
-    if (el.className) {
-      const classes = String(el.className).split(' ').filter(c => c)
-      // \u5982\u679C class \u592A\u591A\uFF08\u53EF\u80FD\u662F Tailwind\uFF09\uFF0C\u53EA\u53D6\u524D 2 \u4E2A
-      if (classes.length > 5) {
-        className = '.' + classes.slice(0, 2).join('.')
-      } else {
-        className = '.' + classes.join('.')
-      }
-    }
 
-    const selector = tagName + id + className
+    // Build selector - handle Tailwind CSS classes by limiting
+    const tagName = location.selector ? location.selector.split(/[.#]/)[0] : 'div'
+    let selector = location.selector || tagName
 
-    // \u83B7\u53D6\u5143\u7D20\u7684\u6587\u672C\u5185\u5BB9\uFF08\u5982\u679C\u662F\u6587\u672C\u8282\u70B9\u6216\u77ED\u6587\u672C\u5143\u7D20\uFF09
+    // Get text content for better context
     let textContent = ''
-    if (el.nodeType === Node.TEXT_NODE) {
-      textContent = el.textContent ? el.textContent.trim().substring(0, 50) : ''
-    } else if (el.childNodes.length === 1 && el.childNodes[0].nodeType === Node.TEXT_NODE) {
-      textContent = el.childNodes[0].textContent ? el.childNodes[0].textContent.trim().substring(0, 50) : ''
+    if (location.text) {
+      textContent = location.text
+    } else if (location.hint && location.hint.includes('File:')) {
+      // No text content available
     }
 
-    // Check if file is in node_modules - if so, skip the @filename part
-    const isNodeModules = filePath.includes('node_modules')
-
-    // \u683C\u5F0F: @filename:line <selector> "text content" \u6216 @filename <selector> "text content"
-    // \u5982\u679C\u662F node_modules \u6587\u4EF6\uFF0C\u53EA\u4FDD\u7559 <selector> "text content"
-    let prompt = ''
-    if (isNodeModules) {
-      // Skip @filename for node_modules, just show element and text
-      prompt = \`<\${selector}>\`
-      if (textContent) {
-        prompt += \` "\${textContent}"\`
-      }
-      console.log('[Claude Dev Server] Skipping node_modules path:', filePath)
-    } else {
-      const linePart = location.line ? \`:\${location.line}\` : ''
-      prompt = \`@\${filePath}\${linePart} <\${selector}>\`
-      if (textContent) {
-        prompt += \` "\${textContent}"\`
-      }
+    // Format: @filename <selector> "text content" (no line number)
+    let prompt = \`@\${filePath} <\${selector}>\`
+    if (textContent) {
+      prompt += \` "\${textContent}"\`
+    }
+
+    console.log('[Claude Dev Server] Sending to terminal:', prompt)
+
+    // Store the interval ID so we can clear it if needed
+    if (!window._claudeSendRetryInterval) {
+      window._claudeSendRetryInterval = null
+    }
+
+    // Clear any existing retry interval
+    if (window._claudeSendRetryInterval) {
+      clearInterval(window._claudeSendRetryInterval)
+      window._claudeSendRetryInterval = null
     }
 
-    // \u53D1\u9001\u6210\u529F\u540E\u5C55\u5F00\u9762\u677F
-    const sendToTerminal = () => {
-      if (!terminalIframe || !terminalIframe.contentWindow) {
+    // Send to terminal with retry logic
+    const sendToTerminalInternal = () => {
+      if (!ttydIframe || !ttydIframe.contentWindow) {
         return false
       }
 
-      const win = terminalIframe.contentWindow
-
-      // Check if sendToTerminal function is available
+      const win = ttydIframe.contentWindow
       if (win.sendToTerminal) {
         win.sendToTerminal(prompt)
         console.log('[Claude Dev Server] Sent via sendToTerminal:', prompt)
-        // \u53D1\u9001\u6210\u529F\u540E\u5C55\u5F00\u9762\u677F
-        setTimeout(() => togglePanel(true), 100)
+        // Clear interval on success
+        if (window._claudeSendRetryInterval) {
+          clearInterval(window._claudeSendRetryInterval)
+          window._claudeSendRetryInterval = null
+        }
         return true
       }
 
@@ -1061,17 +1276,18 @@ var CLIENT_SCRIPT = `
     }
 
     // Try immediately
-    if (sendToTerminal()) {
+    if (sendToTerminalInternal()) {
       return
     }
 
     // If not ready, wait and retry
     let attempts = 0
     const maxAttempts = 50
-    const retryInterval = setInterval(() => {
+    window._claudeSendRetryInterval = setInterval(() => {
       attempts++
-      if (sendToTerminal() || attempts >= maxAttempts) {
-        clearInterval(retryInterval)
+      if (sendToTerminalInternal() || attempts >= maxAttempts) {
+        clearInterval(window._claudeSendRetryInterval)
+        window._claudeSendRetryInterval = null
         if (attempts >= maxAttempts) {
           console.warn('[Claude Dev Server] Could not send to terminal after retries')
         }
@@ -1080,86 +1296,12 @@ var CLIENT_SCRIPT = `
   }
 
   function loadTerminalIframe(ttydUrl) {
-    if (!terminalContainer || terminalIframe) return
+    if (!ttydIframe) return
     ttydWsUrl = ttydUrl
-
-    // Create iframe pointing to ttyd/index.html with ttyd WebSocket URL
-    terminalIframe = document.createElement('iframe')
-    // Pass the ttyd WebSocket URL as query param
-    terminalIframe.src = '/ttyd/index.html?ws=' + encodeURIComponent(ttydUrl)
-    terminalIframe.allow = 'clipboard-read; clipboard-write'
-
-    // Load event - iframe is ready
-    terminalIframe.onload = () => {
+    ttydIframe.src = '/ttyd/index.html?ws=' + encodeURIComponent(ttydUrl)
+    ttydIframe.onload = () => {
       console.log('[Claude Dev Server] Terminal iframe loaded')
     }
-
-    terminalContainer.appendChild(terminalIframe)
-  }
-
-  function createPanel() {
-    if (panel) return
-
-    panel = document.createElement('div')
-    panel.className = 'claude-dev-server-panel'
-    panel.innerHTML = \`
-      <div class="claude-dev-server-header">
-        <span class="claude-dev-server-title">Claude Code</span>
-        <div class="claude-dev-server-actions">
-          <button class="claude-dev-server-btn claude-dev-server-btn-inspect" title="Inspect Element">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M2 12h20M12 2v20M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07"/>
-            </svg>
-            Inspect
-          </button>
-        </div>
-        <button class="claude-dev-server-close" aria-label="Close" title="Minimize to icon">&times;</button>
-      </div>
-      <div class="claude-dev-server-terminal"></div>
-    \`
-
-    document.body.appendChild(panel)
-
-    terminalContainer = panel.querySelector('.claude-dev-server-terminal')
-    const closeBtn = panel.querySelector('.claude-dev-server-close')
-    const inspectBtn = panel.querySelector('.claude-dev-server-btn-inspect')
-
-    closeBtn && closeBtn.addEventListener('click', () => togglePanel(false))
-
-    inspectBtn && inspectBtn.addEventListener('click', () => {
-      if (isInspectMode) {
-        disableInspectMode()
-      } else {
-        // \u70B9\u51FB Inspect \u65F6\u5148\u6536\u8D77\u9762\u677F
-        if (isOpen) {
-          togglePanel(false)
-        }
-        enableInspectMode()
-      }
-    })
-  }
-
-  function togglePanel(force) {
-    createPanel()
-    if (typeof force === 'boolean') {
-      isOpen = force
-    } else {
-      isOpen = !isOpen
-    }
-
-    if (panel) panel.classList.toggle('open', isOpen)
-    if (toggleBtn) toggleBtn.classList.toggle('hidden', isOpen)
-
-    if (isOpen) {
-      // Focus iframe when panel opens
-      if (terminalIframe && terminalIframe.contentWindow) {
-        setTimeout(() => {
-          if (terminalIframe.contentWindow.terminalInstance) {
-            terminalIframe.contentWindow.terminalInstance.focus()
-          }
-        }, 100)
-      }
-    }
   }
 
   function connect(port) {
@@ -1176,10 +1318,6 @@ var CLIENT_SCRIPT = `
         console.log('[Claude Dev Server] Received message:', msg.type, msg)
         if (msg.type === 'ready' && msg.ttydUrl) {
           loadTerminalIframe(msg.ttydUrl)
-        } else if (msg.type === 'inspectResult') {
-          if (msg.location) {
-            showContextPanel(msg.location, null, false)
-          }
         }
       } catch (err) {
         console.error('[Claude Dev Server] Message parse error:', err)
@@ -1199,12 +1337,13 @@ var CLIENT_SCRIPT = `
   initWhenReady()
 
   document.addEventListener('keydown', (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.code === 'Backquote') {
+    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'I') {
       e.preventDefault()
-      togglePanel()
-    }
-    if (e.key === 'Escape' && isOpen) {
-      togglePanel(false)
+      if (isInspectMode) {
+        disableInspectMode()
+      } else {
+        enableInspectMode()
+      }
     }
     if (e.key === 'Escape' && isInspectMode) {
       disableInspectMode()
@@ -1493,21 +1632,59 @@ async function handleTurbopackLookup(projectRoot, pagePath, targetPort) {
     return { error: String(err) };
   }
 }
+function isHtmlPageRequest(req) {
+  const accept = req.headers.accept || "";
+  const url = req.url || "";
+  if (!accept.includes("text/html")) {
+    return false;
+  }
+  if (url.startsWith("/@") || url.startsWith("/_next/") || url.startsWith("/ttyd") || url.startsWith("/dev.html")) {
+    return false;
+  }
+  return true;
+}
 function createProxyServer(targetPort, wsPort, projectRoot) {
   const moduleDir = dirname(fileURLToPath(import.meta.url));
   const assetsPath = join(moduleDir, "assets");
   let ttydHtml;
   let ttydBridgeJs;
+  let devHtml;
   try {
     ttydHtml = readFileSync(join(assetsPath, "ttyd-terminal.html"), "utf-8");
     ttydBridgeJs = readFileSync(join(assetsPath, "ttyd-bridge.js"), "utf-8");
+    devHtml = readFileSync(join(assetsPath, "dev.html"), "utf-8");
   } catch (e) {
-    console.error("[Claude Dev Server] Failed to read ttyd assets from", assetsPath);
+    console.error("[Claude Dev Server] Failed to read assets from", assetsPath);
     console.error("[Claude Dev Server] moduleDir:", moduleDir);
     console.error("[Claude Dev Server] Error:", e.message);
-    throw new Error("ttyd assets not found. Please run `npm run build` first.");
+    throw new Error("Assets not found. Please run `npm run build` first.");
   }
   const server = http.createServer((req, res) => {
+    const referer = req.headers.referer || "";
+    const isFromDevPage = referer.includes("dev.html");
+    if (req.url?.startsWith("/dev.html")) {
+      const urlParams = new URL(req.url || "", `http://${req.headers.host}`);
+      const originalPath = urlParams.searchParams.get("path") || "/";
+      const host = req.headers.host || "localhost:3000";
+      const origin = `http://${host}`;
+      const modifiedDevHtml = devHtml.replace(
+        /__CLAUDE_IFRAME_SRC__/g,
+        `${origin}${originalPath}`
+      ).replace(
+        /__CLAUDE_ORIGINAL_PATH__/g,
+        originalPath
+      );
+      res.setHeader("Content-Type", "text/html");
+      res.end(modifiedDevHtml);
+      return;
+    }
+    if (!isFromDevPage && isHtmlPageRequest(req)) {
+      const currentPath = req.url || "/";
+      const devPageUrl = `/dev.html?path=${encodeURIComponent(currentPath)}`;
+      res.writeHead(302, { "Location": devPageUrl });
+      res.end();
+      return;
+    }
     if (req.url === "/@claude-port") {
       res.setHeader("Content-Type", "application/json");
       res.end(JSON.stringify({ port: wsPort }));
@@ -1569,6 +1746,7 @@ function createProxyServer(targetPort, wsPort, projectRoot) {
     }
     const proxyHeaders = { ...req.headers };
     delete proxyHeaders["accept-encoding"];
+    const shouldInject = !isFromDevPage;
     const options = {
       hostname: "localhost",
       port: targetPort,
@@ -1577,7 +1755,7 @@ function createProxyServer(targetPort, wsPort, projectRoot) {
       headers: proxyHeaders
     };
     const proxyReq = http.request(options, (proxyRes) => {
-      if (proxyRes.headers["content-type"]?.includes("text/html")) {
+      if (proxyRes.headers["content-type"]?.includes("text/html") && shouldInject) {
         const body = [];
         proxyRes.on("data", (chunk) => body.push(chunk));
         proxyRes.on("end", () => {
@@ -1659,20 +1837,33 @@ function createProxyServer(targetPort, wsPort, projectRoot) {
   return server;
 }
 function injectScripts(html, wsPort, projectRoot) {
-  const projectRootScript = `<script>window.__CLAUDE_PROJECT_ROOT__ = ${JSON.stringify(projectRoot)}</script>`;
-  return html.replace(
-    "</head>",
-    `<!-- Claude Dev Server -->
-${CLIENT_STYLES}
-${projectRootScript}
-<script type="module">${CLIENT_SCRIPT}</script>
-</head>`
-  ).replace(
-    /wsPort:\s*\d+/,
-    `wsPort: ${wsPort}`
-  );
+  if (html.includes("claude-dev-server-container") || html.includes("__CLAUDE_ORIGINAL_HTML__")) {
+    console.log("[Claude Dev Server] HTML already injected, returning as-is");
+    return html;
+  }
+  const hasOurScripts = html.includes("CLIENT_SCRIPT") || html.includes("claude-dev-server-container");
+  if (hasOurScripts) {
+    console.log("[Claude Dev Server] Warning: Original HTML already has our scripts");
+  }
+  const modifiedHtml = html;
+  console.log("[Claude Dev Server] Creating split layout, original HTML length:", html.length);
+  const base64Html = Buffer.from(modifiedHtml, "utf-8").toString("base64");
+  const projectRootScript = `<script>window.__CLAUDE_PROJECT_ROOT__ = ${JSON.stringify(projectRoot)};window.__CLAUDE_ORIGINAL_HTML_BASE64__ = "${base64Html}";</script>`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Claude Dev Server</title>
+  ${CLIENT_STYLES}
+  ${projectRootScript}
+</head>
+<body>
+  <script type="module">${CLIENT_SCRIPT.replace(/wsPort:\s*\d+/, `wsPort: ${wsPort}`)}</script>
+</body>
+</html>`;
 }
 
 export { startUniversalServer };
-//# sourceMappingURL=chunk-F6IKDNXJ.js.map
-//# sourceMappingURL=chunk-F6IKDNXJ.js.map
+//# sourceMappingURL=chunk-PAE5WTS2.js.map
+//# sourceMappingURL=chunk-PAE5WTS2.js.map