{loading ? (
// Any full reload (initial load, filter/pin change, refresh) shows the
// centered loader spanning the list — prior rows are hidden meanwhile.
// (Load more uses `loadingMore`, not `loading`, so it keeps rows.)
querying…
) : rows.length === 0 ? (
∅
{emptyText}
) : (
<>
{rows.map(renderRow)}
{hasMore ? (
) : (
— end of results —
)}
)}
);
}
// Pin state + colors live in usePinnedFilters (ui.jsx), persisted under
// `area51:pins:` (values) and `area51:pins::colors` (color map).
// Build the effective list of search terms = current input (if any) + pins.
function effectiveSearch(input, pins) {
const trimmed = (input || "").trim();
const all = [...(pins || [])];
if (trimmed && !all.includes(trimmed)) all.push(trimmed);
return all;
}
// ----------------------------------------------------------------
// Endpoints
// ----------------------------------------------------------------
function EndpointsTab() {
const toast = useToast();
const confirm = useConfirm();
const [search, setSearch] = useState("");
const dq = useDebouncedValue(search, 300);
const { pins, addPin, removePin, clearPins, colors, pinColor } = usePinnedFilters("endpoints");
const terms = useMemo(() => effectiveSearch(dq, pins), [dq, pins]);
const [rows, setRows] = useState([]);
const [loading, setLoading] = useState(true);
const [loadingMore, setLoadingMore] = useState(false);
const [hasMore, setHasMore] = useState(true);
const [activeId, setActiveId] = useState(null);
const [modal, setModal] = useState(null); // {mode:'edit'|'new', uri?}
const fetchFirst = useCallback(async () => {
setLoading(true);
try {
const r = await API.listEndpoints({ search: terms });
setRows(r);
setHasMore(r.length === 50);
} catch (e) {
toast("Failed to load endpoints: " + e.message, "error");
setRows([]);
setHasMore(false);
} finally {
setLoading(false);
}
}, [terms, toast]);
useEffect(() => { fetchFirst(); }, [fetchFirst]);
const loadMore = async () => {
if (rows.length === 0) return;
setLoadingMore(true);
try {
const cursor = rows[rows.length - 1].uri;
const r = await API.listEndpoints({ search: terms, cursor });
setRows((xs) => [...xs, ...r]);
setHasMore(r.length === 50);
} catch (e) {
toast("Failed to load more: " + e.message, "error");
} finally {
setLoadingMore(false);
}
};
const open = (uri) => {
setActiveId(uri);
setModal({ mode: "edit", uri });
};
const handleSaved = async () => {
setModal(null);
setActiveId(null);
await fetchFirst();
toast("Endpoint saved", "success");
};
const handleDelete = async (uri) => {
const ok = await confirm({
title: "Delete endpoint",
message: `Permanently delete ${uri}? Requests to this path will return 404.`,
confirmLabel: "Delete",
danger: true,
});
if (!ok) return;
try {
await API.deleteEndpoint(uri);
} catch (e) {
toast("Delete failed: " + e.message, "error");
return;
}
setModal(null);
setActiveId(null);
await fetchFirst();
toast("Endpoint deleted", "success");
};
return (
<>
URIStatus
}
emptyText={search ? "no endpoints match that pattern" : "no endpoints configured"}
rightToolbar={
}
renderRow={(r) => (
open(r.uri)}
/>
)}
/>
{modal && (
{ setModal(null); setActiveId(null); }}
onSaved={handleSaved}
onDelete={handleDelete}
/>
)}
);
}
// Endpoint row. The leading icon is a copy button: it copies the full URL
// (https:// + the active default host + the URI) and never opens the edit
// modal. Clicking anywhere else on the row opens the editor.
function EndpointRow({ row, active, matches, onOpen }) {
const toast = useToast();
const [activeDomain] = useActiveDomain();
const [copied, setCopied] = useState(false);
const copyTimer = useRef(null);
useEffect(() => () => clearTimeout(copyTimer.current), []);
const copyUrl = async (e) => {
e.stopPropagation();
if (!activeDomain) { toast("No default host selected — pick one on Home", "error"); return; }
const url = `https://${activeDomain}${row.uri}`;
const ok = await copyText(url);
if (!ok) { toast("Copy failed", "error"); return; }
setCopied(true);
clearTimeout(copyTimer.current);
copyTimer.current = setTimeout(() => setCopied(false), 1400);
toast(`Copied ${activeDomain}${row.uri}`, "success");
};
return (
);
}
// Product cap on uploads, checked here so an oversize file never leaves the
// browser. The Pages Function re-checks it against Content-Length.
const MAX_UPLOAD_BYTES = 25 * 1024 * 1024;
function EndpointModal({ mode, uri, onClose, onSaved, onDelete }) {
const toast = useToast();
const [loading, setLoading] = useState(mode === "edit");
const [saving, setSaving] = useState(false);
const [form, setForm] = useState({ uri: "", status: 200, headers: "Content-Type: text/plain", body: "" });
// An endpoint is EITHER text-backed or file-backed, never both — a hosted file
// can't be mixed with a hand-written body or a chosen status. `file` is a
// picked-but-not-yet-uploaded File; `savedFile` is what the row already serves
// ({filename, content_type, size, missing}). Either one puts the modal in file
// mode, where the status/headers/body editors are unmounted rather than
// disabled — a greyed-out field still invites a click.
const [file, setFile] = useState(null);
const [savedFile, setSavedFile] = useState(null);
const fileInput = useRef(null);
useEffect(() => {
if (mode !== "edit") return;
let live = true;
API.getEndpoint(uri).then((d) => {
if (!live) return;
let parsedHeaders = {};
try { parsedHeaders = JSON.parse(d.headers || "{}"); } catch {}
setForm({
uri: d.uri,
status: d.status,
headers: headersObjToLines(parsedHeaders),
body: d.body || "",
});
setSavedFile(d.file || null);
setLoading(false);
}).catch((e) => {
if (live) toast("Failed to load endpoint: " + e.message, "error");
});
return () => { live = false; };
}, [mode, uri, toast]);
const update = (k, v) => setForm((f) => ({ ...f, [k]: v }));
const fileMode = !!(file || savedFile);
const pickFile = (f) => {
if (!f) return;
if (f.size > MAX_UPLOAD_BYTES) {
toast(`File is too large — max ${Math.floor(MAX_UPLOAD_BYTES / 1024 / 1024)} MB`, "error");
return;
}
if (f.size === 0) { toast("File is empty", "error"); return; }
setFile(f);
};
// Dropping the pending file returns the modal to the text editors. If the row
// already serves a file, this stages the conversion: saving then writes a text
// response and the server deletes the object.
const clearFile = () => {
setFile(null);
setSavedFile(null);
if (fileInput.current) fileInput.current.value = "";
};
const save = async () => {
const targetUri = form.uri.trim();
if (mode === "new" && !targetUri) { toast("URI is required", "error"); return; }
if (mode === "new" && !targetUri.startsWith("/")) { toast("URI must start with /", "error"); return; }
setSaving(true);
try {
if (file) {
// Upload replaces whatever the URI served before — text or an older file.
await API.uploadEndpointFile(targetUri, file);
} else if (savedFile) {
// Untouched file endpoint: nothing to write. Saving text here would
// silently delete the file the row is serving.
onClose();
return;
} else {
await API.saveEndpoint({
uri: targetUri,
status: Number(form.status) || 200,
headers: form.headers,
body: form.body,
});
}
onSaved();
} catch (e) {
toast("Save failed: " + e.message, "error");
} finally {
setSaving(false);
}
};
return (