/* global React */ // ========================================================================= // SkillPluginRail — left-edge slide-out rail of droppable skill-plugins. // "Integrations" → "Skills" — everything here is just a skill with env_keys, // treated as a plugin you drag into the catalog. // Hover/drag a tile → skills that would wire to it light up (others dim). // Data lineage (source / scope / reads / writes / last sync) disclosed inline. // ========================================================================= const { useState: igUseState, useMemo: igUseMemo, useEffect: igUseEffect, useRef: igUseRef } = React; // ---- relative-time formatter ---- function relTime(ms) { if (!ms) return "never"; const d = Date.now() - ms; if (d < 60e3) return Math.max(1, Math.round(d/1e3)) + "s ago"; if (d < 3600e3) return Math.round(d/60e3) + "m ago"; if (d < 86400e3) return Math.round(d/3600e3) + "h ago"; return Math.round(d/86400e3) + "d ago"; } // ---- brand logos — inline SVG so they respect currentColor where useful ---- function BrandLogo({ id, size = 22 }) { const s = { width: size, height: size, display: "block" }; switch (id) { case "gmail": return ; case "google-calendar": return 31; case "google-drive": return ; case "slack": return ; case "notion": return ; case "stripe": return ; case "linear": return ; case "github": return ; case "hubspot": return ; case "airtable": return ; case "supabase": return ; case "discord": return ; case "telegram": return ; case "twilio": return ; case "openai": return ; case "anthropic": return ; default: return ◈; } } // Resolve all skill ids that relate to an integration (via env_keys + hints + installed) function relatedSkillIds(integration, S) { const out = new Set(integration.skillHints || []); (integration.env_keys || []).forEach(k => { const users = S.usersOfKey(k); users.forEach(id => out.add(id)); }); S.installedSkills.forEach(sk => { if (sk.fromIntegration === integration.id) out.add(sk.id); }); return out; } function SkillPluginRail() { const S = window.useSnappyState(); const [open, setOpen] = igUseState(false); const [query, setQuery] = igUseState(""); const [hoverId, setHoverId] = igUseState(null); const [dragId, setDragId] = igUseState(null); const [expandedId, setExpandedId] = igUseState(null); const [dropHotCard, setDropHotCard] = igUseState(null); // id of skill card currently hovered during drag const activeId = dragId || hoverId; const installedIds = igUseMemo( () => new Set(S.installedSkills.map(s => s.id)), [S.installedSkills] ); const filtered = igUseMemo(() => { const q = query.trim().toLowerCase(); if (!q) return S.INTEGRATIONS; return S.INTEGRATIONS.filter(i => i.name.toLowerCase().includes(q) || i.id.toLowerCase().includes(q) || i.blurb.toLowerCase().includes(q) ); }, [query, S.INTEGRATIONS]); // Broadcast "active integration" → catalog cards light/dim igUseEffect(() => { if (!activeId) { document.documentElement.removeAttribute("data-lit-integration"); document.querySelectorAll(".skill-card.lit, .skill-card.dim, .skill-card.drop-hot").forEach(el => { el.classList.remove("lit", "dim", "drop-hot"); }); return; } const intg = S.INTEGRATIONS.find(i => i.id === activeId); if (!intg) return; const related = relatedSkillIds(intg, S); document.documentElement.setAttribute("data-lit-integration", activeId); document.querySelectorAll(".skill-card").forEach(el => { const sid = el.getAttribute("data-skill-id"); if (!sid) return; if (related.has(sid)) { el.classList.add("lit"); el.classList.remove("dim"); } else { el.classList.add("dim"); el.classList.remove("lit"); } }); }, [activeId, S.INTEGRATIONS, S.installedSkills]); // Global drag-over tracker — finds which skill card the cursor is over igUseEffect(() => { if (!dragId) { setDropHotCard(null); return; } const onMove = (e) => { const el = document.elementFromPoint(e.clientX, e.clientY); const card = el?.closest(".skill-card"); const sid = card?.getAttribute("data-skill-id"); setDropHotCard(sid || null); }; window.addEventListener("dragover", onMove); return () => window.removeEventListener("dragover", onMove); }, [dragId]); // Apply drop-hot class whenever dropHotCard changes igUseEffect(() => { document.querySelectorAll(".skill-card.drop-hot").forEach(el => el.classList.remove("drop-hot")); if (dropHotCard) { const el = document.querySelector(`.skill-card[data-skill-id="${dropHotCard}"]`); if (el) el.classList.add("drop-hot"); } }, [dropHotCard]); igUseEffect(() => { if (dragId) setOpen(true); }, [dragId]); const install = (intId) => { const r = S.installIntegration(intId); if (r.ok) { const intg = S.INTEGRATIONS.find(i => i.id === intId); const related = relatedSkillIds(intg, S); related.add(intId); requestAnimationFrame(() => { document.querySelectorAll(".skill-card").forEach(el => { const sid = el.getAttribute("data-skill-id"); if (sid && related.has(sid)) { el.classList.add("just-wired"); setTimeout(() => el.classList.remove("just-wired"), 1800); } }); }); } }; const activeIntg = activeId ? S.INTEGRATIONS.find(i => i.id === activeId) : null; const activeRelated = activeIntg ? [...relatedSkillIds(activeIntg, S)] : []; const connectedCount = S.INTEGRATIONS.filter(i => installedIds.has(i.id)).length; // Unified rail: one list, widens on open. Items hold y-position; text // content and chips fade in as horizontal space opens up. Search is // only wired when the rail is open — collapsed state renders all 16. const q = query.trim().toLowerCase(); const matches = (i) => !open || !q || i.name.toLowerCase().includes(q) || i.id.toLowerCase().includes(q) || (i.blurb || "").toLowerCase().includes(q); return ( ); } window.IntegrationRail = SkillPluginRail; window.IntegrationGallery = function() { return null; };