@juspay/shooter 1.0.0 → 1.2.0

package/src/routes/api/webhook/+server.ts

@@ -1,20 +1,22 @@
 import { validateAuth } from '$lib/modules/server/auth';
+import { toErrorMessage } from '$lib/modules/server/utils/error';
 import { json } from '@sveltejs/kit';
 
 import type { RequestHandler } from './$types';
 
-type WebhookBody = Record<string, unknown>;
-
+// TODO: Add HMAC signature validation for webhook payloads.
+// This is currently a stub endpoint — no signature verification is performed.
 export const POST: RequestHandler = async ({ request }) => {
   try {
     const authError = validateAuth(request);
-    if (authError) return authError;
+    if (authError) {
+      return authError;
+    }
 
-    const body = (await request.json()) as WebhookBody;
+    const body = (await request.json()) as Record<string, unknown>;
 
     console.log('Webhook received:', {
       body,
-      headers: Object.fromEntries(request.headers.entries()),
       timestamp: new Date().toISOString(),
     });
 
@@ -22,19 +24,15 @@ export const POST: RequestHandler = async ({ request }) => {
     // For now, just log and acknowledge
 
     return json({
-      data: body,
       message: 'Webhook received successfully',
       success: true,
       timestamp: new Date().toISOString(),
     });
   } catch (error) {
-    const err = error as Error;
-    console.error('Webhook error:', err);
+    console.error('[webhook] Failed to process webhook:', toErrorMessage(error));
     return json(
       {
-        details: err.message,
         error: 'Failed to process webhook',
-        timestamp: new Date().toISOString(),
       },
       { status: 500 }
     );

package/src/routes/api/ws-status/+server.ts

@@ -14,10 +14,12 @@ import type { RequestHandler } from './$types';
 // ── Endpoint ────────────────────────────────────────────────────────
 
 export const GET: RequestHandler = ({ request }) => {
-	const authError = validateAuth(request);
-	if (authError) {return authError;}
+  const authError = validateAuth(request);
+  if (authError) {
+    return authError;
+  }
 
-	return json({
-		connectedClients: getConnectedClientCount(),
-	});
+  return json({
+    connectedClients: getConnectedClientCount(),
+  });
 };

package/src/routes/api/ws-ticket/+server.ts

@@ -7,7 +7,6 @@
 //
 // Rate limited to 10 requests per minute per API key.
 
-import { env } from '$env/dynamic/private';
 import { validateAuth } from '$lib/modules/server/auth';
 import { generateTicket } from '$lib/modules/server/ws/ticket-store';
 import { json } from '@sveltejs/kit';
@@ -27,60 +26,62 @@ const rateLimitMap = new Map<string, number[]>();
  * Returns true if the request is within the rate limit, false if exceeded.
  */
 function checkRateLimit(apiKey: string): boolean {
-	const now = Date.now();
-	const cutoff = now - RATE_LIMIT_WINDOW_MS;
+  const now = Date.now();
+  const cutoff = now - RATE_LIMIT_WINDOW_MS;
 
-	let timestamps = rateLimitMap.get(apiKey);
-	if (!timestamps) {
-		timestamps = [];
-		rateLimitMap.set(apiKey, timestamps);
-	}
+  let timestamps = rateLimitMap.get(apiKey);
+  if (!timestamps) {
+    timestamps = [];
+    rateLimitMap.set(apiKey, timestamps);
+  }
 
-	// Prune timestamps outside the window
-	const recent = timestamps.filter((t) => t > cutoff);
-	rateLimitMap.set(apiKey, recent);
+  // Prune timestamps outside the window
+  const recent = timestamps.filter((t) => t > cutoff);
+  rateLimitMap.set(apiKey, recent);
 
-	if (recent.length >= RATE_LIMIT_MAX) {
-		return false;
-	}
+  if (recent.length >= RATE_LIMIT_MAX) {
+    return false;
+  }
 
-	recent.push(now);
-	return true;
+  recent.push(now);
+  return true;
 }
 
 // Cleanup stale rate limit entries every 5 minutes
 setInterval(() => {
-	const cutoff = Date.now() - RATE_LIMIT_WINDOW_MS;
-	for (const [key, timestamps] of rateLimitMap) {
-		const recent = timestamps.filter((t) => t > cutoff);
-		if (recent.length === 0) {
-			rateLimitMap.delete(key);
-		} else {
-			rateLimitMap.set(key, recent);
-		}
-	}
+  const cutoff = Date.now() - RATE_LIMIT_WINDOW_MS;
+  for (const [key, timestamps] of rateLimitMap) {
+    const recent = timestamps.filter((t) => t > cutoff);
+    if (recent.length === 0) {
+      rateLimitMap.delete(key);
+    } else {
+      rateLimitMap.set(key, recent);
+    }
+  }
 }, 300_000).unref();
 
 // ── Endpoint ────────────────────────────────────────────────────────
 
-export const POST: RequestHandler = async ({ request }) => {
-	const authError = validateAuth(request);
-	if (authError) {return authError;}
+export const POST: RequestHandler = ({ request }) => {
+  const authError = validateAuth(request);
+  if (authError) {
+    return authError;
+  }
 
-	// Extract the API key for rate limiting
-	const apiKey = request.headers.get('authorization')!.substring(7);
+  // Extract the API key for rate limiting
+  const apiKey = request.headers.get('authorization')!.substring(7);
 
-	if (!checkRateLimit(apiKey)) {
-		return json(
-			{ error: 'Rate limit exceeded. Maximum 10 ticket requests per minute.' },
-			{ status: 429 }
-		);
-	}
+  if (!checkRateLimit(apiKey)) {
+    return json(
+      { error: 'Rate limit exceeded. Maximum 10 ticket requests per minute.' },
+      { status: 429 }
+    );
+  }
 
-	const ticket = generateTicket();
+  const ticket = generateTicket();
 
-	return json({
-		expiresIn: 30,
-		ticket,
-	});
+  return json({
+    expiresIn: 30,
+    ticket,
+  });
 };

package/src/routes/config/+page.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
+  import type { NativeBridgeConfig } from '$generated/types';
   import type { ShooterConfig } from '$lib/types/config';
 
   import { browser } from '$app/environment';
-  import { goto } from '$app/navigation';
+  import {
+    Card,
+    hasScanner,
+    Icon,
+    isShooterConfig,
+    scanQR,
+    toErrorMessage,
+  } from '$lib/modules/client/common';
   import { Banner, Button, Input, Stepper } from '@juspay/svelte-ui-components';
-  import { Card, hasScanner, Icon, isShooterConfig, scanQR } from '$lib/modules/client/common';
   import { onMount } from 'svelte';
 
   let serverUrl = $state('');
@@ -19,7 +26,8 @@
   let qrLoading = $state(false);
   let qrError = $state('');
   let canScan = $state(false);
-  let bridgeCheckDone = $state(false);
+  let _bridgeCheckDone = $state(false);
+  let bridgeHydrated = false;
   let scanLoading = $state(false);
 
   async function fetchQrCode(): Promise<void> {
@@ -30,6 +38,8 @@
 
     qrLoading = true;
     qrError = '';
+    qrDataUrl = '';
+    qrServerUrl = '';
 
     try {
       const response = await fetch('/api/qr-config', {
@@ -46,8 +56,7 @@
       qrDataUrl = data.dataUrl;
       qrServerUrl = data.serverUrl;
     } catch (error) {
-      const err = error as Error;
-      qrError = `Network error: ${err.message}`;
+      qrError = `Network error: ${toErrorMessage(error)}`;
     } finally {
       qrLoading = false;
     }
@@ -71,16 +80,20 @@
           apiKey = config.apiKey;
         }
         await saveConfiguration();
-        result = 'Configuration updated from QR code';
-        statusType = 'success';
+        // Only show QR success if saveConfiguration() didn't set an error/warning
+        const savedStatus: string = statusType;
+        if (savedStatus !== 'error' && savedStatus !== 'warning') {
+          result = 'Configuration updated from QR code';
+          statusType = 'success';
+        }
       } catch {
         result = 'Invalid QR code data';
         statusType = 'error';
       }
     } catch (error) {
-      const err = error as Error;
-      if (err.message !== 'cancelled') {
-        result = `Scanner error: ${err.message}`;
+      const msg = toErrorMessage(error);
+      if (msg !== 'cancelled') {
+        result = `Scanner error: ${msg}`;
         statusType = 'error';
       }
     } finally {
@@ -88,19 +101,16 @@
     }
   }
 
-  function getNativeBridge(): {
-    getConfig(): string;
-    saveConfig(json: string): void;
-    getFcmToken(): string;
-    getPlatform(): string;
-  } | null {
-    if (typeof window !== 'undefined' && 'ShooterBridge' in window) {
-      return (window as Record<string, unknown>).ShooterBridge as {
-        getConfig(): string;
-        saveConfig(json: string): void;
-        getFcmToken(): string;
-        getPlatform(): string;
-      };
+  function getNativeBridge(): null | typeof window.ShooterBridge {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+    // iOS injects window.ShooterBridge, Android injects window.ShooterNativeBridge
+    if (window.ShooterBridge) {
+      return window.ShooterBridge;
+    }
+    if (window.ShooterNativeBridge) {
+      return window.ShooterNativeBridge;
     }
     return null;
   }
@@ -109,10 +119,45 @@
     return window.location.origin;
   }
 
+  /** Attempt to read config from the native bridge and hydrate state.
+   *  Only performs the full hydration (overwriting form fields) once.
+   *  Subsequent calls only refresh the `canScan` flag so re-polling
+   *  for a late-injected bridge does not clobber user edits. */
+  function hydrateBridge(): void {
+    const bridge = getNativeBridge();
+    if (bridge && !bridgeHydrated) {
+      isNativeApp = true;
+      try {
+        const nativeConfig = JSON.parse(
+          bridge.getConfig?.() ?? '{}'
+        ) as Partial<NativeBridgeConfig>;
+        // If native has config, use it (native is source of truth for credentials).
+        // Native serverUrl always overrides — it is set before the browser
+        // fallback (window.location.origin) so the native value wins.
+        if (nativeConfig.serverUrl) {
+          serverUrl = nativeConfig.serverUrl;
+        }
+        if (nativeConfig.apiKey) {
+          apiKey = nativeConfig.apiKey;
+        }
+        // Auto-populate device token with FCM token
+        const fcmToken = bridge.getFcmToken?.();
+        if (fcmToken) {
+          deviceToken = fcmToken;
+        }
+        // Mark hydrated only after native reads succeeded
+        bridgeHydrated = true;
+      } catch {
+        // Bridge communication failed — leave bridgeHydrated false so
+        // a subsequent poll can retry once the bridge is ready.
+      }
+    }
+    canScan = hasScanner();
+  }
+
   onMount(() => {
     if (browser) {
       try {
-        serverUrl = getDefaultServerUrl();
         const saved = localStorage.getItem('shooter_config');
         if (saved) {
           const parsed: unknown = JSON.parse(saved);
@@ -134,42 +179,28 @@
         // No saved configuration — expected on first visit
       }
 
-      const bridge = getNativeBridge();
-      if (bridge) {
-        isNativeApp = true;
-        try {
-          const nativeConfig = JSON.parse(bridge.getConfig());
-          // If native has config, use it (native is source of truth for credentials)
-          if (nativeConfig.serverUrl && !serverUrl) {
-            serverUrl = nativeConfig.serverUrl;
-          }
-          if (nativeConfig.apiKey) {
-            apiKey = nativeConfig.apiKey;
-          }
-          // Auto-populate device token with FCM token
-          const fcmToken = bridge.getFcmToken();
-          if (fcmToken) {
-            deviceToken = fcmToken;
-          }
-        } catch {
-          // Bridge communication failed
-        }
+      // Hydrate from native bridge BEFORE applying the browser default.
+      // This lets native-provided serverUrl take precedence over
+      // window.location.origin.
+      hydrateBridge();
+      if (!serverUrl) {
+        serverUrl = getDefaultServerUrl();
       }
-
-      canScan = hasScanner();
-      bridgeCheckDone = true;
+      _bridgeCheckDone = true;
 
       // The native bridge may be injected after SvelteKit hydration.
       // Re-check periodically for a short window to catch late injection.
       if (!canScan) {
         const recheckInterval = setInterval(() => {
-          canScan = hasScanner();
+          hydrateBridge();
           if (canScan) {
             clearInterval(recheckInterval);
           }
         }, 200);
         // Stop checking after 3 seconds
-        setTimeout(() => clearInterval(recheckInterval), 3000);
+        setTimeout(() => {
+          clearInterval(recheckInterval);
+        }, 3000);
       }
     }
   });
@@ -193,10 +224,10 @@
 
       const bridge = getNativeBridge();
       if (bridge) {
-        bridge.saveConfig(
+        bridge.saveConfig?.(
           JSON.stringify({
-            serverUrl: trimmedUrl || getDefaultServerUrl(),
             apiKey: apiKey.trim(),
+            serverUrl: trimmedUrl || getDefaultServerUrl(),
           })
         );
       }
@@ -211,8 +242,7 @@
         statusType = 'warning';
       }
     } catch (error) {
-      const err = error as Error;
-      result = `Configuration failed: ${err.message}`;
+      result = `Configuration failed: ${toErrorMessage(error)}`;
       statusType = 'error';
     }
 
@@ -265,8 +295,7 @@
         statusType = 'error';
       }
     } catch (error) {
-      const err = error as Error;
-      result = `Network error: ${err.message}`;
+      result = `Network error: ${toErrorMessage(error)}`;
       statusType = 'error';
     }
 
@@ -284,7 +313,7 @@
 
       const bridge = getNativeBridge();
       if (bridge) {
-        bridge.saveConfig(JSON.stringify({ serverUrl: '', apiKey: '' }));
+        bridge.saveConfig?.(JSON.stringify({ apiKey: '', serverUrl: '' }));
       }
     }
   }
@@ -297,6 +326,9 @@
 
 <main class="main">
   <div class="settings-container">
+    <div style="margin-bottom: var(--space-4);">
+      <a href="/" class="back-link">← Back to Projects</a>
+    </div>
     <div class="page-header">
       <h1 class="page-title">Settings</h1>
       <p class="page-description">Configure your API credentials and notification preferences</p>
@@ -304,7 +336,10 @@
 
     <div class="settings-grid">
       <section class="settings-section">
-        <Card title="Server Configuration" description="Configure server connection and credentials">
+        <Card
+          title="Server Configuration"
+          description="Configure server connection and credentials"
+        >
           <Input
             name="serverUrl"
             label="Server URL"
@@ -322,6 +357,9 @@
             placeholder="Enter your API key"
             infoMessage="Required for sending notifications"
           />
+          <p class="input-help">
+            Find this in your <code>~/.shooter/.env</code> file. Run <code>shooter setup</code> to generate one.
+          </p>
 
           <Input
             name="deviceToken"
@@ -329,13 +367,21 @@
             bind:value={deviceToken}
             dataType="text"
             placeholder={isNativeApp ? 'Waiting for token...' : '64-character hex string'}
-            infoMessage={isNativeApp && deviceToken ? 'Auto-detected from app' : 'Device token from app registration'}
+            infoMessage={isNativeApp && deviceToken
+              ? 'Auto-detected from app'
+              : 'Device token from app registration'}
             classes="input-mono"
           />
+          <p class="input-help">Optional — only needed for iOS/Android push notifications.</p>
         </Card>
 
         {#if result}
-          {@const bannerIcon = statusType === 'success' ? 'check-circle' : statusType === 'error' ? 'x-circle' : 'alert-triangle'}
+          {@const bannerIcon =
+            statusType === 'success'
+              ? 'check-circle'
+              : statusType === 'error'
+                ? 'x-circle'
+                : 'alert-triangle'}
           <Banner text={result} classes="banner-{statusType || 'info'}">
             {#snippet icon()}
               <Icon name={bannerIcon} size={16} />
@@ -349,12 +395,10 @@
             onclick={testConfiguration}
             disabled={loading || !apiKey.trim()}
           >
-            {#snippet children()}
-              {#if !loading}
-                <Icon name="play" size={14} />
-              {/if}
-              Test Connection
-            {/snippet}
+            {#if !loading}
+              <Icon name="play" size={14} />
+            {/if}
+            Test Connection
           </Button>
           <Button
             classes="btn-primary"
@@ -379,14 +423,20 @@
           />
         </Card>
 
-        <Card title="Mobile App Setup" description={canScan ? 'Scan a QR code to connect' : 'Scan to connect your mobile app'}>
+        <Card
+          title="Mobile App Setup"
+          description={canScan ? 'Scan a QR code to connect' : 'Scan to connect your mobile app'}
+        >
           <div class="qr-section">
             {#if canScan}
               <p class="qr-description">
-                Scan the QR code shown on your server's settings page to auto-configure
-                the connection.
+                Scan the QR code shown on your server's settings page to auto-configure the
+                connection.
               </p>
-              <Button classes="btn-secondary btn-sm" onclick={handleScanQR} disabled={scanLoading}
+              <Button
+                classes="btn-secondary btn-sm"
+                onclick={handleScanQR}
+                disabled={scanLoading}
                 text={scanLoading ? 'Scanning...' : 'Scan QR Code'}
               />
             {:else}
@@ -410,11 +460,14 @@
                 <p class="qr-error">{qrError}</p>
               {:else}
                 <p class="qr-description">
-                  Generate a QR code containing your server URL and API key. Your mobile app can scan
-                  it to auto-configure the connection.
+                  Generate a QR code containing your server URL and API key. Your mobile app can
+                  scan it to auto-configure the connection.
                 </p>
               {/if}
-              <Button classes="btn-secondary btn-sm" onclick={fetchQrCode} disabled={qrLoading || !apiKey.trim()}
+              <Button
+                classes="btn-secondary btn-sm"
+                onclick={fetchQrCode}
+                disabled={qrLoading || !apiKey.trim()}
                 text={qrDataUrl ? 'Regenerate QR Code' : 'Generate QR Code'}
               />
             {/if}
@@ -423,7 +476,9 @@
 
         <Card title="Danger Zone">
           <p class="danger-description">Clear all saved configuration data from this device.</p>
-          <Button classes="btn-danger btn-sm" onclick={clearConfiguration}
+          <Button
+            classes="btn-danger btn-sm"
+            onclick={clearConfiguration}
             text="Clear Configuration"
           />
         </Card>
@@ -436,7 +491,7 @@
   .settings-container {
     max-width: 900px;
     margin: 0 auto;
-    padding-bottom: 80px;
+    padding-bottom: var(--space-6);
   }
 
   .page-header {
@@ -491,11 +546,12 @@
     --step-text-margin: 0 0 0 var(--space-3);
     --separator-display: none;
     --step-text-active-color: var(--text-primary);
-    --step-text-completed-color: var(--ds-green-700);
+    --step-text-completed-color: var(--ds-green-900);
     --step-index-container-active-background-color: var(--component-bg-active);
     --step-index-container-completed-background-color: var(--ds-green-700);
     --step-index-container-background-color: var(--component-bg-active);
     --step-index-color: var(--text-secondary);
+    align-items: flex-start;
     gap: var(--space-3);
   }
 
@@ -505,6 +561,10 @@
     gap: var(--space-3);
   }
 
+  .qr-section :global(.button-container) {
+    align-self: center;
+  }
+
   .qr-container {
     display: flex;
     justify-content: center;
@@ -583,6 +643,20 @@
     border-left: 3px solid rgba(217, 48, 54, 0.5);
   }
 
+  .input-help {
+    font-size: var(--text-xs);
+    color: var(--color-text-tertiary, #888);
+    margin-top: var(--space-1);
+    margin-bottom: 0;
+  }
+  .input-help code {
+    background: var(--ds-gray-200, #1a1a1a);
+    padding: 1px 4px;
+    border-radius: var(--radius-sm);
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+  }
+
   @media (max-width: 768px) {
     .settings-grid {
       grid-template-columns: 1fr;