{/* host strip — per-tracker rollup, all hosts shown so the green ones reassure */}
{hosts.map((h, i) => {
const tone = h.risk ? "bad" : h.watch ? "warn" : "ok";
return (
{h.host}
{(h.ratio / h.total).toFixed(2)}
avg ratio
{h.total} seeds · {bytes(h.up)} uploaded
{h.risk ? ` · ${h.risk} risk` : ""}{h.watch ? ` · ${h.watch} watch` : ""}
);
})}
●
All private-tracker seeds healthy — no strike-risk items.
) : flagged.map(({ d, h }, i) => {
const tone = h.level === "risk" ? "bad" : "warn";
const seedH = (d.seeding_time || 0) / 3600;
const mono = "var(--mono)";
const lbl = { fontFamily: mono, fontSize: 10, color: "var(--b-muted)" };
const ratioCell = (
{(d.ratio || 0).toFixed(2)}
ratio
);
const seedCell = (
{duration(d.seeding_time || 0)}
seed time
);
const upCell = (
{bytes(d.uploaded)}
↑ {d.up_speed ? speed(d.up_speed) : "idle"}
);
const titleBlock = (
{d.name}
{d.tracker_host} · {bytes(d.size)}{d.category ? ` · ${d.category}` : ""}
{h.reasons.length ? ` · ${h.reasons.join(", ")}` : ""}
);
// On narrow viewports the 5-column desktop grid shears each metric
// into an unreadable vertical column. Switch to a stacked layout:
// chip + title on top, metrics in a 3-up row below.
if (narrow) {
return (
{h.level}
{titleBlock}
{ratioCell}{seedCell}{upCell}
);
}
return (
{h.level}
{titleBlock}
{ratioCell}
{seedCell}
{upCell}
);
})}
);
}
// ── RomM live scan ─────────────────────────────────────────────────
// Connects straight to RomM's Socket.IO (same-site, so RomM's session
// cookie rides along — no creds in the page) and renders live library-
// scan progress. Read-only: it only listens for scan:* broadcasts.
// RomM scan state is hoisted into a hook so the parent can know whether the
// RomM panel will actually render (it's null when idle/offline) and size the
// activity-row grid accordingly.
function useRommScan() {
const [conn, setConn] = useState("connecting");
const [scan, setScan] = useState(null);
useEffect(() => {
if (!window.io) { setConn("down"); return; }
const sock = window.io("wss://romm.amochis.link", {
path: "/ws/socket.io", transports: ["websocket"], withCredentials: true,
});
const patch = (p) => setScan((s) =>
({ phase: "scanning", ...(s && s.phase === "scanning" ? s : {}), ...p }));
sock.on("connect", () => setConn("live"));
sock.on("disconnect", () => setConn("down"));
sock.on("connect_error", () => setConn("down"));
sock.on("scan:scanning_platform", (p) => setScan((s) => {
const prev = s && s.phase === "scanning" ? s : {};
const st = prev.stats || {};
return { ...prev, phase: "scanning", platform: p,
baseline: { scanned: st.scanned_roms || 0, new: st.new_roms || 0, identified: st.identified_roms || 0 } };
}));
sock.on("scan:scanning_rom", (r) => patch({ rom: r }));
sock.on("scan:update_stats", (st) => patch({ stats: st }));
sock.on("scan:done", (st) => setScan({ phase: "done", stats: st }));
sock.on("scan:done_ko", (e) => setScan({ phase: "failed", error: String(e) }));
return () => sock.close();
}, []);
return { conn, scan };
}
// Whether the Romm panel would actually render — keep in sync with Romm()'s
// own early-return at the top of its body.
function rommVisible(state) {
return state.conn === "live" && !!state.scan;
}
function Romm({ state }) {
const { conn, scan } = state;
const muted = { fontFamily: "var(--mono)", fontSize: 12, color: "var(--b-muted)" };
const pad = { padding: "12px 16px" };
const st = scan && scan.stats;
const bl = scan && scan.baseline || { scanned: 0, new: 0, identified: 0 };
// Per-platform deltas since the current platform started.
const dScanned = (st ? st.scanned_roms : 0) - bl.scanned;
const dNew = (st ? st.new_roms : 0) - bl.new;
const dIdentified = (st ? st.identified_roms : 0) - bl.identified;
// Discover vs rescan — scoped to the current platform.
// If new roms appeared on this platform, files on disk > known games →
// show identification coverage. Otherwise scanned/total is linear and fine.
const isDiscover = dNew > 0;
const platTotal = dScanned > 0 ? dScanned : 1;
const platFrac = isDiscover
? Math.min(1, dIdentified / platTotal)
: (st && st.total_roms ? Math.min(1, (st.scanned_roms || 0) / st.total_roms) : 0);
// Overall progress: platforms scanned / total platforms.
const platBar = st && st.total_platforms
? Math.min(1, (st.scanned_platforms || 0) / st.total_platforms) : 0;
const status = conn !== "live" ? (conn === "down" ? "offline" : "…")
: scan && scan.phase === "scanning" ? "scanning" : "live";
if (conn !== "live" || !scan) return null;
let body;
if (scan.phase === "failed") {
body =
Scanning {scan.platform ? (scan.platform.display_name || scan.platform.name) : "…"}
{st && st.total_platforms ?
{" "}({st.scanned_platforms || 0}/{st.total_platforms})
: null}
{/* Overall platform progress bar */}
{st && st.total_platforms ? pct(platBar * 100, 0) : "—"}
{scan.rom &&
{scan.rom.name || scan.rom.fs_name}
}
{st &&
{isDiscover
? `${dIdentified}/${dScanned} identified · +${dNew} new`
: `${dScanned} scanned`}
}
;
}
return (
Library clean.
) : items.map((f, i) => (
{(() => {
const truenasAlerts = t.failedTasks.length + t.stoppedApps.length + t.degradedPools.length;
const dotTone = truenasAlerts > 0 ? tones.bad : tones.ok;
return (
HOMELAB OPS
{/* domain subtitle — redundant context on mobile (you're on it),
hidden so the header fits one row */}
{!narrow && (
amochis.link
)}
{/* Mock-fallback warning — only surfaced when the API is unreachable.
Replaces the old always-on LIVE chip (which was redundant once
the green dot on LIVE DOWNLOADS communicates the same thing). */}
{snapshot && !snapshot.live && ● MOCK }
{/* Last-updated timestamp — hidden on narrow viewports so the
header keeps to a single line on mobile. */}
{!narrow && (
{snapshot?.fetchedAt ? `updated ${relTime(snapshot.fetchedAt)}` : "loading…"}
)}
↻{narrow && !refreshing ? "" : ` ${refreshing ? "REFRESHING" : "REFRESH"}`}
{window.DirectionB.Hero({ sections, t, narrow })}
{/* alerts row — laid out based on which sources have items:
- alerts only: full-width alerts panel
- alerts + (failed or shoko): 2-col grid, alerts left, queue side-rail right
- no alerts but failed/shoko: queue panels on their own (full width)
- none of the above: nothing rendered */}
{(() => {
const failed = sections.failed_downloads?.data || [];
const shoko = sections.shoko_unrecognized?.data || [];
const truenas = t.failedTasks.length + t.stoppedApps.length + t.degradedPools.length;
const hasAlerts = truenas > 0;
const hasQueue = failed.length > 0 || shoko.length > 0;
if (!hasAlerts && !hasQueue) return null;
if (!hasAlerts && hasQueue) {
const cols = narrow
? "1fr"
: (failed.length > 0 && shoko.length > 0 ? "1.3fr 1fr" : "1fr");
return (
{failed.length > 0 &&
);
}
if (hasAlerts && !hasQueue) {
return window.DirectionB.Alerts({ sections, t });
}
return (
{window.DirectionB.Alerts({ sections, t })}
{failed.length > 0 &&
);
})()}
{(() => {
// Activity row: Downloads · Seeding · RomM. Each panel hides itself
// when it has nothing to show. Grid columns = visible-panel count
// (1 / 2 / 3) so two panels split 50/50 instead of being squashed
// against an empty third track. Always 1 column on narrow screens.
const dl = sections.downloads;
const showDl = dl && (!!dl.error || activeDownloads(dl.data).length > 0);
const showSeed = dl && (!!dl.error || completedSeeds(dl.data).length > 0);
const showRomm = rommVisible(romm);
const count = (showDl ? 1 : 0) + (showSeed ? 1 : 0) + (showRomm ? 1 : 0);
if (count === 0) return null;
const cols = narrow ? 1 : count;
return (
{showDl &&
);
})()}
{sections.calendar &&
}
{sections.storage &&
}
{sections.tasks &&
}
);
}
return { OperatorDashboard };
})();
window.DirectionBRoot = B2;