/* global React, ReactDOM, SNAPPY_DATA */ const { useState, useEffect, useMemo, useCallback } = React; function App() { const data = window.SNAPPY_DATA; const S = window.useSnappyState(); const [theme, setTheme] = window.useTheme(); const { route, page, arg, setRoute } = window.useHashRoute(); // `view` comes from the server — "home" when URL is /, "skills" when /skills. // It only gates the default landing when no hash route is active. const initialView = (typeof window !== "undefined" && window.SNAPPY_INITIAL_VIEW) || "home"; const activeTab = useMemo(() => { if (page === "skill") return "Skills"; if (page === "home") return "Home"; // When there's no hash route, fall back to the server-sent view so the // tab highlighting matches the URL path (/ vs /skills). if (page === "skills" && !window.location.hash) return initialView === "skills" ? "Skills" : "Home"; return ({home:"Home", skills:"Skills", files:"Files", ai:"AI", settings:"Settings", linter:"Linter", docs:"Docs"})[page] || "Skills"; }, [page, initialView]); const [query, setQuery] = useState(""); const [lens, setLens] = useState("Importance"); const [activeCat, setActiveCat] = useState("all"); const [collapsed, setCollapsed] = useState(() => { const s = {}; data.categories.forEach(c => { s[c.id] = true; }); return s; }); const [expandedId, setExpandedId] = useState(null); const [tweaksOpen, setTweaksOpen] = useState(false); const [view, setView] = useState(() => localStorage.getItem("snappy_view") || "list"); useEffect(() => { localStorage.setItem("snappy_view", view); }, [view]); const [bold, setBold] = useState(true); const [density, setDensity] = useState(228); // user-added skills come from SNAPPY_STATE (shared with Settings + AI) const extraSkills = S.installedSkills; const [dragOver, setDragOver] = useState(false); const [toast, setToast] = useState(null); // Tweaks protocol useEffect(() => { const onMsg = (e) => { if (!e.data || typeof e.data !== "object") return; if (e.data.type === "__activate_edit_mode") setTweaksOpen(true); if (e.data.type === "__deactivate_edit_mode") setTweaksOpen(false); }; window.addEventListener("message", onMsg); try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch(e){} return () => window.removeEventListener("message", onMsg); }, []); useEffect(() => { document.documentElement.classList.toggle("bold", bold); }, [bold]); useEffect(() => { document.documentElement.style.setProperty("--grid-min", density + "px"); }, [density]); // scroll to top on route change useEffect(() => { window.scrollTo({ top: 0 }); setExpandedId(null); }, [page, arg]); // merged skills = data + extras (respect freshMode — hide canonical skills) const canonicalSkills = useMemo(() => ( S.freshMode ? data.skills.filter(s => ["bootstrap","gateway","settings","os","ops"].includes(s.id)) : data.skills ), [data.skills, S.freshMode]); const allSkills = useMemo(() => [...canonicalSkills, ...extraSkills], [canonicalSkills, extraSkills]); // expose to page components via window (read live) window.SNAPPY_DATA.skills = allSkills; const filtered = useMemo(() => { const q = query.trim().toLowerCase(); if (!q) return allSkills; return allSkills.filter(s => s.id.toLowerCase().includes(q) || s.blurb.toLowerCase().includes(q) || s.cat.toLowerCase().includes(q) ); }, [query, allSkills]); const grouped = useMemo(() => { const m = {}; filtered.forEach(s => { (m[s.cat] ||= []).push(s); }); return m; }, [filtered]); const counts = useMemo(() => { const c = {}; allSkills.forEach(s => { c[s.cat] = (c[s.cat]||0)+1; }); return c; }, [allSkills]); const orderedCategories = useMemo(() => { const order = ["orchestrator","core","system","ops","integrations","knowledge","content","channels","clients","other","primitives"]; return order.map(id => data.categories.find(c => c.id === id)).filter(Boolean); }, [data.categories]); const jumpToCat = useCallback((id) => { setActiveCat(id); if (id === "all") { window.scrollTo({ top: document.getElementById("catalog")?.offsetTop - 120 || 0, behavior: "smooth" }); } else { const el = document.getElementById("cat-" + id); if (el) window.scrollTo({ top: el.offsetTop - 110, behavior: "smooth" }); } }, []); const toggleCollapsed = useCallback((id) => { setCollapsed(s => ({ ...s, [id]: !s[id] })); }, []); // ===================================================================== // Drag-drop: markdown files OR integration tile OR URL → install skill // ===================================================================== useEffect(() => { const onDragOver = (e) => { e.preventDefault(); // Integration tile drags have their own per-card drop target (.drop-hot); // the full-page .md overlay should only fire for actual file drags. const types = e.dataTransfer && e.dataTransfer.types; if (types && [].indexOf.call(types, "application/snappy-integration") >= 0) return; setDragOver(true); }; const onDragLeave = (e) => { if (e.relatedTarget === null || e.clientX <= 0 || e.clientY <= 0) setDragOver(false); }; const onDrop = async (e) => { e.preventDefault(); setDragOver(false); if (page !== "skills" && page !== "files") return; // 1) integration tile from gallery const intId = e.dataTransfer.getData("application/snappy-integration"); if (intId) { const r = S.installIntegration(intId); if (r.ok) { setToast({ kind:"add", msg: `Installed ${intId} · env keys added to Settings` }); setTimeout(()=>setToast(null), 3500); } else { setToast({ kind:"warn", msg: `${intId} is already installed` }); setTimeout(()=>setToast(null), 2500); } return; } // 2) markdown files const files = Array.from(e.dataTransfer.files || []).filter(f => /\.md$/i.test(f.name)); if (files.length) { const added = []; for (const f of files) { const text = await f.text(); const sk = S.parseMarkdownSkill(text, f.name); const r = S.installSkill(sk); if (r.ok) added.push(sk); } if (added.length) { const keys = added.flatMap(s => s.env_keys || []); const keyHint = keys.length ? ` · ${keys.length} env key${keys.length>1?"s":""} added to Settings` : ""; setToast({ kind:"add", msg: `Added ${added.length} skill${added.length>1?"s":""}: ${added.map(a=>a.id).join(", ")}${keyHint}` }); setTimeout(()=>setToast(null), 4000); } return; } // 3) URL / plain text (simulate AI conversion) const txt = e.dataTransfer.getData("text/plain") || ""; if (/^https?:\/\//i.test(txt.trim())) { const url = txt.trim(); const name = url.replace(/^https?:\/\//,"").split(/[\/?#]/)[0].replace(/\./g,"-"); const stub = `---\ntrigger: ${name}\ncategory: integrations\nsource: url-import\nenv_keys: [${name.toUpperCase().replace(/-/g,"_")}_KEY]\n---\n# ${name}\n\nImported from ${url}. Edit this stub to wire real steps.\n`; const sk = S.parseMarkdownSkill(stub, name + ".md"); sk.blurb = `AI-imported stub from ${url}`; S.installSkill(sk); setToast({ kind:"add", msg: `URL → skill stub: ${sk.id} · edit the markdown to finish wiring` }); setTimeout(()=>setToast(null), 4500); } }; window.addEventListener("dragover", onDragOver); window.addEventListener("dragleave", onDragLeave); window.addEventListener("drop", onDrop); return () => { window.removeEventListener("dragover", onDragOver); window.removeEventListener("dragleave", onDragLeave); window.removeEventListener("drop", onDrop); }; }, [page, S]); const removeSkill = (id) => { if (!extraSkills.find(s => s.id === id)) { setToast({ kind:"warn", msg: `Canonical skill "${id}" cannot be removed from the prototype.` }); setTimeout(()=>setToast(null), 3000); return; } S.uninstallSkill(id); setToast({ kind:"remove", msg: `Removed ${id}.md from the catalog.` }); setTimeout(()=>setToast(null), 3000); }; // ===================================================================== // Render // ===================================================================== // `showHomeOnly` and `showGrid` are hoisted so JSX below the renderPage // call can gate the IntegrationRail + drop overlay on the actual view. // Home must be chrome-light: no rail, no drop overlay — that's the whole // point of letting the home flow into /skills. const addSkill = (sk) => { S.installSkill(sk); setToast({kind:"add", msg:`Added ${sk.id} to catalog.`}); setTimeout(()=>setToast(null), 3000); }; const showHomeOnly = page === "home" || (page === "skills" && !window.location.hash && initialView === "home"); const showGrid = page === "skills" && !showHomeOnly; const showFiles = page === "files"; const renderPage = () => { if (page === "skill" && arg) { return ; } if (page === "ai") return ; if (page === "settings") return ; if (page === "linter") return ; if (page === "docs") return ; if (page === "files") return ; if (showHomeOnly) { return ( setRoute("ai")} user={data.user}/> ); } // skills — the grid. Reached via /skills (initialView=skills) or the Skills tab hash. return ( <>
setRoute("ai")}/>
Healthy Stale Issues No data {allSkills.length} skills · {query ? `${filtered.length} match "${query}"` : `drag a .md file anywhere to add`}
{orderedCategories.map(cat => ( grouped[cat.id] && grouped[cat.id].length ? ( setExpandedId(prev => prev === id ? null : id)} onOpenFull={(id) => setRoute("skill/" + id)} onRemove={removeSkill} allSkills={allSkills} collapsed={query ? false : collapsed[cat.id]} onToggle={toggleCollapsed}/> ) : null ))} {query && filtered.length === 0 && (
No skills match "{query}".
)}
); }; return ( <>