/* eagle-ui.jsx — theme context + shared Eagle Eye primitives.
useE() returns the active theme tokens; everything reads color via it so
light/dark toggles re-theme instantly. Telemetry rows resolve a color KEY
(ev.ck) against the theme. */
const EagleThemeCtx = React.createContext(null);
function useE() { return React.useContext(EagleThemeCtx) || window.EAGLE_THEMES.dark; }
/* ---- severity chip ------------------------------------------ */
function SevChip({ sev, size = "sm" }) {
const E = useE();
const map = { CRITICAL: E.crit, HIGH: E.high, MEDIUM: E.med, LOW: E.low };
const c = map[sev] || E.muted;
const pad = size === "lg" ? "px-2 py-0.5 text-[11px]" : "px-1.5 py-0.5 text-[10px]";
return (
{sev}
);
}
/* ---- markdown + entity highlighter -------------------------- */
const _SEV = { CRITICAL: "crit", HIGH: "high", MEDIUM: "med", LOW: "low" };
const _HILITE = /(\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b|\bworkstation-\d+\b|\blaptop-\d+\b|\bsrv-[a-z0-9-]+\b|\bvpn-gw-\d+\b|\bsvc[-_][a-z0-9]+\b|\b\d{2,5}\/(?:TCP|UDP)\b|[a-z0-9._%+-]+@company\.com|\b(?:CRITICAL|HIGH|MEDIUM|LOW)\b)/g;
function hiliteText(str, key, E) {
return str.split(_HILITE).map((p, i) => {
if (!p) return null;
if (i % 2 === 1) {
if (_SEV[p]) return {p};
return {p};
}
return {p};
});
}
function inlineNodes(text, key, E) {
const out = []; const re = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*)/g;
let last = 0, m, idx = 0;
while ((m = re.exec(text)) !== null) {
if (m.index > last) out.push(...[].concat(hiliteText(text.slice(last, m.index), key + "p" + idx++, E)));
const tok = m[0];
if (tok.startsWith("`")) out.push({tok.slice(1, -1)});
else if (tok.startsWith("**")) out.push({hiliteText(tok.slice(2, -2), key + "bb" + idx, E)});
else out.push({tok.slice(1, -1)});
last = re.lastIndex;
}
if (last < text.length) out.push(...[].concat(hiliteText(text.slice(last), key + "pf", E)));
return out;
}
function EInline({ text }) { const E = useE(); return <>{inlineNodes(text || "", "i", E)}; }
function Markdown({ text }) {
const E = useE();
const lines = (text || "").split("\n"); const blocks = []; let list = null;
const flush = () => {
if (list) {
const Tag = list.ordered ? "ol" : "ul";
blocks.push({list.items.map((it, i) =>
{inlineNodes(it, "li" + blocks.length + "-" + i, E)}
)});
list = null;
}
};
lines.forEach((raw, i) => {
const line = raw.replace(/\s+$/, ""); if (!line.trim()) { flush(); return; }
let m;
if ((m = line.match(/^###?\s+(.*)/))) { flush(); blocks.push(
{inlineNodes(m[1], "h" + i, E)}
); return; }
if ((m = line.match(/^\s*[-*]\s+(.*)/))) { if (!list || list.ordered) { flush(); list = { ordered: false, items: [] }; } list.items.push(m[1]); return; }
if ((m = line.match(/^\s*\d+\.\s+(.*)/))) { if (!list || !list.ordered) { flush(); list = { ordered: true, items: [] }; } list.items.push(m[1]); return; }
flush(); blocks.push(
{inlineNodes(line, "p" + i, E)}
);
});
flush();
return
{blocks}
;
}
/* ---- copy button -------------------------------------------- */
function CopyBtn({ getText, label = "Copy" }) {
const E = useE();
const [done, setDone] = React.useState(false);
return (
);
}
/* ---- theme toggle ------------------------------------------- */
function EagleThemeToggle({ mode, onToggle }) {
const E = useE();
const light = mode === "light";
return (
);
}
/* ---- meters + demo nav -------------------------------------- */
function MeterChip({ icon, label, value, ck }) {
const E = useE();
return (
{label}
{value}
);
}
/* ---- persistent Eagle Eye screen tabs ----------------------- */
// Real anchors with hash hrefs → native middle/Cmd-click "open in new tab".
// A guarded onClick keeps left-clicks as smooth in-app navigation.
function ScreenTabs({ current, onGo }) {
const E = useE();
const tabs = [["soc", "Dashboard", "LayoutDashboard"], ["model", "Model", "Box"], ["app", "Application", "Boxes"], ["agent", "Agent", "Workflow"], ["compare", "Compare", "Columns3"]];
return (