doc: add README with build, config, deployment, and OSCAR hotkey guide

Covers architecture, building, configuration, deployment, port
switching with Avocent OSCAR (tested hotkey syntax with recommended
pause settings), full hotkey syntax reference, and protocol heritage
naming the Peppercon e-RIC/LARA lineage.

Completes success criterion 5: source on git.lair.cafe with a README
that names the Peppercon e-RIC heritage.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.gitea/workflows/publish.yml

@@ -10,6 +10,10 @@ env:
 jobs:
   frontend:
     runs-on: rust
+    if: >-
+      contains(github.event.head_commit.message, '[deploy: frontend]')
+      || contains(github.event.head_commit.message, '[deploy: backend, frontend]')
+      || contains(github.event.head_commit.message, '[deploy: frontend, backend]')
     steps:
       - uses: actions/checkout@v4
 
@@ -37,6 +41,10 @@ jobs:
 
   backend:
     runs-on: rust
+    if: >-
+      contains(github.event.head_commit.message, '[deploy: backend]')
+      || contains(github.event.head_commit.message, '[deploy: backend, frontend]')
+      || contains(github.event.head_commit.message, '[deploy: frontend, backend]')
     steps:
       - uses: actions/checkout@v4
 

Cargo.lock

@@ -267,6 +267,7 @@ dependencies = [
  "futures-util",
  "reqwest",
  "serde",
+ "serde_json",
  "tokio",
  "toml",
  "tower-http 0.5.2",

README.md

@@ -0,0 +1,142 @@
+# blekin
+
+A Rust proxy that translates the Belkin OmniView Remote IP Manager's proprietary
+e-RIC RFB protocol (Peppercon LARA, originally served via a Java applet) into a
+modern HTML5 KVM console. No Java anywhere in the stack.
+
+## What it does
+
+```
+Browser (Vite + TypeScript)
+   │ WebSocket (binary, RGBA blits + input events)
+   ▼
+blekin proxy (Rust, tokio + axum)
+   │ HTTP session (cookie + APPLET_ID extraction)
+   │ TCP to OmniView:443 (e-RIC RFB)
+   ▼
+Belkin OmniView Remote IP Manager → downstream KVM switch → servers
+```
+
+The proxy authenticates with the OmniView's web interface, establishes an e-RIC
+RFB session over TCP, decodes the proprietary 8bpp protocol to RGBA, and bridges
+video frames and input events to a browser-based console over WebSocket.
+
+## Features
+
+- Full KVM console: keyboard, mouse, scroll wheel
+- Encodings: Raw, CopyRect, Hextile, Tight (with zlib), IIP tile cache, Raw-tile
+- Send Key menu for browser-intercepted keys (Print Screen, Scroll Lock, etc.)
+- Port switching with downstream KVM support (Avocent OSCAR tested)
+- Port configuration: naming, hotkeys, visibility
+- Auto-reconnect with exponential backoff
+- Session persistence across page refreshes
+- Dark theme, fullscreen mode
+
+## Building
+
+```sh
+# Backend
+cargo build --release -p ericrfb-proxy
+
+# Frontend
+cd crates/ericrfb-frontend
+npm ci
+npm run build   # outputs to ../../dist/
+```
+
+## Configuration
+
+The proxy reads `config.toml` or falls back to the `BLEKIN_HOST` environment variable:
+
+```toml
+bind = "0.0.0.0:3000"
+static_dir = "dist"
+
+[omniview]
+host = "10.3.0.130"
+http_port = 80
+rfb_port = 443
+```
+
+## Deployment
+
+The systemd unit runs the proxy as a service. Nginx serves the static frontend
+and reverse-proxies `/api/` to the proxy:
+
+```sh
+# Backend
+sudo cp target/release/ericrfb-proxy /usr/local/bin/
+sudo cp asset/systemd/blekin.service /etc/systemd/system/
+sudo systemctl enable --now blekin.service
+
+# Frontend
+sudo cp -r dist/* /var/www/blekin.example.com/
+sudo cp asset/nginx/blekin.example.conf /etc/nginx/sites-available/
+sudo ln -sf /etc/nginx/sites-available/blekin.example.conf /etc/nginx/sites-enabled/
+sudo nginx -t && sudo systemctl reload nginx
+```
+
+## Port switching with downstream KVM
+
+The Belkin OmniView can control a downstream KVM switch (e.g., Avocent AutoView)
+by sending configurable hotkey sequences when switching ports. Configure these
+in the Ports page of the blekin interface.
+
+### Avocent OSCAR setup
+
+The Avocent OSCAR menu is invoked with Print Screen, then expects the port's EID
+(Electronic ID) typed as digits, followed by Enter. Each phase needs a pause to
+let the OSCAR process the input.
+
+**Recommended settings:**
+
+- **Key pause:** `1000` ms (in the Ports page global settings)
+- **Hotkey format:** `PRINTSCREEN-***<EID digits>-***ENTER`
+
+The `*` character inserts a pause of the configured duration. Three `***` = 3
+seconds, which gives the OSCAR reliable processing time.
+
+**Examples** (with key pause = 1000ms):
+
+| Server | Avocent EID | Hotkey |
+|--------|-------------|--------|
+| server-a | 01 | `PRINTSCREEN-***1-***ENTER` |
+| server-b | 05 | `PRINTSCREEN-***5-***ENTER` |
+| server-c | 17 | `PRINTSCREEN-***1-7-***ENTER` |
+| server-d | 22 | `PRINTSCREEN-***2-2-***ENTER` |
+| server-e | 31 | `PRINTSCREEN-***3-1-***ENTER` |
+
+Note: don't type the leading zero in EIDs (per Avocent OSCAR convention).
+
+### Hotkey syntax reference
+
+The Belkin hotkey syntax uses key names connected by operators:
+
+| Operator | Meaning |
+|----------|---------|
+| `+` | Press additionally (hold previous, press next) |
+| `-` | Release all pressed keys |
+| `>` | Release most recently pressed key only |
+| `*` | Pause for the configured key pause duration |
+
+Key names: `A`-`Z`, `0`-`9`, `F1`-`F12`, `PRINTSCREEN`, `ENTER`, `ESCAPE`,
+`LCTRL`/`CTRL`, `LALT`/`ALT`, `LSHIFT`/`SHIFT`, `SPACE`, `TAB`, `DELETE`,
+`INSERT`, `HOME`, `END`, `PAGE_UP`, `PAGE_DOWN`, `UP`, `DOWN`, `LEFT`, `RIGHT`,
+`BACK_SPACE`, `NUM_LOCK`, `NUMPAD0`-`NUMPAD9`, `NUMPADPLUS`, `NUMPADMINUS`,
+`NUMPADMUL`, `NUMPAD/`, `NUMPADENTER`, `SCROLL_LOCK`, `BREAK`, `CAPS_LOCK`.
+
+## Protocol heritage
+
+The e-RIC RFB protocol is a proprietary variant of VNC/RFB developed by
+Peppercon (later acquired by Raritan) under the name "LARA" (LAN Attached
+Remote Access). It was used in several KVM-over-IP products including the Belkin
+OmniView Remote IP Manager (F1DE101H). The protocol shares structural
+similarities with standard RFB but uses its own handshake, pixel format
+negotiation, and encoding extensions.
+
+This implementation was reverse-engineered from the CFR-decompiled `rc.jar` Java
+applet that originally provided the browser-based console.
+
+## License
+
+MIT

asset/nginx/blekin.kosherinata.internal.conf

@@ -1,6 +1,12 @@
 server {
-    listen 80;
     server_name blekin.kosherinata.internal;
+    listen 443 ssl;
+    http2 on;
+
+    ssl_certificate /etc/nginx/tls/cert/blekin.kosherinata.internal.pem;
+    ssl_certificate_key /etc/nginx/tls/key/blekin.kosherinata.internal.pem;
+    #ssl_trusted_certificate /etc/pki/ca-trust/source/anchors/root-internal.pem;
+    ssl_protocols TLSv1.3;
 
     root /var/www/blekin.kosherinata.internal;
     index index.html;

asset/sudoers.d/ui_gitea_ci

@@ -0,0 +1,5 @@
+gitea_ci ALL=(root) NOPASSWD: /usr/bin/ln -sf /etc/nginx/sites-available/blekin.kosherinata.internal.conf /etc/nginx/sites-enabled/blekin.kosherinata.internal.conf
+gitea_ci ALL=(root) NOPASSWD: /usr/bin/nginx -t
+gitea_ci ALL=(root) NOPASSWD: /usr/bin/systemctl reload nginx.service
+gitea_ci ALL=(root) NOPASSWD: /usr/bin/rsync * /var/www/blekin.kosherinata.internal/
+gitea_ci ALL=(root) NOPASSWD: /usr/bin/rsync * /etc/nginx/sites-available/blekin.kosherinata.internal.conf

asset/sudoers.d/ws_gitea_ci

@@ -0,0 +1,5 @@
+gitea_ci ALL=(root) NOPASSWD: /usr/bin/rsync * /usr/local/bin/ericrfb-proxy
+gitea_ci ALL=(root) NOPASSWD: /usr/bin/rsync * /etc/systemd/system/blekin.service
+gitea_ci ALL=(root) NOPASSWD: /usr/bin/systemctl start blekin.service
+gitea_ci ALL=(root) NOPASSWD: /usr/bin/systemctl stop blekin.service
+gitea_ci ALL=(root) NOPASSWD: /usr/bin/systemctl enable blekin.service

asset/systemd/blekin.service

@@ -5,6 +5,8 @@ Wants=network-online.target
 
 [Service]
 Type=simple
+User=blekin
+Group=blekin
 ExecStart=/usr/local/bin/ericrfb-proxy
 WorkingDirectory=/var/lib/blekin
 Environment=RUST_LOG=ericrfb_proxy=info

asset/systemd/step-kosherinata@.service

@@ -0,0 +1,15 @@
+[Unit]
+Description=step cert renew for %i.kosherinata.internal
+Documentation=https://smallstep.com/docs/step-ca/renewal
+
+[Service]
+Type=oneshot
+ExecCondition=/usr/bin/step certificate needs-renewal \
+    /etc/nginx/tls/cert/%i.kosherinata.internal.pem
+ExecStart=/usr/bin/step ca renew \
+    --force \
+    --ca-url https://ca.internal \
+    --root /etc/pki/ca-trust/source/anchors/root-internal.pem \
+    /etc/nginx/tls/cert/%i.kosherinata.internal.pem \
+    /etc/nginx/tls/key/%i.kosherinata.internal.pem
+ExecStartPost=/usr/bin/systemctl reload nginx.service

crates/ericrfb-frontend/src/console.ts

@@ -1,163 +0,0 @@
-import { codeToScancode } from './input'
-import {
-  TAG_BLIT, TAG_RESIZE,
-  makeKeyPress, makeKeyRelease, makePointer, makeCtrlAltDel,
-} from './protocol'
-
-export function startConsole(
-  app: HTMLElement,
-  appletId: string,
-  port: number,
-  boardName: string,
-) {
-  app.innerHTML = `
-    <div class="toolbar">
-      <span>${boardName}</span>
-      <button id="btn-cad">Ctrl+Alt+Del</button>
-      <button id="btn-fs">Fullscreen</button>
-      <span class="status" id="status">connecting...</span>
-    </div>
-    <div class="console-wrap">
-      <canvas id="canvas" tabindex="0"></canvas>
-    </div>
-  `
-
-  const canvas = document.getElementById('canvas') as HTMLCanvasElement
-  const ctx = canvas.getContext('2d')!
-  const statusEl = document.getElementById('status')!
-
-  // WebSocket
-  const wsProto = location.protocol === 'https:' ? 'wss:' : 'ws:'
-  const wsUrl = `${wsProto}//${location.host}/api/ws?applet_id=${encodeURIComponent(appletId)}&port=${port}`
-  const ws = new WebSocket(wsUrl)
-  ws.binaryType = 'arraybuffer'
-
-  ws.onopen = () => {
-    statusEl.textContent = 'connected'
-    statusEl.classList.add('connected')
-    canvas.focus()
-  }
-
-  ws.onclose = () => {
-    statusEl.textContent = 'disconnected'
-    statusEl.classList.remove('connected')
-  }
-
-  ws.onerror = () => {
-    statusEl.textContent = 'error'
-    statusEl.classList.remove('connected')
-  }
-
-  ws.onmessage = (ev: MessageEvent) => {
-    if (!(ev.data instanceof ArrayBuffer)) return
-    const view = new DataView(ev.data)
-    const tag = view.getUint8(0)
-
-    switch (tag) {
-      case TAG_RESIZE: {
-        const w = view.getUint16(1)
-        const h = view.getUint16(3)
-        canvas.width = w
-        canvas.height = h
-        break
-      }
-      case TAG_BLIT: {
-        const x = view.getUint16(1)
-        const y = view.getUint16(3)
-        const w = view.getUint16(5)
-        const h = view.getUint16(7)
-        const rgba = new Uint8ClampedArray(ev.data, 9)
-        const img = new ImageData(rgba, w, h)
-        ctx.putImageData(img, x, y)
-        break
-      }
-    }
-  }
-
-  // Keyboard input
-  let buttonMask = 0
-
-  canvas.addEventListener('keydown', (e) => {
-    e.preventDefault()
-    const sc = codeToScancode(e.code)
-    if (sc !== undefined && ws.readyState === WebSocket.OPEN) {
-      ws.send(makeKeyPress(sc))
-    }
-  })
-
-  canvas.addEventListener('keyup', (e) => {
-    e.preventDefault()
-    const sc = codeToScancode(e.code)
-    if (sc !== undefined && ws.readyState === WebSocket.OPEN) {
-      ws.send(makeKeyRelease(sc))
-    }
-  })
-
-  // Mouse input
-  function sendPointer(e: MouseEvent) {
-    if (ws.readyState !== WebSocket.OPEN) return
-    const rect = canvas.getBoundingClientRect()
-    const scaleX = canvas.width / rect.width
-    const scaleY = canvas.height / rect.height
-    const x = Math.round((e.clientX - rect.left) * scaleX)
-    const y = Math.round((e.clientY - rect.top) * scaleY)
-    ws.send(makePointer(
-      Math.max(0, Math.min(x, canvas.width - 1)),
-      Math.max(0, Math.min(y, canvas.height - 1)),
-      buttonMask,
-    ))
-  }
-
-  canvas.addEventListener('mousemove', sendPointer)
-
-  canvas.addEventListener('mousedown', (e) => {
-    e.preventDefault()
-    canvas.focus()
-    if (e.button === 0) buttonMask |= 1
-    else if (e.button === 1) buttonMask |= 2
-    else if (e.button === 2) buttonMask |= 4
-    sendPointer(e)
-  })
-
-  canvas.addEventListener('mouseup', (e) => {
-    e.preventDefault()
-    if (e.button === 0) buttonMask &= ~1
-    else if (e.button === 1) buttonMask &= ~2
-    else if (e.button === 2) buttonMask &= ~4
-    sendPointer(e)
-  })
-
-  canvas.addEventListener('contextmenu', (e) => e.preventDefault())
-
-  canvas.addEventListener('wheel', (e) => {
-    e.preventDefault()
-    if (ws.readyState !== WebSocket.OPEN) return
-    const rect = canvas.getBoundingClientRect()
-    const scaleX = canvas.width / rect.width
-    const scaleY = canvas.height / rect.height
-    const x = Math.round((e.clientX - rect.left) * scaleX)
-    const y = Math.round((e.clientY - rect.top) * scaleY)
-    // Scroll up = button 4 (bit 3), scroll down = button 5 (bit 4)
-    const scrollMask = e.deltaY < 0 ? 8 : 16
-    ws.send(makePointer(x, y, buttonMask | scrollMask))
-    // Release scroll button immediately
-    ws.send(makePointer(x, y, buttonMask))
-  })
-
-  // Toolbar
-  document.getElementById('btn-cad')!.addEventListener('click', () => {
-    if (ws.readyState === WebSocket.OPEN) {
-      ws.send(makeCtrlAltDel())
-    }
-    canvas.focus()
-  })
-
-  document.getElementById('btn-fs')!.addEventListener('click', () => {
-    if (document.fullscreenElement) {
-      document.exitFullscreen()
-    } else {
-      app.requestFullscreen()
-    }
-    canvas.focus()
-  })
-}

crates/ericrfb-frontend/src/hotkey.ts

@@ -0,0 +1,92 @@
+// Parse Belkin hotkey syntax and convert to scancode sequences.
+//
+// Syntax: [confirm] <keyname>((+|->|>)<keyname>)*
+//   + = press simultaneously (hold first, press second)
+//   > = press sequentially (release first, then press second)
+//   -> = same as >
+//
+// Examples:
+//   PrintScreen>0>1    → tap PrintScreen, tap 0, tap 1
+//   Ctrl+Alt+Del       → hold Ctrl+Alt, tap Del, release all
+//   PrintScreen>1>7    → tap PrintScreen, tap 1, tap 7
+
+import { makeKeyPress, makeKeyRelease } from './protocol'
+
+// Belkin key names → e-RIC scancodes (from KeyTranslator.java)
+const KEY_NAMES: Record<string, number> = {
+  // Letters
+  A: 29, B: 47, C: 45, D: 31, E: 17, F: 32, G: 33, H: 34, I: 22,
+  J: 35, K: 36, L: 37, M: 49, N: 48, O: 23, P: 24, Q: 15, R: 18,
+  S: 30, T: 19, U: 21, V: 46, W: 16, X: 44, Y: 20, Z: 43,
+
+  // Digits
+  '0': 10, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9,
+
+  // Modifiers
+  Ctrl: 54, Alt: 55, Shift: 41, Win: 105,
+  CtrlLeft: 54, CtrlRight: 58, AltLeft: 55, AltRight: 57,
+  ShiftLeft: 41, ShiftRight: 53,
+
+  // Special keys
+  Esc: 59, Escape: 59, Tab: 14, CapsLock: 28, Space: 56,
+  Enter: 27, Return: 27, Backspace: 13, Del: 78, Delete: 78,
+  Insert: 75, Home: 76, End: 79, PageUp: 77, PageDown: 80,
+  PrintScreen: 72, Print: 72, SysRq: 72,
+  ScrollLock: 73, Pause: 74, Break: 74,
+  NumLock: 85,
+
+  // Arrow keys
+  Up: 81, Down: 83, Left: 82, Right: 84,
+
+  // F-keys
+  F1: 60, F2: 61, F3: 62, F4: 63, F5: 64, F6: 65,
+  F7: 66, F8: 67, F9: 68, F10: 69, F11: 70, F12: 71,
+
+  // Numpad
+  NumPlus: 89, 'Num+': 89, NumMinus: 99, 'Num-': 99,
+  NumMultiply: 94, 'Num*': 94, NumDivide: 90, 'Num/': 90,
+  NumEnter: 98,
+}
+
+/**
+ * Parse a Belkin hotkey string into a sequence of WS messages to send.
+ * Returns an array of ArrayBuffer messages (press/release pairs).
+ */
+export function parseHotkey(hotkey: string): ArrayBuffer[] {
+  if (!hotkey.trim()) return []
+
+  const messages: ArrayBuffer[] = []
+  // Split on > (sequential) first, preserving + groups
+  const groups = hotkey.split(/->|>/).map(g => g.trim()).filter(Boolean)
+
+  for (const group of groups) {
+    // Each group may contain + (simultaneous keys)
+    const keys = group.split('+').map(k => k.trim()).filter(Boolean)
+    const scancodes: number[] = []
+
+    for (const key of keys) {
+      const sc = KEY_NAMES[key]
+      if (sc !== undefined) {
+        scancodes.push(sc)
+      }
+    }
+
+    if (scancodes.length === 0) continue
+
+    if (scancodes.length === 1) {
+      // Single key: press then release
+      messages.push(makeKeyPress(scancodes[0]))
+      messages.push(makeKeyRelease(scancodes[0]))
+    } else {
+      // Combo: press all in order, release in reverse
+      for (const sc of scancodes) {
+        messages.push(makeKeyPress(sc))
+      }
+      for (const sc of scancodes.reverse()) {
+        messages.push(makeKeyRelease(sc))
+      }
+    }
+  }
+
+  return messages
+}

crates/ericrfb-frontend/src/input.ts

@@ -1,47 +1,59 @@
 // JavaScript KeyboardEvent.code → e-RIC scancode (KbdLayout_104pc)
+// Derived from KeyTranslator.java line 14 (Java VK_* → keynr table).
 // Must match crates/ericrfb/src/input.rs js_code_to_scancode()
 
 const KEY_MAP: Record<string, number> = {
-  Escape: 0,
-  F1: 59, F2: 60, F3: 61, F4: 62, F5: 63, F6: 64,
-  F7: 65, F8: 66, F9: 67, F10: 68, F11: 69, F12: 70,
+  // Number row (keynr 0-13)
+  Backquote: 0,
+  Digit1: 1, Digit2: 2, Digit3: 3, Digit4: 4, Digit5: 5,
+  Digit6: 6, Digit7: 7, Digit8: 8, Digit9: 9, Digit0: 10,
+  Minus: 11, Equal: 12, Backspace: 13,
 
-  Backquote: 1,
-  Digit1: 2, Digit2: 3, Digit3: 4, Digit4: 5, Digit5: 6,
-  Digit6: 7, Digit7: 8, Digit8: 9, Digit9: 10, Digit0: 11,
-  Minus: 12, Equal: 13, Backspace: 14,
-
-  Tab: 15,
-  KeyQ: 16, KeyW: 17, KeyE: 18, KeyR: 19, KeyT: 20,
-  KeyY: 21, KeyU: 22, KeyI: 23, KeyO: 24, KeyP: 25,
-  BracketLeft: 26, BracketRight: 27,
+  // QWERTY row (keynr 14-27)
+  Tab: 14,
+  KeyQ: 15, KeyW: 16, KeyE: 17, KeyR: 18, KeyT: 19,
+  KeyY: 20, KeyU: 21, KeyI: 22, KeyO: 23, KeyP: 24,
+  BracketLeft: 25, BracketRight: 26, Enter: 27,
 
+  // Home row (keynr 28-40)
   CapsLock: 28,
   KeyA: 29, KeyS: 30, KeyD: 31, KeyF: 32, KeyG: 33,
   KeyH: 34, KeyJ: 35, KeyK: 36, KeyL: 37,
-  Semicolon: 38, Quote: 39, Enter: 40,
+  Semicolon: 38, Quote: 39, Backslash: 40,
 
-  ShiftLeft: 41, Backslash: 42,
+  // Bottom row (keynr 41-53)
+  ShiftLeft: 41,
   KeyZ: 43, KeyX: 44, KeyC: 45, KeyV: 46, KeyB: 47,
   KeyN: 48, KeyM: 49, Comma: 50, Period: 51, Slash: 52,
   ShiftRight: 53,
 
-  ControlLeft: 54, MetaLeft: 105, AltLeft: 55,
-  Space: 56,
-  AltRight: 57, MetaRight: 106, ControlRight: 58,
+  // Modifiers (keynr 54-58)
+  ControlLeft: 54, AltLeft: 55, Space: 56,
+  AltRight: 57, ControlRight: 58,
 
-  PrintScreen: 71, ScrollLock: 72, Pause: 73,
+  // Escape + Function keys (keynr 59-71)
+  Escape: 59,
+  F1: 60, F2: 61, F3: 62, F4: 63, F5: 64, F6: 65,
+  F7: 66, F8: 67, F9: 68, F10: 69, F11: 70, F12: 71,
+
+  // Navigation cluster (keynr 72-84)
+  PrintScreen: 72, ScrollLock: 73, Pause: 74,
   Insert: 75, Home: 76, PageUp: 77,
   Delete: 78, End: 79, PageDown: 80,
-
   ArrowUp: 81, ArrowLeft: 82, ArrowDown: 83, ArrowRight: 84,
 
-  NumLock: 85, NumpadDivide: 86, NumpadMultiply: 87, NumpadSubtract: 88,
-  NumpadAdd: 89, NumpadEnter: 98,
-  Numpad7: 90, Numpad8: 94, Numpad9: 99,
+  // Numpad (keynr 85-101)
+  NumLock: 85,
+  Numpad7: 86, Numpad8: 87, Numpad9: 88,
+  NumpadAdd: 89, NumpadDivide: 90,
   Numpad4: 91, Numpad5: 92, Numpad6: 93,
+  NumpadMultiply: 94,
   Numpad1: 95, Numpad2: 96, Numpad3: 97,
+  NumpadEnter: 98, NumpadSubtract: 99,
   Numpad0: 100, NumpadDecimal: 101,
+
+  // Windows/Meta keys (keynr 105-106)
+  MetaLeft: 105, MetaRight: 106,
 }
 
 export function codeToScancode(code: string): number | undefined {

crates/ericrfb-frontend/src/login.ts

@@ -1,4 +1,4 @@
-import { startConsole } from './console'
+import { mountShell } from './shell'
 
 interface LoginResponse {
   applet_id: string
@@ -46,7 +46,13 @@ export function showLogin(app: HTMLElement) {
       }
 
       const data: LoginResponse = await resp.json()
-      startConsole(app, data.applet_id, data.port, data.board_name)
+      sessionStorage.setItem('blekin_user', username)
+      sessionStorage.setItem('blekin_pass', password)
+      mountShell(app, {
+        appletId: data.applet_id,
+        port: data.port,
+        boardName: data.board_name,
+      })
     } catch (err) {
       errorDiv.textContent = (err as Error).message
       errorDiv.hidden = false

crates/ericrfb-frontend/src/main.ts

@@ -1,5 +1,29 @@
 import './style.css'
 import { showLogin } from './login'
+import { mountShell } from './shell'
 
 const app = document.getElementById('app')!
-showLogin(app)
+
+// Try to resume a session from stored credentials
+const user = sessionStorage.getItem('blekin_user')
+const pass = sessionStorage.getItem('blekin_pass')
+
+if (user && pass) {
+  app.innerHTML = '<div class="login"><div class="login-form"><h1>Reconnecting...</h1></div></div>'
+  fetch('/api/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ username: user, password: pass }),
+  })
+    .then(r => r.ok ? r.json() : Promise.reject())
+    .then(data => {
+      mountShell(app, { appletId: data.applet_id, port: data.port, boardName: data.board_name })
+    })
+    .catch(() => {
+      sessionStorage.removeItem('blekin_user')
+      sessionStorage.removeItem('blekin_pass')
+      showLogin(app)
+    })
+} else {
+  showLogin(app)
+}

crates/ericrfb-frontend/src/pages/console.ts

@@ -0,0 +1,370 @@
+import { codeToScancode } from '../input'
+import { parseHotkey } from '../hotkey'
+import {
+  TAG_BLIT, TAG_RESIZE,
+  makeKeyPress, makeKeyRelease, makePointer, makeCtrlAltDel,
+} from '../protocol'
+import type { SessionInfo } from '../shell'
+
+let ws: WebSocket | null = null
+let reconnectTimer: number | undefined
+let reconnectDelay = 1000
+let containerEl: HTMLElement | null = null
+let session: SessionInfo
+let buttonMask = 0
+
+export function mountConsole(el: HTMLElement, s: SessionInfo) {
+  containerEl = el
+  session = s
+
+  el.innerHTML = `
+    <div class="toolbar">
+      <span>${s.boardName}</span>
+      <select id="port-select" title="Switch KVM port"></select>
+      <div class="sendkey-wrap">
+        <button id="btn-sendkey">Send Key &#x25BE;</button>
+        <div class="sendkey-menu" id="sendkey-menu" hidden>
+          <button data-sc="72">Print Screen</button>
+          <button data-sc="73">Scroll Lock</button>
+          <button data-sc="74">Pause / Break</button>
+          <hr />
+          <button data-sc="59">Escape</button>
+          <button data-sc="14">Tab</button>
+          <button data-sc="28">Caps Lock</button>
+          <button data-sc="85">Num Lock</button>
+          <hr />
+          <button data-cad="1">Ctrl + Alt + Del</button>
+        </div>
+      </div>
+      <button id="btn-fs">Fullscreen</button>
+      <span class="status" id="status">connecting...</span>
+    </div>
+    <div class="console-wrap">
+      <canvas id="canvas" tabindex="0"></canvas>
+    </div>
+  `
+
+  loadPortList()
+  connect()
+  wireInputHandlers()
+  wireToolbar()
+}
+
+export function unmountConsole() {
+  if (reconnectTimer) clearTimeout(reconnectTimer)
+  reconnectTimer = undefined
+  ws?.close()
+  ws = null
+  buttonMask = 0
+  inputSuspended = false
+  portSelectWired = false
+  if (containerEl) containerEl.innerHTML = ''
+  containerEl = null
+}
+
+// ---------------------------------------------------------------------------
+// WebSocket
+// ---------------------------------------------------------------------------
+
+function setStatus(text: string, connected: boolean) {
+  const el = document.getElementById('status')
+  if (el) {
+    el.textContent = text
+    el.classList.toggle('connected', connected)
+  }
+}
+
+function connect() {
+  if (reconnectTimer) clearTimeout(reconnectTimer)
+  setStatus('connecting...', false)
+
+  const wsProto = location.protocol === 'https:' ? 'wss:' : 'ws:'
+  const wsUrl = `${wsProto}//${location.host}/api/ws?applet_id=${encodeURIComponent(session.appletId)}&port=${session.port}`
+  ws = new WebSocket(wsUrl)
+  ws.binaryType = 'arraybuffer'
+
+  ws.onopen = () => {
+    setStatus('connected', true)
+    reconnectDelay = 1000
+    document.getElementById('canvas')?.focus()
+  }
+
+  ws.onclose = () => {
+    if (!containerEl) return // unmounted
+    setStatus(`disconnected — reconnecting in ${reconnectDelay / 1000}s...`, false)
+    scheduleReconnect()
+  }
+
+  ws.onerror = () => setStatus('connection error', false)
+  ws.onmessage = handleMessage
+}
+
+function scheduleReconnect() {
+  reconnectTimer = window.setTimeout(relogin, reconnectDelay)
+  reconnectDelay = Math.min(reconnectDelay * 2, 30000)
+}
+
+async function relogin() {
+  if (!containerEl) return
+  setStatus('re-authenticating...', false)
+  try {
+    const resp = await fetch('/api/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        username: sessionStorage.getItem('blekin_user') || 'administrator',
+        password: sessionStorage.getItem('blekin_pass') || '',
+      }),
+    })
+    if (!resp.ok) throw new Error('re-auth failed')
+    const data = await resp.json()
+    session = { ...session, appletId: data.applet_id, port: data.port }
+    connect()
+  } catch {
+    setStatus(`re-auth failed — retry in ${reconnectDelay / 1000}s...`, false)
+    scheduleReconnect()
+  }
+}
+
+function handleMessage(ev: MessageEvent) {
+  if (!(ev.data instanceof ArrayBuffer)) return
+  const view = new DataView(ev.data)
+  const tag = view.getUint8(0)
+  const canvas = document.getElementById('canvas') as HTMLCanvasElement | null
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')!
+
+  switch (tag) {
+    case TAG_RESIZE: {
+      canvas.width = view.getUint16(1)
+      canvas.height = view.getUint16(3)
+      break
+    }
+    case TAG_BLIT: {
+      const x = view.getUint16(1)
+      const y = view.getUint16(3)
+      const w = view.getUint16(5)
+      const h = view.getUint16(7)
+      const rgba = new Uint8ClampedArray(ev.data, 9)
+      ctx.putImageData(new ImageData(rgba, w, h), x, y)
+      break
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Port switcher
+// ---------------------------------------------------------------------------
+
+let portHotkeys: Record<number, string> = {}
+let keyPauseDuration = 2000
+let inputSuspended = false
+let selectedPort = -1
+let portSelectWired = false
+
+async function loadPortList() {
+  try {
+    const resp = await fetch('/api/kvm/ports')
+    if (!resp.ok) return
+    const data = await resp.json()
+    keyPauseDuration = data.key_pause_duration || 2000
+    const select = document.getElementById('port-select') as HTMLSelectElement
+    if (!select) return
+    select.innerHTML = ''
+    portHotkeys = {}
+    // Use locally tracked selection if we've switched, otherwise use device's active port
+    const activePort = selectedPort >= 0 ? selectedPort : data.active_port
+    for (const p of data.ports) {
+      const opt = document.createElement('option')
+      opt.value = String(p.index)
+      opt.textContent = p.name || `Port ${p.index + 1}`
+      opt.selected = p.index === activePort
+      select.appendChild(opt)
+      if (p.hotkey) portHotkeys[p.index] = p.hotkey
+    }
+    if (!portSelectWired) {
+      select.addEventListener('change', () => {
+        const port = parseInt(select.value)
+        switchToPort(port)
+      })
+      portSelectWired = true
+    }
+  } catch { /* port list optional */ }
+}
+
+let switchTimerId = 0
+
+function switchToPort(port: number) {
+  selectedPort = port
+  const hotkey = portHotkeys[port]
+  if (!hotkey || ws?.readyState !== WebSocket.OPEN) return
+
+  // Total duration: proxy round-trip + key sequence execution + settle time
+  const pauseCount = (hotkey.match(/\*/g) || []).length
+  const proxyLatency = 4000 // WS → proxy → Belkin → Avocent pipeline delay
+  const settleTime = 1000  // wait for video stream to stabilize after switch
+  const duration = proxyLatency + (pauseCount * keyPauseDuration) + settleTime
+
+  // Suspend input and show overlay
+  inputSuspended = true
+  if (switchTimerId) window.clearTimeout(switchTimerId)
+  showSwitchOverlay(duration)
+
+  // Send the hotkey sequence
+  const messages = parseHotkey(hotkey)
+  for (const msg of messages) {
+    ws.send(msg)
+  }
+
+  // Update Belkin's active port tracking
+  fetch('/api/kvm/switch', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ port }),
+  }).catch(() => {})
+
+  // Resume input after the switch completes
+  switchTimerId = window.setTimeout(dismissOverlay, duration)
+}
+
+function dismissOverlay() {
+  switchTimerId = 0
+  inputSuspended = false
+  const overlay = document.getElementById('switch-overlay')
+  if (overlay) overlay.style.display = 'none'
+  document.getElementById('canvas')?.focus()
+}
+
+function showSwitchOverlay(duration: number) {
+  let overlay = document.getElementById('switch-overlay')
+  if (!overlay) {
+    overlay = document.createElement('div')
+    overlay.id = 'switch-overlay'
+    overlay.className = 'switch-overlay'
+    document.querySelector('.console-wrap')?.appendChild(overlay)
+  }
+  overlay.style.display = ''
+  overlay.innerHTML = `
+    <div class="switch-overlay-content">
+      <div class="switch-spinner"></div>
+      <div>Switching port...</div>
+      <div class="switch-timer" id="switch-timer"></div>
+    </div>
+  `
+
+  // Countdown timer
+  const endTime = Date.now() + duration
+  const tick = () => {
+    const timerEl = document.getElementById('switch-timer')
+    if (!timerEl) return
+    const remaining = Math.max(0, endTime - Date.now())
+    timerEl.textContent = `${(remaining / 1000).toFixed(1)}s`
+    if (remaining > 0) requestAnimationFrame(tick)
+  }
+  tick()
+}
+
+// ---------------------------------------------------------------------------
+// Input handlers
+// ---------------------------------------------------------------------------
+
+function wireInputHandlers() {
+  const canvas = document.getElementById('canvas')! as HTMLCanvasElement
+
+  canvas.addEventListener('keydown', (e) => {
+    e.preventDefault()
+    if (inputSuspended) return
+    const sc = codeToScancode(e.code)
+    if (sc !== undefined && ws?.readyState === WebSocket.OPEN) ws.send(makeKeyPress(sc))
+  })
+
+  canvas.addEventListener('keyup', (e) => {
+    e.preventDefault()
+    if (inputSuspended) return
+    const sc = codeToScancode(e.code)
+    if (sc !== undefined && ws?.readyState === WebSocket.OPEN) ws.send(makeKeyRelease(sc))
+  })
+
+  function sendPointer(e: MouseEvent) {
+    if (inputSuspended || ws?.readyState !== WebSocket.OPEN) return
+    const rect = canvas.getBoundingClientRect()
+    const x = Math.round((e.clientX - rect.left) * canvas.width / rect.width)
+    const y = Math.round((e.clientY - rect.top) * canvas.height / rect.height)
+    ws.send(makePointer(
+      Math.max(0, Math.min(x, canvas.width - 1)),
+      Math.max(0, Math.min(y, canvas.height - 1)),
+      buttonMask,
+    ))
+  }
+
+  canvas.addEventListener('mousemove', sendPointer)
+  canvas.addEventListener('mousedown', (e) => {
+    e.preventDefault()
+    canvas.focus()
+    if (e.button === 0) buttonMask |= 1
+    else if (e.button === 1) buttonMask |= 2
+    else if (e.button === 2) buttonMask |= 4
+    sendPointer(e)
+  })
+  canvas.addEventListener('mouseup', (e) => {
+    e.preventDefault()
+    if (e.button === 0) buttonMask &= ~1
+    else if (e.button === 1) buttonMask &= ~2
+    else if (e.button === 2) buttonMask &= ~4
+    sendPointer(e)
+  })
+  canvas.addEventListener('contextmenu', (e) => e.preventDefault())
+  canvas.addEventListener('wheel', (e) => {
+    e.preventDefault()
+    if (inputSuspended || ws?.readyState !== WebSocket.OPEN) return
+    const rect = canvas.getBoundingClientRect()
+    const x = Math.round((e.clientX - rect.left) * canvas.width / rect.width)
+    const y = Math.round((e.clientY - rect.top) * canvas.height / rect.height)
+    const scrollMask = e.deltaY < 0 ? 8 : 16
+    ws.send(makePointer(x, y, buttonMask | scrollMask))
+    ws.send(makePointer(x, y, buttonMask))
+  })
+}
+
+function wireToolbar() {
+  // Send Key dropdown
+  const sendKeyBtn = document.getElementById('btn-sendkey')!
+  const sendKeyMenu = document.getElementById('sendkey-menu')!
+
+  sendKeyBtn.addEventListener('click', (e) => {
+    e.stopPropagation()
+    sendKeyMenu.hidden = !sendKeyMenu.hidden
+  })
+
+  // Close menu on outside click
+  document.addEventListener('click', () => { sendKeyMenu.hidden = true })
+  sendKeyMenu.addEventListener('click', (e) => e.stopPropagation())
+
+  sendKeyMenu.querySelectorAll('button[data-sc]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const sc = parseInt((btn as HTMLElement).dataset.sc!)
+      if (ws?.readyState === WebSocket.OPEN) {
+        ws.send(makeKeyPress(sc))
+        ws.send(makeKeyRelease(sc))
+      }
+      sendKeyMenu.hidden = true
+      document.getElementById('canvas')?.focus()
+    })
+  })
+
+  sendKeyMenu.querySelectorAll('button[data-cad]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      if (ws?.readyState === WebSocket.OPEN) ws.send(makeCtrlAltDel())
+      sendKeyMenu.hidden = true
+      document.getElementById('canvas')?.focus()
+    })
+  })
+
+  // Fullscreen
+  document.getElementById('btn-fs')?.addEventListener('click', () => {
+    const shell = document.querySelector('.shell')
+    if (document.fullscreenElement) document.exitFullscreen()
+    else shell?.requestFullscreen()
+    document.getElementById('canvas')?.focus()
+  })
+}

crates/ericrfb-frontend/src/pages/ports.ts

@@ -0,0 +1,195 @@
+import type { SessionInfo } from '../shell'
+
+let containerEl: HTMLElement | null = null
+
+interface PortInfo {
+  index: number
+  name: string
+  hotkey: string
+  show_in_rc: boolean
+}
+
+interface PortsData {
+  port_count: number
+  key_pause_duration: number
+  active_port: number
+  ports: PortInfo[]
+}
+
+export function mountPorts(el: HTMLElement, _session: SessionInfo) {
+  containerEl = el
+  el.innerHTML = `
+    <div class="ports-page">
+      <div class="ports-header">
+        <h2>KVM Port Configuration</h2>
+        <div class="ports-actions">
+          <button id="btn-reload" class="btn">Reload</button>
+          <button id="btn-save" class="btn btn-primary">Save</button>
+        </div>
+      </div>
+      <div class="ports-toast" id="toast" hidden></div>
+      <div class="ports-global">
+        <label>
+          Port count
+          <select id="port-count">
+            ${[1, 2, 4, 8, 12, 16, 24, 32, 48, 64].map(n => `<option value="${n}">${n}</option>`).join('')}
+          </select>
+        </label>
+        <label>
+          Key pause
+          <input type="number" id="key-pause" min="0" max="9999" value="100" />
+          <span>ms</span>
+        </label>
+      </div>
+      <table class="ports-table">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Name</th>
+            <th>Hotkey</th>
+            <th>Show</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody id="ports-body"></tbody>
+      </table>
+    </div>
+  `
+
+  document.getElementById('btn-reload')?.addEventListener('click', loadPorts)
+  document.getElementById('btn-save')?.addEventListener('click', savePorts)
+  document.getElementById('port-count')?.addEventListener('change', onPortCountChange)
+  loadPorts()
+}
+
+export function unmountPorts() {
+  if (containerEl) containerEl.innerHTML = ''
+  containerEl = null
+}
+
+function showToast(msg: string, success: boolean) {
+  const el = document.getElementById('toast')
+  if (!el) return
+  el.textContent = msg
+  el.className = `ports-toast ${success ? 'toast-ok' : 'toast-err'}`
+  el.hidden = false
+  setTimeout(() => { el.hidden = true }, 3000)
+}
+
+async function loadPorts() {
+  try {
+    const resp = await fetch('/api/kvm/ports')
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    const data: PortsData = await resp.json()
+    renderPorts(data)
+  } catch (e) {
+    showToast(`Failed to load: ${e}`, false)
+  }
+}
+
+let currentActivePort = 0
+
+function renderPorts(data: PortsData) {
+  const countEl = document.getElementById('port-count') as HTMLSelectElement
+  const pauseEl = document.getElementById('key-pause') as HTMLInputElement
+
+  if (countEl) countEl.value = String(data.port_count)
+  if (pauseEl) pauseEl.value = String(data.key_pause_duration)
+  currentActivePort = data.active_port
+
+  renderPortRows(data.ports, data.active_port)
+}
+
+function renderPortRows(ports: PortInfo[], activePort: number) {
+  const tbody = document.getElementById('ports-body')!
+  tbody.innerHTML = ''
+
+  for (const p of ports) {
+    const tr = document.createElement('tr')
+    tr.className = p.index === activePort ? 'active-port' : ''
+    tr.innerHTML = `
+      <td class="port-num">${p.index + 1}</td>
+      <td><input type="text" class="port-name" data-idx="${p.index}" value="${esc(p.name)}" maxlength="20" /></td>
+      <td><input type="text" class="port-hotkey" data-idx="${p.index}" value="${esc(p.hotkey)}" maxlength="64" /></td>
+      <td><input type="checkbox" class="port-show" data-idx="${p.index}" ${p.show_in_rc ? 'checked' : ''} /></td>
+      <td><button class="btn btn-sm btn-switch" data-idx="${p.index}">Switch</button></td>
+    `
+    tbody.appendChild(tr)
+  }
+
+  // Wire switch buttons
+  tbody.querySelectorAll('.btn-switch').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      const idx = parseInt((btn as HTMLElement).dataset.idx!)
+      try {
+        await fetch('/api/kvm/switch', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ port: idx }),
+        })
+        showToast(`Switched to port ${idx + 1}`, true)
+        loadPorts()
+      } catch (e) {
+        showToast(`Switch failed: ${e}`, false)
+      }
+    })
+  })
+}
+
+function onPortCountChange() {
+  const countEl = document.getElementById('port-count') as HTMLSelectElement
+  const newCount = parseInt(countEl?.value || '16')
+
+  // Read current values from the existing rows
+  const ports: PortInfo[] = []
+  for (let i = 0; i < newCount; i++) {
+    const nameEl = document.querySelector(`.port-name[data-idx="${i}"]`) as HTMLInputElement | null
+    const hotkeyEl = document.querySelector(`.port-hotkey[data-idx="${i}"]`) as HTMLInputElement | null
+    const showEl = document.querySelector(`.port-show[data-idx="${i}"]`) as HTMLInputElement | null
+    ports.push({
+      index: i,
+      name: nameEl?.value || '',
+      hotkey: hotkeyEl?.value || '',
+      show_in_rc: showEl?.checked || false,
+    })
+  }
+
+  renderPortRows(ports, currentActivePort)
+}
+
+async function savePorts() {
+  const countEl = document.getElementById('port-count') as HTMLSelectElement
+  const pauseEl = document.getElementById('key-pause') as HTMLInputElement
+  const portCount = parseInt(countEl?.value || '16')
+  const keyPause = parseInt(pauseEl?.value || '100')
+
+  const ports: PortInfo[] = []
+  for (let i = 0; i < portCount; i++) {
+    const nameEl = document.querySelector(`.port-name[data-idx="${i}"]`) as HTMLInputElement
+    const hotkeyEl = document.querySelector(`.port-hotkey[data-idx="${i}"]`) as HTMLInputElement
+    const showEl = document.querySelector(`.port-show[data-idx="${i}"]`) as HTMLInputElement
+    ports.push({
+      index: i,
+      name: nameEl?.value || '',
+      hotkey: hotkeyEl?.value || '',
+      show_in_rc: showEl?.checked || false,
+    })
+  }
+
+  try {
+    const resp = await fetch('/api/kvm/ports', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ port_count: portCount, key_pause_duration: keyPause, ports }),
+    })
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    showToast('Configuration saved', true)
+    loadPorts()
+  } catch (e) {
+    showToast(`Save failed: ${e}`, false)
+  }
+}
+
+function esc(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;')
+}

crates/ericrfb-frontend/src/shell.ts

@@ -0,0 +1,60 @@
+import { mountConsole, unmountConsole } from './pages/console'
+import { mountPorts, unmountPorts } from './pages/ports'
+
+export interface SessionInfo {
+  appletId: string
+  port: number
+  boardName: string
+}
+
+type PageId = 'console' | 'ports'
+
+let currentPage: PageId | null = null
+let contentEl: HTMLElement
+let session: SessionInfo
+
+const pages: Record<PageId, { mount: (el: HTMLElement, s: SessionInfo) => void; unmount: () => void }> = {
+  console: { mount: mountConsole, unmount: unmountConsole },
+  ports: { mount: mountPorts, unmount: unmountPorts },
+}
+
+function navigate(page: PageId) {
+  if (currentPage === page) return
+  if (currentPage) pages[currentPage].unmount()
+
+  // Update nav links
+  document.querySelectorAll('.nav-link').forEach(el => {
+    el.classList.toggle('active', el.getAttribute('data-page') === page)
+  })
+
+  currentPage = page
+  pages[page].mount(contentEl, session)
+}
+
+export function mountShell(app: HTMLElement, s: SessionInfo) {
+  session = s
+  app.innerHTML = `
+    <div class="shell">
+      <nav class="sidebar">
+        <div class="sidebar-brand">blekin</div>
+        <a href="#" data-page="console" class="nav-link active">Console</a>
+        <a href="#" data-page="ports" class="nav-link">Ports</a>
+      </nav>
+      <main class="content" id="page-content"></main>
+    </div>
+  `
+
+  contentEl = document.getElementById('page-content')!
+
+  // Wire up navigation
+  document.querySelectorAll('.nav-link').forEach(el => {
+    el.addEventListener('click', (e) => {
+      e.preventDefault()
+      const page = el.getAttribute('data-page') as PageId
+      if (page) navigate(page)
+    })
+  })
+
+  // Default to console
+  navigate('console')
+}

crates/ericrfb-frontend/src/style.css

@@ -32,10 +32,7 @@ body {
   min-width: 320px;
 }
 
-.login-form h1 {
-  font-size: 1.25rem;
-  text-align: center;
-}
+.login-form h1 { font-size: 1.25rem; text-align: center; }
 
 .login-form input {
   padding: 0.5rem;
@@ -58,26 +55,65 @@ body {
 
 .login-form button:hover { background: #5a9c69; }
 .login-form button:disabled { opacity: 0.5; cursor: not-allowed; }
+.login-error { color: #e74c3c; font-size: 0.85rem; text-align: center; }
 
-.login-error {
-  color: #e74c3c;
-  font-size: 0.85rem;
-  text-align: center;
+/* Shell layout */
+.shell {
+  display: flex;
+  height: 100vh;
 }
 
-/* Toolbar */
+.sidebar {
+  width: 160px;
+  min-width: 160px;
+  background: #222;
+  border-right: 1px solid #333;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 0;
+}
+
+.sidebar-brand {
+  padding: 0.75rem 1rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #4a7c59;
+  border-bottom: 1px solid #333;
+  margin-bottom: 0.25rem;
+}
+
+.nav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  color: #999;
+  text-decoration: none;
+  font-size: 0.85rem;
+  border-left: 3px solid transparent;
+}
+
+.nav-link:hover { color: #ccc; background: #2a2a2a; }
+.nav-link.active { color: #e0e0e0; border-left-color: #4a7c59; background: #2a2a2a; }
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Console toolbar */
 .toolbar {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.25rem 0.5rem;
-  background: #222;
+  background: #1e1e1e;
   border-bottom: 1px solid #333;
   font-size: 0.8rem;
 }
 
-.toolbar button {
-  padding: 0.25rem 0.75rem;
+.toolbar button, .toolbar select {
+  padding: 0.25rem 0.5rem;
   border: 1px solid #444;
   border-radius: 3px;
   background: #333;
@@ -86,16 +122,49 @@ body {
   font-size: 0.8rem;
 }
 
-.toolbar button:hover { background: #444; }
-
-.toolbar .status {
-  margin-left: auto;
-  color: #888;
-}
-
+.toolbar button:hover, .toolbar select:hover { background: #444; }
+.toolbar .status { margin-left: auto; color: #888; }
 .toolbar .status.connected { color: #4a7c59; }
 
-/* Console */
+/* Send Key dropdown */
+.sendkey-wrap {
+  position: relative;
+}
+
+.sendkey-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  background: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 4px;
+  padding: 0.25rem 0;
+  min-width: 160px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.sendkey-menu button {
+  display: block;
+  width: 100%;
+  padding: 0.35rem 0.75rem;
+  border: none;
+  background: none;
+  color: #ccc;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+
+.sendkey-menu button:hover { background: #383838; }
+
+.sendkey-menu hr {
+  border: none;
+  border-top: 1px solid #3a3a3a;
+  margin: 0.2rem 0;
+}
+
+/* Console canvas */
 .console-wrap {
   flex: 1;
   display: flex;
@@ -109,3 +178,149 @@ body {
   image-rendering: pixelated;
   cursor: none;
 }
+
+/* Port switch overlay */
+.switch-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+}
+
+.switch-overlay-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  color: #ccc;
+  font-size: 0.9rem;
+}
+
+.switch-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #444;
+  border-top-color: #4a7c59;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.switch-timer {
+  font-variant-numeric: tabular-nums;
+  color: #888;
+  font-size: 0.8rem;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Console wrap needs position for overlay */
+.console-wrap {
+  position: relative;
+}
+
+/* Ports config page */
+.ports-page {
+  padding: 1.5rem;
+  overflow-y: auto;
+  max-height: 100vh;
+}
+
+.ports-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.ports-header h2 { font-size: 1.1rem; font-weight: 500; }
+
+.ports-actions { display: flex; gap: 0.5rem; }
+
+.ports-toast {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  margin-bottom: 1rem;
+}
+
+.toast-ok { background: #1a3a1a; color: #6ece6e; }
+.toast-err { background: #3a1a1a; color: #e74c3c; }
+
+.ports-global {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  margin-bottom: 1rem;
+  font-size: 0.85rem;
+}
+
+.ports-global label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ports-global input, .ports-global select {
+  padding: 0.3rem 0.5rem;
+  border: 1px solid #444;
+  border-radius: 3px;
+  background: #2a2a2a;
+  color: #e0e0e0;
+  font-size: 0.85rem;
+  width: 80px;
+}
+
+.ports-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+
+.ports-table th {
+  text-align: left;
+  padding: 0.4rem 0.5rem;
+  border-bottom: 1px solid #444;
+  color: #999;
+  font-weight: 500;
+}
+
+.ports-table td {
+  padding: 0.3rem 0.5rem;
+  border-bottom: 1px solid #2a2a2a;
+}
+
+.ports-table .port-num { color: #666; width: 2rem; text-align: center; }
+
+.ports-table input[type="text"] {
+  padding: 0.25rem 0.4rem;
+  border: 1px solid #444;
+  border-radius: 3px;
+  background: #2a2a2a;
+  color: #e0e0e0;
+  font-size: 0.85rem;
+  width: 100%;
+}
+
+.ports-table input[type="checkbox"] { cursor: pointer; }
+
+.active-port { background: #1a2a1a; }
+.active-port .port-num { color: #4a7c59; font-weight: 600; }
+
+/* Buttons */
+.btn {
+  padding: 0.35rem 0.75rem;
+  border: 1px solid #444;
+  border-radius: 4px;
+  background: #333;
+  color: #ccc;
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+
+.btn:hover { background: #444; }
+.btn-primary { background: #4a7c59; border-color: #4a7c59; color: white; }
+.btn-primary:hover { background: #5a9c69; }
+.btn-sm { padding: 0.2rem 0.5rem; font-size: 0.75rem; }

crates/ericrfb-proxy/Cargo.toml

@@ -10,6 +10,7 @@ tokio.workspace = true
 axum.workspace = true
 reqwest.workspace = true
 serde.workspace = true
+serde_json = "1"
 toml.workspace = true
 tower-http.workspace = true
 tracing.workspace = true

crates/ericrfb-proxy/src/kvm.rs

@@ -0,0 +1,266 @@
+use axum::Json;
+use axum::extract::State;
+use axum::http::StatusCode;
+use serde::{Deserialize, Serialize};
+
+use crate::AppState;
+use crate::login::ErrorResponse;
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+#[derive(Serialize)]
+pub struct PortsResponse {
+    pub port_count: u16,
+    pub key_pause_duration: u16,
+    pub active_port: u16,
+    pub ports: Vec<PortInfo>,
+}
+
+#[derive(Serialize, Deserialize, Clone)]
+pub struct PortInfo {
+    pub index: u16,
+    pub name: String,
+    pub hotkey: String,
+    pub show_in_rc: bool,
+}
+
+#[derive(Deserialize)]
+pub struct SavePortsRequest {
+    pub port_count: u16,
+    pub key_pause_duration: u16,
+    pub ports: Vec<PortInfo>,
+}
+
+#[derive(Deserialize)]
+pub struct SwitchRequest {
+    pub port: u16,
+}
+
+#[derive(Serialize)]
+pub struct SwitchResponse {
+    pub active_port: u16,
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+async fn get_cookie(state: &AppState) -> Result<String, (StatusCode, Json<ErrorResponse>)> {
+    state.session_cookie.read().await.clone().ok_or_else(|| {
+        (
+            StatusCode::UNAUTHORIZED,
+            Json(ErrorResponse {
+                error: "not logged in".into(),
+            }),
+        )
+    })
+}
+
+fn device_url(state: &AppState, path: &str) -> String {
+    format!(
+        "http://{}:{}{path}",
+        state.config.omniview.host, state.config.omniview.http_port
+    )
+}
+
+fn api_err(msg: impl Into<String>) -> (StatusCode, Json<ErrorResponse>) {
+    (
+        StatusCode::BAD_GATEWAY,
+        Json(ErrorResponse { error: msg.into() }),
+    )
+}
+
+// ---------------------------------------------------------------------------
+// HTML scraping helpers
+// ---------------------------------------------------------------------------
+
+fn extract_input_value(html: &str, name: &str) -> Option<String> {
+    let needle = format!("name=\"{name}\"");
+    let pos = html.find(&needle)?;
+    let after = &html[pos..];
+    let val_needle = "value=\"";
+    let val_pos = after.find(val_needle)? + val_needle.len();
+    let end = after[val_pos..].find('"')? + val_pos;
+    Some(html_unescape(&after[val_pos..end]))
+}
+
+fn html_unescape(s: &str) -> String {
+    s.replace("&gt;", ">")
+        .replace("&lt;", "<")
+        .replace("&amp;", "&")
+        .replace("&quot;", "\"")
+}
+
+fn extract_selected_option(html: &str, name: &str) -> Option<String> {
+    let needle = format!("name=\"{name}\"");
+    let pos = html.find(&needle)?;
+    let after = &html[pos..];
+    // Find "selected>" then the text until newline or '<'
+    let sel_pos = after.find("selected>")?;
+    let text_start = sel_pos + "selected>".len();
+    let text_end = after[text_start..].find(['<', '\n']).unwrap_or(0) + text_start;
+    Some(after[text_start..text_end].trim().to_string())
+}
+
+fn has_checked(html: &str, name: &str) -> bool {
+    let needle = format!("name=\"{name}\"");
+    if let Some(pos) = html.find(&needle) {
+        // Check if "checked" appears nearby before the next input/tag
+        let region = &html[pos.saturating_sub(80)..html.len().min(pos + 120)];
+        region.contains("checked")
+    } else {
+        false
+    }
+}
+
+// ---------------------------------------------------------------------------
+// GET /api/kvm/ports
+// ---------------------------------------------------------------------------
+
+pub async fn get_ports(
+    State(state): State<AppState>,
+) -> Result<Json<PortsResponse>, (StatusCode, Json<ErrorResponse>)> {
+    let cookie = get_cookie(&state).await?;
+
+    let html = state
+        .http_client
+        .get(device_url(&state, "/kvm.asp"))
+        .header("cookie", &cookie)
+        .send()
+        .await
+        .map_err(|e| api_err(format!("fetch kvm.asp: {e}")))?
+        .text()
+        .await
+        .map_err(|e| api_err(format!("read kvm.asp: {e}")))?;
+
+    let port_count: u16 = extract_selected_option(&html, "ECG_kvm_nr_ports")
+        .and_then(|s| s.parse().ok())
+        .unwrap_or(16);
+
+    let key_pause_duration: u16 = extract_input_value(&html, "ECG_key_pause_duration")
+        .and_then(|s| s.parse().ok())
+        .unwrap_or(100);
+
+    let active_port: u16 = extract_selected_option(&html, "kvm_active_port_0")
+        .and_then(|s| s.parse().ok())
+        .unwrap_or(0);
+
+    let mut ports = Vec::with_capacity(port_count as usize);
+    for i in 0..port_count {
+        let name = extract_input_value(&html, &format!("ECG_kvm_portname_{i}")).unwrap_or_default();
+        let hotkey = extract_input_value(&html, &format!("ECG_kvm_hotkey_{i}")).unwrap_or_default();
+        let show_in_rc = has_checked(&html, &format!("ECG_kvm_show_in_rc_{i}"));
+        ports.push(PortInfo {
+            index: i,
+            name,
+            hotkey,
+            show_in_rc,
+        });
+    }
+
+    Ok(Json(PortsResponse {
+        port_count,
+        key_pause_duration,
+        active_port,
+        ports,
+    }))
+}
+
+// ---------------------------------------------------------------------------
+// PUT /api/kvm/ports
+// ---------------------------------------------------------------------------
+
+pub async fn save_ports(
+    State(state): State<AppState>,
+    Json(req): Json<SavePortsRequest>,
+) -> Result<Json<serde_json::Value>, (StatusCode, Json<ErrorResponse>)> {
+    let cookie = get_cookie(&state).await?;
+
+    let mut form: Vec<(String, String)> = vec![
+        // Hidden template field required by the firmware
+        ("__templates__".into(), " kvm_port_list kvm".into()),
+        ("ECG_kvm_nr_ports".into(), req.port_count.to_string()),
+        (
+            "ECG_key_pause_duration".into(),
+            req.key_pause_duration.to_string(),
+        ),
+        ("ECG_kvm_portname_cnt".into(), req.port_count.to_string()),
+        ("ECG_kvm_hotkey_cnt".into(), req.port_count.to_string()),
+        ("ECG_kvm_powerport_cnt".into(), req.port_count.to_string()),
+        ("ECG_kvm_show_in_rc_cnt".into(), req.port_count.to_string()),
+    ];
+
+    for port in &req.ports {
+        form.push((
+            format!("ECG_kvm_portname_{}", port.index),
+            port.name.clone(),
+        ));
+        form.push((
+            format!("ECG_kvm_hotkey_{}", port.index),
+            port.hotkey.clone(),
+        ));
+        if port.show_in_rc {
+            form.push((format!("ECG_kvm_show_in_rc_{}", port.index), "yes".into()));
+        }
+    }
+
+    // Image button submits with .x/.y coordinates
+    form.push(("action_apply.x".into(), "0".into()));
+    form.push(("action_apply.y".into(), "0".into()));
+
+    let resp = state
+        .http_client
+        .post(device_url(&state, "/kvm.asp"))
+        .header("cookie", &cookie)
+        .form(&form)
+        .send()
+        .await
+        .map_err(|e| api_err(format!("post kvm.asp: {e}")))?;
+
+    let body = resp
+        .text()
+        .await
+        .map_err(|e| api_err(format!("read response: {e}")))?;
+
+    if body.contains("ERIC_RESPONSE_OK") {
+        Ok(Json(serde_json::json!({"ok": true})))
+    } else {
+        Err(api_err("device rejected configuration update"))
+    }
+}
+
+// ---------------------------------------------------------------------------
+// POST /api/kvm/switch
+// ---------------------------------------------------------------------------
+
+pub async fn switch_port(
+    State(state): State<AppState>,
+    Json(req): Json<SwitchRequest>,
+) -> Result<Json<SwitchResponse>, (StatusCode, Json<ErrorResponse>)> {
+    let cookie = get_cookie(&state).await?;
+
+    let form = [
+        (
+            "__templates__",
+            " kvm_port_list rc_preview power_control_ipmi power_control_intern power_control_direct".to_string(),
+        ),
+        ("kvm_active_port_0", req.port.to_string()),
+        ("action_switch_0.x", "0".into()),
+        ("action_switch_0.y", "0".into()),
+    ];
+
+    state
+        .http_client
+        .post(device_url(&state, "/home2.asp"))
+        .header("cookie", &cookie)
+        .form(&form)
+        .send()
+        .await
+        .map_err(|e| api_err(format!("post home2.asp: {e}")))?;
+
+    Ok(Json(SwitchResponse {
+        active_port: req.port,
+    }))
+}

crates/ericrfb-proxy/src/login.rs

@@ -88,6 +88,9 @@ pub async fn handle_login(
     let board_name =
         extract_param(&html, "BOARD_NAME").unwrap_or_else(|| "Remote IP Manager".into());
 
+    // Persist session cookie for KVM API calls
+    *state.session_cookie.write().await = Some(cookie);
+
     tracing::info!(
         "login successful: board={board_name}, applet_id={}...",
         &applet_id[..applet_id.len().min(16)]

crates/ericrfb-proxy/src/main.rs

@@ -1,4 +1,5 @@
 mod config;
+mod kvm;
 mod login;
 mod ws;
 
@@ -7,6 +8,7 @@ use std::sync::Arc;
 use axum::Router;
 use axum::routing::{get, post};
 use tokio::net::TcpListener;
+use tokio::sync::RwLock;
 use tower_http::services::ServeDir;
 use tracing_subscriber::EnvFilter;
 
@@ -14,6 +16,7 @@ use tracing_subscriber::EnvFilter;
 pub struct AppState {
     pub config: Arc<config::ProxyConfig>,
     pub http_client: reqwest::Client,
+    pub session_cookie: Arc<RwLock<Option<String>>>,
 }
 
 #[tokio::main]
@@ -36,11 +39,14 @@ async fn main() -> anyhow::Result<()> {
             .danger_accept_invalid_certs(true)
             .redirect(reqwest::redirect::Policy::none())
             .build()?,
+        session_cookie: Arc::new(RwLock::new(None)),
     };
 
     let app = Router::new()
         .route("/api/login", post(login::handle_login))
         .route("/api/ws", get(ws::handle_ws))
+        .route("/api/kvm/ports", get(kvm::get_ports).put(kvm::save_ports))
+        .route("/api/kvm/switch", post(kvm::switch_port))
         .fallback_service(ServeDir::new(&cfg.static_dir))
         .with_state(state);
 

crates/ericrfb/src/codec/iip.rs

@@ -0,0 +1,263 @@
+use std::io::Read;
+
+use crate::codec::tight;
+use crate::framebuffer::Framebuffer;
+use crate::proto::{self, read_exact, read_u8, read_varint};
+
+const TILE: usize = 16;
+const VERSIONS: usize = 8;
+const TILE_BYTES: usize = TILE * TILE; // 256 bytes at 8bpp
+
+/// Per-tile versioned pixel cache — stores 8bpp data.
+/// Reference: t.java — 8 versions × 256 bytes per tile.
+struct TileEntry {
+    data: [[u8; TILE_BYTES]; VERSIONS],
+}
+
+#[allow(dead_code)]
+impl TileEntry {
+    fn new() -> Self {
+        Self {
+            data: [[0u8; TILE_BYTES]; VERSIONS],
+        }
+    }
+
+    /// Write `len` bytes from `src[src_off..]` into version at `offset`.
+    fn write(&mut self, version: usize, offset: usize, src: &[u8], src_off: usize, len: usize) {
+        let v = version % VERSIONS;
+        self.data[v][offset..offset + len].copy_from_slice(&src[src_off..src_off + len]);
+    }
+
+    /// Read `len` bytes from version at `offset` into `dst[dst_off..]`.
+    fn read(&self, version: usize, offset: usize, dst: &mut [u8], dst_off: usize, len: usize) {
+        let v = version % VERSIONS;
+        dst[dst_off..dst_off + len].copy_from_slice(&self.data[v][offset..offset + len]);
+    }
+}
+
+/// Tile cache for encoding 9 (IIP). One entry per 16×16 tile on screen.
+pub struct TileCache {
+    tiles: Vec<TileEntry>,
+    tiles_x: usize,
+    tiles_y: usize,
+}
+
+impl TileCache {
+    pub fn new(fb_width: u16, fb_height: u16) -> Self {
+        let tx = fb_width as usize / TILE;
+        let ty = fb_height as usize / TILE;
+        let count = tx * ty;
+        let mut tiles = Vec::with_capacity(count);
+        for _ in 0..count {
+            tiles.push(TileEntry::new());
+        }
+        Self {
+            tiles,
+            tiles_x: tx,
+            tiles_y: ty,
+        }
+    }
+
+    pub fn resize(&mut self, fb_width: u16, fb_height: u16) {
+        *self = Self::new(fb_width, fb_height);
+    }
+
+    fn get(&self, tile_x: usize, tile_y: usize) -> &TileEntry {
+        &self.tiles[tile_y * self.tiles_x + tile_x]
+    }
+
+    fn get_mut(&mut self, tile_x: usize, tile_y: usize) -> &mut TileEntry {
+        &mut self.tiles[tile_y * self.tiles_x + tile_x]
+    }
+}
+
+/// Decode encoding 9 (IIP) — tile-cached delta compression.
+///
+/// Control byte layout:
+/// - bits 0-3: sub-type (1=1bpp, 2=2bpp, 3=4bpp_gray, 4=4bpp_color, 8=8bpp)
+/// - bits 4-5: zlib stream index (0-3)
+/// - bits 6-7: mode (0=cache-read, 4=write-only, 8=update+read, 12=read-only)
+///
+/// Reference: ByteColorRFBRenderer.do() line 248.
+#[allow(clippy::too_many_arguments)]
+pub fn decode_iip(
+    r: &mut impl Read,
+    fb: &mut Framebuffer,
+    cache: &mut TileCache,
+    zlib: &mut tight::ZlibStreams,
+    rx: u16,
+    ry: u16,
+    rw: u16,
+    rh: u16,
+) -> proto::Result<()> {
+    let control = read_u8(r)?;
+    let stream_idx = ((control >> 4) & 3) as usize;
+    let mode = (control >> 4) & 0x0C; // 0, 4, 8, or 12
+    let sub_type = control & 0x0F;
+
+    // Determine palette from sub-type (same as tight sub-palettes)
+    let _palette_id = match sub_type {
+        1 => 10,            // 1bpp BW
+        2 => 11,            // 2bpp gray4
+        3 => 12,            // 4bpp gray16
+        4 => 13,            // 4bpp color16
+        8 => 0,             // 8bpp direct
+        _ => return Ok(()), // unknown sub-type, skip
+    };
+
+    // Calculate aligned tile region
+    let y_start = ry as usize;
+    let y_end = ry as usize + rh as usize;
+    let w = rw as usize;
+
+    let tile_y_end = if !y_end.is_multiple_of(TILE) {
+        y_end / TILE * TILE
+    } else {
+        y_end
+    };
+    let aligned_h = tile_y_end - y_start;
+    let num_tile_ctrl = (w / TILE) * (aligned_h / TILE);
+
+    // Read tile control bytes (compressed or raw)
+    let tile_ctrl = if num_tile_ctrl < 12 {
+        read_exact(r, num_tile_ctrl)?
+    } else {
+        let comp_len = read_varint(r)? as usize;
+        let compressed = read_exact(r, comp_len)?;
+        let decompressor = zlib.get_or_init(stream_idx);
+        let mut output = vec![0u8; num_tile_ctrl];
+        let before_out = decompressor.total_out();
+        decompressor
+            .decompress(&compressed, &mut output, flate2::FlushDecompress::None)
+            .map_err(|e| {
+                proto::ProtoError::Io(std::io::Error::new(std::io::ErrorKind::InvalidData, e))
+            })?;
+        let produced = (decompressor.total_out() - before_out) as usize;
+        if produced != num_tile_ctrl {
+            return Err(proto::ProtoError::Io(std::io::Error::new(
+                std::io::ErrorKind::InvalidData,
+                format!("iip zlib: produced {produced}, expected {num_tile_ctrl}"),
+            )));
+        }
+        output
+    };
+
+    if mode == 0 || mode == 12 {
+        // Cache-read only: no new pixel data on the wire.
+        // Read tile versions from cache directly to framebuffer.
+        read_cache_to_fb(fb, cache, &tile_ctrl, rx as usize, y_start, w, aligned_h);
+    } else {
+        // Mode 4 or 8: Tight-encoded pixel data follows.
+        // Decode Tight data into framebuffer, then update tile cache from framebuffer.
+        tight::decode_tight(r, fb, zlib, rx, ry, rw, rh)?;
+
+        // Update tile cache from the framebuffer pixels we just wrote
+        update_cache_from_fb(
+            fb,
+            cache,
+            &tile_ctrl,
+            rx as usize,
+            y_start,
+            w,
+            aligned_h,
+            mode,
+        );
+
+        // For mode 8, re-read from cache (may differ if some tiles weren't updated)
+        if mode == 8 {
+            read_cache_to_fb(fb, cache, &tile_ctrl, rx as usize, y_start, w, aligned_h);
+        }
+    }
+
+    Ok(())
+}
+
+/// Read tile versions from cache into the framebuffer.
+fn read_cache_to_fb(
+    fb: &mut Framebuffer,
+    cache: &TileCache,
+    ctrl: &[u8],
+    rx: usize,
+    ry: usize,
+    rw: usize,
+    aligned_h: usize,
+) {
+    let stride = fb.width as usize;
+    let mut ci = 0;
+
+    for ty in (0..aligned_h).step_by(TILE) {
+        for tx in (0..rw).step_by(TILE) {
+            let version = (ctrl[ci] & 0x7F) as usize;
+            ci += 1;
+
+            let tile_x = (rx + tx) / TILE;
+            let tile_y = (ry + ty) / TILE;
+            if tile_x >= cache.tiles_x || tile_y >= cache.tiles_y {
+                continue;
+            }
+
+            let entry = cache.get(tile_x, tile_y);
+            let tw = TILE.min(rw - tx);
+            let th = TILE.min(aligned_h - ty);
+
+            for row in 0..th {
+                let fb_off = (ry + ty + row) * stride + rx + tx;
+                let cache_off = row * TILE;
+                fb.pixels[fb_off..fb_off + tw]
+                    .copy_from_slice(&entry.data[version % VERSIONS][cache_off..cache_off + tw]);
+            }
+        }
+    }
+}
+
+/// Update tile cache from framebuffer pixels.
+#[allow(clippy::too_many_arguments)]
+fn update_cache_from_fb(
+    fb: &Framebuffer,
+    cache: &mut TileCache,
+    ctrl: &[u8],
+    rx: usize,
+    ry: usize,
+    rw: usize,
+    aligned_h: usize,
+    mode: u8,
+) {
+    let stride = fb.width as usize;
+    let mut ci = 0;
+
+    for ty in (0..aligned_h).step_by(TILE) {
+        for _tx_idx in 0..(rw / TILE) {
+            let tx = _tx_idx * TILE;
+            let byte = ctrl[ci];
+            ci += 1;
+
+            let version = (byte & 0x7F) as usize;
+            let should_update = if mode == 8 {
+                byte & 0x80 == 0 // bit 7 clear = update
+            } else {
+                true // mode 4: always update
+            };
+
+            if !should_update {
+                continue;
+            }
+
+            let tile_x = (rx + tx) / TILE;
+            let tile_y = (ry + ty) / TILE;
+            if tile_x >= cache.tiles_x || tile_y >= cache.tiles_y {
+                continue;
+            }
+
+            let entry = cache.get_mut(tile_x, tile_y);
+            let tw = TILE.min(rw - tx);
+            let th = TILE.min(aligned_h - ty);
+
+            for row in 0..th {
+                let fb_off = (ry + ty + row) * stride + rx + tx;
+                let cache_off = row * TILE;
+                entry.data[version % VERSIONS][cache_off..cache_off + tw]
+                    .copy_from_slice(&fb.pixels[fb_off..fb_off + tw]);
+            }
+        }
+    }
+}

crates/ericrfb/src/codec/mod.rs

@@ -1,2 +1,4 @@
 pub mod hextile;
+pub mod iip;
+pub mod raw_tile;
 pub mod tight;

crates/ericrfb/src/codec/raw_tile.rs

@@ -0,0 +1,103 @@
+use std::io::Read;
+
+use crate::framebuffer::Framebuffer;
+use crate::proto::{self, read_exact, read_i8};
+
+/// Decode encoding 10 (Raw with tile interleave).
+///
+/// Reads 1 flag byte. If bit 0 is clear, falls back to plain Raw.
+/// If bit 0 is set, reads w*h bytes of 16x16 tile-interleaved data
+/// and deinterleaves to row-major before blitting.
+///
+/// Reference: ByteColorRFBRenderer.for() line 109.
+pub fn decode_raw_tile(
+    r: &mut impl Read,
+    fb: &mut Framebuffer,
+    rx: u16,
+    ry: u16,
+    rw: u16,
+    rh: u16,
+) -> proto::Result<()> {
+    let flag = read_i8(r)?;
+
+    let w = rw as usize;
+    let h = rh as usize;
+    let size = w * h;
+
+    if flag & 1 == 0 {
+        // Plain raw — no interleave
+        let data = read_exact(r, size)?;
+        fb.apply_raw(rx, ry, rw, rh, &data);
+        return Ok(());
+    }
+
+    // Read tile-interleaved data
+    let interleaved = read_exact(r, size)?;
+
+    // Clamp to framebuffer bounds
+    let w = w.min(fb.width as usize - rx as usize);
+    let h = h.min(fb.height as usize - ry as usize);
+
+    // Deinterleave 16x16 tiles to row-major.
+    // Input is stored tile-by-tile: all pixels of tile (0,0), then tile (1,0), etc.
+    // Each tile is row-major within itself.
+    let tile = 16usize;
+    let tiles_x = w.div_ceil(tile);
+    let mut output = vec![0u8; w * h];
+
+    for row in 0..h {
+        let tile_row = row / tile;
+        let row_in_tile = row % tile;
+        for col in 0..w {
+            let tile_col = col / tile;
+            let col_in_tile = col % tile;
+            // Tile index in raster order
+            let tile_idx = tile_row * tiles_x + tile_col;
+            // Tile dimensions (edge tiles may be smaller)
+            let tw = tile.min(w - tile_col * tile);
+            // Offset within tile data: preceding full tiles + row offset + col offset
+            let mut tile_data_start = 0usize;
+            // Sum sizes of all preceding tiles
+            for t in 0..tile_idx {
+                let tr = t / tiles_x;
+                let tc = t % tiles_x;
+                let this_tw = tile.min(w - tc * tile);
+                let this_th = tile.min(h - tr * tile);
+                tile_data_start += this_tw * this_th;
+            }
+            let src = tile_data_start + row_in_tile * tw + col_in_tile;
+            output[row * w + col] = interleaved[src];
+        }
+    }
+
+    fb.apply_raw(rx, ry, w as u16, h as u16, &output);
+    Ok(())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::io::Cursor;
+
+    #[test]
+    fn test_raw_tile_plain_fallback() {
+        let mut fb = Framebuffer::new(4, 4);
+        // Flag byte with bit 0 clear → plain raw
+        let mut data = vec![0x00i8 as u8]; // flag
+        data.extend_from_slice(&[0x42; 16]); // 4x4 pixels
+        let mut c = Cursor::new(data);
+        decode_raw_tile(&mut c, &mut fb, 0, 0, 4, 4).unwrap();
+        assert!(fb.pixels.iter().all(|&p| p == 0x42));
+    }
+
+    #[test]
+    fn test_raw_tile_small_no_tile_boundary() {
+        let mut fb = Framebuffer::new(4, 4);
+        // Flag byte with bit 0 set, but 4x4 < 16x16 so no tile wrap occurs
+        let mut data = vec![0x01u8]; // flag with interleave
+        data.extend_from_slice(&[0xAA; 16]); // 4x4 pixels (all same, no deinterleave effect)
+        let mut c = Cursor::new(data);
+        decode_raw_tile(&mut c, &mut fb, 0, 0, 4, 4).unwrap();
+        assert!(fb.pixels.iter().all(|&p| p == 0xAA));
+    }
+}

crates/ericrfb/src/codec/tight.rs

@@ -82,7 +82,7 @@ impl ZlibStreams {
         }
     }
 
-    fn get_or_init(&mut self, idx: usize) -> &mut Decompress {
+    pub fn get_or_init(&mut self, idx: usize) -> &mut Decompress {
         self.streams[idx].get_or_insert_with(|| Decompress::new(true))
     }
 
@@ -171,8 +171,8 @@ pub fn decode_tight(
                 )));
             }
 
-            let packed_colors = read_u8(r)?;
             palette_2 = Some(if let Some(pal) = palette_for_selector(pal_selector) {
+                let packed_colors = read_u8(r)?;
                 match pal_selector {
                     1 => [
                         pal[(packed_colors >> 1) as usize],
@@ -189,13 +189,10 @@ pub fn decode_tight(
                     _ => [packed_colors >> 4, packed_colors & 0x0F],
                 }
             } else {
-                // Default: read 2 separate color bytes
-                // Actually for selector 0 the Java code reads 2 bytes:
-                // nArray[0] = this.K[aw2.w.read()]; nArray[1] = this.K[aw2.w.read()];
-                // But packed_colors was already read as 1 byte. The protocol
-                // for selector 0 reads colors differently. Since this path is rare
-                // and we've already read the packed byte, treat high/low nibbles.
-                [packed_colors >> 4, packed_colors & 0x0F]
+                // Selector 0: two separate RGB332 color bytes (line 421-422)
+                let c0 = read_u8(r)?;
+                let c1 = read_u8(r)?;
+                [c0, c1]
             });
 
             row_bytes = (rw as usize).div_ceil(8);

crates/ericrfb/src/input.rs

@@ -49,54 +49,41 @@ pub const HOTKEY_CTRL_ALT_DEL: &str = "36 f0 37 f0 4e";
 /// Map a JavaScript `KeyboardEvent.code` string to an e-RIC scancode.
 /// Returns `None` for unmapped keys.
 pub fn js_code_to_scancode(code: &str) -> Option<u8> {
+    // Mapping derived from KeyTranslator.java line 14 (Java VK_* → keynr table).
     Some(match code {
-        // Function row
-        "Escape" => 0,
-        "F1" => 59,
-        "F2" => 60,
-        "F3" => 61,
-        "F4" => 62,
-        "F5" => 63,
-        "F6" => 64,
-        "F7" => 65,
-        "F8" => 66,
-        "F9" => 67,
-        "F10" => 68,
-        "F11" => 69,
-        "F12" => 70,
+        // Number row (keynr 0-13)
+        "Backquote" => 0,
+        "Digit1" => 1,
+        "Digit2" => 2,
+        "Digit3" => 3,
+        "Digit4" => 4,
+        "Digit5" => 5,
+        "Digit6" => 6,
+        "Digit7" => 7,
+        "Digit8" => 8,
+        "Digit9" => 9,
+        "Digit0" => 10,
+        "Minus" => 11,
+        "Equal" => 12,
+        "Backspace" => 13,
 
-        // Number row
-        "Backquote" => 1,
-        "Digit1" => 2,
-        "Digit2" => 3,
-        "Digit3" => 4,
-        "Digit4" => 5,
-        "Digit5" => 6,
-        "Digit6" => 7,
-        "Digit7" => 8,
-        "Digit8" => 9,
-        "Digit9" => 10,
-        "Digit0" => 11,
-        "Minus" => 12,
-        "Equal" => 13,
-        "Backspace" => 14,
+        // QWERTY row (keynr 14-27)
+        "Tab" => 14,
+        "KeyQ" => 15,
+        "KeyW" => 16,
+        "KeyE" => 17,
+        "KeyR" => 18,
+        "KeyT" => 19,
+        "KeyY" => 20,
+        "KeyU" => 21,
+        "KeyI" => 22,
+        "KeyO" => 23,
+        "KeyP" => 24,
+        "BracketLeft" => 25,
+        "BracketRight" => 26,
+        "Enter" => 27,
 
-        // QWERTY row
-        "Tab" => 15,
-        "KeyQ" => 16,
-        "KeyW" => 17,
-        "KeyE" => 18,
-        "KeyR" => 19,
-        "KeyT" => 20,
-        "KeyY" => 21,
-        "KeyU" => 22,
-        "KeyI" => 23,
-        "KeyO" => 24,
-        "KeyP" => 25,
-        "BracketLeft" => 26,
-        "BracketRight" => 27,
-
-        // Home row
+        // Home row (keynr 28-40)
         "CapsLock" => 28,
         "KeyA" => 29,
         "KeyS" => 30,
@@ -109,11 +96,10 @@ pub fn js_code_to_scancode(code: &str) -> Option<u8> {
         "KeyL" => 37,
         "Semicolon" => 38,
         "Quote" => 39,
-        "Enter" => 40,
+        "Backslash" => 40,
 
-        // Bottom row
+        // Bottom row (keynr 41-53)
         "ShiftLeft" => 41,
-        "Backslash" => 42,
         "KeyZ" => 43,
         "KeyX" => 44,
         "KeyC" => 45,
@@ -126,51 +112,66 @@ pub fn js_code_to_scancode(code: &str) -> Option<u8> {
         "Slash" => 52,
         "ShiftRight" => 53,
 
-        // Modifier / bottom row
+        // Modifiers (keynr 54-58)
         "ControlLeft" => 54,
-        "MetaLeft" => 105,
         "AltLeft" => 55,
         "Space" => 56,
         "AltRight" => 57,
-        "MetaRight" => 106,
         "ControlRight" => 58,
 
-        // Navigation cluster
-        "PrintScreen" => 71,
-        "ScrollLock" => 72,
-        "Pause" => 73,
+        // Escape + Function keys (keynr 59-71)
+        "Escape" => 59,
+        "F1" => 60,
+        "F2" => 61,
+        "F3" => 62,
+        "F4" => 63,
+        "F5" => 64,
+        "F6" => 65,
+        "F7" => 66,
+        "F8" => 67,
+        "F9" => 68,
+        "F10" => 69,
+        "F11" => 70,
+        "F12" => 71,
+
+        // Navigation cluster (keynr 72-84)
+        "PrintScreen" => 72,
+        "ScrollLock" => 73,
+        "Pause" => 74,
         "Insert" => 75,
         "Home" => 76,
         "PageUp" => 77,
         "Delete" => 78,
         "End" => 79,
         "PageDown" => 80,
-
-        // Arrow keys
         "ArrowUp" => 81,
         "ArrowLeft" => 82,
         "ArrowDown" => 83,
         "ArrowRight" => 84,
 
-        // Numpad
+        // Numpad (keynr 85-101)
         "NumLock" => 85,
-        "NumpadDivide" => 86,
-        "NumpadMultiply" => 87,
-        "NumpadSubtract" => 88,
+        "Numpad7" => 86,
+        "Numpad8" => 87,
+        "Numpad9" => 88,
         "NumpadAdd" => 89,
-        "NumpadEnter" => 98,
-        "Numpad7" => 90,
-        "Numpad8" => 94,
-        "Numpad9" => 99,
+        "NumpadDivide" => 90,
         "Numpad4" => 91,
         "Numpad5" => 92,
         "Numpad6" => 93,
+        "NumpadMultiply" => 94,
         "Numpad1" => 95,
         "Numpad2" => 96,
         "Numpad3" => 97,
+        "NumpadEnter" => 98,
+        "NumpadSubtract" => 99,
         "Numpad0" => 100,
         "NumpadDecimal" => 101,
 
+        // Windows/Meta keys (keynr 105-106)
+        "MetaLeft" => 105,
+        "MetaRight" => 106,
+
         _ => return None,
     })
 }
@@ -214,10 +215,20 @@ mod tests {
 
     #[test]
     fn test_js_code_mapping() {
+        // From KeyTranslator.java: VK_A(65)→29, VK_ESCAPE(27)→59, etc.
         assert_eq!(js_code_to_scancode("KeyA"), Some(29));
-        assert_eq!(js_code_to_scancode("Escape"), Some(0));
+        assert_eq!(js_code_to_scancode("KeyR"), Some(18));
+        assert_eq!(js_code_to_scancode("KeyG"), Some(33));
+        assert_eq!(js_code_to_scancode("Escape"), Some(59));
+        assert_eq!(js_code_to_scancode("Backspace"), Some(13));
+        assert_eq!(js_code_to_scancode("Enter"), Some(27));
+        assert_eq!(js_code_to_scancode("Backslash"), Some(40));
+        assert_eq!(js_code_to_scancode("Backquote"), Some(0));
+        assert_eq!(js_code_to_scancode("F1"), Some(60));
         assert_eq!(js_code_to_scancode("ControlLeft"), Some(54));
         assert_eq!(js_code_to_scancode("Delete"), Some(78));
+        assert_eq!(js_code_to_scancode("Numpad7"), Some(86));
+        assert_eq!(js_code_to_scancode("NumpadMultiply"), Some(94));
         assert_eq!(js_code_to_scancode("Unknown"), None);
     }
 }

crates/ericrfb/src/session.rs

@@ -1,7 +1,7 @@
 use std::io::{BufReader, BufWriter};
 use std::net::TcpStream;
 
-use crate::codec::{hextile, tight};
+use crate::codec::{hextile, iip, raw_tile, tight};
 use crate::framebuffer::Framebuffer;
 use crate::handshake::{self, Config, ServerInit};
 use crate::msg::{self, ServerMsg};
@@ -46,19 +46,23 @@ pub struct ActiveSession {
     pub writer: BufWriter<TcpStream>,
     pub server_init: ServerInit,
     zlib: tight::ZlibStreams,
+    tile_cache: iip::TileCache,
 }
 
 impl ActiveSession {
     /// Connect, handshake, send SetEncodings + initial FBUpdateRequest.
     pub fn connect(cfg: &Config, encodings: &[i32]) -> Result<Self, SessionError> {
         let raw = handshake::connect(cfg)?;
+        let w = raw.server_init.width;
+        let h = raw.server_init.height;
         let mut session = Self {
-            framebuffer: Framebuffer::new(raw.server_init.width, raw.server_init.height),
+            framebuffer: Framebuffer::new(w, h),
             server_name: raw.server_name,
             reader: raw.reader,
             writer: raw.writer,
             server_init: raw.server_init,
             zlib: tight::ZlibStreams::new(),
+            tile_cache: iip::TileCache::new(w, h),
         };
 
         // Tell server to send 8bpp RGB332 pixels
@@ -157,6 +161,8 @@ impl ActiveSession {
                 if self.server_init.width != old_w || self.server_init.height != old_h {
                     self.framebuffer
                         .resize(self.server_init.width, self.server_init.height);
+                    self.tile_cache
+                        .resize(self.server_init.width, self.server_init.height);
                     return Ok(Some(Event::Resize {
                         width: self.server_init.width,
                         height: self.server_init.height,
@@ -200,7 +206,6 @@ impl ActiveSession {
                         .copy_rect(src_x, src_y, hdr.x, hdr.y, hdr.w, hdr.h);
                 }
                 5 => {
-                    // Hextile
                     hextile::decode_hextile(
                         &mut self.reader,
                         &mut self.framebuffer,
@@ -222,6 +227,28 @@ impl ActiveSession {
                         hdr.h,
                     )?;
                 }
+                9 => {
+                    iip::decode_iip(
+                        &mut self.reader,
+                        &mut self.framebuffer,
+                        &mut self.tile_cache,
+                        &mut self.zlib,
+                        hdr.x,
+                        hdr.y,
+                        hdr.w,
+                        hdr.h,
+                    )?;
+                }
+                10 => {
+                    raw_tile::decode_raw_tile(
+                        &mut self.reader,
+                        &mut self.framebuffer,
+                        hdr.x,
+                        hdr.y,
+                        hdr.w,
+                        hdr.h,
+                    )?;
+                }
                 other => {
                     return Err(SessionError::UnsupportedEncoding(other));
                 }

doc/plan/implementation-feature-port-mapping.md

@@ -0,0 +1,121 @@
+# KVM port configuration and switching
+
+## Context
+
+The Belkin OmniView fronts an Avocent KVM switch with up to 16 ports. The legacy web interface at `http://10.3.0.130` allows port naming, hotkey assignment, visibility toggling, and active port switching. Users currently need to visit that interface separately. We want blekin to fully replace it — starting with port management, with a navigation structure that supports adding more settings pages later.
+
+## Belkin device API (from HTML form inspection)
+
+**GET /kvm.asp** — returns HTML form with current port config:
+- `ECG_kvm_nr_ports`: port count (1,2,4,8,12,16,24,32,48,64)
+- `ECG_key_pause_duration`: ms (default 100)
+- Per port N (0-indexed): `ECG_kvm_portname_N`, `ECG_kvm_hotkey_N`, `ECG_kvm_show_in_rc_N`
+- `kvm_active_port_0`: currently selected port
+
+**POST /kvm.asp** — save port config (same fields + `action_apply=Apply`)
+
+**POST /home2.asp** — switch active port: `kvm_active_port_0=<0-15>&action_switch_0=Switch`
+
+All requests require `pp_session_id` cookie.
+
+## Changes
+
+### Backend: persist session cookie
+
+Modify `AppState` in `main.rs` to hold the device session cookie:
+```rust
+pub session_cookie: Arc<tokio::sync::RwLock<Option<String>>>,
+```
+
+Update `login.rs` to store the cookie into shared state after successful auth.
+
+### Backend: new REST endpoints (`crates/ericrfb-proxy/src/kvm.rs`)
+
+| Endpoint | Method | Purpose |
+|----------|--------|---------|
+| `/api/kvm/ports` | GET | Fetch port config (scrape kvm.asp, return JSON) |
+| `/api/kvm/ports` | PUT | Save port config (build form, POST to kvm.asp) |
+| `/api/kvm/switch` | POST | Switch active port (POST to home2.asp) |
+
+**GET /api/kvm/ports response:**
+```json
+{
+  "port_count": 16,
+  "key_pause_duration": 100,
+  "active_port": 0,
+  "ports": [
+    { "index": 0, "name": "oolon", "hotkey": "", "show_in_rc": true },
+    ...
+  ]
+}
+```
+
+HTML scraping: simple string/regex matching on the predictable firmware HTML (extract `value="..."` from named inputs, `selected` from dropdowns, `checked` from checkboxes).
+
+### Frontend: app shell with navigation (`crates/ericrfb-frontend/src/shell.ts`)
+
+After login, render a shell layout:
+```
++----------+----------------------------------+
+| sidebar  | content area                     |
+|          |                                  |
+| Console  | (active page rendered here)      |
+| Ports    |                                  |
+|          |                                  |
++----------+----------------------------------+
+```
+
+Each page module exports `mount(container)` and `unmount()`. The shell swaps them on nav clicks. This pattern supports adding Virtual Media, Users, Device Settings etc. later without restructuring.
+
+### Frontend: refactor console into page module
+
+Move `console.ts` logic into a `pages/console.ts` with mount/unmount pattern:
+- `mount(el, session)`: creates toolbar + canvas, connects WebSocket
+- `unmount()`: tears down WebSocket, removes event listeners
+
+Add port switcher `<select>` to the console toolbar (fetches port list from `/api/kvm/ports`, calls `/api/kvm/switch` on change, triggers reconnect).
+
+### Frontend: port config page (`crates/ericrfb-frontend/src/pages/ports.ts`)
+
+Editable table of ports with name, hotkey, show-in-console fields. Port count dropdown and key-pause input at the top. Save button PUTs to `/api/kvm/ports`. Each row has a Switch button that POSTs to `/api/kvm/switch`. Active port highlighted.
+
+## Files
+
+### New
+| File | Purpose |
+|------|---------|
+| `crates/ericrfb-proxy/src/kvm.rs` | GET/PUT ports, POST switch, HTML scraping |
+| `crates/ericrfb-frontend/src/shell.ts` | App shell, sidebar nav, page routing |
+| `crates/ericrfb-frontend/src/pages/console.ts` | Console page (refactored from console.ts) |
+| `crates/ericrfb-frontend/src/pages/ports.ts` | Port configuration page |
+
+### Modified
+| File | Changes |
+|------|---------|
+| `crates/ericrfb-proxy/src/main.rs` | session_cookie in AppState, new routes, `mod kvm` |
+| `crates/ericrfb-proxy/src/login.rs` | Store cookie in shared state after auth |
+| `crates/ericrfb-proxy/Cargo.toml` | Add `regex = "1"` |
+| `crates/ericrfb-frontend/src/main.ts` | After login → mountShell() instead of startConsole() |
+| `crates/ericrfb-frontend/src/login.ts` | Success callback → shell mount |
+| `crates/ericrfb-frontend/src/style.css` | Shell layout, sidebar, ports page styles |
+| `crates/ericrfb-frontend/src/console.ts` | Delete or re-export from pages/console.ts |
+
+## Implementation order
+
+1. Backend: session cookie persistence in AppState + login.rs
+2. Backend: kvm.rs with three endpoints, test with curl
+3. Frontend: shell.ts with sidebar navigation
+4. Frontend: refactor console.ts → pages/console.ts with mount/unmount
+5. Frontend: pages/ports.ts wired to API
+6. Frontend: port switcher dropdown in console toolbar
+
+## Verification
+
+- `cargo test && cargo clippy` pass
+- `npx tsc --noEmit` passes
+- `curl /api/kvm/ports` returns correct JSON matching device state
+- `curl -X POST /api/kvm/switch -d '{"port":0}'` switches the active port
+- `curl -X PUT /api/kvm/ports` with config JSON updates port names on device
+- Frontend: navigate between Console and Ports pages without breaking WebSocket
+- Frontend: switch port from console toolbar, console reconnects to new port
+- Frontend: edit port names in Ports page, save, verify on device

script/setup.sh

@@ -0,0 +1,144 @@
+#!/usr/bin/env bash
+
+ui_host=oolon.kosherinata.internal
+ws_host=frootmig.kosherinata.internal
+app_fqdn=blekin.kosherinata.internal
+
+repo_path=~/git/grenade/blekin
+fedora_trusted_root_path=/etc/pki/ca-trust/source/anchors/root-internal.pem
+fedora_intermediate_path=/etc/pki/ca-trust/source/anchors/intermediate-internal.pem
+
+
+if ssh ${ws_host} 'id blekin 2> /dev/null || sudo useradd --system --create-home --home-dir /var/lib/blekin --user-group blekin'; then
+    echo "blekin system user created or observed on ${ws_host}"
+else
+    echo "failed to create blekin system user on ${ws_host}"
+    exit 1
+fi
+if rsync \
+    --archive \
+    --compress \
+    --rsync-path 'sudo rsync' \
+    --chown root:root \
+    ${repo_path}/asset/systemd/blekin.service \
+    ${ws_host}:/etc/systemd/system/blekin.service \
+    && ssh ${ws_host} sudo systemctl daemon-reload; then
+    echo "blekin.service synced to ${ws_host}"
+else
+    echo "failed to sync blekin.service to ${ws_host}"
+    exit 1
+fi
+if ssh ${ws_host} systemctl is-active --quiet blekin.service; then
+    if ssh ${ws_host} sudo systemctl restart blekin.service; then
+        echo "blekin.service restarted on ${ws_host}"
+    else
+        echo "failed to restart blekin.service on ${ws_host}"
+        exit 1
+    fi
+else
+    if ssh ${ws_host} sudo systemctl start blekin.service; then
+        echo "blekin.service started on ${ws_host}"
+    else
+        echo "failed to start blekin.service on ${ws_host}"
+        exit 1
+    fi
+fi
+
+app_cert_is_valid=false
+app_cert_remote_path=/etc/nginx/tls/cert/${app_fqdn}.pem
+app_key_remote_path=/etc/nginx/tls/key/${app_fqdn}.pem
+app_cert_local_path=/tmp/${app_fqdn}.pem
+
+if rsync \
+    --archive \
+    --compress \
+    --rsync-path 'sudo rsync' \
+    ${ui_host}:${app_cert_remote_path} \
+    ${app_cert_local_path} 2> /dev/null; then
+    if openssl verify \
+        -trusted ${fedora_trusted_root_path} \
+        -untrusted ${fedora_intermediate_path} \
+        ${app_cert_local_path}; then
+        echo "verified ${app_fqdn} cert from ${ui_host}"
+        app_cert_is_valid=true
+    else
+        echo "failed to verify ${app_fqdn} cert from ${ui_host}"
+        exit 1
+    fi
+else
+    echo "observed missing ${app_fqdn} cert on ${ui_host}"
+fi
+if [ "${app_cert_is_valid}" = "true" ]; then
+    echo "observed valid cert for ${app_fqdn} on ${ui_host}"
+else
+    if rsync \
+        --archive \
+        --compress \
+        --rsync-path 'sudo rsync' \
+        --chmod 600 \
+        --chown root:root \
+        ~/.step/secrets/provisioner \
+        ${ui_host}:/tmp/provisioner; then
+        echo "provisioner secret synced to ${ui_host}"
+    else
+        echo "failed to sync provisioner secret to ${ui_host}"
+        exit 1
+    fi
+    if ssh ${ui_host} sudo step ca certificate \
+        --force \
+        --provisioner lair \
+        --provisioner-password-file /tmp/provisioner \
+        --ca-url https://ca.internal \
+        --root /etc/pki/ca-trust/source/anchors/root-internal.pem \
+        --san ${app_fqdn} \
+        ${app_fqdn} \
+        ${app_cert_remote_path} \
+        ${app_key_remote_path}; then
+        echo "acquired ${app_fqdn} cert on ${ui_host}"
+    else
+        echo "failed to acquire ${app_fqdn} cert on ${ui_host}"
+    fi
+    ssh ${ui_host} sudo rm -f /tmp/provisioner
+fi
+
+if rsync \
+    --archive \
+    --compress \
+    --rsync-path 'sudo rsync' \
+    --chown root:root \
+    ${repo_path}/asset/nginx/${app_fqdn}.conf \
+    ${ui_host}:/etc/nginx/sites-available/${app_fqdn}.conf; then
+    echo "${app_fqdn}.conf synced to ${ui_host}"
+else
+    echo "failed to sync ${app_fqdn}.conf to ${ui_host}"
+fi
+if ssh ${ui_host} sudo ln -sf /etc/nginx/sites-available/${app_fqdn}.conf /etc/nginx/sites-enabled/${app_fqdn}.conf; then
+    echo "${app_fqdn} enabled on ${ui_host}"
+else
+    echo "failed to enable ${app_fqdn} on ${ui_host}"
+fi
+if ssh ${ui_host} 'sudo nginx -t && sudo systemctl reload nginx.service'; then
+    echo "nginx reloaded on ${ui_host}"
+else
+    echo "failed to reload nginx on ${ui_host}"
+fi
+
+# todo:
+
+# frootmig:
+# sudo useradd --system --create-home --home-dir /var/lib/blekin --user-group blekin
+# sync asset/sudoers.d/ws_gitea_ci to /etc/sudoers.d/gitea_ci
+
+# oolon:
+# ssh ${ui_host} sudo mkdir -p /etc/nginx/tls/${app_fqdn}
+# sudo semanage fcontext -a -t httpd_sys_content_t "/var/www/blekin.kosherinata.internal(/.*)?"
+# sudo restorecon -Rv /var/www/blekin.kosherinata.internal/
+# sync asset/sudoers.d/ui_gitea_ci to /etc/sudoers.d/gitea_ci
+# # Create the service definition
+#sudo firewall-cmd --permanent --new-service=blekin
+#sudo firewall-cmd --permanent --service=blekin --set-description="blekin e-RIC RFB proxy"
+#sudo firewall-cmd --permanent --service=blekin --add-port=3000/tcp
+
+# Enable it in the active zone
+#sudo firewall-cmd --permanent --add-service=blekin
+#sudo firewall-cmd --reload