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>

apps/Frontend/src/pages/patient-connection-page.tsx

@@ -27,6 +27,7 @@ import {
 } from "lucide-react";
 import { SmsTemplateDialog } from "@/components/patient-connection/sms-template-diaog";
 import { MessageThread } from "@/components/patient-connection/message-thread";
+import { DialPad } from "@/components/patient-connection/dial-pad";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest } from "@/lib/queryClient";
 import type { Patient } from "@repo/db/types";
@@ -374,6 +375,11 @@ export default function PatientConnectionPage() {
         </CardContent>
       </Card>
 
+      {/* Dial Pad */}
+      <div className="mt-6 max-w-xs">
+        <DialPad />
+      </div>
+
       {/* SMS Template Dialog */}
       <SmsTemplateDialog
         open={isSmsDialogOpen}