@juspay/shooter 1.0.0 → 1.2.0

package/src/lib/modules/client/terminal/LaunchSheet.svelte

@@ -1,31 +1,23 @@
 <script lang="ts">
-  import { Banner, Button, Choicebox, Input, Select, Sheet } from '@juspay/svelte-ui-components';
+  import type { CreateTerminalResponse } from '$generated/types';
+
+  import { Banner, Button, Choicebox, Input, Select } from '@juspay/svelte-ui-components';
   import { onMount } from 'svelte';
 
   interface Props {
     apiKey: string;
     onClose: () => void;
-    onLaunch: (response: TerminalResponse) => void;
+    onLaunch: (response: CreateTerminalResponse) => void;
     open: boolean;
   }
 
-  interface TerminalResponse {
-    command: string;
-    createdAt: string;
-    cwd: string;
-    id: string;
-    pid: number;
-    sessionWs: string;
-    ws: string;
-  }
-
   interface Preset {
     args: string[];
     command: string;
     label: string;
   }
 
-  let { apiKey, onClose, onLaunch, open = $bindable() }: Props = $props();
+  const { apiKey, onClose, onLaunch, open }: Props = $props();
 
   const presets: Preset[] = [
     { args: [], command: 'claude', label: 'Claude Code' },
@@ -34,8 +26,7 @@
     { args: [], command: 'bash', label: 'Bash' },
   ];
 
-  let selectedPreset = $state<number>(0);
-  let customCommand = $state('');
+  let selectedPreset = $state(0);
   let projectPaths = $state<string[]>([]);
   let selectedCwd = $state('');
   let customCwd = $state('');
@@ -51,7 +42,9 @@
       const response = await fetch('/api/sessions?limit=50&offset=0', {
         headers: { Authorization: `Bearer ${apiKey}` },
       });
-      if (!response.ok) {return;}
+      if (!response.ok) {
+        return;
+      }
       const data: { projects: { fullPath: string }[] } = await response.json();
       const paths = data.projects
         .map((p) => p.fullPath)
@@ -69,33 +62,30 @@
     selectedPreset = index;
   }
 
-  function isCustom(): boolean {
-    return presets[selectedPreset].command === '';
-  }
-
   function getCommand(): string {
-    if (isCustom()) {return customCommand.trim().split(/\s+/)[0] || '';}
     return presets[selectedPreset].command;
   }
 
   function getArgs(): string[] {
-    if (isCustom()) {
-      const parts = customCommand.trim().split(/\s+/);
-      return parts.slice(1);
-    }
     return presets[selectedPreset].args;
   }
 
   function getEffectiveCwd(): string {
     const custom = customCwd.trim();
-    if (custom) {return custom;}
-    if (selectedCwd) {return selectedCwd;}
+    if (custom) {
+      return custom;
+    }
+    if (selectedCwd) {
+      return selectedCwd;
+    }
     return '/tmp';
   }
 
   async function handleLaunch(): Promise<void> {
     const command = getCommand();
-    if (!command) {return;}
+    if (!command) {
+      return;
+    }
 
     launching = true;
     launchError = '';
@@ -119,7 +109,7 @@
         return;
       }
 
-      const result: TerminalResponse = await response.json();
+      const result: CreateTerminalResponse = await response.json();
       onLaunch(result);
     } catch {
       launchError = 'Network error — is the server running?';
@@ -127,17 +117,34 @@
       launching = false;
     }
   }
+
+  function handleBackdropClick(event: MouseEvent): void {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (!open) {
+      return;
+    }
+    if (event.key === 'Escape') {
+      onClose();
+    }
+  }
 </script>
 
-<Sheet
-  bind:open
-  title="New Terminal"
-  side="bottom"
-  onclose={onClose}
-  classes="launch-sheet"
->
-  {#snippet content()}
-    <div class="launch-form">
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <div class="overlay" role="presentation" onclick={handleBackdropClick}>
+    <div class="sheet" role="dialog" aria-modal="true" aria-label="New Terminal">
+      <div class="handle-bar">
+        <div class="handle"></div>
+      </div>
+
+      <h2 class="sheet-title">New Terminal</h2>
+
       <div class="section">
         <span class="section-label">Quick Launch</span>
         <div class="preset-grid">
@@ -145,7 +152,9 @@
             <Choicebox
               mode="radio"
               selected={selectedPreset === i}
-              onclick={() => selectPreset(i)}
+              onclick={() => {
+                selectPreset(i);
+              }}
               classes="preset-choice"
             >
               {preset.label}
@@ -157,10 +166,14 @@
       <div class="section">
         <span class="section-label">Working Directory</span>
         <Select
-          items={projectPaths.length > 0 ? projectPaths.map((p) => ({ id: p, label: p })) : [{ id: '', label: 'No recent projects' }]}
-          value={selectedCwd ? [selectedCwd] : (projectPaths.length > 0 ? [projectPaths[0]] : [''])}
+          items={projectPaths.length > 0
+            ? projectPaths.map((p) => ({ id: p, label: p }))
+            : [{ id: '', label: 'No recent projects' }]}
+          value={selectedCwd ? [selectedCwd] : projectPaths.length > 0 ? [projectPaths[0]] : ['']}
           placeholder="Select a project"
-          onchange={(value) => { selectedCwd = value[0] || ''; }}
+          onchange={(value) => {
+            selectedCwd = value[0] || '';
+          }}
           classes="launch-select"
         />
         <div class="custom-cwd-group">
@@ -174,21 +187,9 @@
         </div>
       </div>
 
-      {#if isCustom()}
-        <div class="section">
-          <Input
-            label="Custom Command"
-            bind:value={customCommand}
-            dataType="text"
-            placeholder="e.g. node server.js"
-            classes="input-mono launch-input"
-          />
-        </div>
-      {/if}
-
       <Button
         classes="btn-launch"
-        disabled={launching || (!isCustom() ? false : !customCommand.trim())}
+        disabled={launching}
         onclick={handleLaunch}
         showLoader={launching}
         text={launching ? 'Launching...' : 'Launch Terminal'}
@@ -198,47 +199,95 @@
         <Banner text={launchError} classes="banner-error launch-error-banner" />
       {/if}
     </div>
-  {/snippet}
-</Sheet>
+  </div>
+{/if}
 
 <style>
-  :global(.launch-sheet) {
-    --sheet-background: var(--ds-gray-100);
-    --sheet-overlay-background: rgba(0, 0, 0, 0.6);
-    --sheet-overlay-z-index: 200;
-    --sheet-z-index: 201;
-    --sheet-height: auto;
-    --sheet-max-height: 90vh;
-    --sheet-box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
-    --sheet-header-padding: var(--space-4) var(--space-5);
-    --sheet-header-background: var(--ds-gray-100);
-    --sheet-header-border-bottom: none;
-    --sheet-title-font-size: var(--text-xl);
-    --sheet-title-font-weight: 600;
-    --sheet-title-color: var(--text-primary);
-    --sheet-content-padding: 0 var(--space-5) calc(var(--space-8, 32px) + env(safe-area-inset-bottom, 0px));
-    --sheet-close-button-color: var(--text-secondary);
-    --sheet-close-button-hover-background: var(--component-bg-hover);
-    --sheet-border: none;
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 200;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+  }
+
+  .sheet {
+    background: var(--ds-gray-100);
+    border-top-left-radius: var(--radius-xl);
+    border-top-right-radius: var(--radius-xl);
+    width: 100%;
+    max-height: 90vh;
+    overflow-y: auto;
+    padding: var(--space-4) var(--space-5)
+      calc(var(--space-8, 32px) + env(safe-area-inset-bottom, 0px));
+    animation: slideUp 0.25s ease;
   }
 
-  /* Desktop: max width */
+  @keyframes slideUp {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  /* Desktop: centered modal */
   @media (min-width: 768px) {
-    :global(.launch-sheet) {
-      --sheet-max-width: 480px;
+    .overlay {
+      align-items: center;
+    }
+
+    .sheet {
+      max-width: 480px;
+      border-radius: var(--radius-xl);
+      animation: fadeScale 0.2s ease;
+    }
+
+    @keyframes fadeScale {
+      from {
+        opacity: 0;
+        transform: scale(0.96);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
     }
   }
 
-  .launch-form {
+  .handle-bar {
     display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
+    justify-content: center;
+    padding-bottom: var(--space-3);
+  }
+
+  .handle {
+    width: 36px;
+    height: 4px;
+    border-radius: var(--radius-full);
+    background: var(--ds-gray-500);
+  }
+
+  /* Hide handle bar on desktop */
+  @media (min-width: 768px) {
+    .handle-bar {
+      display: none;
+    }
+  }
+
+  .sheet-title {
+    font-size: var(--text-xl);
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: var(--space-5);
+    letter-spacing: var(--tracking-tight);
   }
 
   .section {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
+    margin-bottom: var(--space-4);
   }
 
   .section-label {
@@ -248,6 +297,7 @@
     color: var(--text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.05em;
+    margin-bottom: var(--space-2);
   }
 
   .preset-grid {
@@ -271,6 +321,19 @@
 
   :global(.launch-select) {
     --select-height: 44px;
+    --select-trigger-background: var(--component-bg);
+    --select-trigger-border: 1px solid var(--border);
+    --select-trigger-hover-border-color: var(--border-hover);
+    --select-color: var(--text-primary);
+    --select-placeholder-color: var(--text-tertiary);
+    --select-arrow-color: var(--text-secondary);
+    --select-dropdown-background: var(--component-bg);
+    --select-dropdown-border: 1px solid var(--border);
+    --select-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    --select-option-color: var(--text-primary);
+    --select-option-hover-background: var(--component-bg-hover);
+    --select-option-selected-background: var(--component-bg-active);
+    margin-bottom: var(--space-2);
   }
 
   :global(.launch-input) {

package/src/lib/modules/client/terminal/QuickKeys.svelte

@@ -27,7 +27,9 @@
   {#each keys as k (k.label)}
     <Button
       classes="btn-quick-key"
-      onclick={() => { onKey(k.escape); }}
+      onclick={() => {
+        onKey(k.escape);
+      }}
       text={k.label}
     />
   {/each}

package/src/lib/modules/client/terminal/ShortcutsHelp.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { KeyboardInput, Modal } from '@juspay/svelte-ui-components';
+
   import { getShortcutList } from './keyboard-shortcuts';
 
   interface Props {
@@ -12,11 +13,7 @@
 </script>
 
 {#if open}
-  <Modal
-    header={{ text: 'Keyboard Shortcuts' }}
-    onoverlayClick={onClose}
-    classes="shortcuts-modal"
-  >
+  <Modal header={{ text: 'Keyboard Shortcuts' }} onoverlayClick={onClose} classes="shortcuts-modal">
     {#snippet content()}
       <div class="shortcuts-list">
         {#each shortcuts as shortcut (shortcut.keys)}

package/src/lib/modules/client/terminal/keyboard-shortcuts.ts

@@ -6,42 +6,25 @@
  */
 
 export const isMac =
-  typeof navigator !== 'undefined' &&
-  /Mac|iPhone|iPad/.test(navigator.userAgent);
+  typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent);
 
 export const modLabel = isMac ? '⌘' : 'Ctrl';
 
-export interface ShortcutAction {
-  action: () => void;
-  description: string;
-  key: string;
-  label: string;
-  shift?: boolean;
-}
-
 interface ShortcutManagerOptions {
   onHelp: () => void;
 }
 
-/** Returns true when focus is inside a text input, textarea, or contenteditable. */
-function isTextInputFocused(): boolean {
-  const el = document.activeElement;
-  if (!el) { return false; }
-  const tag = el.tagName;
-  if (tag === 'INPUT' || tag === 'TEXTAREA') { return true; }
-  if ((el as HTMLElement).isContentEditable) { return true; }
-  // xterm's terminal container
-  if (el.closest('.xterm')) { return true; }
-  return false;
-}
-
 export function createShortcutManager(options: ShortcutManagerOptions) {
   function handler(e: KeyboardEvent) {
     const mod = isMac ? e.metaKey : e.ctrlKey;
-    if (!mod) { return; }
+    if (!mod) {
+      return;
+    }
 
     // Don't intercept when a text input or the terminal is focused
-    if (isTextInputFocused()) { return; }
+    if (isTextInputFocused()) {
+      return;
+    }
 
     // Cmd+/ — show help overlay
     if (e.key === '/') {
@@ -68,3 +51,23 @@ export function getShortcutList(): { description: string; keys: string }[] {
     { description: 'Keyboard shortcuts', keys: `${modLabel}+/` },
   ];
 }
+
+/** Returns true when focus is inside a text input, textarea, or contenteditable. */
+function isTextInputFocused(): boolean {
+  const el = document.activeElement;
+  if (!el) {
+    return false;
+  }
+  const tag = el.tagName;
+  if (tag === 'INPUT' || tag === 'TEXTAREA') {
+    return true;
+  }
+  if ((el as HTMLElement).isContentEditable) {
+    return true;
+  }
+  // xterm's terminal container
+  if (el.closest('.xterm')) {
+    return true;
+  }
+  return false;
+}

package/src/lib/modules/client/terminal/xterm-wrapper.ts

@@ -1,11 +1,12 @@
 // IMPORTANT: This module must NEVER be imported at module top level in a Svelte component.
 // Always call createTerminal() inside onMount() only.
 
+import type { FitAddon } from '@xterm/addon-fit';
 import type { Terminal } from '@xterm/xterm';
 
 interface TerminalInstance {
   dispose: () => void;
-  fitAddon: any; // FitAddon type
+  fitAddon: FitAddon | null;
   sendInput: (data: string) => void;
   term: Terminal;
 }
@@ -73,12 +74,17 @@ export async function createTerminal(options: TerminalOptions): Promise<Terminal
 
   // Block browser-level Cmd/Ctrl shortcuts from reaching the PTY.
   // Allow Ctrl+<letter> terminal signals (Ctrl+C/D/L/R/Z etc.) through.
-  const browserShortcuts = new Set(['s', 'w', 't', 'n', 'p', 'q', 'h', 'j', 'f', 'g', 'o', 'u']);
+  const browserShortcuts = new Set(['f', 'g', 'h', 'j', 'n', 'o', 'p', 'q', 's', 't', 'u', 'w']);
   term.attachCustomKeyEventHandler((e) => {
+    const key = e.key.toLowerCase();
     // Cmd+key on Mac: block known browser shortcuts, allow the rest
     if (e.metaKey) {
-      if (e.key === 'c' || e.key === 'v') { return true; } // allow copy/paste
-      if (browserShortcuts.has(e.key)) { return false; }    // block browser shortcuts
+      if (key === 'c' || key === 'v') {
+        return true;
+      } // allow copy/paste
+      if (browserShortcuts.has(key)) {
+        return false;
+      } // block browser shortcuts
       return true;
     }
     // Ctrl+key (non-Mac modifier): allow all through to PTY (Ctrl+C/D/L/R/Z etc.)
@@ -91,42 +97,52 @@ export async function createTerminal(options: TerminalOptions): Promise<Terminal
     const pasteTermId = options.terminalId;
     const pasteApiKey = options.apiKey;
 
-    pasteListener = async (e: ClipboardEvent) => {
-      try {
-        if (!e.clipboardData) return;
-        const items = Array.from(e.clipboardData.items);
-        const imageItem = items.find(item => item.type.startsWith('image/'));
-        if (!imageItem) return; // No image — let normal paste proceed
-
-        e.preventDefault();
-        const blob = imageItem.getAsFile();
-        if (!blob) return;
-
-        // Read image as base64
-        const reader = new FileReader();
-        const base64 = await new Promise<string>((resolve, reject) => {
-          reader.onload = () => resolve(reader.result as string);
-          reader.onerror = reject;
-          reader.readAsDataURL(blob);
-        });
-
-        // Upload to server
-        const res = await fetch(`/api/terminals/${pasteTermId}/paste-image`, {
-          method: 'POST',
-          headers: {
-            'Authorization': `Bearer ${pasteApiKey}`,
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({ image: base64 }),
-        });
-
-        // Send Ctrl+V (0x16) to PTY only after a successful upload
-        if (res.ok && ws?.readyState === WebSocket.OPEN) {
-          ws.send(JSON.stringify({ data: '\x16', type: 'input' }));
+    pasteListener = (e: ClipboardEvent) => {
+      void (async () => {
+        try {
+          if (!e.clipboardData) {
+            return;
+          }
+          const items = Array.from(e.clipboardData.items);
+          const imageItem = items.find((item) => item.type.startsWith('image/'));
+          if (!imageItem) {
+            return;
+          } // No image — let normal paste proceed
+
+          const blob = imageItem.getAsFile();
+          if (!blob) {
+            return;
+          }
+          e.preventDefault();
+
+          // Read image as base64
+          const reader = new FileReader();
+          const base64 = await new Promise<string>((resolve, reject) => {
+            reader.onload = () => {
+              resolve(reader.result as string);
+            };
+            reader.onerror = reject;
+            reader.readAsDataURL(blob);
+          });
+
+          // Upload to server
+          const res = await fetch(`/api/terminals/${pasteTermId}/paste-image`, {
+            body: JSON.stringify({ image: base64 }),
+            headers: {
+              Authorization: `Bearer ${pasteApiKey}`,
+              'Content-Type': 'application/json',
+            },
+            method: 'POST',
+          });
+
+          // Send Ctrl+V (0x16) to PTY only after a successful upload
+          if (res.ok && ws?.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ data: '\x16', type: 'input' }));
+          }
+        } catch {
+          // Silent failure — don't break text paste
         }
-      } catch {
-        // Silent failure — don't break text paste
-      }
+      })();
     };
 
     options.container.addEventListener('paste', pasteListener as EventListener);
@@ -139,7 +155,9 @@ export async function createTerminal(options: TerminalOptions): Promise<Terminal
   let disposed = false;
 
   async function connect() {
-    if (disposed) {return;}
+    if (disposed) {
+      return;
+    }
 
     let ticket: string;
     try {
@@ -156,7 +174,9 @@ export async function createTerminal(options: TerminalOptions): Promise<Terminal
       return;
     }
 
-    if (disposed) {return;}
+    if (disposed) {
+      return;
+    }
 
     ws = new WebSocket(`${options.wsUrl}?ticket=${ticket}`);
 
@@ -175,7 +195,9 @@ export async function createTerminal(options: TerminalOptions): Promise<Terminal
         term.write(`\r\n\x1b[90m[Process exited with code ${msg.code}]\x1b[0m\r\n`);
         // Process exited — stop reconnection and notify parent
         disposed = true;
-        if (reconnectTimer) {clearTimeout(reconnectTimer);}
+        if (reconnectTimer) {
+          clearTimeout(reconnectTimer);
+        }
         options.onExit?.(msg.code);
       } else if (msg.type === 'output-dropped') {
         term.write(`\r\n\x1b[33m[${msg.bytes} bytes dropped]\x1b[0m\r\n`);
@@ -187,7 +209,9 @@ export async function createTerminal(options: TerminalOptions): Promise<Terminal
     };
 
     ws.onclose = () => {
-      if (disposed) {return;}
+      if (disposed) {
+        return;
+      }
       options.onDisconnect?.();
       // Exponential backoff reconnect
       reconnectTimer = setTimeout(() => {
@@ -206,8 +230,11 @@ export async function createTerminal(options: TerminalOptions): Promise<Terminal
     }
   });
 
-  // Handle resize
+  // Handle resize — skip when container is hidden (display:none → size 0)
   const resizeObserver = new ResizeObserver(() => {
+    if (!options.container.offsetWidth || !options.container.offsetHeight) {
+      return;
+    }
     fitAddon.fit();
     if (ws?.readyState === WebSocket.OPEN) {
       ws.send(JSON.stringify({ cols: term.cols, rows: term.rows, type: 'resize' }));
@@ -217,7 +244,9 @@ export async function createTerminal(options: TerminalOptions): Promise<Terminal
 
   function dispose() {
     disposed = true;
-    if (reconnectTimer) {clearTimeout(reconnectTimer);}
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+    }
     if (pasteListener) {
       options.container.removeEventListener('paste', pasteListener as EventListener);
     }

package/src/lib/modules/server/apn/library-apns.ts

@@ -4,6 +4,8 @@ import apn from '@parse/node-apn';
 
 import type { LibraryResult as APNsLibraryResult, NotificationPayload } from './types';
 
+import { toErrorMessage } from '../utils/error';
+
 export class LibraryAPNsService {
   private bundleId: string | undefined;
   private configured = false;
@@ -41,8 +43,7 @@ export class LibraryAPNsService {
       this.configured = true;
       console.log(`[apns] Provider initialized (${production ? 'production' : 'sandbox'} mode)`);
     } catch (error) {
-      const err = error as Error;
-      console.error('[apns] Failed to create provider:', err.message);
+      console.error('[apns] Failed to create provider:', toErrorMessage(error));
       this.configured = false;
     }
   }