From 7362a58188e636510bc0bb96f33e172f8c1b376b Mon Sep 17 00:00:00 2001
From: Caitlin Everett <6157119+CaitlinEverett@users.noreply.github.com>
Date: Wed, 7 Jan 2026 13:38:12 -0600
Subject: [PATCH] Refactor FPGA Lab UI: Standardize styles, improve contrast,
 and add mobile responsiveness (Sub-900px layout)

---
 .gitignore                                    |    2 +
 ansible/roles/fixpi/tasks/tweeks.yml          |   35 +-
 ansible/roles/fixpi/templates/99-pici-motd.j2 |   16 +
 .../pib/pibfpgas/src/pibfpgas/static/demos.js |  225 ++-
 .../pib/pibfpgas/src/pibfpgas/static/pib.css  | 1293 ++++++++++++++++-
 .../src/pibfpgas/templates/local_connect.html |  390 +++++
 .../src/pibfpgas/templates/preview_tt.html    |  632 ++++++++
 .../pibfpgas/src/pibfpgas/templates/tt.html   |  703 +++++++--
 .../pib/pistat/src/pistat/static/dcws.js      |  236 +--
 9 files changed, 3202 insertions(+), 330 deletions(-)
 create mode 100644 ansible/roles/fixpi/templates/99-pici-motd.j2
 create mode 100644 ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/local_connect.html
 create mode 100644 ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/preview_tt.html

diff --git a/.gitignore b/.gitignore
index 0dcb280..cf374a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -139,3 +139,5 @@ dmypy.json
 
 db.sqlite3
 ansible/inventory/host_vars/mk_secrets.sh
+ansible_secrets.txt
+ansible_secrets_notes.md
diff --git a/ansible/roles/fixpi/tasks/tweeks.yml b/ansible/roles/fixpi/tasks/tweeks.yml
index e73892a..4628fd1 100644
--- a/ansible/roles/fixpi/tasks/tweeks.yml
+++ b/ansible/roles/fixpi/tasks/tweeks.yml
@@ -34,7 +34,7 @@
     path: "{{ nfs_root }}/root/etc/hostname"
     state: absent
   tags:
-  - hostname
+    - hostname
 
 - name: pi etc/hosts
   lineinfile:
@@ -42,7 +42,7 @@
     line: "127.0.1.1 pi{{ item.port }}"
   with_items: "{{ switch.nos }}"
   tags:
-  - hostname
+    - hostname
 
 - name: set pistat_host in /etc/environment
   lineinfile:
@@ -63,12 +63,28 @@
 - name: add time to bash prompt
   lineinfile:
     dest: "{{ nfs_root }}/root/home/pi/.bashrc"
-    insertafter: '^unset color_prompt force_color_prompt'
+    insertafter: "^unset color_prompt force_color_prompt"
     line: '{% raw %}PS1="\D{%T} $PS1"{% endraw %}'
   when: true
   tags:
     - bashrc
 
+- name: ensure update-motd.d exists
+  file:
+    path: "{{ nfs_root }}/root/etc/update-motd.d"
+    state: directory
+
+- name: install dynamic motd script
+  template:
+    src: templates/99-pici-motd.j2
+    dest: "{{ nfs_root }}/root/etc/update-motd.d/99-pici"
+    mode: "0755"
+
+- name: clear static motd
+  copy:
+    content: ""
+    dest: "{{ nfs_root }}/root/etc/motd"
+
 # the rest of these tasks config the server to monitor client boot spew
 
 - name: is server pi
@@ -76,7 +92,7 @@
     path: /boot/firmware/config.txt
   register: is_pi
   tags:
-  - ispi
+    - ispi
 
 - name: enable /dev/serial0
   ansible.builtin.lineinfile:
@@ -87,7 +103,7 @@
     - dtoverlay=disable-bt
   when: is_pi.stat.exists
   tags:
-  - ispi
+    - ispi
 
 # https://bugs.debian.org/667616
 # brltty greedily grabs serial ports, ftdi_sio loses connection
@@ -117,17 +133,18 @@
     state: stopped
     name: serial-getty@ttyAMA0.service
   tags:
-  - ispi
+    - ispi
 
 - name: Git checkout this repo for safer 2 hour onpi
   ansible.builtin.git:
-    repo: 'https://github.com/CarlFK/pici.git'
+    repo: "https://github.com/CarlFK/pici.git"
     dest: "/home/{{ user_name }}/pici"
     depth: 1
     single_branch: true
     accept_hostkey: true
-    force: true
+    force:
+      true
       #  args:
       # creates: "/home/{{ user_name }}/pici"
 
- # ssh-keyscan -H remote_host.com >> /etc/ssh/ssh_known_hosts
+  # ssh-keyscan -H remote_host.com >> /etc/ssh/ssh_known_hosts
diff --git a/ansible/roles/fixpi/templates/99-pici-motd.j2 b/ansible/roles/fixpi/templates/99-pici-motd.j2
new file mode 100644
index 0000000..5080d39
--- /dev/null
+++ b/ansible/roles/fixpi/templates/99-pici-motd.j2
@@ -0,0 +1,16 @@
+#!/bin/bash
+# PICI FPGA Lab Welcome Message
+
+# Get Pi Number from hostname (e.g. pi21 -> 21)
+NUM=$(hostname | grep -o '[0-9]*')
+# Calculate External Port (Prefix 100 + NUM + 22)
+PREFIX=$((100 + NUM))
+EXT_PORT="${PREFIX}22"
+
+cat <<EOF
+Connected to $(hostname)
+
+Prefer your own tools? Use:
+ssh -p ${EXT_PORT} pi@{{ domain_name }}
+
+EOF
diff --git a/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/static/demos.js b/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/static/demos.js
index a78f6b5..ad26538 100644
--- a/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/static/demos.js
+++ b/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/static/demos.js
@@ -1,47 +1,180 @@
-// demos.js
-// https://github.com/huashengdun/webssh?tab=readme-ov-file#browser-console
-// wssh.send('ls -l');
-
-function wssh_run(e,cmd) {
-    e.preventDefault();
-    const wssh_if = document.getElementById("wssh_if").contentWindow;
-    wssh_if.wssh.send(cmd);
-};
-
-document.getElementById('blink_leds').onclick = function(e) {
-    wssh_run(e,'cd ~/Demos/counter_test')
-    wssh_run(e,'./run_demo.sh')
-};
-
-document.getElementById('boot_micro_python').onclick = function(e) {
-    wssh_run(e,'cd ~/Demos/micro_python')
-    wssh_run(e,'./run_demo.sh')
-};
-
-document.getElementById('boot_linux').onclick = function(e) {
-    wssh_run(e,'cd ~/Demos/linux_litex')
-    wssh_run(e,'./run_demo.sh')
-};
-
-document.getElementById('check_wire').onclick = function(e) {
-    wssh_run(e,'cd ~/ci/t1')
-    wssh_run(e,'openFPGALoader -b arty top.bit')
-    wssh_run(e,'python3 t1.py')
-    wssh_run(e,'echo $?')
-};
-
-document.getElementById('tt910').onclick = function(e) {
-    wssh_run(e,'cd ~/tt-commander-app/src/ttcontrol/cli')
-    wssh_run(e,'python bl.py --serial-port /dev/ttyACM0 --throttle 1 --debug')
-    wssh_run(e,'tio /dev/ttyACM0')
-};
-
-document.getElementById('usb_off').onclick = function(e) {
-    wssh_run(e,'/sbin/uhubctl -S --ports 2 --action off')
-};
-
-
-document.getElementById('usb_on').onclick = function(e) {
-    wssh_run(e,'/sbin/uhubctl -S --ports 2 --action on')
-};
+// demos.js - SSH Terminal Sidebar Controller
 
+function wssh_run_raw(cmd) {
+    const wssh_if = document.getElementById("wssh_if");
+    if (wssh_if && wssh_if.contentWindow && wssh_if.contentWindow.wssh) {
+        wssh_if.contentWindow.wssh.send(cmd);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    
+    // --- Menu Controller ---
+    const menuContainer = document.getElementById('term-menu');
+    // If we are on a page without the menu (e.g. login), skip
+    if (!menuContainer) return;
+
+    function getVisibleItems() {
+        // Return only items that are not in a hidden container
+        return Array.from(menuContainer.querySelectorAll('.menu-item')).filter(item => {
+             return item.offsetParent !== null; // Checks visibility
+        });
+    }
+
+    function setActive(item) {
+        // Remove active from all
+        menuContainer.querySelectorAll('.menu-item').forEach(i => i.classList.remove('active'));
+        item.classList.add('active');
+        item.focus();
+    }
+
+    // Input Handling
+    menuContainer.addEventListener('keydown', function(e) {
+        const visibleItems = getVisibleItems();
+        const currentIndex = visibleItems.indexOf(document.activeElement);
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            const next = visibleItems[currentIndex + 1] || visibleItems[0];
+            setActive(next);
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prev = visibleItems[currentIndex - 1] || visibleItems[visibleItems.length - 1];
+            setActive(prev);
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            triggerItem(document.activeElement);
+        }
+    });
+
+    // Click Handling
+    menuContainer.addEventListener('click', function(e) {
+        const item = e.target.closest('.menu-item');
+        if (!item) return;
+        setActive(item);
+        triggerItem(item);
+    });
+
+    function triggerItem(item) {
+        // 1. Expand/Collapse Categories
+        if (item.classList.contains('category-header')) {
+            const category = item.parentElement;
+            const children = category.querySelector('.menu-children');
+            const indicator = item.querySelector('.indicator');
+            
+            // Special Case: BYO Category Button logic
+            if (category.dataset.category === 'byo') {
+                showBYO();
+            } else {
+                 // Toggle children
+                 if (children) {
+                     if (children.style.display === 'none') {
+                         children.style.display = 'block';
+                         indicator.textContent = '▼';
+                     } else {
+                         children.style.display = 'none';
+                         indicator.textContent = '▶';
+                     }
+                 }
+                 // Ensure terminal is visible for demos/tutorials
+                 showTerminal();
+            }
+            return;
+        }
+
+        // 2. Demo Execution
+        if (item.dataset.cmd) {
+            const cmd = item.dataset.cmd;
+            const desc = item.dataset.desc;
+            run_demo_flow(desc, cmd);
+            showTerminal(); // Ensure terminal is shown
+            return;
+        }
+
+        // 3. Command Line (Free Play)
+        if (item.id === 'btn-term-free') {
+            showTerminal();
+            return;
+        }
+
+        // 4. Contribute Guide
+        if (item.id === 'btn-contrib') {
+            showContrib();
+        }
+
+        // 5. Onboarding / Hello World
+        if (item.id === 'btn-hello-world') {
+            showTerminal();
+            run_onboarding();
+            return;
+        }
+    }
+
+    function run_demo_flow(desc, cmd) {
+        const script = `
+echo
+echo "---------------------------------------------------"
+echo " DEMO: ${desc}"
+echo "---------------------------------------------------"
+echo "Command to run: ${cmd}"
+echo
+read -p "Proceed? (y/n) " -n 1 -r
+echo
+if [[ $REPLY =~ ^[Yy]$ ]]; then
+    ${cmd}
+else
+    echo "Cancelled."
+fi
+`;
+        wssh_run_raw(script);
+    }
+
+    function run_onboarding() {
+        const script = `
+clear
+echo "Initializing..."
+sleep 1
+echo "Connecting to FPGA Hardware..."
+sleep 1
+echo
+echo "👋 HELLO WORLD!"
+echo "I am your remote FPGA board."
+echo
+echo "I am going to wave at you now."
+echo "Watch the video feed..."
+sleep 2
+echo
+echo ">> Running Blinky (LED Test)..."
+cd ~/01_simple_test/v && make load
+echo
+echo "--------------------------------------"
+echo "See the LEDs flashing?"
+echo "That was real code running on real hardware."
+echo "--------------------------------------"
+echo
+echo "Welcome to the Lab."
+echo "Use the sidebar to explore more demos."
+echo
+`;
+        wssh_run_raw(script);
+    }
+
+    // --- View Switchers ---
+    function showTerminal() {
+        document.getElementById('shared-terminal').style.display = 'block';
+        document.getElementById('view-byo').style.display = 'none';
+        document.getElementById('view-contrib').style.display = 'none';
+    }
+
+    function showBYO() {
+        document.getElementById('shared-terminal').style.display = 'none';
+        document.getElementById('view-byo').style.display = 'block';
+        document.getElementById('view-contrib').style.display = 'none';
+    }
+
+    function showContrib() {
+        document.getElementById('shared-terminal').style.display = 'none';
+        document.getElementById('view-byo').style.display = 'none';
+        document.getElementById('view-contrib').style.display = 'block';
+    }
+});
diff --git a/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/static/pib.css b/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/static/pib.css
index 4d68063..2a10c2a 100644
--- a/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/static/pib.css
+++ b/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/static/pib.css
@@ -1,40 +1,1271 @@
-  p {
-    margin: 1px;
-  }
+/* ===========================================
+   PICI FPGA Lab - PS1 Branded Styles
+   =========================================== */
+
+/* CSS Variables - PS1 Color Palette */
+:root {
+  --ps1-coral: #e84a5f;
+  --ps1-coral-dark: #d43f52;
+  --ps1-teal: #2aa4b4;
+  --ps1-teal-dark: #238d9b;
+  --ps1-charcoal: #2d3436;
+  --ps1-light: #f5f5f5;
+  --ps1-white: #ffffff;
+  --ps1-text: #333333;
+  --ps1-text-light: #666666;
+  --ps1-border: #e0e0e0;
+
+  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, sans-serif;
+  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;
+
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --radius: 8px;
+}
+
+/* Reset & Base */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-main);
+  background-color: var(--ps1-light);
+  color: var(--ps1-text);
+  margin: 0;
+  padding: 20px; /* Restored padding */
+  line-height: 1.6;
+  min-height: 100vh; /* Allow growth */
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto; /* Restore scroll */
+}
+
+/* Shared Panel Title Utility */
+.panel-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--ps1-white);
+  /* text-transform: uppercase; REMOVED per user request */
+  letter-spacing: 0.05em;
+  margin: 0;
+  line-height: 1.2;
+}
+
+/* Typography */
+h1 {
+  color: var(--ps1-charcoal);
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin: 0 0 0.25rem 0;
+  line-height: 1.1;
+}
+
+h2 {
+  color: var(--ps1-teal);
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0 0 0.75rem 0;
+  border-bottom: 2px solid var(--ps1-teal);
+  padding-bottom: 0.5rem;
+}
+
+/* Header */
+/* (Header styles are defined further down, but we leave this space if needed, or just clean up) */
+
+.header-title img {
+  width: 72px;
+  height: 72px;
+  mix-blend-mode: multiply; /* Removes white background on light bg */
+}
+
+h3 {
+  color: var(--ps1-charcoal);
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem 0;
+}
+
+p {
+  margin: 0 0 1rem 0;
+}
+
+a {
+  color: var(--ps1-teal);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+a:hover {
+  color: var(--ps1-teal-dark);
+  text-decoration: underline;
+}
+
+/* Header */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--ps1-border);
+  background: var(--ps1-light);
+  margin-bottom: 1.5rem; /* Restored margin */
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+  justify-content: flex-start;
+}
+
+.header-center {
+  flex: 1;
+  font-size: 10pt;
+  color: var(--ps1-charcoal);
+  line-height: 1.4;
+  padding: 0 1rem;
+  border-left: 1px solid var(--ps1-border);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.header-center-content {
+  width: 100%;
+  max-width: 453px;
+  text-align: left;
+}
+
+.header-right {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.5rem;
+  border-left: 1px solid var(--ps1-border);
+  padding-left: 1rem;
+}
+
+/* Footer Styles */
+.footer-layout {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--ps1-border);
+  margin-top: 1.5rem;
+  padding: 1rem 1.5rem 0 1.5rem;
+  background: transparent;
+}
+
+.footer-title {
+  color: var(--ps1-charcoal);
+  font-size: 1rem;
+  font-weight: 800;
+  letter-spacing: 1px;
+  margin-bottom: 0.5rem; /* Tighter layout */
+  text-align: left;
+  display: inline-block;
+  width: fit-content;
+  border-bottom: none; /* Remove teal underline from global h2 */
+  padding-bottom: 0;
+}
+
+.footer-hr {
+  border: 0;
+  border-top: 1px solid var(--ps1-border); /* Match header border style */
+  margin-bottom: 1.5rem; /* Reduced space before links */
+}
+
+.footer-cols {
+  display: flex;
+  justify-content: space-between;
+  gap: 3rem;
+  font-size: 0.9rem;
+}
+
+.footer-col {
+  flex: 1;
+  padding: 0 5%;
+}
+
+.footer-col:not(:first-child) {
+  border-left: 1px solid var(--ps1-border);
+}
+
+.footer-col h3 {
+  color: var(--ps1-charcoal); /* Keep contrast */
+  font-size: 1rem;
+  margin-bottom: 0.75rem;
+  border-bottom: none; /* Cleaner look */
+}
+
+.footer-col ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-col li {
+  margin-bottom: 0.5rem;
+}
+
+.footer-col a {
+  color: var(--ps1-text-light); /* Grayscale links */
+  text-decoration: none;
+}
+
+.footer-col a:hover {
+  color: var(--ps1-teal); /* Color on hover */
+  text-decoration: underline;
+}
+
+.footer-col .description {
+  font-size: 0.8em;
+  color: #999;
+  display: block;
+  margin-top: 0.2rem;
+}
+
+.header-links {
+  font-size: 0.875rem;
+}
+
+.header-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.status-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--ps1-charcoal);
+  background: var(--ps1-white);
+  padding: 0.4rem 0.8rem;
+  border-radius: 999px;
+  border: 1px solid var(--ps1-border);
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.status-badge:hover {
+  background: #f0f0f0;
+  border-color: #adb5bd;
+}
+
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #bdbdbd; /* Default gray */
+  transition: background-color 0.3s ease;
+}
+
+.status-dot.connected {
+  background-color: #2ecc71; /* Green */
+  box-shadow: 0 0 4px rgba(46, 204, 113, 0.4);
+}
+
+.status-dot.disconnected {
+  background-color: #e74c3c; /* Red */
+}
+
+/* Redundant log styles removed */
+
+
+.header-status textarea {
+  border: none;
+  background: transparent;
+  width: 300px;
+  height: 1.5em;
+  resize: none;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ps1-text-light);
+  padding: 0;
+  line-height: 1.5em;
+  outline: none;
+}
+
+/* --- New Layout Structure --- */
+
+/* Main vertical container that takes remaining height */
+.main-vertical-split {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+/* The Top Panel (Top Half of Vertical Split) */
+/* Vertical Panel Sizing - Consolidating logic */
+.vertical-panel-top {
+  flex-grow: 1;
+  flex-basis: 70%; 
+  min-height: 100px; /* Reduced from 300px to allow more resize flexibility */
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Vertical Panel Sizing central logic at end of file */
+
+/* Vertical Split Gutter (Horizontal Bar) */
+.gutter-vertical {
+  height: 10px;
+  width: 100%;
+  cursor: row-resize;
+  background-color: var(--ps1-light);
+  border-top: 1px solid var(--ps1-border);
+  border-bottom: 1px solid var(--ps1-border);
+  flex-shrink: 0;
+  transition: background-color 0.2s;
+  background-image: linear-gradient(to bottom, transparent 4px, #ccc 4px, #ccc 6px, transparent 6px);
+  margin: 0;
+  z-index: 100; /* Ensure on top */
+}
+
+.gutter-vertical:hover, .gutter-vertical:active {
+  background-color: #e0e0e0;
+  background-image: linear-gradient(to bottom, transparent 4px, var(--ps1-teal) 4px, var(--ps1-teal) 6px, transparent 6px);
+}
+
+/* Existing Horizontal Split (Now inside .vertical-panel-top) */
+.split-container {
+  display: flex;
+  width: 100%;
+  height: 100%; /* Fill the top panel */
+  margin-bottom: 0;
+  overflow: hidden; /* Prevent spillover during resize */
+}
+
+.split-panel {
+  /* Default sizing, JS will override */
+  min-width: 300px; 
+}
+
+/* Left Panel (Video) */
+.panel-left {
+  flex-basis: 40%; /* Initial width */
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+/* Right Panel (Terminal) */
+.panel-right {
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 300px;
+}
+
+/* Draggable Gutter (Horizontal split) */
+.gutter {
+  width: 10px;
+  cursor: col-resize;
+  background-color: var(--ps1-light);
+  border-left: 1px solid var(--ps1-border);
+  border-right: 1px solid var(--ps1-border);
+  flex-shrink: 0;
+  transition: background-color 0.2s;
+  background-image: linear-gradient(to right, transparent 4px, #ccc 4px, #ccc 6px, transparent 6px); /* Grip lines */
+  z-index: 100; /* Ensure on top */
+}
+
+.gutter:hover, .gutter:active {
+  background-color: #e0e0e0;
+  background-image: linear-gradient(to right, transparent 4px, var(--ps1-teal) 4px, var(--ps1-teal) 6px, transparent 6px);
+}
+
+/* Mobile Media Query moved to end of file for cascade priority */
+
+/* Cards */
+.card {
+  background: var(--ps1-white);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+  padding: 1.25rem;
+}
+
+.card-header {
+  background: var(--ps1-teal);
+  color: var(--ps1-white);
+  margin: -1.25rem -1.25rem 1rem -1.25rem;
+  padding: 0.75rem 1.25rem;
+  border-radius: var(--radius) var(--radius) 0 0;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.btn-header {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  color: var(--ps1-white);
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-header:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--ps1-white);
+}
+
+/* Bottom Section (Logs & Admin) */
+.bottom-section {
+  display: flex;
+  flex-direction: column;
+  flex: 1; /* Take remaining height in bottom panel */
+  overflow: hidden;
+  background: #2d3436;
+}
+
+.bottom-log-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* Bottom Section (Workspace Bottom) */
+.bottom-section {
+  width: 100%;
+  margin-top: 0; 
+  flex-basis: 180px; 
+  min-height: 48px; 
+  display: flex;
+  flex-direction: column;
+  background: transparent; /* Essential for accordion to not show empty dark box */
+  overflow: hidden;
+}
+
+.bottom-log-header {
+  background: var(--ps1-charcoal);
+  color: white;
+  padding: 0.75rem 1.25rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+  border-bottom: 1px solid #444;
+  border-radius: 0 0 0 0; /* Header itself is square inside the rounded container */
+}
+
+.bottom-section {
+    border-radius: 0 0 var(--radius) var(--radius);
+}
+
+.bottom-log-header:hover {
+  background: #353b3d;
+}
+
+.header-controls {
+  display: flex;
+  gap: 1rem;
+}
+
+.log-container {
+  background: #000;
+  display: none; /* Toggled via JS to flex */
+  flex-direction: column;
+  flex-grow: 1; /* MUST fill available space in bottom panel */
+  padding: 0;
+  /* Remove min-height from here, apply to the whole section when open */
+}
+
+/* Ensure flex display is used when visible, overridden by JS inline style usually, 
+   but we want it to flex-grow. */
+
+.bottom-log-textarea {
+  width: 100%;
+  flex: 1 1 auto; /* Grow and shrink as needed */
+  min-height: 80px; /* Give logs some space */
+  background: #000;
+  color: #00ff00;
+  border: none;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.85rem;
+  padding: 0.5rem;
+  resize: none;
+  outline: none;
+  border-bottom: 1px solid #333;
+}
+
+/* Debug Input Row */
+.debug-input-row {
+  display: flex;
+  flex: 0 0 auto; /* Do not shrink! This keeps it visible */
+  border-top: 1px solid #333;
+  background: #222;
+}
+
+.debug-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: white;
+  padding: 8px 12px;
+  font-family: monospace;
+  outline: none;
+}
+
+.debug-input:focus {
+  background: #333;
+}
+
+.btn-arrow {
+  background: var(--ps1-teal);
+  color: white;
+  border: none;
+  padding: 0 1rem;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.btn-arrow:hover {
+  background: var(--ps1-teal-dark);
+}
+.admin-tools-container {
+  padding: 1rem;
+  background: var(--ps1-charcoal); /* Matches requested dark theme look */
+  border-radius: var(--radius);
+  border-top: 2px solid var(--ps1-teal);
+}
+
+.admin-tools-header {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.75rem; 
+  margin-bottom: 0.75rem; 
+  text-transform: uppercase; 
+  letter-spacing: 1px;
+}
+
+/* Video Player Overlay UI */
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  /* Removed height: 100% to allow flex stretch to work */
+  /* min-height: 400px;  Keep min-height if needed, but let stretch rule */
+  border-radius: var(--radius) 0 0 0;
+  overflow: hidden;
+  background: #000; /* Black background for seamless video look */
+  box-shadow: var(--shadow-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.video-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0.75rem;
+  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  z-index: 10;
+  opacity: 1; /* Always visible */
+}
+
+/* Removed hover opacity rule since it's always visible now */
+
+.overlay-title {
+  /* Inherits .panel-title via HTML or mixin if using SASS, but here we just align properties or expect class to be added */
+  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+}
+
+.overlay-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn-overlay {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  color: var(--ps1-white);
+  padding: 0.25rem 0.6rem;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  cursor: pointer;
+  backdrop-filter: blur(4px);
+  transition: all 0.2s;
+}
+
+.btn-overlay:hover {
+  background: rgba(255, 255, 255, 0.3);
+  border-color: var(--ps1-white);
+}
+
+.btn-overlay.danger {
+  background: rgba(232, 74, 95, 0.6); /* PS1 Coral */
+  border-color: rgba(232, 74, 95, 0.8);
+}
+
+.btn-overlay.danger:hover {
+  background: rgba(232, 74, 95, 0.9);
+}
+
+/* Tooltips */
+[data-tooltip] {
+  position: relative;
+}
+
+[data-tooltip]:hover::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--ps1-charcoal);
+  color: #fff;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  white-space: nowrap;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  z-index: 20;
+  pointer-events: none;
+  margin-top: 0.5rem;
+}
+
+.video-js {
+  width: 100% !important;
+  height: auto !important;
+  aspect-ratio: 4/3;
+  display: block;
+}
 
-  h1 {
-    padding: 5px;
-    margin: 0px;
+.terminal-container iframe {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  border: none;
+  border-radius: 0; /* Inner content must be square */
+}
+
+.terminal-container {
+     border-radius: 0 var(--radius) 0 0 !important;
+}
+
+/* Sidebar Header */
+.sidebar-header {
+  padding: 1rem;
+  border-bottom: 1px solid #333;
+  background: #252526; /* Match toolbar color */
+}
+
+/* Controls Grid */
+.controls-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+/* Buttons */
+.btn {
+  font-family: var(--font-main);
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-sm {
+  font-family: var(--font-main);
+  background: var(--ps1-white);
+  border: 1px solid var(--ps1-border);
+  color: var(--ps1-charcoal);
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8rem;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.2s;
+  vertical-align: middle;
+}
+
+.btn-sm:hover {
+  background: #f0f0f0;
+  border-color: #adb5bd;
+}
+
+.btn-sm.success {
+  background: #2ecc71;
+  color: white;
+  border-color: #27ae60;
+}
+
+.btn-sm.danger {
+  background: var(--ps1-coral);
+  color: white;
+  border-color: var(--ps1-coral-dark);
+}
+
+.btn-primary {
+  background: var(--ps1-coral);
+  color: var(--ps1-white);
+}
+
+.btn-primary:hover {
+  background: var(--ps1-coral-dark);
+  transform: translateY(-1px);
+}
+
+.btn-secondary {
+  background: var(--ps1-teal);
+  color: var(--ps1-white);
+}
+
+.btn-secondary:hover {
+  background: var(--ps1-teal-dark);
+}
+
+.btn-outline {
+  background: transparent;
+  color: var(--ps1-text);
+  border: 1px solid var(--ps1-border);
+}
+
+.btn-outline:hover {
+  border-color: var(--ps1-teal);
+  color: var(--ps1-teal);
+}
+
+.btn-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+/* Icon Utilities */
+.btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.icon {
+  width: 1.1em;
+  height: 1.1em;
+  stroke-width: 2.5px;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+/* Code Blocks */
+.code-block {
+  background: var(--ps1-charcoal);
+  color: #f8f8f2;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius);
+  overflow-x: auto;
+  position: relative;
+  margin: 0.5rem 0;
+}
+
+.code-block:hover {
+  cursor: pointer;
+}
+
+.code-block::after {
+  content: "Click to copy";
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.75rem;
+  color: var(--ps1-text-light);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.code-block:hover::after {
+  opacity: 1;
+}
+
+/* Status Log */
+.status-log {
+  width: 100%;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  background: var(--ps1-charcoal);
+  color: #f8f8f2;
+  border: none;
+  border-radius: var(--radius);
+  padding: 0.75rem;
+  resize: vertical;
+}
+
+/* Resources Section */
+.resources-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.resource-card {
+  background: var(--ps1-white);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
+  padding: 1.25rem;
+  border-left: 4px solid var(--ps1-teal);
+}
+
+.resource-card h3 {
+  margin-bottom: 0.75rem;
+}
+
+.resource-card ul {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+
+.resource-card li {
+  margin-bottom: 0.5rem;
+}
+
+.resource-card .description {
+  font-size: 0.875rem;
+  color: var(--ps1-text-light);
+  margin-top: 0.25rem;
+}
+
+/* Info Box */
+.info-box {
+  background: #e3f2fd;
+  border-left: 4px solid var(--ps1-teal);
+  padding: 1rem;
+  border-radius: 0 var(--radius) var(--radius) 0;
+  margin: 1rem 0;
+}
+
+.info-box label {
+  font-weight: 600;
+  color: var(--ps1-charcoal);
+}
+
+/* Footer */
+.footer {
+  background: var(--ps1-charcoal);
+  color: var(--ps1-white);
+  margin: 2rem -20px -20px -20px;
+  padding: 1.5rem 20px;
+  text-align: center;
+}
+
+.footer a {
+  color: var(--ps1-coral);
+}
+
+/* Utility Classes */
+.text-muted {
+  color: var(--ps1-text-light);
+  font-size: 0.875rem;
+}
+
+.mt-1 {
+  margin-top: 0.5rem;
+}
+.mt-2 {
+  margin-top: 1rem;
+}
+.mb-1 {
+  margin-bottom: 0.5rem;
+}
+.mb-2 {
+  margin-bottom: 1rem;
+}
+
+/* Tabs */
+.tab-header {
+  display: flex;
+  background: var(--ps1-teal);
+  border-bottom: 1px solid var(--ps1-border);
+  border-radius: var(--radius) var(--radius) 0 0;
+  overflow: hidden;
+}
+
+.tab-btn {
+  background: transparent;
+  border: none;
+  padding: 1rem 1.5rem;
+  font-family: var(--font-main);
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+  transition: all 0.2s;
+  border-bottom: 3px solid transparent;
+}
+
+.tab-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--ps1-white);
+}
+
+.tab-btn.active {
+  color: var(--ps1-white);
+  border-bottom-color: var(--ps1-white);
+  background: var(--ps1-teal-dark);
+}
+
+.tab-content {
+  display: none;
+  position: relative;
+  background: var(--ps1-white);
+  border-radius: 0 0 var(--radius) var(--radius);
+}
+
+.tab-content.active {
+  display: block;
+}
+
+/* SSH Sidebar & Menu */
+#ssh-sidebar {
+  user-select: none;
+  font-size: 14px;
+}
+
+#ssh-sidebar ::-webkit-scrollbar {
+  width: 8px;
+  background: #111;
+}
+
+#ssh-sidebar ::-webkit-scrollbar-thumb {
+  background: #444;
+  border-radius: 4px;
+}
+
+.menu-item {
+  padding: 4px 10px; /* Reduced vertical padding */
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  transition: all 0.1s;
+  color: var(--ps1-teal); /* Default Teal text on dark bg */
+  font-size: 0.85rem; /* Match terminal size */
+  font-weight: 400;   /* Match terminal weight */
+}
+
+.menu-item:hover {
+  background: rgba(42, 164, 180, 0.1); /* Subtle Teal tint */
+}
+
+.menu-item:focus, .menu-item.active {
+  background: var(--ps1-teal); /* Full Teal Background */
+  color: #fff; /* White Text */
+  outline: none;
+  border-left-color: #fff; /* White Indicator */
+  font-weight: 400; /* Keep weight consistent */
+}
+
+.category-header {
+  font-weight: 400;
+  text-transform: none; /* Remove caps */
+  letter-spacing: normal;
+  color: #fff;
+  border-bottom: 1px dashed #444;
+  margin-top: 10px;
+  font-size: 0.85rem; /* Match terminal size */
+}
+
+.menu-item.disabled {
+  cursor: default;
+  color: #999; /* Lightened from #666 for better readability */
+  font-style: italic;
+}
+
+.menu-item.special {
+    color: #00bcd4; /* Cyan for visibility */
+    font-weight: bold;
+}
+
+/* Ensure special items turn white when active */
+.menu-item.special.active {
+    color: #fff !important;
+}
+
+.menu-children {
+  margin-left: 10px;
+  border-left: 1px solid #333;
+}
+
+/* Hide old tab styles if they exist or repurposed */
+.tab-header, .tab-content {
+  /* display: none; */ 
+  /* Removed in HTML, safe to ignore or clean up later */
+}
+
+/* Terminal Views (BYO & Contribute) */
+#view-byo, #view-contrib {
+  font-size: 0.85rem !important; /* Force match sidebar */
+  line-height: 1.4;
+  color: #d4d4d4; /* High contrast light grey */
+}
+
+#view-byo h2, #view-contrib h2 {
+  font-size: 1.1rem !important;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom-width: 1px;
+  font-weight: 600;
+}
+
+#view-byo h3, #view-contrib h3 {
+  font-size: 0.95rem !important; /* Slightly larger than body */
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: inherit; /* Use parent color (Green/White) */
+}
+
+/* Specific overrides for the green terminal look */
+#view-byo h3 { color: #00ff00; }
+#view-contrib h3 { color: #fff; }
+
+.instruction-step {
+  margin-bottom: 1rem; /* Tighter spacing */
+  border-left: 2px solid #333;
+  padding-left: 0.75rem;
+}
+
+.instruction-step p {
+  font-size: 0.85rem !important;
+  margin-bottom: 0.5rem;
+  color: #b0b0b0; /* Slightly dimmer but legible grey */
+  opacity: 1; /* Remove opacity to prevent double-dimming */
+}
+
+.cmd-block {
+    background: #111;
+    padding: 8px;
+    border: 1px solid #333;
+    color: #00ff00;
+    font-family: 'Courier New', monospace;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    font-size: 0.8rem; /* Even smaller for code */
+    margin-top: 5px;
+}
+
+.contribute-item {
+  display: block;
+  background: rgba(0, 188, 212, 0.05);
+  border: 1px solid var(--ps1-border);
+  border-left: 4px solid var(--ps1-teal);
+  border-radius: var(--radius);
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  color: var(--ps1-text);
+  position: relative;
+}
+
+.contribute-item:hover {
+  border-color: var(--ps1-teal);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+  transform: translateY(-2px);
+}
+
+.contribute-item h4 {
+  margin: 0 0 0.5rem 0;
+  color: var(--ps1-teal);
+  font-size: 1rem;
+}
+
+.contribute-item p {
+  margin: 0;
+  font-size: 0.85rem;
+  color: #636e72;
+}
+
+/* Collapsible Description */
+.panel-description {
+  margin: 0;
+  padding: 0.75rem 1.25rem;
+  background: #E3F2FD;
+  border-bottom: 1px solid var(--ps1-border);
+}
+
+.desc-toggle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--ps1-charcoal);
+  cursor: pointer;
+}
+
+.desc-toggle::after {
+  content: '▼';
+  font-size: 0.75rem;
+  transition: transform 0.2s;
+}
+
+.desc-toggle.collapsed::after {
+  transform: rotate(-90deg);
+}
+
+.desc-content {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--ps1-text);
+  line-height: 1.5;
+}
+
+.desc-content.collapsed {
+  display: none;
+}
+
+/* Status Popover Menu */
+.header-status {
+  position: relative; /* Anchor for popover */
+}
+
+.status-badge {
+    cursor: pointer;
+}
+
+.status-popover {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 0.5rem;
+  width: 280px;
+  background: var(--ps1-charcoal);
+  border: 1px solid var(--ps1-teal);
+  border-radius: var(--radius);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+  z-index: 2000;
+  padding: 1rem;
+  display: none; /* Toggled by JS */
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.status-popover.active {
+    display: flex;
+}
+
+.popover-section-title {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: rgba(255,255,255,0.5);
+    letter-spacing: 1px;
+    margin-bottom: 0.25rem;
+    border-bottom: 1px solid rgba(255,255,255,0.1);
+    padding-bottom: 0.25rem;
+}
+
+.popover-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+}
+
+.popover-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: rgba(0,0,0,0.2);
+    border-radius: 4px;
+    font-size: 0.85rem;
+    color: var(--ps1-white);
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-align: left;
+    width: 100%;
+}
+
+.popover-item:hover {
+    background: var(--ps1-teal-dark);
+    border-color: var(--ps1-teal);
+}
+
+.popover-item.danger:hover {
+    background: #c0392b;
+    border-color: #e74c3c;
+}
+
+/* --- Mobile Responsive Overrides (Placed at end for specificity) --- */
+@media (max-width: 900px) {
+  .split-container {
+    flex-direction: column;
+    overflow-y: visible; /* Allow content to flow */
   }
-  h2 {
-    padding: 1px;
-    margin: 0px;
+  .main-vertical-split {
+      overflow-y: visible;
+      display: block; /* Stack vertically */
+      height: auto !important; /* Let content dictate height */
   }
-
-  ul {
-    margin: 0px;
+  .vertical-panel-top {
+      height: auto !important;
+      flex-basis: auto !important;
+      overflow: visible;
   }
-
-  table.buttons {
-    width: fit-content;
-    float: left;
-    height: 100%;
+  .bottom-section {
+      height: auto !important;
+      flex-basis: auto !important;
+      overflow: visible;
+      margin-top: 0;
   }
-  table.buttons td {
-    width: fit-content;
+  .gutter, .gutter-vertical {
+    display: none !important;
   }
-
-  table td {
-    padding: 5px;
-    border: 1px solid black;
-    text-align: center;
+  .panel-left, .panel-right {
+    flex-basis: auto !important;
+    width: 100% !important;
+    margin-bottom: 0;
   }
-  table {
-    width: 100%;
-    height: 90%;
-    text-align: center;
+  
+  /* --- Mobile Specific Rounding & Sizing --- */
+  
+  /* Video: Top corners rounded, min-height enforced */
+  .video-wrapper {
+      border-radius: var(--radius) var(--radius) 0 0 !important;
+      min-height: 300px; 
+      width: 100% !important;
   }
-  iframe {
-    width: 100%;
-    height: 100%;
+  
+  /* SSH Terminal: No corners, stacked in middle (Crucial: Overrides desktop Rule) */
+  .terminal-container {
+      border-radius: 0 !important; /* SQUARE TOP RIGHT for mobile */
+      width: 100% !important;
+      border-left: none !important; /* Remove separator */
+      min-height: 500px; /* Wise default for mobile terminal usage */
+  }
+  
+  /* Debug Panel: Bottom corners remain rounded (default), ensure width */
+  .bottom-section {
+      width: 100% !important;
+      border-radius: 0 0 var(--radius) var(--radius) !important;
+  }
+  
+  /* Hide resize handles effectively */
+  #dragGutter, #verticalGutter {
+      display: none;
   }
+}
diff --git a/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/local_connect.html b/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/local_connect.html
new file mode 100644
index 0000000..63695e4
--- /dev/null
+++ b/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/local_connect.html
@@ -0,0 +1,390 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LOCAL CONNECT - Pi21</title>
+  
+  <link rel="icon" href="../static/fpga.png">
+  <link rel="stylesheet" href="../static/pib.css">
+  
+  <!-- Video.js -->
+  <link href="https://vjs.zencdn.net/8.4.0/video-js.min.css" rel="stylesheet">
+  <script src="https://vjs.zencdn.net/8.4.0/video.min.js"></script>
+  
+  <!-- Dependencies -->
+  <script src="https://f4pga-examples.readthedocs.io/en/latest/_static/jquery.js"></script>
+  <link rel="stylesheet" href="https://f4pga-examples.readthedocs.io/en/latest/_static/stylesheets/f4pga.css">
+</head>
+
+<body>
+
+<!-- Header -->
+<header class="header">
+  <div class="header-title">
+    <div style="background:red; color:white; padding: 2px 5px; font-weight:bold; border-radius:4px; margin-right:10px;">LOCAL</div>
+    <div>
+      <h1>Pi21 (Real Hardware)</h1>
+      <span class="text-muted">Direct Connection Mode</span>
+    </div>
+  </div>
+
+  <div class="header-center">
+    <span></span>👋 <strong>Welcome.</strong> This provides direct access to an FPGA board connected to a Raspberry Pi. Watch live video, control hardware, and connect via SSH to run your own bitstreams.</span>
+  </div>
+  
+  <div class="header-right">
+    <div class="header-status">
+      <div id="status-badge-21" class="status-badge" onclick="toggleHardwareMenu()" title="System Control Menu">
+        <div id="status-dot-21" class="status-dot"></div>
+        <span id="status-text-21">System Ready</span>
+        <span style="margin-left: 0.5rem; opacity: 0.6; display: inline-flex;">▼</span>
+      </div>
+      
+       <!-- Popover Menu -->
+       <div id="hw-menu" class="status-popover">
+           <div>
+               <div class="popover-section-title">System Status</div>
+               <div style="font-size: 0.8rem; color: #aaa; margin-bottom:0.5rem;">
+                   Connected to Pi21 via WebSocket.<br>
+                   Video Stream: Active
+               </div>
+           </div>
+           <div>
+               <div class="popover-section-title">Hardware Control</div>
+               <div class="popover-grid">
+                   <button class="popover-item danger">⚡ Reset Pi</button>
+                   <button class="popover-item">📹 Reset Video</button>
+                   <button class="popover-item">🔌 USB Power</button>
+                   <button class="popover-item">🔌 Cycle PoE</button>
+               </div>
+           </div>
+       </div>
+    </div>
+  </div>
+</header>
+
+
+<!-- Main Content: Vertical Split Wrapper -->
+<div class="main-vertical-split" id="mainVerticalSplit" style="height: 80vh;">
+
+  <!-- Top Panel: Video + Terminal (Resizable Split) -->
+  <div class="vertical-panel-top" id="topPanel">
+      <div class="split-container" id="splitContainer">
+        
+        <!-- Left Panel: Video + Controls -->
+        <div class="split-panel panel-left video-wrapper" id="panelLeft">
+          <div style="width:100%; height:100%; background:#000;">
+            <video
+                id="video-player21"
+                class="video-js vjs-default-skin vjs-big-play-centered"
+                controls
+                preload="auto"
+                width="100%"
+                height="100%"
+                data-setup='{"fluid": false}'
+                autoplay muted
+            >
+                <!-- REAL VIDEO -->
+                <source src="https://ps1.fpgas.online/hls/21/stream.m3u8" type="application/x-mpegURL">
+                <p class="vjs-no-js">Enable JS for Video</p>
+            </video>
+          </div>
+        </div>
+        
+        <!-- Draggable Gutter (Horizontal) -->
+        <div class="gutter" id="dragGutter"></div>
+
+        <!-- Right Panel: Terminal -->
+        <div class="split-panel panel-right card terminal-container" id="panelRight" style="padding:0; overflow:hidden; display: flex; flex-direction: row;">
+          
+           <!-- Sidebar Menu -->
+           <div class="sidebar-container" id="term-menu" style="width: 250px; background: #1e1e1e; border-right: 1px solid #333; display: flex; flex-direction: column;">
+              <div class="sidebar-header panel-title">
+                  SSH Terminal
+              </div>
+              <div class="sidebar-menu" style="flex-grow: 1; overflow-y: auto; padding: 0.5rem 0;">
+                <!-- 1. Tutorials (Default) -->
+                <div class="menu-category" data-category="tutorials">
+                  <div class="menu-item category-header" tabindex="0">
+                     <span class="indicator">▼</span> Tutorials
+                  </div>
+                  <div class="menu-children" style="display:block;">
+                     <div class="menu-item special active" tabindex="0" id="btn-hello-world" style="color: #00ff00;" data-cmd="cd ~/01_simple_test/v && make load">👋 Hello World (Start Here)</div>
+                  </div>
+                </div>
+
+                <!-- 2. Demos -->
+                <div class="menu-category" data-category="demos">
+                  <div class="menu-item category-header" tabindex="0">
+                     <span class="indicator">▶</span> Demos
+                  </div>
+                  <div class="menu-children" style="display:none;">
+                     <div class="menu-item" tabindex="0" data-cmd="cd ~/01_simple_test/v && make load" data-desc="Blink LEDs">Blink LEDs</div>
+                     <div class="menu-item" tabindex="0" data-cmd="cd ~/02_micropython && make load" data-desc="MicroPython">MicroPython</div>
+                     <div class="menu-item" tabindex="0" data-cmd="cd ~/03_linux_litex && make load" data-desc="Linux on Litex">Linux on Litex</div>
+                  </div>
+                </div>
+                
+                <!-- 3. Command Line -->
+                <div class="menu-item" tabindex="0" id="btn-term-free">>_ Command Line</div>
+              </div>
+            </div>
+
+           <!-- Terminal / Content Area -->
+           <div class="terminal-wrapper" style="flex-grow: 1; position: relative; display: flex; flex-direction: column;">
+               <div class="term-toolbar" style="height: 48px; border-bottom: 1px solid #333; background: #252526; display: flex; align-items: center; justify-content: flex-end; padding: 0 1rem;">
+                    <button id="wssh-connect" onclick="window.location.reload()" class="btn-sm btn-icon">
+                        Reset SSH
+                    </button>
+               </div>
+
+               <!-- Shared Terminal -->
+               <div id="shared-terminal" style="flex-grow: 1; position: relative;">
+                    <iframe id="wssh_if" style="width: 100%; height: 100%; border:0;" src=""></iframe>
+               </div>
+               
+
+               <!-- 2. BYO Guide (Hidden) -->
+               <div id="view-byo" style="padding: 2rem; display: none; overflow-y: auto; background: #000; color: #00ff00; font-family: 'Courier New', monospace; height: 100%;">
+                    <h2 style="border-bottom: 1px solid #00ff00; padding-bottom: 0.5rem; margin-bottom: 1.5rem;">> MANUAL_OVERRIDE.exe</h2>
+                    
+                    <div class="instruction-step">
+                        <h3>1. Initialize Connection</h3>
+                        <p>Open your local terminal emulator.</p>
+                    </div>
+
+                    <div class="instruction-step">
+                        <h3>2. Execute Protocol</h3>
+                        <div class="cmd-block">ssh -p 12122 pi@ps1.fpgas.online</div>
+                    </div>
+
+                    <div class="instruction-step">
+                        <h3>3. Authenticate</h3>
+                        <div style="border: 1px dashed #00ff00; padding: 10px; margin-top: 10px;">
+                            User: pi<br>
+                            Pass: [Functionality Password]<br>
+                            Port: 12122
+                        </div>
+                    </div>
+               </div>
+
+                <!-- 3. Contribute Guide (Hidden) -->
+               <div id="view-contrib" style="padding: 2rem; display: none; overflow-y: auto; background: #1e1e1e; height: 100%;">
+                    <h2>🤝 Contribute a Demo</h2>
+                    <p>Join the library of FPGA examples.</p>
+                    
+                    <div class="instruction-step">
+                        <h3>Step 1: Fork & Clone</h3>
+                        <div class="cmd-block">git clone https://github.com/CarlFK/pici-demos.git</div>
+                    </div>
+                    
+                     <div class="instruction-step">
+                        <h3>Step 4: Self-Documentation</h3>
+                        <p>Create a `run_demo.sh` to automate the user experience.</p>
+                        <div class="cmd-block">#!/bin/bash
+echo "Loading My Cool Design..."
+make load
+echo "Done! Look at the LEDs."</div>
+                    </div>
+               </div>
+           </div>
+        </div>
+        
+      </div>
+  </div>
+
+</div>
+
+<!-- Logic -->
+<script>
+    const PORT = 21;
+    const HOST = "ps1.fpgas.online";
+    
+    // 1. Password Management
+    const savedPw = localStorage.getItem('pi_local_pw');
+    // Default password (Empty for commit safety - User can set locally)
+    const defaultPw = ""; 
+    
+    let pw = savedPw || defaultPw;
+    
+    if (!pw) {
+        // Fallback prompt
+        pw = prompt("Enter functionality password for Pi" + PORT + " (Leave empty for Mock Mode):");
+        if (pw && confirm("Save password locally?")) {
+            localStorage.setItem('pi_local_pw', pw);
+        }
+    }
+
+    // 2. Initialize WSSH
+    const wsshFrame = document.getElementById('wssh_if');
+    if (pw) {
+        console.log("Connecting to Real Hardware...");
+        const wsshUrl = `https://${HOST}/wssh/?hostname=10.${PORT}.0.1${PORT}&username=pi&title=pi${PORT}&password=${encodeURIComponent(pw)}`;
+        wsshFrame.src = wsshUrl;
+    } else {
+        console.log("Mock Mode Active");
+        wsshFrame.srcdoc = "<html><body style='background:#1e1e1e; color:#00ff00; font-family:monospace; padding:10px;'>pi@pi21:~$ # MOCK MODE<br># Enter password next time for real connection.<br></body></html>";
+    }
+
+    // 3. Patched PiStatus (from dcws.js)
+    // Overrides relative paths with absolute production URLs
+    function PiStatus(PiID) {
+        console.log("Initializing PiStatus for Pi" + PiID);
+        
+        function updateStatus(status, text) {
+            const badge = document.getElementById("status-text-" + PiID);
+            const dot = document.getElementById("status-dot-" + PiID);
+            if (badge) badge.innerText = text;
+            if (dot) dot.className = "status-dot " + status;
+        }
+
+        // Connect to Production WebSocket
+        const wsUrl = `wss://${HOST}/ws/pistat/pi${PiID}/`;
+        console.log("Connecting WS to:", wsUrl);
+        
+        let logSocket;
+        try {
+            logSocket = new WebSocket(wsUrl);
+        } catch(e) {
+            console.error("WS Error:", e);
+            updateStatus("disconnected", "WS Error");
+            return;
+        }
+
+        logSocket.onopen = function() {
+            console.log("WS Connected");
+            updateStatus("connected", "System Ready");
+        };
+
+        logSocket.onmessage = function(e) {
+            const data = JSON.parse(e.data);
+            console.log("[WS]", data.message);
+            // We could append to a log div here if we added one
+        };
+        
+        logSocket.onclose = function() {
+            updateStatus("disconnected", "WS Closed");
+        };
+        
+        // Expose for buttons
+        window.remoteApp = {
+            resetPi: function() {
+                if(!confirm("Reboot the physical Pi?")) return;
+                logSocket.send(JSON.stringify({ message: "reset: " + PiID }));
+                // Trigger SNMP toggle via POST (Might fail due to CORS)
+                fetch(`https://${HOST}/snmp/toggle`, {
+                    method: "POST",
+                    headers: { "Content-type": "application/json" },
+                    body: JSON.stringify({ port: PiID }),
+                }).catch(err => console.warn("SNMP Toggle failed (CORS?):", err));
+            },
+            reconnect: function() {
+                logSocket.close();
+                PiStatus(PiID);
+            }
+        };
+    }
+    
+    // Auto-init
+    PiStatus(PORT);
+
+    // Hardware Menu Helpers
+    function toggleHardwareMenu() {
+        document.getElementById('hw-menu').classList.toggle('active');
+    }
+    
+    // Bind Popover Buttons
+    document.addEventListener('click', function(e) {
+        if(e.target.closest('.danger')) { window.remoteApp.resetPi(); }
+        // Add other bindings as needed
+    });
+    
+     // Split Panes (Simple version)
+     const leftPanel = document.getElementById('panelLeft');
+     const hGutter = document.getElementById('dragGutter');
+     let isDraggingH = false;
+     
+     hGutter.addEventListener('mousedown', (e) => { isDraggingH = true; e.preventDefault(); });
+     document.addEventListener('mousemove', (e) => {
+         if(isDraggingH) {
+             const percent = (e.clientX / window.innerWidth) * 100;
+             leftPanel.style.flexBasis = percent + "%";
+             const sshContainer = document.getElementById('ssh-container');
+             if(sshContainer) sshContainer.style.pointerEvents = 'none';
+         }
+     });
+     document.addEventListener('mouseup', () => { 
+         isDraggingH = false; 
+         const sshContainer = document.getElementById('ssh-container');
+         if(sshContainer) sshContainer.style.pointerEvents = 'auto'; 
+     });
+</script>
+
+<!-- Load logic from local file -->
+<script src="../static/demos.js"></script>
+
+<script>
+// Sidebar Navigation Logic
+document.addEventListener('DOMContentLoaded', function() {
+    const views = {
+        'btn-term-free': 'shared-terminal',
+        'btn-byo': 'view-byo',
+        'btn-contrib': 'view-contrib',
+        'btn-hello-world': 'shared-terminal'
+    };
+    
+    // Select all clickable items
+    document.querySelectorAll('.menu-item').forEach(item => {
+        item.addEventListener('click', function(e) {
+            
+            const id = this.id;
+            const targetViewId = views[id];
+
+            if (targetViewId) {
+                // Switch View
+                document.querySelectorAll('.menu-item').forEach(el => el.classList.remove('active'));
+                this.classList.add('active');
+                
+                // Hide all views
+                document.getElementById('shared-terminal').style.display = 'none';
+                document.getElementById('view-byo').style.display = 'none';
+                document.getElementById('view-contrib').style.display = 'none';
+                
+                // Show target
+                const target = document.getElementById(targetViewId);
+                if(target) target.style.display = 'block';
+
+            } else if (this.dataset.cmd) {
+                // Demo Command
+                document.querySelectorAll('.menu-item').forEach(el => el.classList.remove('active'));
+                this.classList.add('active');
+
+                document.getElementById('shared-terminal').style.display = 'block';
+                document.getElementById('view-byo').style.display = 'none';
+                document.getElementById('view-contrib').style.display = 'none';
+                
+                // Try sending to iframe
+                const cmd = this.dataset.cmd;
+                const iframe = document.getElementById('wssh_if');
+                if (iframe && iframe.contentWindow && iframe.contentWindow.wssh) {
+                    iframe.contentWindow.wssh.send(cmd);
+                } else {
+                    console.log("Command:", cmd, "(No wssh connection found)");
+                }
+
+            } else if (this.classList.contains('category-header')) {
+                // Toggle Category
+                const children = this.nextElementSibling;
+                if(children && children.classList.contains('menu-children')) {
+                    children.style.display = (children.style.display === 'none') ? 'block' : 'none';
+                    const indicator = this.querySelector('.indicator');
+                    if(indicator) indicator.innerText = (children.style.display === 'none') ? '▶' : '▼';
+                }
+            }
+        });
+    });
+});
+</script>
+</body>
+</html>
diff --git a/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/preview_tt.html b/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/preview_tt.html
new file mode 100644
index 0000000..576ab75
--- /dev/null
+++ b/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/preview_tt.html
@@ -0,0 +1,632 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pi21 - FPGA Lab | Pumping Station One (Preview)</title>
+  
+  <!-- Changed paths for local preview -->
+  <link rel="icon" href="../static/fpga.png">
+  <link rel="stylesheet" href="../static/pib.css">
+  
+  <!-- Video.js -->
+  <link href="https://vjs.zencdn.net/8.4.0/video-js.min.css" rel="stylesheet">
+  <script src="https://vjs.zencdn.net/8.4.0/video.min.js"></script>
+  
+  <!-- Dependencies -->
+  <script src="../static/dcws.js"></script> <!-- Mock path -->
+  <script src="https://f4pga-examples.readthedocs.io/en/latest/_static/jquery.js"></script>
+  <link rel="stylesheet" href="https://f4pga-examples.readthedocs.io/en/latest/_static/stylesheets/f4pga.css">
+</head>
+
+<body>
+
+<!-- Header -->
+<header class="header">
+  <div class="header-title">
+    <img src="../static/fpga.png" alt="FPGA Icon">
+    <div>
+      <h1>Pi21</h1>
+      <span class="text-muted">Remote FPGA Development Lab</span>
+    </div>
+  </div>
+  
+  <div class="header-center">
+    <span>👋 <strong>Welcome.</strong> This provides direct access to an FPGA board connected to a Raspberry Pi. Watch live video, control hardware, and connect via SSH to run your own bitstreams.</span>
+  </div>
+  
+  <div class="header-right">
+    <div class="header-links">
+      <a href="#" class="btn-icon" style="display: inline-flex;">← Home</a>
+      &nbsp;|&nbsp;
+      <a href="#">Edit on GitHub</a>
+    </div>
+    
+    <!-- Compact Status System -->
+    <div class="header-status">
+      <div id="status-badge-21" class="status-badge" onclick="toggleHardwareMenu()" title="System Control Menu">
+        <div id="status-dot-21" class="status-dot"></div>
+        <span id="status-text-21">System Ready</span>
+        <span style="margin-left: 0.5rem; opacity: 0.6; display: inline-flex;">▼</span>
+      </div>
+      
+      <!-- Popover Menu -->
+      <div id="hw-menu" class="status-popover">
+          <div>
+              <div class="popover-section-title">System Status</div>
+              <div style="font-size: 0.8rem; color: #aaa; margin-bottom:0.5rem;">
+                  Connected to Pi21 via WebSocket.<br>
+                  Video Stream: Active
+              </div>
+          </div>
+
+          <div>
+              <div class="popover-section-title">Hardware Control</div>
+              <div class="popover-grid">
+                  <button onclick="document.getElementById('reset21').click()" class="popover-item danger">
+                      ⚡ Reset Pi
+                  </button>
+                  <button onclick="document.getElementById('refresh-video-player21').click()" class="popover-item">
+                      📹 Reset Video
+                  </button>
+                  <button id="btn-usb-toggle" class="popover-item" onclick="toggleUsb()">
+                      🔌 USB Power
+                  </button>
+                   <button onclick="document.getElementById('status21').click()" class="popover-item">
+                      🔌 Cycle PoE
+                  </button>
+              </div>
+          </div>
+          
+          <div>
+              <div class="popover-section-title">Connection</div>
+               <button onclick="document.getElementById('reconnect21').click()" class="popover-item" style="width:100%">
+                  ↻ Reconnect WebSocket
+              </button>
+          </div>
+      </div>
+
+      <!-- Hidden Original Buttons for binding -->
+      <input id="reconnect21" type="submit" value="↻" style="display: none;">
+    </div>
+  </div>
+</header>
+
+
+
+<!-- Main Content: Vertical Split Wrapper -->
+<div class="main-vertical-split" id="mainVerticalSplit" style="height: 80vh;">
+
+  <!-- Top Panel: Video + Terminal (Resizable Split) -->
+  <div class="vertical-panel-top" id="topPanel">
+      <div class="split-container" id="splitContainer">
+        
+        <!-- Left Panel: Video + Controls -->
+        <div class="split-panel panel-left video-wrapper" id="panelLeft">
+          
+          <!-- Overlay Header -->
+          <div class="video-overlay">
+              <div class="overlay-title panel-title" style="display: flex; align-items: center; gap: 0.5rem;">
+                  📹 Live Camera Feed
+              </div>
+              <div class="overlay-controls" style="display:none;">
+                  <button 
+                      id="refresh-video-player21" 
+                      type="submit" 
+                      class="btn-overlay btn-icon"
+                      data-tooltip="Reloads the video stream if it freezes"
+                  >
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg> Reset Video
+                  </button>
+                  <button 
+                      id="reset21" 
+                      type="submit" 
+                      class="btn-overlay danger btn-icon"
+                      data-tooltip="Power cycles the Raspberry Pi (Use if JTAG is stuck)"
+                  >
+                      ⚡ Reset Pi
+                  </button>
+              </div>
+          </div>
+
+          <!-- Placeholder for video in preview -->
+          <div style="width:100%; height:100%; background:#000; display:flex; align-items:center; justify-content:center; color:white;">
+            [Live Video Feed Mock]
+          </div>
+        </div>
+        
+        <!-- Draggable Gutter (Horizontal) -->
+        <div class="gutter" id="dragGutter"></div>
+
+        <!-- Right Panel: Terminal -->
+        <div class="split-panel panel-right card terminal-container" id="panelRight" style="padding:0; overflow:hidden; display: flex; flex-direction: row;">
+          
+           <!-- Sidebar Menu -->
+           <div class="sidebar-container" id="term-menu" style="width: 250px; background: #1e1e1e; border-right: 1px solid #333; display: flex; flex-direction: column;">
+              <div class="sidebar-header panel-title">
+                  SSH Terminal
+              </div>
+              <div class="sidebar-menu" style="flex-grow: 1; overflow-y: auto; padding: 0.5rem 0;">
+                
+                <!-- 1. Tutorials (Default) -->
+                <div class="menu-category" data-category="tutorials">
+                  <div class="menu-item category-header" tabindex="0">
+                     <span class="indicator">▼</span> Tutorials
+                  </div>
+                  <div class="menu-children" style="display:block;">
+                     <div class="menu-item special active" tabindex="0" id="btn-hello-world" style="color: #00ff00;" data-cmd="cd ~/01_simple_test/v && make load">👋 Hello World (Start Here)</div>
+                  </div>
+                </div>
+
+                <!-- 2. Demos -->
+                <div class="menu-category" data-category="demos">
+                  <div class="menu-item category-header" tabindex="0">
+                     <span class="indicator">▶</span> Demos
+                  </div>
+                  <div class="menu-children" style="display:none;">
+                     <div class="menu-item" tabindex="0" data-cmd="cd ~/01_simple_test/v && make load" data-desc="Blink LEDs">Blink LEDs</div>
+                     <div class="menu-item" tabindex="0" data-cmd="cd ~/02_micropython && make load" data-desc="MicroPython">MicroPython</div>
+                     <div class="menu-item" tabindex="0" data-cmd="cd ~/03_linux_litex && make load" data-desc="Linux on Litex">Linux on Litex</div>
+                     <div class="menu-item" tabindex="0" data-cmd="cd ~/04_verilog_blinky && make load" data-desc="Verilog Blinky">Verilog Blinky</div>
+                     <div class="menu-item" tabindex="0" data-cmd="cd ~/05_riscv_kianv && make load" data-desc="Linux KianV RISC-V">Linux KianV RISC-V</div>
+                     <div class="menu-item special" tabindex="0" id="btn-contrib">🤝 Contribute...</div>
+                  </div>
+                </div>
+
+                <!-- 3. BYO -->
+                <div class="menu-category" data-category="byo">
+                  <div class="menu-item category-header" tabindex="0" id="btn-byo">
+                     <span class="indicator">▶</span> Bring Your Own Terminal
+                  </div>
+                </div>
+
+                <!-- 4. Command Line -->
+                <div class="menu-item" tabindex="0" id="btn-term-free">
+                   >_ Command Line
+                </div>
+
+              </div>
+           </div>
+
+           <!-- Terminal / Content Area -->
+           <div class="terminal-wrapper" style="flex-grow: 1; position: relative; display: flex; flex-direction: column;">
+               
+               <!-- Toolbar -->
+               <div class="term-toolbar" style="height: 48px; min-height:48px; border-bottom: 1px solid #333; background: #252526; display: flex; align-items: center; justify-content: flex-end; padding: 0 1rem;">
+                    <button id="wssh-connect" type="submit" class="btn-sm btn-icon">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg> Reset SSH
+                    </button>
+               </div>
+
+               <!-- Views -->
+               
+               <!-- 1. Shared Terminal (Default) -->
+               <div id="shared-terminal" style="flex-grow: 1; position: relative;">
+                    <iframe id="wssh_if" style="width: 100%; height: 100%; border:0;" srcdoc="
+                        <html>
+                        <body style='background:#1e1e1e; color:#00ff00; font-family:monospace; margin:0; padding:10px; overflow:hidden;'>
+                            <div id='term-output'>
+                                pi@pi21:~$ <span style='opacity:0.5'># Connected to Local Simulator</span><br>
+                            </div>
+                            <script>
+                                window.wssh = {
+                                    send: function(cmd) {
+                                        const term = document.getElementById('term-output');
+                                        term.innerHTML += '<br>pi@pi21:~$ ' + cmd;
+                                        term.innerHTML += '<br><span style=\'color:#aaa\'>[SIM] Executing... Done.</span>';
+                                        window.scrollTo(0, document.body.scrollHeight);
+                                    }
+                                };
+                            </script>
+                        </body>
+                        </html>
+                    "></iframe>
+               </div>
+
+               <!-- 2. BYO Guide (Hidden) -->
+               <div id="view-byo" style="padding: 2rem; display: none; overflow-y: auto; background: #000; color: #00ff00; font-family: 'Courier New', monospace; height: 100%;">
+                    <h2 style="border-bottom: 1px solid #00ff00; padding-bottom: 0.5rem; margin-bottom: 1.5rem;">> MANUAL_OVERRIDE.exe</h2>
+                    
+                    <div class="instruction-step">
+                        <h3>1. Initialize Connection</h3>
+                        <p>Open your local terminal emulator.</p>
+                    </div>
+
+                    <div class="instruction-step">
+                        <h3>2. Execute Protocol</h3>
+                        <div class="cmd-block">ssh -p 12122 pi@localhost</div>
+                    </div>
+
+                    <div class="instruction-step">
+                        <h3>3. Authenticate</h3>
+                        <div style="border: 1px dashed #00ff00; padding: 10px; margin-top: 10px;">
+                            User: pi<br>
+                            Pass: [Check MOTD]<br>
+                            Port: 12122
+                        </div>
+                    </div>
+               </div>
+
+                <!-- 3. Contribute Guide (Hidden) -->
+               <div id="view-contrib" style="padding: 2rem; display: none; overflow-y: auto; background: #1e1e1e; height: 100%;">
+                    <h2>🤝 Contribute a Demo</h2>
+                    <p>Join the library of FPGA examples.</p>
+                    
+                    <div class="instruction-step">
+                        <h3>Step 1: Fork & Clone</h3>
+                        <div class="cmd-block">git clone https://github.com/CarlFK/pici-demos.git</div>
+                    </div>
+                    
+                     <div class="instruction-step">
+                        <h3>Step 4: Self-Documentation</h3>
+                        <p>Create a `run_demo.sh` to automate the user experience.</p>
+                        <div class="cmd-block">#!/bin/bash
+echo "Loading My Cool Design..."
+make load
+echo "Done! Look at the LEDs."</div>
+                    </div>
+               </div>
+
+           </div>
+        </div>
+        
+      </div>
+  </div>
+
+  <!-- Vertical Drag Handle -->
+  <div class="gutter-vertical" id="verticalGutter"></div>
+
+  <!-- Bottom Panel: Logs & Debug Controls -->
+  <div class="bottom-section" id="bottomPanel">
+
+      <!-- Unified Debug Panel -->
+      <div class="bottom-log-container">
+          <div class="bottom-log-header" onclick="toggleLogs()">
+              <div style="display: flex; align-items: center; gap: 1rem; flex-grow: 1;">
+                  <span class="panel-title">Debug</span>
+                  <div class="header-controls" onclick="event.stopPropagation()">
+                    <!-- Hidden: Moved to System Status Popover -->
+                    <div style="display:none;">
+                       <button id="reconnect21" type="submit" class="btn-sm btn-icon">Reconnect</button>
+                       <button id="status21" type="submit" class="btn-sm btn-icon">PoE</button>
+                       <input id="usb_off" type="submit" value="USB Off" class="btn-sm danger">
+                       <input id="usb_on" type="submit" value="USB On" class="btn-sm success">
+                    </div>
+
+                      <input id="log-submit21" type="button" value="Test WS" class="btn-sm"> 
+                  </div>
+              </div>
+              <span id="log-toggle-icon" style="font-size: 0.8em">▼</span>
+          </div>
+          
+          <div id="log-container" class="log-container" style="display: flex; flex-direction: column;">
+              <textarea id="log21" class="bottom-log-textarea" readonly style="flex-grow: 1; margin-bottom: 0.5rem;">Time: 2026-01-06 16:08:45
+System Load: 0.45 0.52 0.48
+CORE Temp: 42.5'C
+Connected.</textarea>
+              
+              <div class="debug-input-row" style="display: flex; gap: 0;">
+                  <input id="log-text21" type="text" placeholder="WS test message" class="debug-input">
+                  <button class="btn-arrow" onclick="console.log('Send mock')">➜</button>
+              </div>
+
+               <!-- Hidden inputs kept for compatibility -->
+              <div style="display:none;">
+                  <input id="blink_leds" type="hidden" value="Blink LEDs">
+                  <input id="boot_micro_python" type="hidden" value="Load MicroPython">
+                  <input id="boot_linux" type="hidden" value="Boot Linux">
+                  <input id="check_wire" type="hidden" value="Check Wire">
+              </div>
+          </div>
+      </div>
+
+  </div>
+
+</div>
+
+
+<!-- Footer (Resources) -->
+<footer class="footer-layout">
+  <h2 class="footer-title">Helpful Links</h2>
+  <hr class="footer-hr">
+  <div class="footer-cols">
+    <!-- Tiny Tapeout -->
+    <div class="footer-col">
+      <h3 class="btn-icon">🎓 Tiny Tapeout</h3>
+      <ul>
+        <li>
+          <a href="#">Tiny Tapeout</a>
+          <span class="description">Educational project for manufacturing real chips!</span>
+        </li>
+        <li>
+          <a href="#">TT Commander</a>
+          <span class="description">Configure and control your Board</span>
+        </li>
+      </ul>
+    </div>
+    
+    <!-- Toolchains -->
+    <div class="footer-col">
+      <h3 class="btn-icon">🛠️ FPGA Toolchains</h3>
+      <ul>
+        <li>
+          <a href="#">F4PGA</a>
+          <span class="description">Open source Xilinx 7 toolchain</span>
+        </li>
+        <li>
+          <a href="#">OpenXC7</a>
+          <span class="description">Alternative open source toolchain</span>
+        </li>
+        <li>
+          <a href="#">AMD Vivado</a>
+          <span class="description">Official proprietary toolchain</span>
+        </li>
+      </ul>
+    </div>
+    
+    <!-- Arty Board -->
+    <div class="footer-col">
+      <h3 class="btn-icon">🔌 Arty A7 Dev Board</h3>
+      <ul>
+        <li>
+          <a href="#">F4PGA Examples</a>
+          <span class="description">Demo projects for Arty A7</span>
+        </li>
+        <li>
+          <a href="#">Digilent Reference</a>
+          <span class="description">Official documentation</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</footer>
+
+
+<script>
+function openTab(evt, tabName) {
+  var i, tabcontent, tablinks;
+  tabcontent = document.getElementsByClassName("tab-content");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
+    tabcontent[i].classList.remove("active");
+  }
+  tablinks = document.getElementsByClassName("tab-btn");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(" active", "");
+  }
+  document.getElementById(tabName).style.display = "block";
+  document.getElementById(tabName).classList.add("active");
+  evt.currentTarget.className += " active";
+
+  // Shared Terminal Logic (Mock)
+  var sharedTerm = document.getElementById("shared-terminal");
+  if (sharedTerm) {
+      if (tabName === 'tab-local') {
+        sharedTerm.style.display = "none";
+      } else {
+        sharedTerm.style.display = "block";
+      }
+  }
+}
+
+function toggleDesc(element) {
+  element.classList.toggle("collapsed");
+  var content = element.nextElementSibling;
+  content.classList.toggle("collapsed");
+}
+
+function toggleLogs() {
+  var logContainer = document.getElementById("log-container");
+  var toggleBtn = document.getElementById("log-toggle-icon");
+  var bottomPanel = document.getElementById("bottomPanel");
+  
+  if (logContainer.style.display === "none") {
+    logContainer.style.display = "flex";
+    bottomPanel.style.flexBasis = "180px"; /* Default height when opened */
+    bottomPanel.style.minHeight = "48px"; /* Allow manual reduction below default */
+    toggleBtn.innerHTML = "▼";
+  } else {
+    logContainer.style.display = "none";
+    bottomPanel.style.flexBasis = "48px"; /* Collapse to header height */
+    bottomPanel.style.minHeight = "48px";
+    toggleBtn.innerHTML = "▶";
+  }
+}
+</script>
+
+
+<script>
+// Hardware Menu Logic
+function toggleHardwareMenu() {
+    const menu = document.getElementById('hw-menu');
+    menu.classList.toggle('active');
+}
+
+// Close on click outside
+document.addEventListener('click', function(e) {
+    const menu = document.getElementById('hw-menu');
+    const badge = document.getElementById('status-badge-21');
+    if (menu.classList.contains('active') && !menu.contains(e.target) && !badge.contains(e.target)) {
+        menu.classList.remove('active');
+    }
+});
+
+function toggleUsb() {
+    console.log('Toggling USB Power...');
+    // In prod this would trigger form submission or API call
+}
+</script>
+<script>
+// Mock PiStatus function provided by index.html/pi specific scripts usually
+function PiStatus(port) {
+  console.log("PiStatus initialized for port", port);
+}
+</script>
+<script>
+// Resizable Split Pane Logic (Horizontal & Vertical)
+document.addEventListener('DOMContentLoaded', function() {
+  
+  // --- Horizontal Split (Video / Terminal) ---
+  const leftPanel = document.getElementById('panelLeft');
+  const rightPanel = document.getElementById('panelRight');
+  const hGutter = document.getElementById('dragGutter');
+  const hContainer = document.getElementById('splitContainer');
+  let isDraggingH = false;
+
+  // Restore saved width
+  const savedWidth = localStorage.getItem('pi21_split_width');
+  if (savedWidth) {
+    leftPanel.style.flexBasis = savedWidth;
+  }
+
+  hGutter.addEventListener('mousedown', function(e) {
+    isDraggingH = true;
+    document.body.style.cursor = 'col-resize';
+    e.preventDefault();
+  });
+
+  // --- Vertical Split (Top / Bottom) ---
+  const topPanel = document.getElementById('topPanel');
+  const bottomPanel = document.getElementById('bottomPanel');
+  const vGutter = document.getElementById('verticalGutter');
+  const vContainer = document.getElementById('mainVerticalSplit');
+  let isDraggingV = false;
+
+    // Restore saved height
+  const savedHeight = localStorage.getItem('pi21_v_split_height');
+  if (savedHeight) {
+    topPanel.style.flexBasis = savedHeight;
+  }
+
+  vGutter.addEventListener('mousedown', function(e) {
+      isDraggingV = true;
+      document.body.style.cursor = 'row-resize';
+      e.preventDefault();
+  });
+
+
+  // --- Global Mouse Move ---
+  document.addEventListener('mousemove', function(e) {
+    
+    // Horizontal Resize
+    if (isDraggingH) {
+      const containerRect = hContainer.getBoundingClientRect();
+      const containerWidth = containerRect.width;
+      const pointerRelativeX = e.clientX - containerRect.left;
+      
+      let newLeftWidthPercent = (pointerRelativeX / containerWidth) * 100;
+      const minPercent = (300 / containerWidth) * 100; // approx min px
+      const maxPercent = 100 - minPercent;
+
+      if (newLeftWidthPercent < minPercent) newLeftWidthPercent = minPercent;
+      if (newLeftWidthPercent > maxPercent) newLeftWidthPercent = maxPercent;
+
+      leftPanel.style.flexBasis = newLeftWidthPercent + '%';
+    }
+
+    // Vertical Resize
+    if (isDraggingV) {
+        const containerRect = vContainer.getBoundingClientRect();
+        const containerHeight = containerRect.height;
+        const pointerRelativeY = e.clientY - containerRect.top;
+
+        let newTopHeightPercent = (pointerRelativeY / containerHeight) * 100;
+        
+        // Constrain (e.g., min 20% for each)
+        if (newTopHeightPercent < 20) newTopHeightPercent = 20;
+        if (newTopHeightPercent > 80) newTopHeightPercent = 80;
+
+        topPanel.style.flexBasis = newTopHeightPercent + '%';
+        // Bottom panel calculates auto (flex-grow/basis logic)
+    }
+
+  });
+
+  document.addEventListener('mouseup', function(e) {
+    if (isDraggingH) {
+      isDraggingH = false;
+      document.body.style.cursor = 'default';
+      localStorage.setItem('pi21_split_width', leftPanel.style.flexBasis);
+    }
+    if (isDraggingV) {
+        isDraggingV = false;
+        document.body.style.cursor = 'default';
+        localStorage.setItem('pi21_v_split_height', topPanel.style.flexBasis);
+    }
+  });
+});
+</script>
+
+<script>
+// Sidebar Navigation Logic
+document.addEventListener('DOMContentLoaded', function() {
+    const views = {
+        'btn-term-free': 'shared-terminal',
+        'btn-byo': 'view-byo',
+        'btn-contrib': 'view-contrib',
+        'btn-hello-world': 'shared-terminal'
+    };
+    
+    // Select all clickable items
+    document.querySelectorAll('.menu-item').forEach(item => {
+        item.addEventListener('click', function(e) {
+            
+            // 1. Handle Active State
+            // Only toggle active if it's a main navigation item (has an ID mapping)
+            // or if it's a demo execution (which stays in terminal view)
+            
+            const id = this.id;
+            const targetViewId = views[id];
+
+            if (targetViewId) {
+                // Switch View
+                document.querySelectorAll('.menu-item').forEach(el => el.classList.remove('active'));
+                this.classList.add('active');
+                
+                // Hide all views
+                document.getElementById('shared-terminal').style.display = 'none';
+                document.getElementById('view-byo').style.display = 'none';
+                document.getElementById('view-contrib').style.display = 'none';
+                
+                // Show target
+                const target = document.getElementById(targetViewId);
+                if(target) target.style.display = 'block';
+                
+                // Special Case: Hello World might just need to type in terminal? 
+                // In the HTML it was assigned a view? No, usually it runs a command.
+                // If it is mapped to a view, we show it. If not, we assume it's a command.
+            } else if (this.dataset.cmd) {
+                // It's a Demo Command
+                // Switch to terminal if not there
+                document.querySelectorAll('.menu-item').forEach(el => el.classList.remove('active'));
+                this.classList.add('active'); // Highlight this demo
+
+                document.getElementById('shared-terminal').style.display = 'block';
+                document.getElementById('view-byo').style.display = 'none';
+                document.getElementById('view-contrib').style.display = 'none';
+                
+                // Execute (Mock or Real)
+                const cmd = this.dataset.cmd;
+                if(window.wssh && window.wssh.send) {
+                    window.wssh.send(cmd);
+                } else {
+                    console.log("Command:", cmd);
+                }
+            } else if (this.classList.contains('category-header')) {
+                // Toggle Category
+                const children = this.nextElementSibling;
+                if(children && children.classList.contains('menu-children')) {
+                    children.style.display = (children.style.display === 'none') ? 'block' : 'none';
+                    const indicator = this.querySelector('.indicator');
+                    if(indicator) indicator.innerText = (children.style.display === 'none') ? '▶' : '▼';
+                }
+            }
+        });
+    });
+});
+</script>
+
+</body>
+</html>
+
+
diff --git a/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/tt.html b/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/tt.html
index 67985f3..60b32c3 100644
--- a/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/tt.html
+++ b/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/tt.html
@@ -1,163 +1,606 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
-
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pi{{pi.port}} - FPGA Lab | Pumping Station One</title>
+  
   <link rel="icon" href="/fpga.png">
-
+  <link rel="stylesheet" href="/pib.css">
+  
+  <!-- Video.js -->
   <link href="https://vjs.zencdn.net/8.4.0/video-js.min.css" rel="stylesheet">
   <script src="https://vjs.zencdn.net/8.4.0/video.min.js"></script>
-
+  
+  <!-- Dependencies -->
   <script src="/dcws.js"></script>
-  <link rel="stylesheet" href="/pib.css"/>
-
   <script src="https://f4pga-examples.readthedocs.io/en/latest/_static/jquery.js"></script>
-  <link rel="stylesheet" href="https://f4pga-examples.readthedocs.io/en/latest/_static/stylesheets/f4pga.css"/>
-
+  <link rel="stylesheet" href="https://f4pga-examples.readthedocs.io/en/latest/_static/stylesheets/f4pga.css">
 </head>
 
 <body>
-  <a href="/">Home</a>
-
-<div style="float: right;"> <a href="https://github.com/CarlFK/pici/blob/main/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/tt.html">Edit this page</a> on GitHub.</div>
-
-<table>
-  <tr>
-    <td colspan=2>
-      <h1>Accessing pi{{pi.port}}</h1>
-    </td>
-  </tr><tr>
-  <td colspan=3>
-
-  <table class="buttons">
-	 <tr>
-	  <td><h2>Pi Controls:</h2></td>
-          <td>
-            Turn it off and on again: <input id="reset{{pi.port}}" type="submit" value="Reset" >
-          </td>
-	 </tr>
-	</table>
-  <table class="buttons">
-	 <tr>
-	  <td><h2>Demos:</h2></td>
-     <td>
-      <input id="tt910" type="submit" value="Linux on KianV RISC-V" >
-     </td>
-	 </tr>
-	</table>
-    </td>
-  </tr>
-
-  <tr height="80%">
-
-    <td style="width:20%" >
-      <video
-        id="video-player{{pi.port}}"
-        class="video-js"
-        width=320
-        controls
-        autoplay
-        muted
-        preload="auto"
-        data-setup="{}"
-      >
-        <source
-            src="https://{{ domain_name }}/live/pi{{pi.port}}.m3u8"
-            type='application/x-mpegURL'
-        />
-      </video>
-    </td>
-
-    <td style="width:80%" >
-      <iframe id="wssh_if" style="width: 100%; height: 100%;" src="https://{{ domain_name }}/wssh/?hostname={{ip}}&username=pi&title=pi{{pi.port}}&password={{pw}}">
-      </iframe>
-    </td>
-  </tr>
-
-  <tr>
-    <td colspan=3>
-      <div>
-        <textarea id="log{{pi.port}}" cols="85" rows="4" placeholder="pi status" readonly style="width:100%;"></textarea><br>
+
+<!-- Header -->
+<header class="header">
+  <div class="header-title">
+    <img src="/fpga.png" alt="FPGA Icon">
+    <div>
+      <h1>Pi{{pi.port}}</h1>
+      <span class="text-muted">Remote FPGA Development Lab</span>
+    </div>
+  </div>
+  
+  <div class="header-center">
+    <span>👋 <strong>Welcome.</strong> This provides direct access to an FPGA board connected to a Raspberry Pi. Watch live video, control hardware, and connect via SSH to run your own bitstreams.</span>
+  </div>
+  
+  <div class="header-right">
+    <div class="header-links">
+      <a href="/" class="btn-icon" style="display: inline-flex;">← Home</a>
+      &nbsp;|&nbsp;
+      <a href="https://github.com/CarlFK/pici/blob/main/ansible/roles/site/files/pib/pibfpgas/src/pibfpgas/templates/tt.html">Edit on GitHub</a>
+    </div>
+    
+    <!-- Compact Status System -->
+    <div class="header-status">
+      <div id="status-badge-{{pi.port}}" class="status-badge" onclick="toggleHardwareMenu()" title="System Control Menu">
+        <div id="status-dot-{{pi.port}}" class="status-dot"></div>
+        <span id="status-text-{{pi.port}}">Connecting...</span>
+        <span style="margin-left: 0.5rem; opacity: 0.6; display: inline-flex;">▼</span>
       </div>
 
+       <!-- Popover Menu -->
+       <div id="hw-menu" class="status-popover">
+           <div>
+               <div class="popover-section-title">System Status</div>
+               <div style="font-size: 0.8rem; color: #aaa; margin-bottom:0.5rem;">
+                   Connected to Pi{{pi.port}} <br>
+                   Video Stream: Active
+               </div>
+           </div>
+ 
+           <div>
+               <div class="popover-section-title">Hardware Control</div>
+               <div class="popover-grid">
+                   <button onclick="document.getElementById('reset{{pi.port}}').click()" class="popover-item danger">
+                       ⚡ Reset Pi
+                   </button>
+                   <button onclick="document.getElementById('refresh-video-player{{pi.port}}').click()" class="popover-item">
+                       📹 Reset Video
+                   </button>
+                    <!-- Using hidden input triggers -->
+                   <button class="popover-item" onclick="document.getElementById('usb_on').click()">
+                       🔌 USB On
+                   </button>
+                   <button class="popover-item" onclick="document.getElementById('usb_off').click()">
+                       🔌 USB Off
+                   </button>
+                    <button onclick="document.getElementById('status{{pi.port}}').click()" class="popover-item">
+                       🔌 Cycle PoE
+                   </button>
+               </div>
+           </div>
+           
+           <div>
+               <div class="popover-section-title">Connection</div>
+                <button onclick="document.getElementById('reconnect{{pi.port}}').click()" class="popover-item" style="width:100%">
+                   ↻ Reconnect WebSocket
+               </button>
+           </div>
+       </div>
 
-    </td>
-  </tr><tr>
+      <input id="reconnect{{pi.port}}" type="submit" value="↻" style="display: none;">
+    </div>
+  </div>
+</header>
 
-    <td colspan=2>
-      Use your own ssh client<br>user: pi<br> host: {{ domain_name }}<br> port {{o}}22<br>
-      like this:
 
-      <div class="highlight-bash notranslate">
-          <div class=highlight style="position:relative">
-             <pre click-to-copy="click to copy...">ssh -p {{o}}22 pi@{{ domain_name }}</pre>
+
+<!-- Main Content: Vertical Split Wrapper -->
+<div class="main-vertical-split" id="mainVerticalSplit" style="height: 80vh;">
+
+  <!-- Top Panel: Video + Terminal (Resizable Split) -->
+  <div class="vertical-panel-top" id="topPanel">
+      <div class="split-container" id="splitContainer">
+        
+        <!-- Left Panel: Video + Controls -->
+        <div class="split-panel panel-left video-wrapper" id="panelLeft">
+          
+          <!-- Overlay Header -->
+          <div class="video-overlay">
+              <div class="overlay-title panel-title" style="display: flex; align-items: center; gap: 0.5rem;">
+                  📹 Live Camera Feed
+              </div>
+              <div class="overlay-controls" style="display:none;">
+                  <button 
+                      id="refresh-video-player21" 
+                      type="submit" 
+                      class="btn-overlay btn-icon"
+                      data-tooltip="Reloads the video stream if it freezes"
+                  >
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg> Reset Video
+                  </button>
+                  <button 
+                      id="reset21" 
+                      type="submit" 
+                      class="btn-overlay danger btn-icon"
+                      data-tooltip="Power cycles the Raspberry Pi (Use if JTAG is stuck)"
+                  >
+                      ⚡ Reset Pi
+                  </button>
+              </div>
           </div>
-      </div>
-      <div class="highlight-bash notranslate">
-          <div class=highlight style="position:relative">
-             <pre click-to-copy="click to copy...">scp * scp://pi@{{ domain_name }}:{{o}}22/home/pi/Uploads/</pre>
+
+          <!-- Video Player -->
+          <div style="width:100%; height:100%; background:#000;">
+            <video
+                id="video-player21"
+                class="video-js vjs-default-skin vjs-big-play-centered"
+                controls
+                preload="auto"
+                width="100%"
+                height="100%"
+                data-setup='{"fluid": false}'
+            >
+                <source src="https://{{domain_name}}/hls/{{pi.port}}/stream.m3u8" type="application/x-mpegURL">
+                <p class="vjs-no-js">
+                    To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
+                </p>
+            </video>
           </div>
+        </div>
+        
+        <!-- Draggable Gutter (Horizontal) -->
+        <div class="gutter" id="dragGutter"></div>
+
+        <!-- Right Panel: Terminal -->
+        <div class="split-panel panel-right card terminal-container" id="panelRight" style="padding:0; overflow:hidden; display: flex; flex-direction: row;">
+          
+           <!-- Sidebar Menu -->
+           <div class="sidebar-container" id="term-menu" style="width: 250px; background: #1e1e1e; border-right: 1px solid #333; display: flex; flex-direction: column;">
+              <div class="sidebar-header panel-title">
+                  SSH Terminal
+              </div>
+              <div class="sidebar-menu" style="flex-grow: 1; overflow-y: auto; padding: 0.5rem 0;">
+                
+                <!-- 1. Tutorials (Default) -->
+                <div class="menu-category" data-category="tutorials">
+                  <div class="menu-item category-header" tabindex="0">
+                     <span class="indicator">▼</span> Tutorials
+                  </div>
+                  <div class="menu-children" style="display:block;">
+                     <div class="menu-item special active" tabindex="0" id="btn-hello-world" style="color: #00ff00;" data-cmd="cd ~/01_simple_test/v && make load">👋 Hello World (Start Here)</div>
+                  </div>
+                </div>
+
+                <!-- 2. Demos -->
+                <div class="menu-category" data-category="demos">
+                  <div class="menu-item category-header" tabindex="0">
+                     <span class="indicator">▶</span> Demos
+                  </div>
+                  <div class="menu-children" style="display:none;">
+                     <div class="menu-item" tabindex="0" data-cmd="cd ~/01_simple_test/v && make load" data-desc="Blink LEDs">Blink LEDs</div>
+                     <div class="menu-item" tabindex="0" data-cmd="cd ~/02_micropython && make load" data-desc="MicroPython">MicroPython</div>
+                     <div class="menu-item" tabindex="0" data-cmd="cd ~/03_linux_litex && make load" data-desc="Linux on Litex">Linux on Litex</div>
+                     <div class="menu-item" tabindex="0" data-cmd="cd ~/04_verilog_blinky && make load" data-desc="Verilog Blinky">Verilog Blinky</div>
+                     <div class="menu-item" tabindex="0" data-cmd="cd ~/05_riscv_kianv && make load" data-desc="Linux KianV RISC-V">Linux KianV RISC-V</div>
+                     <div class="menu-item special" tabindex="0" id="btn-contrib">🤝 Contribute...</div>
+                  </div>
+                </div>
+
+                <!-- 3. BYO -->
+                <div class="menu-category" data-category="byo">
+                  <div class="menu-item category-header" tabindex="0" id="btn-byo">
+                     <span class="indicator">▶</span> Bring Your Own Terminal
+                  </div>
+                </div>
+
+                <!-- 4. Command Line -->
+                <div class="menu-item" tabindex="0" id="btn-term-free">
+                   >_ Command Line
+                </div>
+
+              </div>
+           </div>
+
+           <!-- Terminal / Content Area -->
+           <div class="terminal-wrapper" style="flex-grow: 1; position: relative; display: flex; flex-direction: column;">
+               
+               <!-- Toolbar -->
+               <div class="term-toolbar" style="height: 48px; min-height:48px; border-bottom: 1px solid #333; background: #252526; display: flex; align-items: center; justify-content: flex-end; padding: 0 1rem;">
+                    <button id="wssh-connect" type="submit" class="btn-sm btn-icon">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg> Reset SSH
+                    </button>
+               </div>
+
+               <!-- Views -->
+               
+                <!-- 1. Shared Terminal (Default) -->
+               <div id="shared-terminal" style="flex-grow: 1; position: relative;">
+                    <iframe id="wssh_if" style="width: 100%; height: 100%; border:0;" src="https://{{ domain_name }}/wssh/?hostname={{ip}}&username=pi&title=pi{{pi.port}}&password={{pw}}"></iframe>
+               </div>
+
+               <!-- 2. BYO Guide (Hidden) -->
+               <div id="view-byo" style="padding: 2rem; display: none; overflow-y: auto; background: #000; color: #00ff00; font-family: 'Courier New', monospace; height: 100%;">
+                    <h2 style="border-bottom: 1px solid #00ff00; padding-bottom: 0.5rem; margin-bottom: 1.5rem;">> MANUAL_OVERRIDE.exe</h2>
+                    
+                    <div class="instruction-step">
+                        <h3>1. Initialize Connection</h3>
+                        <p>Open your local terminal emulator.</p>
+                    </div>
+
+                    <div class="instruction-step">
+                        <h3>2. Execute Protocol</h3>
+                        <div class="cmd-block">ssh -p {{pi.port|int + 12101}} pi@{{domain_name}}</div>
+                    </div>
+
+                    <div class="instruction-step">
+                        <h3>3. Authenticate</h3>
+                        <div style="border: 1px dashed #00ff00; padding: 10px; margin-top: 10px;">
+                            User: pi<br>
+                            Pass: [Check MOTD]<br>
+                            Port: {{pi.port|int + 12101}}
+                        </div>
+                    </div>
+               </div>
+
+                <!-- 3. Contribute Guide (Hidden) -->
+               <div id="view-contrib" style="padding: 2rem; display: none; overflow-y: auto; background: #1e1e1e; height: 100%;">
+                    <h2>🤝 Contribute a Demo</h2>
+                    <p>Join the library of FPGA examples.</p>
+                    
+                    <div class="instruction-step">
+                        <h3>Step 1: Fork & Clone</h3>
+                        <div class="cmd-block">git clone https://github.com/CarlFK/pici-demos.git</div>
+                    </div>
+                    
+                     <div class="instruction-step">
+                        <h3>Step 4: Self-Documentation</h3>
+                        <p>Create a `run_demo.sh` to automate the user experience.</p>
+                        <div class="cmd-block">#!/bin/bash
+echo "Loading My Cool Design..."
+make load
+echo "Done! Look at the LEDs."</div>
+                    </div>
+               </div>
+
+           </div>
+        
       </div>
+  </div>
 
+  <!-- Vertical Drag Handle -->
+  <div class="gutter-vertical" id="verticalGutter"></div>
 
-      <br>
-    </td>
-  </tr>
-</table>
+  <!-- Bottom Panel: Logs & Debug Controls -->
+  <div class="bottom-section" id="bottomPanel">
 
-	  <td><h2>Page Controls:</h2></td>
-          <td>
-        <input id="refresh-video-player{{pi.port}}" type="submit" value="reset video player" >
-        <input id="wssh-connect" type="submit" value="reset ssh" >
-          </td>
+      <!-- Unified Debug Panel -->
+      <div class="bottom-log-container">
+          <div class="bottom-log-header" onclick="toggleLogs()">
+              <div style="display: flex; align-items: center; gap: 1rem; flex-grow: 1;">
+                  <span class="panel-title">Debug</span>
+                  <div class="header-controls" onclick="event.stopPropagation()">
+                    <!-- Hidden: Moved to System Status Popover -->
+                    <div style="display:none;">
+                       <button id="reconnect{{pi.port}}" type="submit" class="btn-sm btn-icon">Reconnect</button>
+                       <button id="status{{pi.port}}" type="submit" class="btn-sm btn-icon">PoE</button>
+                       <input id="usb_off" type="submit" value="USB Off" class="btn-sm danger">
+                       <input id="usb_on" type="submit" value="USB On" class="btn-sm success">
+                    </div>
+                      
+                      <input id="log-submit{{pi.port}}" type="button" value="Test WS" class="btn-sm"> 
+                  </div>
+              </div>
+              <span id="log-toggle-icon" style="font-size: 0.8em">▼</span>
+          </div>
+          
+          <div id="log-container" class="log-container" style="display: flex; flex-direction: column;">
+              <textarea id="log{{pi.port}}" class="bottom-log-textarea" readonly style="flex-grow: 1; margin-bottom: 0.5rem;"></textarea>
+              
+              <div class="debug-input-row" style="display: flex; gap: 0;">
+                  <input id="log-text{{pi.port}}" type="text" placeholder="WS test message" class="debug-input">
+                  <button class="btn-arrow" onclick="document.getElementById('log-submit{{pi.port}}').click()">➜</button>
+              </div>
 
-          <td>
-        <input id="reconnect{{pi.port}}" type="submit" value="reconnect WS" >
-        <input id="log-text{{pi.port}}" type="text" size="20" placeholder="WS test message">
-        <input id="log-submit{{pi.port}}" type="button" value="Send WS">
-	      <input id="status{{pi.port}}" type="submit" value="Check PoE" >
+               <!-- Hidden inputs kept for compatibility -->
+              <div style="display:none;">
+                  <input id="blink_leds" type="hidden" value="Blink LEDs">
+                  <input id="boot_micro_python" type="hidden" value="Load MicroPython">
+                  <input id="boot_linux" type="hidden" value="Boot Linux">
+                  <input id="check_wire" type="hidden" value="Check Wire">
+              </div>
+          </div>
+      </div>
+
+  </div>
+
+</div>
 
-      <input id="usb_off" type="submit" value="Usb Power Off" >
-      <input id="usb_on" type="submit" value="Usb Power On" >
-          </td>
 
-    <td>
-      Pi patch cable color: {{pi.loc}} {{pi.cable_color}} <br>
-    </td>
-	 </tr>
+<!-- Footer (Resources) -->
+<footer class="footer-layout">
+  <h2 class="footer-title">Helpful Links</h2>
+  <hr class="footer-hr">
+  <div class="footer-cols">
+    <!-- Tiny Tapeout -->
+    <div class="footer-col">
+      <h3 class="btn-icon">🎓 Tiny Tapeout</h3>
+      <ul>
+        <li>
+          <a href="https://tinytapeout.com">Tiny Tapeout</a>
+          <span class="description">Educational project for manufacturing real chips!</span>
+        </li>
+        <li>
+          <a href="https://commander.tinytapeout.com/">TT Commander</a>
+          <span class="description">Configure and control your Board</span>
+        </li>
+      </ul>
+    </div>
+    
+    <!-- Toolchains -->
+    <div class="footer-col">
+      <h3 class="btn-icon">🛠️ FPGA Toolchains</h3>
+      <ul>
+        <li>
+          <a href="https://f4pga.org">F4PGA</a>
+          <span class="description">Open source Xilinx 7 toolchain</span>
+        </li>
+        <li>
+          <a href="https://github.com/openXC7">OpenXC7</a>
+          <span class="description">Alternative open source toolchain</span>
+        </li>
+        <li>
+          <a href="https://www.xilinx.com/products/design-tools/vivado.html">AMD Vivado</a>
+          <span class="description">Official proprietary toolchain</span>
+        </li>
+      </ul>
+    </div>
+    
+    <!-- Arty Board -->
+    <div class="footer-col">
+      <h3 class="btn-icon">🔌 Arty A7 Dev Board</h3>
+      <ul>
+        <li>
+          <a href="https://f4pga-examples.readthedocs.io/">F4PGA Examples</a>
+          <span class="description">Demo projects for Arty A7</span>
+        </li>
+        <li>
+          <a href="https://digilent.com/reference/programmable-logic/arty-a7/start">Digilent Reference</a>
+          <span class="description">Official documentation</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</footer>
 
-      <input id="blink_leds" type="hidden" value="Blink LEDs" >
-      <input id="boot_micro_python" type="hidden" value="Load MicroPython">
-      <input id="boot_linux" type="hidden" value="Boot Linux" >
-      <input id="check_wire" type="hidden" value="Check Wire" >
 
+<!-- Scripts -->
 <script src="https://f4pga-examples.readthedocs.io/en/latest/_static/javascripts/f4pga.js"></script>
 <script>PiStatus("{{pi.port}}")</script>
+<script>
+function openTab(evt, tabName) {
+  var i, tabcontent, tablinks;
+  tabcontent = document.getElementsByClassName("tab-content");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
+    tabcontent[i].classList.remove("active");
+  }
+  tablinks = document.getElementsByClassName("tab-btn");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(" active", "");
+  }
+  document.getElementById(tabName).style.display = "block";
+  document.getElementById(tabName).classList.add("active");
+  evt.currentTarget.className += " active";
+
+  // Shared Terminal Logic
+  var sharedTerm = document.getElementById("shared-terminal");
+  if (tabName === 'tab-local') {
+    sharedTerm.style.display = "none";
+  } else {
+    sharedTerm.style.display = "block";
+  }
+}
+
+function toggleDesc(element) {
+  element.classList.toggle("collapsed");
+  var content = element.nextElementSibling;
+  content.classList.toggle("collapsed");
+}
+
+function toggleLogs() {
+  var logContainer = document.getElementById("log-container");
+  var toggleBtn = document.getElementById("log-toggle-icon");
+  var bottomPanel = document.getElementById("bottomPanel");
+  
+  if (logContainer.style.display === "none") {
+    logContainer.style.display = "flex"; // Flex for full height
+    bottomPanel.style.flexBasis = "180px"; /* Default height when opened */
+    bottomPanel.style.minHeight = "48px"; /* Allow manual reduction below default */
+    toggleBtn.innerHTML = "▼";
+  } else {
+    logContainer.style.display = "none";
+    bottomPanel.style.flexBasis = "48px"; /* Collapse to header height */
+    bottomPanel.style.minHeight = "48px";
+    toggleBtn.innerHTML = "▶";
+  }
+}
+</script>
 <script src="/demos.js"></script>
+<script>
+// Resizable Split Pane Logic (Horizontal & Vertical)
+document.addEventListener('DOMContentLoaded', function() {
+  
+  // --- Horizontal Split (Video / Terminal) ---
+  const leftPanel = document.getElementById('panelLeft');
+  const rightPanel = document.getElementById('panelRight');
+  const hGutter = document.getElementById('dragGutter');
+  const hContainer = document.getElementById('splitContainer');
+  let isDraggingH = false;
+
+  // Restore saved width
+  const savedWidth = localStorage.getItem('pi21_split_width');
+  if (savedWidth) {
+    leftPanel.style.flexBasis = savedWidth;
+  }
+
+  hGutter.addEventListener('mousedown', function(e) {
+    isDraggingH = true;
+    document.body.style.cursor = 'col-resize';
+    e.preventDefault();
+  });
+
+  // --- Vertical Split (Top / Bottom) ---
+  const topPanel = document.getElementById('topPanel');
+  const bottomPanel = document.getElementById('bottomPanel');
+  const vGutter = document.getElementById('verticalGutter');
+  const vContainer = document.getElementById('mainVerticalSplit');
+  let isDraggingV = false;
+
+    // Restore saved height
+  const savedHeight = localStorage.getItem('pi21_v_split_height');
+  if (savedHeight) {
+    topPanel.style.flexBasis = savedHeight;
+  }
+
+  vGutter.addEventListener('mousedown', function(e) {
+      isDraggingV = true;
+      document.body.style.cursor = 'row-resize';
+      e.preventDefault();
+  });
+
+
+  // --- Global Mouse Move ---
+  document.addEventListener('mousemove', function(e) {
+    
+    // Horizontal Resize
+    if (isDraggingH) {
+      const containerRect = hContainer.getBoundingClientRect();
+      const containerWidth = containerRect.width;
+      const pointerRelativeX = e.clientX - containerRect.left;
+      
+      let newLeftWidthPercent = (pointerRelativeX / containerWidth) * 100;
+      const minPercent = (300 / containerWidth) * 100; // approx min px
+      const maxPercent = 100 - minPercent;
+
+      if (newLeftWidthPercent < minPercent) newLeftWidthPercent = minPercent;
+      if (newLeftWidthPercent > maxPercent) newLeftWidthPercent = maxPercent;
+
+      leftPanel.style.flexBasis = newLeftWidthPercent + '%';
+    }
+
+    // Vertical Resize
+    if (isDraggingV) {
+        const containerRect = vContainer.getBoundingClientRect();
+        const containerHeight = containerRect.height;
+        const pointerRelativeY = e.clientY - containerRect.top;
+
+        let newTopHeightPercent = (pointerRelativeY / containerHeight) * 100;
+        
+        // Constrain (e.g., min 20% for each)
+        if (newTopHeightPercent < 20) newTopHeightPercent = 20;
+        if (newTopHeightPercent > 80) newTopHeightPercent = 80;
+
+        topPanel.style.flexBasis = newTopHeightPercent + '%';
+        // Bottom panel calculates auto (flex-grow/basis logic)
+    }
+
+  });
+
+  document.addEventListener('mouseup', function(e) {
+    if (isDraggingH) {
+      isDraggingH = false;
+      document.body.style.cursor = 'default';
+      localStorage.setItem('pi21_split_width', leftPanel.style.flexBasis);
+    }
+    if (isDraggingV) {
+        isDraggingV = false;
+        document.body.style.cursor = 'default';
+        localStorage.setItem('pi21_v_split_height', topPanel.style.flexBasis);
+    }
+  });
+});
+</script>
+
+
+<script>
+    // Hardware Menu Logic
+    function toggleHardwareMenu() {
+        const menu = document.getElementById('hw-menu');
+        menu.classList.toggle('active');
+    }
+    
+    // Close on click outside
+    document.addEventListener('click', function(e) {
+        const menu = document.getElementById('hw-menu');
+        const badge = document.querySelector('.status-badge'); // Select by class as ID has jinja
+        if (menu && badge && menu.classList.contains('active') && !menu.contains(e.target) && !badge.contains(e.target)) {
+            menu.classList.remove('active');
+        }
+    });
+</script>
+<script>
+// Sidebar Navigation Logic
+document.addEventListener('DOMContentLoaded', function() {
+    const views = {
+        'btn-term-free': 'shared-terminal',
+        'btn-byo': 'view-byo',
+        'btn-contrib': 'view-contrib',
+        'btn-hello-world': 'shared-terminal'
+    };
+    
+    // Select all clickable items
+    document.querySelectorAll('.menu-item').forEach(item => {
+        item.addEventListener('click', function(e) {
+            
+            const id = this.id;
+            const targetViewId = views[id];
+
+            if (targetViewId) {
+                // Switch View
+                document.querySelectorAll('.menu-item').forEach(el => el.classList.remove('active'));
+                this.classList.add('active');
+                
+                // Hide all views
+                document.getElementById('shared-terminal').style.display = 'none';
+                document.getElementById('view-byo').style.display = 'none';
+                document.getElementById('view-contrib').style.display = 'none';
+                
+                // Show target
+                const target = document.getElementById(targetViewId);
+                if(target) target.style.display = 'block';
 
+            } else if (this.dataset.cmd) {
+                // Demo Command
+                document.querySelectorAll('.menu-item').forEach(el => el.classList.remove('active'));
+                this.classList.add('active');
 
-<h1>Useful links</h1>
-<ul>
-  <li>
-    <h2>Tiny Tapeout</h2>
-
-    <li><a href="https://tinytapeout.com">Tiny Tapeout</a> is an educational project that makes it easier and cheaper than ever to get your designs manufactured on a real chip!</li>
-    <li><a href="https://commander.tinytapeout.com/">Tiny Tapeout Commander</a>Configure your Tiny Tapeout Board
-</li>
-    <h2>Toolchains</h2>
-    <p>The Arty A7 development boards have an AMD/Xilinx Artix 7 FPGA which is supported by multiple different toolchains.</p>
-    <ul>
-      <li><a href="https://f4pga.org">F4PGA open source toolchain for Xilinx 7 series (found on Arty A7 FPGAs)</a></li>
-      <li><a href="">OpenXC7 open source toolchain for Xilinx 7 series (found on Arty A7 FPGAs)</a></li>
-      <li><a href="">AMD / Xilinx official Vitis / Vivado toolchain for Xilinx 7 series.</a></li>
-    </ul>
-   </li>
-  <li>
-    <h2>Arty Development Board</h2>
-    <ul>
-      <li><a href="https://f4pga.org">Demos for Arty A7 FPGA board using the F4PGA open source toolchain</a></li>
-      <li><a href="https://digilent.com/reference/programmable-logic/arty-a7/start">Digilent Reference for Arty A7 FPGA board</a></li>
-    </ul>
-  </li>
-</ul>
+                document.getElementById('shared-terminal').style.display = 'block';
+                document.getElementById('view-byo').style.display = 'none';
+                document.getElementById('view-contrib').style.display = 'none';
+                
+                // Try sending to iframe
+                const cmd = this.dataset.cmd;
+                const iframe = document.getElementById('wssh_if');
+                if (iframe && iframe.contentWindow && iframe.contentWindow.wssh) {
+                    iframe.contentWindow.wssh.send(cmd);
+                } else {
+                    console.log("Command:", cmd, "(No wssh connection found)");
+                }
 
+            } else if (this.classList.contains('category-header')) {
+                // Toggle Category
+                const children = this.nextElementSibling;
+                if(children && children.classList.contains('menu-children')) {
+                    children.style.display = (children.style.display === 'none') ? 'block' : 'none';
+                    const indicator = this.querySelector('.indicator');
+                    if(indicator) indicator.innerText = (children.style.display === 'none') ? '▶' : '▼';
+                }
+            }
+        });
+    });
+});
+</script>
 </body>
 </html>
diff --git a/ansible/roles/site/files/pib/pistat/src/pistat/static/dcws.js b/ansible/roles/site/files/pib/pistat/src/pistat/static/dcws.js
index 823b651..27fbfda 100644
--- a/ansible/roles/site/files/pib/pistat/src/pistat/static/dcws.js
+++ b/ansible/roles/site/files/pib/pistat/src/pistat/static/dcws.js
@@ -2,133 +2,141 @@
 // Django-Channels Web Socket
 
 function PiStatus(PiID) {
+  function addTextAndScrollToBottom(newText) {
+    const o = document.getElementById("log" + PiID);
+    d = new Date();
+    o.value += d.toLocaleTimeString() + ": " + newText + "\n";
+    o.scrollTop = o.scrollHeight; // Scroll to bottom
+  }
+
+  function refresh_video_player() {
+    const o = document.getElementById("video-player" + PiID);
+    o.player.load();
+  }
+
+  function wssh_connect() {
+    const wssh_if = document.getElementById("wssh_if").contentWindow;
+    wssh_if.wssh.connect();
+  }
+
+  function updateStatus(status, text) {
+    const badge = document.getElementById("status-text-" + PiID);
+    const dot = document.getElementById("status-dot-" + PiID);
+    if (badge && dot) {
+      badge.innerText = text;
+      dot.className = "status-dot " + status;
+    }
+  }
+
+  function toggleLogs() {
+    const container = document.getElementById("log-container");
+    container.classList.toggle("visible");
+    const toggleBtn = document.querySelector(".desc-toggle");
+    toggleBtn.classList.toggle("collapsed");
+  }
+  window.toggleLogs = toggleLogs; // Make globally available
+
+  function connect() {
+    updateStatus("disconnected", "Connecting...");
+
+    const logSocket = new WebSocket(
+      "WSS://" + window.location.host + "/ws/pistat/" + "pi" + PiID + "/"
+    );
+
+    logSocket.onopen = function (e) {
+      addTextAndScrollToBottom("socket connected");
+      updateStatus("connected", "Connected");
+      // show PoE on/off status on page (re)load.
+      check_status();
+    };
 
-    function addTextAndScrollToBottom(newText){
-        const o = document.getElementById("log"+PiID);
-        d=new Date();
-        o.value += (d.toLocaleTimeString() + ': ' + newText + '\n');
-        o.scrollTop = o.scrollHeight; // Scroll to bottom
+    logSocket.onclose = function (e) {
+      const errortext = "socket closed.";
+      console.error(errortext);
+      addTextAndScrollToBottom(errortext);
+      updateStatus("disconnected", "Disconnected");
     };
 
-    function refresh_video_player(){
-        const o = document.getElementById("video-player"+PiID);
-        o.player.load();
+    logSocket.onmessage = function (e) {
+      const data = JSON.parse(e.data);
+      addTextAndScrollToBottom(data.message);
+
+      // reconnect UI clients to the server(s)
+      if (data.message == "piview: ssh ssh server started.") {
+        console.log("ssh!");
+        wssh_connect();
+        updateStatus("connected", "SSH Ready");
+      }
+      if (data.status == "cam") {
+        refresh_video_player();
+      }
     };
 
-    function wssh_connect(){
-        const wssh_if = document.getElementById("wssh_if").contentWindow;
-        wssh_if.wssh.connect();
+    document.getElementById("reconnect" + PiID).onclick = function (e) {
+      logSocket.close();
+      connect();
     };
 
-    function connect(){
-
-        const logSocket = new WebSocket(
-            'WSS://'
-            + window.location.host
-            + '/ws/pistat/'
-            + 'pi'+PiID
-            + '/'
-        );
-
-        logSocket.onopen = function(e) {
-            addTextAndScrollToBottom("socket connected");
-            // show PoE on/off status on page (re)load.
-            check_status();
-        };
-
-        logSocket.onclose = function(e) {
-            const errortext = 'socket closed.';
-            console.error(errortext);
-            addTextAndScrollToBottom(errortext);
-        };
-
-        logSocket.onmessage = function(e) {
-            const data = JSON.parse(e.data);
-            addTextAndScrollToBottom(data.message);
-
-            // reconnect UI clients to the server(s)
-            if (data.message == "piview: ssh ssh server started.") {
-                   console.log("ssh!");
-                   wssh_connect();
-            };
-            if (data.status == "cam") {
-                   refresh_video_player();
-            };
-        };
-
-
-        document.getElementById('reconnect'+PiID).onclick = function(e) {
-            logSocket.close();
-            connect();
-        };
-
-        function check_status(){
-
-            logSocket.send(
-                JSON.stringify({ 'message': 'checking status: '+PiID })
-            );
-
-            fetch('/snmp/status', {
-              method: 'POST',
-              headers: { "Content-type": "application/json; charset=UTF-8" },
-              body: JSON.stringify({ port: PiID })
-              }
-            )
-              .then((response) => response.json())
-              .then((json) => console.log(json))
-              .then((error) => console.log(error));
-        };
-
-        document.getElementById('reset'+PiID).onclick = function(e) {
-
-            e.preventDefault();
-
-            logSocket.close();
-            connect();
-
-            logSocket.send(
-                JSON.stringify({ 'message': 'reset: '+PiID })
-            );
-
-            fetch('/snmp/toggle', {
-              method: 'POST',
-              headers: { "Content-type": "application/json; charset=UTF-8" },
-              body: JSON.stringify({ port: PiID })
-              }
-            )
-            .then((error) => console.log(error));
-        };
-
-        document.getElementById('status'+PiID).onclick = function(e) {
-            e.preventDefault();
-            check_status();
-        };
-
-        document.getElementById('log-submit'+PiID).onclick = function(e) {
-            const o = document.getElementById('log-text'+PiID);
-            message = o.value;
-            if (message == ''){ message=o.placeholder };
-            logSocket.send(JSON.stringify({ 'message': message }));
-            o.value = '';
-        };
+    function check_status() {
+      logSocket.send(JSON.stringify({ message: "checking status: " + PiID }));
 
+      fetch("/snmp/status", {
+        method: "POST",
+        headers: { "Content-type": "application/json; charset=UTF-8" },
+        body: JSON.stringify({ port: PiID }),
+      })
+        .then((response) => response.json())
+        .then((json) => console.log(json))
+        .then((error) => console.log(error));
+    }
 
-    };
+    document.getElementById("reset" + PiID).onclick = function (e) {
+      e.preventDefault();
 
-    connect();
+      logSocket.close();
+      connect();
 
-    document.getElementById('log-text'+PiID).onkeyup = function(e) {
-        if (e.key === 'Enter') {  // enter, return
-            document.getElementById('log-submit'+PiID).click();
-        }
-    };
+      logSocket.send(JSON.stringify({ message: "reset: " + PiID }));
 
-    document.getElementById("refresh-video-player"+PiID).onclick = function(e) {
-    	refresh_video_player(e);
+      fetch("/snmp/toggle", {
+        method: "POST",
+        headers: { "Content-type": "application/json; charset=UTF-8" },
+        body: JSON.stringify({ port: PiID }),
+      }).then((error) => console.log(error));
     };
 
-    document.getElementById("wssh-connect").onclick = function(e) {
-    	wssh_connect();
+    document.getElementById("status" + PiID).onclick = function (e) {
+      e.preventDefault();
+      check_status();
     };
 
-};
+    document.getElementById("log-submit" + PiID).onclick = function (e) {
+      const o = document.getElementById("log-text" + PiID);
+      message = o.value;
+      if (message == "") {
+        message = o.placeholder;
+      }
+      logSocket.send(JSON.stringify({ message: message }));
+      o.value = "";
+    };
+  }
+
+  connect();
+
+  document.getElementById("log-text" + PiID).onkeyup = function (e) {
+    if (e.key === "Enter") {
+      // enter, return
+      document.getElementById("log-submit" + PiID).click();
+    }
+  };
+
+  document.getElementById("refresh-video-player" + PiID).onclick = function (
+    e
+  ) {
+    refresh_video_player(e);
+  };
+
+  document.getElementById("wssh-connect").onclick = function (e) {
+    wssh_connect();
+  };
+}