Update app.js

app.js

@@ -1,10 +1,13 @@
 import express from "express";
 import { createServer } from "http";
+import { WebSocketServer } from "ws";
 import { randomUUID } from "crypto";
 
 const app = express();
 const server = createServer(app);
+const wss = new WebSocketServer({ server, path: "/audio-stream" });
 
+// ── FIX: Disable default index.html serving so it doesn't shadow our dashboard ──
 app.use(express.static("public", { index: false }));
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
@@ -14,7 +17,10 @@ const TELNYX_API_KEY = process.env.TELNYX_API_KEY;
 const TELNYX_CONNECTION_ID = process.env.TELNYX_CONNECTION_ID;
 const TELNYX_FROM_NUMBER = process.env.TELNYX_FROM_NUMBER;
 
-const log = (tag, ...args) => console.log(`[${new Date().toISOString()}] [${tag}]`, ...args);
+const log = (tag, ...args) => {
+  const time = new Date().toISOString();
+  console.log(`[${time}] [${tag}]`, ...args);
+};
 
 // ─── IN-MEMORY DB (Strictly for this Demo) ───
 let callLogs = [];
@@ -32,8 +38,8 @@ app.get("/", (req, res) => {
       <title>Telecom Layer Demo</title>
       <script src="https://cdn.tailwindcss.com"></script>
       <script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
-  <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
-  <script src="https://unpkg.com/@babel/standalone@7.23.10/babel.min.js"></script>
+      <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
+      <script src="https://unpkg.com/@babel/standalone@7.23.10/babel.min.js"></script>
     </head>
     <body class="bg-gray-900 text-gray-100 p-8 font-sans">
       <div id="root" class="max-w-4xl mx-auto"></div>
@@ -65,42 +71,42 @@ app.get("/", (req, res) => {
           };
 
           return (
-            <div class="space-y-8">
-              <h1 class="text-3xl font-bold border-b border-gray-700 pb-4">Telecom Layer & Ambience Test</h1>
+            <div className="space-y-8">
+              <h1 className="text-3xl font-bold border-b border-gray-700 pb-4">Telecom Layer & Ambience Test</h1>
               
-              <div class="bg-gray-800 p-6 rounded-lg shadow-lg flex gap-4 items-end">
-                <div class="flex-1">
-                  <label class="block text-sm text-gray-400 mb-1">Target Phone Number</label>
-                  <input type="text" value={targetNumber} onChange={e => setTargetNumber(e.target.value)} class="w-full bg-gray-900 border border-gray-700 rounded p-2 text-white" />
+              <div className="bg-gray-800 p-6 rounded-lg shadow-lg flex gap-4 items-end">
+                <div className="flex-1">
+                  <label className="block text-sm text-gray-400 mb-1">Target Phone Number</label>
+                  <input type="text" value={targetNumber} onChange={e => setTargetNumber(e.target.value)} className="w-full bg-gray-900 border border-gray-700 rounded p-2 text-white outline-none focus:border-blue-500" />
                 </div>
-                <button onClick={dial} class="bg-blue-600 hover:bg-blue-500 px-8 py-2 rounded font-bold transition">Test Call</button>
+                <button onClick={dial} className="bg-blue-600 hover:bg-blue-500 px-8 py-2 rounded font-bold transition">Test Call</button>
               </div>
-              {status && <div class="text-sm text-yellow-400">{status}</div>}
+              {status && <div className="text-sm text-yellow-400">{status}</div>}
 
-              <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
-                <table class="w-full text-left">
-                  <thead class="bg-gray-900 text-gray-400 text-sm">
-                    <tr><th class="p-4">Call ID</th><th class="p-4">Number</th><th class="p-4">Status</th><th class="p-4">Recording</th></tr>
+              <div className="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
+                <table className="w-full text-left">
+                  <thead className="bg-gray-900 text-gray-400 text-sm">
+                    <tr><th className="p-4">Call ID</th><th className="p-4">Number</th><th className="p-4">Status</th><th className="p-4">Recording</th></tr>
                   </thead>
-                  <tbody class="divide-y divide-gray-700">
+                  <tbody className="divide-y divide-gray-700">
                     {logs.map(log => (
                       <tr key={log.id}>
-                        <td class="p-4 text-xs font-mono text-gray-500">{log.call_control_id.slice(0,8)}...</td>
-                        <td class="p-4 font-mono">{log.target_number}</td>
-                        <td class="p-4">
-                          <span class={\`px-2 py-1 rounded text-xs \${log.status === 'completed' ? 'bg-green-900 text-green-300' : 'bg-yellow-900 text-yellow-300'}\`}>
+                        <td className="p-4 text-xs font-mono text-gray-500">{log.call_control_id.slice(0,8)}...</td>
+                        <td className="p-4 font-mono">{log.target_number}</td>
+                        <td className="p-4">
+                          <span className={\`px-2 py-1 rounded text-xs \${log.status === 'completed' ? 'bg-green-900 text-green-300' : 'bg-yellow-900 text-yellow-300'}\`}>
                             {log.status}
                           </span>
                         </td>
-                        <td class="p-4">
+                        <td className="p-4">
                           {log.recording_url ? 
-                            <audio controls src={log.recording_url} class="h-8 w-48"></audio> 
-                            : <span class="text-gray-500 text-sm">Waiting for hangup...</span>
+                            <audio controls src={log.recording_url} className="h-8 w-48"></audio> 
+                            : <span className="text-gray-500 text-sm">Waiting for hangup...</span>
                           }
                         </td>
                       </tr>
                     ))}
-                    {logs.length === 0 && <tr><td colSpan="4" class="p-4 text-center text-gray-500">No calls yet</td></tr>}
+                    {logs.length === 0 && <tr><td colSpan="4" className="p-4 text-center text-gray-500">No calls yet</td></tr>}
                   </tbody>
                 </table>
               </div>
@@ -115,26 +121,37 @@ app.get("/", (req, res) => {
 });
 
 app.get("/api/logs", (req, res) => {
-  // Return logs newest first
   res.json([...callLogs].reverse());
 });
 
 // ─────────────────────────────────────────────
-// 2. PROXY FOR TELNYX RECORDINGS
+// 2. PROXY FOR TELNYX RECORDINGS (FIXED BUFFER)
 // ─────────────────────────────────────────────
-// Telnyx recording URLs require your API key to download. 
-// This proxy lets the HTML <audio> tag play it securely without exposing your key.
 app.get("/play-recording/:call_control_id", async (req, res) => {
   const logEntry = callLogs.find(l => l.call_control_id === req.params.call_control_id);
-  if (!logEntry || !logEntry.raw_telnyx_url) return res.sendStatus(404);
+  if (!logEntry || !logEntry.raw_telnyx_url) {
+    log("PROXY", "Recording URL not found in memory");
+    return res.sendStatus(404);
+  }
 
   try {
     const telnyxRes = await fetch(logEntry.raw_telnyx_url, {
       headers: { Authorization: `Bearer ${TELNYX_API_KEY}` }
     });
+
+    if (!telnyxRes.ok) throw new Error(`Telnyx returned ${telnyxRes.status}`);
+
+    // Buffer the audio download to bypass Node.js stream piping bugs
+    const arrayBuffer = await telnyxRes.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+
     res.setHeader("Content-Type", "audio/mpeg");
-    telnyxRes.body.pipe(res);
+    res.setHeader("Content-Length", buffer.length);
+    res.send(buffer);
+    
+    log("PROXY", `Served audio for ${req.params.call_control_id} (${buffer.length} bytes)`);
   } catch (e) {
+    log("PROXY ERROR", e.message);
     res.sendStatus(500);
   }
 });
@@ -208,7 +225,7 @@ app.post("/webhook/call", async (req, res) => {
     // 1. START DUAL-CHANNEL RECORDING
     await telnyxCmd("record_start", {
       format: "mp3",
-      channels: "dual", // Stereo separation for easier listening
+      channels: "dual", 
       play_beep: false
     });
 
@@ -231,7 +248,6 @@ app.post("/webhook/call", async (req, res) => {
     const rawUrl = payload.recording_urls.mp3;
     log("RECORDING", `Saved. URL: ${rawUrl}`);
     
-    // Set the proxy URL so the dashboard can play it securely
     updateLog({ 
       status: "completed",
       raw_telnyx_url: rawUrl,
@@ -246,6 +262,81 @@ app.post("/webhook/call", async (req, res) => {
   res.sendStatus(200);
 });
 
+// ─────────────────────────────────────────────
+// 5. TELNYX WEBHOOK (SMS)
+// ─────────────────────────────────────────────
+app.post("/webhook/sms", (req, res) => {
+  const event = req.body?.data;
+  const type = event?.event_type;
+  const payload = event?.payload;
+
+  log("SMS EVENT", `type=${type}`);
+
+  if (type === "message.received") {
+    const from = payload?.from?.phone_number;
+    const text = payload?.text;
+    log("SMS INBOUND", `from=${from} text="${text}"`);
+  }
+
+  if (type === "message.finalized") {
+    const status = payload?.to?.[0]?.status;
+    const to = payload?.to?.[0]?.phone_number;
+    log("SMS STATUS", `to=${to} status=${status}`);
+  }
+
+  res.sendStatus(200);
+});
+
+// ─────────────────────────────────────────────
+// WEBSOCKET — audio stream
+// ─────────────────────────────────────────────
+wss.on("connection", (ws, req) => {
+  log("WS", `Client connected from ${req.socket.remoteAddress}`);
+
+  ws.on("message", (raw) => {
+    try {
+      const msg = JSON.parse(raw);
+
+      switch (msg.event) {
+        case "connected":
+          log("WS", `Stream connected protocol=${msg.protocol} version=${msg.version}`);
+          break;
+
+        case "start":
+          log("WS START", `stream_id=${msg.start?.stream_id} call_control_id=${msg.start?.call_control_id} tracks=${JSON.stringify(msg.start?.tracks)}`);
+          break;
+
+        case "media":
+          break;
+
+        case "stop":
+          log("WS STOP", `stream_id=${msg.stop?.stream_id} reason=${msg.stop?.reason}`);
+          break;
+
+        default:
+          log("WS UNKNOWN EVENT", JSON.stringify(msg));
+      }
+    } catch (err) {
+      log("WS PARSE ERROR", err.message);
+    }
+  });
+
+  ws.on("close", (code, reason) => log("WS", `Client disconnected code=${code} reason=${reason}`));
+  ws.on("error", (err) => log("WS ERROR", err.message));
+});
+
+// ─────────────────────────────────────────────
+// STARTUP CONFIGURATION
+// ─────────────────────────────────────────────
+const requiredEnv = ["TELNYX_API_KEY", "TELNYX_CONNECTION_ID", "TELNYX_FROM_NUMBER"];
+requiredEnv.forEach((key) => {
+  if (!process.env[key]) {
+    log("STARTUP WARNING", `Missing env var: ${key}`);
+  } else {
+    log("STARTUP", `${key} is set ✓`);
+  }
+});
+
 server.listen(PORT, "0.0.0.0", () => {
   log("STARTUP", `Telecom Demo Server running on port ${PORT}`);
 });