@jacksontian/mwt 1.1.0 → 1.2.0

package/public/js/i18n.js

@@ -0,0 +1,176 @@
+const LANG_KEY = 'mwt-lang';
+
+// Display labels shown in the language menu
+export const langLabels = {
+  en: 'English',
+  zh: '中文',
+};
+
+const messages = {
+  en: {
+    newTerminal: 'New Terminal',
+    columns: 'Columns',
+    rows: 'Rows',
+    grid: 'Grid',
+    tabs: 'Tabs',
+    keyboardShortcuts: 'Keyboard Shortcuts',
+    toggleFullscreen: 'Toggle fullscreen',
+    toggleTheme: 'Toggle theme',
+    settings: 'Settings',
+
+    // Settings modal
+    settingsTitle: 'Settings',
+    settingsFont: 'Font',
+    settingsFontSize: 'Size',
+    settingsFontFamily: 'Family',
+    settingsFontFamilyPlaceholder: 'e.g. Menlo, monospace',
+
+    // Shortcuts modal
+    shortcutsTitle: 'Keyboard Shortcuts',
+    shortcutsGroupTerminals: 'Terminals',
+    shortcutsNewTerminal: 'New Terminal',
+    shortcutsCloseTerminal: 'Close Terminal',
+    shortcutsMaximizeTerminal: 'Maximize / Restore Terminal',
+    shortcutsGroupNavigation: 'Navigation',
+    shortcutsNextTerminal: 'Next Terminal',
+    shortcutsPrevTerminal: 'Previous Terminal',
+    shortcutsSwitchTerminal: 'Switch to Terminal 1–9',
+    shortcutsGroupWindow: 'Window',
+    shortcutsToggleFullscreen: 'Toggle Fullscreen',
+
+    // Terminal pane
+    terminalTitle: (num) => `Terminal ${num}`,
+    maximizeTerminal: (cmdKey) => `Maximize terminal (${cmdKey}+Shift+M)`,
+    closeTerminalBtn: (cmdKey) => `Close terminal (${cmdKey}+Shift+\`)`,
+
+    // Button tooltips with shortcut
+    newTerminalTooltip: (cmdKey) => `New Terminal (${cmdKey}+\`)`,
+    fullscreenTooltip: 'Toggle fullscreen (F11)',
+    shortcutsTooltip: 'Keyboard Shortcuts',
+
+    // Notifications
+    terminalHasNewOutput: (title) => `${title} has new output`,
+    notificationBody: 'Click to switch to this terminal',
+
+    // Overlays
+    alreadyConnected: 'mwt is already open in another tab.',
+    serverDisconnected: 'Server disconnected. Please restart the server and refresh.',
+  },
+  zh: {
+    newTerminal: '新建终端',
+    columns: '并排',
+    rows: '横排',
+    grid: '网格',
+    tabs: '标签页',
+    keyboardShortcuts: '键盘快捷键',
+    toggleFullscreen: '切换全屏',
+    toggleTheme: '切换主题',
+    settings: '设置',
+
+    // Settings modal
+    settingsTitle: '设置',
+    settingsFont: '字体',
+    settingsFontSize: '大小',
+    settingsFontFamily: '字体族',
+    settingsFontFamilyPlaceholder: '例如 Menlo, monospace',
+
+    // Shortcuts modal
+    shortcutsTitle: '键盘快捷键',
+    shortcutsGroupTerminals: '终端',
+    shortcutsNewTerminal: '新建终端',
+    shortcutsCloseTerminal: '关闭终端',
+    shortcutsMaximizeTerminal: '最大化 / 还原终端',
+    shortcutsGroupNavigation: '导航',
+    shortcutsNextTerminal: '下一个终端',
+    shortcutsPrevTerminal: '上一个终端',
+    shortcutsSwitchTerminal: '切换到终端 1–9',
+    shortcutsGroupWindow: '窗口',
+    shortcutsToggleFullscreen: '切换全屏',
+
+    // Terminal pane
+    terminalTitle: (num) => `终端 ${num}`,
+    maximizeTerminal: (cmdKey) => `最大化终端 (${cmdKey}+Shift+M)`,
+    closeTerminalBtn: (cmdKey) => `关闭终端 (${cmdKey}+Shift+\`)`,
+
+    // Button tooltips with shortcut
+    newTerminalTooltip: (cmdKey) => `新建终端 (${cmdKey}+\`)`,
+    fullscreenTooltip: '切换全屏 (F11)',
+    shortcutsTooltip: '键盘快捷键',
+
+    // Notifications
+    terminalHasNewOutput: (title) => `${title} 有新输出`,
+    notificationBody: '点击切换到此终端',
+
+    // Overlays
+    alreadyConnected: 'mwt 已在另一个标签页中打开。',
+    serverDisconnected: '服务器已断开，请重启服务后刷新页面。',
+  },
+};
+
+class I18n {
+  constructor() {
+    const saved = localStorage.getItem(LANG_KEY);
+    if (saved && messages[saved]) {
+      this.lang = saved;
+    } else {
+      // Auto-detect from browser language
+      const browser = navigator.language || 'en';
+      this.lang = browser.startsWith('zh') ? 'zh' : 'en';
+    }
+    this._callbacks = [];
+  }
+
+  t(key, ...args) {
+    const val = messages[this.lang][key];
+    if (typeof val === 'function') return val(...args);
+    return val ?? key;
+  }
+
+  setLang(lang) {
+    if (!messages[lang] || lang === this.lang) return;
+    this.lang = lang;
+    localStorage.setItem(LANG_KEY, lang);
+    this._applyToDOM();
+    for (const cb of this._callbacks) cb(lang);
+  }
+
+  getLangs() {
+    return Object.keys(langLabels);
+  }
+
+  onChange(cb) {
+    this._callbacks.push(cb);
+  }
+
+  // Apply translations to elements with data-i18n attribute
+  _applyToDOM() {
+    document.querySelectorAll('[data-i18n]').forEach(el => {
+      const key = el.dataset.i18n;
+      const val = messages[this.lang][key];
+      if (typeof val === 'string') {
+        el.textContent = val;
+      }
+    });
+    document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+      const key = el.dataset.i18nPlaceholder;
+      const val = messages[this.lang][key];
+      if (typeof val === 'string') {
+        el.placeholder = val;
+      }
+    });
+    document.querySelectorAll('[data-i18n-title]').forEach(el => {
+      const key = el.dataset.i18nTitle;
+      const val = messages[this.lang][key];
+      if (typeof val === 'string') {
+        el.title = val;
+      }
+    });
+  }
+
+  // Call once on page load to initialize DOM text
+  applyToDOM() {
+    this._applyToDOM();
+  }
+}
+
+export const i18n = new I18n();

package/public/js/layout-manager.js

@@ -2,7 +2,7 @@ export class LayoutManager {
   constructor(container, tabBar) {
     this.container = container;
     this.tabBar = tabBar;
-    this.currentLayout = 'side-by-side';
+    this.currentLayout = 'columns';
     this.activeTabId = null;
     /** @type {((id: string) => void) | null} Called after tab becomes active (focus PTY). */
     this.onTabActivate = null;
@@ -19,7 +19,7 @@ export class LayoutManager {
     this._clearMaximizedState();
 
     // Remove all layout classes
-    this.container.classList.remove('layout-side-by-side', 'layout-grid', 'layout-tabs');
+    this.container.classList.remove('layout-columns', 'layout-rows', 'layout-grid', 'layout-tabs');
     this.container.classList.add(`layout-${mode}`);
     this.currentLayout = mode;
 
@@ -224,6 +224,7 @@ export class LayoutManager {
   onTerminalMaximized() {
     if (this.currentLayout === 'grid') {
       this.container.style.gridTemplateColumns = '1fr';
+      this.container.style.gridTemplateRows = '1fr';
     }
   }
 
@@ -236,6 +237,8 @@ export class LayoutManager {
   _updateGridColumns() {
     const count = this.container.querySelectorAll('.terminal-pane').length;
     const cols = Math.ceil(Math.sqrt(count));
+    const rows = Math.ceil(count / cols);
     this.container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+    this.container.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
   }
 }

package/public/js/shortcut-manager.js

@@ -0,0 +1,102 @@
+export class ShortcutManager {
+  /**
+   * @param {{ terminalManager, layoutManager, cmdKey: string }} opts
+   */
+  constructor({ terminalManager, layoutManager, cmdKey }) {
+    this._tm = terminalManager;
+    this._lm = layoutManager;
+    this._cmdKey = cmdKey;
+    this._handler = this._onKeyDown.bind(this);
+    document.addEventListener('keydown', this._handler, true);
+    terminalManager.setShortcutManager(this);
+  }
+
+  // Called from document capture phase
+  _onKeyDown(e) {
+    if (this.matchKeyDown(e)) {
+      e._shortcutHandled = true;
+    }
+  }
+
+  // Returns true if the event matched a shortcut (used by xterm handler to block key)
+  matchKeyDown(e) {
+    const ctrl = e.ctrlKey;
+    const alt = e.altKey;
+    const tm = this._tm;
+    const lm = this._lm;
+
+    // Ctrl+Alt+N: new terminal
+    if (ctrl && alt && e.code === 'KeyN') {
+      e.preventDefault();
+      tm.createTerminal();
+      return true;
+    }
+
+    // Ctrl+Alt+W: close active terminal
+    if (ctrl && alt && e.code === 'KeyW') {
+      e.preventDefault();
+      tm.closeActiveTerminal();
+      return true;
+    }
+
+    // Ctrl+Alt+ArrowRight: next terminal
+    if (ctrl && alt && e.code === 'ArrowRight') {
+      e.preventDefault();
+      const nextId = tm.focusNext();
+      if (nextId) {
+        tm.clearActivity(nextId);
+        if (lm.currentLayout === 'tabs') { lm.activateTab(nextId); }
+      }
+      return true;
+    }
+
+    // Ctrl+Alt+ArrowLeft: previous terminal
+    if (ctrl && alt && e.code === 'ArrowLeft') {
+      e.preventDefault();
+      const prevId = tm.focusPrev();
+      if (prevId) {
+        tm.clearActivity(prevId);
+        if (lm.currentLayout === 'tabs') { lm.activateTab(prevId); }
+      }
+      return true;
+    }
+
+    // Alt+1~9: switch to terminal N
+    if (alt && !ctrl && e.code >= 'Digit1' && e.code <= 'Digit9') {
+      e.preventDefault();
+      const ids = tm.getIds();
+      const idx = parseInt(e.code[5], 10) - 1;
+      if (idx < ids.length) {
+        const targetId = ids[idx];
+        tm.focusTerminal(targetId);
+        tm.clearActivity(targetId);
+        if (lm.currentLayout === 'tabs') { lm.activateTab(targetId); }
+      }
+      return true;
+    }
+
+    // Ctrl+Alt+M: maximize/restore active terminal
+    if (ctrl && alt && e.code === 'KeyM') {
+      e.preventDefault();
+      tm.toggleMaximizeActive();
+      return true;
+    }
+
+    // F11: toggle fullscreen
+    if (e.key === 'F11') {
+      e.preventDefault();
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+      return true;
+    }
+
+    return false;
+  }
+
+  destroy() {
+    document.removeEventListener('keydown', this._handler, true);
+  }
+}

package/public/js/terminal-manager.js

@@ -1,22 +1,26 @@
 import { FitAddon } from '/vendor/xterm/addon-fit.mjs';
 import { WebLinksAddon } from '/vendor/xterm/addon-web-links.mjs';
+import { DragManager } from './drag-manager.js';
 
 // xterm.js is loaded as UMD via <script> tag, access from global
 const { Terminal } = globalThis;
 
 export class TerminalManager {
-  constructor(wsClient, container, themeManager, cmdKey = 'Ctrl', fontManager = null) {
+  constructor(wsClient, container, themeManager, cmdKey = 'Ctrl', fontManager = null, i18n = null) {
     this.wsClient = wsClient;
     this.container = container;
     this.themeManager = themeManager;
     this.fontManager = fontManager;
     this.cmdKey = cmdKey;
+    this.i18n = i18n;
     this.terminals = new Map(); // id -> { term, fitAddon, element, resizeObserver }
     this.counter = 0;
     this.activeId = null;
     this.changeCallbacks = [];
     this.activityCallbacks = [];
+    this._dragManager = new DragManager((id1, id2) => this.swapTerminals(id1, id2));
     this.activitySet = new Set(); // terminal IDs with unread activity
+    this._shortcutManager = null;
 
     // Update all terminals when theme changes
     if (themeManager) {
@@ -53,45 +57,17 @@ export class TerminalManager {
 
     const title = document.createElement('span');
     title.className = 'pane-title';
-    title.textContent = `Terminal ${num}`;
+    title.textContent = this.i18n ? this.i18n.t('terminalTitle', num) : `Terminal ${num}`;
 
     // Drag to swap
-    header.draggable = true;
-    header.addEventListener('dragstart', (e) => {
-      e.dataTransfer.effectAllowed = 'move';
-      e.dataTransfer.setData('text/plain', id);
-      header.classList.add('dragging-source');
-    });
-    header.addEventListener('dragend', () => {
-      header.classList.remove('dragging-source');
-      // Clean up any lingering drag-over highlights
-      this.container.querySelectorAll('.terminal-pane.drag-over').forEach(el => el.classList.remove('drag-over'));
-    });
-    pane.addEventListener('dragover', (e) => {
-      e.preventDefault();
-      e.dataTransfer.dropEffect = 'move';
-      pane.classList.add('drag-over');
-    });
-    pane.addEventListener('dragleave', (e) => {
-      if (!pane.contains(e.relatedTarget)) {
-        pane.classList.remove('drag-over');
-      }
-    });
-    pane.addEventListener('drop', (e) => {
-      e.preventDefault();
-      pane.classList.remove('drag-over');
-      const sourceId = e.dataTransfer.getData('text/plain');
-      if (sourceId && sourceId !== id) {
-        this.swapTerminals(sourceId, id);
-      }
-    });
+    this._dragManager.attach(pane, header, id);
 
     const headerActions = document.createElement('div');
     headerActions.className = 'pane-actions';
 
     const maximizeBtn = document.createElement('button');
     maximizeBtn.className = 'pane-maximize';
-    maximizeBtn.title = `Maximize terminal (${this.cmdKey}+Shift+M)`;
+    maximizeBtn.title = this.i18n ? this.i18n.t('maximizeTerminal', this.cmdKey) : `Maximize terminal (${this.cmdKey}+Shift+M)`;
     maximizeBtn.innerHTML = '<svg class="icon-maximize" width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="1.5" stroke="currentColor" stroke-width="1.5"/></svg>'
       + '<svg class="icon-restore" width="12" height="12" viewBox="0 0 16 16" fill="none"><rect x="4" y="1" width="11" height="11" rx="1.5" stroke="currentColor" stroke-width="1.5"/><path d="M4 5H2.5A1.5 1.5 0 001 6.5v8A1.5 1.5 0 002.5 16h8a1.5 1.5 0 001.5-1.5V13" stroke="currentColor" stroke-width="1.5"/></svg>';
     maximizeBtn.addEventListener('click', (e) => {
@@ -102,7 +78,7 @@ export class TerminalManager {
     const closeBtn = document.createElement('button');
     closeBtn.className = 'pane-close';
     closeBtn.textContent = '\u00d7';
-    closeBtn.title = `Close terminal (${this.cmdKey}+Shift+\`)`;
+    closeBtn.title = this.i18n ? this.i18n.t('closeTerminalBtn', this.cmdKey) : `Close terminal (${this.cmdKey}+Shift+\`)`;
     closeBtn.addEventListener('click', (e) => {
       e.stopPropagation();
       this.closeTerminal(id);
@@ -138,6 +114,19 @@ export class TerminalManager {
     term.loadAddon(webLinksAddon);
     term.open(body);
 
+    // Block xterm from sending app shortcut keys to the terminal process
+    term.attachCustomKeyEventHandler((e) => {
+      if (e.type !== 'keydown') return true;
+      // Already handled by document capture phase — block xterm
+      if (e._shortcutHandled) return false;
+      // Focus is in xterm and capture phase didn't fire — try shortcut manager directly
+      if (this._shortcutManager) {
+        e._shortcutHandled = true;
+        if (this._shortcutManager.matchKeyDown(e)) return false;
+      }
+      return true;
+    });
+
     // Fit after layout settles
     requestAnimationFrame(() => {
       try { fitAddon.fit(); term.scrollToBottom(); } catch { /* ignore if not visible */ }
@@ -196,6 +185,10 @@ export class TerminalManager {
     return { term, fitAddon, element: pane, resizeObserver, setMuted };
   }
 
+  setShortcutManager(sm) {
+    this._shortcutManager = sm;
+  }
+
   createTerminal() {
     const id = `term-${++this.counter}`;
     const { fitAddon } = this._buildTerminal(id);
@@ -377,6 +370,24 @@ export class TerminalManager {
     return [...this.terminals.keys()];
   }
 
+  updateI18n(i18n, cmdKey) {
+    this.i18n = i18n;
+    if (cmdKey) this.cmdKey = cmdKey;
+    for (const [id, entry] of this.terminals) {
+      const pane = entry.element;
+      const maximizeBtn = pane.querySelector('.pane-maximize');
+      const closeBtn = pane.querySelector('.pane-close');
+      if (maximizeBtn) maximizeBtn.title = i18n.t('maximizeTerminal', this.cmdKey);
+      if (closeBtn) closeBtn.title = i18n.t('closeTerminalBtn', this.cmdKey);
+      // Only update title if it hasn't been overridden by the shell (OSC)
+      const titleEl = pane.querySelector('.pane-title');
+      if (titleEl && !titleEl.title) {
+        const num = id.replace('term-', '');
+        titleEl.textContent = i18n.t('terminalTitle', num);
+      }
+    }
+  }
+
   getTitle(id) {
     const entry = this.terminals.get(id);
     if (entry) {
@@ -384,7 +395,7 @@ export class TerminalManager {
       if (paneTitle) {return paneTitle.textContent;}
     }
     const idx = id.replace('term-', '');
-    return `Terminal ${idx}`;
+    return this.i18n ? this.i18n.t('terminalTitle', idx) : `Terminal ${idx}`;
   }
 
   focusNext() {

package/public/js/theme-manager.js

@@ -1,4 +1,4 @@
-const STORAGE_KEY = 'myterminal-theme';
+const STORAGE_KEY = 'mwt-theme';
 
 const DARK_TERMINAL_THEME = {
   background: '#0a0c12',

package/public/js/ws-client.js

@@ -4,15 +4,18 @@ export class WSClient {
     this.listeners = new Map(); // id -> { onData, onExit }
     this.pendingMessages = [];
     this.reconnectDelay = 1000;
+    this.reconnectAttempts = 0;
     this.onReconnectCallbacks = [];
     this.onSessionRestoreCallback = null;
     this.onRestoreCompleteCallback = null;
+    this.onAlreadyConnectedCallback = null;
+    this.onGiveUpCallback = null;
     this.sessionId = this._getOrCreateSessionId();
     this.connect();
   }
 
   _getOrCreateSessionId() {
-    const key = 'myterminal-session-id';
+    const key = 'mwt-session-id';
     let id = localStorage.getItem(key);
     if (!id) {
       id = crypto.randomUUID();
@@ -27,6 +30,7 @@ export class WSClient {
 
     this.ws.onopen = () => {
       this.reconnectDelay = 1000;
+      this.reconnectAttempts = 0;
       // flush pending messages
       for (const msg of this.pendingMessages) {
         this.ws.send(msg);
@@ -74,7 +78,16 @@ export class WSClient {
       }
     };
 
-    this.ws.onclose = () => {
+    this.ws.onclose = (event) => {
+      if (event.code === 4409) {
+        if (this.onAlreadyConnectedCallback) {this.onAlreadyConnectedCallback();}
+        return;
+      }
+      this.reconnectAttempts += 1;
+      if (this.reconnectAttempts > 5) {
+        if (this.onGiveUpCallback) {this.onGiveUpCallback();}
+        return;
+      }
       setTimeout(() => {
         this.reconnectDelay = Math.min(this.reconnectDelay * 1.5, 10000);
         this.connect();
@@ -133,4 +146,12 @@ export class WSClient {
   onRestoreComplete(callback) {
     this.onRestoreCompleteCallback = callback;
   }
+
+  onAlreadyConnected(callback) {
+    this.onAlreadyConnectedCallback = callback;
+  }
+
+  onGiveUp(callback) {
+    this.onGiveUpCallback = callback;
+  }
 }