@particle-academy/agent-integrations 0.12.0 → 0.14.0

package/dist/styles.css

@@ -385,4 +385,160 @@
     opacity: 1;
   }
 }
+.fai-connect {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
+}
+.fai-connect__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  color: #fff;
+  background: #18181b;
+  transition:
+    background 120ms ease,
+    opacity 120ms ease,
+    box-shadow 120ms ease;
+}
+.fai-connect__btn:hover {
+  opacity: 0.92;
+}
+.fai-connect__btn:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+.fai-connect__glyph {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+}
+.fai-connect__btn--claude-web {
+  background: #cc785c;
+}
+.fai-connect__btn--claude-desktop {
+  background: #cc785c;
+}
+.fai-connect__btn--cursor {
+  background: #111827;
+}
+.fai-connect__btn--vscode {
+  background: #0066b8;
+}
+.fai-connect__btn--manual {
+  background: #3f3f46;
+}
+.fai-connect__manual-wrap {
+  position: relative;
+  display: inline-flex;
+}
+.fai-connect__popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 50;
+  width: min(420px, 80vw);
+  background: #fff;
+  color: #18181b;
+  border: 1px solid #e4e4e7;
+  border-radius: 10px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+  padding: 12px;
+}
+.fai-connect__popover-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+.fai-connect__popover-close {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  color: #71717a;
+  padding: 0 4px;
+}
+.fai-connect__popover-hint {
+  font-size: 11px;
+  color: #52525b;
+  margin: 0 0 8px;
+}
+.fai-connect__popover-hint code {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  background: #f4f4f5;
+  padding: 1px 4px;
+  border-radius: 4px;
+}
+.fai-connect__snippet {
+  margin: 0 0 8px;
+  max-height: 220px;
+  overflow: auto;
+  background: #18181b;
+  color: #e4e4e7;
+  border-radius: 8px;
+  padding: 10px;
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  white-space: pre;
+}
+.fai-connect__copy-btn {
+  border: 1px solid #e4e4e7;
+  border-radius: 7px;
+  background: #fafafa;
+  color: #18181b;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 5px 10px;
+}
+.fai-connect__copy-btn:hover {
+  background: #f4f4f5;
+}
+@media (prefers-color-scheme: dark) {
+  .fai-connect__popover {
+    background: #18181b;
+    color: #fafafa;
+    border-color: #3f3f46;
+  }
+  .fai-connect__popover-hint {
+    color: #a1a1aa;
+  }
+  .fai-connect__popover-hint code {
+    background: #27272a;
+  }
+  .fai-connect__copy-btn {
+    background: #27272a;
+    color: #fafafa;
+    border-color: #3f3f46;
+  }
+  .fai-connect__copy-btn:hover {
+    background: #3f3f46;
+  }
+}
 /*# sourceMappingURL=styles.css.map */

package/dist/styles.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/* @particle-academy/agent-integrations — minimal styles, host app provides tailwind/theme. */\n\n.fai-panel {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  color: #18181b;\n  border-radius: 12px;\n  border: 1px solid #e4e4e7;\n  font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  overflow: hidden;\n}\n@media (prefers-color-scheme: dark) {\n  .fai-panel { background: #18181b; color: #fafafa; border-color: #3f3f46; }\n}\n.fai-panel__header {\n  display: flex; align-items: center; gap: 10px;\n  padding: 10px 12px; border-bottom: 1px solid #e4e4e7;\n}\n@media (prefers-color-scheme: dark) { .fai-panel__header { border-color: #3f3f46; } }\n.fai-panel__avatar {\n  width: 32px; height: 32px; border-radius: 50%;\n  display: inline-flex; align-items: center; justify-content: center;\n  color: white; font-weight: 600; font-size: 14px;\n}\n.fai-panel__title { display: flex; flex-direction: column; line-height: 1.1; flex: 1; }\n.fai-panel__subtitle { font-size: 11px; opacity: 0.6; }\n.fai-panel__actions { display: flex; gap: 6px; }\n.fai-panel__stream {\n  flex: 1; overflow: auto; padding: 8px 12px;\n  display: flex; flex-direction: column; gap: 6px;\n}\n.fai-panel__empty { font-size: 12px; opacity: 0.5; margin: auto; }\n.fai-row {\n  font-size: 12px;\n  border-radius: 6px;\n  padding: 6px 8px;\n  background: rgba(244, 244, 245, 0.6);\n}\n@media (prefers-color-scheme: dark) { .fai-row { background: rgba(63, 63, 70, 0.4); } }\n.fai-row--tool { border-left: 3px solid #a855f7; }\n.fai-row--message { border-left: 3px solid #3b82f6; }\n.fai-row--info { border-left: 3px solid #71717a; }\n.fai-row--error { border-left: 3px solid #ef4444; background: rgba(254, 226, 226, 0.4); }\n.fai-row__meta { display: flex; justify-content: space-between; opacity: 0.6; font-size: 10px; }\n.fai-row__source { font-family: ui-monospace, monospace; }\n.fai-row__text { white-space: pre-wrap; }\n.fai-row__detail summary { cursor: pointer; opacity: 0.7; font-size: 11px; margin-top: 4px; }\n.fai-row__detail pre {\n  font-size: 11px; margin: 4px 0 0; padding: 6px;\n  background: rgba(0,0,0,0.06); border-radius: 4px; overflow: auto;\n  max-height: 200px;\n}\n.fai-panel__composer {\n  display: flex; gap: 6px; padding: 8px;\n  border-top: 1px solid #e4e4e7;\n}\n@media (prefers-color-scheme: dark) { .fai-panel__composer { border-color: #3f3f46; } }\n.fai-panel__input {\n  flex: 1;\n  resize: none;\n  border-radius: 6px;\n  border: 1px solid #d4d4d8;\n  padding: 6px 8px;\n  font: inherit;\n  background: transparent;\n  color: inherit;\n}\n.fai-panel__input:focus { outline: 2px solid #a855f7; outline-offset: -1px; }\n.fai-panel__send {\n  align-self: stretch;\n  padding: 0 14px;\n  border: 0; border-radius: 6px;\n  background: #a855f7; color: white;\n  cursor: pointer; font-weight: 500;\n}\n.fai-panel__send:disabled { opacity: 0.5; cursor: default; }\n\n/* Cursor */\n.fai-cursor {\n  transition: left 500ms cubic-bezier(0.22, 1, 0.36, 1),\n              top 500ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n@media (prefers-reduced-motion: reduce) { .fai-cursor { transition: none; } }\n.fai-cursor__tag {\n  position: absolute; left: 18px; top: 14px;\n  color: white;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 11px; font-family: system-ui, sans-serif;\n  white-space: nowrap;\n}\n.fai-cursor__status { font-style: normal; opacity: 0.85; }\n\n/* Highlight pulse */\n@keyframes fai-pulse {\n  0%   { opacity: 0; transform: scale(0.96); }\n  20%  { opacity: 1; transform: scale(1.03); }\n  100% { opacity: 0; transform: scale(1); }\n}\n\n/* ShareControls */\n.fai-share {\n  border: 1px solid #e4e4e7; border-radius: 12px; padding: 12px;\n  background: white; color: #18181b;\n  font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13px;\n}\n@media (prefers-color-scheme: dark) { .fai-share { background: #18181b; color: #fafafa; border-color: #3f3f46; } }\n.fai-share--idle { display: flex; flex-direction: column; gap: 6px; }\n.fai-share__start { align-self: flex-start; padding: 8px 14px; border: 0; border-radius: 6px; background: #a855f7; color: white; font-weight: 500; cursor: pointer; }\n.fai-share__hint { margin: 0; opacity: 0.7; font-size: 12px; }\n.fai-share__header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }\n.fai-share__id { display: block; opacity: 0.7; font-size: 11px; margin-top: 2px; }\n.fai-share__id code { font-family: ui-monospace, monospace; }\n.fai-share__header-actions { display: flex; gap: 8px; align-items: center; }\n.fai-share__status { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(34, 197, 94, 0.15); color: #16a34a; }\n.fai-share__stop { border: 1px solid #d4d4d8; background: transparent; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; color: inherit; }\n.fai-share__tabs { display: flex; gap: 4px; margin-bottom: 8px; }\n.fai-share__tab { border: 0; background: transparent; cursor: pointer; padding: 4px 10px; border-radius: 4px; color: inherit; font-size: 12px; }\n.fai-share__tab.is-active { background: rgba(168, 85, 247, 0.12); color: #a855f7; }\n.fai-share__panel-label { font-size: 11px; opacity: 0.7; margin-bottom: 4px; }\n.fai-share__copy { display: flex; gap: 6px; align-items: stretch; }\n.fai-share__pre { flex: 1; margin: 0; padding: 8px 10px; background: rgba(0,0,0,0.05); border-radius: 6px; font-family: ui-monospace, monospace; font-size: 11px; white-space: nowrap; overflow: auto; }\n.fai-share__pre.is-multi { white-space: pre; max-height: 240px; }\n.fai-share__copy-btn { border: 1px solid #d4d4d8; background: transparent; cursor: pointer; border-radius: 6px; padding: 0 12px; color: inherit; font-size: 12px; }\n\n/* === Cross-package agent presence === */\n/*\n * Apply `.agent-focused-element` to any DOM node that's currently being\n * touched by an agent. The CSS variables let hosts override the agent's\n * accent without touching the rule. Bridges typically apply this class\n * via a brief side-effect when their tools fire.\n */\n.agent-focused-element {\n  --agent-color: #a855f7;\n  position: relative;\n  outline: 2px solid var(--agent-color);\n  outline-offset: 2px;\n  border-radius: 4px;\n  animation: agent-focus-pulse 1500ms ease-out forwards;\n}\n@keyframes agent-focus-pulse {\n  0%   { box-shadow: 0 0 0 0 var(--agent-color); }\n  40%  { box-shadow: 0 0 0 6px rgba(168, 85, 247, 0.18); }\n  100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); outline-color: transparent; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .agent-focused-element { animation: none; }\n}\n\n/* Small badge hosts can drop next to an element to label \"Agent active\". */\n.agent-active-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  background: var(--agent-color, #a855f7);\n  color: white;\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 11px; font-weight: 500;\n  padding: 2px 6px; border-radius: 999px;\n  vertical-align: middle;\n}\n.agent-active-badge::before {\n  content: \"\";\n  width: 6px; height: 6px;\n  border-radius: 50%;\n  background: white;\n  animation: agent-active-blink 1.4s ease-in-out infinite;\n}\n@keyframes agent-active-blink {\n  0%, 100% { opacity: 0.4; }\n  50%      { opacity: 1; }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/* @particle-academy/agent-integrations — minimal styles, host app provides tailwind/theme. */\n\n.fai-panel {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  color: #18181b;\n  border-radius: 12px;\n  border: 1px solid #e4e4e7;\n  font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  overflow: hidden;\n}\n@media (prefers-color-scheme: dark) {\n  .fai-panel { background: #18181b; color: #fafafa; border-color: #3f3f46; }\n}\n.fai-panel__header {\n  display: flex; align-items: center; gap: 10px;\n  padding: 10px 12px; border-bottom: 1px solid #e4e4e7;\n}\n@media (prefers-color-scheme: dark) { .fai-panel__header { border-color: #3f3f46; } }\n.fai-panel__avatar {\n  width: 32px; height: 32px; border-radius: 50%;\n  display: inline-flex; align-items: center; justify-content: center;\n  color: white; font-weight: 600; font-size: 14px;\n}\n.fai-panel__title { display: flex; flex-direction: column; line-height: 1.1; flex: 1; }\n.fai-panel__subtitle { font-size: 11px; opacity: 0.6; }\n.fai-panel__actions { display: flex; gap: 6px; }\n.fai-panel__stream {\n  flex: 1; overflow: auto; padding: 8px 12px;\n  display: flex; flex-direction: column; gap: 6px;\n}\n.fai-panel__empty { font-size: 12px; opacity: 0.5; margin: auto; }\n.fai-row {\n  font-size: 12px;\n  border-radius: 6px;\n  padding: 6px 8px;\n  background: rgba(244, 244, 245, 0.6);\n}\n@media (prefers-color-scheme: dark) { .fai-row { background: rgba(63, 63, 70, 0.4); } }\n.fai-row--tool { border-left: 3px solid #a855f7; }\n.fai-row--message { border-left: 3px solid #3b82f6; }\n.fai-row--info { border-left: 3px solid #71717a; }\n.fai-row--error { border-left: 3px solid #ef4444; background: rgba(254, 226, 226, 0.4); }\n.fai-row__meta { display: flex; justify-content: space-between; opacity: 0.6; font-size: 10px; }\n.fai-row__source { font-family: ui-monospace, monospace; }\n.fai-row__text { white-space: pre-wrap; }\n.fai-row__detail summary { cursor: pointer; opacity: 0.7; font-size: 11px; margin-top: 4px; }\n.fai-row__detail pre {\n  font-size: 11px; margin: 4px 0 0; padding: 6px;\n  background: rgba(0,0,0,0.06); border-radius: 4px; overflow: auto;\n  max-height: 200px;\n}\n.fai-panel__composer {\n  display: flex; gap: 6px; padding: 8px;\n  border-top: 1px solid #e4e4e7;\n}\n@media (prefers-color-scheme: dark) { .fai-panel__composer { border-color: #3f3f46; } }\n.fai-panel__input {\n  flex: 1;\n  resize: none;\n  border-radius: 6px;\n  border: 1px solid #d4d4d8;\n  padding: 6px 8px;\n  font: inherit;\n  background: transparent;\n  color: inherit;\n}\n.fai-panel__input:focus { outline: 2px solid #a855f7; outline-offset: -1px; }\n.fai-panel__send {\n  align-self: stretch;\n  padding: 0 14px;\n  border: 0; border-radius: 6px;\n  background: #a855f7; color: white;\n  cursor: pointer; font-weight: 500;\n}\n.fai-panel__send:disabled { opacity: 0.5; cursor: default; }\n\n/* Cursor */\n.fai-cursor {\n  transition: left 500ms cubic-bezier(0.22, 1, 0.36, 1),\n              top 500ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n@media (prefers-reduced-motion: reduce) { .fai-cursor { transition: none; } }\n.fai-cursor__tag {\n  position: absolute; left: 18px; top: 14px;\n  color: white;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 11px; font-family: system-ui, sans-serif;\n  white-space: nowrap;\n}\n.fai-cursor__status { font-style: normal; opacity: 0.85; }\n\n/* Highlight pulse */\n@keyframes fai-pulse {\n  0%   { opacity: 0; transform: scale(0.96); }\n  20%  { opacity: 1; transform: scale(1.03); }\n  100% { opacity: 0; transform: scale(1); }\n}\n\n/* ShareControls */\n.fai-share {\n  border: 1px solid #e4e4e7; border-radius: 12px; padding: 12px;\n  background: white; color: #18181b;\n  font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13px;\n}\n@media (prefers-color-scheme: dark) { .fai-share { background: #18181b; color: #fafafa; border-color: #3f3f46; } }\n.fai-share--idle { display: flex; flex-direction: column; gap: 6px; }\n.fai-share__start { align-self: flex-start; padding: 8px 14px; border: 0; border-radius: 6px; background: #a855f7; color: white; font-weight: 500; cursor: pointer; }\n.fai-share__hint { margin: 0; opacity: 0.7; font-size: 12px; }\n.fai-share__header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }\n.fai-share__id { display: block; opacity: 0.7; font-size: 11px; margin-top: 2px; }\n.fai-share__id code { font-family: ui-monospace, monospace; }\n.fai-share__header-actions { display: flex; gap: 8px; align-items: center; }\n.fai-share__status { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(34, 197, 94, 0.15); color: #16a34a; }\n.fai-share__stop { border: 1px solid #d4d4d8; background: transparent; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; color: inherit; }\n.fai-share__tabs { display: flex; gap: 4px; margin-bottom: 8px; }\n.fai-share__tab { border: 0; background: transparent; cursor: pointer; padding: 4px 10px; border-radius: 4px; color: inherit; font-size: 12px; }\n.fai-share__tab.is-active { background: rgba(168, 85, 247, 0.12); color: #a855f7; }\n.fai-share__panel-label { font-size: 11px; opacity: 0.7; margin-bottom: 4px; }\n.fai-share__copy { display: flex; gap: 6px; align-items: stretch; }\n.fai-share__pre { flex: 1; margin: 0; padding: 8px 10px; background: rgba(0,0,0,0.05); border-radius: 6px; font-family: ui-monospace, monospace; font-size: 11px; white-space: nowrap; overflow: auto; }\n.fai-share__pre.is-multi { white-space: pre; max-height: 240px; }\n.fai-share__copy-btn { border: 1px solid #d4d4d8; background: transparent; cursor: pointer; border-radius: 6px; padding: 0 12px; color: inherit; font-size: 12px; }\n\n/* === Cross-package agent presence === */\n/*\n * Apply `.agent-focused-element` to any DOM node that's currently being\n * touched by an agent. The CSS variables let hosts override the agent's\n * accent without touching the rule. Bridges typically apply this class\n * via a brief side-effect when their tools fire.\n */\n.agent-focused-element {\n  --agent-color: #a855f7;\n  position: relative;\n  outline: 2px solid var(--agent-color);\n  outline-offset: 2px;\n  border-radius: 4px;\n  animation: agent-focus-pulse 1500ms ease-out forwards;\n}\n@keyframes agent-focus-pulse {\n  0%   { box-shadow: 0 0 0 0 var(--agent-color); }\n  40%  { box-shadow: 0 0 0 6px rgba(168, 85, 247, 0.18); }\n  100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); outline-color: transparent; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .agent-focused-element { animation: none; }\n}\n\n/* Small badge hosts can drop next to an element to label \"Agent active\". */\n.agent-active-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  background: var(--agent-color, #a855f7);\n  color: white;\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: 11px; font-weight: 500;\n  padding: 2px 6px; border-radius: 999px;\n  vertical-align: middle;\n}\n.agent-active-badge::before {\n  content: \"\";\n  width: 6px; height: 6px;\n  border-radius: 50%;\n  background: white;\n  animation: agent-active-blink 1.4s ease-in-out infinite;\n}\n@keyframes agent-active-blink {\n  0%, 100% { opacity: 0.4; }\n  50%      { opacity: 1; }\n}\n\n/* ── Connector buttons (ConnectorButtons) ─────────────────────────────────── */\n.fai-connect {\n  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;\n  font-family: ui-sans-serif, system-ui, sans-serif;\n}\n.fai-connect__btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  border: 1px solid transparent; border-radius: 8px;\n  padding: 6px 12px;\n  font-size: 12px; font-weight: 500; line-height: 1;\n  text-decoration: none; cursor: pointer;\n  color: #fff; background: #18181b;\n  transition: background 120ms ease, opacity 120ms ease, box-shadow 120ms ease;\n}\n.fai-connect__btn:hover { opacity: 0.92; }\n.fai-connect__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.fai-connect__glyph { width: 14px; height: 14px; flex: 0 0 auto; }\n.fai-connect__btn--claude-web    { background: #cc785c; }\n.fai-connect__btn--claude-desktop{ background: #cc785c; }\n.fai-connect__btn--cursor        { background: #111827; }\n.fai-connect__btn--vscode        { background: #0066b8; }\n.fai-connect__btn--manual        { background: #3f3f46; }\n\n.fai-connect__manual-wrap { position: relative; display: inline-flex; }\n.fai-connect__popover {\n  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;\n  width: min(420px, 80vw);\n  background: #fff; color: #18181b;\n  border: 1px solid #e4e4e7; border-radius: 10px;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);\n  padding: 12px;\n}\n.fai-connect__popover-head {\n  display: flex; align-items: center; justify-content: space-between;\n  font-size: 12px; font-weight: 600; margin-bottom: 6px;\n}\n.fai-connect__popover-close {\n  border: none; background: transparent; cursor: pointer;\n  font-size: 16px; line-height: 1; color: #71717a; padding: 0 4px;\n}\n.fai-connect__popover-hint { font-size: 11px; color: #52525b; margin: 0 0 8px; }\n.fai-connect__popover-hint code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  background: #f4f4f5; padding: 1px 4px; border-radius: 4px;\n}\n.fai-connect__snippet {\n  margin: 0 0 8px; max-height: 220px; overflow: auto;\n  background: #18181b; color: #e4e4e7;\n  border-radius: 8px; padding: 10px;\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11px; line-height: 1.5; white-space: pre;\n}\n.fai-connect__copy-btn {\n  border: 1px solid #e4e4e7; border-radius: 7px;\n  background: #fafafa; color: #18181b; cursor: pointer;\n  font-size: 11px; font-weight: 500; padding: 5px 10px;\n}\n.fai-connect__copy-btn:hover { background: #f4f4f5; }\n\n@media (prefers-color-scheme: dark) {\n  .fai-connect__popover { background: #18181b; color: #fafafa; border-color: #3f3f46; }\n  .fai-connect__popover-hint { color: #a1a1aa; }\n  .fai-connect__popover-hint code { background: #27272a; }\n  .fai-connect__copy-btn { background: #27272a; color: #fafafa; border-color: #3f3f46; }\n  .fai-connect__copy-btn:hover { background: #3f3f46; }\n}\n"],"mappings":"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","names":[]}

package/docs/connectors.md

@@ -0,0 +1,118 @@
+# Connector builder — per-client MCP install artifacts
+
+Every app that exposes an MCP server has to ship "Add to Claude / Cursor / VS
+Code" affordances and (for Claude Desktop) a `.mcpb` bundle. Each host wants the
+server handed to it differently, and each format is subtly wrong the first time.
+This module is the single source of truth for those formats — a runtime React
+component plus a build-time `.mcpb` helper.
+
+```ts
+import {
+  ConnectorButtons,                 // React buttons
+  buildCursorDeeplink,              // pure builders
+  buildVscodeDeeplink,
+  buildManualConfigSnippet,
+} from "@particle-academy/agent-integrations";
+
+import { writeMcpbBundle } from "@particle-academy/agent-integrations/connectors/build"; // Node only
+```
+
+## What each client actually needs
+
+| Client | Mechanism | Notes |
+|---|---|---|
+| `claude-web` | **copy URL + open** the Connectors page | Claude has **no install deeplink** (web or Desktop). Best a button can do is copy the URL and open `claude.ai/settings/connectors` for a manual "Add custom connector". |
+| `claude-desktop` | **download a `.mcpb`** | The only double-click path. Build it with `writeMcpbBundle` (below). |
+| `cursor` | **deeplink** | `cursor://anysphere.cursor-deeplink/mcp/install?name=&config=<base64>` — base64 of `{"url":"…"}` for an HTTP server (no `type`/`transport`). |
+| `vscode` | **deeplink** | `vscode://mcp/install?<urlencoded-json>` — URL-encoded JSON `{name,url}` (NOT base64; different from Cursor). |
+| `manual` | **JSON snippet** | A `claude_desktop_config.json` entry wrapping the URL with `npx -y mcp-remote <url>` (stdio clients can't take an HTTP URL). |
+
+## Runtime — `<ConnectorButtons>`
+
+```tsx
+import { ConnectorButtons } from "@particle-academy/agent-integrations";
+import "@particle-academy/agent-integrations/styles.css";
+
+<ConnectorButtons
+  serverName="Decksmith"
+  mcpUrl="https://decksmith.dev/mcp"
+  mcpbDownloadUrl="/decksmith.mcpb"   // optional — enables the Claude Desktop button
+  onCopy={(target) => toast(`Copied — paste in ${target}`)}
+/>
+```
+
+The component owns brand glyphs, copy/feedback states, and the manual-config
+popover. Customize which buttons render and their labels:
+
+```tsx
+<ConnectorButtons
+  serverName="Decksmith"
+  mcpUrl="https://decksmith.dev/mcp"
+  clients={["cursor", "vscode", "manual"]}
+  labels={{ cursor: "Open in Cursor" }}
+  vscodeInsiders
+  claudeConnectorsUrl="https://claude.ai/settings/connectors"
+/>
+```
+
+`clients` defaults to `["claude-web", "cursor", "vscode", "manual"]`, plus
+`"claude-desktop"` when `mcpbDownloadUrl` is set. A `"claude-desktop"` entry with
+no bundle URL is skipped.
+
+### Just want the URLs?
+
+The builders are pure and framework-agnostic — render your own buttons:
+
+```ts
+import {
+  buildCursorDeeplink,
+  buildVscodeDeeplink,
+  buildManualConfigSnippet,
+  CLAUDE_CONNECTORS_URL,
+} from "@particle-academy/agent-integrations";
+
+const server = { name: "Decksmith", url: "https://decksmith.dev/mcp" };
+buildCursorDeeplink(server);        // cursor://…
+buildVscodeDeeplink(server);        // vscode://…
+buildManualConfigSnippet(server);   // claude_desktop_config.json JSON
+```
+
+## Build — `writeMcpbBundle()`
+
+`.mcpb` (Claude Desktop Extensions) is **stdio-only** — there is no
+`type: "http"`. To bundle a remote server you ship a thin `node` proxy whose
+`mcp_config` runs `npx -y mcp-remote <url>`. This helper writes the manifest +
+the (validator-required) proxy stub and packs them with the official
+`@anthropic-ai/mcpb` CLI.
+
+```ts
+// scripts/build-mcpb.mjs — run at build time (needs Node 18+)
+import { writeMcpbBundle } from "@particle-academy/agent-integrations/connectors/build";
+
+await writeMcpbBundle({
+  outFile: "public/decksmith.mcpb",
+  manifest: {
+    name: "decksmith",
+    display_name: "Decksmith",
+    version: "0.2.0",
+    description: "Agent-driven slide deck builder.",
+    author: { name: "Particle Academy", url: "https://decksmith.dev" },
+    mcpUrl: "https://decksmith.dev/mcp",
+    tools: [{ name: "start_session", description: "Lock onto a deck." }],
+  },
+});
+```
+
+Options: `mcpbBin` (override the default `npx -y @anthropic-ai/mcpb`, e.g. a
+locally installed binary), `validate` (default `true`), `keepWorkDir`, `cwd`.
+
+> **Future-proof.** When MCPB grows a real `type: "http"`, drop the proxy and
+> point the manifest straight at the URL — your call site here doesn't change.
+
+## Caveats baked in
+
+- The `.mcpb` route needs **Node 18+** on the end user's machine (for `npx` /
+  `mcp-remote`) and adds a process hop Claude → node → mcp-remote → server.
+- Claude's "one-click install via URL" does not exist; don't promise it.
+- OAuth-protected remote servers (Claude Desktop's callback at
+  `claude.ai/api/mcp/auth_callback`) aren't handled yet — room left for it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/agent-integrations",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "MCP-driven agent presence in collab sessions: per-session micro-MCP server, pluggable bridges to fancy-* packages, and agent UX components (panel + on-canvas cursor).",
   "repository": {
     "type": "git",
@@ -157,6 +157,26 @@
         "default": "./dist/sheets-adapter.cjs"
       }
     },
+    "./connectors": {
+      "import": {
+        "types": "./dist/connectors/index.d.ts",
+        "default": "./dist/connectors.js"
+      },
+      "require": {
+        "types": "./dist/connectors/index.d.cts",
+        "default": "./dist/connectors.cjs"
+      }
+    },
+    "./connectors/build": {
+      "import": {
+        "types": "./dist/connectors/build.d.ts",
+        "default": "./dist/connectors-build.js"
+      },
+      "require": {
+        "types": "./dist/connectors/build.d.cts",
+        "default": "./dist/connectors-build.cjs"
+      }
+    },
     "./components/shared-whiteboard": {
       "import": {
         "types": "./dist/components/SharedWhiteboard/index.d.ts",
@@ -218,6 +238,8 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "clean": "rm -rf dist",
     "prepublishOnly": "tsup"
   },
@@ -259,13 +281,17 @@
   "devDependencies": {
     "@particle-academy/fancy-slides": "^0.12.0",
     "@particle-academy/fancy-whiteboard": "^0.2.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.0.0",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "jsdom": "^25.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tsup": "^8.0.0",
-    "typescript": "^5.7.0"
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"