refactor: centralise outbound dial into useSip().dialOutbound()

- Single dialOutbound() in sip-provider handles all outbound state:
  callState, callerNumber, outboundPending, API call, error recovery
- ClickToCallButton, PhoneActionCell, Dialler all use dialOutbound()
- Removed direct Jotai atom manipulation from calling components
- Removed setOutboundPending imports from components
- SIP disconnects on provider unmount + auth logout
- Dialler input is now editable (type or numpad)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/pages/call-desk.tsx

@@ -12,14 +12,13 @@ import { ActiveCallCard } from '@/components/call-desk/active-call-card';
 
 import { Badge } from '@/components/base/badges/badges';
 import { AgentStatusToggle } from '@/components/call-desk/agent-status-toggle';
-import { apiClient } from '@/lib/api-client';
 import { notify } from '@/lib/toast';
 import { cx } from '@/utils/cx';
 
 export const CallDeskPage = () => {
     const { user } = useAuth();
     const { leadActivities } = useData();
-    const { connectionStatus, isRegistered, callState, callerNumber, callUcid } = useSip();
+    const { connectionStatus, isRegistered, callState, callerNumber, callUcid, dialOutbound } = useSip();
     const { missedCalls, followUps, marketingLeads, totalPending, loading } = useWorklist();
     const [selectedLead, setSelectedLead] = useState<WorklistLead | null>(null);
     const [contextOpen, setContextOpen] = useState(true);
@@ -34,7 +33,7 @@ export const CallDeskPage = () => {
         if (num.length < 10) { notify.error('Enter a valid phone number'); return; }
         setDialling(true);
         try {
-            await apiClient.post('/api/ozonetel/dial', { phoneNumber: num });
+            await dialOutbound(num);
             setDiallerOpen(false);
             setDialNumber('');
         } catch {
@@ -95,9 +94,15 @@ export const CallDeskPage = () => {
                                         </button>
                                     </div>
                                     <div className="flex items-center gap-2 mb-3 px-3 py-2.5 rounded-lg bg-secondary min-h-[40px]">
-                                        <span className="flex-1 text-lg font-semibold text-primary tracking-wider text-center">
-                                            {dialNumber || <span className="text-placeholder font-normal text-sm">Enter number</span>}
-                                        </span>
+                                        <input
+                                            type="tel"
+                                            value={dialNumber}
+                                            onChange={e => setDialNumber(e.target.value)}
+                                            onKeyDown={e => e.key === 'Enter' && handleDial()}
+                                            placeholder="Enter number"
+                                            autoFocus
+                                            className="flex-1 bg-transparent text-lg font-semibold text-primary tracking-wider text-center placeholder:text-placeholder placeholder:font-normal placeholder:text-sm outline-none"
+                                        />
                                         {dialNumber && (
                                             <button onClick={() => setDialNumber(dialNumber.slice(0, -1))} className="text-fg-quaternary hover:text-fg-secondary shrink-0">
                                                 <FontAwesomeIcon icon={faDeleteLeft} className="size-4" />