@jacksontian/mwt 1.0.0 → 1.1.0

package/lib/ring-buffer.js

@@ -32,7 +32,7 @@ export class RingBuffer {
   }
 
   read() {
-    if (this.length === 0) return '';
+    if (this.length === 0) {return '';}
 
     if (this.length < this.capacity) {
       // Haven't wrapped yet — data starts at 0

package/lib/server.js

@@ -28,185 +28,185 @@ const OUTPUT_BUFFER_SIZE = 100 * 1024;      // 100KB per terminal
 function openBrowser(url) {
   const cmd = process.platform === 'darwin' ? 'open'
     : process.platform === 'win32' ? 'start'
-    : 'xdg-open';
+      : 'xdg-open';
   exec(`${cmd} ${url}`);
 }
 
 export function start(port = 1987, host = '127.0.0.1', options = {}) {
 
-const startCwd = process.cwd();
-const sessions = new Map(); // sessionId -> { terminals, ws, disconnectedAt }
-
-// HTTP server for static files
-const server = createServer(async (req, res) => {
-  let filePath;
-  const url = req.url.split('?')[0];
-
-  if (url === '/') {
-    filePath = join(__dirname, 'public', 'index.html');
-  } else {
-    filePath = join(__dirname, 'public', url);
-  }
-
-  try {
-    const data = await readFile(filePath);
-    const ext = extname(filePath);
-    res.writeHead(200, { 'Content-Type': MIME_TYPES[ext] || 'application/octet-stream' });
-    res.end(data);
-  } catch {
-    res.writeHead(404, { 'Content-Type': 'text/plain' });
-    res.end('Not Found');
-  }
-});
-
-// WebSocket server
-const wss = new WebSocketServer({ server });
-
-wss.on('connection', (ws, req) => {
-  const url = new URL(req.url, 'http://localhost');
-  const sessionId = url.searchParams.get('sessionId');
-  if (!sessionId) {
-    ws.close(4001, 'Missing sessionId');
-    return;
-  }
-
-  let session = sessions.get(sessionId);
-  if (!session) {
-    session = { terminals: new Map(), ws: null, disconnectedAt: null };
-    sessions.set(sessionId, session);
-  }
-
-  // Detach old WS if still open
-  if (session.ws && session.ws !== ws && session.ws.readyState === 1) {
-    session.ws.close();
-  }
-
-  session.ws = ws;
-  session.disconnectedAt = null;
-
-  // Send session-restore with existing terminal IDs
-  const terminalIds = [...session.terminals.keys()];
-  ws.send(JSON.stringify({ type: 'session-restore', terminals: terminalIds }));
-
-  // Send buffered output for each existing terminal
-  for (const [id, entry] of session.terminals) {
-    const buffered = entry.outputBuffer.read();
-    if (buffered) {
-      ws.send(JSON.stringify({ type: 'buffer', id, data: buffered }));
-    }
-  }
+  const startCwd = process.cwd();
+  const sessions = new Map(); // sessionId -> { terminals, ws, disconnectedAt }
+
+  // HTTP server for static files
+  const server = createServer(async (req, res) => {
+    let filePath;
+    const url = req.url.split('?')[0];
 
-  // Signal that all buffer messages have been sent
-  if (terminalIds.length > 0) {
-    ws.send(JSON.stringify({ type: 'restore-complete' }));
-  }
+    if (url === '/') {
+      filePath = join(__dirname, 'public', 'index.html');
+    } else {
+      filePath = join(__dirname, 'public', url);
+    }
 
-  ws.on('message', async (raw) => {
-    let msg;
     try {
-      msg = JSON.parse(raw);
+      const data = await readFile(filePath);
+      const ext = extname(filePath);
+      res.writeHead(200, { 'Content-Type': MIME_TYPES[ext] || 'application/octet-stream' });
+      res.end(data);
     } catch {
+      res.writeHead(404, { 'Content-Type': 'text/plain' });
+      res.end('Not Found');
+    }
+  });
+
+  // WebSocket server
+  const wss = new WebSocketServer({ server });
+
+  wss.on('connection', (ws, req) => {
+    const url = new URL(req.url, 'http://localhost');
+    const sessionId = url.searchParams.get('sessionId');
+    if (!sessionId) {
+      ws.close(4001, 'Missing sessionId');
       return;
     }
 
-    switch (msg.type) {
-      case 'create': {
-        const shell = process.env.SHELL || '/bin/bash';
-        let ptyProcess;
-        try {
-          ptyProcess = pty.spawn(shell, [], {
-            name: 'xterm-256color',
-            cols: msg.cols || 80,
-            rows: msg.rows || 24,
-            cwd: startCwd,
-            env: process.env,
-          });
-        } catch (err) {
-          console.error(`Failed to spawn shell "${shell}":`, err.message);
-          if (ws.readyState === 1) {
-            ws.send(JSON.stringify({ type: 'exit', id: msg.id, exitCode: 1 }));
-          }
-          break;
-        }
+    let session = sessions.get(sessionId);
+    if (!session) {
+      session = { terminals: new Map(), ws: null, disconnectedAt: null };
+      sessions.set(sessionId, session);
+    }
 
-        const outputBuffer = new RingBuffer(OUTPUT_BUFFER_SIZE);
-        session.terminals.set(msg.id, { pty: ptyProcess, outputBuffer });
+    // Detach old WS if still open
+    if (session.ws && session.ws !== ws && session.ws.readyState === 1) {
+      session.ws.close();
+    }
 
-        ptyProcess.onData((data) => {
-          outputBuffer.write(data);
-          if (session.ws && session.ws.readyState === 1) {
-            session.ws.send(JSON.stringify({ type: 'data', id: msg.id, data }));
-          }
-        });
+    session.ws = ws;
+    session.disconnectedAt = null;
 
-        ptyProcess.onExit(({ exitCode }) => {
-          session.terminals.delete(msg.id);
-          if (session.ws && session.ws.readyState === 1) {
-            session.ws.send(JSON.stringify({ type: 'exit', id: msg.id, exitCode }));
-          }
-        });
-        break;
+    // Send session-restore with existing terminal IDs
+    const terminalIds = [...session.terminals.keys()];
+    ws.send(JSON.stringify({ type: 'session-restore', terminals: terminalIds }));
+
+    // Send buffered output for each existing terminal
+    for (const [id, entry] of session.terminals) {
+      const buffered = entry.outputBuffer.read();
+      if (buffered) {
+        ws.send(JSON.stringify({ type: 'buffer', id, data: buffered }));
       }
+    }
+
+    // Signal that all buffer messages have been sent
+    if (terminalIds.length > 0) {
+      ws.send(JSON.stringify({ type: 'restore-complete' }));
+    }
 
-      case 'data': {
-        const entry = session.terminals.get(msg.id);
-        if (entry) entry.pty.write(msg.data);
-        break;
+    ws.on('message', async (raw) => {
+      let msg;
+      try {
+        msg = JSON.parse(raw);
+      } catch {
+        return;
       }
 
-      case 'resize': {
-        const entry = session.terminals.get(msg.id);
-        if (entry) {
+      switch (msg.type) {
+        case 'create': {
+          const shell = process.env.SHELL || '/bin/bash';
+          let ptyProcess;
           try {
-            entry.pty.resize(msg.cols, msg.rows);
-          } catch {
-            // ignore invalid resize
+            ptyProcess = pty.spawn(shell, [], {
+              name: 'xterm-256color',
+              cols: msg.cols || 80,
+              rows: msg.rows || 24,
+              cwd: startCwd,
+              env: process.env,
+            });
+          } catch (err) {
+            console.error(`Failed to spawn shell "${shell}":`, err.message);
+            if (ws.readyState === 1) {
+              ws.send(JSON.stringify({ type: 'exit', id: msg.id, exitCode: 1 }));
+            }
+            break;
+          }
+
+          const outputBuffer = new RingBuffer(OUTPUT_BUFFER_SIZE);
+          session.terminals.set(msg.id, { pty: ptyProcess, outputBuffer });
+
+          ptyProcess.onData((data) => {
+            outputBuffer.write(data);
+            if (session.ws && session.ws.readyState === 1) {
+              session.ws.send(JSON.stringify({ type: 'data', id: msg.id, data }));
+            }
+          });
+
+          ptyProcess.onExit(({ exitCode }) => {
+            session.terminals.delete(msg.id);
+            if (session.ws && session.ws.readyState === 1) {
+              session.ws.send(JSON.stringify({ type: 'exit', id: msg.id, exitCode }));
+            }
+          });
+          break;
+        }
+
+        case 'data': {
+          const entry = session.terminals.get(msg.id);
+          if (entry) { entry.pty.write(msg.data); }
+          break;
+        }
+
+        case 'resize': {
+          const entry = session.terminals.get(msg.id);
+          if (entry) {
+            try {
+              entry.pty.resize(msg.cols, msg.rows);
+            } catch {
+              // ignore invalid resize
+            }
           }
+          break;
         }
-        break;
-      }
 
-      case 'close': {
-        const entry = session.terminals.get(msg.id);
-        if (entry) {
-          entry.pty.kill();
-          session.terminals.delete(msg.id);
+        case 'close': {
+          const entry = session.terminals.get(msg.id);
+          if (entry) {
+            entry.pty.kill();
+            session.terminals.delete(msg.id);
+          }
+          break;
         }
-        break;
+
       }
+    });
 
-    }
+    ws.on('close', () => {
+      if (session.ws === ws) {
+        session.ws = null;
+        session.disconnectedAt = Date.now();
+      }
+    });
   });
 
-  ws.on('close', () => {
-    if (session.ws === ws) {
-      session.ws = null;
-      session.disconnectedAt = Date.now();
+  server.listen(port, host, () => {
+    const url = `http://${host === '0.0.0.0' ? '127.0.0.1' : host}:${port}`;
+    console.log(`mwt running at ${url}`);
+    if (options.open !== false) {
+      openBrowser(url);
     }
   });
-});
-
-server.listen(port, host, () => {
-  const url = `http://${host === '0.0.0.0' ? '127.0.0.1' : host}:${port}`;
-  console.log(`mwt running at ${url}`);
-  if (options.open !== false) {
-    openBrowser(url);
-  }
-});
-
-// Clean up sessions that have been disconnected too long
-const cleanupTimer = setInterval(() => {
-  const now = Date.now();
-  for (const [sessionId, session] of sessions) {
-    if (session.disconnectedAt && (now - session.disconnectedAt) > SESSION_TIMEOUT_MS) {
-      for (const [, entry] of session.terminals) {
-        entry.pty.kill();
+
+  // Clean up sessions that have been disconnected too long
+  const cleanupTimer = setInterval(() => {
+    const now = Date.now();
+    for (const [sessionId, session] of sessions) {
+      if (session.disconnectedAt && (now - session.disconnectedAt) > SESSION_TIMEOUT_MS) {
+        for (const [, entry] of session.terminals) {
+          entry.pty.kill();
+        }
+        session.terminals.clear();
+        sessions.delete(sessionId);
       }
-      session.terminals.clear();
-      sessions.delete(sessionId);
     }
-  }
-}, CLEANUP_INTERVAL_MS);
-cleanupTimer.unref();
+  }, CLEANUP_INTERVAL_MS);
+  cleanupTimer.unref();
 
 } // end start

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jacksontian/mwt",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Multi-window terminal with side-by-side, grid, and tab layouts",
   "type": "module",
   "bin": {
@@ -21,7 +21,9 @@
   "scripts": {
     "test": "mocha",
     "cov": "c8 mocha",
-    "cov:report": "c8 report --reporter=text --reporter=html"
+    "cov:report": "c8 report --reporter=text --reporter=html",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "engines": {
     "node": ">=18"
@@ -31,7 +33,10 @@
     "ws": "^8.18.0"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "c8": "^11.0.0",
+    "eslint": "^10.1.0",
+    "globals": "^17.4.0",
     "mocha": "^11.7.5"
   },
   "publishConfig": {

package/public/css/style.css

@@ -21,9 +21,10 @@
   --accent: #6c8cff;
   --accent-hover: #8aa4ff;
   --text-primary: #d4d8e8;
-  --text-secondary: #8890a8;
-  --text-dim: #555b72;
+  --text-secondary: #9aa3bc;
+  --text-dim: #6f788f;
   --border: #252a3d;
+  --pane-border-idle: #1e2333;
   --danger: #e05560;
   --danger-hover: #ff6b76;
   --terminal-bg: #0a0c12;
@@ -43,6 +44,7 @@
   --text-secondary: #5a6178;
   --text-dim: #9098b0;
   --border: #d0d5e0;
+  --pane-border-idle: #c5cad6;
   --danger: #d43d4e;
   --danger-hover: #c02838;
   --terminal-bg: #ffffff;
@@ -291,12 +293,30 @@ body {
 .terminal-pane {
   display: flex;
   flex-direction: column;
+  position: relative;
   background: var(--terminal-bg);
-  border: 1px solid var(--border);
+  border: 1px solid var(--pane-border-idle);
   border-radius: var(--radius-sm);
   overflow: hidden;
   min-width: 0;
   min-height: 0;
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+
+.terminal-pane.pane-focused {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
+  z-index: 1;
+}
+
+.terminal-pane.pane-focused .pane-header {
+  background: color-mix(in srgb, var(--accent) 12%, var(--pane-header));
+  border-bottom-color: color-mix(in srgb, var(--accent) 35%, var(--border));
+}
+
+.terminal-pane.pane-focused .pane-title {
+  color: var(--text-primary);
+  font-weight: 500;
 }
 
 .pane-header {
@@ -309,11 +329,13 @@ body {
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
   user-select: none;
+  transition: background var(--transition), border-color var(--transition);
 }
 
 .pane-title {
   font-size: 11px;
   color: var(--text-secondary);
+  transition: color var(--transition), font-weight var(--transition);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -387,6 +409,8 @@ body {
   flex: 1 !important;
   min-width: 0 !important;
   min-height: 0 !important;
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
 }
 
 .terminal-body {
@@ -402,6 +426,8 @@ body {
 
 .terminal-body .xterm-viewport {
   overflow-y: auto !important;
+  /* 与 theme 背景一致，避免 vendor 默认 #000 与画布色差导致边缘发闷 */
+  background-color: var(--terminal-bg) !important;
 }
 
 /* ========== Layout: Side by Side ========== */
@@ -441,6 +467,11 @@ body {
   inset: 0;
   border-radius: 0;
   border: none;
+  box-shadow: none;
+}
+
+.layout-tabs .terminal-pane.pane-focused.active {
+  box-shadow: inset 0 0 0 1px var(--accent);
 }
 
 .layout-tabs .terminal-pane.active {
@@ -568,6 +599,235 @@ body {
   display: block;
 }
 
+/* ========== Drag to swap ========== */
+.pane-header.dragging-source {
+  opacity: 0.5;
+}
+
+.terminal-pane.drag-over {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.pane-header[draggable="true"] {
+  cursor: grab;
+}
+
+.pane-header[draggable="true"]:active {
+  cursor: grabbing;
+}
+
+.tab[draggable="true"] {
+  cursor: grab;
+}
+
+.tab[draggable="true"]:active {
+  cursor: grabbing;
+}
+
+.tab.drag-over {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+}
+
+/* ========== Shortcuts Button ========== */
+#btn-shortcuts {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition);
+  margin-right: 4px;
+}
+
+#btn-shortcuts:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+/* ========== Shortcuts Modal ========== */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-overlay.hidden {
+  display: none;
+}
+
+.modal {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  width: 400px;
+  max-width: calc(100vw - 32px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  font-size: 18px;
+  cursor: pointer;
+  line-height: 1;
+  transition: all var(--transition);
+}
+
+.modal-close:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.modal-body {
+  padding: 12px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.shortcut-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.shortcut-group-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 2px;
+}
+
+.shortcut-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.shortcut-desc {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.shortcut-key {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 11px;
+  color: var(--text-secondary);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 2px 7px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ========== Settings Modal ========== */
+#btn-settings {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background var(--transition), color var(--transition);
+}
+
+#btn-settings:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.settings-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.settings-group-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  margin-bottom: 2px;
+}
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.settings-label {
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  min-width: 70px;
+}
+
+input[type="range"]#input-font-size {
+  flex: 1;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+
+.settings-text-input {
+  flex: 1;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: 12px;
+  padding: 4px 8px;
+  outline: none;
+  transition: border-color var(--transition);
+}
+
+.settings-text-input:focus {
+  border-color: var(--accent);
+}
+
 /* ========== Keyboard shortcut hint ========== */
 @media (max-width: 600px) {
   .layout-btn span {