| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- (function() {
- const WS_URL = 'ws://' + window.location.host;
- let ws = null;
- let eventQueue = [];
- function connect() {
- ws = new WebSocket(WS_URL);
- ws.onopen = () => {
- // Send any queued events
- eventQueue.forEach(e => ws.send(JSON.stringify(e)));
- eventQueue = [];
- };
- ws.onmessage = (msg) => {
- const data = JSON.parse(msg.data);
- if (data.type === 'reload') {
- window.location.reload();
- }
- };
- ws.onclose = () => {
- // Reconnect after 1 second
- setTimeout(connect, 1000);
- };
- }
- function send(event) {
- event.timestamp = Date.now();
- if (ws && ws.readyState === WebSocket.OPEN) {
- ws.send(JSON.stringify(event));
- } else {
- eventQueue.push(event);
- }
- }
- // Auto-capture clicks on interactive elements
- document.addEventListener('click', (e) => {
- const target = e.target.closest('button, a, [data-choice], [role="button"], input[type="submit"]');
- if (!target) return;
- // Don't capture regular link navigation
- if (target.tagName === 'A' && !target.dataset.choice) return;
- e.preventDefault();
- send({
- type: 'click',
- text: target.textContent.trim(),
- choice: target.dataset.choice || null,
- id: target.id || null,
- className: target.className || null
- });
- });
- // Auto-capture form submissions
- document.addEventListener('submit', (e) => {
- e.preventDefault();
- const form = e.target;
- const formData = new FormData(form);
- const data = {};
- formData.forEach((value, key) => { data[key] = value; });
- send({
- type: 'submit',
- formId: form.id || null,
- formName: form.name || null,
- data: data
- });
- });
- // Auto-capture input changes (debounced)
- let inputTimeout = null;
- document.addEventListener('input', (e) => {
- const target = e.target;
- if (!target.matches('input, textarea, select')) return;
- clearTimeout(inputTimeout);
- inputTimeout = setTimeout(() => {
- send({
- type: 'input',
- name: target.name || null,
- id: target.id || null,
- value: target.value,
- inputType: target.type || target.tagName.toLowerCase()
- });
- }, 500); // 500ms debounce
- });
- // Send to Claude - triggers server to exit and return all events
- function sendToClaude(feedback) {
- send({
- type: 'send-to-claude',
- feedback: feedback || null
- });
- // Show confirmation to user
- document.body.innerHTML = `
- <div style="display: flex; align-items: center; justify-content: center; height: 100vh; font-family: system-ui, sans-serif;">
- <div style="text-align: center; color: #666;">
- <h2 style="color: #333;">✓ Sent to Claude</h2>
- <p>Return to the terminal to see Claude's response.</p>
- </div>
- </div>
- `;
- }
- // Expose for explicit use if needed
- window.brainstorm = {
- send: send,
- choice: (value, metadata = {}) => send({ type: 'choice', value, ...metadata }),
- sendToClaude: sendToClaude
- };
- connect();
- })();
|