helper.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. (function() {
  2. const WS_URL = 'ws://' + window.location.host;
  3. let ws = null;
  4. let eventQueue = [];
  5. function connect() {
  6. ws = new WebSocket(WS_URL);
  7. ws.onopen = () => {
  8. eventQueue.forEach(e => ws.send(JSON.stringify(e)));
  9. eventQueue = [];
  10. };
  11. ws.onmessage = (msg) => {
  12. const data = JSON.parse(msg.data);
  13. if (data.type === 'reload') {
  14. window.location.reload();
  15. }
  16. };
  17. ws.onclose = () => {
  18. setTimeout(connect, 1000);
  19. };
  20. }
  21. function sendEvent(event) {
  22. event.timestamp = Date.now();
  23. if (ws && ws.readyState === WebSocket.OPEN) {
  24. ws.send(JSON.stringify(event));
  25. } else {
  26. eventQueue.push(event);
  27. }
  28. }
  29. // Auto-capture clicks on interactive elements
  30. document.addEventListener('click', (e) => {
  31. const target = e.target.closest('button, a, [data-choice], [role="button"], input[type="submit"]');
  32. if (!target) return;
  33. // Don't capture regular link navigation
  34. if (target.tagName === 'A' && !target.dataset.choice) return;
  35. // Don't capture the Send feedback button (handled by send())
  36. if (target.id === 'send-feedback') return;
  37. e.preventDefault();
  38. sendEvent({
  39. type: 'click',
  40. text: target.textContent.trim(),
  41. choice: target.dataset.choice || null,
  42. id: target.id || null,
  43. className: target.className || null
  44. });
  45. });
  46. // Auto-capture form submissions
  47. document.addEventListener('submit', (e) => {
  48. e.preventDefault();
  49. const form = e.target;
  50. const formData = new FormData(form);
  51. const data = {};
  52. formData.forEach((value, key) => { data[key] = value; });
  53. sendEvent({
  54. type: 'submit',
  55. formId: form.id || null,
  56. formName: form.name || null,
  57. data: data
  58. });
  59. });
  60. // Auto-capture input changes (debounced)
  61. let inputTimeout = null;
  62. document.addEventListener('input', (e) => {
  63. const target = e.target;
  64. if (!target.matches('input, textarea, select')) return;
  65. clearTimeout(inputTimeout);
  66. inputTimeout = setTimeout(() => {
  67. sendEvent({
  68. type: 'input',
  69. name: target.name || null,
  70. id: target.id || null,
  71. value: target.value,
  72. inputType: target.type || target.tagName.toLowerCase()
  73. });
  74. }, 500);
  75. });
  76. // Send to Claude - triggers feedback delivery
  77. function sendToClaude(feedback) {
  78. sendEvent({
  79. type: 'send-to-claude',
  80. feedback: feedback || null
  81. });
  82. // Show themed confirmation page
  83. document.body.innerHTML = `
  84. <div style="display: flex; align-items: center; justify-content: center; height: 100vh; font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary, #f5f5f7);">
  85. <div style="text-align: center; color: var(--text-secondary, #86868b);">
  86. <h2 style="color: var(--text-primary, #1d1d1f); margin-bottom: 0.5rem;">Sent to Claude</h2>
  87. <p>Return to the terminal to see Claude's response.</p>
  88. </div>
  89. </div>
  90. `;
  91. }
  92. // Frame UI: selection tracking and feedback send
  93. window.selectedChoice = null;
  94. window.toggleSelect = function(el) {
  95. const container = el.closest('.options') || el.closest('.cards');
  96. if (container) {
  97. container.querySelectorAll('.option, .card').forEach(o => o.classList.remove('selected'));
  98. }
  99. el.classList.add('selected');
  100. window.selectedChoice = el.dataset.choice;
  101. };
  102. window.send = function() {
  103. const feedbackEl = document.getElementById('feedback');
  104. const feedback = feedbackEl ? feedbackEl.value.trim() : '';
  105. const payload = {};
  106. if (window.selectedChoice) payload.choice = window.selectedChoice;
  107. if (feedback) payload.feedback = feedback;
  108. if (Object.keys(payload).length === 0) return;
  109. sendToClaude(payload);
  110. if (feedbackEl) feedbackEl.value = '';
  111. };
  112. // Expose API for explicit use
  113. window.brainstorm = {
  114. send: sendEvent,
  115. choice: (value, metadata = {}) => sendEvent({ type: 'choice', value, ...metadata }),
  116. sendToClaude: sendToClaude
  117. };
  118. connect();
  119. })();