@juspay/shooter 1.0.0 → 1.2.0

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

@@ -1,9 +1,11 @@
 <script lang="ts">
-  import type { ShooterConfig } from '$lib/types/config';
+  import type { ProjectGroup, ShooterConfig } from '$generated/types';
+  import type { DetectedProcess } from '$lib/modules/server/sessions/process-detector';
 
+  import { goto } from '$app/navigation';
   import { page } from '$app/state';
-  import { Button, Pill, Shimmer } from '@juspay/svelte-ui-components';
   import {
+    clearCache,
     EmptyState,
     formatRelativeTime,
     getCached,
@@ -11,43 +13,31 @@
     isShooterConfig,
     setCache,
   } from '$lib/modules/client/common';
+  import { Banner, Button, Pill, Shimmer } from '@juspay/svelte-ui-components';
   import { onDestroy, onMount } from 'svelte';
 
-  interface Session {
-    created: string;
-    gitBranch: string;
-    id: string;
-    messageCount: number;
-    modified: string;
-    projectPath: string;
-    source: 'claude-code' | 'opencode';
-    summary: string;
-    title: string;
-  }
-
-  interface ProjectGroup {
-    fullPath: string;
-    id: string;
-    lastModified: string;
-    name: string;
-    sessionCount: number;
-    sessions: Session[];
-  }
-
   const POLL_INTERVAL_MS = 15_000;
   const PAGE_SIZE = 20;
 
   let project = $state<null | ProjectGroup>(null);
   let loading = $state(true);
   let config = $state<null | ShooterConfig>(null);
+  let fetchError = $state<null | string>(null);
   let pollTimer: null | ReturnType<typeof setInterval> = null;
   let visibleCount = $state(PAGE_SIZE);
+  let detectedProcesses = $state<DetectedProcess[]>([]);
+  let connectingSessionId = $state<null | string>(null);
 
   const projectId = $derived(page.url.searchParams.get('id') || '');
 
   const visibleSessions = $derived(project ? project.sessions.slice(0, visibleCount) : []);
   const hasMore = $derived(project ? visibleCount < project.sessions.length : false);
 
+  // Build a set of session IDs that have running processes
+  const runningSessionIds = $derived(
+    new Set(detectedProcesses.filter((p) => p.sessionId).map((p) => p.sessionId))
+  );
+
   onMount(() => {
     loadConfiguration();
 
@@ -61,11 +51,13 @@
     // Delay initial fetch to ensure config and projectId are resolved
     setTimeout(() => {
       void fetchProject();
+      void detectRunningProcesses();
     }, 50);
 
     pollTimer = setInterval(() => {
       if (config?.apiKey && projectId) {
         void fetchProject();
+        void detectRunningProcesses();
       }
     }, POLL_INTERVAL_MS);
   });
@@ -94,7 +86,7 @@
     }
   }
 
-  async function fetchProject(): Promise<void> {
+  async function fetchProject(bustCache = false): Promise<void> {
     if (!config?.apiKey || !projectId) {
       loading = false;
       return;
@@ -106,17 +98,20 @@
     }
 
     try {
-      const response = await fetch('/api/sessions', {
+      const url = bustCache ? '/api/sessions?refresh=true' : '/api/sessions';
+      const response = await fetch(url, {
         headers: {
           Authorization: `Bearer ${config.apiKey}`,
         },
       });
 
       if (!response.ok) {
+        fetchError = `Failed to load project (HTTP ${response.status})`;
         loading = false;
         return;
       }
 
+      fetchError = null;
       const result: { projects: ProjectGroup[] } = await response.json();
       const foundProject = result.projects.find((p) => p.id === projectId) || null;
       project = foundProject;
@@ -130,11 +125,71 @@
     }
   }
 
+  async function detectRunningProcesses(): Promise<void> {
+    if (!config?.apiKey) {
+      return;
+    }
+
+    try {
+      const response = await fetch('/api/sessions/detect', {
+        headers: { Authorization: `Bearer ${config.apiKey}` },
+      });
+      if (response.ok) {
+        const data: { processes: DetectedProcess[] } = await response.json();
+        detectedProcesses = data.processes;
+      }
+    } catch {
+      // Best effort — don't break the page
+    }
+  }
+
+  async function connectToSession(
+    event: MouseEvent,
+    sessionId: string,
+    command: string
+  ): Promise<void> {
+    // Prevent the click from navigating to the session page
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (!config?.apiKey || !project || connectingSessionId) {
+      return;
+    }
+
+    connectingSessionId = sessionId;
+
+    try {
+      const response = await fetch('/api/sessions/connect', {
+        body: JSON.stringify({
+          command,
+          cwd: project.fullPath,
+          sessionId,
+        }),
+        headers: {
+          Authorization: `Bearer ${config.apiKey}`,
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      });
+
+      if (response.ok) {
+        const result: { terminalId: string } = await response.json();
+        void goto(`/terminals/${result.terminalId}`);
+      }
+    } catch (error) {
+      console.error('Failed to connect to session:', error);
+    } finally {
+      connectingSessionId = null;
+    }
+  }
+
   async function forceRefresh(): Promise<void> {
     loading = true;
-    sessionStorage.removeItem(`shooter_project_${projectId}`);
+    project = null;
     visibleCount = PAGE_SIZE;
-    await fetchProject();
+    clearCache(`shooter_project_${projectId}`);
+    await fetchProject(true);
+    await detectRunningProcesses();
   }
 
   function loadMore(): void {
@@ -142,7 +197,10 @@
   }
 
   function formatDate(ts: string): string {
-    return new Date(ts).toLocaleDateString('en-US', {
+    if (!ts) {return '';}
+    const d = new Date(ts);
+    if (isNaN(d.getTime())) {return '';}
+    return d.toLocaleDateString('en-US', {
       day: 'numeric',
       hour: '2-digit',
       minute: '2-digit',
@@ -164,6 +222,10 @@
 </svelte:head>
 
 <main class="main">
+  {#if fetchError}
+    <Banner text={fetchError} classes="banner-error" />
+  {/if}
+
   {#if loading && !project}
     <div class="loading-container">
       <Shimmer classes="shimmer-header" />
@@ -188,10 +250,8 @@
       <div class="chat-session-header-top">
         <a href="/" class="back-link">&#8592; Back to Projects</a>
         <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>
       <h1 class="chat-session-title">{project.name}</h1>
@@ -218,7 +278,38 @@
                   <div class="session-card-subtitle">{truncate(session.summary, 80)}</div>
                 {/if}
               </div>
-              <Pill text={formatRelativeTime(session.modified)} classes="pill-session-time" />
+              <div class="session-card-actions">
+                <Pill text={formatRelativeTime(session.modified)} classes="pill-session-time" />
+                {#if runningSessionIds.has(session.id)}
+                  <Button
+                    classes="btn-connect btn-xs"
+                    onclick={(e: MouseEvent) =>
+                      connectToSession(
+                        e,
+                        session.id,
+                        session.source === 'opencode' ? 'opencode' : 'claude'
+                      )}
+                    disabled={connectingSessionId === session.id}
+                    showLoader={connectingSessionId === session.id}
+                  >
+                    <span class="connect-dot"></span>
+                    Connect
+                  </Button>
+                {:else}
+                  <Button
+                    classes="btn-resume btn-xs"
+                    onclick={(e: MouseEvent) =>
+                      connectToSession(
+                        e,
+                        session.id,
+                        session.source === 'opencode' ? 'opencode' : 'claude'
+                      )}
+                    disabled={connectingSessionId === session.id}
+                    showLoader={connectingSessionId === session.id}
+                    text="Resume"
+                  />
+                {/if}
+              </div>
             </div>
             <div class="session-stats">
               <span><strong>{session.messageCount}</strong> messages</span>
@@ -231,13 +322,18 @@
                 <Pill text="Claude Code" classes="pill-source-claude" />
               {/if}
             </div>
-            <div class="session-duration">Created {formatDate(session.created)}</div>
+            <div class="session-meta-row">
+              <span class="session-modified">Last updated {formatDate(session.modified)}</span>
+              <span class="session-duration">Created {formatDate(session.created)}</span>
+            </div>
           </a>
         {/each}
       </div>
       {#if hasMore}
         <div style="text-align: center; padding: 1rem;">
-          <Button classes="btn-secondary" onclick={loadMore}
+          <Button
+            classes="btn-secondary"
+            onclick={loadMore}
             text={`Load More (${project.sessions.length - visibleCount} remaining)`}
           />
         </div>
@@ -264,11 +360,45 @@
     gap: var(--space-3);
   }
 
+  .session-card-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-shrink: 0;
+  }
+
+  .connect-dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #4ade80;
+    margin-right: 2px;
+    flex-shrink: 0;
+  }
+
+  .session-meta-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .session-duration,
+  .session-modified {
+    font-size: 0.75rem;
+    color: var(--color-text-tertiary, #888);
+  }
+
   @media (max-width: 480px) {
     .chat-session-header-top {
       flex-direction: column;
       align-items: flex-start;
       gap: var(--space-2);
     }
+
+    .session-card-actions {
+      flex-wrap: wrap;
+    }
   }
 </style>