feat: add in-browser dial pad with Twilio Voice SDK

- New DialPad component on Patient Connection page: clickable keypad,
  call/hangup/mute buttons, duration timer, keyboard input support
- Backend: POST /api/twilio/voice-token issues Access Token for browser
  Device; POST /api/twilio/webhook/voice-browser is the TwiML webhook
  Twilio calls to bridge the browser to the patient's phone
- TwiML App SID field added to Twilio Settings (stored in templates JSON)
- README: one-time Twilio Console setup instructions for the dial pad

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

README.md

@@ -390,6 +390,25 @@ Each office runs its own `cloudflared` tunnel on its own PC. Ports never conflic
 
 ---
 
+## Twilio In-Browser Calling Setup (Dial Pad)
+
+The dial pad on the Patient Connection page lets staff make real phone calls directly through the browser (mic + speaker) using Twilio Voice SDK. One-time setup is required in the Twilio Console.
+
+### One-time Twilio Console setup (required before first call)
+
+1. Go to **Twilio Console → Explore Products → Voice → TwiML Apps**
+2. Click **Create new TwiML App**
+3. Set the **Voice Request URL** to:
+   ```
+   https://communitydentistsoflowell.mydentalofficemanagement.com/api/twilio/webhook/voice-browser
+   ```
+4. Save — copy the **TwiML App SID** (starts with `AP`)
+5. In the dental app, go to **Settings → Twilio Settings → TwiML App SID** → paste the SID and save
+
+Once saved, the dial pad on the Patient Connection page is fully functional. The staff member's browser mic/speaker is used for the call; the patient receives a normal phone call from the office Twilio number.
+
+---
+
 ## License Key Generator
 
 The license key generator is a private tool that lives only on your dev PC. Use it to generate a new license key for any office every 3 months.