feat(ui): Terminal tab — embedded blackflame ttyd to CT300 (claude in persistent tmux)

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

@@ -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')
 };
 

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'),

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: [] }
 ];

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 {

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'
+    })
+  );
+}