@mjasano/devtunnel 1.5.0 → 1.5.2

package/.claude/settings.local.json

@@ -17,7 +17,10 @@
       "Bash(git commit:*)",
       "Bash(git push:*)",
       "Bash(gh release create:*)",
-      "Bash(PORT=3099 node:*)"
+      "Bash(PORT=3099 node:*)",
+      "Bash(/tmp/devtunnel-test/node_modules/.bin/devtunnel:*)",
+      "Bash(lsof:*)",
+      "Bash(kill:*)"
     ]
   }
 }

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.2] - 2026-01-02
+
+### Fixed
+- Korean (Hangul) IME input on mobile - use dedicated input field for proper composition handling
+
+## [1.5.1] - 2026-01-02
+
+### Fixed
+- Korean (Hangul) IME input on mobile devices - characters no longer split into individual jamo
+
 ## [1.5.0] - 2026-01-02
 
 ### Added

package/bin/cli.js

@@ -117,9 +117,18 @@ function startServer(port, passcode = null) {
     detached: false
   });
 
+  // Track the actual port the server is running on
+  server.actualPort = port;
+
   server.stdout.on('data', (data) => {
     const msg = data.toString().trim();
     if (msg) log(`${c.dim}[server] ${msg}${c.reset}`);
+
+    // Parse actual port from server output
+    const portMatch = msg.match(/running on http:\/\/localhost:(\d+)/);
+    if (portMatch) {
+      server.actualPort = parseInt(portMatch[1]);
+    }
   });
 
   server.stderr.on('data', (data) => {
@@ -237,8 +246,14 @@ async function main() {
   log(`${c.dim}Starting server on port ${port}...${c.reset}`);
   const server = startServer(port, passcode);
 
+  // Wait a bit for server to output its actual port
+  await new Promise(resolve => setTimeout(resolve, 1000));
+
   try {
-    await waitForServer(port);
+    // Use the actual port the server is running on
+    const actualPort = server.actualPort;
+    await waitForServer(actualPort);
+    port = actualPort; // Update port for tunnel
     log(`${c.green}✓${c.reset} Server running`);
   } catch (err) {
     log(`${c.red}✗ Failed to start server: ${err.message}${c.reset}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjasano/devtunnel",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Web terminal with code editor and tunnel manager - access your dev environment from anywhere",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -110,24 +110,110 @@ require(['vs/editor/editor.main'], function() {
   document.getElementById('monaco-editor').style.display = 'none';
 });
 
-// Tab switching
-function switchTab(tab) {
-  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-  document.querySelector(`.tab[data-tab="${tab}"]`).classList.add('active');
+// View mode state
+let currentViewMode = 'split'; // 'terminal', 'editor', 'split'
+
+// View mode switching
+function setViewMode(mode) {
+  currentViewMode = mode;
 
+  // Update button states
+  document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
+  const activeBtn = document.querySelector(`.view-btn[data-view="${mode}"]`);
+  if (activeBtn) activeBtn.classList.add('active');
+
+  const mainContainer = document.querySelector('.main-container');
   const terminalContainer = document.getElementById('terminal-container');
   const editorContainer = document.getElementById('editor-container');
 
-  if (tab === 'terminal') {
+  // Reset flex styles
+  terminalContainer.style.flex = '';
+  editorContainer.style.flex = '';
+
+  if (mode === 'split') {
+    // Split view - show both
+    mainContainer.classList.add('split-view');
+    terminalContainer.classList.remove('hidden');
+    editorContainer.classList.add('active');
+    setTimeout(() => fitAddon.fit(), 0);
+  } else if (mode === 'terminal') {
+    // Terminal only
+    mainContainer.classList.remove('split-view');
     terminalContainer.classList.remove('hidden');
     editorContainer.classList.remove('active');
     setTimeout(() => fitAddon.fit(), 0);
     term.focus();
   } else {
+    // Editor only
+    mainContainer.classList.remove('split-view');
     terminalContainer.classList.add('hidden');
     editorContainer.classList.add('active');
     if (monacoEditor) monacoEditor.focus();
   }
+
+  // Save preference
+  localStorage.setItem('devtunnel-view-mode', mode);
+}
+
+// Legacy switchTab for compatibility
+function switchTab(tab) {
+  if (tab === 'terminal') {
+    setViewMode('terminal');
+  } else {
+    setViewMode('editor');
+  }
+}
+
+// Panel resizer functionality
+function initPanelResizer() {
+  const resizer = document.getElementById('panel-resizer');
+  const terminalContainer = document.getElementById('terminal-container');
+  const editorContainer = document.getElementById('editor-container');
+
+  if (!resizer) return;
+
+  let startX, startTerminalWidth, startEditorWidth;
+
+  resizer.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    startX = e.clientX;
+    const terminalRect = terminalContainer.getBoundingClientRect();
+    const editorRect = editorContainer.getBoundingClientRect();
+    startTerminalWidth = terminalRect.width;
+    startEditorWidth = editorRect.width;
+
+    document.body.classList.add('resizing');
+    resizer.classList.add('dragging');
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  });
+
+  function onMouseMove(e) {
+    const dx = e.clientX - startX;
+    const totalWidth = startTerminalWidth + startEditorWidth;
+    const minWidth = 200;
+    const newTerminalWidth = Math.max(minWidth, Math.min(totalWidth - minWidth, startTerminalWidth + dx));
+    const newEditorWidth = totalWidth - newTerminalWidth;
+
+    terminalContainer.style.flex = `0 0 ${newTerminalWidth}px`;
+    editorContainer.style.flex = `0 0 ${newEditorWidth}px`;
+
+    fitAddon.fit();
+  }
+
+  function onMouseUp() {
+    document.body.classList.remove('resizing');
+    resizer.classList.remove('dragging');
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+
+    // Save panel sizes
+    const terminalRect = terminalContainer.getBoundingClientRect();
+    const editorRect = editorContainer.getBoundingClientRect();
+    const total = terminalRect.width + editorRect.width;
+    localStorage.setItem('devtunnel-panel-ratio', (terminalRect.width / total).toFixed(3));
+  }
 }
 
 // File browser functions
@@ -227,7 +313,10 @@ function navigateToPath(path) {
 
 // File operations
 async function openFile(path) {
-  switchTab('editor');
+  // In terminal-only mode, switch to split view to show editor
+  if (currentViewMode === 'terminal') {
+    setViewMode('split');
+  }
 
   if (openFiles.has(path)) {
     activateFile(path);
@@ -488,6 +577,7 @@ function promptRename(path) {
 
 // Export functions
 window.switchTab = switchTab;
+window.setViewMode = setViewMode;
 window.navigateToPath = navigateToPath;
 window.openFile = openFile;
 window.activateFile = activateFile;
@@ -539,6 +629,100 @@ term.loadAddon(webLinksAddon);
 term.open(terminalContainer);
 fitAddon.fit();
 
+// 모바일 IME 한글 입력 처리
+let isComposing = false;
+let isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+// 모바일용 숨겨진 입력 필드 생성
+const mobileInput = document.createElement('input');
+mobileInput.type = 'text';
+mobileInput.autocapitalize = 'off';
+mobileInput.autocomplete = 'off';
+mobileInput.autocorrect = 'off';
+mobileInput.spellcheck = false;
+mobileInput.style.cssText = `
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  z-index: -1;
+`;
+terminalContainer.appendChild(mobileInput);
+
+mobileInput.addEventListener('compositionstart', () => {
+  isComposing = true;
+});
+
+mobileInput.addEventListener('compositionend', (e) => {
+  isComposing = false;
+  if (e.data && ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({ type: 'input', data: e.data }));
+  }
+  mobileInput.value = '';
+});
+
+mobileInput.addEventListener('input', (e) => {
+  // 조합 중이 아닐 때만 전송 (영문, 숫자 등)
+  if (!isComposing && e.data && ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({ type: 'input', data: e.data }));
+    mobileInput.value = '';
+  }
+});
+
+mobileInput.addEventListener('keydown', (e) => {
+  // 특수키 처리 (Enter, Backspace, Arrow 등)
+  if (!isComposing) {
+    let data = null;
+    switch (e.key) {
+      case 'Enter': data = '\r'; break;
+      case 'Backspace': data = '\x7f'; break;
+      case 'Tab': data = '\t'; e.preventDefault(); break;
+      case 'Escape': data = '\x1b'; break;
+      case 'ArrowUp': data = '\x1b[A'; break;
+      case 'ArrowDown': data = '\x1b[B'; break;
+      case 'ArrowRight': data = '\x1b[C'; break;
+      case 'ArrowLeft': data = '\x1b[D'; break;
+    }
+    if (data && ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'input', data }));
+      if (e.key !== 'Tab') mobileInput.value = '';
+    }
+  }
+});
+
+// 모바일에서 터미널 클릭 시 숨겨진 입력 필드에 포커스
+if (isMobile) {
+  terminalContainer.addEventListener('click', () => {
+    mobileInput.focus();
+  });
+}
+
+// Initialize panel resizer
+initPanelResizer();
+
+// Initialize view mode (default to split, or restore from localStorage)
+const savedViewMode = localStorage.getItem('devtunnel-view-mode') || 'split';
+setViewMode(savedViewMode);
+
+// Restore panel ratio if saved
+const savedRatio = localStorage.getItem('devtunnel-panel-ratio');
+if (savedRatio && savedViewMode === 'split') {
+  setTimeout(() => {
+    const terminalContainer = document.getElementById('terminal-container');
+    const editorContainer = document.getElementById('editor-container');
+    const sidebar = document.querySelector('.sidebar');
+    const mainContainer = document.querySelector('.main-container');
+    const totalWidth = mainContainer.clientWidth - sidebar.clientWidth;
+    const terminalWidth = totalWidth * parseFloat(savedRatio);
+    const editorWidth = totalWidth - terminalWidth;
+    terminalContainer.style.flex = `0 0 ${terminalWidth}px`;
+    editorContainer.style.flex = `0 0 ${editorWidth}px`;
+    fitAddon.fit();
+  }, 100);
+}
+
 const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
 const wsUrl = `${protocol}//${window.location.host}`;
 let ws;
@@ -613,7 +797,11 @@ function attachToTmux(sessionName) {
   localStorage.removeItem('devtunnel-session-id');
   term.clear();
   ws.send(JSON.stringify({ type: 'attach-tmux', tmuxSession: sessionName }));
-  switchTab('terminal');
+  // In editor-only mode, switch to split view to show terminal
+  if (currentViewMode === 'editor') {
+    setViewMode('split');
+  }
+  term.focus();
 }
 
 function refreshTmuxSessions() {
@@ -688,7 +876,11 @@ function createNewSession() {
   localStorage.removeItem('devtunnel-session-id');
   term.clear();
   ws.send(JSON.stringify({ type: 'attach', sessionId: null }));
-  switchTab('terminal');
+  // In editor-only mode, switch to split view to show terminal
+  if (currentViewMode === 'editor') {
+    setViewMode('split');
+  }
+  term.focus();
 }
 
 function attachToSession(sessionId) {
@@ -700,7 +892,11 @@ function attachToSession(sessionId) {
   localStorage.setItem('devtunnel-session-id', sessionId);
   term.clear();
   ws.send(JSON.stringify({ type: 'attach', sessionId }));
-  switchTab('terminal');
+  // In editor-only mode, switch to split view to show terminal
+  if (currentViewMode === 'editor') {
+    setViewMode('split');
+  }
+  term.focus();
 }
 
 function killSession(sessionId) {
@@ -819,6 +1015,9 @@ function connect() {
 }
 
 term.onData((data) => {
+  // 모바일에서는 mobileInput으로 처리
+  if (isMobile) return;
+
   if (ws && ws.readyState === WebSocket.OPEN) {
     ws.send(JSON.stringify({ type: 'input', data }));
   }

package/public/index.html

@@ -31,16 +31,20 @@
     </div>
   </div>
 
-  <!-- Tab Bar -->
-  <div class="tab-bar">
-    <div class="tab active" data-tab="terminal" onclick="switchTab('terminal')">
-      <span class="tab-icon">></span>
+  <!-- View Controls -->
+  <div class="view-controls">
+    <button class="view-btn" data-view="terminal" onclick="setViewMode('terminal')">
+      <span class="view-icon">></span>
       Terminal
-    </div>
-    <div class="tab" data-tab="editor" onclick="switchTab('editor')">
-      <span class="tab-icon">{}</span>
+    </button>
+    <button class="view-btn active" data-view="split" onclick="setViewMode('split')">
+      <span class="view-icon">||</span>
+      Split
+    </button>
+    <button class="view-btn" data-view="editor" onclick="setViewMode('editor')">
+      <span class="view-icon">{}</span>
       Editor
-    </div>
+    </button>
   </div>
 
   <div class="sidebar-overlay" id="sidebar-overlay" onclick="toggleMobileSidebar()"></div>
@@ -52,6 +56,8 @@
       <div id="terminal"></div>
     </div>
 
+    <div class="panel-resizer" id="panel-resizer"></div>
+
     <div id="editor-container">
       <div class="editor-tabs" id="editor-tabs"></div>
       <div id="monaco-editor"></div>

package/public/styles.css

@@ -444,18 +444,21 @@ body {
   border-color: #f85149;
 }
 
-/* Tab Bar */
-.tab-bar {
+/* View Controls */
+.view-controls {
   display: flex;
   background-color: #161b22;
   border-bottom: 1px solid #30363d;
   padding: 0 12px;
+  gap: 4px;
 }
 
-.tab {
-  padding: 10px 20px;
+.view-btn {
+  padding: 8px 16px;
   font-size: 13px;
   color: #8b949e;
+  background-color: transparent;
+  border: none;
   cursor: pointer;
   border-bottom: 2px solid transparent;
   transition: all 0.15s ease;
@@ -464,18 +467,55 @@ body {
   gap: 8px;
 }
 
-.tab:hover {
+.view-btn:hover {
   color: #c9d1d9;
   background-color: #21262d;
 }
 
-.tab.active {
+.view-btn.active {
   color: #c9d1d9;
   border-bottom-color: #58a6ff;
 }
 
-.tab-icon {
+.view-icon {
   font-size: 14px;
+  font-family: monospace;
+}
+
+/* Panel Resizer */
+.panel-resizer {
+  width: 4px;
+  background-color: #30363d;
+  cursor: col-resize;
+  flex-shrink: 0;
+  display: none;
+  transition: background-color 0.15s ease;
+}
+
+.panel-resizer:hover,
+.panel-resizer.dragging {
+  background-color: #58a6ff;
+}
+
+body.resizing {
+  cursor: col-resize !important;
+  user-select: none;
+}
+
+body.resizing * {
+  cursor: col-resize !important;
+}
+
+/* Split View Mode */
+.main-container.split-view .panel-resizer {
+  display: block;
+}
+
+.main-container.split-view #terminal-container,
+.main-container.split-view #editor-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 /* Editor Container */
@@ -937,13 +977,13 @@ body {
     display: flex;
   }
 
-  .tab-bar {
+  .view-controls {
     padding: 0;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
 
-  .tab {
+  .view-btn {
     flex: 1;
     padding: 12px 16px;
     font-size: 13px;
@@ -951,6 +991,19 @@ body {
     min-height: 44px;
   }
 
+  /* Disable split view on mobile */
+  .main-container.split-view .panel-resizer {
+    display: none;
+  }
+
+  .main-container.split-view #editor-container {
+    display: none;
+  }
+
+  .main-container.split-view #terminal-container {
+    flex: 1;
+  }
+
   .main-container {
     flex-direction: column;
     position: relative;
@@ -1197,11 +1250,11 @@ body {
     font-size: 11px;
   }
 
-  .tab-icon {
+  .view-icon {
     display: none;
   }
 
-  .tab {
+  .view-btn {
     font-size: 12px;
   }
 

package/server.js

@@ -1104,7 +1104,7 @@ app.get('/health', (req, res) => {
   });
 });
 
-const DEFAULT_PORT = process.env.PORT || 3000;
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 
 function findAvailablePort(startPort, maxAttempts = 10) {
   return new Promise((resolve, reject) => {