@jacksontian/mwt 1.0.0 → 1.2.0

package/public/js/app.js

@@ -2,14 +2,95 @@ import { WSClient } from './ws-client.js';
 import { TerminalManager } from './terminal-manager.js';
 import { LayoutManager } from './layout-manager.js';
 import { ThemeManager } from './theme-manager.js';
+import { FontManager } from './font-manager.js';
+import { ShortcutManager } from './shortcut-manager.js';
+import { i18n, langLabels } from './i18n.js';
+
+const isMac = /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+const cmdKey = isMac ? 'Cmd' : 'Ctrl';
+
+// Initialize i18n
+i18n.applyToDOM();
+
+function _applyDynamicTitles() {
+  document.getElementById('btn-new-terminal').title = i18n.t('newTerminalTooltip', cmdKey);
+  document.getElementById('btn-fullscreen').title = i18n.t('fullscreenTooltip');
+  document.getElementById('btn-shortcuts').title = i18n.t('shortcutsTooltip');
+}
+
 const wsClient = new WSClient();
 const container = document.getElementById('terminal-container');
 const tabBar = document.getElementById('tab-bar');
-const terminalCount = document.getElementById('terminal-count');
 
 const themeManager = new ThemeManager();
+const fontManager = new FontManager();
 const layoutManager = new LayoutManager(container, tabBar);
-const terminalManager = new TerminalManager(wsClient, container, themeManager);
+const terminalManager = new TerminalManager(wsClient, container, themeManager, cmdKey, fontManager, i18n);
+
+// Restore layout immediately (like theme/font) so it's consistent on page load
+const LAYOUT_KEY = 'mwt-layout';
+const ACTIVE_TAB_KEY = 'mwt-active-tab';
+{
+  const savedLayout = localStorage.getItem(LAYOUT_KEY);
+  if (savedLayout) {
+    document.querySelectorAll('.layout-btn').forEach(b => {
+      b.classList.toggle('active', b.dataset.layout === savedLayout);
+    });
+    layoutManager.currentLayout = savedLayout;
+    container.classList.remove('layout-columns', 'layout-rows', 'layout-grid', 'layout-tabs');
+    container.classList.add(`layout-${savedLayout}`);
+    if (savedLayout === 'tabs') {
+      tabBar.classList.remove('hidden');
+    }
+  }
+}
+
+layoutManager.onTabActivate = (id) => {
+  terminalManager.focusTerminal(id);
+};
+
+layoutManager.onLayoutApplied = () => {
+  const id = terminalManager.activeId || terminalManager.getIds()[0];
+  if (id) {
+    terminalManager.focusTerminal(id);
+  }
+};
+
+// Language dropdown
+const langDropdown = document.getElementById('lang-dropdown');
+const btnLang = document.getElementById('btn-lang');
+const btnLangLabel = document.getElementById('btn-lang-label');
+const langMenu = document.getElementById('lang-menu');
+
+function buildLangMenu() {
+  langMenu.innerHTML = '';
+  for (const [code, label] of Object.entries(langLabels)) {
+    const btn = document.createElement('button');
+    btn.className = 'lang-option' + (code === i18n.lang ? ' active' : '');
+    btn.innerHTML = `<span>${label}</span><svg class="lang-check" width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M1.5 5l2.5 2.5 4.5-4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+    btn.addEventListener('click', () => {
+      i18n.setLang(code);
+      btnLangLabel.textContent = label;
+      buildLangMenu();
+      langDropdown.classList.remove('open');
+      _applyDynamicTitles();
+      terminalManager.updateI18n(i18n, cmdKey);
+    });
+    langMenu.appendChild(btn);
+  }
+}
+
+btnLangLabel.textContent = langLabels[i18n.lang];
+buildLangMenu();
+
+btnLang.addEventListener('click', (e) => {
+  e.stopPropagation();
+  langDropdown.classList.toggle('open');
+});
+
+document.addEventListener('click', () => {
+  langDropdown.classList.remove('open');
+});
 
 // Theme toggle
 document.getElementById('btn-theme-toggle').addEventListener('click', () => {
@@ -19,6 +100,7 @@ document.getElementById('btn-theme-toggle').addEventListener('click', () => {
 // Cross-wire layout manager and terminal manager
 layoutManager.fitAll = () => terminalManager.fitAll();
 layoutManager.closeTerminal = (id) => terminalManager.closeTerminal(id);
+layoutManager.swapTerminals = (id1, id2) => terminalManager.swapTerminals(id1, id2);
 
 // Activity notification: visual indicators + browser notifications + title flash
 const originalTitle = document.title;
@@ -54,13 +136,12 @@ terminalManager.onActivity((id, cleared) => {
     if (now - lastNotify > NOTIFICATION_DEBOUNCE_MS) {
       notificationCooldown.set(id, now);
       const title = terminalManager.getTitle(id);
-      const n = new Notification(`${title} has new output`, {
-        body: 'Click to switch to this terminal',
+      const n = new Notification(i18n.t('terminalHasNewOutput', title), {
+        body: i18n.t('notificationBody'),
         tag: `mwt-${id}`,
       });
       n.onclick = () => {
         window.focus();
-        terminalManager.activeId = id;
         terminalManager.focusTerminal(id);
         if (layoutManager.currentLayout === 'tabs') {
           layoutManager.activateTab(id);
@@ -92,11 +173,6 @@ document.addEventListener('visibilitychange', () => {
 // Request notification permission on first user interaction
 document.addEventListener('click', requestNotificationPermission, { once: true });
 
-function updateCount() {
-  const count = terminalManager.getCount();
-  terminalCount.textContent = `${count} terminal${count !== 1 ? 's' : ''}`;
-}
-
 terminalManager.onChange((event) => {
   if (event.type === 'add') {
     layoutManager.onTerminalAdded(event.id);
@@ -104,8 +180,11 @@ terminalManager.onChange((event) => {
     layoutManager.onTerminalRemoved(event.id);
   } else if (event.type === 'title') {
     layoutManager.updateTabTitle(event.id, event.title);
+  } else if (event.type === 'maximize') {
+    layoutManager.onTerminalMaximized();
+  } else if (event.type === 'restore') {
+    layoutManager.onTerminalRestored();
   }
-  updateCount();
 });
 
 // New Terminal button
@@ -113,10 +192,92 @@ document.getElementById('btn-new-terminal').addEventListener('click', () => {
   terminalManager.createTerminal();
 });
 
-// Layout persistence
-const LAYOUT_KEY = 'myterminal-layout';
-const ACTIVE_TAB_KEY = 'myterminal-active-tab';
+// Settings modal
+const settingsModal = document.getElementById('settings-modal');
+const inputFontSize = document.getElementById('input-font-size');
+const inputFontFamily = document.getElementById('input-font-family');
+const fontSizeValue = document.getElementById('font-size-value');
+
+function syncSettingsUI() {
+  inputFontSize.value = fontManager.fontSize;
+  fontSizeValue.textContent = `${fontManager.fontSize}px`;
+  inputFontFamily.value = fontManager.fontFamily;
+}
+
+document.getElementById('btn-settings').addEventListener('click', () => {
+  syncSettingsUI();
+  settingsModal.classList.remove('hidden');
+});
+
+document.getElementById('btn-settings-close').addEventListener('click', () => {
+  settingsModal.classList.add('hidden');
+});
+
+settingsModal.addEventListener('click', (e) => {
+  if (e.target === settingsModal) {
+    settingsModal.classList.add('hidden');
+  }
+});
+
+inputFontSize.addEventListener('input', () => {
+  fontSizeValue.textContent = `${inputFontSize.value}px`;
+  fontManager.setFontSize(parseInt(inputFontSize.value, 10));
+});
+
+inputFontFamily.addEventListener('change', () => {
+  const val = inputFontFamily.value.trim();
+  if (val) {fontManager.setFontFamily(val);}
+});
+
+// Update button titles with platform-appropriate shortcut hints
+_applyDynamicTitles();
+
+// Shortcuts modal
+const shortcutsModal = document.getElementById('shortcuts-modal');
+
+document.getElementById('btn-shortcuts').addEventListener('click', () => {
+  shortcutsModal.classList.remove('hidden');
+});
+
+document.getElementById('btn-shortcuts-close').addEventListener('click', () => {
+  shortcutsModal.classList.add('hidden');
+});
+
+shortcutsModal.addEventListener('click', (e) => {
+  if (e.target === shortcutsModal) {
+    shortcutsModal.classList.add('hidden');
+  }
+});
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    if (!shortcutsModal.classList.contains('hidden')) {shortcutsModal.classList.add('hidden');}
+    if (!settingsModal.classList.contains('hidden')) {settingsModal.classList.add('hidden');}
+  }
+}, true);
+
+
+// Fill platform-appropriate shortcut keys in modal
+function renderShortcutKeys() {
+  document.querySelectorAll('.shortcut-key[data-shortcut]').forEach(el => {
+    const raw = el.dataset.shortcut;
+    if (isMac) {
+      el.textContent = raw
+        .replace(/ctrl/gi, '⌃')
+        .replace(/alt/gi, '⌥')
+        .replace(/shift/gi, '⇧')
+        .replace(/\+/g, '');
+    } else {
+      el.textContent = raw
+        .replace(/ctrl/gi, 'Ctrl')
+        .replace(/alt/gi, 'Alt')
+        .replace(/shift/gi, 'Shift');
+    }
+  });
+}
+renderShortcutKeys();
 
+// Layout persistence
 function saveLayoutState() {
   localStorage.setItem(LAYOUT_KEY, layoutManager.currentLayout);
   if (layoutManager.activeTabId) {
@@ -129,6 +290,11 @@ document.querySelectorAll('.layout-btn').forEach(btn => {
   btn.addEventListener('click', () => {
     document.querySelectorAll('.layout-btn').forEach(b => b.classList.remove('active'));
     btn.classList.add('active');
+    // Sync active terminal to layout manager before switching, so tabs
+    // activates the same terminal the user is currently focused on.
+    if (terminalManager.activeId) {
+      layoutManager.activeTabId = terminalManager.activeId;
+    }
     layoutManager.setLayout(btn.dataset.layout);
     saveLayoutState();
   });
@@ -148,86 +314,7 @@ document.addEventListener('fullscreenchange', () => {
 });
 
 // Keyboard shortcuts
-document.addEventListener('keydown', (e) => {
-  const ctrl = e.ctrlKey || e.metaKey;
-  const shift = e.shiftKey;
-  const alt = e.altKey;
-
-  // Ctrl+Shift+T: new terminal
-  if (ctrl && shift && e.key === 'T') {
-    e.preventDefault();
-    terminalManager.createTerminal();
-    return;
-  }
-
-  // Ctrl+Shift+W: close active terminal
-  if (ctrl && shift && e.key === 'W') {
-    e.preventDefault();
-    terminalManager.closeActiveTerminal();
-    return;
-  }
-
-  // Ctrl+Shift+]: next terminal
-  if (ctrl && shift && e.key === '}') {
-    e.preventDefault();
-    const nextId = terminalManager.focusNext();
-    if (nextId) {
-      terminalManager.clearActivity(nextId);
-      if (layoutManager.currentLayout === 'tabs') {
-        layoutManager.activateTab(nextId);
-      }
-    }
-    return;
-  }
-
-  // Ctrl+Shift+[: previous terminal
-  if (ctrl && shift && e.key === '{') {
-    e.preventDefault();
-    const prevId = terminalManager.focusPrev();
-    if (prevId) {
-      terminalManager.clearActivity(prevId);
-      if (layoutManager.currentLayout === 'tabs') {
-        layoutManager.activateTab(prevId);
-      }
-    }
-    return;
-  }
-
-  // Alt+1~9: switch to terminal N
-  if (alt && e.key >= '1' && e.key <= '9') {
-    e.preventDefault();
-    const ids = terminalManager.getIds();
-    const idx = parseInt(e.key, 10) - 1;
-    if (idx < ids.length) {
-      const targetId = ids[idx];
-      terminalManager.activeId = targetId;
-      terminalManager.focusTerminal(targetId);
-      terminalManager.clearActivity(targetId);
-      if (layoutManager.currentLayout === 'tabs') {
-        layoutManager.activateTab(targetId);
-      }
-    }
-    return;
-  }
-
-  // Ctrl+Shift+M: maximize/restore active terminal
-  if (ctrl && shift && e.key === 'M') {
-    e.preventDefault();
-    terminalManager.toggleMaximizeActive();
-    return;
-  }
-
-  // F11: toggle fullscreen
-  if (e.key === 'F11') {
-    e.preventDefault();
-    if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen();
-    } else {
-      document.exitFullscreen();
-    }
-    return;
-  }
-});
+new ShortcutManager({ terminalManager, layoutManager, cmdKey });
 
 // Prevent browser back navigation to avoid losing terminal sessions
 history.pushState(null, '', location.href);
@@ -269,10 +356,31 @@ wsClient.onSessionRestore((terminalIds) => {
     layoutManager.activateTab(savedActiveTab);
   }
 
-  updateCount();
 });
 
 // Unmute terminals after buffer replay completes
 wsClient.onRestoreComplete(() => {
   terminalManager.unmuteAll();
 });
+
+// Show overlay when this tab is rejected (another tab already connected)
+wsClient.onAlreadyConnected(() => {
+  const overlay = document.createElement('div');
+  overlay.style.cssText = 'position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-primary,#1e1e1e);z-index:9999;';
+  const p = document.createElement('p');
+  p.style.cssText = 'color:var(--text-primary,#ccc);font-family:monospace;font-size:14px;';
+  p.textContent = i18n.t('alreadyConnected');
+  overlay.appendChild(p);
+  document.body.appendChild(overlay);
+});
+
+// Show overlay when reconnection gives up after too many failures
+wsClient.onGiveUp(() => {
+  const overlay = document.createElement('div');
+  overlay.style.cssText = 'position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-primary,#1e1e1e);z-index:9999;';
+  const p = document.createElement('p');
+  p.style.cssText = 'color:var(--text-primary,#ccc);font-family:monospace;font-size:14px;';
+  p.textContent = i18n.t('serverDisconnected');
+  overlay.appendChild(p);
+  document.body.appendChild(overlay);
+});

package/public/js/drag-manager.js

@@ -0,0 +1,42 @@
+export class DragManager {
+  /**
+   * @param {(id1: string, id2: string) => void} swapTerminals
+   */
+  constructor(swapTerminals) {
+    this._swap = swapTerminals;
+  }
+
+  /** Attach drag-to-swap event listeners to a terminal pane and its header. */
+  attach(pane, header, id) {
+    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');
+      pane.closest('#terminal-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._swap(sourceId, id);
+      }
+    });
+  }
+}

package/public/js/font-manager.js

@@ -0,0 +1,43 @@
+const STORAGE_KEY_SIZE = 'mwt-font-size';
+const STORAGE_KEY_FAMILY = 'mwt-font-family';
+
+const DEFAULT_FONT_SIZE = 12;
+const DEFAULT_FONT_FAMILY = "'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Menlo', monospace";
+
+export class FontManager {
+  constructor() {
+    this._listeners = [];
+    this._fontSize = parseInt(localStorage.getItem(STORAGE_KEY_SIZE), 10) || DEFAULT_FONT_SIZE;
+    this._fontFamily = localStorage.getItem(STORAGE_KEY_FAMILY) || DEFAULT_FONT_FAMILY;
+  }
+
+  get fontSize() {
+    return this._fontSize;
+  }
+
+  get fontFamily() {
+    return this._fontFamily;
+  }
+
+  setFontSize(size) {
+    this._fontSize = size;
+    localStorage.setItem(STORAGE_KEY_SIZE, size);
+    this._notify();
+  }
+
+  setFontFamily(family) {
+    this._fontFamily = family;
+    localStorage.setItem(STORAGE_KEY_FAMILY, family);
+    this._notify();
+  }
+
+  onChange(callback) {
+    this._listeners.push(callback);
+  }
+
+  _notify() {
+    for (const cb of this._listeners) {
+      cb({ fontSize: this._fontSize, fontFamily: this._fontFamily });
+    }
+  }
+}

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();