/* ted.jsx — Ted Kaczynski · the artifact DISPENSARY. AIRS Agent Artifact scanning is done MANUALLY in Strata Cloud Manager — so this pillar is a pickup counter, NOT a scanner. Three download stations (skills · mcp · agents); each hands out sample artifacts the user downloads, uploads to SCM, and scans THERE. No live scan, no backend, no verdict UI. • TedCard — hub card (kraft/amber), routes to #/ted/. • TedStation — the download-station page: header + "what is this", a neutral package list (NEVER hinting which are booby-trapped), a slide-in read DRAWER (tabs + read-only monospace, raw text fetched at runtime from the static URL), and a collapsible "how to scan in SCM". Downloads use real anchors. URL conventions (static assets attached at deploy — we just link to them): per-package zip /downloads/ted//.zip combined zip /downloads/ted//ted-.zip raw file /downloads/ted/// */ // ---- palette (kraft paper + hazard amber — the parcel-X-ray motif) -------- // Each category carries its OWN warm hue (cat.c1/c2) within this family: // skills = amber, mcp = terracotta, agents = olive-bronze. tedBand builds the // X-ray band gradient from a category's two colors. const TED_AMBER = "#d98a26"; // default fallback (skills' accent) const tedBand = (c1, c2) => `linear-gradient(120deg, ${c1}, color-mix(in oklab, ${c2} 62%, #1c1206))`; const tedSoftBand = (c1, c2) => `linear-gradient(120deg, color-mix(in oklab, ${c1} 22%, transparent), color-mix(in oklab, ${c2} 22%, transparent))`; // ---- static download URLs (linked, never fetched-to-backend) -------------- const tedZip = (cat, name) => `/downloads/ted/${cat}/${name}.zip`; const tedAllZip = (cat) => `/downloads/ted/${cat}/ted-${cat}.zip`; const tedRaw = (cat, name, file) => `/downloads/ted/${cat}/${name}/${file}`; const TED_CATS = ["skills", "mcp", "agents"]; // Per-category brand mark: skills/agents are colorful 3D PNGs; MCP is the // official ModelContextProtocol line logo (inline so it inherits `color`). function TedMark({ cat, size = 24, style }) { if (cat === "mcp") { return ( ); } const src = cat === "skills" ? "images/ted-skills.png" : "images/ted-agent.png"; return ; } // inline `code` spans inside the "what is this" paragraph function TedRich({ text, th }) { const parts = String(text).split(/(`[^`]+`)/g); return ( <> {parts.map((p, i) => /^`[^`]+`$/.test(p) ? (


            {p.replace(/`/g, "")}

) : ( {p} ) )} ); } // ========================================================================= // HUB CARD — live; routes into the station (#/ted/) // ========================================================================= function TedCard({ item, index, th, mode }) { const cat = window.getTedCategory(item.cat); const [hover, setHover] = React.useState(false); const dark = mode !== "light"; if (!cat) return null; const route = "#/ted/" + cat.cat; const c1 = cat.c1, c2 = cat.c2; const band = tedBand(c1, c2); const softBand = tedSoftBand(c1, c2); const bandInk = dark ? cat.textDark : cat.textLight; const count = cat.packages.length; return (

setHover(true)} onMouseLeave={() => setHover(false)}> {/* kraft / X-ray band */}

{count} packages

{cat.cardBlurb}

Live · pickup counter Open packages

); } // ========================================================================= // shared bits // ========================================================================= function TedDownloadLink({ href, children, solid, th, title }) { return ( e.stopPropagation()} className="inline-flex shrink-0 items-center gap-1.5 rounded-xl px-3 py-2 text-[12.5px] font-semibold transition-all" style={solid ? { background: th.amber, color: "#1c1206", border: "1px solid transparent" } : { background: th.chip, color: th.ink, border: `1px solid ${th.cardBorder}` }} > {children} ); } // one package row — name · blurb · Read · .zip (NEVER hints clean vs. booby-trapped) function TedRow({ cat, pkg, th, onRead, last }) { const [hover, setHover] = React.useState(false); const multi = pkg.files.length > 1; return (

setHover(true)} onMouseLeave={() => setHover(false)} >

{pkg.name} {multi ? pkg.files.length + " files" : "1 file"}

{pkg.blurb}

.zip

); } // ========================================================================= // READ DRAWER — slides in from the right; tabs across files; read-only mono. // Raw text is fetched at runtime from the static URL; a failed fetch (e.g. raw // preview before deploy) shows a quiet note instead of erroring. // ========================================================================= function TedDrawer({ cat, pkg, th, onClose }) { const [enter, setEnter] = React.useState(false); const [active, setActive] = React.useState(0); const [texts, setTexts] = React.useState({}); // file -> { state:"loading"|"ok"|"miss", text } const file = pkg.files[active]; // mount → animate in React.useEffect(() => { const r = requestAnimationFrame(() => setEnter(true)); return () => cancelAnimationFrame(r); }, []); // graceful close (animate out, then unmount) const requestClose = React.useCallback(() => { setEnter(false); setTimeout(onClose, 230); }, [onClose]); // Esc to close React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") requestClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [requestClose]); // fetch the active file's raw text once React.useEffect(() => { if (texts[file]) return; let alive = true; setTexts((m) => ({ ...m, [file]: { state: "loading" } })); fetch(tedRaw(cat, pkg.name, file)) .then((r) => { if (!r.ok) throw new Error(String(r.status)); return r.text(); }) .then((t) => { if (alive) setTexts((m) => ({ ...m, [file]: { state: "ok", text: t } })); }) .catch(() => { if (alive) setTexts((m) => ({ ...m, [file]: { state: "miss" } })); }); return () => { alive = false; }; }, [cat, pkg.name, file]); // eslint-disable-line const cur = texts[file] || { state: "loading" }; return (