@juspay/shooter 1.4.0 → 1.6.0

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import type { NativeBridgeConfig } from '$generated/types';
-  import type { ShooterConfig } from '$lib/types/config';
+  import type { ConfigPageData, NativeBridgeConfig, ShooterConfig } from '$lib/types';
 
   import { browser } from '$app/environment';
   import {
@@ -11,9 +10,12 @@
     scanQR,
     toErrorMessage,
   } from '$lib/modules/client/common';
+  import { PROVIDERS } from '$lib/modules/client/neurolink/provider-config';
   import { Banner, Button, Input, Stepper } from '@juspay/svelte-ui-components';
   import { onMount } from 'svelte';
 
+  const { data }: { data: ConfigPageData } = $props();
+
   let serverUrl = $state('');
   let apiKey = $state('');
   let deviceToken = $state('');
@@ -157,26 +159,45 @@
 
   onMount(() => {
     if (browser) {
-      try {
-        const saved = localStorage.getItem('shooter_config');
-        if (saved) {
-          const parsed: unknown = JSON.parse(saved);
-          if (isShooterConfig(parsed)) {
-            if (parsed.apiKey) {
-              apiKey = parsed.apiKey;
-            }
-            if (parsed.deviceToken) {
-              deviceToken = parsed.deviceToken;
-            }
-            if (parsed.serverUrl) {
-              serverUrl = parsed.serverUrl;
+      // Auto-configure from URL fragment (#key=...&url=...) to avoid
+      // exposing secrets in the request URL, browser history, or referrer headers.
+      const hash = window.location.hash.slice(1);
+      if (hash) {
+        const params = new URLSearchParams(hash);
+        const paramKey = params.get('key');
+        const paramUrl = params.get('url');
+        if (paramKey) {
+          apiKey = paramKey;
+          if (paramUrl) {
+            serverUrl = paramUrl;
+          }
+          void saveConfiguration();
+          // Clean fragment so the key doesn't linger
+          window.history.replaceState({}, '', window.location.pathname);
+        }
+      }
+      if (!apiKey) {
+        try {
+          const saved = localStorage.getItem('shooter_config');
+          if (saved) {
+            const parsed: unknown = JSON.parse(saved);
+            if (isShooterConfig(parsed)) {
+              if (parsed.apiKey) {
+                apiKey = parsed.apiKey;
+              }
+              if (parsed.deviceToken) {
+                deviceToken = parsed.deviceToken;
+              }
+              if (parsed.serverUrl) {
+                serverUrl = parsed.serverUrl;
+              }
+            } else {
+              localStorage.removeItem('shooter_config');
             }
-          } else {
-            localStorage.removeItem('shooter_config');
           }
+        } catch {
+          // No saved configuration — expected on first visit
         }
-      } catch {
-        // No saved configuration — expected on first visit
       }
 
       // Hydrate from native bridge BEFORE applying the browser default.
@@ -285,13 +306,13 @@
         method: 'POST',
       });
 
-      const data = await response.json();
+      const data = (await response.json()) as Record<string, unknown>;
 
       if (response.ok) {
         result = 'Test notification sent successfully';
         statusType = 'success';
       } else {
-        result = `Test failed: ${data.error || 'Unknown error'}`;
+        result = `Test failed: ${typeof data.error === 'string' ? data.error : 'Unknown error'}`;
         statusType = 'error';
       }
     } catch (error) {
@@ -358,7 +379,8 @@
             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.
+            Find this in your <code>~/.shooter/.env</code> file. Run <code>shooter setup</code> to generate
+            one.
           </p>
 
           <Input
@@ -474,6 +496,35 @@
           </div>
         </Card>
 
+        <Card title="AI Providers" description="NeuroLink-powered summaries and AI features">
+          <div class="ai-providers">
+            {#each PROVIDERS as provider (provider.id)}
+              <div class="provider-row">
+                <Icon
+                  name={data.aiProviders[provider.id] ? 'check-circle' : 'x-circle'}
+                  size={14}
+                />
+                <span class="provider-label">{provider.label}</span>
+                <span class="provider-status" class:configured={data.aiProviders[provider.id]}>
+                  {data.aiProviders[provider.id] ? 'configured' : 'not configured'}
+                </span>
+              </div>
+            {/each}
+
+            {#if data.activeProvider}
+              <div class="active-provider">
+                Active: <strong>{data.activeProvider}</strong>
+              </div>
+            {:else if Object.values(data.aiProviders).some(Boolean)}
+              <div class="active-provider">Auto-detected from configured keys</div>
+            {:else}
+              <p class="ai-help">
+                Run <code>shooter setup</code> to configure AI providers for summaries.
+              </p>
+            {/if}
+          </div>
+        </Card>
+
         <Card title="Danger Zone">
           <p class="danger-description">Clear all saved configuration data from this device.</p>
           <Button
@@ -631,7 +682,49 @@
   }
 
   .settings-sidebar :global(.card):last-child {
-    border-color: rgba(217, 48, 54, 0.3);
+    border-color: color-mix(in srgb, var(--ds-red-700) 30%, transparent);
+  }
+
+  .ai-providers {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+  .provider-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+  }
+  .provider-label {
+    flex: 1;
+    color: var(--text-primary);
+  }
+  .provider-status {
+    font-size: var(--text-xs);
+    color: var(--text-tertiary);
+  }
+  .provider-status.configured {
+    color: var(--ds-green-900);
+  }
+  .active-provider {
+    margin-top: var(--space-2);
+    padding-top: var(--space-2);
+    border-top: 1px solid var(--border);
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+  }
+  .ai-help {
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+    margin-top: var(--space-2);
+  }
+  .ai-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);
   }
 
   .danger-description {
@@ -640,12 +733,12 @@
     margin-bottom: var(--space-4);
     line-height: var(--leading-relaxed);
     padding-left: var(--space-3);
-    border-left: 3px solid rgba(217, 48, 54, 0.5);
+    border-left: 3px solid color-mix(in srgb, var(--ds-red-700) 50%, transparent);
   }
 
   .input-help {
     font-size: var(--text-xs);
-    color: var(--color-text-tertiary, #888);
+    color: var(--text-tertiary);
     margin-top: var(--space-1);
     margin-bottom: 0;
   }

package/src/routes/neurolink/+page.server.ts

@@ -0,0 +1,10 @@
+import { env } from '$env/dynamic/private';
+
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = () => ({
+  // LiteLLM base URL and model name are safe to pass (not secrets)
+  litellmBaseUrl: env.LITELLM_BASE_URL ?? '',
+  litellmModel: env.LITELLM_MODEL ?? 'open-large',
+  // All API keys stay server-side — injected by /api/neurolink-proxy
+});

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

@@ -0,0 +1,331 @@
+<script lang="ts">
+  import { installFetchProxy } from '$lib/modules/client/neurolink/fetch-proxy';
+  import { Button, Input, Pill } from '@juspay/svelte-ui-components';
+  import { onMount } from 'svelte';
+
+  const NEUROLINK_CDN_URL = 'https://unpkg.com/@juspay/neurolink/dist/browser/neurolink.min.js';
+
+  import type { ProviderId } from '$lib/types';
+
+  import { PROVIDERS } from '$lib/modules/client/neurolink/provider-config';
+
+  const { data } = $props<{
+    data: {
+      litellmBaseUrl: string;
+      litellmModel: string;
+    };
+  }>();
+
+  let NL: null | Record<string, unknown> = $state(null);
+  let sdk: null | {
+    generate: (opts: Record<string, unknown>) => Promise<Record<string, unknown>>;
+  } = $state(null);
+  let logs = $state<{ text: string; type: string }[]>([]);
+  let prompt = $state('');
+  let loading = $state(false);
+  let loaded = $state(false);
+  let activeProvider = $state<ProviderId>('litellm');
+
+  function log(text: string, type = 'info'): void {
+    logs = [...logs, { text, type }];
+  }
+
+  function injectEnvKeys(): void {
+    const p = (globalThis as unknown as { process?: { env?: Record<string, string> } }).process;
+    if (!p?.env) {
+      return;
+    }
+    const env = p.env;
+    if (data.litellmBaseUrl) {
+      env.LITELLM_BASE_URL = data.litellmBaseUrl;
+    }
+    if (data.litellmModel) {
+      env.LITELLM_MODEL = data.litellmModel;
+    }
+
+    // All providers go through the server proxy. Inject dummy placeholders so
+    // the SDK's env-var validation passes — the fetch proxy strips these and
+    // injects real keys server-side.
+    const flags = (window as unknown as Record<string, Record<string, boolean>>).__aiProviders;
+    if (flags?.['google-ai']) {
+      env.GOOGLE_AI_API_KEY = 'proxy-via-server';
+    }
+    if (flags?.anthropic) {
+      env.ANTHROPIC_API_KEY = 'proxy-via-server';
+    }
+    if (flags?.openai) {
+      env.OPENAI_API_KEY = 'proxy-via-server';
+    }
+    if (flags?.mistral) {
+      env.MISTRAL_API_KEY = 'proxy-via-server';
+    }
+  }
+
+  onMount(async () => {
+    installShims();
+    installFetchProxy();
+    injectEnvKeys();
+
+    log('Loading NeuroLink from CDN...');
+    log(NEUROLINK_CDN_URL, 'dim');
+
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      NL = await import(/* @vite-ignore */ NEUROLINK_CDN_URL);
+      log(`Loaded! ${Object.keys(NL ?? {}).length} exports`, 'pass');
+      sdk = new (
+        NL as Record<
+          string,
+          new (opts: Record<string, unknown>) => {
+            generate: (opts: Record<string, unknown>) => Promise<Record<string, unknown>>;
+          }
+        >
+      ).NeuroLink({ provider: activeProvider });
+      log(`NeuroLink ready · provider: ${activeProvider}`, 'pass');
+      loaded = true;
+    } catch (e: unknown) {
+      log(`Failed to load: ${e instanceof Error ? e.message : String(e)}`, 'fail');
+    }
+  });
+
+  function switchProvider(id: ProviderId): void {
+    if (!NL || id === activeProvider) {
+      return;
+    }
+    activeProvider = id;
+    sdk = new (
+      NL as Record<
+        string,
+        new (opts: Record<string, unknown>) => {
+          generate: (opts: Record<string, unknown>) => Promise<Record<string, unknown>>;
+        }
+      >
+    ).NeuroLink({ provider: id });
+    log(`Switched to provider: ${id}`, 'dim');
+  }
+
+  /** Ensure global shims exist — app.html normally installs them,
+   *  but guard in case this page loads before the inline script runs. */
+  function installShims(): void {
+    if (typeof globalThis.process === 'undefined') {
+      (globalThis as unknown as { process: Record<string, unknown> }).process = {
+        cwd: (): string => '/',
+        env: {},
+        platform: 'browser',
+        version: 'v24.0.0',
+      };
+    }
+    if (typeof globalThis.global === 'undefined') {
+      (globalThis as unknown as { global: typeof globalThis }).global = globalThis;
+    }
+  }
+
+  async function send(): Promise<void> {
+    if (!prompt.trim() || !sdk || loading) {
+      return;
+    }
+    const input = prompt.trim();
+    prompt = '';
+    loading = true;
+    log(`> ${input}`, 'user');
+
+    const prov = PROVIDERS.find((p) => p.id === activeProvider);
+    if (!prov) {
+      loading = false;
+      return;
+    }
+    try {
+      const result = await sdk.generate({
+        input: { text: input },
+        model: prov.model,
+        provider: prov.id,
+      });
+      const content = typeof result.content === 'string' ? result.content : '(empty response)';
+      const usage = result.usage as undefined | { total?: number };
+      log(content, 'ai');
+      log(`${prov.id}/${prov.model} | ${usage?.total ?? '?'} tokens`, 'dim');
+    } catch (e: unknown) {
+      log(`Error: ${e instanceof Error ? e.message : String(e)}`, 'fail');
+    }
+    loading = false;
+  }
+
+  function handleKeydown(e: KeyboardEvent): void {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      void send();
+    }
+  }
+</script>
+
+<div class="page">
+  <header>
+    <h1>NeuroLink</h1>
+    <span class="version">new NeuroLink()</span>
+    {#if loaded}
+      <Pill text="Connected" classes="pill-connected" />
+    {:else}
+      <Pill text="Loading..." classes="pill-loading" />
+    {/if}
+  </header>
+
+  {#if loaded}
+    <div class="provider-bar">
+      {#each PROVIDERS as p (p.id)}
+        <Pill
+          text={p.label}
+          classes="prov-pill {activeProvider === p.id ? 'prov-pill--active' : ''}"
+          onclick={(): void => {
+            switchProvider(p.id);
+          }}
+        />
+      {/each}
+    </div>
+  {/if}
+
+  <div class="log" id="log">
+    {#each logs as entry, i (i)}
+      <div class="log-entry {entry.type}">{entry.text}</div>
+    {/each}
+  </div>
+
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="input-bar" onkeydown={handleKeydown}>
+    <Input
+      name="prompt"
+      bind:value={prompt}
+      placeholder={loaded ? `Ask anything... [${activeProvider}]` : 'Loading SDK...'}
+      classes="input-prompt"
+    />
+    <Button
+      classes="btn-primary"
+      onclick={send}
+      disabled={!loaded || loading || !prompt.trim()}
+      text={loading ? '...' : 'Send'}
+    />
+  </div>
+</div>
+
+<style>
+  .page {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background: var(--background);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    padding: 0;
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--border);
+  }
+
+  h1 {
+    font-size: var(--text-lg);
+    color: var(--ds-blue-700);
+    margin: 0;
+  }
+
+  .version {
+    color: var(--text-tertiary);
+    font-size: var(--text-xs);
+  }
+
+  :global(.pill-connected) {
+    --pill-background: var(--ds-green-100);
+    --pill-color: var(--ds-green-700);
+    --pill-font-size: var(--text-xs);
+  }
+
+  :global(.pill-loading) {
+    --pill-background: var(--ds-amber-100);
+    --pill-color: var(--ds-amber-700);
+    --pill-font-size: var(--text-xs);
+  }
+
+  .provider-bar {
+    display: flex;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-4);
+    border-bottom: 1px solid var(--border);
+    flex-wrap: wrap;
+  }
+
+  :global(.prov-pill) {
+    --pill-background: var(--component-bg);
+    --pill-color: var(--text-tertiary);
+    --pill-font-size: var(--text-xs);
+    --pill-cursor: pointer;
+    --pill-border-radius: var(--radius-md);
+  }
+
+  :global(.prov-pill:hover) {
+    --pill-color: var(--text-primary);
+  }
+
+  :global(.prov-pill--active) {
+    --pill-background: var(--ds-blue-100);
+    --pill-color: var(--ds-blue-700);
+  }
+
+  .log {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--text-sm);
+    line-height: 1.6;
+  }
+
+  .log-entry {
+    white-space: pre-wrap;
+    margin-bottom: var(--space-1);
+  }
+
+  .log-entry.pass {
+    color: var(--ds-green-900);
+  }
+
+  .log-entry.fail {
+    color: var(--ds-red-900);
+  }
+
+  .log-entry.dim {
+    color: var(--text-tertiary);
+    font-size: var(--text-xs);
+  }
+
+  .log-entry.user {
+    color: var(--ds-blue-700);
+    font-weight: bold;
+  }
+
+  .log-entry.ai {
+    color: var(--text-primary);
+    padding: var(--space-2) var(--space-3);
+    background: var(--component-bg);
+    border-radius: var(--radius-md);
+    margin: var(--space-1) 0;
+  }
+
+  .input-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    border-top: 1px solid var(--border);
+  }
+
+  .input-bar :global(.input-prompt) {
+    flex: 1;
+    --input-font-family: var(--font-mono);
+    --input-background: var(--component-bg);
+    --input-border: 1px solid var(--border-hover);
+    --input-focus-border: 1px solid var(--ds-blue-700);
+    --input-container-margin: 0;
+  }
+</style>

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import type { ProjectGroup, ShooterConfig } from '$generated/types';
-  import type { DetectedProcess } from '$lib/modules/server/sessions/process-detector';
+  import type { DetectedProcess, ProjectGroup, ShooterConfig } from '$lib/types';
 
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
@@ -35,7 +34,9 @@
 
   // Build a set of session IDs that have running processes
   const runningSessionIds = $derived(
-    new Set(detectedProcesses.filter((p) => p.sessionId).map((p) => p.sessionId))
+    new Set(
+      detectedProcesses.map((p) => p.sessionId).filter((id): id is string => typeof id === 'string')
+    )
   );
 
   onMount(() => {
@@ -112,7 +113,7 @@
       }
 
       fetchError = null;
-      const result: { projects: ProjectGroup[] } = await response.json();
+      const result = (await response.json()) as { projects: ProjectGroup[] };
       const foundProject = result.projects.find((p) => p.id === projectId) || null;
       project = foundProject;
       if (foundProject) {
@@ -135,7 +136,7 @@
         headers: { Authorization: `Bearer ${config.apiKey}` },
       });
       if (response.ok) {
-        const data: { processes: DetectedProcess[] } = await response.json();
+        const data = (await response.json()) as { processes: DetectedProcess[] };
         detectedProcesses = data.processes;
       }
     } catch {
@@ -173,7 +174,7 @@
       });
 
       if (response.ok) {
-        const result: { terminalId: string } = await response.json();
+        const result = (await response.json()) as { terminalId: string };
         void goto(`/terminals/${result.terminalId}`);
       }
     } catch (error) {
@@ -197,9 +198,13 @@
   }
 
   function formatDate(ts: string): string {
-    if (!ts) {return '';}
+    if (!ts) {
+      return '';
+    }
     const d = new Date(ts);
-    if (isNaN(d.getTime())) {return '';}
+    if (isNaN(d.getTime())) {
+      return '';
+    }
     return d.toLocaleDateString('en-US', {
       day: 'numeric',
       hour: '2-digit',
@@ -283,8 +288,8 @@
                 {#if runningSessionIds.has(session.id)}
                   <Button
                     classes="btn-connect btn-xs"
-                    onclick={(e: MouseEvent) =>
-                      connectToSession(
+                    onclick={(e: MouseEvent): void =>
+                      void connectToSession(
                         e,
                         session.id,
                         session.source === 'opencode' ? 'opencode' : 'claude'
@@ -298,8 +303,8 @@
                 {:else}
                   <Button
                     classes="btn-resume btn-xs"
-                    onclick={(e: MouseEvent) =>
-                      connectToSession(
+                    onclick={(e: MouseEvent): void =>
+                      void connectToSession(
                         e,
                         session.id,
                         session.source === 'opencode' ? 'opencode' : 'claude'