terminal.html•32.2 kB
<!DOCTYPE html>
<html class="theme-dark">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';">
<title>MCP Terminal</title>
<link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
<link rel="stylesheet" href="src/css/terminal.css" />
<style>
/* Additional styles for frameless window */
body {
overflow: hidden;
margin: 0;
padding: 0;
}
/* Titlebar/menu bar with explicit drag region */
.app-menu-bar {
-webkit-app-region: drag;
position: relative;
z-index: 100;
margin: 0;
padding: 0;
height: var(--app-bar-height);
background-color: var(--header-bg);
user-select: none;
border-bottom: 1px solid var(--border-color);
}
/* Make buttons and interactive elements not draggable */
.app-menu-bar .menu-item,
.app-menu-bar button,
.tab-controls,
.window-controls {
-webkit-app-region: no-drag;
}
/* Ensure window controls are visible in frameless mode */
.window-controls {
display: flex;
margin-left: auto;
}
/* Set explicit height for container with frameless mode */
.app-container {
height: 100vh;
display: flex;
flex-direction: column;
}
/* Ensure terminals container fills available space */
.terminals-container {
flex: 1;
overflow: hidden;
}
</style>
</head>
<body>
<div class="app-container">
<!-- Main Application Bar - This is our custom titlebar -->
<div class="app-menu-bar">
<!-- App Icon and Main Menu Items -->
<div class="app-menu-section">
<div class="app-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6C4 4.89543 4.89543 4 6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 9L11 13L7 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 17H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- Main Menu Items -->
<div class="menu-item" data-menu="mcp">MCP Terminal</div>
<div class="menu-item" data-menu="terminal">Terminal</div>
<div class="menu-item" data-menu="edit">Edit</div>
<div class="menu-item" data-menu="view">View</div>
<div class="menu-item" data-menu="window">Window</div>
<div class="menu-item" data-menu="help">Help</div>
</div>
<!-- Spacer to push window controls to right -->
<div class="flex-spacer"></div>
<!-- Tab Controls -->
<div class="tab-controls">
<button id="new-tab-btn" class="tab-control-button" title="New Tab">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button id="trash-btn" class="tab-control-button" title="Close Current Tab">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 6H21M9 6V4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V6M19 6V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 11V16M14 11V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button id="next-tab-btn" class="tab-control-button" title="Next Tab">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 6L15 12L9 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<!-- Window Controls -->
<div class="window-controls">
<button id="minimize-btn" class="window-control minimize" title="Minimize">
<svg width="12" height="12" viewBox="0 0 24 24">
<path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<button id="maximize-btn" class="window-control maximize" title="Maximize">
<svg width="12" height="12" viewBox="0 0 24 24">
<rect x="4" y="4" width="16" height="16" rx="1" stroke="currentColor" fill="none" stroke-width="2"/>
</svg>
</button>
<button id="close-btn" class="window-control close" title="Close">
<svg width="12" height="12" viewBox="0 0 24 24">
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
</div>
<!-- Tabs Bar -->
<div id="tabs" class="tabs">
<!-- Tabs will be generated here dynamically -->
<button id="new-tab-button" class="new-tab-button" title="New Tab">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<!-- Terminal Container -->
<div id="terminals-container" class="terminals-container">
<!-- Terminal instances will be created here dynamically -->
</div>
<!-- Status Bar -->
<div class="status-bar">
<div class="status-items-left">
<div id="session-id" class="status-item">
Session ID: <span id="session-id-value" class="copyable">Connecting...</span>
</div>
</div>
<div class="status-items-right">
<div id="terminal-size" class="status-item">80×24</div>
</div>
</div>
</div>
<!-- Dropdown Menus -->
<div id="dropdown-menus">
<!-- MCP Terminal Menu -->
<div id="mcp-menu" class="dropdown-menu" data-parent="mcp">
<div class="dropdown-item" id="menu-new-window">
<span class="menu-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 4V2M16 4V2M4 8H20M12 12V16M10 14H14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="menu-text">New Window</span>
<span class="menu-shortcut">Ctrl+Shift+N</span>
</div>
<div class="dropdown-separator"></div>
<div class="dropdown-item" id="menu-settings">
<span class="menu-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="menu-text">Settings</span>
</div>
<div class="dropdown-separator"></div>
<div class="dropdown-item" id="menu-exit">
<span class="menu-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="menu-text">Exit</span>
<span class="menu-shortcut">Alt+F4</span>
</div>
</div>
<!-- Terminal Menu -->
<div id="terminal-menu" class="dropdown-menu" data-parent="terminal">
<div class="dropdown-item" id="menu-new-tab">
<span class="menu-text">New Tab</span>
<span class="menu-shortcut">Ctrl+Shift+T</span>
</div>
<div class="dropdown-item" id="menu-close-tab">
<span class="menu-text">Close Tab</span>
<span class="menu-shortcut">Ctrl+W</span>
</div>
<div class="dropdown-separator"></div>
<div class="dropdown-item" id="menu-clear">
<span class="menu-text">Clear Terminal</span>
<span class="menu-shortcut">Ctrl+K</span>
</div>
<div class="dropdown-item" id="menu-reset">
<span class="menu-text">Reset Terminal</span>
</div>
<div class="dropdown-separator"></div>
<div class="dropdown-item" id="menu-send-output">
<span class="menu-text">Send Output Now</span>
</div>
<div class="dropdown-separator"></div>
<div class="dropdown-item" id="menu-copy-session-id">
<span class="menu-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 15L3 9L9 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15 3H21V9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 15V21H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 15V21H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="menu-text">Copy Session ID</span>
<span class="menu-shortcut">Ctrl+Alt+C</span>
</div>
<div class="dropdown-separator"></div>
<div class="dropdown-item" id="menu-next-tab">
<span class="menu-text">Next Tab</span>
<span class="menu-shortcut">Ctrl+Tab</span>
</div>
<div class="dropdown-item" id="menu-prev-tab">
<span class="menu-text">Previous Tab</span>
<span class="menu-shortcut">Ctrl+Shift+Tab</span>
</div>
</div>
<!-- Edit Menu -->
<div id="edit-menu" class="dropdown-menu" data-parent="edit">
<div class="dropdown-item" id="menu-copy">
<span class="menu-text">Copy</span>
<span class="menu-shortcut">Ctrl+C</span>
</div>
<div class="dropdown-item" id="menu-paste">
<span class="menu-text">Paste</span>
<span class="menu-shortcut">Ctrl+V</span>
</div>
<div class="dropdown-separator"></div>
<div class="dropdown-item" id="menu-select-all">
<span class="menu-text">Select All</span>
<span class="menu-shortcut">Ctrl+A</span>
</div>
<div class="dropdown-item" id="menu-find">
<span class="menu-text">Find</span>
<span class="menu-shortcut">Ctrl+F</span>
</div>
</div>
<!-- View Menu -->
<div id="view-menu" class="dropdown-menu" data-parent="view">
<div class="dropdown-item" id="menu-toggle-theme">
<span class="menu-text">Toggle Theme</span>
</div>
<div class="dropdown-separator"></div>
<div class="dropdown-item" id="menu-increase-font">
<span class="menu-text">Increase Font Size</span>
<span class="menu-shortcut">Ctrl++</span>
</div>
<div class="dropdown-item" id="menu-decrease-font">
<span class="menu-text">Decrease Font Size</span>
<span class="menu-shortcut">Ctrl+-</span>
</div>
<div class="dropdown-separator"></div>
<div class="dropdown-item" id="menu-toggle-menu-bar">
<span class="menu-text">Toggle Menu Bar</span>
<span class="menu-shortcut">Alt</span>
</div>
</div>
<!-- Window Menu -->
<div id="window-menu" class="dropdown-menu" data-parent="window">
<div class="dropdown-item" id="menu-fullscreen">
<span class="menu-text">Toggle Fullscreen</span>
<span class="menu-shortcut">F11</span>
</div>
<div class="dropdown-separator"></div>
<div class="dropdown-item submenu-trigger" data-submenu="developer-tools">
<span class="menu-text">Developer Tools</span>
<span class="submenu-arrow">▶</span>
</div>
</div>
<!-- Developer Tools Submenu -->
<div id="developer-tools-menu" class="dropdown-menu submenu" data-parent="developer-tools">
<div class="dropdown-item" id="menu-toggle-dev-tools">
<span class="menu-text">Toggle Developer Tools</span>
<span class="menu-shortcut">F12</span>
</div>
<div class="dropdown-item" id="menu-reload">
<span class="menu-text">Reload Window</span>
<span class="menu-shortcut">Ctrl+R</span>
</div>
<div class="dropdown-item" id="menu-force-reload">
<span class="menu-text">Force Reload</span>
<span class="menu-shortcut">Ctrl+Shift+R</span>
</div>
</div>
<!-- Help Menu -->
<div id="help-menu" class="dropdown-menu" data-parent="help">
<div class="dropdown-item" id="menu-keyboard-shortcuts">
<span class="menu-text">Keyboard Shortcuts</span>
</div>
<div class="dropdown-separator"></div>
<div class="dropdown-item" id="menu-about">
<span class="menu-text">About MCP Terminal</span>
</div>
</div>
</div>
<!-- Settings Modal -->
<div id="settings-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Terminal Settings</h2>
<button id="settings-close" class="modal-close">×</button>
</div>
<div class="modal-body">
<div class="settings-tabs">
<div class="settings-tab-header">
<button class="settings-tab-btn active" data-tab="appearance">Appearance</button>
<button class="settings-tab-btn" data-tab="terminal">Terminal</button>
<button class="settings-tab-btn" data-tab="keyboard">Keyboard</button>
<button class="settings-tab-btn" data-tab="advanced">Advanced</button>
</div>
<div class="settings-tab-content">
<!-- Appearance Tab -->
<div id="appearance-tab" class="settings-tab-pane active">
<div class="settings-section">
<h3>Theme</h3>
<div class="setting-item">
<label for="theme-select">Color Theme</label>
<select id="theme-select" class="setting-input">
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>
</div>
</div>
<div class="settings-section">
<h3>Font</h3>
<div class="setting-item">
<label for="font-family">Font Family</label>
<select id="font-family" class="setting-input">
<option value="Consolas, 'Cascadia Mono', 'Source Code Pro', monospace">Consolas</option>
<option value="'Cascadia Mono', Consolas, 'Source Code Pro', monospace">Cascadia Mono</option>
<option value="'Source Code Pro', Consolas, monospace">Source Code Pro</option>
<option value="'Fira Code', monospace">Fira Code</option>
<option value="monospace">Monospace</option>
</select>
</div>
<div class="setting-item">
<label for="font-size">Font Size</label>
<div class="setting-with-buttons">
<button id="decrease-font-btn" class="icon-button">-</button>
<input type="number" id="font-size" class="setting-input" min="8" max="32" value="14">
<button id="increase-font-btn" class="icon-button">+</button>
</div>
</div>
<div class="setting-item">
<label for="cursor-style">Cursor Style</label>
<select id="cursor-style" class="setting-input">
<option value="block">Block</option>
<option value="underline">Underline</option>
<option value="bar">Bar</option>
</select>
</div>
<div class="setting-item">
<label for="cursor-blink">Cursor Blink</label>
<div class="toggle-switch">
<input type="checkbox" id="cursor-blink" checked>
<span class="toggle-slider"></span>
</div>
</div>
</div>
</div>
<!-- Terminal Tab -->
<div id="terminal-tab" class="settings-tab-pane">
<div class="settings-section">
<h3>Buffer</h3>
<div class="setting-item">
<label for="scrollback">Scrollback Buffer Lines</label>
<input type="number" id="scrollback" class="setting-input" min="500" max="50000" value="5000">
</div>
</div>
<div class="settings-section">
<h3>Behavior</h3>
<div class="setting-item">
<label for="copy-on-select">Copy on Select</label>
<div class="toggle-switch">
<input type="checkbox" id="copy-on-select">
<span class="toggle-slider"></span>
</div>
</div>
<div class="setting-item">
<label for="right-click-behavior">Right Click Behavior</label>
<select id="right-click-behavior" class="setting-input">
<option value="paste">Paste</option>
<option value="context" selected>Context Menu</option>
<option value="select">Select Word</option>
</select>
</div>
<div class="setting-item">
<label for="word-separator">Word Separator Characters</label>
<input type="text" id="word-separator" class="setting-input" value=" ()[]{}'\",.;:">
</div>
</div>
</div>
<!-- Keyboard Tab -->
<div id="keyboard-tab" class="settings-tab-pane">
<div class="settings-section">
<h3>Shortcuts</h3>
<div class="setting-item">
<label for="copy-shortcut">Copy</label>
<input type="text" id="copy-shortcut" class="setting-input" value="Ctrl+C" readonly>
</div>
<div class="setting-item">
<label for="paste-shortcut">Paste</label>
<input type="text" id="paste-shortcut" class="setting-input" value="Ctrl+V" readonly>
</div>
<div class="setting-item">
<label for="find-shortcut">Find</label>
<input type="text" id="find-shortcut" class="setting-input" value="Ctrl+F" readonly>
</div>
<div class="setting-item">
<label for="new-tab-shortcut">New Tab</label>
<input type="text" id="new-tab-shortcut" class="setting-input" value="Ctrl+Shift+T" readonly>
</div>
<div class="setting-item">
<label for="close-tab-shortcut">Close Tab</label>
<input type="text" id="close-tab-shortcut" class="setting-input" value="Ctrl+W" readonly>
</div>
</div>
<p class="settings-note">Note: Keyboard shortcuts cannot be modified in this version.</p>
</div>
<!-- Advanced Tab -->
<div id="advanced-tab" class="settings-tab-pane">
<div class="settings-section">
<h3>Terminal Options</h3>
<div class="setting-item">
<label for="allow-transparency">Allow Transparency</label>
<div class="toggle-switch">
<input type="checkbox" id="allow-transparency" checked>
<span class="toggle-slider"></span>
</div>
</div>
<div class="setting-item">
<label for="renderer-type">Renderer Type</label>
<select id="renderer-type" class="setting-input">
<option value="canvas" selected>Canvas</option>
<option value="dom">DOM</option>
</select>
</div>
<div class="setting-item">
<label for="mac-option-is-meta">Mac Option as Meta Key</label>
<div class="toggle-switch">
<input type="checkbox" id="mac-option-is-meta" checked>
<span class="toggle-slider"></span>
</div>
</div>
</div>
<div class="settings-section">
<h3>Start-Up</h3>
<div class="setting-item">
<label for="restore-tabs">Restore Previous Tabs on Start</label>
<div class="toggle-switch">
<input type="checkbox" id="restore-tabs">
<span class="toggle-slider"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="settings-reset" class="btn btn-secondary">Reset to Defaults</button>
<button id="settings-save" class="btn btn-primary">Save Settings</button>
</div>
</div>
</div>
<!-- Context Menu -->
<div id="context-menu" class="context-menu">
<div class="context-menu-item" data-action="copy">
<span class="menu-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5H6C4.89543 5 4 5.89543 4 7V19C4 20.1046 4.89543 21 6 21H16C17.1046 21 18 20.1046 18 19V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 13V15C8 16.1046 8.89543 17 10 17H15M15 17L13 15M15 17L13 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="10" y="3" width="10" height="12" rx="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="menu-text">Copy</span>
</div>
<div class="context-menu-item" data-action="paste">
<span class="menu-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5H6C4.89543 5 4 5.89543 4 7V19C4 20.1046 4.89543 21 6 21H16C17.1046 21 18 20.1046 18 19V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 13H15M15 13H17M15 13V11M15 13V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="10" y="3" width="10" height="12" rx="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="menu-text">Paste</span>
</div>
<div class="context-menu-separator"></div>
<div class="context-menu-item" data-action="clear">
<span class="menu-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 8V18C5 19.1046 5.89543 20 7 20H17C18.1046 20 19 19.1046 19 18V8M14 4.5V6C14 6.55228 14.4477 7 15 7H19M14 4.5V4C14 3.44772 13.5523 3 13 3H7C5.89543 3 5 3.89543 5 5V6C5 6.55228 5.44772 7 6 7H15M14 4.5L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 11L14 15M14 11L10 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="menu-text">Clear</span>
</div>
<div class="context-menu-item" data-action="send-output">
<span class="menu-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 14L21 3M21 3H14M21 3V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="menu-text">Send Output Now</span>
</div>
<div class="context-menu-separator"></div>
<div class="context-menu-item" data-action="new-tab">
<span class="menu-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="menu-text">New Tab</span>
</div>
<div class="context-menu-separator"></div>
<div class="context-menu-item" data-action="dev-tools">
<span class="menu-icon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 14L4 8L10 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 10L20 16L14 22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 8L6 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="menu-text">Inspect Element</span>
</div>
</div>
<!-- Search Panel -->
<div id="search-panel" class="search-panel">
<div class="search-input-wrapper">
<svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<input type="text" id="search-input" placeholder="Find in terminal..." />
</div>
<div class="search-controls">
<button id="search-prev-btn" title="Previous match">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button id="search-next-btn" title="Next match">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 6L15 12L9 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="search-divider"></div>
<button id="search-close-btn" title="Close">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
<script src="node_modules/xterm/lib/xterm.js"></script>
<script src="node_modules/xterm-addon-fit/lib/xterm-addon-fit.js"></script>
<script src="node_modules/xterm-addon-search/lib/xterm-addon-search.js"></script>
<script src="node_modules/xterm-addon-web-links/lib/xterm-addon-web-links.js"></script>
<script src="node_modules/xterm-addon-serialize/lib/xterm-addon-serialize.js"></script>
<script src="src/js/terminal.js" type="module"></script>
</body>
</html>
