feat(turn): add TURN server implementation with Docker support and deployment scripts

Author: ralyodio

.claude/settings.local.json

@@ -111,10 +111,7 @@
       "Bash(bash -n:*)",
       "Bash(pnpm --filter @pairux/web build:*)"
     ],
-    "deny": [
-      "Bash(npm *)",
-      "Bash(npx *)"
-    ],
+    "deny": ["Bash(npm *)", "Bash(npx *)"],
     "additionalDirectories": [
       "/home/ettinger/src/profullstack.com/music-torrent/services/dht-search-api/src"
     ]

apps/desktop/src/main/capture/sources.ts

@@ -1,9 +1,7 @@
 import { desktopCapturer, screen } from 'electron';
 import type { CaptureSource } from '@pairux/shared-types';
 
-export async function getCaptureSources(
-  types: ('screen' | 'window')[]
-): Promise<CaptureSource[]> {
+export async function getCaptureSources(types: ('screen' | 'window')[]): Promise<CaptureSource[]> {
   try {
     const sources = await desktopCapturer.getSources({
       types,

apps/desktop/src/main/index.ts

@@ -5,8 +5,7 @@ import { registerIpcHandlers } from './ipc';
 // Detect display server (X11 vs Wayland)
 const isWayland =
   process.platform === 'linux' &&
-  (process.env.XDG_SESSION_TYPE === 'wayland' ||
-    process.env.WAYLAND_DISPLAY !== undefined);
+  (process.env.XDG_SESSION_TYPE === 'wayland' || process.env.WAYLAND_DISPLAY !== undefined);
 
 console.log(
   `[Main] Display server: ${isWayland ? 'Wayland' : process.platform === 'linux' ? 'X11' : 'N/A'}`

apps/desktop/src/main/ipc/index.ts

@@ -5,19 +5,15 @@ import type { CaptureSource } from '@pairux/shared-types';
 // Detect display server
 const isWayland =
   process.platform === 'linux' &&
-  (process.env.XDG_SESSION_TYPE === 'wayland' ||
-    process.env.WAYLAND_DISPLAY !== undefined);
+  (process.env.XDG_SESSION_TYPE === 'wayland' || process.env.WAYLAND_DISPLAY !== undefined);
 
 export function registerIpcHandlers(): void {
   console.log('[IPC] Registering IPC handlers');
 
   // Capture handlers
   ipcMain.handle(
     'capture:getSources',
-    async (
-      _event,
-      args: { types: ('screen' | 'window')[] }
-    ): Promise<CaptureSource[]> => {
+    async (_event, args: { types: ('screen' | 'window')[] }): Promise<CaptureSource[]> => {
       console.log('[IPC] capture:getSources called with types:', args.types);
       return getCaptureSources(args.types);
     }

apps/desktop/src/main/window.ts

@@ -57,26 +57,24 @@ export async function createMainWindow(): Promise<BrowserWindow> {
   });
 
   // Handle permission requests
-  session.defaultSession.setPermissionRequestHandler(
-    (_webContents, permission, callback) => {
-      const allowedPermissions = [
-        'media',
-        'display-capture',
-        'mediaKeySystem',
-        'geolocation',
-        'notifications',
-        'fullscreen',
-      ];
+  session.defaultSession.setPermissionRequestHandler((_webContents, permission, callback) => {
+    const allowedPermissions = [
+      'media',
+      'display-capture',
+      'mediaKeySystem',
+      'geolocation',
+      'notifications',
+      'fullscreen',
+    ];
 
-      if (allowedPermissions.includes(permission)) {
-        console.log('[Main] Permission granted:', permission);
-        callback(true);
-      } else {
-        console.log('[Main] Permission denied:', permission);
-        callback(false);
-      }
+    if (allowedPermissions.includes(permission)) {
+      console.log('[Main] Permission granted:', permission);
+      callback(true);
+    } else {
+      console.log('[Main] Permission denied:', permission);
+      callback(false);
     }
-  );
+  });
 
   // Show window when ready to prevent visual flash
   mainWindow.on('ready-to-show', () => {

apps/desktop/src/preload/index.ts

@@ -1,11 +1,5 @@
 import { contextBridge, ipcRenderer, type IpcRendererEvent } from 'electron';
-import type {
-  ChannelKey,
-  EventKey,
-  InvokeArgs,
-  InvokeReturn,
-  EventData,
-} from './api';
+import type { ChannelKey, EventKey, InvokeArgs, InvokeReturn, EventData } from './api';
 
 /**
  * Electron API exposed to the renderer via context bridge.
@@ -16,23 +10,18 @@ const electronAPI = {
    * Invoke an IPC channel and wait for response.
    * Type-safe: channel names and arguments are validated at compile time.
    */
-  invoke: <K extends ChannelKey>(
-    channel: K,
-    args: InvokeArgs<K>
-  ): Promise<InvokeReturn<K>> => {
+  invoke: <K extends ChannelKey>(channel: K, args: InvokeArgs<K>): Promise<InvokeReturn<K>> => {
     return ipcRenderer.invoke(channel, args);
   },
 
   /**
    * Subscribe to events from main process.
    * Returns an unsubscribe function.
    */
-  on: <K extends EventKey>(
-    channel: K,
-    callback: (data: EventData<K>) => void
-  ): (() => void) => {
-    const handler = (_event: IpcRendererEvent, data: EventData<K>) =>
-      { callback(data); };
+  on: <K extends EventKey>(channel: K, callback: (data: EventData<K>) => void): (() => void) => {
+    const handler = (_event: IpcRendererEvent, data: EventData<K>) => {
+      callback(data);
+    };
     ipcRenderer.on(channel, handler);
     return () => ipcRenderer.removeListener(channel, handler);
   },

apps/desktop/src/renderer/App.tsx

@@ -7,9 +7,7 @@ import type { CaptureSource } from '@pairux/shared-types';
 import type { DisplayServer } from '../preload/api';
 
 function App() {
-  const [selectedSource, setSelectedSource] = useState<CaptureSource | null>(
-    null
-  );
+  const [selectedSource, setSelectedSource] = useState<CaptureSource | null>(null);
   const [stream, setStream] = useState<MediaStream | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [displayServer, setDisplayServer] = useState<DisplayServer>('x11');
@@ -32,7 +30,9 @@ function App() {
     try {
       // Stop existing stream
       if (stream) {
-        stream.getTracks().forEach((track) => { track.stop(); });
+        stream.getTracks().forEach((track) => {
+          track.stop();
+        });
       }
 
       console.log('[Renderer] Starting capture for source:', source.id);
@@ -81,7 +81,9 @@ function App() {
 
     try {
       if (stream) {
-        stream.getTracks().forEach((track) => { track.stop(); });
+        stream.getTracks().forEach((track) => {
+          track.stop();
+        });
       }
 
       console.log('[Renderer] Starting Wayland capture with system picker');
@@ -113,7 +115,9 @@ function App() {
 
   const handleStopCapture = () => {
     if (stream) {
-      stream.getTracks().forEach((track) => { track.stop(); });
+      stream.getTracks().forEach((track) => {
+        track.stop();
+      });
       setStream(null);
       setSelectedSource(null);
     }
@@ -127,7 +131,9 @@ function App() {
           <div className="mb-4 rounded-lg bg-destructive/10 p-4 text-destructive">
             {error}
             <button
-              onClick={() => { setError(null); }}
+              onClick={() => {
+                setError(null);
+              }}
               className="ml-4 text-sm underline"
             >
               Dismiss
@@ -137,33 +143,33 @@ function App() {
 
         {!stream ? (
           <>
-            <h1 className="mb-6 text-2xl font-semibold">
-              Select a screen or window to share
-            </h1>
+            <h1 className="mb-6 text-2xl font-semibold">Select a screen or window to share</h1>
 
             {isWayland && (
               <div className="mb-6 rounded-lg bg-muted p-4">
                 <p className="mb-3 text-sm text-muted-foreground">
-                  You&apos;re using Wayland. Click below to open the system screen
-                  picker, or select a source from the list.
+                  You&apos;re using Wayland. Click below to open the system screen picker, or select
+                  a source from the list.
                 </p>
                 <button
-                  onClick={() => { void handleWaylandCapture(); }}
+                  onClick={() => {
+                    void handleWaylandCapture();
+                  }}
                   className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
                 >
                   Open System Screen Picker
                 </button>
               </div>
             )}
 
-            <SourcePicker onSelect={(source) => { void handleSourceSelect(source); }} />
+            <SourcePicker
+              onSelect={(source) => {
+                void handleSourceSelect(source);
+              }}
+            />
           </>
         ) : (
-          <CapturePreview
-            stream={stream}
-            source={selectedSource}
-            onStop={handleStopCapture}
-          />
+          <CapturePreview stream={stream} source={selectedSource} onStop={handleStopCapture} />
         )}
       </main>
     </div>

apps/desktop/src/renderer/components/capture/CapturePreview.tsx

@@ -37,9 +37,7 @@ export function CapturePreview({ stream, source, onStop }: CapturePreviewProps)
             <AppWindow className="h-5 w-5 text-primary" />
           )}
           <div>
-            <h2 className="text-lg font-semibold">
-              {source?.name ?? 'Capturing'}
-            </h2>
+            <h2 className="text-lg font-semibold">{source?.name ?? 'Capturing'}</h2>
             <p className="text-sm text-muted-foreground">
               {isScreen ? 'Screen' : 'Window'} capture active
             </p>
@@ -57,13 +55,7 @@ export function CapturePreview({ stream, source, onStop }: CapturePreviewProps)
 
       {/* Video preview */}
       <div className="relative flex-1 overflow-hidden rounded-lg border border-border bg-black">
-        <video
-          ref={videoRef}
-          autoPlay
-          playsInline
-          muted
-          className="h-full w-full object-contain"
-        />
+        <video ref={videoRef} autoPlay playsInline muted className="h-full w-full object-contain" />
 
         {/* Live indicator */}
         <div className="absolute left-4 top-4 flex items-center gap-2 rounded-full bg-black/70 px-3 py-1.5">

apps/desktop/src/renderer/components/capture/SourceCard.tsx

@@ -11,7 +11,9 @@ export function SourceCard({ source, onSelect }: SourceCardProps) {
 
   return (
     <button
-      onClick={() => { onSelect(source); }}
+      onClick={() => {
+        onSelect(source);
+      }}
       className="group flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-all hover:border-primary hover:ring-2 hover:ring-primary/20"
     >
       {/* Thumbnail */}

apps/desktop/src/renderer/components/capture/SourcePicker.tsx

@@ -48,7 +48,9 @@ export function SourcePicker({ onSelect }: SourcePickerProps) {
       <div className="flex items-center gap-2">
         <div className="flex rounded-lg bg-muted p-1">
           <button
-            onClick={() => { setActiveTab('screen'); }}
+            onClick={() => {
+              setActiveTab('screen');
+            }}
             className={`flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
               activeTab === 'screen'
                 ? 'bg-background text-foreground shadow-sm'
@@ -59,7 +61,9 @@ export function SourcePicker({ onSelect }: SourcePickerProps) {
             Screens ({screens.length})
           </button>
           <button
-            onClick={() => { setActiveTab('window'); }}
+            onClick={() => {
+              setActiveTab('window');
+            }}
             className={`flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
               activeTab === 'window'
                 ? 'bg-background text-foreground shadow-sm'
@@ -74,7 +78,9 @@ export function SourcePicker({ onSelect }: SourcePickerProps) {
         <div className="flex-1" />
 
         <button
-          onClick={() => { void loadSources(); }}
+          onClick={() => {
+            void loadSources();
+          }}
           disabled={loading}
           className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50"
         >
@@ -84,11 +90,7 @@ export function SourcePicker({ onSelect }: SourcePickerProps) {
       </div>
 
       {/* Error state */}
-      {error && (
-        <div className="rounded-lg bg-destructive/10 p-4 text-destructive">
-          {error}
-        </div>
-      )}
+      {error && <div className="rounded-lg bg-destructive/10 p-4 text-destructive">{error}</div>}
 
       {/* Loading state */}
       {loading && !sources.length && (