@juspay/shooter 1.0.0

package/src/generated/types/index.ts

@@ -0,0 +1,6 @@
+export * from './APN';
+export * from './Apn';
+export * from './CLI';
+export * from './Cli';
+export * from './JWT';
+export * from './Terminal';

package/src/lib/assets/icons/alert-triangle.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+  <line x1="12" y1="9" x2="12" y2="13"/>
+  <line x1="12" y1="17" x2="12.01" y2="17"/>
+</svg>

package/src/lib/assets/icons/bell.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
+  <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
+</svg>

package/src/lib/assets/icons/check-circle.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+  <polyline points="22 4 12 14.01 9 11.01"/>
+</svg>

package/src/lib/assets/icons/file.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+  <polyline points="14 2 14 8 20 8"/>
+</svg>

package/src/lib/assets/icons/folder.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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"/>
+</svg>

package/src/lib/assets/icons/play.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polygon points="5 3 19 12 5 21 5 3"/>
+</svg>

package/src/lib/assets/icons/refresh.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M23 4v6h-6M1 20v-6h6"/>
+  <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+</svg>

package/src/lib/assets/icons/settings.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" 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"/>
+  <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 .33-1.82 1.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 1.82.33H9a1.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-.33 1.82V9a1.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"/>
+</svg>

package/src/lib/assets/icons/terminal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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>

package/src/lib/assets/icons/tool.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
+</svg>

package/src/lib/assets/icons/x-circle.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"/>
+  <line x1="15" y1="9" x2="9" y2="15"/>
+  <line x1="9" y1="9" x2="15" y2="15"/>
+</svg>

package/src/lib/modules/client/common/Card.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children: Snippet;
+    class?: string;
+    description?: string;
+    title?: string;
+  }
+
+  const { children, class: className = '', description, title }: Props = $props();
+</script>
+
+<div class="card {className}">
+  {#if title}
+    <div class="card-header">
+      <h2 class="card-title">{title}</h2>
+      {#if description}
+        <p class="card-description">{description}</p>
+      {/if}
+    </div>
+  {/if}
+  <div class="card-content">
+    {@render children()}
+  </div>
+</div>

package/src/lib/modules/client/common/EmptyState.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  import Icon from './Icon.svelte';
+
+  interface Props {
+    children?: Snippet;
+    description: string;
+    icon:
+      | 'alert-triangle'
+      | 'bell'
+      | 'check-circle'
+      | 'file'
+      | 'folder'
+      | 'play'
+      | 'refresh'
+      | 'settings'
+      | 'terminal'
+      | 'tool'
+      | 'x-circle';
+    title: string;
+  }
+
+  const { children, description, icon, title }: Props = $props();
+</script>
+
+<div class="empty-state">
+  <div class="empty-state-icon">
+    <Icon name={icon} size={24} />
+  </div>
+  <h3 class="empty-state-title">{title}</h3>
+  <p class="empty-state-description">{description}</p>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/src/lib/modules/client/common/Icon.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import AlertTriangle from '$lib/assets/icons/alert-triangle.svg?raw';
+  import Bell from '$lib/assets/icons/bell.svg?raw';
+  import CheckCircle from '$lib/assets/icons/check-circle.svg?raw';
+  import File from '$lib/assets/icons/file.svg?raw';
+  import Folder from '$lib/assets/icons/folder.svg?raw';
+  import Play from '$lib/assets/icons/play.svg?raw';
+  import Refresh from '$lib/assets/icons/refresh.svg?raw';
+  import Settings from '$lib/assets/icons/settings.svg?raw';
+  import Terminal from '$lib/assets/icons/terminal.svg?raw';
+  import Tool from '$lib/assets/icons/tool.svg?raw';
+  import XCircle from '$lib/assets/icons/x-circle.svg?raw';
+
+  const icons: Record<string, string> = {
+    'alert-triangle': AlertTriangle,
+    bell: Bell,
+    'check-circle': CheckCircle,
+    file: File,
+    folder: Folder,
+    play: Play,
+    refresh: Refresh,
+    settings: Settings,
+    terminal: Terminal,
+    tool: Tool,
+    'x-circle': XCircle,
+  };
+
+  interface Props {
+    class?: string;
+    name: keyof typeof icons;
+    size?: number;
+  }
+
+  const { class: className = '', name, size = 16 }: Props = $props();
+
+  const svgContent = $derived(icons[name] || '');
+</script>
+
+<span
+  class="icon {className}"
+  style="width: {size}px; height: {size}px;"
+  role="img"
+  aria-hidden="true"
+>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -- SVG content is from trusted local assets -->
+  {@html svgContent}
+</span>
+
+<style>
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/src/lib/modules/client/common/StatusBadge.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  interface Props {
+    status: 'degraded' | 'error' | 'healthy' | 'unknown';
+  }
+
+  const { status }: Props = $props();
+
+  function getStatusLabel(s: string): string {
+    switch (s) {
+      case 'degraded':
+        return 'Degraded';
+      case 'error':
+        return 'Offline';
+      case 'healthy':
+        return 'Online';
+      default:
+        return 'Checking';
+    }
+  }
+
+  function getStatusClass(s: string): string {
+    switch (s) {
+      case 'degraded':
+        return 'degraded';
+      case 'error':
+        return 'offline';
+      case 'healthy':
+        return 'online';
+      default:
+        return '';
+    }
+  }
+</script>
+
+<div class="status-badge {getStatusClass(status)}">
+  <span class="status-dot"></span>
+  <span>{getStatusLabel(status)}</span>
+</div>

package/src/lib/modules/client/common/cache.ts

@@ -0,0 +1,31 @@
+/**
+ * Shared sessionStorage cache helpers.
+ *
+ * Default TTL is 30 seconds. Callers may override per-call.
+ */
+
+const DEFAULT_TTL_MS = 30_000;
+
+export function getCached(key: string, ttlMs: number = DEFAULT_TTL_MS): unknown {
+  try {
+    const item = sessionStorage.getItem(key);
+    if (!item) {
+      return null;
+    }
+    const { data, timestamp } = JSON.parse(item) as { data: unknown; timestamp: number };
+    if (Date.now() - timestamp > ttlMs) {
+      return null;
+    }
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+export function setCache(key: string, data: unknown): void {
+  try {
+    sessionStorage.setItem(key, JSON.stringify({ data, timestamp: Date.now() }));
+  } catch {
+    // sessionStorage full — silently ignore
+  }
+}

package/src/lib/modules/client/common/config-guard.ts

@@ -0,0 +1,18 @@
+/**
+ * Type guard for ShooterConfig objects stored in localStorage.
+ *
+ * The stricter variant (used on the config page) validates that apiKey
+ * and deviceToken are strings. The simpler variant only checks key
+ * presence. This implementation uses the stricter check so all
+ * consumers benefit from the extra safety.
+ */
+
+import type { ShooterConfig } from '$lib/types/config';
+
+export function isShooterConfig(value: unknown): value is ShooterConfig {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  const obj = value as Record<string, unknown>;
+  return typeof obj.apiKey === 'string' && typeof obj.deviceToken === 'string';
+}

package/src/lib/modules/client/common/index.ts

@@ -0,0 +1,12 @@
+export { default as Card } from './Card.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as StatusBadge } from './StatusBadge.svelte';
+
+// Shared client utilities
+export { getCached, setCache } from './cache';
+export { isShooterConfig } from './config-guard';
+export { renderMarkdown } from './markdown';
+export { hasScanner, isNativeBridge, scanQR } from './native-bridge';
+export { formatRelativeTime } from './time';
+export { getToolDescription } from './tool-title';

package/src/lib/modules/client/common/markdown.ts

@@ -0,0 +1,23 @@
+/**
+ * Shared Markdown rendering utility.
+ *
+ * Uses `marked` for parsing and `DOMPurify` for sanitisation.
+ * Callers should import this instead of duplicating the setup.
+ */
+
+import DOMPurify from 'dompurify';
+import { marked } from 'marked';
+
+// Configure marked once at module level
+marked.setOptions({
+  breaks: true,
+  gfm: true,
+});
+
+export function renderMarkdown(text: string): string {
+  if (!text) {
+    return '';
+  }
+  const html = marked.parse(text) as string;
+  return DOMPurify.sanitize(html);
+}

package/src/lib/modules/client/common/native-bridge.ts

@@ -0,0 +1,50 @@
+/**
+ * Native bridge utilities for detecting and communicating with
+ * the ShooterBridge injected by native WebView wrappers (iOS/Android).
+ *
+ * The native side injects window.ShooterBridge at documentStart with its own
+ * callback-ID system (window.ShooterBridge._callbacks + window.handleNativeResponse).
+ * This module MUST NOT override handleNativeResponse — the native version handles
+ * resolving scanner/picker promises using its own callback registry.
+ */
+
+/** True when the page is running inside a native WebView with a bridge */
+export function isNativeBridge(): boolean {
+  if (typeof window === 'undefined') return false;
+  // iOS injects window.ShooterBridge, Android injects window.ShooterNativeBridge
+  return (
+    (typeof window.ShooterBridge === 'object' && window.ShooterBridge !== null) ||
+    (typeof (window as any).ShooterNativeBridge === 'object' && (window as any).ShooterNativeBridge !== null)
+  );
+}
+
+/** Get the scanner.scan function from whichever bridge exists */
+function getScanFn(): (() => Promise<string>) | null {
+  if (typeof window === 'undefined') return null;
+  // Check iOS bridge first, then Android
+  if (typeof window.ShooterBridge?.scanner?.scan === 'function') {
+    return () => window.ShooterBridge!.scanner!.scan();
+  }
+  if (typeof (window as any).ShooterNativeBridge?.scanner?.scan === 'function') {
+    return () => (window as any).ShooterNativeBridge.scanner.scan();
+  }
+  return null;
+}
+
+/** True when the native bridge exposes a QR scanner */
+export function hasScanner(): boolean {
+  return getScanFn() !== null;
+}
+
+/**
+ * Invoke the native QR scanner.
+ * Returns the scanned string on success, throws on cancel/error.
+ * The Promise is managed entirely by the native bridge's callback system.
+ */
+export async function scanQR(): Promise<string> {
+  const scan = getScanFn();
+  if (!scan) {
+    throw new Error('Scanner not available');
+  }
+  return scan();
+}

package/src/lib/modules/client/common/time.ts

@@ -0,0 +1,22 @@
+/**
+ * Relative time formatting utility.
+ *
+ * Converts an ISO 8601 timestamp string into a human-friendly
+ * relative label such as "just now", "5m ago", "2h ago", or "3d ago".
+ */
+
+export function formatRelativeTime(ts: string): string {
+  const diff = Date.now() - new Date(ts).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) {
+    return 'just now';
+  }
+  if (mins < 60) {
+    return `${mins}m ago`;
+  }
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) {
+    return `${hrs}h ago`;
+  }
+  return `${Math.floor(hrs / 24)}d ago`;
+}

package/src/lib/modules/client/common/tool-title.ts

@@ -0,0 +1,28 @@
+/**
+ * Human-readable one-line description for a tool invocation.
+ *
+ * Accepts the tool name and its input record and returns a short
+ * summary string suitable for display in a chat UI.
+ */
+
+export function getToolDescription(toolName: string, input: Record<string, unknown>): string {
+  if (toolName === 'Bash') {
+    return (input.command as string) || (input.description as string) || '';
+  }
+  if (toolName === 'Read') {
+    return (input.file_path as string) || '';
+  }
+  if (toolName === 'Edit' || toolName === 'Write') {
+    return (input.file_path as string) || '';
+  }
+  if (toolName === 'Grep') {
+    return (input.pattern as string) || '';
+  }
+  if (toolName === 'Glob') {
+    return (input.pattern as string) || '';
+  }
+  if (toolName === 'Agent') {
+    return (input.description as string) || (input.prompt as string)?.slice(0, 50) || '';
+  }
+  return JSON.stringify(input).slice(0, 60);
+}