hamlab/web/src/Settings.tsx

import { FormEvent, useCallback, useEffect, useState } from 'react'
import { fetchCatalog } from './sensors'
import { api, Me } from './api'
import { applyTheme, currentThemeId, THEMES } from './themes'
import { Btn, Loading, askYes, toast, useEscape } from './ui'
import { fmtMs, getRefreshMs, REFRESH_OPTIONS, setRefreshMs } from './prefs'

const fmtUptime = (s: number) => { 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` }

// Small painted preview of a theme: rail, header, a tile and a bar, in its own colours.
function Preview({ vars }: { vars: Record<string, string> }) {
  const v = (k: string) => vars[k]
  return (
    <div className="tprev" style={{ background: v('--bg'), borderColor: v('--border') }}>
      <div className="tprev-head" style={{ background: v('--bg2'), borderColor: v('--border') }}><span style={{ color: v('--accent') }}>Ham Lab</span><span className="tprev-dot" style={{ background: v('--ok') }} /></div>
      <div className="tprev-body">
        <div className="tprev-rail" style={{ background: v('--bg2'), borderColor: v('--border') }}>
          <span style={{ background: v('--bg3'), boxShadow: `inset 2px 0 0 ${v('--accent')}` }} /><span /><span />
        </div>
        <div className="tprev-main">
          <div className="tprev-tile" style={{ background: v('--bg2'), borderColor: v('--border') }}>
            <i style={{ color: v('--muted') }}>CPU</i><b style={{ color: v('--fg') }}>12%</b>
            <div className="tprev-bar" style={{ background: v('--track') }}><div style={{ width: '40%', background: v('--s1') }} /></div>
          </div>
          <div className="tprev-term" style={{ background: v('--term-bg'), color: v('--accent2') }}>$ _</div>
        </div>
      </div>
    </div>
  )
}

export default function Settings({ me }: { me: Me }) {
  const [theme, setTheme] = useState(currentThemeId())
  const [refresh, setRefresh] = useState(getRefreshMs())
  const [tokens, setTokens] = useState<{ name: string; created: string; scope?: string; sensors?: string[] }[] | null>(null)
  const [fresh, setFresh] = useState<{ name: string; token: string } | null>(null)
  const [making, setMaking] = useState(false)
  const [cur, setCur] = useState('')
  const [pw1, setPw1] = useState('')
  const [pw2, setPw2] = useState('')
  const [pwErr, setPwErr] = useState('')

  const loadTokens = useCallback(async () => { try { setTokens(await api.tokens()) } catch { setTokens([]) } }, [])
  useEffect(() => { loadTokens() }, [loadTokens])

  const pick = async (id: string) => {
    applyTheme(id); setTheme(id)
    try { await api.saveUIPrefs({ theme: id, refreshMs: getRefreshMs() }) } catch { /* local still applied */ }
  }
  const pickRefresh = async (ms: number) => {
    setRefreshMs(ms); setRefresh(ms)
    try { await api.saveUIPrefs({ theme: currentThemeId(), refreshMs: ms }) } catch { /* local still applied */ }
  }

  async function changePassword(e: FormEvent) {
    e.preventDefault()
    setPwErr('')
    if (pw1 !== pw2) { setPwErr('New passwords differ.'); return }
    if (pw1.length < 12) { setPwErr('At least 12 characters.'); return }
    try { await api.changePassword(cur, pw1); toast('password changed'); setCur(''); setPw1(''); setPw2('') }
    catch (err) { setPwErr(err instanceof Error ? err.message : 'failed') }
  }
  async function revoke(name: string) {
    if (!await askYes(`Revoke the token "${name}"? The hub holding it loses access to this host until it re-adds it.`)) return
    try { await api.revokeToken(name); toast(`${name} revoked`); loadTokens() } catch (err) { toast(err instanceof Error ? err.message : 'failed', 'err') }
  }

  return (
    <div className="dash settings">
      <div className="dash-bar"><h2 className="section">Appearance</h2><span className="spacer" /><span className="muted small">follows you to every device you sign in on</span></div>
      <div className="themes">
        {THEMES.map((t) => (
          <button key={t.id} className={'theme-card' + (theme === t.id ? ' on' : '')} onClick={() => pick(t.id)}>
            <Preview vars={t.vars} />
            <div className="theme-name">{t.name}{theme === t.id && <span className="badge">active</span>}</div>
            <div className="muted small">{t.blurb}</div>
          </button>
        ))}
      </div>

      <div className="dash-bar"><h2 className="section">Refresh rate</h2><span className="spacer" /><span className="muted small">every live view, on every machine</span></div>
      <section className="card">
        <div className="chips">
          {REFRESH_OPTIONS.map((ms) => <button key={ms} className={'chip' + (refresh === ms ? ' on' : '')} onClick={() => pickRefresh(ms)}>{fmtMs(ms)}</button>)}
        </div>
        <div className="muted small" style={{ marginTop: 8 }}>
          Every page polls at exactly this rate: dashboard, processes, disks, services, cron, updates, machines. The sampler on each machine follows it too, so charts keep 300 points and cover 300 × rate.
          Fast rates cost CPU on the host, especially on the list pages, which run commands to refresh. Nothing is throttled behind your back.
        </div>
      </section>

      <div className="dash-bar"><h2 className="section">Account · {me.host}</h2></div>
      <form className="card addform" onSubmit={changePassword}>
        <label>Current password <input type="password" value={cur} onChange={(e) => setCur(e.target.value)} autoComplete="current-password" required /></label>
        <label>New password <input type="password" value={pw1} onChange={(e) => setPw1(e.target.value)} autoComplete="new-password" required /></label>
        <label>New password again <input type="password" value={pw2} onChange={(e) => setPw2(e.target.value)} autoComplete="new-password" required /></label>
        {pwErr && <div className="error">{pwErr}</div>}
        <div className="svc-actions"><button className="btn on" disabled={!cur || !pw1 || !pw2}>Change password</button><span className="muted small">Changes the login for this host only. Other machines keep their own password. Existing sessions stay signed in.</span></div>
      </form>

      <div className="dash-bar"><h2 className="section">Access tokens</h2></div>
      <section className="card">
        <div className="muted small" style={{ marginBottom: 8 }}>A <b>full</b> token lets another Ham Lab (a hub) manage this host; hubs issue and revoke their own. A <b>read-only</b> token can only read sensors — that's the one to give a dashboard.</div>
        {tokens === null && <Loading label="Loading…" />}
        {tokens && tokens.length === 0 && <div className="empty">No tokens. No hub manages this host.</div>}
        {tokens && tokens.map((t) => (
          <div className="row" key={t.name}>
            <span className="k mono">{t.name}</span>
            <span className="badge" style={{ marginLeft: 0 }} title={t.sensors?.length ? t.sensors.join(', ') : undefined}>{t.scope ? (t.sensors?.length ? `read-only · ${t.sensors.join(' ')}` : 'read-only') : 'full'}</span>
            <span className="muted small">issued {new Date(t.created).toLocaleString()}</span>
            <Btn className="btn danger" onClick={() => revoke(t.name)}>Revoke</Btn>
          </div>
        ))}
        {fresh && (
          <div className="notice attn" style={{ marginTop: 8 }}>
            <div>Token for <b>{fresh.name}</b> — shown once, copy it now:</div>
            <div className="mono small" style={{ wordBreak: 'break-all', userSelect: 'all', margin: '6px 0' }}>{fresh.token}</div>
            <Btn className="btn" onClick={async () => { try { await navigator.clipboard.writeText(fresh.token); toast('copied') } catch { toast('select and copy it by hand', 'err') } }}>Copy</Btn>{' '}
            <Btn className="btn" onClick={() => setFresh(null)}>Done</Btn>
          </div>
        )}
        <div className="svc-actions" style={{ marginTop: 8 }}>
          <Btn className="btn" onClick={() => setMaking(true)}>+ Read-only sensor token</Btn>
        </div>
      </section>

      {making && <TokenDialog onClose={() => setMaking(false)} onMade={(t) => { setMaking(false); setFresh(t); loadTokens() }} />}

      <div className="dash-bar"><h2 className="section">About</h2></div>
      <section className="card">
        <div className="props">
          <div><span className="k">Version</span><span className="mono">{me.version}</span></div>
          <div><span className="k">Host</span><span>{me.host} · {me.arch}</span></div>
          <div><span className="k">Runs as</span><span>{me.user}</span></div>
          <div><span className="k">Uptime</span><span>{fmtUptime(me.uptime)}</span></div>
          {me.fingerprint && <div><span className="k">Certificate</span><span className="mono small">{me.fingerprint}</span></div>}
        </div>
      </section>
    </div>
  )
}

// One dialog for a read-only token: what will use it, and (optionally) which sensor
// families it may see — picked from this machine's own catalog, or typed as patterns.
function TokenDialog({ onClose, onMade }: { onClose: () => void; onMade: (t: { name: string; token: string }) => void }) {
  const [name, setName] = useState('glance')
  const [pats, setPats] = useState('')
  const [fams, setFams] = useState<string[]>([])
  const [err, setErr] = useState('')
  useEscape(onClose)
  useEffect(() => { fetchCatalog({ machine: null }).then((c) => setFams([...new Set(c.map((s) => s.id.split('.')[0]))].sort())).catch(() => {}) }, [])
  const list = pats.split(',').map((x) => x.trim()).filter(Boolean)
  const toggle = (f: string) => { const p = f === 'uptime' ? f : f + '.*'; setPats((list.includes(p) ? list.filter((x) => x !== p) : [...list, p]).join(', ')) }
  const make = async () => { try { onMade(await api.createReadToken(name.trim(), list)) } catch (e) { setErr(e instanceof Error ? e.message : 'failed') } }
  return (
    <div className="modal-back" onClick={onClose}>
      <form className="modal" onClick={(e) => e.stopPropagation()} onSubmit={(e) => { e.preventDefault(); make() }}>
        <h3>Read-only sensor token</h3>
        <label className="muted">Name — what will use it
          <input autoFocus value={name} onChange={(e) => setName(e.target.value)} maxLength={64} spellCheck={false} autoCapitalize="off" />
        </label>
        <label className="muted">Limit it to these sensors — empty means every sensor
          <input className="mono" value={pats} onChange={(e) => setPats(e.target.value)} placeholder="cpu.*, temp.*, zfs.tank.*" spellCheck={false} autoCapitalize="off" />
        </label>
        <div className="chips">{fams.map((f) => <button type="button" key={f} className={'chip' + (list.includes(f === 'uptime' ? f : f + '.*') ? ' on' : '')} onClick={() => toggle(f)}>{f}</button>)}</div>
        {err && <div className="error">{err}</div>}
        <div className="svc-actions"><button type="submit" className="btn on" disabled={!name.trim()}>Create</button><span className="spacer" /><button type="button" className="btn" onClick={onClose}>Cancel</button></div>
      </form>
    </div>
  )
}