@jacksontian/mwt 1.0.0

package/public/js/app.js

@@ -0,0 +1,278 @@
+import { WSClient } from './ws-client.js';
+import { TerminalManager } from './terminal-manager.js';
+import { LayoutManager } from './layout-manager.js';
+import { ThemeManager } from './theme-manager.js';
+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 layoutManager = new LayoutManager(container, tabBar);
+const terminalManager = new TerminalManager(wsClient, container, themeManager);
+
+// Theme toggle
+document.getElementById('btn-theme-toggle').addEventListener('click', () => {
+  themeManager.toggle();
+});
+
+// Cross-wire layout manager and terminal manager
+layoutManager.fitAll = () => terminalManager.fitAll();
+layoutManager.closeTerminal = (id) => terminalManager.closeTerminal(id);
+
+// Activity notification: visual indicators + browser notifications + title flash
+const originalTitle = document.title;
+let titleFlashTimer = null;
+
+function requestNotificationPermission() {
+  if ('Notification' in window && Notification.permission === 'default') {
+    Notification.requestPermission();
+  }
+}
+
+const notificationCooldown = new Map(); // id -> timestamp
+const NOTIFICATION_DEBOUNCE_MS = 2000;
+
+terminalManager.onActivity((id, cleared) => {
+  if (cleared) {
+    layoutManager.clearActivity(id);
+    // If no more unread activity, stop title flash
+    if (terminalManager.activitySet.size === 0) {
+      clearInterval(titleFlashTimer);
+      titleFlashTimer = null;
+      document.title = originalTitle;
+    }
+    return;
+  }
+
+  layoutManager.markActivity(id);
+
+  // Browser notification when page is hidden
+  if (document.hidden && 'Notification' in window && Notification.permission === 'granted') {
+    const now = Date.now();
+    const lastNotify = notificationCooldown.get(id) || 0;
+    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',
+        tag: `mwt-${id}`,
+      });
+      n.onclick = () => {
+        window.focus();
+        terminalManager.activeId = id;
+        terminalManager.focusTerminal(id);
+        if (layoutManager.currentLayout === 'tabs') {
+          layoutManager.activateTab(id);
+        }
+        n.close();
+      };
+    }
+  }
+
+  // Title flash when page is hidden
+  if (document.hidden && !titleFlashTimer) {
+    let flash = true;
+    titleFlashTimer = setInterval(() => {
+      document.title = flash ? `[*] ${originalTitle}` : originalTitle;
+      flash = !flash;
+    }, 1000);
+  }
+});
+
+// Stop title flash when page becomes visible
+document.addEventListener('visibilitychange', () => {
+  if (!document.hidden) {
+    clearInterval(titleFlashTimer);
+    titleFlashTimer = null;
+    document.title = originalTitle;
+  }
+});
+
+// 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);
+  } else if (event.type === 'remove') {
+    layoutManager.onTerminalRemoved(event.id);
+  } else if (event.type === 'title') {
+    layoutManager.updateTabTitle(event.id, event.title);
+  }
+  updateCount();
+});
+
+// New Terminal button
+document.getElementById('btn-new-terminal').addEventListener('click', () => {
+  terminalManager.createTerminal();
+});
+
+// Layout persistence
+const LAYOUT_KEY = 'myterminal-layout';
+const ACTIVE_TAB_KEY = 'myterminal-active-tab';
+
+function saveLayoutState() {
+  localStorage.setItem(LAYOUT_KEY, layoutManager.currentLayout);
+  if (layoutManager.activeTabId) {
+    localStorage.setItem(ACTIVE_TAB_KEY, layoutManager.activeTabId);
+  }
+}
+
+// Layout switcher
+document.querySelectorAll('.layout-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.layout-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    layoutManager.setLayout(btn.dataset.layout);
+    saveLayoutState();
+  });
+});
+
+// Fullscreen toggle
+document.getElementById('btn-fullscreen').addEventListener('click', () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+  } else {
+    document.exitFullscreen();
+  }
+});
+
+document.addEventListener('fullscreenchange', () => {
+  setTimeout(() => terminalManager.fitAll(), 100);
+});
+
+// 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;
+  }
+});
+
+// Prevent browser back navigation to avoid losing terminal sessions
+history.pushState(null, '', location.href);
+window.addEventListener('popstate', () => {
+  history.pushState(null, '', location.href);
+});
+
+// Window resize -> refit all
+window.addEventListener('resize', () => {
+  terminalManager.fitAll();
+});
+
+// Session restore handler
+wsClient.onSessionRestore((terminalIds) => {
+  // Clear any existing client-side terminals (e.g., on re-reconnect)
+  terminalManager.clearAll();
+
+  if (terminalIds.length === 0) {
+    // New session - create first terminal
+    terminalManager.createTerminal();
+  } else {
+    // Restore existing terminals
+    for (const id of terminalIds) {
+      terminalManager.restoreTerminal(id);
+    }
+  }
+
+  // Restore layout from localStorage
+  const savedLayout = localStorage.getItem(LAYOUT_KEY);
+  if (savedLayout) {
+    document.querySelectorAll('.layout-btn').forEach(b => {
+      b.classList.toggle('active', b.dataset.layout === savedLayout);
+    });
+    layoutManager.setLayout(savedLayout);
+  }
+
+  const savedActiveTab = localStorage.getItem(ACTIVE_TAB_KEY);
+  if (savedActiveTab && layoutManager.currentLayout === 'tabs') {
+    layoutManager.activateTab(savedActiveTab);
+  }
+
+  updateCount();
+});
+
+// Unmute terminals after buffer replay completes
+wsClient.onRestoreComplete(() => {
+  terminalManager.unmuteAll();
+});

package/public/js/layout-manager.js

@@ -0,0 +1,160 @@
+export class LayoutManager {
+  constructor(container, tabBar) {
+    this.container = container;
+    this.tabBar = tabBar;
+    this.currentLayout = 'side-by-side';
+    this.activeTabId = null;
+    // These will be set by app.js after construction
+    this.fitAll = () => {};
+    this.closeTerminal = () => {};
+  }
+
+  setLayout(mode) {
+    // Remove all layout classes
+    this.container.classList.remove('layout-side-by-side', 'layout-grid', 'layout-tabs');
+    this.container.classList.add(`layout-${mode}`);
+    this.currentLayout = mode;
+
+    if (mode === 'tabs') {
+      this.tabBar.classList.remove('hidden');
+      this._rebuildTabBar();
+      // Activate the current tab, or the first one
+      const panes = this.container.querySelectorAll('.terminal-pane');
+      if (panes.length > 0) {
+        const targetId = this.activeTabId && this.container.querySelector(`.terminal-pane[data-id="${this.activeTabId}"]`)
+          ? this.activeTabId
+          : panes[0].dataset.id;
+        this.activateTab(targetId);
+      }
+    } else {
+      this.tabBar.classList.add('hidden');
+      // Make all panes visible (remove active class used by tabs)
+      this.container.querySelectorAll('.terminal-pane').forEach(p => {
+        p.classList.remove('active');
+      });
+      if (mode === 'grid') {
+        this._updateGridColumns();
+      }
+    }
+
+    // Refit after layout change
+    requestAnimationFrame(() => this.fitAll());
+  }
+
+  onTerminalAdded(id) {
+    if (this.currentLayout === 'tabs') {
+      this._addTab(id);
+      this.activateTab(id);
+    } else if (this.currentLayout === 'grid') {
+      this._updateGridColumns();
+    }
+    requestAnimationFrame(() => this.fitAll());
+  }
+
+  onTerminalRemoved(id) {
+    if (this.currentLayout === 'tabs') {
+      this._removeTab(id);
+      if (this.activeTabId === id) {
+        // Activate another tab
+        const firstTab = this.tabBar.querySelector('.tab');
+        if (firstTab) {
+          this.activateTab(firstTab.dataset.id);
+        } else {
+          this.activeTabId = null;
+        }
+      }
+    } else if (this.currentLayout === 'grid') {
+      this._updateGridColumns();
+    }
+    requestAnimationFrame(() => this.fitAll());
+  }
+
+  activateTab(id) {
+    this.activeTabId = id;
+
+    // Update tab bar
+    this.tabBar.querySelectorAll('.tab').forEach(tab => {
+      tab.classList.toggle('active', tab.dataset.id === id);
+    });
+
+    // Update panes
+    this.container.querySelectorAll('.terminal-pane').forEach(pane => {
+      pane.classList.toggle('active', pane.dataset.id === id);
+    });
+
+    // Clear activity indicator for the activated tab
+    this.clearActivity(id);
+
+    requestAnimationFrame(() => this.fitAll());
+  }
+
+  markActivity(id) {
+    const tab = this.tabBar.querySelector(`.tab[data-id="${id}"]`);
+    if (tab) tab.classList.add('has-activity');
+    const pane = this.container.querySelector(`.terminal-pane[data-id="${id}"]`);
+    if (pane) pane.classList.add('has-activity');
+  }
+
+  clearActivity(id) {
+    const tab = this.tabBar.querySelector(`.tab[data-id="${id}"]`);
+    if (tab) tab.classList.remove('has-activity');
+    const pane = this.container.querySelector(`.terminal-pane[data-id="${id}"]`);
+    if (pane) pane.classList.remove('has-activity');
+  }
+
+  _rebuildTabBar() {
+    this.tabBar.innerHTML = '';
+    const panes = this.container.querySelectorAll('.terminal-pane');
+    panes.forEach(pane => {
+      const paneTitle = pane.querySelector('.pane-title')?.textContent;
+      this._addTab(pane.dataset.id, paneTitle);
+    });
+  }
+
+  _addTab(id, label) {
+    const tab = document.createElement('div');
+    tab.className = 'tab';
+    tab.dataset.id = id;
+
+    const title = document.createElement('span');
+    title.className = 'tab-title';
+    const idx = id.replace('term-', '');
+    title.textContent = label || `Terminal ${idx}`;
+
+    const closeBtn = document.createElement('span');
+    closeBtn.className = 'tab-close';
+    closeBtn.textContent = '\u00d7';
+    closeBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.closeTerminal(id);
+    });
+
+    tab.appendChild(title);
+    tab.appendChild(closeBtn);
+
+    tab.addEventListener('click', () => {
+      this.activateTab(id);
+    });
+
+    this.tabBar.appendChild(tab);
+  }
+
+  updateTabTitle(id, title) {
+    const tab = this.tabBar.querySelector(`.tab[data-id="${id}"] .tab-title`);
+    if (tab) {
+      tab.textContent = title;
+      tab.title = title;
+    }
+  }
+
+  _removeTab(id) {
+    const tab = this.tabBar.querySelector(`.tab[data-id="${id}"]`);
+    if (tab) tab.remove();
+  }
+
+  _updateGridColumns() {
+    const count = this.container.querySelectorAll('.terminal-pane').length;
+    const cols = count <= 1 ? 1 : count <= 4 ? 2 : count <= 9 ? 3 : 4;
+    this.container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+  }
+}