hamlab/web/src/Shell.tsx

import { useCallback, useEffect, useRef, useState } from 'react'
import { api, Me, Term } from './api'
import Rail, { Group } from './Rail'
import TerminalPane, { TermHandle } from './TerminalPane'
import KeyBar from './KeyBar'
import Dashboard from './Dashboard'
import Services from './Services'
import Cron from './Cron'

const GROUPS: Group[] = [
  { id: 'dashboard', label: 'Dashboard', icon: '◔', page: true },
  { id: 'terminal', label: 'Terminal', icon: '>_' },
  { id: 'services', label: 'Services', icon: '⚙', page: true },
  { id: 'cron', label: 'Cron', icon: '⏱', page: true },
  { id: 'zfs', label: 'ZFS', icon: '▤', soon: true },
]

type View = 'terminal' | 'dashboard' | 'services' | 'cron'

function fmtUptime(s: number): string {
  const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60)
  return d > 0 ? `${d}d ${h}h` : h > 0 ? `${h}h ${m}m` : `${m}m`
}

export default function Shell({ me, onLoggedOut }: { me: Me; onLoggedOut: () => void }) {
  const [terms, setTerms] = useState<Term[]>([])
  const [active, setActive] = useState<string | null>(null)
  const [view, setView] = useState<View>('terminal')
  const [drawer, setDrawer] = useState(false)
  const [online, setOnline] = useState(true)
  const handles = useRef<Record<string, TermHandle>>({})

  const reload = useCallback(async () => {
    const list = await api.terminals()
    setTerms(list)
    setActive((a) => (a && list.some((t) => t.id === a) ? a : list[0]?.id ?? null))
  }, [])

  useEffect(() => { reload() }, [reload])

  async function create() {
    const t = await api.createTerminal()
    await reload()
    setActive(t.id)
    setView('terminal')
    setDrawer(false)
  }
  async function rename(t: Term) {
    const name = window.prompt('Rename terminal', t.name)
    if (name && name.trim() && name !== t.name) { await api.renameTerminal(t.id, name.trim()); await reload() }
  }
  async function close(t: Term) {
    if (t.running && !window.confirm(`Close "${t.name}"? The shell will be hung up.`)) return
    await api.deleteTerminal(t.id)
    delete handles.current[t.id]
    await reload()
  }
  async function logout() { await api.logout(); onLoggedOut() }

  const activeTerm = terms.find((t) => t.id === active)
  const termView = view === 'terminal'

  return (
    <div className={'app' + (drawer ? ' drawer-open' : '')}>
      <header className="header">
        <button className="icon-btn menu" onClick={() => setDrawer(!drawer)} aria-label="menu">☰</button>
        <span className="brand">Ham Lab</span>
        <span className="host">{me.user}@{me.host}</span>
        <span className="spacer" />
        <span className="stat" title="load average">{me.load}</span>
        <span className={'dot ' + (online ? 'ok' : 'bad')} title={online ? 'connected' : 'disconnected'} />
        <button className="link" onClick={logout}>logout</button>
      </header>

      <div className="body">
        <Rail groups={GROUPS} terms={terms} active={active} view={view}
          onSelect={(id) => { setActive(id); setView('terminal'); setDrawer(false) }}
          onView={(id) => { setView(id as View); setDrawer(false) }}
          onNew={create} onRename={rename} onClose={close} />
        <div className="backdrop" onClick={() => setDrawer(false)} />

        <main className="main">
          {view === 'dashboard' && <Dashboard />}
          {view === 'services' && <Services />}
          {view === 'cron' && <Cron />}
          {termView && terms.length === 0 && (
            <div className="center muted">
              <div>No terminals.</div>
              <button className="primary" onClick={create}>+ New Terminal</button>
            </div>
          )}
          {terms.map((t) => (
            <TerminalPane key={t.id} id={t.id} active={termView && t.id === active}
              register={(h) => { if (h) handles.current[t.id] = h; else delete handles.current[t.id] }}
              onStatus={(ok) => { if (t.id === active) setOnline(ok) }}
              onExit={reload} />
          ))}
        </main>
      </div>

      {termView && activeTerm && <KeyBar send={(s) => handles.current[activeTerm.id]?.input(s)}
        setCtrl={(v) => handles.current[activeTerm.id]?.armCtrl(v)} />}

      <footer className="footer">
        <span>{me.version.startsWith('v') ? me.version : 'v' + me.version}</span>
        <span>up {fmtUptime(me.uptime)}</span>
        <span className="spacer" />
        <span className="muted">{view === 'dashboard' ? 'Dashboard' : view === 'services' ? 'Services' : view === 'cron' ? 'Cron' : activeTerm ? activeTerm.name : ''}</span>
      </footer>
    </div>
  )
}