claude-dev-server 1.2.2 → 1.2.4

package/dist/assets/dev.html

@@ -191,6 +191,18 @@ html, body {
     const originalPath = '__CLAUDE_ORIGINAL_PATH__';
     const iframeSrc = '__CLAUDE_IFRAME_SRC__';
 
+    // Prevent dev.html from being loaded inside an iframe (nested loading)
+    // If we detect we're in an iframe, redirect to the actual dev server content
+    (function preventNestedLoading() {
+      if (window.top !== window.self) {
+        // We're inside an iframe - this should not happen for dev.html
+        // Redirect this iframe to the actual dev server content
+        console.log('[Claude Dev Server Wrapper] Detected nested iframe loading, redirecting to:', iframeSrc);
+        window.location.href = iframeSrc;
+        return;
+      }
+    })();
+
     const urlParams = new URLSearchParams(window.location.search);
     const wsPort = urlParams.get('wsPort');
 
@@ -231,6 +243,14 @@ html, body {
           Claude Code
         </span>
         <div class="claude-dev-server-actions">
+          <button class="claude-dev-server-btn claude-dev-server-btn-reload" title="Reload Preview">
+            <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="M23 4v6h-6"/>
+              <path d="M1 20v-6h6"/>
+              <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
+            </svg>
+            Reload
+          </button>
           <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"/>
@@ -251,6 +271,19 @@ html, body {
         }
       });
 
+      const reloadBtn = header.querySelector('.claude-dev-server-btn-reload');
+      reloadBtn.addEventListener('click', () => {
+        if (devIframe) {
+          console.log('[Claude Dev Server Wrapper] Reloading dev iframe');
+          // Reload by reassigning src
+          const currentSrc = devIframe.src;
+          devIframe.src = '';
+          setTimeout(() => {
+            devIframe.src = currentSrc;
+          }, 10);
+        }
+      });
+
       // Terminal container
       const terminal = document.createElement('div');
       terminal.className = 'claude-dev-server-terminal';
@@ -500,8 +533,35 @@ html, body {
       divider.addEventListener('touchstart', startDrag);
 
       // Listen for orientation changes
-      window.matchMedia('(orientation: portrait)').addEventListener('change', (e) => {
+      const orientationQuery = window.matchMedia('(orientation: portrait)');
+      orientationQuery.addEventListener('change', (e) => {
         isPortrait = e.matches;
+
+        // Only need to adjust leftPanel, rightPanel stays flex: 1
+        const leftPanelEl = document.querySelector('.claude-dev-server-left');
+
+        if (e.matches) {
+          // Switching to portrait: ensure leftPanel width is 100%
+          if (leftPanelEl) {
+            leftPanelEl.style.width = '100%';
+          }
+        } else {
+          // Switching to landscape: clear inline styles
+          if (leftPanelEl) {
+            leftPanelEl.style.width = '';
+            leftPanelEl.style.height = '';
+          }
+        }
+
+        // Trigger resize events in iframes to notify their content
+        setTimeout(() => {
+          const iframes = document.querySelectorAll('iframe');
+          iframes.forEach(iframe => {
+            if (iframe.contentWindow) {
+              iframe.contentWindow.dispatchEvent(new Event('resize'));
+            }
+          });
+        }, 100);
       });
 
       function startDrag(e) {
@@ -522,6 +582,7 @@ html, body {
 
         if (container && leftPanelEl) {
           containerSize = isPortrait ? container.offsetHeight : container.offsetWidth;
+          // Always measure leftPanel
           startSize = isPortrait ? leftPanelEl.offsetHeight : leftPanelEl.offsetWidth;
         }
 
@@ -541,25 +602,34 @@ html, body {
 
         // Use appropriate axis based on orientation
         const currentValue = isPortrait ? clientY : clientX;
-        const delta = currentValue - startValue;
+        // Calculate delta: dragging down/right = positive, dragging up/left = negative
+        let delta = currentValue - startValue;
+
+        // In portrait with column-reverse: dragging down (positive) should make leftPanel smaller
+        if (isPortrait) {
+          delta = -delta;
+        }
 
         let newSize = startSize + delta;
         let percentage = (newSize / containerSize) * 100;
         const clamped = Math.max(20, Math.min(80, percentage));
 
         const leftPanelEl = document.querySelector('.claude-dev-server-left');
+
         if (leftPanelEl) {
-          leftPanelEl.style.flex = 'none';
           if (isPortrait) {
-            // Portrait: adjust height
+            // Portrait: adjust leftPanel (bottom) height, width is 100%
+            leftPanelEl.style.flex = 'none';
             leftPanelEl.style.height = clamped + '%';
-            leftPanelEl.style.width = '';
+            leftPanelEl.style.width = '100%';
           } else {
-            // Landscape: adjust width
+            // Landscape: adjust leftPanel (left) width
+            leftPanelEl.style.flex = 'none';
             leftPanelEl.style.width = clamped + '%';
-            leftPanelEl.style.height = '';
           }
         }
+
+        // rightPanel stays flex: 1, no modifications needed
       }
 
       function endDrag() {