webtun 1.5.0 → 1.5.2

package/public/index.html

@@ -4,41 +4,48 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <meta name="theme-color" content="#1a1b26">
 <title>WebTun</title>
+<link rel="icon" href="/favicon.png" type="image/png">
 <link rel="manifest" href="/manifest.json">
 <link rel="apple-touch-icon" href="/icon-192.png">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-search@0.15.0/lib/addon-search.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-unicode11@0.7.0/lib/addon-unicode11.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-webgl@0.18.1/lib/addon-webgl.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/marked@15.0.7/marked.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.4/dist/purify.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-search@0.15.0/lib/addon-search.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-unicode11@0.7.0/lib/addon-unicode11.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-webgl@0.18.0/lib/addon-webgl.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/marked@15.0.7/marked.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/dompurify@3.2.4/dist/purify.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/lib/codemirror.min.css">
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/lib/codemirror.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/addon/edit/matchbrackets.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/javascript/javascript.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/python/python.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/htmlmixed/htmlmixed.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/xml/xml.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/css/css.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/clike/clike.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/shell/shell.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/markdown/markdown.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/yaml/yaml.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/sql/sql.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/go/go.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/rust/rust.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/properties/properties.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/lib/codemirror.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/addon/edit/matchbrackets.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/javascript/javascript.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/python/python.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/htmlmixed/htmlmixed.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/xml/xml.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/css/css.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/clike/clike.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/shell/shell.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/markdown/markdown.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/yaml/yaml.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/sql/sql.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/go/go.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/addon/mode/simple.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/rust/rust.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/properties/properties.min.js"></script>
 <style>
 /* ═══════════════════════════════════════════════════════
    CSS VARIABLES / THEMES
    ═══════════════════════════════════════════════════════ */
 :root {
+  color-scheme: dark;
   --bg: #1a1b26;
   --bg2: #16161e;
   --bg3: #24283b;
@@ -46,6 +53,7 @@
   --border: #3b3f52;
   --fg: #c0caf5;
   --fg2: #787c99;
+  --fg3: #565f89;
   --accent: #7aa2f7;
   --accent2: #bb9af7;
   --green: #9ece6a;
@@ -71,43 +79,65 @@
   --btn-sm: 26px;
   --btn-md: 32px;
   --btn-lg: 36px;
+  --z-header: 10;
+  --z-drawer: 15;
+  --z-popover: 25;
+  --z-sidebar: 30;
+  --z-drop: 50;
+  --z-overlay: 400;
+  --z-toast: 450;
+  --z-menu: 500;
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --transition-fast: 0.15s;
   --transition-normal: 0.2s;
   --transition-slow: 0.3s;
-  --font: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
+  --font: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
+  --font-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+}
+[data-theme="tokyonight"] {
+  color-scheme: dark;
+  --bg: #1a1b26; --bg2: #16161e; --bg3: #24283b; --bg4: #2a2d3e;
+  --border: #3b3f52; --fg: #c0caf5; --fg2: #787c99; --fg3: #565f89;
+  --accent: #7aa2f7; --accent2: #bb9af7; --green: #9ece6a;
+  --red: #f7768e; --yellow: #e0af68; --cyan: #7dcfff;
+  --shadow-color: rgba(0,0,0,0.6);
 }
 [data-theme="light"] {
+  color-scheme: light;
   --bg: #f9f9fb; --bg2: #eeeef2; --bg3: #e2e2e8; --bg4: #d5d5de;
-  --border: #c8c8d4; --fg: #2a2a3a;   --fg2: #3a3a5a;
-  --accent: #4060d0; --accent2: #8050c0; --green: #3a8a2a;
-  --red: #c03050; --yellow: #a07010; --cyan: #2080a0;
+  --border: #c8c8d4; --fg: #1f1f30;   --fg2: #2b2b45; --fg3: #5d5d78;
+  --accent: #4060d0; --accent2: #8050c0; --green: #2f7d1f;
+  --red: #c03050; --yellow: #9a6a00; --cyan: #1e7590;
   --shadow-color: rgba(0,0,0,0.12);
 }
 [data-theme="solarized"] {
+  color-scheme: dark;
   --bg: #002b36; --bg2: #073642; --bg3: #083f4d; --bg4: #0a4a5a;
-  --border: #1a5a6a; --fg: #93a1a1; --fg2: #586e75;
+  --border: #1a5a6a; --fg: #93a1a1; --fg2: #586e75; --fg3: #486168;
   --accent: #268bd2; --accent2: #6c71c4; --green: #859900;
   --red: #dc322f; --yellow: #b58900; --cyan: #2aa198;
   --shadow-color: rgba(0,0,0,0.6);
 }
 [data-theme="gruvbox"] {
+  color-scheme: dark;
   --bg: #282828; --bg2: #1d2021; --bg3: #32302f; --bg4: #3c3836;
-  --border: #504945; --fg: #ebdbb2; --fg2: #928374;
+  --border: #504945; --fg: #ebdbb2; --fg2: #928374; --fg3: #7c6f64;
   --accent: #83a598; --accent2: #d3869b; --green: #b8bb26;
   --red: #fb4934; --yellow: #fabd2f; --cyan: #8ec07c;
   --shadow-color: rgba(0,0,0,0.6);
 }
 [data-theme="dracula"] {
+  color-scheme: dark;
   --bg: #282a36; --bg2: #1e1f29; --bg3: #2f3240; --bg4: #373a50;
-  --border: #44475a; --fg: #f8f8f2; --fg2: #6272a4;
+  --border: #44475a; --fg: #f8f8f2; --fg2: #6272a4; --fg3: #4f5b84;
   --accent: #bd93f9; --accent2: #ff79c6; --green: #50fa7b;
   --red: #ff5555; --yellow: #f1fa8c; --cyan: #8be9fd;
   --shadow-color: rgba(0,0,0,0.6);
 }
 [data-theme="monokai"] {
+  color-scheme: dark;
   --bg: #272822; --bg2: #1e1f1c; --bg3: #31322b; --bg4: #3a3c32;
-  --border: #49483e; --fg: #f8f8f2; --fg2: #75715e;
+  --border: #49483e; --fg: #f8f8f2; --fg2: #75715e; --fg3: #5d5a4e;
   --accent: #a6e22e; --accent2: #ae81ff; --green: #a6e22e;
   --red: #f92672; --yellow: #e6db74; --cyan: #66d9e8;
   --shadow-color: rgba(0,0,0,0.6);
@@ -117,10 +147,10 @@
    RESET & BASE
    ═══════════════════════════════════════════════════════ */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 13px; padding-bottom: env(safe-area-inset-bottom); scroll-behavior: smooth; touch-action: manipulation; -webkit-overflow-scrolling: touch; }
+html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--font-ui); font-size: 13px; padding-bottom: env(safe-area-inset-bottom); touch-action: manipulation; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; }
 
 button { background: none; border: none; cursor: pointer; color: inherit; font-family: inherit; }
-input, select, textarea { font-family: var(--font); background: var(--bg3); border: 1px solid var(--border); color: var(--fg); border-radius: var(--radius); padding: 6px 10px; outline: none; font-size: 16px; }
+input, select, textarea { font-family: var(--font-ui); background: var(--bg3); border: 1px solid var(--border); color: var(--fg); border-radius: var(--radius); padding: 6px 10px; outline: none; font-size: 16px; }
 @media (pointer: coarse) { input, select, textarea { font-size: 16px; } }
 input:focus, select:focus, textarea:focus { border-color: var(--accent); }
 a { color: var(--accent); text-decoration: none; }
@@ -138,17 +168,38 @@ a { color: var(--accent); text-decoration: none; }
   #new-tab-btn { width: 36px; height: 36px; }
   .icon-btn { width: 40px; height: 40px; }
   .file-action-btn { width: 36px; height: 36px; }
+  .search-btn { width: 32px; height: 32px; }
+  .search-btn#search-case-btn { width: 28px; height: 28px; line-height: 28px; }
 }
 svg { display: block; }
 
+/* Code/path surfaces stay monospace while the chrome uses the UI font */
+.file-name,
+#path-input,
+#file-breadcrumb,
+#editor-filename,
+.tunnel-url,
+.cmd-lib-item .cmd-lib-cmd,
+.cmd-hist-item .cmd-hist-cmd { font-family: var(--font); }
+
+/* Skip link for keyboard/screen-reader users */
+.skip-link {
+  position: fixed; top: -40px; left: 8px; z-index: 9999;
+  background: var(--accent); color: var(--bg); padding: 6px 14px;
+  border-radius: 0 0 var(--radius) var(--radius); font-size: 12px;
+  font-family: var(--font-ui); font-weight: 600;
+  transition: top var(--transition-fast) ease;
+}
+.skip-link:focus { top: 0; }
+
 /* ═══════════════════════════════════════════════════════
    LAYOUT
    ═══════════════════════════════════════════════════════ */
 #app { display: flex; flex-direction: column; height: 100dvh; }
-#header { display: flex; align-items: center; height: var(--header-h); background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 8px; padding-top: env(safe-area-inset-top, 0px); gap: 6px; flex-shrink: 0; z-index: 10; position: relative; }
+#header { display: flex; align-items: center; height: var(--header-h); background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 8px; padding-top: env(safe-area-inset-top, 0px); gap: 6px; flex-shrink: 0; z-index: var(--z-header); position: relative; }
 
 /* Upload progress bar in header */
-#upload-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 0; background: var(--bg3); z-index: 20; overflow: visible; transition: height var(--transition-normal) ease; }
+#upload-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 0; background: var(--bg3); z-index: calc(var(--z-header) + 1); overflow: visible; transition: height var(--transition-normal) ease; }
 #upload-progress.active { height: 3px; }
 #upload-progress-bar { height: 100%; width: 0%; background: var(--accent); transition: width var(--transition-slow) ease; border-radius: 0 2px 2px 0; }
 #upload-progress.success #upload-progress-bar { background: var(--green); }
@@ -160,13 +211,26 @@ svg { display: block; }
 #sidebar.dragging { transition: none; }
 #sidebar.hidden { width: 0 !important; }
 #content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; position: relative; }
-#tab-bar { display: flex; align-items: center; height: var(--tab-h); background: var(--bg2); border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; flex-shrink: 0; gap: 2px; padding: 0 4px; mask-image: linear-gradient(to right, black calc(100% - 20px), transparent); -webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent); }
+#tab-bar { display: flex; align-items: center; height: var(--tab-h); background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 2px; padding: 0 4px; }
+#tab-scroll { display: flex; align-items: center; gap: 2px; height: 100%; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; mask-image: linear-gradient(to right, black calc(100% - 20px), transparent); -webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent); scrollbar-width: none; }
+#tab-scroll::-webkit-scrollbar { height: 3px; }
 #tab-bar.drag-over, #new-tab-btn.drag-over { background: var(--accent, #00c853); opacity: 0.15; }
-#tab-bar::-webkit-scrollbar { height: 3px; }
 #terminals { flex: 1; position: relative; overflow: hidden; }
 .term-wrapper { position: absolute; inset: 0; padding: 4px; display: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: none; }
 .term-wrapper.active { display: flex; }
 .xterm { flex: 1; }
+.term-loading {
+  position: absolute; inset: 0; z-index: 3;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
+  background: var(--bg); color: var(--fg2); font-size: 12px;
+  font-family: var(--font-ui); pointer-events: none;
+}
+.term-loading .tl-spinner {
+  width: 22px; height: 22px; border-radius: 50%;
+  border: 2px solid var(--bg4); border-top-color: var(--accent);
+  animation: reconnectSpin 0.8s linear infinite;
+}
+.term-loading.hidden { display: none; }
 .xterm-viewport { border-radius: 0; }
 .term-bell-flash { animation: bellFlash 0.15s ease-out; }
 @keyframes bellFlash { 0% { filter: brightness(1.8); } 100% { filter: brightness(1); } }
@@ -252,7 +316,7 @@ svg { display: block; }
   cursor: row-resize;
   flex-shrink: 0;
   position: relative;
-  z-index: 10;
+  z-index: var(--z-header);
   background: transparent;
   transition: background var(--transition-fast);
 }
@@ -272,7 +336,7 @@ svg { display: block; }
   display: flex; flex-direction: column;
   transform: translateX(100%);
   transition: var(--transition-normal);
-  z-index: 15;
+  z-index: var(--z-drawer);
 }
 #settings-panel.open {
   transform: translateX(0);
@@ -305,17 +369,27 @@ svg { display: block; }
 .keep-awake input { display: none; }
 .keep-awake-box { width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 4px; position: relative; transition: var(--transition-normal) ease; background: var(--bg2); }
 .keep-awake:hover .keep-awake-box { border-color: var(--fg2); }
-.keep-awake-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg); position: absolute; top: 4px; left: 3px; transition: var(--transition-normal) ease; }
+.keep-awake-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg); position: absolute; top: 4px; left: 3px; transition: left var(--transition-normal) ease; }
 .keep-awake input:checked + .keep-awake-box { border-color: var(--accent); background: var(--accent); }
-.keep-awake input:checked + .keep-awake-box .keep-awake-dot { background: var(--bg); left: calc(100% - 11px); animation: keepawake-bounce 0.8s ease-in-out infinite; }
-
-@keyframes keepawake-bounce {
-  0%, 100% { left: 3px; }
-  50% { left: calc(100% - 11px); }
-}
+.keep-awake input:checked + .keep-awake-box .keep-awake-dot { background: var(--bg); left: calc(100% - 11px); }
 
 #hostname-badge { font-size: 11px; color: var(--fg2); padding: 2px 8px; background: var(--bg3); border-radius: 999px; }
+#more-btn { display: none; }
+#more-menu { position: absolute; top: calc(100% + 4px); right: env(safe-area-inset-right, 0px); background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 32px var(--shadow-color); padding: 4px; min-width: 190px; display: none; flex-direction: column; gap: 2px; z-index: var(--z-popover); }
+#more-menu.open { display: flex; }
+.mm-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; font-size: 12px; font-family: var(--font); border-radius: var(--radius-sm); color: var(--fg); text-align: left; width: 100%; cursor: pointer; }
+.mm-item:hover, .mm-item:focus-visible { background: var(--bg4); color: var(--fg); outline: none; }
+.tunnel-row { padding: 6px 0; border-bottom: 1px solid var(--border); }
+.tunnel-label { font-size: 10px; color: var(--fg2); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tunnel-inner { display: flex; align-items: center; gap: 5px; min-width: 0; }
+.tunnel-url { font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tunnel-status, .tunnel-target { font-size: 9px; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; }
+.tunnel-btn { width: 22px; height: 22px; flex-shrink: 0; }
+.tunnel-btn.stop { color: var(--red); }
 #conn-status { transition: background var(--transition-slow); }
+.reconnect-spinner { display: inline-flex; vertical-align: -1px; margin-right: 4px; }
+.reconnect-spinner svg { animation: reconnectSpin 1s linear infinite; }
+@keyframes reconnectSpin { to { transform: rotate(360deg); } }
 
 /* ═══════════════════════════════════════════════════════
    TABS
@@ -338,11 +412,24 @@ svg { display: block; }
    ═══════════════════════════════════════════════════════ */
 #sidebar-header { display: flex; align-items: center; padding: 6px 8px; gap: 4px; border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; min-height: 40px; height: auto; }
 #sidebar-header input { flex: 1 1 60px; min-width: 40px; height: 26px; font-size: 12px; }
-#file-list-wrap { flex: 1; overflow-y: auto; min-height: 0; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
+#file-list-wrap { flex: 1; overflow-y: auto; min-height: 0; touch-action: pan-y; -webkit-overflow-scrolling: touch; position: relative; }
+#ptr-indicator { position: absolute; top: -40px; left: 0; right: 0; height: 36px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--fg2); opacity: 0; pointer-events: none; }
+#ptr-indicator .ptr-arrow { display: inline-flex; }
+#ptr-indicator .ptr-arrow svg { transition: transform 0.2s ease; }
+#ptr-indicator.release .ptr-arrow svg { transform: rotate(180deg); }
+#ptr-indicator.release .ptr-text { color: var(--accent); }
+/* Loading state: dim content + indeterminate progress bar */
+#file-list-wrap.loading #file-list { opacity: 0.45; transition: opacity var(--transition-fast); }
+#file-list-wrap.loading::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--bg3); z-index: 5; }
+#file-list-wrap.loading::after { content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 2px; background: var(--accent); border-radius: 0 2px 2px 0; z-index: 6; animation: fileListProgress 0.9s ease-in-out infinite; }
+@keyframes fileListProgress { from { left: -30%; } to { left: 100%; } }
 .file-list-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; color: var(--fg2); font-size: 13px; text-align: center; gap: 8px; }
 .file-list-empty svg { opacity: 0.4; }
-#file-breadcrumb { padding: 8px 10px; font-size: 12px; color: var(--fg2); border-bottom: 1px solid var(--border); word-break: break-all; line-height: 1.8; flex-shrink: 0; }
-#file-breadcrumb a { transition: background var(--transition-fast); border-radius: var(--radius-sm); padding: 4px 6px !important; }
+.empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
+.empty-actions .btn { font-size: 12px; padding: 4px 12px; }
+#file-breadcrumb { padding: 8px 10px; font-size: 12px; color: var(--fg2); border-bottom: 1px solid var(--border); white-space: nowrap; overflow-x: auto; line-height: 1.8; flex-shrink: 0; scrollbar-width: none; }
+#file-breadcrumb::-webkit-scrollbar { display: none; }
+#file-breadcrumb a { transition: background var(--transition-fast); border-radius: var(--radius-sm); padding: 4px 6px !important; display: inline-block; }
 #file-breadcrumb a:hover { background: var(--bg3); }
 @media (pointer: coarse) {
   #file-breadcrumb { padding: 10px 12px; font-size: 13px; }
@@ -351,6 +438,9 @@ svg { display: block; }
 .file-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer; border-bottom: 1px solid transparent; font-size: 12px; position: relative; user-select: none; }
 .file-item:hover { background: var(--bg3); }
 .file-item.selected { background: var(--bg4); }
+.file-item.focused { background: var(--bg3); outline: 1px solid var(--accent); outline-offset: -1px; }
+.file-item .file-ellipsis { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-sm); color: var(--fg2); opacity: 0.45; flex-shrink: 0; }
+.file-item:hover .file-ellipsis { opacity: 1; }
 .file-icon { font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
 .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: text; -webkit-user-select: text; }
 .file-size { font-size: 10px; color: var(--fg2); flex-shrink: 0; user-select: text; -webkit-user-select: text; }
@@ -375,7 +465,7 @@ svg { display: block; }
 /* Sidebar resize handle */
 .sidebar-resize-handle {
   position: absolute; right: 0; top: 0; bottom: 0;
-  width: 5px; cursor: col-resize; z-index: 10;
+  width: 5px; cursor: col-resize; z-index: var(--z-header);
   background: transparent; transition: background var(--transition-fast); flex-shrink: 0;
 }
 .sidebar-resize-handle:hover,
@@ -429,9 +519,10 @@ svg { display: block; }
 /* ═══════════════════════════════════════════════════════
    SEARCH BAR
    ═══════════════════════════════════════════════════════ */
-#search-bar { position: absolute; top: 8px; right: 12px; z-index: 20; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; display: none; align-items: center; gap: 6px; box-shadow: 0 4px 16px var(--shadow-color); }
+#search-bar { position: absolute; top: 8px; right: 12px; z-index: var(--z-popover); background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; display: none; align-items: center; gap: 6px; box-shadow: 0 4px 16px var(--shadow-color); }
 #search-bar.open { display: flex; }
 #search-input { width: 200px; height: 26px; }
+@media (max-width: 480px) { #search-bar { left: 8px; right: 8px; } #search-input { flex: 1; width: auto; min-width: 0; } }
 .search-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--fg2); }
 .search-btn:hover { background: var(--bg4); color: var(--fg); }
 .search-btn#search-case-btn { font-size: 11px; font-weight: bold; width: 22px; height: 22px; line-height: 22px; }
@@ -441,7 +532,7 @@ svg { display: block; }
 /* ═══════════════════════════════════════════════════════
    OVERLAY
    ═══════════════════════════════════════════════════════ */
-.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 400; justify-content: center; align-items: center; backdrop-filter: blur(4px); will-change: backdrop-filter; }
+.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: var(--z-overlay); justify-content: center; align-items: center; backdrop-filter: blur(4px); will-change: backdrop-filter; }
 @media (prefers-reduced-transparency: reduce) { .overlay { backdrop-filter: none; } }
 .overlay.open { display: flex; }
 .modal { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; min-width: 320px; max-width: 90vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 40px var(--shadow-color); }
@@ -453,6 +544,11 @@ svg { display: block; }
 .modal-row label { display: block; font-size: 11px; color: var(--fg2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
 .modal-row input, .modal-row select { width: 100%; }
 .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
+.shortcuts-table { width: 100%; border-collapse: collapse; }
+.shortcuts-table td { padding: 6px 0; font-size: 12.5px; color: var(--fg); border-bottom: 1px solid var(--border); }
+.shortcuts-table td:first-child { color: var(--fg2); white-space: nowrap; padding-right: 16px; width: 1%; }
+.shortcuts-table tr:last-child td { border-bottom: none; }
+kbd { display: inline-block; padding: 1px 6px; font-family: var(--font); font-size: 11px; color: var(--fg); background: var(--bg1); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; }
 .btn { height: 34px; padding: 0 16px; border-radius: var(--radius); font-size: 13px; font-family: var(--font); cursor: pointer; transition: all var(--transition-fast); border: 1px solid transparent; }
 #conflict-modal.modal-sm { width: 380px; }
 #conflict-heading { font-size: 15px; margin-bottom: 8px; color: var(--fg); }
@@ -462,11 +558,22 @@ svg { display: block; }
 #conflict-actions { flex-wrap: wrap; gap: 6px; }
 #conflict-replace, #conflict-merge, #conflict-keep-both, #conflict-skip, #conflict-cancel { font-size: 12px; height: var(--btn-md); }
 .btn-primary { background: var(--accent); color: var(--bg); }
-.btn-primary:hover { filter: brightness(1.1); }
+.btn-primary:hover { filter: brightness(1.06); }
 .btn-ghost { background: var(--bg3); color: var(--fg); border-color: var(--border); }
 .btn-ghost:hover { background: var(--bg4); }
 .btn-danger { background: var(--red); color: white; }
-.btn-danger:hover { filter: brightness(1.1); }
+.btn-danger:hover { filter: brightness(1.06); }
+.btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger):hover { background: var(--bg4); }
+.btn:active { filter: brightness(0.95); }
+.btn.loading { opacity: 0.65; pointer-events: none; position: relative; color: transparent; }
+.btn.loading::after {
+  content: ''; position: absolute; inset: 0; margin: auto;
+  width: 14px; height: 14px; border-radius: 50%;
+  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
+  border-top-color: currentColor; animation: reconnectSpin 0.7s linear infinite;
+}
+.field-error { display: none; color: var(--red); font-size: 11px; margin-top: 5px; line-height: 1.4; }
+.field-error.show { display: block; }
 
 /* ═══════════════════════════════════════════════════════
    PIN SCREEN
@@ -485,7 +592,10 @@ svg { display: block; }
    EDITOR
    ═══════════════════════════════════════════════════════ */
 #editor-header { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: var(--header-h); border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg2); }
-#editor-filename { flex: 1; color: var(--fg); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#editor-filename-wrap { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; }
+#editor-filename { color: var(--fg); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.editor-dirty-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; display: none; }
+#editor-view.editor-dirty .editor-dirty-dot { display: inline-block; }
 #editor-status { font-size: 11px; color: var(--fg2); }
 #editor-area { flex: 1; overflow: hidden; position: relative; }
 #editor-preview { width: 100%; height: 100%; overflow-y: auto; padding: 12px 24px; font-size: 14px; line-height: 1.7; color: var(--fg); display: none; box-sizing: border-box; }
@@ -550,7 +660,7 @@ svg { display: block; }
 /* ═══════════════════════════════════════════════════════
     CONTEXT MENU
    ═══════════════════════════════════════════════════════ */
-#ctx-menu { position: fixed; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 20px var(--shadow-color); z-index: 500; display: none; min-width: 160px; overflow: hidden; max-height: calc(100vh - 16px); overflow-y: auto; }
+#ctx-menu { position: fixed; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 20px var(--shadow-color); z-index: var(--z-menu); display: none; min-width: 160px; overflow: hidden; max-height: calc(100vh - 16px); overflow-y: auto; }
 @media (max-width: 360px) { #ctx-menu { min-width: 140px; max-width: calc(100vw - 16px); font-size: 11px; } }
 #ctx-menu.open { display: block; }
 .ctx-item { padding: 8px 14px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
@@ -566,11 +676,16 @@ svg { display: block; }
 /* ═══════════════════════════════════════════════════════
    TOAST
    ═══════════════════════════════════════════════════════ */
-#toast-container { position: fixed; bottom: calc(var(--mobilekey-h) + 12px + env(safe-area-inset-bottom, 0px)); right: 16px; left: 16px; z-index: 450; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; transition: bottom var(--transition-normal); }
+#toast-container { position: fixed; bottom: calc(var(--mobilekey-h) + 12px + env(safe-area-inset-bottom, 0px)); right: 16px; left: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; transition: bottom var(--transition-normal); }
 #toast-container.keys-hidden { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
 #toast-container.banner-visible { bottom: calc(var(--mobilekey-h) + 60px + env(safe-area-inset-bottom, 0px)); }
 #toast-container.keys-hidden.banner-visible { bottom: 60px; }
-.toast { padding: 10px 16px; background: var(--bg4); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; color: var(--fg); box-shadow: 0 4px 16px var(--shadow-color); animation: slideIn 0.2s ease; max-width: min(400px, calc(100vw - 32px)); }
+.toast { padding: 10px 16px; background: var(--bg4); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; color: var(--fg); box-shadow: 0 4px 16px var(--shadow-color); animation: slideIn 0.2s ease; max-width: min(400px, calc(100vw - 32px)); display: flex; align-items: center; gap: 8px; }
+.toast svg { flex-shrink: 0; color: var(--fg2); }
+.toast.success svg { color: var(--green); }
+.toast.error svg { color: var(--red); }
+.toast.warning svg { color: var(--yellow); }
+.toast.info svg { color: var(--accent); }
 .toast.success { border-left: 3px solid var(--green); }
 .toast.error { border-left: 3px solid var(--red); }
 .toast.warning { border-left: 3px solid var(--yellow); }
@@ -580,7 +695,7 @@ svg { display: block; }
 /* ═══════════════════════════════════════════════════════
    DRAG & DROP
    ═══════════════════════════════════════════════════════ */
-#drop-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--accent) 15%, transparent); border: 3px dashed var(--accent); z-index: 50; display: none; align-items: center; justify-content: center; font-size: 24px; color: var(--accent); }
+#drop-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--accent) 15%, transparent); border: 3px dashed var(--accent); z-index: var(--z-drop); display: none; align-items: center; justify-content: center; font-size: 24px; color: var(--accent); }
 #drop-overlay.active { display: flex; }
 @media (hover: none) and (pointer: coarse) { #drop-overlay { display: none !important; } }
 
@@ -646,7 +761,7 @@ svg { display: block; }
    COMMAND LIBRARY BUBBLE
    ═══════════════════════════════════════════════════════ */
 #cmd-lib-panel {
-  position: absolute; top: 42px; right: 12px; z-index: 25;
+  position: absolute; top: 42px; right: 12px; z-index: var(--z-popover);
   width: 380px; max-height: 480px;
   background: var(--bg2); border: 1px solid var(--border);
   border-radius: var(--radius-lg);
@@ -818,12 +933,14 @@ svg { display: block; }
 @media (max-width: 768px) {
   #mobile-keys { display: flex; }
   .sidebar-resize-handle { display: none; }
-  #sidebar { position: absolute; left: env(safe-area-inset-left, 0px); top: var(--header-h); bottom: 0; z-index: 30; width: var(--sidebar-w); transform: translateX(-100%); transition: var(--transition-normal); }
+  #sidebar { position: absolute; left: env(safe-area-inset-left, 0px); top: var(--header-h); bottom: 0; z-index: var(--z-sidebar); width: var(--sidebar-w); transform: translateX(-100%); transition: var(--transition-normal); }
   #sidebar.mobile-open { transform: translateX(0); }
   #sidebar.hidden { transform: translateX(-100%); width: var(--sidebar-w); }
-  #settings-panel { position: fixed; right: env(safe-area-inset-right, 0px); top: var(--header-h); bottom: 0; z-index: 30; width: var(--settings-w); border-left: 1px solid var(--border); transform: translateX(100%); transition: var(--transition-normal); }
+  #settings-panel { position: fixed; right: env(safe-area-inset-right, 0px); top: var(--header-h); bottom: 0; z-index: var(--z-sidebar); width: var(--settings-w); border-left: 1px solid var(--border); transform: translateX(100%); transition: var(--transition-normal); }
   #settings-panel.open { transform: translateX(0); }
-  #hostname-badge { display: none; }
+  #hostname-badge { display: inline-flex; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #more-btn { display: flex; }
+  #cmd-lib-toggle, #system-stats-btn, #tilesBtn { display: none; }
   #search-input { width: 200px; }
   .modal { min-width: unset; width: 95vw; }
   .sys-grid { grid-template-columns: 1fr; }
@@ -856,10 +973,17 @@ svg { display: block; }
 </style>
 </head>
 <body data-theme="light">
+<a class="skip-link" href="#content">Skip to content</a>
 <script>
+  // Safe localStorage wrapper — degrades gracefully when Tracking Prevention blocks storage
+  const safeStorage = {
+    getItem(k) { try { return localStorage.getItem(k); } catch(e) { return null; } },
+    setItem(k, v) { try { localStorage.setItem(k, v); } catch(e) {} },
+    removeItem(k) { try { localStorage.removeItem(k); } catch(e) {} }
+  };
   (function() {
     try {
-      const settings = JSON.parse(localStorage.getItem('wt-settings')) || {};
+      const settings = JSON.parse(safeStorage.getItem('wt-settings')) || {};
       let theme = settings.theme || 'light';
       if (theme === 'system') {
         theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dracula' : 'light';
@@ -872,7 +996,7 @@ svg { display: block; }
 <!-- PIN Screen -->
 <div id="pin-screen">
   <div id="pin-box">
-    <h1 style="display:flex;align-items:center;justify-content:center;gap:6px"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="6" y1="8" x2="10" y2="8"/><line x1="6" y1="12" x2="10" y2="12"/><line x1="6" y1="16" x2="8" y2="16"/><line x1="12" y1="8" x2="18" y2="8"/><line x1="12" y1="12" x2="18" y2="12"/><line x1="12" y1="16" x2="16" y2="16"/><line x1="10" y1="16" x2="10" y2="16"/></svg>WebTun</h1>
+    <h1 style="display:flex;align-items:center;justify-content:center;gap:6px"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="6" y1="8" x2="10" y2="8"/><line x1="6" y1="12" x2="10" y2="12"/><line x1="6" y1="16" x2="8" y2="16"/><line x1="12" y1="8" x2="18" y2="8"/><line x1="12" y1="12" x2="18" y2="12"/><line x1="12" y1="16" x2="16" y2="16"/><line x1="10" y1="16" x2="10" y2="16"/></svg>WebTun</h1>
     <p>Enter PIN to continue</p>
     <input id="pin-input" type="password" placeholder="••••" autocomplete="off" maxlength="32" inputmode="numeric" aria-label="PIN code">
     <div id="pin-error" role="alert"></div>
@@ -885,13 +1009,13 @@ svg { display: block; }
 <!-- Main App -->
 <div id="app" style="display:none">
   <!-- Header -->
-  <div id="header">
-    <span id="conn-status" style="width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0" title="Connected"></span>
-    <span id="logo" style="display:flex;align-items:center;gap:4px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="6" y1="8" x2="10" y2="8"/><line x1="6" y1="12" x2="10" y2="12"/><line x1="12" y1="8" x2="18" y2="8"/><line x1="12" y1="12" x2="18" y2="12"/></svg>WebTun</span>
+  <div id="header" role="banner">
+    <span id="conn-status" role="status" aria-label="Connected" style="width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0" title="Connected"></span>
+    <span id="logo" style="display:flex;align-items:center;gap:4px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="6" y1="8" x2="10" y2="8"/><line x1="6" y1="12" x2="10" y2="12"/><line x1="12" y1="8" x2="18" y2="8"/><line x1="12" y1="12" x2="18" y2="12"/></svg>WebTun</span>
     <span id="hostname-badge">—</span>
     <div class="header-spacer"></div>
     <label id="keep-awake-toggle" class="keep-awake" title="Keep Screen Awake">
-      <input type="checkbox" id="keep-awake-cb" onchange="toggleKeepAwake(this.checked)">
+      <input type="checkbox" id="keep-awake-cb" aria-label="Keep screen awake" onchange="toggleKeepAwake(this.checked)">
       <span class="keep-awake-box">
         <span class="keep-awake-dot"></span>
       </span>
@@ -911,40 +1035,54 @@ svg { display: block; }
     <button class="icon-btn" id="tilesBtn" aria-label="Tiles Mode" title="Tiles Mode" onclick="toggleTiles()">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
     </button>
+    <button class="icon-btn" id="more-btn" aria-label="More options" title="More options" onclick="toggleMoreMenu()">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><circle cx="12" cy="5" r="1.7"/><circle cx="12" cy="12" r="1.7"/><circle cx="12" cy="19" r="1.7"/></svg>
+    </button>
     <button class="icon-btn" aria-label="Settings" title="Settings" onclick="openSettings()">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
     </button>
+    <div id="more-menu" role="menu">
+      <button class="mm-item" role="menuitem" onclick="closeMoreMenu();openSystemStats()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="4" rx="1"/><rect x="2" y="10" width="20" height="4" rx="1"/><rect x="2" y="18" width="20" height="4" rx="1"/><circle cx="6" cy="4" r="1" fill="currentColor"/><circle cx="6" cy="12" r="1" fill="currentColor"/><circle cx="6" cy="20" r="1" fill="currentColor"/></svg> System Stats</button>
+      <button class="mm-item" role="menuitem" onclick="closeMoreMenu();toggleTiles()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg> Tiles Mode</button>
+      <button class="mm-item" role="menuitem" onclick="closeMoreMenu();toggleCmdLib()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg> Command Library</button>
+      <button class="mm-item" role="menuitem" onclick="closeMoreMenu();toggleSearch()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg> Search</button>
+      <button class="mm-item" role="menuitem" onclick="closeMoreMenu();openShortcuts()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 8h6M12 8v8"/><path d="m7 12 10-4"/><path d="m7 12 10 4"/></svg> Keyboard Shortcuts</button>
+    </div>
     <div id="upload-progress"><div id="upload-progress-bar"></div><span id="upload-progress-text"></span></div>
   </div>
-  <div id="reconnect-banner" style="display:none;padding:4px 12px;font-size:11px;background:var(--accent);color:#fff;text-align:center;flex-shrink:0">⚠️ Reconnecting…</div>
+  <div id="reconnect-banner" style="display:none;padding:4px 12px;font-size:11px;background:var(--accent);color:#fff;text-align:center;flex-shrink:0"><span class="reconnect-spinner"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg></span> Reconnecting…</div>
 
   <!-- Main -->
   <div id="main">
     <!-- Sidebar -->
-    <div id="sidebar">
+    <div id="sidebar" role="navigation" aria-label="File explorer">
       <div id="sidebar-header">
         <button class="icon-btn" style="width:24px;height:24px" aria-label="Back" title="Back" onclick="navigateBack()" id="back-btn">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
         </button>
         <button class="icon-btn" style="width:24px;height:24px" aria-label="Forward" title="Forward" onclick="navigateForward()" id="fwd-btn">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
         </button>
         <button class="icon-btn" style="width:24px;height:24px" aria-label="Go to terminal directory" title="Go to terminal directory" onclick="goToTerminalDir()" id="term-dir-btn">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
         </button>
         <input id="path-input" type="text" placeholder="Path…" aria-label="File path" onkeydown="if(event.key==='Enter')navigateTo(this.value)">
         <button class="icon-btn" style="width:24px;height:24px" aria-label="Go up" title="Go up" onclick="navigateUp()">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
         </button>
         <button class="icon-btn" style="width:24px;height:24px" aria-label="Refresh" title="Refresh" onclick="refreshFiles()">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
         </button>
         <button class="icon-btn" style="width:24px;height:24px" aria-label="Toggle select mode" title="Toggle select mode" onclick="toggleSelectMode()">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="2"/><polyline points="9 12 11 14 15 10"/></svg>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><polyline points="9 12 11 14 15 10"/></svg>
         </button>
       </div>
       <div id="file-breadcrumb">/</div>
       <div id="file-list-wrap">
+        <div id="ptr-indicator" aria-hidden="true">
+          <span class="ptr-arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></span>
+          <span class="ptr-text">Pull to refresh</span>
+        </div>
         <div id="file-list"></div>
       </div>
       <div id="select-actions" style="display:none;padding:8px 10px;border-top:1px solid var(--border);background:var(--bg2);gap:4px;flex-wrap:wrap">
@@ -982,10 +1120,11 @@ svg { display: block; }
     </div>
 
     <!-- Content -->
-    <div id="content">
+    <div id="content" role="main">
       <div id="tab-bar">
-        <button id="new-tab-btn" onclick="newTab()" title="New terminal">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+        <div id="tab-scroll"></div>
+        <button id="new-tab-btn" onclick="newTab()" title="New terminal" aria-label="New terminal">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
         </button>
       </div>
       <div id="editor-split-area">
@@ -994,16 +1133,16 @@ svg { display: block; }
             <input id="search-input" type="text" placeholder="Search…" oninput="doSearch()" onkeydown="searchKeydown(event)">
             <span id="search-results"></span>
             <button class="search-btn" title="Prev (Shift+Enter)" onclick="searchPrev()">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"/></svg>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg>
             </button>
             <button class="search-btn" title="Next (Enter)" onclick="searchNext()">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
             </button>
             <button class="search-btn" id="search-case-btn" title="Match Case" onclick="toggleSearchCase()">
               Aa
             </button>
             <button class="search-btn" title="Close (Esc)" onclick="closeSearch()">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
           </div>
         </div>
@@ -1016,7 +1155,7 @@ svg { display: block; }
               Command Library
             </h3>
             <button class="icon-btn" style="width:24px;height:24px" onclick="toggleCmdLib()" title="Close">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
           </div>
           <div class="cmd-lib-tabs">
@@ -1048,7 +1187,7 @@ svg { display: block; }
             <button class="icon-btn" aria-label="Close editor" onclick="closeEditor()" title="Close editor">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
-            <span id="editor-filename">—</span>
+            <span id="editor-filename-wrap"><span class="editor-dirty-dot" id="editor-dirty-dot" aria-label="Unsaved changes"></span><span id="editor-filename">—</span></span>
             <span id="editor-status"></span>
             <button class="btn" id="md-preview-toggle" style="height:26px;padding:0 12px;font-size:12px;display:none" onclick="toggleMdPreview()">Preview</button>
             <button class="icon-btn" id="preview-refresh-btn" aria-label="Refresh preview" title="Refresh preview (Ctrl+Shift+R)" onclick="refreshPreview()" style="display:none">
@@ -1057,27 +1196,27 @@ svg { display: block; }
             <button class="icon-btn active" id="editor-split-toggle" aria-label="Toggle split orientation" onclick="toggleEditorSplit()" title="Switch to horizontal split">
               <svg id="split-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="12" x2="21" y2="12"/></svg>
             </button>
-            <button class="btn btn-primary" style="height:26px;padding:0 12px;font-size:12px" onclick="saveFile()">Save</button>
+            <button class="btn btn-primary" id="editor-save-btn" style="height:26px;padding:0 12px;font-size:12px" onclick="saveFile()">Save</button>
           </div>
           <div id="editor-area">
             <textarea id="editor-textarea" spellcheck="false"></textarea>
-            <div id="editor-preview"><iframe id="editor-preview-iframe" sandbox="allow-same-origin"></iframe></div>
+            <div id="editor-preview"><iframe id="editor-preview-iframe" sandbox="allow-same-origin allow-scripts"></iframe></div>
           </div>
         </div>
       </div>
 
       <!-- Mobile key bar -->
       <div id="mobile-keys">
-        <button class="mkey sel-toggle" onclick="toggleTermSelect()" title="Toggle selection mode" id="sel-toggle-btn">⎚</button>
+        <button class="mkey sel-toggle" onclick="toggleTermSelect()" title="Toggle selection mode" id="sel-toggle-btn" aria-label="Toggle selection mode"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="5" width="14" height="14" rx="2"/><line x1="5" y1="12" x2="19" y2="12"/><line x1="12" y1="5" x2="12" y2="19"/></svg></button>
         <span class="mkey-sep"></span>
         <button class="mkey" onclick="sendKey('\x1b')" title="Escape">ESC</button>
         <span class="mkey-sep"></span>
         <button class="mkey" onclick="sendKey('\t')" title="Tab">TAB</button>
         <span class="mkey-sep"></span>
-        <button class="mkey" onclick="sendKey('\x1b[A')" title="Arrow Up">▲</button>
-        <button class="mkey" onclick="sendKey('\x1b[B')" title="Arrow Down">▼</button>
-        <button class="mkey" onclick="sendKey('\x1b[D')" title="Arrow Left">◀</button>
-        <button class="mkey" onclick="sendKey('\x1b[C')" title="Arrow Right">▶</button>
+        <button class="mkey" onclick="sendKey('\x1b[A')" title="Arrow Up"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg></button>
+        <button class="mkey" onclick="sendKey('\x1b[B')" title="Arrow Down"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></button>
+        <button class="mkey" onclick="sendKey('\x1b[D')" title="Arrow Left"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></button>
+        <button class="mkey" onclick="sendKey('\x1b[C')" title="Arrow Right"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></button>
         <span class="mkey-sep"></span>
         <button class="mkey" onclick="sendKey('\x01')" title="Ctrl+A (Home)">^A</button>
         <button class="mkey" onclick="sendKey('\x03')" title="Ctrl+C (Interrupt)">^C</button>
@@ -1086,7 +1225,7 @@ svg { display: block; }
         <button class="mkey" onclick="sendKey('\x0c')" title="Ctrl+L (Clear)">^L</button>
         <span class="mkey-sep"></span>
         <button class="mkey wide" onclick="sendKey('\x1b[3~')" title="Delete">DEL</button>
-        <button class="mkey" onclick="sendKey('\x7f')" title="Backspace">⌫</button>
+        <button class="mkey" onclick="sendKey('\x7f')" title="Backspace"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 5H9l-7 7 7 7h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1Z"/><line x1="18" y1="9" x2="12" y2="15"/><line x1="12" y1="9" x2="18" y2="15"/></svg></button>
         <span class="mkey-sep"></span>
         <button class="mkey" onclick="sendKey('\x1b[H')" title="Home">Home</button>
         <button class="mkey" onclick="sendKey('\x1b[F')" title="End">End</button>
@@ -1096,7 +1235,7 @@ svg { display: block; }
         <button class="mkey" onclick="sendKey('\x1bOQ')" title="F2">F2</button>
         <button class="mkey" onclick="sendKey('\x1b[15~')" title="F5">F5</button>
         <span class="mkey-sep"></span>
-        <button class="mkey" onclick="toggleShift()" title="Toggle Shift (latches for next key)" id="shift-toggle-btn">⇧</button>
+        <button class="mkey" onclick="toggleShift()" title="Toggle Shift (latches for next key)" id="shift-toggle-btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6h6"/><path d="M12 18V9"/><path d="m6 12 6-6 6 6"/></svg></button>
         <button class="mkey" onclick="toggleAlt()" title="Toggle Alt (latches for next key)" id="alt-toggle-btn">Alt</button>
         <span class="mkey-sep"></span>
         <button class="mkey" onclick="toggleCtrlRow()" title="Toggle Ctrl keys" id="ctrl-toggle-btn">Ctrl</button>
@@ -1123,8 +1262,8 @@ svg { display: block; }
         <button class="mkey" onclick="selectAllTerm()" title="Select all terminal content">Select All</button>
         <button class="mkey" onclick="selectTermLine()" title="Select current visible line">Line</button>
         <span class="mkey-sep"></span>
-        <button class="mkey" onclick="termScrollUp()" title="Scroll up">▲</button>
-        <button class="mkey" onclick="termScrollDn()" title="Scroll down">▼</button>
+        <button class="mkey" onclick="termScrollUp()" title="Scroll up"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg></button>
+        <button class="mkey" onclick="termScrollDn()" title="Scroll down"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></button>
         <button class="mkey" id="sel-scroll-btn" onclick="toggleScrollMode()" title="Toggle scroll mode">Scroll</button>
         <span class="mkey-sep"></span>
         <button class="mkey sel-done" onclick="toggleTermSelect()" title="Exit selection mode">Done</button>
@@ -1143,7 +1282,7 @@ svg { display: block; }
         <div class="settings-section">
           <h3>Appearance</h3>
           <div class="setting-row">
-            <label>Theme</label>
+            <label for="s-theme">Theme</label>
             <select id="s-theme" onchange="applyTheme(this.value)">
               <option value="system">System</option>
               <option value="light">Light</option>
@@ -1155,21 +1294,21 @@ svg { display: block; }
             </select>
           </div>
           <div class="setting-row">
-            <label>Font Size</label>
+            <label for="s-fontsize">Font Size</label>
             <input type="number" id="s-fontsize" min="8" max="32" value="14" onchange="applyFontSize(+this.value)">
           </div>
           <div class="setting-row">
-            <label>Font Family</label>
+            <label for="s-font">Font Family</label>
             <select id="s-font" onchange="applyFont(this.value)">
+              <option value="'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace">JetBrains Mono</option>
               <option value="'SF Mono', 'Fira Code', Consolas, monospace">System Mono</option>
               <option value="'Fira Code', monospace">Fira Code</option>
               <option value="'Cascadia Code', monospace">Cascadia Code</option>
-              <option value="'JetBrains Mono', monospace">JetBrains Mono</option>
               <option value="monospace">Monospace</option>
             </select>
           </div>
           <div class="setting-row">
-            <label>Cursor Style</label>
+            <label for="s-cursor">Cursor Style</label>
             <select id="s-cursor" onchange="applyCursor(this.value)">
               <option value="block">Block</option>
               <option value="underline">Underline</option>
@@ -1177,53 +1316,54 @@ svg { display: block; }
             </select>
           </div>
           <div class="setting-row">
-            <label>Cursor Blink</label>
-            <div class="toggle" id="s-blink" role="switch" tabindex="0" aria-checked="true" onclick="toggleSetting('blink')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('blink')}"></div>
+            <label for="s-blink-cb">Cursor Blink</label>
+            <div class="toggle" id="s-blink" role="switch" tabindex="0" aria-checked="true" onclick="toggleSetting('blink')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('blink')}"><input type="checkbox" id="s-blink-cb" style="position:absolute;opacity:0;pointer-events:none;width:0;height:0"></div>
           </div>
         </div>
         <div class="settings-section">
           <h3>Terminal</h3>
           <div class="setting-row">
-            <label>Scrollback Lines</label>
+            <label for="s-scrollback">Scrollback Lines</label>
             <input type="number" id="s-scrollback" min="100" max="100000" value="5000" onchange="applyScrollback(+this.value)">
           </div>
           <div class="setting-row">
-            <label>Bell Sound</label>
-            <div class="toggle" id="s-bell" role="switch" tabindex="0" aria-checked="false" onclick="toggleSetting('bell')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('bell')}"></div>
+            <label for="s-bell-cb">Bell Sound</label>
+            <div class="toggle" id="s-bell" role="switch" tabindex="0" aria-checked="false" onclick="toggleSetting('bell')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('bell')}"><input type="checkbox" id="s-bell-cb" style="position:absolute;opacity:0;pointer-events:none;width:0;height:0"></div>
           </div>
           <div class="setting-row">
-            <label>Right-Click Menu</label>
-            <div class="toggle on" id="s-termRightClick" role="switch" tabindex="0" aria-checked="true" onclick="toggleSetting('termRightClick')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('termRightClick')}"></div>
+            <label for="s-termRightClick-cb">Right-Click Menu</label>
+            <div class="toggle on" id="s-termRightClick" role="switch" tabindex="0" aria-checked="true" onclick="toggleSetting('termRightClick')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('termRightClick')}"><input type="checkbox" id="s-termRightClick-cb" style="position:absolute;opacity:0;pointer-events:none;width:0;height:0"></div>
           </div>
         </div>
         <div class="settings-section">
           <h3>Interface</h3>
           <div class="setting-row">
-            <label>Show Mobile Keys</label>
-            <div class="toggle" id="s-mobilekeys" role="switch" tabindex="0" aria-checked="false" onclick="toggleSetting('mobilekeys')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('mobilekeys')}"></div>
+            <label for="s-mobilekeys-cb">Show Mobile Keys</label>
+            <div class="toggle" id="s-mobilekeys" role="switch" tabindex="0" aria-checked="false" onclick="toggleSetting('mobilekeys')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('mobilekeys')}"><input type="checkbox" id="s-mobilekeys-cb" style="position:absolute;opacity:0;pointer-events:none;width:0;height:0"></div>
           </div>
           <div class="setting-row">
-            <label>Confirm on Close</label>
-            <div class="toggle on" id="s-confirmclose" role="switch" tabindex="0" aria-checked="true" onclick="toggleSetting('confirmclose')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('confirmclose')}"></div>
+            <label for="s-confirmclose-cb">Confirm on Close</label>
+            <div class="toggle on" id="s-confirmclose" role="switch" tabindex="0" aria-checked="true" onclick="toggleSetting('confirmclose')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('confirmclose')}"><input type="checkbox" id="s-confirmclose-cb" style="position:absolute;opacity:0;pointer-events:none;width:0;height:0"></div>
           </div>
           <div class="setting-row">
-            <label>Data Saver</label>
-            <div class="toggle" id="s-datasaver" role="switch" tabindex="0" aria-checked="false" onclick="toggleSetting('datasaver')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('datasaver')}"></div>
+            <label for="s-datasaver-cb">Data Saver</label>
+            <div class="toggle" id="s-datasaver" role="switch" tabindex="0" aria-checked="false" onclick="toggleSetting('datasaver')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('datasaver')}"><input type="checkbox" id="s-datasaver-cb" style="position:absolute;opacity:0;pointer-events:none;width:0;height:0"></div>
           </div>
           <div class="setting-row electron-only" style="display:none">
-            <label>Start on Login</label>
-            <div class="toggle" id="s-autostart" role="switch" tabindex="0" aria-checked="false" onclick="toggleSetting('autostart')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('autostart')}"></div>
+            <label for="s-autostart-cb">Start on Login</label>
+            <div class="toggle" id="s-autostart" role="switch" tabindex="0" aria-checked="false" onclick="toggleSetting('autostart')" onkeydown="if(event.key===' '||event.key==='Enter'){event.preventDefault();toggleSetting('autostart')}"><input type="checkbox" id="s-autostart-cb" style="position:absolute;opacity:0;pointer-events:none;width:0;height:0"></div>
           </div>
         </div>
         <div class="settings-section">
           <h3>Tunnel</h3>
           <div class="setting-row" style="flex-wrap:wrap;gap:6px">
-            <label style="flex:0 0 auto">Local URL</label>
+            <label for="tunnel-url" style="flex:0 0 auto">Local URL</label>
             <div style="display:flex;flex:1;gap:6px;min-width:0">
-              <input type="text" id="tunnel-url" value="http://localhost:3000" placeholder="http://localhost:PORT" style="flex:1;min-width:0">
-              <button class="btn btn-primary" style="height:28px;padding:0 12px;font-size:12px;flex-shrink:0" onclick="createTunnel()">Create</button>
+              <input type="text" id="tunnel-url" value="http://localhost:3000" placeholder="http://localhost:PORT" style="flex:1;min-width:0" oninput="clearFieldError('tunnel-field-error')">
+              <button class="btn btn-primary" id="tunnel-create-btn" style="height:28px;padding:0 12px;font-size:12px;flex-shrink:0" onclick="createTunnel()">Create</button>
             </div>
           </div>
+          <div class="field-error" id="tunnel-field-error" role="alert"></div>
           <div id="tunnel-list"></div>
           <div id="tunnel-status" style="font-size:11px;color:var(--fg2);min-height:16px;margin-top:2px"></div>
         </div>
@@ -1245,6 +1385,9 @@ svg { display: block; }
             </div>
           </div>
         </div>
+        <div class="settings-section" style="margin-top:12px;border-top:1px solid var(--border);padding-top:16px">
+          <button class="btn btn-ghost" id="reset-settings-btn" onclick="resetSettings()" style="width:100%">Reset settings</button>
+        </div>
       </div>
     </div>
   </div>
@@ -1275,7 +1418,7 @@ svg { display: block; }
 </div>
 
 <!-- Terminal context menu -->
-<div id="term-ctx-menu" role="menu" style="position:fixed;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 20px var(--shadow-color);z-index:500;display:none;min-width:180px;overflow:hidden">
+<div id="term-ctx-menu" role="menu" style="position:fixed;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 20px var(--shadow-color);z-index:var(--z-menu);display:none;min-width:180px;overflow:hidden">
   <!-- Clipboard -->
   <div class="ctx-item" id="term-ctx-copy" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy</div>
   <div class="ctx-item" id="term-ctx-paste" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="14" y="2" width="8" height="8" rx="2"/><path d="M16 14H8M8 18h8"/><path d="M5 4h4"/><rect x="2" y="6" width="16" height="16" rx="2"/></svg> Paste</div>
@@ -1291,7 +1434,7 @@ svg { display: block; }
   <!-- More Options -->
   <div class="ctx-sep"></div>
   <div class="ctx-submenu-wrap">
-    <div class="ctx-item" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg> More Options<span class="ctx-submenu-arrow">▸</span></div>
+    <div class="ctx-item" role="menuitem" aria-haspopup="menu" aria-expanded="false"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg> More Options<span class="ctx-submenu-arrow"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></span></div>
     <div class="ctx-submenu-items">
       <div class="ctx-item" id="term-ctx-find" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> Find in Terminal</div>
       <div class="ctx-item" id="term-ctx-zoom-in" role="menuitem"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg> Zoom In</div>
@@ -1309,7 +1452,7 @@ svg { display: block; }
 </div>
 
 <!-- Fuzzy Finder Modal -->
-<div class="overlay" id="finder-overlay">
+<div class="overlay" id="finder-overlay" role="dialog" aria-modal="true" aria-label="Search files">
   <div class="modal modal-md" style="padding:12px">
     <input id="finder-input" type="text" placeholder="Search files and folders…" autocomplete="off" oninput="doFinderSearch()" onkeydown="finderKeydown(event)">
     <div id="finder-results"></div>
@@ -1317,6 +1460,31 @@ svg { display: block; }
   </div>
 </div>
 
+<!-- Keyboard Shortcuts Modal -->
+<div class="overlay" id="shortcuts-overlay">
+  <div class="modal modal-md">
+    <h2>Keyboard Shortcuts</h2>
+    <div class="shortcuts-table-wrap">
+      <table class="shortcuts-table">
+        <tbody>
+          <tr><td><kbd>Ctrl</kbd>+<kbd>P</kbd></td><td>File finder</td></tr>
+          <tr><td><kbd>Ctrl</kbd>+<kbd>T</kbd></td><td>New terminal tab</td></tr>
+          <tr><td><kbd>Ctrl</kbd>+<kbd>W</kbd></td><td>Close tab</td></tr>
+          <tr><td><kbd>Ctrl</kbd>+<kbd>B</kbd></td><td>Toggle file explorer</td></tr>
+          <tr><td><kbd>Ctrl</kbd>+<kbd>F</kbd></td><td>Search in terminal</td></tr>
+          <tr><td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>→</kbd>/<kbd>←</kbd></td><td>Cycle tabs</td></tr>
+          <tr><td><kbd>Ctrl</kbd>+<kbd>S</kbd></td><td>Save editor file</td></tr>
+          <tr><td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>R</kbd></td><td>Refresh preview</td></tr>
+          <tr><td><kbd>Esc</kbd></td><td>Close menus / dialogs</td></tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="modal-actions">
+      <button class="btn btn-primary" onclick="closeOverlay('shortcuts-overlay')">Close</button>
+    </div>
+  </div>
+</div>
+
 <!-- System Stats Modal -->
 <div class="overlay" id="sys-overlay">
   <div class="modal">
@@ -1373,10 +1541,11 @@ svg { display: block; }
     <div class="modal-row">
       <label for="rename-input">New Name</label>
       <input type="text" id="rename-input" onkeydown="if(event.key==='Enter')confirmRename()">
+      <div class="field-error" id="rename-error" role="alert"></div>
     </div>
     <div class="modal-actions">
       <button class="btn btn-ghost" onclick="closeOverlay('rename-overlay')">Cancel</button>
-      <button class="btn btn-primary" onclick="confirmRename()">Rename</button>
+      <button class="btn btn-primary" id="rename-ok-btn" onclick="confirmRename()">Rename</button>
     </div>
   </div>
 </div>
@@ -1388,10 +1557,11 @@ svg { display: block; }
     <div class="modal-row">
       <label for="newfolder-input">Folder Name</label>
       <input type="text" id="newfolder-input" onkeydown="if(event.key==='Enter')confirmNewFolder()">
+      <div class="field-error" id="newfolder-error" role="alert"></div>
     </div>
     <div class="modal-actions">
       <button class="btn btn-ghost" onclick="closeOverlay('newfolder-overlay')">Cancel</button>
-      <button class="btn btn-primary" onclick="confirmNewFolder()">Create</button>
+      <button class="btn btn-primary" id="newfolder-ok-btn" onclick="confirmNewFolder()">Create</button>
     </div>
   </div>
 </div>
@@ -1403,10 +1573,11 @@ svg { display: block; }
     <div class="modal-row">
       <label for="newfile-input">File Name</label>
       <input type="text" id="newfile-input" onkeydown="if(event.key==='Enter')confirmNewFile()">
+      <div class="field-error" id="newfile-error" role="alert"></div>
     </div>
     <div class="modal-actions">
       <button class="btn btn-ghost" onclick="closeOverlay('newfile-overlay')">Cancel</button>
-      <button class="btn btn-primary" onclick="confirmNewFile()">Create</button>
+      <button class="btn btn-primary" id="newfile-ok-btn" onclick="confirmNewFile()">Create</button>
     </div>
   </div>
 </div>
@@ -1427,13 +1598,25 @@ svg { display: block; }
   </div>
 </div>
 
+<!-- Confirm Dialog -->
+<div class="overlay" id="confirm-overlay">
+  <div class="modal modal-sm">
+    <h2 id="confirm-title">Confirm</h2>
+    <p id="confirm-msg" style="font-size:13px;color:var(--fg2);line-height:1.6;white-space:pre-wrap;word-break:break-word"></p>
+    <div class="modal-actions">
+      <button class="btn btn-ghost" id="confirm-cancel-btn">Cancel</button>
+      <button class="btn btn-primary" id="confirm-ok-btn">OK</button>
+    </div>
+  </div>
+</div>
+
 <!-- Image Viewer -->
-<div class="overlay" id="image-viewer">
+<div class="overlay" id="image-viewer" role="dialog" aria-modal="true" aria-label="Image preview">
   <div class="modal">
     <div class="iv-header">
       <span class="iv-name" id="iv-name"></span>
       <button class="iv-close" onclick="closeImageViewer()" aria-label="Close image viewer">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
       </button>
     </div>
     <div id="iv-loading" class="iv-loading">Loading…</div>
@@ -1448,7 +1631,7 @@ svg { display: block; }
 <input type="file" id="upload-input" multiple style="display:none" onchange="handleUploadInput()">
 
 <!-- PWA Install Banner -->
-<div id="install-banner" style="display:none;position:fixed;bottom:0;left:0;right:0;z-index:500;background:var(--bg3);border-top:1px solid var(--border);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));align-items:center;gap:10px;box-shadow:0 -4px 16px rgba(0,0,0,0.3)">
+<div id="install-banner" style="display:none;position:fixed;bottom:0;left:0;right:0;z-index:var(--z-menu);background:var(--bg3);border-top:1px solid var(--border);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));align-items:center;gap:10px;box-shadow:0 -4px 16px rgba(0,0,0,0.3)">
   <span class="install-msg" style="flex:1;font-size:13px">Install WebTun for the best experience</span>
   <button class="btn btn-ghost" style="height:32px;padding:0 12px;font-size:12px" onclick="dismissInstall()">Not now</button>
   <button class="btn btn-primary" style="height:32px;padding:0 12px;font-size:12px" onclick="installPWA()">Install</button>
@@ -1473,8 +1656,8 @@ let renamePath = '';
 let editorPath = '';
 let editorOriginalContent = '';
 let hasTmux = false;
-let settings = {
-  theme: 'light', fontSize: 14, font: "'SF Mono', 'Fira Code', Consolas, monospace",
+  let settings = {
+  theme: 'light', fontSize: 14, font: "'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace",
   cursor: 'block', blink: true, scrollback: 5000, bell: false,
   mobilekeys: false, confirmclose: true, datasaver: false, autostart: false, keepAwake: false, termRightClick: true
 };
@@ -1510,12 +1693,12 @@ function preventDoubleTap(el, fn, delay = 1000) {
 
 function saveTabState() {
   const state = tabs.map(t => ({ id: t.id, sessionId: t.sessionId, title: t.title }));
-  try { localStorage.setItem('wt-tabs', JSON.stringify(state)); } catch(e) { console.warn('Failed to save tabs:', e); }
+  try { safeStorage.setItem('wt-tabs', JSON.stringify(state)); } catch(e) { console.warn('Failed to save tabs:', e); }
 }
 
 function loadTabState() {
   try {
-    const val = JSON.parse(localStorage.getItem('wt-tabs'));
+    const val = JSON.parse(safeStorage.getItem('wt-tabs'));
     return Array.isArray(val) ? val : [];
   } catch(e) { console.warn('loadTabState error:', e); return []; }
 }
@@ -1610,14 +1793,33 @@ async function unlockApp() {
   restoreTunnels();
   setupSwipeGestures();
   setupFileListTouch();
+  setupFileListKeyboard();
+  setupCtxMenuKeyboard();
+  setupMoreMenuKeyboard();
   restoreSidebarWidth();
   setupSidebarResize();
   setupEditorResize();
   window.addEventListener('resize', updateSidebarNarrowClass);
   window._cleanups.push(() => window.removeEventListener('resize', updateSidebarNarrowClass));
-  document.getElementById('tab-bar').setAttribute('role', 'tablist');
+  document.getElementById('tab-scroll').setAttribute('role', 'tablist');
   document.getElementById('file-list-wrap').setAttribute('role', 'listbox');
 
+  // Arrow-key navigation between tabs when focus is in the tab strip
+  document.getElementById('tab-scroll').addEventListener('keydown', e => {
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      e.preventDefault();
+      cycleTab(e.key === 'ArrowRight' ? 1 : -1);
+      const t = getActiveTab();
+      if (t?.el) t.el.focus();
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      if (tabs.length) { activateTab(tabs[0].id); tabs[0].el.focus(); }
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      if (tabs.length) { activateTab(tabs[tabs.length - 1].id); tabs[tabs.length - 1].el.focus(); }
+    }
+  });
+
   // Listen for system theme changes
   const systemThemeMql = window.matchMedia('(prefers-color-scheme: dark)');
   const onSystemThemeChange = () => { if (settings.theme === 'system') applyTheme('system'); };
@@ -1717,7 +1919,7 @@ function setupTabDragDrop(tabEl, id) {
     const [moved] = tabs.splice(fromIdx, 1);
     const targetIdx = tabs.findIndex(t => t.id === id);
     tabs.splice(targetIdx, 0, moved);
-    const bar = document.getElementById('tab-bar');
+    const bar = document.getElementById('tab-scroll');
     if (moved.el && moved.el.parentNode === bar) bar.insertBefore(moved.el, tabEl);
     saveTabState();
   };
@@ -1738,6 +1940,8 @@ function setupTabDragDrop(tabEl, id) {
 function setupTabInlineRename(tabTitleSpan, tab) {
   const startRename = (span) => {
     const input = document.createElement('input');
+    input.id = 'tab-rename-input';
+    input.name = 'tab-rename';
     input.type = 'text';
     input.value = tab.title;
     input.style.cssText = `width:${Math.max(60, tab.title.length * 9)}px;height:22px;font-size:12px;padding:0 6px`;
@@ -1841,7 +2045,7 @@ function createTabButton(tab) {
   setupTabInlineRename(titleSpan, tab);
   setupTabSwipeGesture(tabEl, id);
 
-  document.getElementById('tab-bar').insertBefore(tabEl, document.getElementById('new-tab-btn'));
+  document.getElementById('tab-scroll').appendChild(tabEl);
   tab.el = tabEl;
 }
 
@@ -1849,10 +2053,19 @@ function createTerminalWrapper(tab) {
   const wrapper = document.createElement('div');
   wrapper.className = 'term-wrapper';
   wrapper.dataset.id = tab.id;
+  const loading = document.createElement('div');
+  loading.className = 'term-loading';
+  loading.innerHTML = '<span class="tl-spinner"></span><span>Connecting…</span>';
+  wrapper.appendChild(loading);
+  tab.loadingEl = loading;
   document.getElementById('terminals').appendChild(wrapper);
   tab.wrapper = wrapper;
 }
 
+function hideTermLoading(tab) {
+  if (tab && tab.loadingEl) tab.loadingEl.classList.add('hidden');
+}
+
 function newTab(title, sessionId, dir) {
   const id = ++tabCounter;
   const sid = sessionId || (hasTmux ? uuid() : null);
@@ -1912,7 +2125,7 @@ function connectWebSocket(tab, isReconnect = false) {
       const ch = data.charCodeAt(i);
       if (ch === 13 || ch === 10) { // Enter
         try {
-          // Prefer stored paste text (avoids single-row truncation from getLine)
+          // Prefer stored paste text
           let text = tab._lastPasteText;
           tab._lastPasteText = null;
           if (text) {
@@ -1921,30 +2134,13 @@ function connectWebSocket(tab, isReconnect = false) {
             text = lines[lines.length - 1] || lines[lines.length - 2] || text;
             text = text.trim();
           } else {
-            // Read from terminal buffer — collect all rows from prompt to cursor
-            const buf = tab.term.buffer.active;
-            const cursorRow = buf.baseY + buf.cursorY;
-            let collected = '';
-            // Scan upward to find the prompt line (contains $, #, or %)
-            for (let r = cursorRow; r >= Math.max(0, cursorRow - 20); r--) {
-              const row = buf.getLine(r);
-              if (!row) break;
-              const rowText = row.translateToString(false);
-              // Prompt detection: line ends with $, #, or % followed by space
-              if (/\s*[#$%]\s*$/.test(rowText)) {
-                const promptEnd = rowText.search(/[#$%]\s*$/);
-                if (promptEnd >= 0) {
-                  collected = rowText.substring(promptEnd + 1) + collected;
-                }
-                break;
-              }
-              collected = rowText + collected;
-            }
-            text = collected.trim();
-            // Strip any trailing prompt artifacts from multi-row
-            text = text.replace(/\s*[#$%]\s*$/, '').trim();
+            // Use the tracked input buffer (more reliable than buffer scanning)
+            text = (tab._currentInput || '').trim();
+            // Strip any leaked VT/ANSI parameter junk that bypassed the escape parser
+            text = text.replace(/^[>;\d\s]+(?=[a-zA-Z/\\~\-.])/, '').replace(/^[>;\d\s]+$/, '').trim();
           }
           if (text) addToCmdHist(text);
+          tab._currentInput = ''; // Clear after history save
         } catch {}
       }
     }
@@ -1952,6 +2148,27 @@ function connectWebSocket(tab, isReconnect = false) {
     const buf = new Uint8Array(1 + enc.length);
     buf[0] = 0x00; buf.set(enc, 1);
     ws.send(buf.buffer);
+
+    // Update the keystroke buffer — skip all escape sequences and control characters
+    for (let i = 0; i < data.length; i++) {
+      const ch = data.charCodeAt(i);
+      if (ch === 13 || ch === 10) { // Enter (handled above)
+        continue;
+      } else if (ch === 127 || ch === 8) { // Backspace / Delete
+        if (tab._currentInput) tab._currentInput = tab._currentInput.slice(0, -1);
+      } else if (ch === 27) { // ESC — skip entire escape sequence (CSI, SS3, OSC, DCS, etc.)
+        i++; // skip first char after ESC (usually '[', 'O', ']', 'P')
+        // Skip until we find a final char or run out of data
+        while (i < data.length) {
+          const c = data.charCodeAt(i);
+          if (c >= 0x40 && c <= 0x7E) { i++; break; } // final char — sequence done
+          i++;
+        }
+      } else if (ch >= 32 && ch < 0x7F) { // Printable ASCII only
+        tab._currentInput = (tab._currentInput || '') + data[i];
+      }
+      // All other control chars (0x00-0x1F except 0x0D/0x0A) are silently dropped
+    }
   };
   const sendResize = (cols, rows) => {
     if (ws.readyState !== WebSocket.OPEN) return;
@@ -1963,10 +2180,11 @@ function connectWebSocket(tab, isReconnect = false) {
   ws.onopen = () => {
     tab.reconnectDelay = 1000;
     tab.reconnectAttempts = 0;
+    hideTermLoading(tab);
     updateConnStatus(true);
     const banner = document.getElementById('reconnect-banner');
     if (banner) {
-      banner.innerHTML = '⚠️ Reconnecting…';
+      banner.innerHTML = '<span class="reconnect-spinner"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg></span> Reconnecting…';
       banner.style.display = 'none';
     }
     if (isReconnect) {
@@ -2063,7 +2281,7 @@ function connectWebSocket(tab, isReconnect = false) {
     if (tab.reconnectAttempts >= 3) {
       const banner = document.getElementById('reconnect-banner');
       if (banner) {
-        banner.innerHTML = '⚠️ Connection lost. <button class="btn btn-primary" data-action="manual-reconnect" style="height:26px;padding:0 12px;font-size:11px;margin-left:8px">Reconnect</button>';
+        banner.innerHTML = 'Connection lost. <button class="btn btn-primary" data-action="manual-reconnect" style="height:26px;padding:0 12px;font-size:11px;margin-left:8px">Reconnect</button>';
         banner.style.display = 'block';
       }
     } else {
@@ -2087,7 +2305,7 @@ function connectWebSocket(tab, isReconnect = false) {
 function manualReconnect() {
   const banner = document.getElementById('reconnect-banner');
   if (banner) {
-    banner.innerHTML = '⚠️ Reconnecting…';
+    banner.innerHTML = '<span class="reconnect-spinner"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg></span> Reconnecting…';
     banner.style.display = 'block';
   }
   tabs.forEach(tab => {
@@ -2100,15 +2318,19 @@ function manualReconnect() {
   });
 }
 
-function closeTab(e, id) {
+async function closeTab(e, id) {
   e.stopPropagation();
-  if (settings.confirmclose) { if (!confirm(tabs.length === 1 ? 'Close last terminal?' : 'Close terminal?')) return; }
+  if (settings.confirmclose) {
+    const ok = await confirmDialog({ title: 'Close terminal', message: tabs.length === 1 ? 'Close last terminal?' : 'Close terminal?', okText: 'Close', cancelText: 'Cancel' });
+    if (!ok) return;
+  }
 
   // Check for unsaved editor changes
   const editorOpen = document.getElementById('editor-view').classList.contains('open');
   const currentContent = editor ? editor.getValue() : '';
   if (editorOpen && currentContent !== editorOriginalContent) {
-    if (!confirm('You have unsaved changes. Close anyway?')) return;
+    const ok = await confirmDialog({ title: 'Unsaved changes', message: 'You have unsaved changes. Close anyway?', okText: 'Close', cancelText: 'Cancel', danger: true });
+    if (!ok) return;
   }
 
   const tab = tabs.find(t => t.id === id);
@@ -2149,11 +2371,7 @@ function initTerminal(tab) {
     convertEol: false,
     bellStyle: settings.bell ? 'sound' : 'none',
     smoothScrollDuration: 80,
-    selectionTheme: {
-      extension: true,
-      foreground: '#1a1b26',
-      background: '#7aa2f744'
-    }
+    selectionTheme: getXtermSelectionTheme()
   };
 
   const term = new Terminal(cfg);
@@ -2185,6 +2403,10 @@ function initTerminal(tab) {
   tab.searchAddon = searchAddon;
   tab.closed = false;
   tab.textarea = term.textarea || term.element?.querySelector('.xterm-textarea, textarea');
+  if (tab.textarea && !tab.textarea.id) {
+    tab.textarea.id = 'xterm-helper-' + tab.id;
+    tab.textarea.name = 'terminal-input';
+  }
 
   // Intercept paste events to use bracketed paste mode (required for TUI apps like vim, nano, mc)
   if (tab.textarea) {
@@ -2274,6 +2496,7 @@ function initTerminal(tab) {
     top = Math.max(0, Math.min(top, vh - mh));
     menu.style.left = left + 'px';
     menu.style.top = top + 'px';
+    menu.querySelector('.ctx-item')?.focus();
   });
 
   // Touch-to-mouse translation for TUI apps (mobile)
@@ -2370,9 +2593,9 @@ function initTerminal(tab) {
         if (tab.fitAddon) tab.fitAddon.fit();
         if (!window._pinchSaveTimer) {
           window._pinchSaveTimer = setTimeout(() => {
-            const persisted = JSON.parse(localStorage.getItem('wt-settings') || '{}');
+            const persisted = JSON.parse(safeStorage.getItem('wt-settings') || '{}');
             persisted.fontSize = tab.term.options.fontSize;
-            localStorage.setItem('wt-settings', JSON.stringify(persisted));
+            safeStorage.setItem('wt-settings', JSON.stringify(persisted));
             window._pinchSaveTimer = null;
           }, 500);
         }
@@ -2504,7 +2727,7 @@ function layoutTiles() {
     const tthClose = document.createElement('button');
     tthClose.className = 'tth-close';
     tthClose.setAttribute('aria-label', 'Close tab');
-    tthClose.innerHTML = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+    tthClose.innerHTML = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
     hdr.appendChild(tthClose);
     hdr.addEventListener('click', e => {
       if (e.target.closest('.tth-close')) return;
@@ -2538,10 +2761,32 @@ function getXtermTheme() {
   };
 }
 
+function getXtermSelectionTheme() {
+  const s = getComputedStyle(document.documentElement);
+  const g = v => s.getPropertyValue(v).trim();
+  return {
+    extension: true,
+    foreground: g('--bg'),
+    background: g('--accent') + '44'
+  };
+}
+
 // ═══════════════════════════════════════════════════════
 // FILE EXPLORER
 // ═══════════════════════════════════════════════════════
 let loadFilesAbortController = null;
+let fileListLoadingTimer = null;
+function setFileListLoading(on) {
+  const wrap = document.getElementById('file-list-wrap');
+  if (!wrap) return;
+  clearTimeout(fileListLoadingTimer);
+  if (on) {
+    fileListLoadingTimer = setTimeout(() => wrap.classList.add('loading'), 150);
+  } else {
+    fileListLoadingTimer = null;
+    wrap.classList.remove('loading');
+  }
+}
 
 async function loadFiles(dir) {
   if (loadFilesAbortController) loadFilesAbortController.abort();
@@ -2563,11 +2808,13 @@ async function loadFiles(dir) {
 
   const list = document.getElementById('file-list');
 
+  setFileListLoading(true);
   let data;
   try {
     data = await api(`/api/files?path=${encodeURIComponent(dir)}`, { signal: loadFilesAbortController.signal });
   } catch (e) {
-    if (e.name === 'AbortError') return;
+    if (e.name === 'AbortError') { setFileListLoading(false); return; }
+    setFileListLoading(false);
     const errorDiv = document.createElement('div');
     errorDiv.style.cssText = 'padding:16px;text-align:center;';
     errorDiv.innerHTML = '<div style="color:var(--red);margin-bottom:8px">Failed to load directory</div>' +
@@ -2579,6 +2826,7 @@ async function loadFiles(dir) {
   }
 
   if (!data.files) {
+    setFileListLoading(false);
     if (dir !== homeDir) loadFiles(homeDir);
     return;
   }
@@ -2663,16 +2911,25 @@ async function loadFiles(dir) {
   if (list.children.length === 0) {
     const empty = document.createElement('div');
     empty.className = 'file-list-empty';
-    empty.innerHTML = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg><span>Empty directory</span>';
+    empty.innerHTML = '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg><span>Empty directory</span>' +
+      '<div class="empty-actions">' +
+      '<button class="btn btn-ghost" onclick="openOverlay(\'newfile-overlay\');document.getElementById(\'newfile-input\').focus()">New file</button>' +
+      '<button class="btn btn-ghost" onclick="openOverlay(\'newfolder-overlay\');document.getElementById(\'newfolder-input\').focus()">New folder</button>' +
+      '<button class="btn btn-ghost" onclick="uploadFiles()">Upload</button>' +
+      '</div>';
     list.appendChild(empty);
   }
 
   updateBackBtn();
+  setFileListLoading(false);
 }
 
+let fileItemCounter = 0;
+
 function makeFileItem(name, isDir, fullPath, size, icon) {
   const div = document.createElement('div');
   div.className = 'file-item';
+  div.id = 'file-item-' + (++fileItemCounter);
   div.setAttribute('role', 'option');
   div.setAttribute('aria-selected', 'false');
   div.dataset.path = fullPath;
@@ -2682,6 +2939,7 @@ function makeFileItem(name, isDir, fullPath, size, icon) {
     <span class="file-icon">${icon}</span>
     <span class="file-name ${isDir ? 'file-dir' : ''}" title="${escHtml(fullPath)}">${escHtml(name)}</span>
     ${size ? `<span class="file-size">${escHtml(size)}</span>` : ''}
+    <span class="file-ellipsis" role="button" tabindex="0" aria-label="More actions for ${escHtml(name)}" title="More actions"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg></span>
   `;
   div.addEventListener('click', e => {
     if (e.target.closest('.file-select-check')) {
@@ -2689,6 +2947,13 @@ function makeFileItem(name, isDir, fullPath, size, icon) {
       if (selectedFiles.length > 0) document.getElementById('select-actions').style.display = 'flex';
       return;
     }
+    if (e.target.closest('.file-ellipsis')) {
+      e.stopPropagation();
+      const rect = div.querySelector('.file-ellipsis').getBoundingClientRect();
+      const m = fullPath.match(/\.([^.]+)$/);
+      showCtxMenu({ clientX: rect.left + rect.width / 2, clientY: rect.bottom + 4, preventDefault() {}, stopPropagation() {} }, { path: fullPath, name, isDir, ext: m ? '.' + m[1].toLowerCase() : '' });
+      return;
+    }
     if (selectMode) {
       toggleFileSelection(fullPath, div);
       return;
@@ -2697,9 +2962,58 @@ function makeFileItem(name, isDir, fullPath, size, icon) {
     else if (isImageFile(fullPath)) openImageViewer(fullPath);
     else openFileEditor(fullPath);
   });
+  const ell = div.querySelector('.file-ellipsis');
+  if (ell) {
+    ell.addEventListener('keydown', e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        e.stopPropagation();
+        const rect = ell.getBoundingClientRect();
+        const m = fullPath.match(/\.([^.]+)$/);
+        showCtxMenu({ clientX: rect.left + rect.width / 2, clientY: rect.bottom + 4, preventDefault() {}, stopPropagation() {} }, { path: fullPath, name, isDir, ext: m ? '.' + m[1].toLowerCase() : '' });
+      }
+    });
+  }
   return div;
 }
 
+function setupFileListKeyboard() {
+  const list = document.getElementById('file-list');
+  if (!list || list.dataset._kbSetup) return;
+  list.dataset._kbSetup = '1';
+  list.setAttribute('tabindex', '0');
+  list.addEventListener('keydown', e => {
+    const items = [...list.querySelectorAll('.file-item')];
+    if (!items.length) return;
+    let idx = items.findIndex(el => el.classList.contains('focused'));
+    const focusIdx = i => {
+      if (i < 0 || i >= items.length) return;
+      items.forEach(el => el.classList.remove('focused'));
+      items[i].classList.add('focused');
+      if (items[i].id) list.setAttribute('aria-activedescendant', items[i].id);
+      items[i].scrollIntoView({ block: 'nearest' });
+    };
+    if (e.key === 'ArrowDown') { e.preventDefault(); focusIdx(idx < 0 ? 0 : Math.min(idx + 1, items.length - 1)); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); focusIdx(idx < 0 ? items.length - 1 : Math.max(0, idx - 1)); }
+    else if (e.key === 'Home') { e.preventDefault(); focusIdx(0); }
+    else if (e.key === 'End') { e.preventDefault(); focusIdx(items.length - 1); }
+    else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (idx >= 0) items[idx].click(); }
+    else if (e.key === 'Backspace' || e.key === 'ArrowLeft') { e.preventDefault(); navigateUp(); }
+    else if ((e.key === 'a' || e.key === 'A') && (e.ctrlKey || e.metaKey)) { e.preventDefault(); if (selectMode) selectAllFiles(); }
+    else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      const prefix = (list._typeAhead || '') + e.key.toLowerCase();
+      list._typeAhead = prefix;
+      clearTimeout(list._typeAheadTimer);
+      list._typeAheadTimer = setTimeout(() => { list._typeAhead = ''; }, 500);
+      const found = items.findIndex(el => {
+        const nm = el.querySelector('.file-name');
+        return nm && nm.textContent.toLowerCase().startsWith(prefix);
+      });
+      if (found >= 0) focusIdx(found);
+    }
+  });
+}
+
 function refreshFiles() {
   if (currentPath) loadFiles(currentPath);
 }
@@ -2973,8 +3287,77 @@ document.querySelector('#term-ctx-menu .ctx-submenu-wrap > .ctx-item').addEventL
   e.stopPropagation();
   const wrap = e.currentTarget.closest('.ctx-submenu-wrap');
   wrap.classList.toggle('open');
+  e.currentTarget.setAttribute('aria-expanded', wrap.classList.contains('open'));
 });
 
+// ═══════════════════════════════════════════════════════
+// CONTEXT MENU KEYBOARD NAVIGATION
+// ═══════════════════════════════════════════════════════
+function setupCtxMenuKeyboard() {
+  ['ctx-menu', 'term-ctx-menu'].forEach(id => {
+    const menu = document.getElementById(id);
+    if (!menu) return;
+    menu.querySelectorAll('.ctx-item').forEach(el => {
+      if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '-1');
+    });
+    const openSubmenu = wrap => {
+      wrap.classList.add('open');
+      const toggle = wrap.querySelector(':scope > .ctx-item');
+      if (toggle) toggle.setAttribute('aria-expanded', 'true');
+      const first = wrap.querySelector('.ctx-submenu-items .ctx-item');
+      if (first) first.focus();
+    };
+    const closeSubmenu = wrap => {
+      wrap.classList.remove('open');
+      const toggle = wrap.querySelector(':scope > .ctx-item');
+      if (toggle) toggle.setAttribute('aria-expanded', 'false');
+      if (toggle) toggle.focus();
+    };
+    const visibleItems = () => [...menu.querySelectorAll('.ctx-item')].filter(el => {
+      const subWrap = el.closest('.ctx-submenu-items');
+      if (subWrap && !subWrap.parentElement.classList.contains('open')) return false;
+      return el.offsetParent !== null;
+    });
+    menu.addEventListener('keydown', e => {
+      const items = visibleItems();
+      if (!items.length) return;
+      let idx = items.indexOf(document.activeElement);
+      const activeItem = document.activeElement;
+      switch (e.key) {
+        case 'Escape': {
+          const wrap = activeItem && activeItem.closest('.ctx-submenu-wrap');
+          if (wrap && wrap.classList.contains('open')) { closeSubmenu(wrap); e.preventDefault(); return; }
+          if (id === 'ctx-menu') document.getElementById('ctx-menu').classList.remove('open');
+          else hideTermCtxMenu();
+          e.preventDefault();
+          return;
+        }
+        case 'ArrowDown': idx = (idx + 1) % items.length; break;
+        case 'ArrowUp': idx = (idx - 1 + items.length) % items.length; break;
+        case 'Home': idx = 0; break;
+        case 'End': idx = items.length - 1; break;
+        case 'ArrowRight': {
+          const wrap = activeItem && activeItem.closest('.ctx-submenu-wrap');
+          if (wrap && !wrap.classList.contains('open')) { e.preventDefault(); openSubmenu(wrap); }
+          return;
+        }
+        case 'ArrowLeft': {
+          const itemsWrap = activeItem && activeItem.closest('.ctx-submenu-items');
+          if (itemsWrap && itemsWrap.parentElement) { e.preventDefault(); closeSubmenu(itemsWrap.parentElement); }
+          return;
+        }
+        case 'Enter':
+        case ' ':
+          if (activeItem && activeItem.classList.contains('ctx-item')) { e.preventDefault(); activeItem.click(); }
+          return;
+        default: return;
+      }
+      e.preventDefault();
+      if (idx >= 0 && items[idx]) items[idx].focus();
+    });
+  });
+}
+
 function showCtxMenu(e, file) {
   e.preventDefault();
   ctxTarget = file;
@@ -3002,6 +3385,8 @@ function showCtxMenu(e, file) {
   menu.style.top = top + 'px';
   menu.classList.add('open');
   menu.style.display = '';
+  const firstItem = menu.querySelector('.ctx-item');
+  if (firstItem) firstItem.focus();
 }
 
 document.addEventListener('click', () => {
@@ -3164,19 +3549,23 @@ function startRename(path, name) {
 
 async function confirmRename() {
   const newName = document.getElementById('rename-input').value.trim();
-  if (!newName) return;
+  if (!newName) { showFieldError('rename-error', 'Enter a new name'); return; }
+  clearFieldError('rename-error');
+  setBtnBusy(document.getElementById('rename-ok-btn'), true);
   const r = await api('/api/files/rename', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ oldPath: renamePath, newName })
   });
+  setBtnBusy(document.getElementById('rename-ok-btn'), false);
   if (r.success) { toast('Renamed', 'success'); refreshFiles(); }
-  else toast(r.error, 'error');
+  else showFieldError('rename-error', r.error || 'Rename failed');
   closeOverlay('rename-overlay');
 }
 
 async function deleteFile(file) {
-  if (!confirm(`Delete "${file.name}"?${file.isDir ? '\n\nThis will delete the entire directory.' : ''}`)) return;
+  const ok = await confirmDialog({ title: 'Delete', message: `Delete "${file.name}"?${file.isDir ? '\n\nThis will delete the entire directory.' : ''}`, okText: 'Delete', danger: true });
+  if (!ok) return;
   const r = await api(`/api/files?path=${encodeURIComponent(file.path)}`, { method: 'DELETE' });
   if (r.success) { toast('Deleted', 'success'); refreshFiles(); }
   else toast(r.error, 'error');
@@ -3220,6 +3609,8 @@ function toggleSelectMode() {
   selectedFiles = [];
   document.getElementById('select-actions').style.display = selectMode ? 'flex' : 'none';
   document.getElementById('sidebar').dataset.selectMode = selectMode ? 'true' : '';
+  const flw = document.getElementById('file-list-wrap');
+  if (flw) flw.setAttribute('aria-multiselectable', String(selectMode));
   document.getElementById('select-count').textContent = '0 selected';
   document.querySelector('[onclick="toggleSelectMode()"]')?.classList.toggle('active', selectMode);
   refreshFiles();
@@ -3283,7 +3674,8 @@ function clearSelection() {
 async function deleteSelected() {
   if (!selectedFiles.length) return;
   const msg = `Delete ${selectedFiles.length} item${selectedFiles.length > 1 ? 's' : ''}?`;
-  if (!confirm(msg)) return;
+  const ok = await confirmDialog({ title: 'Delete', message: msg, okText: 'Delete', danger: true });
+  if (!ok) return;
   const results = await Promise.allSettled(
     [...selectedFiles].map(p =>
       api(`/api/files?path=${encodeURIComponent(p)}`, { method: 'DELETE' })
@@ -3324,15 +3716,17 @@ function newFolder() {
 
 async function confirmNewFolder() {
   const name = document.getElementById('newfolder-input').value.trim();
-  if (!name) return;
+  if (!name) { showFieldError('newfolder-error', 'Enter a folder name'); return; }
+  clearFieldError('newfolder-error');
+  setBtnBusy(document.getElementById('newfolder-ok-btn'), true);
   const r = await api('/api/files/mkdir', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ path: joinPath(currentPath, name) })
   });
-  if (r.success) { toast('Folder created', 'success'); refreshFiles(); }
-  else toast(r.error, 'error');
-  closeOverlay('newfolder-overlay');
+  setBtnBusy(document.getElementById('newfolder-ok-btn'), false);
+  if (r.success) { toast('Folder created', 'success'); refreshFiles(); closeOverlay('newfolder-overlay'); }
+  else showFieldError('newfolder-error', r.error || 'Could not create folder');
 }
 
 function newFile() {
@@ -3343,15 +3737,18 @@ function newFile() {
 
 async function confirmNewFile() {
   const name = document.getElementById('newfile-input').value.trim();
-  if (!name) return;
+  if (!name) { showFieldError('newfile-error', 'Enter a file name'); return; }
+  clearFieldError('newfile-error');
+  setBtnBusy(document.getElementById('newfile-ok-btn'), true);
   const filePath = joinPath(currentPath, name);
   const r = await api('/api/files/touch', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ path: filePath })
   });
+  setBtnBusy(document.getElementById('newfile-ok-btn'), false);
   if (r.success) { refreshFiles(); closeOverlay('newfile-overlay'); openFileEditor(filePath); }
-  else toast(r.error, 'error');
+  else showFieldError('newfile-error', r.error || 'Could not create file');
 }
 
 // Upload
@@ -3454,11 +3851,11 @@ async function uploadFileList(items) {
   
   // Final result
   if (failedItems.length === 0) {
-    setUploadProgress(100, 'success', `✓ ${completed}/${total} uploaded`);
+    setUploadProgress(100, 'success', `${completed}/${total} uploaded`);
   } else if (completed > 0) {
-    setUploadProgress(100, 'error', `⚠ ${completed} ok, ${failedItems.length} failed`);
+    setUploadProgress(100, 'error', `${completed} ok, ${failedItems.length} failed`);
   } else {
-    setUploadProgress(100, 'error', `✗ All ${total} failed`);
+    setUploadProgress(100, 'error', `All ${total} failed`);
   }
   
   clearUploadProgress(2000);
@@ -3493,9 +3890,17 @@ function initCodeMirror() {
       },
     }
   });
+  editor.on('change', () => updateEditorDirty());
   return editor;
 }
 
+function updateEditorDirty() {
+  const el = document.getElementById('editor-view');
+  if (!el) return;
+  const currentContent = editor ? editor.getValue() : document.getElementById('editor-textarea').value;
+  el.classList.toggle('editor-dirty', currentContent !== editorOriginalContent);
+}
+
 function getCMmode(fileName) {
   const m = fileName.match(/\.([^.]+)$/);
   if (!m) return null;
@@ -3536,7 +3941,8 @@ async function openFileEditor(path) {
   const r = await api(`/api/files/read?path=${encodeURIComponent(path)}`);
   if (r.error) { toast(r.error, 'error'); return; }
   if (r.length > MAX_EDITOR_SIZE) {
-    if (!confirm(`File is ${(r.length / 1024 / 1024).toFixed(1)}MB. Open anyway?`)) return;
+    const ok = await confirmDialog({ title: 'Large file', message: `File is ${(r.length / 1024 / 1024).toFixed(1)}MB. Open anyway?`, okText: 'Open', danger: true });
+    if (!ok) return;
   }
   editorPath = path;
   editorOriginalContent = r.content;
@@ -3550,6 +3956,9 @@ async function openFileEditor(path) {
   cm.setOption('mode', getCMmode(fileName) || 'text/plain');
   document.querySelector('.CodeMirror').style.display = '';
   cm.refresh();
+  const ta = document.getElementById('editor-textarea');
+  ta.oninput = () => updateEditorDirty();
+  updateEditorDirty();
 
   const preview = document.getElementById('editor-preview');
   const toggleBtn = document.getElementById('md-preview-toggle');
@@ -3565,7 +3974,7 @@ async function openFileEditor(path) {
     toggleBtn.style.display = 'none';
     if (refreshBtn) refreshBtn.style.display = 'none';
   }
-  document.getElementById('editor-filename').textContent = fileName + '  ' + path;
+  document.getElementById('editor-filename').textContent = fileName + '  /  ' + path;
   document.getElementById('editor-status').textContent = '';
 
   // Desktop: split layout; Mobile: overlay (handled by CSS)
@@ -3576,7 +3985,7 @@ async function openFileEditor(path) {
     const splitArea = document.getElementById('editor-split-area');
     const orientToggle = document.getElementById('editor-split-toggle');
     try {
-      const orient = localStorage.getItem('wt-editor-split-orientation');
+      const orient = safeStorage.getItem('wt-editor-split-orientation');
       const isHoriz = orient === 'horizontal';
       if (splitArea) splitArea.classList.toggle('horizontal', isHoriz);
       if (orientToggle) {
@@ -3600,7 +4009,7 @@ async function openFileEditor(path) {
     try {
       const isHoriz = splitArea && splitArea.classList.contains('horizontal');
       const key = isHoriz ? 'wt-editor-width' : 'wt-editor-height';
-      const saved = localStorage.getItem(key);
+      const saved = safeStorage.getItem(key);
       if (saved) {
         document.documentElement.style.setProperty('--editor-size', saved + 'px');
       }
@@ -3617,25 +4026,29 @@ async function openFileEditor(path) {
 
 async function saveFile() {
   if (!editorPath) { toast('No file open', 'error'); return; }
+  setBtnBusy(document.getElementById('editor-save-btn'), true);
   const content = editor ? editor.getValue() : document.getElementById('editor-textarea').value;
   const r = await api('/api/files/write', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ path: editorPath, content })
   });
+  setBtnBusy(document.getElementById('editor-save-btn'), false);
   if (r.success) {
     editorOriginalContent = content;
-    document.getElementById('editor-status').textContent = '✓ Saved';
+    updateEditorDirty();
+    document.getElementById('editor-status').textContent = 'Saved';
     toast('Saved', 'success');
     if (mdPreviewActive) refreshPreview();
     setTimeout(() => document.getElementById('editor-status').textContent = '', 2000);
   } else toast(r.error, 'error');
 }
 
-function closeEditor() {
+async function closeEditor() {
   const currentContent = editor ? editor.getValue() : document.getElementById('editor-textarea').value;
   if (currentContent !== editorOriginalContent) {
-    if (!confirm('You have unsaved changes. Close anyway?')) return;
+    const ok = await confirmDialog({ title: 'Unsaved changes', message: 'You have unsaved changes. Close anyway?', okText: 'Discard', cancelText: 'Keep Editing', danger: true });
+    if (!ok) return;
   }
   clearPreviewLiveReload();
   document.getElementById('editor-view').classList.remove('open');
@@ -3933,7 +4346,7 @@ function searchKeydown(e) {
 // ═══════════════════════════════════════════════════════
 function loadSettings() {
   try {
-    const s = JSON.parse(localStorage.getItem('wt-settings'));
+    const s = JSON.parse(safeStorage.getItem('wt-settings'));
     if (s && typeof s === 'object' && !Array.isArray(s)) {
       if (typeof s.theme === 'string' && ['system','tokyonight','light','solarized','gruvbox','dracula','monokai'].includes(s.theme)) settings.theme = s.theme;
       if (typeof s.fontSize === 'number' && s.fontSize >= 8 && s.fontSize <= 32) settings.fontSize = s.fontSize;
@@ -3965,7 +4378,34 @@ function loadSettings() {
   }
 }
 
-function saveSettings() { localStorage.setItem('wt-settings', JSON.stringify(settings)); }
+function saveSettings() { safeStorage.setItem('wt-settings', JSON.stringify(settings)); }
+
+const DEFAULT_SETTINGS = {
+  theme: 'light', fontSize: 14, font: "'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace",
+  cursor: 'block', blink: true, scrollback: 5000, bell: false,
+  mobilekeys: false, confirmclose: true, datasaver: false, autostart: false, keepAwake: false, termRightClick: true
+};
+
+async function resetSettings() {
+  const ok = await confirmDialog({ title: 'Reset settings', message: 'Reset all settings to defaults?', okText: 'Reset', danger: true });
+  if (!ok) return;
+  settings = { ...DEFAULT_SETTINGS };
+  saveSettings();
+  document.getElementById('s-theme').value = settings.theme;
+  document.getElementById('s-fontsize').value = settings.fontSize;
+  document.getElementById('s-scrollback').value = settings.scrollback;
+  document.getElementById('s-font').value = settings.font;
+  document.getElementById('s-cursor').value = settings.cursor;
+  syncToggle('blink'); syncToggle('bell'); syncToggle('mobilekeys'); syncToggle('confirmclose'); syncToggle('datasaver'); syncToggle('termRightClick');
+  applyTheme(settings.theme);
+  applyFontSize(settings.fontSize);
+  applyScrollback(settings.scrollback);
+  if (settings.font) applyFont(settings.font);
+  applyCursor(settings.cursor);
+  const mk = document.getElementById('mobile-keys');
+  if (mk) mk.style.display = settings.mobilekeys && window.innerWidth <= 768 ? 'flex' : 'none';
+  toast('Settings reset', 'success');
+}
 
 function saveSetting(k, v) { settings[k] = v; saveSettings(); }
 
@@ -4052,50 +4492,57 @@ function renderTunnels() {
   list.style.display = 'block';
   tunnelList.forEach(t => {
     const row = document.createElement('div');
-    row.style.cssText = 'padding:6px 0;border-bottom:1px solid var(--border)';
+    row.className = 'tunnel-row';
     const label = document.createElement('div');
-    label.style.cssText = 'font-size:10px;color:var(--fg2);margin-bottom:3px';
+    label.className = 'tunnel-label';
     label.textContent = t.localUrl;
     row.appendChild(label);
     const inner = document.createElement('div');
-    inner.style.cssText = 'display:flex;align-items:center;gap:5px;min-width:0';
+    inner.className = 'tunnel-inner';
     const urlSpan = document.createElement('span');
-    urlSpan.style.cssText = 'font-size:11px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+    urlSpan.className = 'tunnel-url';
     urlSpan.textContent = t.tunnelUrl;
     urlSpan.title = t.tunnelUrl;
     inner.appendChild(urlSpan);
     const status = document.createElement('span');
-    status.style.cssText = `font-size:9px;padding:1px 5px;border-radius:4px;flex-shrink:0;background:${t.alive ? 'var(--green)' : 'var(--yellow)'};color:var(--bg)`;
+    status.className = 'tunnel-status';
+    status.style.background = t.alive ? 'var(--green)' : 'var(--yellow)';
+    status.style.color = 'var(--bg)';
     status.textContent = t.alive ? 'Live' : 'Orphan';
     status.title = t.alive ? 'cloudflared is running' : 'cloudflared process not found';
     inner.appendChild(status);
     if (t.alive && t.targetAlive !== undefined) {
       const targetStatus = document.createElement('span');
       const ok = t.targetAlive;
-      targetStatus.style.cssText = `font-size:9px;padding:1px 5px;border-radius:4px;flex-shrink:0;background:${ok ? 'var(--green)' : 'var(--red)'};color:var(--bg);opacity:0.8`;
-      targetStatus.textContent = ok ? '✓' : '✗';
+      targetStatus.className = 'tunnel-target';
+      targetStatus.style.background = ok ? 'var(--green)' : 'var(--red)';
+      targetStatus.style.color = 'var(--bg)';
+      targetStatus.style.opacity = '0.8';
+      targetStatus.appendChild(mkSvg('9','9','0 0 24 24', ok
+        ? '<polyline points="20 6 9 17 4 12"/>'
+        : '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>'));
       targetStatus.title = ok ? `Target ${t.localUrl} is responding` : `Target ${t.localUrl} is not responding`;
       inner.appendChild(targetStatus);
     }
     const copyBtn = document.createElement('button');
-    copyBtn.className = 'icon-btn';
-    copyBtn.style.cssText = 'width:22px;height:22px;flex-shrink:0';
+    copyBtn.className = 'icon-btn tunnel-btn';
     copyBtn.title = 'Copy';
-    copyBtn.appendChild(mkSvg('10','10','0 0 24 24','<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>'));
+    copyBtn.setAttribute('aria-label', 'Copy tunnel URL');
+    copyBtn.appendChild(mkSvg('12','12','0 0 24 24','<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>'));
     copyBtn.addEventListener('click', () => copyText(t.tunnelUrl));
     inner.appendChild(copyBtn);
     const openBtn = document.createElement('button');
-    openBtn.className = 'icon-btn';
-    openBtn.style.cssText = 'width:22px;height:22px;flex-shrink:0';
+    openBtn.className = 'icon-btn tunnel-btn';
     openBtn.title = 'Open in new tab';
-    openBtn.appendChild(mkSvg('10','10','0 0 24 24','<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>'));
+    openBtn.setAttribute('aria-label', 'Open tunnel in new tab');
+    openBtn.appendChild(mkSvg('12','12','0 0 24 24','<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>'));
     openBtn.addEventListener('click', () => window.open(t.tunnelUrl, '_blank'));
     inner.appendChild(openBtn);
     const stopBtn = document.createElement('button');
-    stopBtn.className = 'icon-btn';
-    stopBtn.style.cssText = 'width:22px;height:22px;flex-shrink:0;color:var(--red)';
+    stopBtn.className = 'icon-btn tunnel-btn stop';
     stopBtn.title = 'Stop';
-    stopBtn.appendChild(mkSvg('10','10','0 0 24 24','<rect x="6" y="6" width="12" height="12" rx="1"/>'));
+    stopBtn.setAttribute('aria-label', 'Stop tunnel');
+    stopBtn.appendChild(mkSvg('12','12','0 0 24 24','<rect x="6" y="6" width="12" height="12" rx="1"/>'));
     stopBtn.addEventListener('click', () => stopTunnelById(t.id));
     inner.appendChild(stopBtn);
     row.appendChild(inner);
@@ -4104,22 +4551,24 @@ function renderTunnels() {
 }
 
 async function createTunnel() {
-  const btn = document.querySelector('[onclick="createTunnel()"]');
+  const btn = document.getElementById('tunnel-create-btn');
   if (btn && btn.dataset.busy === 'true') return;
-  if (btn) btn.dataset.busy = 'true';
   const url = document.getElementById('tunnel-url').value.trim();
-  if (!url) { if (btn) setTimeout(() => btn.dataset.busy = 'false', 2000); toast('Enter a local URL', 'error'); return; }
+  if (!url) { showFieldError('tunnel-field-error', 'Enter a local URL'); return; }
+  clearFieldError('tunnel-field-error');
+  setBtnBusy(btn, true);
   document.getElementById('tunnel-status').textContent = 'Creating tunnel…';
   const r = await api('/api/tunnel', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ url })
   });
+  setBtnBusy(btn, false);
   if (r.success) {
     tunnelList.push({ id: r.id, tunnelUrl: r.url, localUrl: url, alive: true, createdAt: Date.now() });
     renderTunnels();
     if (r.warning) {
-      document.getElementById('tunnel-status').textContent = '⚠️ ' + r.warning;
+      document.getElementById('tunnel-status').textContent = r.warning;
       toast(r.warning, 'warning');
     } else {
       document.getElementById('tunnel-status').textContent = '';
@@ -4127,9 +4576,8 @@ async function createTunnel() {
     }
   } else {
     document.getElementById('tunnel-status').textContent = '';
-    toast(r.error || 'Failed to create tunnel', 'error');
+    showFieldError('tunnel-field-error', r.error || 'Failed to create tunnel');
   }
-  if (btn) setTimeout(() => btn.dataset.busy = 'false', 2000);
 }
 
 async function stopTunnelById(id) {
@@ -4167,7 +4615,7 @@ function applyTheme(theme, save = true) {
   document.documentElement.dataset.theme = resolved;
   settings.theme = theme;
   document.getElementById('s-theme').value = theme;
-  tabs.forEach(t => { if (t.term) { t.term.options.theme = getXtermTheme(); } });
+  tabs.forEach(t => { if (t.term) { t.term.options.theme = getXtermTheme(); t.term.options.selectionTheme = getXtermSelectionTheme(); } });
   const themeColor = getComputedStyle(document.body).getPropertyValue('--bg2').trim();
   document.querySelector('meta[name="theme-color"]').content = themeColor;
   if (save) saveSettings();
@@ -4222,6 +4670,64 @@ function toggleSidebar() {
   }
 }
 
+let moreMenuOpen = false;
+function closeMoreMenu() {
+  const menu = document.getElementById('more-menu');
+  const btn = document.getElementById('more-btn');
+  if (menu) menu.classList.remove('open');
+  if (btn) btn.classList.remove('active');
+  document.removeEventListener('click', closeMoreMenuOnClickOutside, true);
+  moreMenuOpen = false;
+}
+function closeMoreMenuOnClickOutside(e) {
+  const menu = document.getElementById('more-menu');
+  const btn = document.getElementById('more-btn');
+  if (menu && menu.contains(e.target)) return;
+  if (btn && btn.contains(e.target)) return;
+  closeMoreMenu();
+}
+function toggleMoreMenu() {
+  if (moreMenuOpen) { closeMoreMenu(); return; }
+  moreMenuOpen = true;
+  const menu = document.getElementById('more-menu');
+  const btn = document.getElementById('more-btn');
+  if (menu) menu.classList.add('open');
+  if (btn) btn.classList.add('active');
+  setTimeout(() => {
+    document.addEventListener('click', closeMoreMenuOnClickOutside, true);
+    const first = menu && menu.querySelector('.mm-item');
+    if (first) first.focus();
+  }, 0);
+}
+
+function setupMoreMenuKeyboard() {
+  const menu = document.getElementById('more-menu');
+  if (!menu || menu.dataset._kbSetup) return;
+  menu.dataset._kbSetup = '1';
+  menu.querySelectorAll('.mm-item').forEach(el => { if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '-1'); });
+  menu.addEventListener('keydown', e => {
+    const items = [...menu.querySelectorAll('.mm-item')].filter(el => el.offsetParent !== null);
+    if (!items.length) return;
+    let idx = items.indexOf(document.activeElement);
+    switch (e.key) {
+      case 'Escape': e.preventDefault(); closeMoreMenu(); return;
+      case 'ArrowDown': idx = (idx + 1) % items.length; break;
+      case 'ArrowUp': idx = (idx - 1 + items.length) % items.length; break;
+      case 'Home': idx = 0; break;
+      case 'End': idx = items.length - 1; break;
+      case 'Tab': {
+        const last = document.activeElement === items[items.length - 1];
+        if (last && !e.shiftKey) { e.preventDefault(); closeMoreMenu(); return; }
+        if (document.activeElement === items[0] && e.shiftKey) { e.preventDefault(); closeMoreMenu(); return; }
+        return;
+      }
+      default: return;
+    }
+    e.preventDefault();
+    if (idx >= 0 && items[idx]) items[idx].focus();
+  });
+}
+
 function updateSidebarNarrowClass() {
   const sb = document.getElementById('sidebar');
   if (!sb) return;
@@ -4265,7 +4771,7 @@ function setupSidebarResize() {
     document.removeEventListener('mouseup', stopResize);
     document.removeEventListener('touchmove', doResize);
     document.removeEventListener('touchend', stopResize);
-    try { localStorage.setItem('wt-sidebar-width', String(sidebar.offsetWidth)); } catch(e) { console.warn(e); }
+    try { safeStorage.setItem('wt-sidebar-width', String(sidebar.offsetWidth)); } catch(e) { console.warn(e); }
   }
   handle.addEventListener('mousedown', startResize);
   handle.addEventListener('touchstart', startResize, { passive: false });
@@ -4274,7 +4780,7 @@ function setupSidebarResize() {
 function restoreSidebarWidth() {
   if (window.innerWidth <= 768) return;
   try {
-    const savedW = localStorage.getItem('wt-sidebar-width');
+    const savedW = safeStorage.getItem('wt-sidebar-width');
     if (savedW) {
       const w = Math.max(150, Math.min(600, parseInt(savedW)));
       if (w) {
@@ -4352,7 +4858,7 @@ function setupEditorResize() {
       const v = document.documentElement.style.getPropertyValue('--editor-size');
       if (v) {
         const key = isHorizontal() ? 'wt-editor-width' : 'wt-editor-height';
-        localStorage.setItem(key, v.replace('px', ''));
+        safeStorage.setItem(key, v.replace('px', ''));
       }
     } catch(e) { console.warn(e); }
   }
@@ -4391,7 +4897,7 @@ function toggleEditorSplit() {
   // Restore saved size for this orientation
   try {
     const key = isHoriz ? 'wt-editor-width' : 'wt-editor-height';
-    const saved = localStorage.getItem(key);
+    const saved = safeStorage.getItem(key);
     if (saved) {
       document.documentElement.style.setProperty('--editor-size', saved + 'px');
     }
@@ -4403,7 +4909,7 @@ function toggleEditorSplit() {
   });
 
   // Persist orientation
-  try { localStorage.setItem('wt-editor-split-orientation', isHoriz ? 'horizontal' : 'vertical'); } catch(e) { console.warn(e); }
+  try { safeStorage.setItem('wt-editor-split-orientation', isHoriz ? 'horizontal' : 'vertical'); } catch(e) { console.warn(e); }
 }
 
 // ═══════════════════════════════════════════════════════
@@ -4455,9 +4961,8 @@ function moveTabToEnd(fromId) {
   if (fromIdx === -1) return;
   const [moved] = tabs.splice(fromIdx, 1);
   tabs.push(moved);
-  const bar = document.getElementById('tab-bar');
-  const newTabBtn = document.getElementById('new-tab-btn');
-  if (moved.el && moved.el.parentNode === bar) bar.insertBefore(moved.el, newTabBtn);
+  const bar = document.getElementById('tab-scroll');
+  if (moved.el && moved.el.parentNode === bar) bar.appendChild(moved.el);
   saveTabState();
 }
 
@@ -4502,7 +5007,7 @@ function setupKeyboardShortcuts() {
     if (e.key === 'Escape') {
       const termMenu = document.getElementById('term-ctx-menu');
       if (termMenu && termMenu.style.display !== 'none') {
-        termMenu.style.display = 'none';
+        hideTermCtxMenu();
         return;
       }
       if (document.getElementById('ctx-menu').classList.contains('open')) {
@@ -4519,6 +5024,7 @@ function setupKeyboardShortcuts() {
         else if (id === 'newfolder-overlay' || id === 'newfile-overlay' || id === 'rename-overlay') closeOverlay(id);
         else if (id === 'image-viewer') closeImageViewer();
         else if (id === 'conflict-overlay') closeOverlay(id);
+        else closeOverlay(id);
       });
     }
   });
@@ -4679,6 +5185,8 @@ function pasteToTerminal() {
 function fallbackPaste(callback) {
   if (!_pasteInput) {
     _pasteInput = document.createElement('textarea');
+    _pasteInput.id = 'fallback-paste-area';
+    _pasteInput.name = 'paste-input';
     _pasteInput.style.cssText = 'position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;z-index:-1';
     document.body.appendChild(_pasteInput);
     _pasteInput.addEventListener('paste', () => {
@@ -4897,10 +5405,23 @@ function setupDragDrop() {
 // ═══════════════════════════════════════════════════════
 let lastFocusedElement = null;
 let _focusTrapHandler = null;
+function openShortcuts() {
+  openOverlay('shortcuts-overlay');
+  document.getElementById('shortcuts-overlay').querySelector('.btn').focus();
+}
 function openOverlay(id) {
   lastFocusedElement = document.activeElement;
   const overlay = document.getElementById(id);
   overlay.classList.add('open');
+  overlay.setAttribute('role', 'dialog');
+  overlay.setAttribute('aria-modal', 'true');
+  const titleEl = overlay.querySelector('h2');
+  if (titleEl) {
+    if (!titleEl.id) titleEl.id = id + '-title';
+    overlay.setAttribute('aria-labelledby', titleEl.id);
+  } else if (overlay.getAttribute('aria-label')) {
+    overlay.removeAttribute('aria-labelledby');
+  }
   const modal = overlay.querySelector('.modal, input, button');
   if (modal) setTimeout(() => modal.focus(), 50);
   installFocusTrap(overlay);
@@ -4912,7 +5433,7 @@ function closeOverlay(id) {
   overlay.classList.remove('open');
   removeFocusTrap();
   if (lastFocusedElement) {
-    setTimeout(() => lastFocusedElement.focus(), 50);
+    setTimeout(() => lastFocusedElement?.focus(), 50);
     lastFocusedElement = null;
   }
 }
@@ -4939,24 +5460,89 @@ function removeFocusTrap() {
   }
 }
 
+let _confirmState = null;
+function confirmDialog({ title = 'Confirm', message = '', okText = 'OK', cancelText = 'Cancel', danger = false } = {}) {
+  return new Promise(resolve => {
+    const ov = document.getElementById('confirm-overlay');
+    if (!ov || !ov.parentNode) { resolve(false); return; }
+    const okBtn = document.getElementById('confirm-ok-btn');
+    const cancelBtn = document.getElementById('confirm-cancel-btn');
+  const titleEl = document.getElementById('confirm-title');
+  const msgEl = document.getElementById('confirm-msg');
+  titleEl.textContent = title;
+  msgEl.textContent = message;
+  ov.setAttribute('role', 'dialog');
+  ov.setAttribute('aria-modal', 'true');
+  ov.setAttribute('aria-labelledby', 'confirm-title');
+    okBtn.textContent = okText;
+    cancelBtn.textContent = cancelText;
+    okBtn.classList.toggle('btn-danger', !!danger);
+    let settled = false;
+    const cleanup = () => {
+      if (settled) return;
+      settled = true;
+      _confirmState = null;
+      ov.classList.remove('open');
+      removeFocusTrap();
+      if (lastFocusedElement) { setTimeout(() => lastFocusedElement?.focus(), 50); lastFocusedElement = null; }
+    };
+    const finish = val => { const cb = _confirmState && _confirmState.resolve; cleanup(); if (cb) cb(val); };
+    const onKey = e => {
+      if (e.key === 'Escape') { e.stopPropagation(); finish(false); }
+      else if (e.key === 'Enter' && !(e.target instanceof HTMLButtonElement)) { e.preventDefault(); finish(true); }
+    };
+    _confirmState = { resolve, cleanup };
+    lastFocusedElement = document.activeElement;
+    okBtn.onclick = () => finish(true);
+    cancelBtn.onclick = () => finish(false);
+    ov.addEventListener('keydown', onKey);
+    ov.classList.add('open');
+    installFocusTrap(ov);
+    setTimeout(() => okBtn.focus(), 50);
+  });
+}
+
 document.querySelectorAll('.overlay').forEach(o => {
   o.addEventListener('click', e => {
     if (e.target !== o) return;
     if (o.id === 'sys-overlay') { closeSystemStats(); return; }
     if (o.id === 'finder-overlay') { clearTimeout(finderTimer); }
+    if (o.id === 'confirm-overlay') return; // dismiss handled by confirmDialog only
     closeOverlay(o.id);
   });
 });
 
+function setBtnBusy(btn, busy) {
+  if (!btn) return;
+  if (busy) { btn.dataset.busy = 'true'; btn.classList.add('loading'); btn.disabled = true; }
+  else { btn.dataset.busy = 'false'; btn.classList.remove('loading'); btn.disabled = false; }
+}
+
+function showFieldError(id, msg) {
+  const el = document.getElementById(id);
+  if (el) { el.textContent = msg || ''; el.classList.toggle('show', !!msg); }
+}
+function clearFieldError(id) { showFieldError(id, ''); }
+
+const TOAST_ICONS = {
+  success: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',
+  error: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
+  warning: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
+  info: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>'
+};
+
 function toast(msg, type = 'info') {
   const el = document.createElement('div');
   el.className = `toast ${type}`;
-  el.textContent = msg;
+  el.innerHTML = (TOAST_ICONS[type] || '') + '<span></span>';
+  el.querySelector('span').textContent = msg;
   const mk = document.getElementById('mobile-keys');
   if (mk && mk.style.display !== 'none' && window.getComputedStyle(mk).display !== 'none') {
     el.style.marginBottom = 'var(--mobilekey-h)';
   }
-  document.getElementById('toast-container').appendChild(el);
+  const container = document.getElementById('toast-container');
+  container.appendChild(el);
+  while (container.children.length > 4) container.firstChild.remove();
   setTimeout(() => el.remove(), 3000);
   return el;
 }
@@ -4966,6 +5552,7 @@ function updateConnStatus(connected) {
   if (dot) {
     dot.style.background = connected ? 'var(--green)' : 'var(--red)';
     dot.title = connected ? 'Connected' : 'Disconnected';
+    dot.setAttribute('aria-label', connected ? 'Connected' : 'Disconnected');
   }
 }
 
@@ -5007,11 +5594,14 @@ function setupSwipeGestures() {
   let pullStartY = 0;
   let pullOffset = 0;
   const fileListWrap = document.getElementById('file-list-wrap');
-  if (fileListWrap) {
+  const ptr = document.getElementById('ptr-indicator');
+  if (fileListWrap && ptr) {
     fileListWrap.addEventListener('touchstart', e => {
       if (fileListWrap.scrollTop <= 0) {
         pullStartY = e.touches[0].clientY;
         pullOffset = 0;
+        ptr.style.opacity = '0';
+        ptr.classList.remove('release');
       }
     }, { passive: true });
     fileListWrap.addEventListener('touchmove', e => {
@@ -5019,16 +5609,21 @@ function setupSwipeGestures() {
       const dy = e.touches[0].clientY - pullStartY;
       if (dy > 0 && fileListWrap.scrollTop <= 0) {
         pullOffset = dy;
-        fileListWrap.style.transform = `translateY(${Math.min(dy * 0.4, 60)}px)`;
+        const t = Math.min(dy * 0.4, 60);
+        fileListWrap.style.transform = `translateY(${t}px)`;
         fileListWrap.style.transition = 'none';
+        ptr.style.opacity = Math.min(1, dy / 40).toFixed(2);
+        ptr.classList.toggle('release', pullOffset > 60);
       }
     }, { passive: true });
     fileListWrap.addEventListener('touchend', () => {
       if (pullOffset > 60) {
+        ptr.classList.remove('release');
         refreshFiles();
       }
       fileListWrap.style.transition = 'transform 0.3s ease';
       fileListWrap.style.transform = '';
+      ptr.style.opacity = '0';
       pullStartY = 0;
       pullOffset = 0;
       setTimeout(() => { fileListWrap.style.transition = ''; }, 300);
@@ -5092,9 +5687,9 @@ function showPinScreen() {
 // BOOKMARKS
 // ═══════════════════════════════════════════════════════
 function getBookmarks() {
-  try { return JSON.parse(localStorage.getItem('wt-bookmarks')) || []; } catch(e) { console.warn('Failed to parse bookmarks:', e); return []; }
+  try { return JSON.parse(safeStorage.getItem('wt-bookmarks')) || []; } catch(e) { console.warn('Failed to parse bookmarks:', e); return []; }
 }
-function saveBookmarks(bm) { localStorage.setItem('wt-bookmarks', JSON.stringify(bm)); renderBookmarks(); }
+function saveBookmarks(bm) { safeStorage.setItem('wt-bookmarks', JSON.stringify(bm)); renderBookmarks(); }
 
 function renderBookmarks() {
   const list = document.getElementById('bookmarks-list');
@@ -5120,7 +5715,9 @@ function renderBookmarks() {
     div.appendChild(bmPath);
     const rmBtn = document.createElement('span');
     rmBtn.className = 'bm-remove';
-    rmBtn.textContent = '×';
+    rmBtn.setAttribute('role', 'button');
+    rmBtn.setAttribute('aria-label', 'Remove bookmark');
+    rmBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
     rmBtn.title = 'Remove';
     rmBtn.addEventListener('click', e => {
       e.stopPropagation();
@@ -5143,11 +5740,11 @@ function bookmarkCurrentDir() {
   toast('Bookmarked', 'success');
 }
 
-let bookmarksOpen = (() => { try { const v = localStorage.getItem('wt-bm-open'); return v !== null ? v === 'true' : true; } catch(e) { console.warn('Failed to read bookmarksOpen:', e); return true; } })();
+let bookmarksOpen = (() => { try { const v = safeStorage.getItem('wt-bm-open'); return v !== null ? v === 'true' : true; } catch(e) { console.warn('Failed to read bookmarksOpen:', e); return true; } })();
 function toggleBookmarks() {
   bookmarksOpen = !bookmarksOpen;
   document.getElementById('bookmarks-list').classList.toggle('open', bookmarksOpen);
-  try { localStorage.setItem('wt-bm-open', bookmarksOpen); } catch(e) { console.warn(e); }
+  try { safeStorage.setItem('wt-bm-open', bookmarksOpen); } catch(e) { console.warn(e); }
 }
 
 // ═══════════════════════════════════════════════════════
@@ -5220,10 +5817,10 @@ function finderKeydown(e) {
 const DEFAULT_CMDS = window.DEFAULT_CMDS || [];
 
 function getCmdLib() {
-  try { return JSON.parse(localStorage.getItem('wt-cmdlib')) || []; } catch(e) { return []; }
+  try { return JSON.parse(safeStorage.getItem('wt-cmdlib')) || []; } catch(e) { return []; }
 }
 function saveCmdLib(cmds) {
-  localStorage.setItem('wt-cmdlib', JSON.stringify(cmds));
+  safeStorage.setItem('wt-cmdlib', JSON.stringify(cmds));
 }
 
 function toggleCmdLib() {
@@ -5293,7 +5890,9 @@ function renderCmdLib(filter) {
       cmd.textContent = c.cmd;
       const runBtn = document.createElement('button');
       runBtn.className = 'cmd-lib-run';
-      runBtn.title = 'Run in terminal';
+    runBtn.title = 'Run in terminal';
+    runBtn.setAttribute('aria-label', 'Run in terminal');
+      runBtn.setAttribute('aria-label', 'Run in terminal');
       runBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="6,3 20,12 6,21"/></svg>';
       runBtn.addEventListener('click', e => {
         e.stopPropagation();
@@ -5307,7 +5906,8 @@ function renderCmdLib(filter) {
         const delBtn = document.createElement('button');
         delBtn.className = 'cmd-lib-del';
         delBtn.title = 'Delete';
-        delBtn.textContent = '×';
+        delBtn.setAttribute('aria-label', 'Delete command');
+        delBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
         delBtn.addEventListener('click', e => {
           e.stopPropagation();
           deleteCustomCmd(c.name, c.cmd);
@@ -5319,7 +5919,7 @@ function renderCmdLib(filter) {
         const tab = getActiveTab();
         if (!tab?.term) return;
         tab.term.focus();
-        document.execCommand('insertText', false, c.cmd);
+        tab.term.paste(c.cmd);
         toggleCmdLib();
       });
       section.appendChild(item);
@@ -5383,10 +5983,10 @@ let cmdHistMax = 50;
 let _cmdHistCache = [];
 
 function histHeaders() {
-  return { 'Content-Type': 'application/json', 'x-pin-token': localStorage.getItem('wt-pin') || '' };
+  return { 'Content-Type': 'application/json', 'x-pin-token': authToken || '' };
 }
 function histHeadersDelete() {
-  return { 'x-pin-token': localStorage.getItem('wt-pin') || '' };
+  return { 'x-pin-token': authToken || '' };
 }
 async function getCmdHist() {
   try {
@@ -5406,10 +6006,15 @@ function loadHistMax() {
 }
 async function addToCmdHist(cmd) {
   if (!cmd || !cmd.trim()) return;
-  // Strip ANSI escapes and control characters, keep only printable + space + tab
-  const clean = cmd.replace(/\x1b\[[0-9;]*[a-zA-Z~]/g, '')
-    .replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '')
-    .replace(/[\x00-\x08\x0e-\x1f]/g, '')
+  // Strip all ANSI/VT escape sequences and control characters
+  const clean = cmd
+    .replace(/\x1b[^a-zA-Z0-9]*[a-zA-Z0-9~]/g, '')       // CSI: ESC [ ... final
+    .replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '')    // OSC: ESC ] ... BEL/ST
+    .replace(/\x1b[OPP][^\x40-\x7e]*[\x40-\x7e]/g, '')    // SS3/DCS: ESC O/P ... final
+    .replace(/\x1b./g, '')                                   // Any other ESC sequence
+    .replace(/[\x00-\x1f\x7f]/g, '')                        // All remaining control chars
+    .replace(/^[>;\d\s]+(?=[a-zA-Z/\\~\-.])/, '')          // VT params before a real command char
+    .replace(/^[>;\d\s]+$/, '')                              // Pure VT params, no command at all
     .trim();
   if (!clean) return;
   try {
@@ -5510,7 +6115,8 @@ async function renderCmdHist() {
     const delBtn = document.createElement('button');
     delBtn.className = 'cmd-hist-del';
     delBtn.title = 'Remove';
-    delBtn.textContent = '×';
+    delBtn.setAttribute('aria-label', 'Remove from history');
+    delBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
     delBtn.addEventListener('click', e => { e.stopPropagation(); removeCmdHistItem(realIdx); });
     item.appendChild(delBtn);
 
@@ -5518,7 +6124,7 @@ async function renderCmdHist() {
       const tab = getActiveTab();
       if (!tab?.term) return;
       tab.term.focus();
-      document.execCommand('insertText', false, h.cmd);
+      tab.term.paste(h.cmd);
       toggleCmdLib();
     });
     list.appendChild(item);
@@ -5627,7 +6233,7 @@ async function refreshSystemStats(showLoading) {
 // ═══════════════════════════════════════════════════════
 let deferredPrompt = null;
 let installBannerDismissed = false;
-try { installBannerDismissed = localStorage.getItem('wt-install-dismissed') === 'true'; } catch(e) { console.warn(e); }
+try { installBannerDismissed = safeStorage.getItem('wt-install-dismissed') === 'true'; } catch(e) { console.warn(e); }
 
 window.addEventListener('beforeinstallprompt', e => {
   e.preventDefault();
@@ -5651,6 +6257,10 @@ function showInstallBanner(isIOS) {
     el.querySelector('.btn-primary').style.display = 'none';
     el.querySelector('.btn-ghost').textContent = 'Dismiss';
   }
+  const mk = document.getElementById('mobile-keys');
+  if (mk && window.getComputedStyle(mk).display !== 'none') {
+    el.style.bottom = 'var(--mobilekey-h)';
+  }
   el.style.display = 'flex';
   document.getElementById('toast-container').classList.add('banner-visible');
 }
@@ -5666,7 +6276,7 @@ function installPWA() {
 function dismissInstall() {
   document.getElementById('install-banner').style.display = 'none';
   document.getElementById('toast-container').classList.remove('banner-visible');
-  try { localStorage.setItem('wt-install-dismissed', 'true'); } catch(e) { console.warn(e); }
+  try { safeStorage.setItem('wt-install-dismissed', 'true'); } catch(e) { console.warn(e); }
   installBannerDismissed = true;
 }