feat(webhooks): add WebhookView, events panel (SSE) and server event-store/stream

Author: mbertelsen

server/src/index.ts

@@ -72,12 +72,110 @@ app.post("/api/webhook/:userPath", (req: Request, res: Response) => {
     console.warn('Failed to log events', (err as Error).message);
   }
 
+  // Append events to in-memory store for this path
+  try {
+    const now = new Date().toISOString();
+    const records: EventRecord[] = events.map((e: any) => ({
+      id: e.id,
+      eventType: e.eventType,
+      timestamp: e.eventTime || now,
+      data: e.data,
+      raw: e,
+    }));
+
+    const existing = eventStore.get(userPath) || [];
+    // Newest at start
+    const combined = [...records.reverse(), ...existing];
+    // Trim to cap
+    const trimmed = combined.slice(0, EVENT_STORE_CAP);
+    eventStore.set(userPath, trimmed);
+  } catch (err) {
+    console.warn('Failed to store events in memory', (err as Error).message);
+  }
+
+  // Notify any SSE clients connected to this webhook path
+  try {
+    for (const e of events) {
+      const payload = { id: e.id, eventType: e.eventType, timestamp: e.eventTime || new Date().toISOString() };
+      sendSseToPath(userPath, payload);
+    }
+  } catch (err) {
+    console.warn('Failed to broadcast SSE', (err as Error).message);
+  }
+
   // TODO: integrate with persistence / user properties: look up which user has this key
   // and forward/enqueue events appropriately.
 
   return res.status(200).json({ received: events.length });
 });
 
+// In-memory event store per webhook path (newest items at start). This is ephemeral and
+// will be lost if the server restarts. We keep a modest cap per path.
+type EventRecord = {
+  id?: string;
+  eventType: string;
+  timestamp: string; // ISO
+  data: any;
+  raw: any;
+};
+
+const EVENT_STORE_CAP = 200;
+const eventStore = new Map<string, EventRecord[]>();
+
+// SSE clients per webhook path
+const sseClients = new Map<string, Set<Response>>();
+
+function sendSseToPath(userPath: string, payload: any) {
+  const clients = sseClients.get(userPath);
+  if (!clients) return;
+  const data = typeof payload === 'string' ? payload : JSON.stringify(payload);
+  for (const res of clients) {
+    try {
+      res.write(`data: ${data}\n\n`);
+    } catch (err) {
+      console.warn('Failed to write SSE to client', (err as Error).message);
+    }
+  }
+}
+
+// Return events for a specific webhook path (newest first). No auth is enforced here;
+// possession of the path acts as the access key. If you want stronger auth, wire this
+// up to your user system and verify ownership.
+app.get('/api/webhook/:userPath/events', (_req: Request, res: Response) => {
+  const userPath = _req.params.userPath;
+  const list = eventStore.get(userPath) || [];
+  return res.json({ count: list.length, events: list });
+});
+
+// Server-Sent Events stream for a webhook path.
+app.get('/api/webhook/:userPath/stream', (req: Request, res: Response) => {
+  const userPath = req.params.userPath;
+
+  // Set SSE headers
+  res.writeHead(200, {
+    'Content-Type': 'text/event-stream',
+    'Cache-Control': 'no-cache',
+    Connection: 'keep-alive',
+  });
+
+  // Send an initial comment to establish the stream
+  res.write(': connected\n\n');
+
+  // Register client
+  const set = sseClients.get(userPath) || new Set<Response>();
+  set.add(res);
+  sseClients.set(userPath, set);
+
+  req.on('close', () => {
+    // Remove client when they disconnect
+    const clients = sseClients.get(userPath);
+    if (clients) {
+      clients.delete(res);
+      if (clients.size === 0) sseClients.delete(userPath);
+    }
+  });
+});
+
 // Serve static frontend if present in the final image at '../editor-dist'
 const staticPath = path.join(__dirname, "..", "editor-dist");
 const FRONTEND_INDEX = path.join(staticPath, "index.html");

src/App.tsx

@@ -8,6 +8,7 @@ import { ScriptEditor } from './components/ScriptEditor';
 import { NodeEditor } from './components/NodeEditor';
 import { DialogManager } from './components/DialogManager';
 import { DocViewer } from './components/DocViewer';
+import WebhookView from './components/WebhookView';
 import { EnvironmentDebug } from './components/EnvironmentDebug';
 import { Activity, Step, ScriptData, isActivity, isStep, LogicNode } from './types';
 import { normalizeScript } from './normalizer';
@@ -697,11 +698,15 @@ export default function App() {
             )}
           </div>
         </div>
-      ) : (
+      ) : activeTab === 'documentation' ? (
         <div className="documentation-flex">
           <DocViewer />
         </div>
-      )}
+      ) : activeTab === 'webhook' ? (
+        <div className="documentation-flex">
+          <WebhookView />
+        </div>
+      ) : null}
     </div>
   );
 }

src/components/TabBar.css

@@ -0,0 +1,54 @@
+.tab-bar {
+  display: flex;
+  align-items: center;
+  background: #fff;
+}
+
+.tab-container {
+  display: flex;
+  gap: 8px;
+}
+
+.tab {
+  background: transparent;
+  border: none;
+  padding: 8px 12px;
+  cursor: pointer;
+  color: #333;
+}
+
+.tab.active {
+  border-bottom: 2px solid #0078d4;
+  font-weight: 600;
+}
+
+.webhook-panel {
+  padding: 24px;
+}
+
+.webhook-error {
+  color: #c92a2a;
+}
+
+.webhook-url-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  max-width: 600px;
+}
+
+.webhook-url-input {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.webhook-copy-button {
+  padding: 8px 12px;
+  background: #0078d4;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}

src/components/TabBar.tsx

@@ -1,27 +1,50 @@
 import React from 'react';
 
+import { useQuery } from 'urql';
+import { GET_USER_PROPERTIES_QUERY, APP_SCRIPT_APPLICATION } from '../graphql/userProperties';
+import WebhookView from './WebhookView';
+
+type TabKey = 'edit' | 'documentation' | 'webhook';
+
 interface TabBarProps {
-  activeTab: 'edit' | 'documentation';
-  onTabChange: (tab: 'edit' | 'documentation') => void;
+  activeTab: TabKey;
+  onTabChange: (tab: TabKey) => void;
 }
 
 export const TabBar: React.FC<TabBarProps> = ({ activeTab, onTabChange }) => {
+  const [result] = useQuery({
+    query: GET_USER_PROPERTIES_QUERY,
+    variables: { application: APP_SCRIPT_APPLICATION },
+  });
+
   return (
     <div className="tab-bar">
       <div className="tab-container">
-        <button 
+        <button
           className={`tab ${activeTab === 'edit' ? 'active' : ''}`}
           onClick={() => onTabChange('edit')}
         >
           Edit
         </button>
-        <button 
+        <button
           className={`tab ${activeTab === 'documentation' ? 'active' : ''}`}
           onClick={() => onTabChange('documentation')}
         >
           Documentation
         </button>
+        <button
+          className={`tab ${activeTab === 'webhook' ? 'active' : ''}`}
+          onClick={() => onTabChange('webhook')}
+        >
+          Webhook
+        </button>
       </div>
     </div>
   );
-};
+};
+export const TabBarContent: React.FC<{ activeTab: string }> = ({ activeTab }) => {
+  if (activeTab === 'webhook') return <WebhookView /> as any;
+  return null as any;
+};
+
+export default TabBar;

src/components/WebhookEventsPanel.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+
+type EventItem = {
+  id?: string;
+  eventType: string;
+  timestamp: string;
+};
+
+interface Props {
+  userPath: string;
+}
+
+export const WebhookEventsPanel: React.FC<Props> = ({ userPath }) => {
+  const [events, setEvents] = React.useState<EventItem[]>([]);
+  const [connected, setConnected] = React.useState(false);
+
+  // Fetch initial events
+  React.useEffect(() => {
+    if (!userPath) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const r = await fetch(`/api/webhook/${encodeURIComponent(userPath)}/events`);
+        if (!r.ok) throw new Error(await r.text());
+        const j = await r.json();
+        if (!cancelled && Array.isArray(j.events)) {
+          // ensure newest-first
+          setEvents(j.events.map((e: any) => ({ id: e.id, eventType: e.eventType, timestamp: e.timestamp })));
+        }
+      } catch (err) {
+        console.warn('Failed to load events', err);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [userPath]);
+
+  // SSE subscription
+  React.useEffect(() => {
+    if (!userPath) return;
+    let es: EventSource | null = null;
+    let reconnectTimer: number | null = null;
+
+    const connect = () => {
+      es = new EventSource(`/api/webhook/${encodeURIComponent(userPath)}/stream`);
+      es.onopen = () => {
+        setConnected(true);
+      };
+      es.onerror = () => {
+        setConnected(false);
+        // Try to reconnect after a short delay
+        if (es) es.close();
+        reconnectTimer = window.setTimeout(() => connect(), 3000);
+      };
+      es.onmessage = (ev) => {
+        try {
+          const data = JSON.parse(ev.data);
+          // Prepend newest-first
+          setEvents(prev => [{ id: data.id, eventType: data.eventType, timestamp: data.timestamp }, ...prev]);
+        } catch (err) {
+          console.warn('Invalid SSE payload', err);
+        }
+      };
+    };
+
+    connect();
+
+    return () => {
+      if (reconnectTimer) window.clearTimeout(reconnectTimer);
+      if (es) es.close();
+      setConnected(false);
+    };
+  }, [userPath]);
+
+  return (
+    <div style={{ marginTop: 16 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+        <strong>Events</strong>
+        <span style={{ color: connected ? 'green' : 'gray' }}>{connected ? 'live' : 'disconnected'}</span>
+      </div>
+      <div style={{ maxHeight: 360, overflow: 'auto', border: '1px solid #eee', padding: 8 }}>
+        {events.length === 0 ? (
+          <div>No events yet.</div>
+        ) : (
+          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+            {events.map((e, idx) => (
+              <li key={e.id || idx} style={{ padding: '6px 8px', borderBottom: '1px solid #f1f1f1' }}>
+                <div style={{ fontSize: 12, color: '#666' }}>{new Date(e.timestamp).toLocaleString()}</div>
+                <div style={{ fontWeight: 600 }}>{e.eventType}</div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default WebhookEventsPanel;