Machine menu shows each machine's address instead of its load

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-09-19 10:45:24 -07:00
co-authored by Claude Fable 5.1
parent d3f2a83249
commit a838adcb27
4 changed files with 16 additions and 9 deletions
+6 -4
View File
@@ -2,10 +2,12 @@ import { useEffect, useRef, useState } from 'react'
import { MachineStatus } from './api'
import { useEscape } from './ui'
const hostOf = (url: string) => { try { return new URL(url).hostname } catch { return url } }
// The host picker at the top of the rail. The hub is always first; managed machines follow
// with their live status. Picking one re-points the whole console at it.
export default function MachineSwitcher({ hub, current, machines, onChange, onManage }: {
hub: string; current: string | null; machines: MachineStatus[]; onChange: (name: string | null) => void; onManage: () => void
export default function MachineSwitcher({ hub, hubAddr, current, machines, onChange, onManage }: {
hub: string; hubAddr?: string; current: string | null; machines: MachineStatus[]; onChange: (name: string | null) => void; onManage: () => void
}) {
const [open, setOpen] = useState(false)
const box = useRef<HTMLDivElement>(null)
@@ -28,11 +30,11 @@ export default function MachineSwitcher({ hub, current, machines, onChange, onMa
{open && (
<div className="mmenu">
<button className={'mitem' + (!current ? ' on' : '')} onClick={() => { setOpen(false); onChange(null) }}>
<span className="dot ok" /><span className="mname">{hub}</span><span className="muted small">this host</span>
<span className="dot ok" /><span className="mname">{hub}</span><span className="muted small mono">{hubAddr || 'this host'}</span>
</button>
{machines.map((m) => (
<button key={m.name} className={'mitem' + (current === m.name ? ' on' : '')} onClick={() => { setOpen(false); onChange(m.name) }} title={m.error || m.url}>
<span className={'dot ' + dotFor(m)} /><span className="mname">{m.name}</span><span className="muted small">{m.online ? m.load : 'offline'}</span>
<span className={'dot ' + dotFor(m)} /><span className="mname">{m.name}</span><span className="muted small mono">{hostOf(m.url)}{m.online ? '' : ' · offline'}</span>
</button>
))}
<button className="mitem manage" onClick={() => { setOpen(false); onManage() }}>+ manage machines…</button>