@juspay/shooter 1.0.0 → 1.2.0

package/src/lib/modules/server/ws/terminal-handler.ts

@@ -2,23 +2,24 @@
 // Relays terminal output to connected clients and routes client input
 // (keystrokes, resize, signals) back to the PTY.
 
+import type { TerminalSignal } from '$generated/types';
 import type { WebSocket } from 'ws';
 
 // ── Types ────────────────────────────────────────────────────────────
 
 /** Inbound messages from the client. */
 type ClientMessage =
-  | { cols: number; rows: number; type: 'resize'; }
-  | { data: string; type: 'input'; }
-  | { signal: 'SIGINT' | 'SIGTERM' | 'SIGTSTP'; type: 'signal'; };
+  | { cols: number; rows: number; type: 'resize' }
+  | { data: string; type: 'input' }
+  | { signal: TerminalSignal; type: 'signal' };
 
 /** Outbound messages to the client. */
 type ServerMessage =
-  | { bytes: number; type: 'output-dropped'; }
-  | { chunk: number; data: string; total: number; type: 'scrollback'; }
-  | { code: null | number; signal: null | string; type: 'exit'; }
-  | { data: string; type: 'output'; }
-  | { message: string; type: 'error'; };
+  | { bytes: number; type: 'output-dropped' }
+  | { chunk: number; data: string; total: number; type: 'scrollback' }
+  | { code: null | number; signal: null | string; type: 'exit' }
+  | { data: string; type: 'output' }
+  | { message: string; type: 'error' };
 
 // ── Constants ────────────────────────────────────────────────────────
 
@@ -29,8 +30,8 @@ const SIGNAL_MAP: Record<string, NodeJS.Signals> = {
   SIGTSTP: 'SIGTSTP',
 };
 
-// ── PTY Manager interface ────────────────────────────────────────────
-// Minimal duck-typed interface matching the real pty-manager singleton.
+// ── PTY Manager type ─────────────────────────────────────────────────
+// Minimal duck-typed shape matching the real pty-manager singleton.
 
 interface ManagedTerminal {
   clients: Set<WebSocket>;
@@ -159,18 +160,29 @@ function parseClientMessage(raw: string): ClientMessage | null {
 
     switch (msg.type) {
       case 'input':
-        if (typeof msg.data !== 'string') {return null;}
+        if (typeof msg.data !== 'string') {
+          return null;
+        }
         return { data: msg.data, type: 'input' };
       case 'resize':
-        if (typeof msg.cols !== 'number' || typeof msg.rows !== 'number') {return null;}
-        if (msg.cols < 1 || msg.rows < 1 || msg.cols > 500 || msg.rows > 200) {return null;}
+        if (
+          typeof msg.cols !== 'number' ||
+          typeof msg.rows !== 'number' ||
+          !Number.isFinite(msg.cols) ||
+          !Number.isFinite(msg.rows)
+        ) {
+          return null;
+        }
+        if (msg.cols < 1 || msg.rows < 1 || msg.cols > 500 || msg.rows > 200) {
+          return null;
+        }
         return { cols: Math.floor(msg.cols), rows: Math.floor(msg.rows), type: 'resize' };
       case 'signal':
-        if (typeof msg.signal !== 'string' || !(msg.signal in SIGNAL_MAP)) {return null;}
+        if (typeof msg.signal !== 'string' || !Object.hasOwn(SIGNAL_MAP, msg.signal)) {
+          return null;
+        }
         return {
-          signal: msg.signal as ClientMessage & { type: 'signal' } extends { signal: infer S }
-            ? S
-            : never,
+          signal: msg.signal as TerminalSignal,
           type: 'signal',
         };
       default:

package/src/lib/modules/server/ws/ticket-store.ts

@@ -1,24 +1,21 @@
 // WebSocket ticket store.
 // Generates short-lived, single-use tickets for authenticating WebSocket upgrades.
-// Tickets expire after 30 seconds and are cleaned up every 60 seconds.
+// Tickets expire after 30 seconds and are cleaned up every 30 seconds.
 //
 // This avoids putting the long-lived API_KEY in WebSocket URL query parameters,
 // which would appear in proxy logs, Cloudflare access logs, and browser history.
 
-import { randomBytes } from 'crypto';
+import type { Ticket } from '$generated/types';
 
-interface Ticket {
-	createdAt: number;
-	used: boolean;
-}
+import { randomBytes } from 'crypto';
 
 // Use globalThis to ensure a single shared Map across module instances.
 // server.ts (via tsx) and SvelteKit's build handler load this module separately,
 // creating two different module scopes. globalThis bridges them.
 const GLOBAL_KEY = '__shooter_ws_tickets';
 const tickets: Map<string, Ticket> =
-	(globalThis as Record<string, unknown>)[GLOBAL_KEY] as Map<string, Ticket> ||
-	new Map<string, Ticket>();
+  ((globalThis as Record<string, unknown>)[GLOBAL_KEY] as Map<string, Ticket>) ||
+  new Map<string, Ticket>();
 (globalThis as Record<string, unknown>)[GLOBAL_KEY] = tickets;
 
 /**
@@ -26,9 +23,9 @@ const tickets: Map<string, Ticket> =
  * The ticket is valid for 30 seconds and can only be consumed once.
  */
 export function generateTicket(): string {
-	const ticket = randomBytes(32).toString('hex');
-	tickets.set(ticket, { createdAt: Date.now(), used: false });
-	return ticket;
+  const ticket = randomBytes(32).toString('hex');
+  tickets.set(ticket, { createdAt: Date.now(), used: false });
+  return ticket;
 }
 
 /**
@@ -37,22 +34,28 @@ export function generateTicket(): string {
  * A valid ticket is marked as used (single-use) and cannot be reused.
  */
 export function validateTicket(ticket: null | string): boolean {
-	if (!ticket) {return false;}
-	const entry = tickets.get(ticket);
-	if (!entry || entry.used) {return false;}
-	if (Date.now() - entry.createdAt > 30_000) {
-		tickets.delete(ticket);
-		return false;
-	}
-	entry.used = true;
-	return true;
+  if (!ticket) {
+    return false;
+  }
+  const entry = tickets.get(ticket);
+  if (!entry || entry.used) {
+    return false;
+  }
+  if (Date.now() - entry.createdAt > 30_000) {
+    tickets.delete(ticket);
+    return false;
+  }
+  entry.used = true;
+  return true;
 }
 
-// Cleanup expired tickets every 60 seconds.
+// Cleanup expired tickets every 30 seconds (matches ticket lifetime).
 // .unref() ensures this timer does not prevent Node.js from exiting.
 setInterval(() => {
-	const now = Date.now();
-	for (const [key, val] of tickets) {
-		if (now - val.createdAt > 60_000) {tickets.delete(key);}
-	}
-}, 60_000).unref();
+  const now = Date.now();
+  for (const [key, val] of tickets) {
+    if (now - val.createdAt > 30_000) {
+      tickets.delete(key);
+    }
+  }
+}, 30_000).unref();

package/src/lib/theme.css

@@ -276,12 +276,37 @@
   --button-hover-text-color: var(--ds-background-100);
 }
 
+.btn-connect {
+  --button-color: #0d9488;
+  --button-text-color: #fff;
+  --button-hover-color: #14b8a6;
+  --button-hover-text-color: #fff;
+  --button-border: 1px solid #0d9488;
+  --button-hover-border: 1px solid #14b8a6;
+}
+
+.btn-resume {
+  --button-color: transparent;
+  --button-text-color: var(--ds-gray-900);
+  --button-border: 1px solid var(--ds-gray-400);
+  --button-hover-color: var(--ds-gray-100);
+  --button-hover-text-color: var(--ds-gray-1000);
+  --button-hover-border: 1px solid var(--ds-gray-600);
+}
+
 .btn-sm {
   --button-height: 32px;
   --button-padding: 0 10px;
   --button-font-size: var(--text-base);
 }
 
+.btn-xs {
+  --button-height: 28px;
+  --button-padding: 0 8px;
+  --button-font-size: var(--text-xs);
+  --button-border-radius: var(--radius-sm);
+}
+
 .btn-lg {
   --button-height: 48px;
   --button-padding: 0 20px;
@@ -526,4 +551,9 @@
   .shimmer-card {
     --shimmer-height: 90px;
   }
+
+  .btn-xs {
+    min-height: 36px;
+    padding: 6px 12px;
+  }
 }

package/src/lib/types/config.ts

@@ -1,6 +1 @@
-export interface ShooterConfig {
-  apiKey: string;
-  deviceToken: string;
-  lastUpdated?: number;
-  serverUrl?: string;
-}
+export type { ShooterConfig } from '$generated/types';

package/src/routes/+error.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+</script>
+
+<svelte:head>
+  <title>Error - Shooter</title>
+</svelte:head>
+
+<main class="error-page">
+  <div class="error-content">
+    <div class="error-code">{$page.status}</div>
+    <h1 class="error-title">
+      {#if $page.status === 404}
+        Page not found
+      {:else}
+        Something went wrong
+      {/if}
+    </h1>
+    <p class="error-message">
+      {#if $page.error?.message}
+        {$page.error.message}
+      {:else if $page.status === 404}
+        The page you're looking for doesn't exist or has been moved.
+      {:else}
+        An unexpected error occurred. Try refreshing or going back.
+      {/if}
+    </p>
+    <div class="error-actions">
+      <button class="error-btn" onclick={() => goto('/')}>Go Home</button>
+      <button class="error-btn error-btn-secondary" onclick={() => { history.back(); }}>Go Back</button>
+    </div>
+  </div>
+</main>
+
+<style>
+  .error-page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 60vh;
+    padding: var(--space-6);
+  }
+
+  .error-content {
+    text-align: center;
+    max-width: 400px;
+  }
+
+  .error-code {
+    font-size: 4rem;
+    font-weight: 700;
+    color: var(--color-text-tertiary, #555);
+    line-height: 1;
+    margin-bottom: var(--space-2);
+  }
+
+  .error-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: var(--space-3);
+  }
+
+  .error-message {
+    color: var(--color-text-secondary, #888);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    margin-bottom: var(--space-5);
+  }
+
+  .error-actions {
+    display: flex;
+    gap: var(--space-3);
+    justify-content: center;
+  }
+
+  .error-btn {
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    border: none;
+    background: var(--color-accent, #0d9488);
+    color: white;
+    min-height: 44px;
+  }
+
+  .error-btn-secondary {
+    background: transparent;
+    border: 1px solid var(--border, #333);
+    color: var(--color-text-secondary, #888);
+  }
+</style>

package/src/routes/+layout.svelte

@@ -3,7 +3,6 @@
   import '$lib/theme.css';
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import { Button } from '@juspay/svelte-ui-components';
   import { StatusBadge } from '$lib/modules/client/common';
   import { onMount, type Snippet } from 'svelte';
 
@@ -50,18 +49,27 @@
 
       <div class="nav-right">
         <StatusBadge status={systemStatus} />
-        <Button
-          classes="btn-gear {$page.url.pathname === '/config' ? 'btn-gear-active' : ''}"
+        <button
+          class="btn-gear {$page.url.pathname === '/config' ? 'btn-gear-active' : ''}"
           onclick={() => goto('/config')}
           aria-label="Settings"
         >
-          {#snippet children()}
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <circle cx="12" cy="12" r="3"></circle>
-              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
-            </svg>
-          {/snippet}
-        </Button>
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="3"></circle>
+            <path
+              d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+            ></path>
+          </svg>
+        </button>
       </div>
     </div>
   </header>
@@ -77,10 +85,20 @@
       <a
         href="/"
         class="tab-item"
-        class:active={$page.url.pathname === '/' || $page.url.pathname.startsWith('/project') || $page.url.pathname.startsWith('/session')}
+        class:active={$page.url.pathname === '/' ||
+          $page.url.pathname.startsWith('/project') ||
+          $page.url.pathname.startsWith('/session')}
       >
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
+          ></path>
         </svg>
         <span>Projects</span>
       </a>
@@ -89,7 +107,14 @@
         class="tab-item"
         class:active={$page.url.pathname.startsWith('/terminals')}
       >
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
           <polyline points="4 17 10 11 4 5"></polyline>
           <line x1="12" y1="19" x2="20" y2="19"></line>
         </svg>
@@ -106,27 +131,37 @@
     gap: var(--space-2);
   }
 
-  :global(.btn-gear) {
-    --button-color: transparent;
-    --button-text-color: var(--text-muted);
-    --button-hover-color: var(--component-bg);
-    --button-hover-text-color: var(--text-primary);
-    --button-border: none;
-    --button-hover-border: none;
-    --button-padding: 0;
-    --button-height: 36px;
-    --button-width: 36px;
-    --button-border-radius: var(--radius-md);
+  .btn-gear {
+    background: transparent;
+    color: var(--text-muted);
+    border: none;
+    padding: 0;
+    height: 36px;
+    width: 36px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .btn-gear:hover {
+    background: var(--component-bg);
+    color: var(--text-primary);
+  }
+  .btn-gear:focus-visible {
+    outline: 2px solid var(--ds-green-700);
+    outline-offset: 2px;
   }
-  :global(.btn-gear-active) {
-    --button-color: var(--component-bg);
-    --button-text-color: var(--text-primary);
+  .btn-gear-active {
+    background: var(--component-bg);
+    color: var(--text-primary);
   }
 
   .content-area {
     flex: 1;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
   }
 
   .bottom-tabs {
@@ -178,9 +213,9 @@
 
   /* Mobile: page headers stack vertically, buttons wrap */
   @media (max-width: 480px) {
-    :global(.btn-gear) {
-      --button-height: 44px;
-      --button-width: 44px;
+    .btn-gear {
+      height: 44px;
+      width: 44px;
     }
     .bottom-tabs {
       height: 60px;

package/src/routes/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import type { ShooterConfig } from '$lib/types/config';
+  import type { ProjectGroup, ShooterConfig } from '$generated/types';
 
   import { goto } from '$app/navigation';
-  import { Button, Pill, Shimmer } from '@juspay/svelte-ui-components';
   import {
+    clearCache,
     EmptyState,
     formatRelativeTime,
     getCached,
@@ -11,17 +11,10 @@
     isShooterConfig,
     setCache,
   } from '$lib/modules/client/common';
+  import { Banner, Button, Pill, Shimmer } from '@juspay/svelte-ui-components';
   import { onDestroy, onMount } from 'svelte';
 
-  interface ProjectGroup {
-    fullPath: string;
-    id: string;
-    lastModified: string;
-    name: string;
-    sessionCount: number;
-  }
-
-  const POLL_INTERVAL_MS = 30_000; // 30s - avoid heavy reflows
+  const POLL_INTERVAL_MS = 10_000;
   const PAGE_SIZE = 20;
 
   let projects = $state<ProjectGroup[]>([]);
@@ -29,6 +22,7 @@
   let fetching = false; // non-reactive guard to prevent overlapping fetches
   let config = $state<null | ShooterConfig>(null);
   let pollTimer: null | ReturnType<typeof setInterval> = null;
+  let fetchError = $state<null | string>(null);
   let hasMore = $state(false);
   let currentOffset = $state(0);
 
@@ -46,7 +40,7 @@
     void fetchSessions();
 
     pollTimer = setInterval(() => {
-      if (config?.apiKey) {
+      if (config?.apiKey && currentOffset <= PAGE_SIZE) {
         void fetchSessions();
       }
     }, POLL_INTERVAL_MS);
@@ -76,7 +70,7 @@
     }
   }
 
-  async function fetchSessions(append = false): Promise<void> {
+  async function fetchSessions(append = false, bustCache = false): Promise<void> {
     if (!config?.apiKey || fetching) {
       return;
     }
@@ -90,16 +84,19 @@
     const offset = append ? currentOffset : 0;
 
     try {
-      const response = await fetch(`/api/sessions?limit=${PAGE_SIZE}&offset=${offset}`, {
+      const base = bustCache ? '/api/sessions?refresh=true&' : '/api/sessions?';
+      const response = await fetch(`${base}limit=${PAGE_SIZE}&offset=${offset}`, {
         headers: {
           Authorization: `Bearer ${config.apiKey}`,
         },
       });
 
       if (!response.ok) {
+        fetchError = `Failed to load projects (HTTP ${response.status})`;
         return;
       }
 
+      fetchError = null;
       const result: { projects: ProjectGroup[]; total?: number } = await response.json();
       if (append) {
         projects = [...projects, ...result.projects];
@@ -110,6 +107,7 @@
       hasMore = result.total !== undefined ? projects.length < result.total : false;
       setCache('shooter_projects', projects);
     } catch (error) {
+      fetchError = 'Failed to load projects';
       console.error('Failed to fetch sessions:', error);
     } finally {
       loading = false;
@@ -123,8 +121,8 @@
 
   async function forceRefresh(): Promise<void> {
     loading = true;
-    sessionStorage.removeItem('shooter_projects');
-    await fetchSessions();
+    clearCache('shooter_projects');
+    await fetchSessions(false, true);
   }
 
   function navigateToConfig(): void {
@@ -150,15 +148,17 @@
       </div>
       <div class="page-actions">
         <Button classes="btn-secondary" onclick={forceRefresh} disabled={loading}>
-          {#snippet children()}
-            <Icon name="refresh" size={14} />
-            Refresh
-          {/snippet}
+          <Icon name="refresh" size={14} />
+          Refresh
         </Button>
       </div>
     </div>
   </div>
 
+  {#if fetchError}
+    <Banner text={fetchError} classes="banner-error" />
+  {/if}
+
   {#if loading && projects.length === 0}
     <div class="loading-container">
       {#each Array(5) as _, i (i)}
@@ -188,10 +188,13 @@
               <h3 class="session-card-title">{project.name}</h3>
               <div class="session-card-subtitle">{project.fullPath}</div>
             </div>
-            <Pill text={formatRelativeTime(project.lastModified)} classes="pill-session-time" />
+            <Pill text="Last updated {formatRelativeTime(project.lastModified)}" classes="pill-session-time" />
           </div>
           <div class="session-stats">
-            <span><strong>{project.sessionCount}</strong> {project.sessionCount === 1 ? 'session' : 'sessions'}</span>
+            <span
+              ><strong>{project.sessionCount}</strong>
+              {project.sessionCount === 1 ? 'session' : 'sessions'}</span
+            >
           </div>
         </a>
       {/each}

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

@@ -7,7 +7,9 @@ import type { RequestHandler } from './$types';
 
 export const GET: RequestHandler = ({ request }) => {
   const authError = validateAuth(request);
-  if (authError) {return authError;}
+  if (authError) {
+    return authError;
+  }
 
   const apnsClient = new LibraryAPNsService();
   const deviceToken = env.DEVICE_TOKEN?.trim();