Settings page: themes (Dark, Light, Cyberpunk, Retro) with xterm palettes and hub-synced choice, change password, access tokens, about

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

web/src/TerminalPane.tsx

@@ -14,13 +14,7 @@ interface Props {
   onExit: () => void
 }
 
-const THEME = {
-  background: '#0d1117', foreground: '#d0d7de', cursor: '#d0d7de', selectionBackground: '#264f78',
-  black: '#0d1117', red: '#ff7b72', green: '#3fb950', yellow: '#d29922', blue: '#58a6ff',
-  magenta: '#bc8cff', cyan: '#39c5cf', white: '#b1bac4', brightBlack: '#6e7681', brightRed: '#ffa198',
-  brightGreen: '#56d364', brightYellow: '#e3b341', brightBlue: '#79c0ff', brightMagenta: '#d2a8ff',
-  brightCyan: '#56d4dd', brightWhite: '#f0f6fc',
-}
+import { currentThemeId, themeById } from './themes'
 
 export default function TerminalPane({ id, active, register, onStatus, onExit }: Props) {
   const box = useRef<HTMLDivElement>(null)
@@ -34,7 +28,7 @@ export default function TerminalPane({ id, active, register, onStatus, onExit }:
   useEffect(() => {
     const el = box.current!
     const term = new Terminal({
-      theme: THEME, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',
+      theme: themeById(currentThemeId()).xterm, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',
       fontSize: window.matchMedia('(pointer: coarse)').matches ? 13 : 14,
       cursorBlink: true, scrollback: 5000, allowProposedApi: true,
     })
@@ -106,6 +100,9 @@ export default function TerminalPane({ id, active, register, onStatus, onExit }:
     const onVis = () => { if (document.visibilityState === 'visible' && ws && ws.readyState !== WebSocket.OPEN && !closed) { clearTimeout(retryTimer); connect() } }
     document.addEventListener('visibilitychange', onVis)
 
+    const onTheme = (e: Event) => { term.options.theme = (e as CustomEvent).detail.xterm }
+    window.addEventListener('hamlab:theme', onTheme)
+
     register({ input: send, armCtrl: (v) => { ctrlArmed = v; term.focus() } })
 
     return () => {
@@ -113,6 +110,7 @@ export default function TerminalPane({ id, active, register, onStatus, onExit }:
       closed = true
       clearTimeout(retryTimer)
       document.removeEventListener('visibilitychange', onVis)
+      window.removeEventListener('hamlab:theme', onTheme)
       ro.disconnect()
       ws?.close()
       term.dispose()