From 8ed3c5deb4d177b041a687274a22e36f776e5ed1 Mon Sep 17 00:00:00 2001
From: root <root@claude.hynesy.com>
Date: Thu, 4 Jun 2026 23:09:35 +1000
Subject: [PATCH] =?UTF-8?q?feat(ui):=20Terminal=20tab=20=E2=80=94=20embedd?=
 =?UTF-8?q?ed=20blackflame=20ttyd=20to=20CT300=20(claude=20in=20persistent?=
 =?UTF-8?q?=20tmux)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ttyd on CT300 (:7681, firewalled to Traefik) behind same-origin /terminal via
Traefik + CF Access; iframe view + nav entry.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 public/app.js                |  1 +
 public/components/sidebar.js |  1 +
 public/router.js             |  1 +
 public/style.css             |  5 +++++
 public/views/terminal.js     | 21 +++++++++++++++++++++
 5 files changed, 29 insertions(+)
 create mode 100644 public/views/terminal.js

diff --git a/public/app.js b/public/app.js
index 8a5f0c9..1fdeb09 100644
--- a/public/app.js
+++ b/public/app.js
@@ -24,6 +24,7 @@ const VIEWS = {
   'sacred-valley': () => import('./views/sacred_valley.js'),
   sentinel:        () => import('./views/sentinel.js'),
   'little-blue':   () => import('./views/little_blue.js'),
+  terminal:        () => import('./views/terminal.js'),
   jobs:            () => import('./views/jobs.js')
 };
 
diff --git a/public/components/sidebar.js b/public/components/sidebar.js
index edc585b..34b4d67 100644
--- a/public/components/sidebar.js
+++ b/public/components/sidebar.js
@@ -93,6 +93,7 @@ export function renderSidebar(root) {
       navItem('Sacred Valley', '/sacred-valley'),
       navItem('Sentinel', '/sentinel'),
       navItem('Little Blue', '/little-blue'),
+      navItem('Terminal', '/terminal'),
       navItem('Search', '/search'),
       inboxItem,
       navItem('Jobs', '/jobs'),
diff --git a/public/router.js b/public/router.js
index 85d4de5..c15c573 100644
--- a/public/router.js
+++ b/public/router.js
@@ -23,6 +23,7 @@ const ROUTES = [
   { name: 'sacred-valley', re: /^\/sacred-valley$/, keys: [] },
   { name: 'sentinel', re: /^\/sentinel$/, keys: [] },
   { name: 'little-blue', re: /^\/little-blue$/, keys: [] },
+  { name: 'terminal', re: /^\/terminal$/, keys: [] },
   { name: 'jobs', re: /^\/jobs$/, keys: [] },
   { name: 'home',     re: /^\/?$/,                 keys: [] }
 ];
diff --git a/public/style.css b/public/style.css
index 38bf449..612ea3b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -155,6 +155,11 @@ button.ghost:hover { color: var(--text); border-color: var(--accent-dim); }
 .lb-toast.err { border-color: var(--bad); color: var(--bad); }
 @media (max-width: 900px) { .lb-grid { grid-template-columns: 1fr; } }
 
+/* Terminal tab (embedded ttyd) */
+.term-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
+.term-title { font-family: var(--font-display); color: var(--accent); letter-spacing: 0.08em; font-size: 14px; }
+.term-frame { width: 100%; height: calc(100vh - 100px); border: 1px solid var(--border); border-radius: 6px; background: var(--bg); display: block; }
+
 /* modal */
 .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
 .modal {
diff --git a/public/views/terminal.js b/public/views/terminal.js
new file mode 100644
index 0000000..9dd7fb5
--- /dev/null
+++ b/public/views/terminal.js
@@ -0,0 +1,21 @@
+// #/terminal — embeds the CT 300 web terminal (ttyd → persistent tmux/claude),
+// same-origin under /terminal so it shares the Void's CF Access session.
+import { el, mount } from '../dom.js';
+
+export async function render(main) {
+  mount(main,
+    el('div', { class: 'term-bar' },
+      el('span', { class: 'term-title' }, '◆ Terminal'),
+      el('span', { class: 'muted', style: { fontSize: '11px' } }, 'claude @ ct300 · persistent tmux'),
+      el('button', { class: 'ghost', style: { marginLeft: 'auto' }, onclick: () => {
+        const f = document.getElementById('term-frame'); if (f) f.src = f.src;
+      } }, '⟳ Reconnect')
+    ),
+    el('iframe', {
+      id: 'term-frame',
+      src: '/terminal/',
+      class: 'term-frame',
+      allow: 'clipboard-read; clipboard-write'
+    })
+  );
+}