@juspay/shooter 1.0.0

package/src/routes/+layout.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+  import '../app.css';
+  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';
+
+  const { children }: { children: Snippet } = $props();
+
+  let systemStatus = $state<'degraded' | 'error' | 'healthy' | 'unknown'>('unknown');
+
+  onMount(() => {
+    void checkSystemStatus();
+    const interval = setInterval(() => {
+      void checkSystemStatus();
+    }, 30000);
+    return (): void => {
+      clearInterval(interval);
+    };
+  });
+
+  async function checkSystemStatus(): Promise<void> {
+    try {
+      const response = await fetch('/api/health');
+      if (!response.ok) {
+        systemStatus = 'error';
+        return;
+      }
+      const data = (await response.json()) as { status?: string };
+      systemStatus =
+        data.status === 'healthy' || data.status === 'degraded' || data.status === 'error'
+          ? data.status
+          : 'unknown';
+    } catch {
+      systemStatus = 'error';
+    }
+  }
+</script>
+
+<div class="app">
+  <!-- Top bar: Logo + Status + Gear -->
+  <header class="header">
+    <div class="header-content">
+      <a href="/" class="logo">
+        <img src="/app-icon.png" alt="Shooter" class="logo-icon" width="24" height="24" />
+        <span class="logo-text">Shooter</span>
+      </a>
+
+      <div class="nav-right">
+        <StatusBadge status={systemStatus} />
+        <Button
+          classes="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>
+      </div>
+    </div>
+  </header>
+
+  <!-- Scrollable content area -->
+  <div class="content-area">
+    {@render children()}
+  </div>
+
+  <!-- Bottom tab bar: Projects + Terminals -->
+  <nav class="bottom-tabs">
+    <div class="bottom-tabs-inner">
+      <a
+        href="/"
+        class="tab-item"
+        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>
+        <span>Projects</span>
+      </a>
+      <a
+        href="/terminals"
+        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">
+          <polyline points="4 17 10 11 4 5"></polyline>
+          <line x1="12" y1="19" x2="20" y2="19"></line>
+        </svg>
+        <span>Terminals</span>
+      </a>
+    </div>
+  </nav>
+</div>
+
+<style>
+  .nav-right {
+    display: flex;
+    align-items: center;
+    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);
+  }
+  :global(.btn-gear-active) {
+    --button-color: var(--component-bg);
+    --button-text-color: var(--text-primary);
+  }
+
+  .content-area {
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .bottom-tabs {
+    height: 64px;
+    background: var(--background);
+    border-top: 1px solid var(--border);
+    flex-shrink: 0;
+    z-index: 100;
+    padding-bottom: env(safe-area-inset-bottom, 0);
+  }
+  .bottom-tabs-inner {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 6px var(--space-4) 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: 100%;
+    box-sizing: border-box;
+  }
+  .tab-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 500;
+    text-decoration: none;
+    padding: 6px 36px;
+    border-radius: var(--radius-md);
+    transition: color var(--transition-fast);
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    min-height: 48px;
+  }
+  .tab-item:hover {
+    color: var(--text-secondary);
+  }
+  .tab-item.active {
+    color: var(--ds-green-700);
+  }
+  .tab-item :global(svg) {
+    width: 26px;
+    height: 26px;
+    flex-shrink: 0;
+  }
+
+  /* Mobile: page headers stack vertically, buttons wrap */
+  @media (max-width: 480px) {
+    :global(.btn-gear) {
+      --button-height: 44px;
+      --button-width: 44px;
+    }
+    .bottom-tabs {
+      height: 60px;
+    }
+    .tab-item {
+      padding: 6px 28px;
+      font-size: 10px;
+      gap: 3px;
+      min-height: 44px;
+    }
+    .tab-item :global(svg) {
+      width: 24px;
+      height: 24px;
+    }
+
+    :global(.status-badge) {
+      font-size: 10px;
+      padding: 0 8px;
+      height: 22px;
+    }
+
+    /* Fix squashed buttons on mobile */
+    :global(.page-header) {
+      flex-direction: column !important;
+      gap: var(--space-3) !important;
+    }
+    :global(.page-header .btn-group) {
+      width: 100%;
+    }
+    :global(.page-header .btn-group .btn) {
+      flex: 1;
+      justify-content: center;
+    }
+  }
+</style>

package/src/routes/+page.svelte

@@ -0,0 +1,261 @@
+<script lang="ts">
+  import type { ShooterConfig } from '$lib/types/config';
+
+  import { goto } from '$app/navigation';
+  import { Button, Pill, Shimmer } from '@juspay/svelte-ui-components';
+  import {
+    EmptyState,
+    formatRelativeTime,
+    getCached,
+    Icon,
+    isShooterConfig,
+    setCache,
+  } from '$lib/modules/client/common';
+  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 PAGE_SIZE = 20;
+
+  let projects = $state<ProjectGroup[]>([]);
+  let loading = $state(false);
+  let fetching = false; // non-reactive guard to prevent overlapping fetches
+  let config = $state<null | ShooterConfig>(null);
+  let pollTimer: null | ReturnType<typeof setInterval> = null;
+  let hasMore = $state(false);
+  let currentOffset = $state(0);
+
+  onMount(() => {
+    loadConfiguration();
+
+    // Show cached data immediately
+    const cached = getCached('shooter_projects') as null | ProjectGroup[];
+    if (cached) {
+      projects = cached;
+      loading = false;
+    }
+
+    // Then fetch fresh data in background
+    void fetchSessions();
+
+    pollTimer = setInterval(() => {
+      if (config?.apiKey) {
+        void fetchSessions();
+      }
+    }, POLL_INTERVAL_MS);
+  });
+
+  onDestroy(() => {
+    if (pollTimer) {
+      clearInterval(pollTimer);
+      pollTimer = null;
+    }
+  });
+
+  function loadConfiguration(): void {
+    try {
+      const saved = localStorage.getItem('shooter_config');
+      if (saved) {
+        const parsed: unknown = JSON.parse(saved);
+        if (isShooterConfig(parsed)) {
+          config = parsed;
+        } else {
+          localStorage.removeItem('shooter_config');
+          config = null;
+        }
+      }
+    } catch {
+      // No configuration found — expected on first visit
+    }
+  }
+
+  async function fetchSessions(append = false): Promise<void> {
+    if (!config?.apiKey || fetching) {
+      return;
+    }
+    fetching = true;
+
+    // Don't show loading spinner if we already have cached data
+    if (projects.length === 0) {
+      loading = true;
+    }
+
+    const offset = append ? currentOffset : 0;
+
+    try {
+      const response = await fetch(`/api/sessions?limit=${PAGE_SIZE}&offset=${offset}`, {
+        headers: {
+          Authorization: `Bearer ${config.apiKey}`,
+        },
+      });
+
+      if (!response.ok) {
+        return;
+      }
+
+      const result: { projects: ProjectGroup[]; total?: number } = await response.json();
+      if (append) {
+        projects = [...projects, ...result.projects];
+      } else {
+        projects = result.projects;
+      }
+      currentOffset = projects.length;
+      hasMore = result.total !== undefined ? projects.length < result.total : false;
+      setCache('shooter_projects', projects);
+    } catch (error) {
+      console.error('Failed to fetch sessions:', error);
+    } finally {
+      loading = false;
+      fetching = false;
+    }
+  }
+
+  async function loadMore(): Promise<void> {
+    await fetchSessions(true);
+  }
+
+  async function forceRefresh(): Promise<void> {
+    loading = true;
+    sessionStorage.removeItem('shooter_projects');
+    await fetchSessions();
+  }
+
+  function navigateToConfig(): void {
+    void goto('/config');
+  }
+
+  function totalSessionCount(): number {
+    return projects.reduce((sum, p) => sum + p.sessionCount, 0);
+  }
+</script>
+
+<svelte:head>
+  <title>Projects - Shooter</title>
+  <meta name="description" content="Claude Code sessions across all projects" />
+</svelte:head>
+
+<main class="main">
+  <div class="page-header">
+    <div class="page-header-content">
+      <div>
+        <h1 class="page-title">Projects</h1>
+        <p class="page-description">Claude Code sessions across all projects</p>
+      </div>
+      <div class="page-actions">
+        <Button classes="btn-secondary" onclick={forceRefresh} disabled={loading}>
+          {#snippet children()}
+            <Icon name="refresh" size={14} />
+            Refresh
+          {/snippet}
+        </Button>
+      </div>
+    </div>
+  </div>
+
+  {#if loading && projects.length === 0}
+    <div class="loading-container">
+      {#each Array(5) as _, i (i)}
+        <Shimmer classes="shimmer-card" />
+      {/each}
+    </div>
+  {:else if !config?.apiKey}
+    <EmptyState
+      icon="settings"
+      title="Configuration Required"
+      description="Set up your API credentials to start tracking sessions"
+    >
+      <Button classes="btn-primary" onclick={navigateToConfig} text="Configure Settings" />
+    </EmptyState>
+  {:else if totalSessionCount() === 0}
+    <EmptyState
+      icon="bell"
+      title="No sessions yet"
+      description="Claude Code sessions will appear here once JSONL files are found"
+    />
+  {:else}
+    <div class="projects-container">
+      {#each projects as project (project.id)}
+        <a href="/project?id={project.id}" class="session-card">
+          <div class="session-card-header">
+            <div>
+              <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" />
+          </div>
+          <div class="session-stats">
+            <span><strong>{project.sessionCount}</strong> {project.sessionCount === 1 ? 'session' : 'sessions'}</span>
+          </div>
+        </a>
+      {/each}
+    </div>
+    {#if hasMore}
+      <div style="text-align: center; padding: 1rem;">
+        <Button classes="btn-secondary" onclick={loadMore} text="Load More" />
+      </div>
+    {/if}
+  {/if}
+</main>
+
+<style>
+  .page-header {
+    margin-bottom: var(--space-6);
+  }
+
+  .page-header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--space-4);
+  }
+
+  .page-title {
+    font-size: var(--text-2xl);
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: var(--text-primary);
+    margin-bottom: var(--space-1);
+  }
+
+  .page-description {
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+  }
+
+  .page-actions {
+    display: flex;
+    gap: var(--space-2);
+    flex-shrink: 0;
+  }
+
+  .projects-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    animation: fadeIn 0.2s ease;
+  }
+
+  @media (max-width: 768px) {
+    .page-header-content {
+      flex-direction: column;
+      gap: var(--space-4);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .page-actions {
+      width: 100%;
+    }
+
+    .page-actions :global(button) {
+      flex: 1;
+    }
+  }
+</style>

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

@@ -0,0 +1,33 @@
+import { env } from '$env/dynamic/private';
+import { LibraryAPNsService } from '$lib/modules/server/apn/library-apns';
+import { validateAuth } from '$lib/modules/server/auth';
+import { json } from '@sveltejs/kit';
+
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = ({ request }) => {
+  const authError = validateAuth(request);
+  if (authError) {return authError;}
+
+  const apnsClient = new LibraryAPNsService();
+  const deviceToken = env.DEVICE_TOKEN?.trim();
+
+  return json({
+    apns: {
+      configured: apnsClient.isConfigured(),
+      environment: env.APNS_PRODUCTION === 'true' ? 'production' : 'sandbox',
+      hasBundleId: !!env.APNS_BUNDLE_ID,
+      hasKey: !!env.APNS_KEY,
+      hasKeyId: !!env.APNS_KEY_ID,
+      hasTeamId: !!env.APNS_TEAM_ID,
+    },
+    deviceToken: {
+      exists: !!deviceToken,
+      length: deviceToken ? deviceToken.length : 0,
+      valid: deviceToken ? /^[a-f0-9]{64}$/i.test(deviceToken) : false,
+    },
+    environment: env.NODE_ENV || 'development',
+    hasApiKey: !!env.API_KEY,
+    timestamp: new Date().toISOString(),
+  });
+};

package/src/routes/api/device-token/+server.ts

@@ -0,0 +1,85 @@
+import { env } from '$env/dynamic/private';
+import { validateAuth } from '$lib/modules/server/auth';
+import { json } from '@sveltejs/kit';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
+import { homedir } from 'os';
+import { join } from 'path';
+
+import type { RequestHandler } from './$types';
+
+interface DeviceTokens {
+	android?: string;
+	ios?: string;
+}
+
+interface DeviceTokenRequest {
+	bundleId?: string;
+	deviceToken?: string;
+	platform: string;
+	token?: string;
+}
+
+const TOKENS_DIR = join(homedir(), '.shooter');
+const TOKENS_FILE = join(TOKENS_DIR, 'device-tokens.json');
+
+function readTokens(): DeviceTokens {
+	try {
+		if (existsSync(TOKENS_FILE)) {
+			return JSON.parse(readFileSync(TOKENS_FILE, 'utf-8'));
+		}
+	} catch {
+		// Corrupt file — start fresh
+	}
+	return {};
+}
+
+function writeTokens(tokens: DeviceTokens): void {
+	if (!existsSync(TOKENS_DIR)) {
+		mkdirSync(TOKENS_DIR, { recursive: true });
+	}
+	writeFileSync(TOKENS_FILE, JSON.stringify(tokens, null, 2), 'utf-8');
+}
+
+export const POST: RequestHandler = async ({ request }) => {
+	const authError = validateAuth(request);
+	if (authError) return authError;
+
+	let body: DeviceTokenRequest;
+	try {
+		body = await request.json();
+	} catch {
+		return json({ error: 'Invalid JSON body' }, { status: 400 });
+	}
+
+	const platform = body.platform;
+	if (!platform || (platform !== 'ios' && platform !== 'android')) {
+		return json(
+			{ error: 'Missing or invalid platform (must be "ios" or "android")' },
+			{ status: 400 },
+		);
+	}
+
+	// iOS sends "deviceToken", Android sends "token"
+	const token = body.deviceToken || body.token;
+	if (!token || typeof token !== 'string' || token.trim().length === 0) {
+		return json({ error: 'Missing device token (deviceToken or token)' }, { status: 400 });
+	}
+
+	// Persist to ~/.shooter/device-tokens.json
+	const tokens = readTokens();
+	tokens[platform] = token;
+	writeTokens(tokens);
+
+	// Update in-memory env so APNs can use it immediately (iOS is the primary APNs target)
+	if (platform === 'ios') {
+		(env as Record<string, string>).DEVICE_TOKEN = token;
+	}
+
+	console.log(`[device-token] Registered ${platform} token (length: ${token.length})`);
+
+	return json({
+		platform,
+		success: true,
+		timestamp: new Date().toISOString(),
+	});
+};

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

@@ -0,0 +1,100 @@
+import { env } from '$env/dynamic/private';
+import { validateAuth } from '$lib/modules/server/auth';
+import { json } from '@sveltejs/kit';
+
+import type { RequestHandler } from './$types';
+
+interface FCMConfiguration {
+  configured: boolean;
+  hasClientEmail: boolean;
+  hasPrivateKey: boolean;
+  hasProjectId: boolean;
+}
+
+interface HealthChecks {
+  hasApiKey: boolean;
+  hasAPNsConfig: boolean;
+  hasBundleId: boolean;
+  hasDeviceToken: boolean;
+  hasFCMConfig: boolean;
+}
+
+interface HealthConfiguration {
+  apnsKeyId: null | string;
+  bundleId: null | string;
+  deviceTokenLength: number;
+  fcm: FCMConfiguration;
+  production: boolean;
+}
+
+interface HealthResponse {
+  checks: HealthChecks;
+  configuration: HealthConfiguration;
+  environment: string;
+  status: 'degraded' | 'healthy';
+  timestamp: string;
+  version: string;
+}
+
+export const GET: RequestHandler = ({ request, url }) => {
+  // Basic status check is public (used by layout status badge).
+  // Detailed config requires auth (L12 security fix).
+  const wantsDetails = url.searchParams.get('details') === 'true';
+  if (wantsDetails) {
+    const authError = validateAuth(request);
+    if (authError) return authError;
+  }
+
+  const hasProjectId = !!env.FCM_PROJECT_ID;
+  const hasClientEmail = !!env.FCM_CLIENT_EMAIL;
+  const hasPrivateKey = !!env.FCM_PRIVATE_KEY;
+
+  const health: HealthResponse = {
+    checks: {
+      hasApiKey: !!env.API_KEY,
+      hasAPNsConfig: !!(
+        env.APNS_KEY_ID &&
+        env.APNS_TEAM_ID &&
+        env.APNS_KEY
+      ),
+      hasBundleId: !!env.APNS_BUNDLE_ID,
+      hasDeviceToken: !!env.DEVICE_TOKEN,
+      hasFCMConfig: hasProjectId && hasClientEmail && hasPrivateKey,
+    },
+    configuration: {
+      apnsKeyId: env.APNS_KEY_ID ? `${env.APNS_KEY_ID.substring(0, 4)}...` : null,
+      bundleId: env.APNS_BUNDLE_ID || null,
+      deviceTokenLength: env.DEVICE_TOKEN ? env.DEVICE_TOKEN.length : 0,
+      fcm: {
+        configured: hasProjectId && hasClientEmail && hasPrivateKey,
+        hasClientEmail,
+        hasPrivateKey,
+        hasProjectId,
+      },
+      production: env.APNS_PRODUCTION === 'true',
+    },
+    environment: env.NODE_ENV || 'development',
+    status: 'healthy',
+    timestamp: new Date().toISOString(),
+    version: '1.1.0',
+  };
+
+  // Determine overall health status
+  // FCM is not a critical check - only APNs is required for core functionality
+  const criticalChecks = [
+    health.checks.hasDeviceToken,
+    health.checks.hasAPNsConfig,
+    health.checks.hasBundleId,
+  ];
+
+  if (criticalChecks.some((check) => !check)) {
+    health.status = 'degraded';
+  }
+
+  // Public response: status only. Authenticated: full details.
+  if (!wantsDetails) {
+    return json({ status: health.status, timestamp: health.timestamp });
+  }
+
+  return json(health);
+};