Deploy KLH10 TOPS-20 emulator

build/wasm/bld-kl/index.html

@@ -195,11 +195,51 @@
             .vt100-screen::before { display: none; }
         }
 
+        /* ============================================
+           Special Key Toolbar (mobile + optional desktop)
+           ============================================ */
+        .key-toolbar {
+            display: none;
+            gap: 6px;
+            padding: 8px 4px;
+            justify-content: center;
+            flex-wrap: wrap;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        .key-toolbar button {
+            font-family: 'Consolas', 'Courier New', monospace;
+            font-size: 14px;
+            color: #4fc3f7;
+            background: #333;
+            border: 1px solid #555;
+            border-radius: 6px;
+            min-width: 44px;
+            height: 44px;
+            padding: 0 10px;
+            cursor: pointer;
+            touch-action: manipulation;
+            -webkit-tap-highlight-color: transparent;
+            user-select: none;
+        }
+        .key-toolbar button:active {
+            background: #4fc3f7;
+            color: #000;
+        }
+        .key-toolbar .key-ctrl.active {
+            background: #4fc3f7;
+            color: #000;
+            border-color: #4fc3f7;
+        }
+        @media (max-width: 600px) {
+            .key-toolbar { display: flex; }
+        }
+
         /* Boot overlay */
         .boot-overlay {
             position: absolute;
             top: 0; left: 0; right: 0; bottom: 0;
-            background: rgba(0, 0, 0, 0.75);
+            background: rgba(0, 0, 0, 0.35);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -258,8 +298,22 @@
                 <div id="terminal"></div>
             </div>
         </div>
+        <div class="key-toolbar" id="keyToolbar">
+            <button data-key="esc">Esc</button>
+            <button data-key="tab">Tab</button>
+            <button data-key="ctrl" class="key-ctrl">Ctrl</button>
+            <button data-key="up">&#x2191;</button>
+            <button data-key="down">&#x2193;</button>
+            <button data-key="left">&#x2190;</button>
+            <button data-key="right">&#x2192;</button>
+            <button data-key="ctrl-c">^C</button>
+            <button data-key="ctrl-z">^Z</button>
+            <button data-key="ctrl-d">^D</button>
+        </div>
         <div class="mode-toggle" style="text-align: center; margin-bottom: 16px;">
             <a href="#" id="toggleFrame">Hide Terminal Frame</a>
+            &nbsp;&middot;&nbsp;
+            <a href="#" id="toggleKeybar">Show Key Toolbar</a>
         </div>
 
         <div style="text-align: center; font-size: 13px; color: #999; margin-top: 20px;">

build/wasm/bld-kl/main.js

@@ -108,6 +108,14 @@ class KLH10WebInterface {
         this.terminal.onData((data) => {
             if (this.autoBootInProgress) return; // Block input during auto-boot
             if (this.worker && this.emulatorReady && this.inputRingBuffer) {
+                // Apply Ctrl sticky modifier from key toolbar
+                if (this.ctrlActive && data.length === 1 && data >= '@' && data <= '~') {
+                    data = String.fromCharCode(data.toUpperCase().charCodeAt(0) - 64);
+                    this.ctrlActive = false;
+                    const ctrlBtn = document.querySelector('.key-ctrl');
+                    if (ctrlBtn) ctrlBtn.classList.remove('active');
+                }
+
                 // Echo input based on both mode and echo setting
                 if (this.inRuncmdMode && this.terminalEchoEnabled) {
                     // Handle special characters
@@ -121,20 +129,8 @@ class KLH10WebInterface {
                         this.terminal.write(data);
                     }
                 }
-                
-                // Write directly to WASM memory ring buffer - true zero-copy!
-                
-                
-                for (let i = 0; i < data.length; i++) {
-                    const char = data[i];
-                    const success = this.inputRingBuffer.writeInputChar(char);
-                    
-                    
-                    if (!success) {
-                        console.warn('Main: Input ring buffer full, character dropped');
-                        break;
-                    }
-                }
+
+                this.sendInput(data);
             }
         });
 
@@ -186,13 +182,25 @@ class KLH10WebInterface {
         // Cell dimensions are approximately: width ~ fontSize * 0.6, height ~ fontSize * 1.2
         const maxByWidth = screenWidth / (80 * 0.6);
         const maxByHeight = screenHeight / (24 * 1.2);
-        const fontSize = Math.max(8, Math.min(Math.floor(Math.min(maxByWidth, maxByHeight)), 20));
+        const fontSize = Math.max(4, Math.min(Math.floor(Math.min(maxByWidth, maxByHeight)), 32));
 
         this.terminal.options.fontSize = fontSize;
         this.fitAddon.fit();
         this.terminal.resize(80, 24);
     }
 
+    // Send input data to the emulator via ring buffer
+    sendInput(data) {
+        if (!this.worker || !this.emulatorReady || !this.inputRingBuffer) return;
+        for (let i = 0; i < data.length; i++) {
+            const char = data[i];
+            if (!this.inputRingBuffer.writeInputChar(char)) {
+                console.warn('Main: Input ring buffer full, character dropped');
+                break;
+            }
+        }
+    }
+
     setupEventListeners() {
         // VT100 frame toggle
         const toggleLink = document.getElementById('toggleFrame');
@@ -206,6 +214,53 @@ class KLH10WebInterface {
             });
         }
 
+        // Key toolbar toggle (desktop)
+        const keybarToggle = document.getElementById('toggleKeybar');
+        if (keybarToggle) {
+            keybarToggle.addEventListener('click', (e) => {
+                e.preventDefault();
+                const toolbar = document.getElementById('keyToolbar');
+                const isVisible = toolbar.style.display === 'flex';
+                toolbar.style.display = isVisible ? '' : 'flex';
+                e.target.textContent = isVisible ? 'Show Key Toolbar' : 'Hide Key Toolbar';
+            });
+        }
+
+        // Key toolbar buttons
+        this.ctrlActive = false;
+        const keyToolbar = document.getElementById('keyToolbar');
+        if (keyToolbar) {
+            const keyMap = {
+                'esc': '\x1b',
+                'tab': '\t',
+                'up': '\x1b[A',
+                'down': '\x1b[B',
+                'left': '\x1b[D',
+                'right': '\x1b[C',
+                'ctrl-c': '\x03',
+                'ctrl-z': '\x1a',
+                'ctrl-d': '\x04',
+            };
+
+            keyToolbar.addEventListener('click', (e) => {
+                const btn = e.target.closest('button');
+                if (!btn) return;
+                e.preventDefault();
+
+                const key = btn.dataset.key;
+                if (key === 'ctrl') {
+                    // Toggle Ctrl sticky modifier
+                    this.ctrlActive = !this.ctrlActive;
+                    btn.classList.toggle('active', this.ctrlActive);
+                } else if (keyMap[key]) {
+                    this.sendInput(keyMap[key]);
+                }
+
+                // Refocus terminal so soft keyboard stays open
+                this.terminal.focus();
+            });
+        }
+
         // Simple mode
         document.getElementById('autoBootBtn').addEventListener('click', () => this.autoBoot());
         document.getElementById('showAdvanced').addEventListener('click', (e) => {