@jacksontian/mwt 1.0.0 → 1.1.0

package/public/js/terminal-manager.js

@@ -5,10 +5,12 @@ import { WebLinksAddon } from '/vendor/xterm/addon-web-links.mjs';
 const { Terminal } = globalThis;
 
 export class TerminalManager {
-  constructor(wsClient, container, themeManager) {
+  constructor(wsClient, container, themeManager, cmdKey = 'Ctrl', fontManager = null) {
     this.wsClient = wsClient;
     this.container = container;
     this.themeManager = themeManager;
+    this.fontManager = fontManager;
+    this.cmdKey = cmdKey;
     this.terminals = new Map(); // id -> { term, fitAddon, element, resizeObserver }
     this.counter = 0;
     this.activeId = null;
@@ -25,6 +27,17 @@ export class TerminalManager {
         }
       });
     }
+
+    // Update all terminals when font changes
+    if (fontManager) {
+      fontManager.onChange(({ fontSize, fontFamily }) => {
+        for (const [, entry] of this.terminals) {
+          entry.term.options.fontSize = fontSize;
+          entry.term.options.fontFamily = fontFamily;
+          entry.fitAddon.fit();
+        }
+      });
+    }
   }
 
   _buildTerminal(id) {
@@ -42,12 +55,43 @@ export class TerminalManager {
     title.className = 'pane-title';
     title.textContent = `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);
+      }
+    });
+
     const headerActions = document.createElement('div');
     headerActions.className = 'pane-actions';
 
     const maximizeBtn = document.createElement('button');
     maximizeBtn.className = 'pane-maximize';
-    maximizeBtn.title = 'Maximize terminal';
+    maximizeBtn.title = `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) => {
@@ -58,7 +102,7 @@ export class TerminalManager {
     const closeBtn = document.createElement('button');
     closeBtn.className = 'pane-close';
     closeBtn.textContent = '\u00d7';
-    closeBtn.title = 'Close terminal';
+    closeBtn.title = `Close terminal (${this.cmdKey}+Shift+\`)`;
     closeBtn.addEventListener('click', (e) => {
       e.stopPropagation();
       this.closeTerminal(id);
@@ -80,9 +124,10 @@ export class TerminalManager {
     // Create xterm instance
     const term = new Terminal({
       cursorBlink: true,
-      fontSize: 14,
-      fontFamily: "'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Menlo', monospace",
+      fontSize: this.fontManager ? this.fontManager.fontSize : 14,
+      fontFamily: this.fontManager ? this.fontManager.fontFamily : "'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Menlo', monospace",
       lineHeight: 1.15,
+      minimumContrastRatio: 4.5,
       theme: this.themeManager ? this.themeManager.getTerminalTheme() : {},
       allowProposedApi: true,
     });
@@ -111,7 +156,7 @@ export class TerminalManager {
     // Wire xterm -> server (muted during buffer replay to suppress escape sequence responses)
     let muted = false;
     term.onData((data) => {
-      if (!muted) this.wsClient.sendData(id, data);
+      if (!muted) {this.wsClient.sendData(id, data);}
     });
 
     term.onResize(({ cols, rows }) => {
@@ -139,13 +184,13 @@ export class TerminalManager {
     });
 
     // Track active terminal on focus and clear activity
-    pane.addEventListener('mousedown', () => { this.activeId = id; this.clearActivity(id); });
-    term.textarea?.addEventListener('focus', () => { this.activeId = id; this.clearActivity(id); });
+    pane.addEventListener('mousedown', () => { this.setActiveTerminal(id); this.clearActivity(id); });
+    term.textarea?.addEventListener('focus', () => { this.setActiveTerminal(id); this.clearActivity(id); });
 
     const setMuted = (v) => { muted = v; };
     this.terminals.set(id, { term, fitAddon, element: pane, resizeObserver, setMuted });
     this._notifyChange({ type: 'add', id });
-    this.activeId = id;
+    this.setActiveTerminal(id);
     term.focus();
 
     return { term, fitAddon, element: pane, resizeObserver, setMuted };
@@ -165,7 +210,7 @@ export class TerminalManager {
   restoreTerminal(id) {
     // Update counter to avoid future ID collisions
     const num = parseInt(id.replace('term-', ''), 10);
-    if (num > this.counter) this.counter = num;
+    if (num > this.counter) {this.counter = num;}
 
     const { fitAddon, setMuted } = this._buildTerminal(id);
 
@@ -183,7 +228,7 @@ export class TerminalManager {
 
   unmuteTerminal(id) {
     const entry = this.terminals.get(id);
-    if (entry) entry.setMuted(false);
+    if (entry) {entry.setMuted(false);}
   }
 
   unmuteAll() {
@@ -201,11 +246,15 @@ export class TerminalManager {
     }
     this.terminals.clear();
     this.counter = 0;
+    this.activeId = null;
   }
 
   closeTerminal(id) {
     const entry = this.terminals.get(id);
-    if (!entry) return;
+    if (!entry) {return;}
+
+    const idsBefore = this.getIds();
+    const idx = idsBefore.indexOf(id);
 
     // If closing a maximized terminal, restore others first
     if (entry.element.classList.contains('maximized')) {
@@ -221,12 +270,51 @@ export class TerminalManager {
     entry.element.remove();
     this.terminals.delete(id);
 
+    if (this.activeId === id) {
+      let nextId = null;
+      if (idx >= 0) {
+        if (idx < idsBefore.length - 1) {
+          nextId = idsBefore[idx + 1];
+        } else if (idx > 0) {
+          nextId = idsBefore[idx - 1];
+        }
+      }
+      this.activeId = nextId;
+    }
+    this._syncPaneFocus();
+
+    const focusId = this.activeId;
+    if (focusId) {
+      requestAnimationFrame(() => {
+        if (this.terminals.has(focusId)) {
+          this.focusTerminal(focusId);
+        }
+      });
+    }
+
     this._notifyChange({ type: 'remove', id });
   }
 
+  /** Updates active terminal state and pane-focused styling (call before focus when switching programmatically). */
+  setActiveTerminal(id) {
+    if (!this.terminals.has(id)) {return;}
+    this.activeId = id;
+    this._syncPaneFocus();
+  }
+
+  _syncPaneFocus() {
+    const active = this.activeId;
+    for (const [tid, entry] of this.terminals) {
+      entry.element.classList.toggle('pane-focused', tid === active);
+    }
+  }
+
   focusTerminal(id) {
     const entry = this.terminals.get(id);
-    if (entry) entry.term.focus();
+    if (entry) {
+      this.setActiveTerminal(id);
+      entry.term.focus();
+    }
   }
 
   fitAll() {
@@ -248,7 +336,7 @@ export class TerminalManager {
 
   toggleMaximize(id) {
     const entry = this.terminals.get(id);
-    if (!entry) return;
+    if (!entry) {return;}
 
     const pane = entry.element;
     const isMaximized = pane.classList.contains('maximized');
@@ -276,7 +364,7 @@ export class TerminalManager {
 
   getMaximizedId() {
     for (const [id, entry] of this.terminals) {
-      if (entry.element.classList.contains('maximized')) return id;
+      if (entry.element.classList.contains('maximized')) {return id;}
     }
     return null;
   }
@@ -293,7 +381,7 @@ export class TerminalManager {
     const entry = this.terminals.get(id);
     if (entry) {
       const paneTitle = entry.element.querySelector('.pane-title');
-      if (paneTitle) return paneTitle.textContent;
+      if (paneTitle) {return paneTitle.textContent;}
     }
     const idx = id.replace('term-', '');
     return `Terminal ${idx}`;
@@ -301,32 +389,30 @@ export class TerminalManager {
 
   focusNext() {
     const ids = this.getIds();
-    if (ids.length <= 1) return;
+    if (ids.length <= 1) {return;}
     const idx = ids.indexOf(this.activeId);
     const nextId = ids[(idx + 1) % ids.length];
-    this.activeId = nextId;
     this.focusTerminal(nextId);
     return nextId;
   }
 
   focusPrev() {
     const ids = this.getIds();
-    if (ids.length <= 1) return;
+    if (ids.length <= 1) {return;}
     const idx = ids.indexOf(this.activeId);
     const prevId = ids[(idx - 1 + ids.length) % ids.length];
-    this.activeId = prevId;
     this.focusTerminal(prevId);
     return prevId;
   }
 
   closeActiveTerminal() {
     const id = this.activeId || this.getIds()[0];
-    if (id) this.closeTerminal(id);
+    if (id) {this.closeTerminal(id);}
   }
 
   toggleMaximizeActive() {
     const id = this.activeId || this.getIds()[0];
-    if (id) this.toggleMaximize(id);
+    if (id) {this.toggleMaximize(id);}
   }
 
   onChange(callback) {
@@ -344,10 +430,36 @@ export class TerminalManager {
   }
 
   _notifyChange(event) {
-    for (const cb of this.changeCallbacks) cb(event);
+    for (const cb of this.changeCallbacks) {cb(event);}
   }
 
   _notifyActivity(id, cleared = false) {
-    for (const cb of this.activityCallbacks) cb(id, cleared);
+    for (const cb of this.activityCallbacks) {cb(id, cleared);}
+  }
+
+  swapTerminals(id1, id2) {
+    const entry1 = this.terminals.get(id1);
+    const entry2 = this.terminals.get(id2);
+    if (!entry1 || !entry2) {return;}
+
+    const el1 = entry1.element;
+    const el2 = entry2.element;
+
+    // Swap DOM positions using a placeholder
+    const placeholder = document.createComment('swap');
+    el1.replaceWith(placeholder);
+    el2.replaceWith(el1);
+    placeholder.replaceWith(el2);
+
+    // Swap Map entries to keep iteration order consistent
+    const keys = [...this.terminals.keys()];
+    const idx1 = keys.indexOf(id1);
+    const idx2 = keys.indexOf(id2);
+    const entries = [...this.terminals.entries()];
+    [entries[idx1], entries[idx2]] = [entries[idx2], entries[idx1]];
+    this.terminals = new Map(entries);
+
+    this._notifyChange({ type: 'swap', id1, id2 });
+    requestAnimationFrame(() => this.fitAll());
   }
 }

package/public/js/theme-manager.js

@@ -2,20 +2,20 @@ const STORAGE_KEY = 'myterminal-theme';
 
 const DARK_TERMINAL_THEME = {
   background: '#0a0c12',
-  foreground: '#d4d8e8',
+  foreground: '#e4e7f2',
   cursor: '#6c8cff',
   cursorAccent: '#0a0c12',
   selectionBackground: '#264f78',
   selectionForeground: '#ffffff',
-  black: '#1c2035',
+  black: '#5c657c',
   red: '#e05560',
   green: '#7ec699',
   yellow: '#e6c07b',
   blue: '#6c8cff',
   magenta: '#c678dd',
   cyan: '#56b6c2',
-  white: '#d4d8e8',
-  brightBlack: '#555b72',
+  white: '#e4e7f2',
+  brightBlack: '#9aa4ba',
   brightRed: '#ff6b76',
   brightGreen: '#98e6b3',
   brightYellow: '#ffd68a',
@@ -91,6 +91,6 @@ export class ThemeManager {
 
   _apply(theme) {
     document.documentElement.dataset.theme = theme;
-    for (const cb of this._listeners) cb(theme);
+    for (const cb of this._listeners) {cb(theme);}
   }
 }

package/public/js/ws-client.js

@@ -65,7 +65,7 @@ export class WSClient {
       }
 
       const listener = this.listeners.get(msg.id);
-      if (!listener) return;
+      if (!listener) {return;}
 
       if (msg.type === 'data' && listener.onData) {
         listener.onData(msg.data);
@@ -78,7 +78,7 @@ export class WSClient {
       setTimeout(() => {
         this.reconnectDelay = Math.min(this.reconnectDelay * 1.5, 10000);
         this.connect();
-        for (const cb of this.onReconnectCallbacks) cb();
+        for (const cb of this.onReconnectCallbacks) {cb();}
       }, this.reconnectDelay);
     };
   }
@@ -109,12 +109,12 @@ export class WSClient {
   }
 
   onTerminalData(id, callback) {
-    if (!this.listeners.has(id)) this.listeners.set(id, {});
+    if (!this.listeners.has(id)) {this.listeners.set(id, {});}
     this.listeners.get(id).onData = callback;
   }
 
   onTerminalExit(id, callback) {
-    if (!this.listeners.has(id)) this.listeners.set(id, {});
+    if (!this.listeners.has(id)) {this.listeners.set(id, {});}
     this.listeners.get(id).onExit = callback;
   }