@juspay/shooter 1.0.0

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

@@ -0,0 +1,274 @@
+<script lang="ts">
+  import type { ShooterConfig } from '$lib/types/config';
+
+  import { page } from '$app/state';
+  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 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 pollTimer: null | ReturnType<typeof setInterval> = null;
+  let visibleCount = $state(PAGE_SIZE);
+
+  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);
+
+  onMount(() => {
+    loadConfiguration();
+
+    // Show cached data immediately
+    const cached = getCached(`shooter_project_${projectId}`) as null | ProjectGroup;
+    if (cached) {
+      project = cached;
+      loading = false;
+    }
+
+    // Delay initial fetch to ensure config and projectId are resolved
+    setTimeout(() => {
+      void fetchProject();
+    }, 50);
+
+    pollTimer = setInterval(() => {
+      if (config?.apiKey && projectId) {
+        void fetchProject();
+      }
+    }, 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 — expected on first visit
+    }
+  }
+
+  async function fetchProject(): Promise<void> {
+    if (!config?.apiKey || !projectId) {
+      loading = false;
+      return;
+    }
+
+    // Don't show loading spinner if we already have cached data
+    if (!project) {
+      loading = true;
+    }
+
+    try {
+      const response = await fetch('/api/sessions', {
+        headers: {
+          Authorization: `Bearer ${config.apiKey}`,
+        },
+      });
+
+      if (!response.ok) {
+        loading = false;
+        return;
+      }
+
+      const result: { projects: ProjectGroup[] } = await response.json();
+      const foundProject = result.projects.find((p) => p.id === projectId) || null;
+      project = foundProject;
+      if (foundProject) {
+        setCache(`shooter_project_${projectId}`, foundProject);
+      }
+    } catch (error) {
+      console.error('Failed to fetch project:', error);
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function forceRefresh(): Promise<void> {
+    loading = true;
+    sessionStorage.removeItem(`shooter_project_${projectId}`);
+    visibleCount = PAGE_SIZE;
+    await fetchProject();
+  }
+
+  function loadMore(): void {
+    visibleCount += PAGE_SIZE;
+  }
+
+  function formatDate(ts: string): string {
+    return new Date(ts).toLocaleDateString('en-US', {
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      month: 'short',
+    });
+  }
+
+  function truncate(text: string, maxLength: number): string {
+    if (text.length <= maxLength) {
+      return text;
+    }
+    return `${text.slice(0, maxLength).trimEnd()}...`;
+  }
+</script>
+
+<svelte:head>
+  <title>{project?.name || 'Project'} - Shooter</title>
+  <meta name="description" content="Project sessions sorted by latest update" />
+</svelte:head>
+
+<main class="main">
+  {#if loading && !project}
+    <div class="loading-container">
+      <Shimmer classes="shimmer-header" />
+      {#each Array(4) as _, i (i)}
+        <Shimmer classes="shimmer-card" />
+      {/each}
+    </div>
+  {:else if !project}
+    <div class="project-back-row">
+      <a href="/" class="back-link">
+        <span class="back-arrow">&larr;</span>
+        Back to Projects
+      </a>
+    </div>
+    <EmptyState
+      icon="alert-triangle"
+      title="Project Not Found"
+      description="The requested project could not be found."
+    />
+  {:else}
+    <div class="chat-session-header">
+      <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}
+        </Button>
+      </div>
+      <h1 class="chat-session-title">{project.name}</h1>
+      <div class="chat-session-meta">
+        <span class="session-card-subtitle">{project.fullPath}</span>
+        <span>{project.sessionCount} sessions</span>
+      </div>
+    </div>
+
+    {#if project.sessions.length === 0}
+      <EmptyState
+        icon="bell"
+        title="No sessions yet"
+        description="Sessions for this project will appear here"
+      />
+    {:else}
+      <div class="sessions-container">
+        {#each visibleSessions as session (session.id)}
+          <a href="/session/{session.id}?project={projectId}" class="session-card">
+            <div class="session-card-header">
+              <div>
+                <h3 class="session-card-title">{session.title}</h3>
+                {#if session.summary}
+                  <div class="session-card-subtitle">{truncate(session.summary, 80)}</div>
+                {/if}
+              </div>
+              <Pill text={formatRelativeTime(session.modified)} classes="pill-session-time" />
+            </div>
+            <div class="session-stats">
+              <span><strong>{session.messageCount}</strong> messages</span>
+              {#if session.gitBranch}
+                <Pill text="🌿 {session.gitBranch}" classes="pill-git-branch" />
+              {/if}
+              {#if session.source === 'opencode'}
+                <Pill text="OpenCode" classes="pill-source-opencode" />
+              {:else}
+                <Pill text="Claude Code" classes="pill-source-claude" />
+              {/if}
+            </div>
+            <div class="session-duration">Created {formatDate(session.created)}</div>
+          </a>
+        {/each}
+      </div>
+      {#if hasMore}
+        <div style="text-align: center; padding: 1rem;">
+          <Button classes="btn-secondary" onclick={loadMore}
+            text={`Load More (${project.sessions.length - visibleCount} remaining)`}
+          />
+        </div>
+      {/if}
+    {/if}
+  {/if}
+</main>
+
+<style>
+  .project-back-row {
+    margin-bottom: var(--space-5);
+  }
+
+  .chat-session-header-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-2);
+  }
+
+  .sessions-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  @media (max-width: 480px) {
+    .chat-session-header-top {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-2);
+    }
+  }
+</style>

package/src/routes/session/[id]/+page.svelte

@@ -0,0 +1,434 @@
+<script lang="ts">
+  import type {
+    ConversationMessage,
+    MessagePart,
+    SessionInfo,
+    ToolUsePart,
+  } from '$lib/modules/server/sessions/types';
+
+  import { browser } from '$app/environment';
+  import { page } from '$app/state';
+  import { Banner, Pill, Shimmer } from '@juspay/svelte-ui-components';
+  import {
+    EmptyState,
+    getCached,
+    setCache,
+  } from '$lib/modules/client/common';
+  import ChatView from '$lib/modules/client/terminal/ChatView.svelte';
+  import { onMount } from 'svelte';
+
+  interface SessionResponse {
+    messages: ConversationMessage[];
+    session: SessionInfo;
+  }
+
+  // WebSocket message types from the live session channel
+  interface WsMessage {
+    content?: MessagePart[];
+    id?: string;
+    input?: Record<string, unknown>;
+    isError?: boolean;
+    message?: string;
+    name?: string;
+    output?: string;
+    role?: string;
+    status?: string;
+    text?: string;
+    timestamp?: string;
+    type: string;
+  }
+
+  let session = $state<null | SessionInfo>(null);
+  let messages = $state<ConversationMessage[]>([]);
+  let loading = $state(true);
+  let error = $state<null | string>(null);
+
+  // Live streaming state
+  type ConnectionState = 'connected' | 'connecting' | 'disconnected' | 'idle';
+  let isSessionActive = $state(false);
+  let connectionState = $state<ConnectionState>('idle');
+  let ws = $state<null | WebSocket>(null);
+  let wsReconnectAttempts = 0;
+  let wsReconnectTimer: number | null = null;
+
+  const sessionId = $derived(page.params.id);
+  const projectId = $derived(page.url.searchParams.get('project') || '');
+
+  // Check if a session was modified within the last 5 minutes
+  function checkSessionActive(sess: SessionInfo): boolean {
+    const modifiedTime = new Date(sess.modified).getTime();
+    const fiveMinutesAgo = Date.now() - 5 * 60 * 1000;
+    return modifiedTime > fiveMinutesAgo;
+  }
+
+  // Generate a unique message ID for WebSocket-delivered messages
+  let wsMessageCounter = 0;
+  function nextWsMessageId(): string {
+    wsMessageCounter++;
+    return `ws-msg-${Date.now()}-${wsMessageCounter}`;
+  }
+
+  // Handle incoming WebSocket messages
+  function handleWsMessage(event: MessageEvent): void {
+    let data: WsMessage;
+    try {
+      data = JSON.parse(event.data);
+    } catch {
+      return;
+    }
+
+    if (data.type === 'message') {
+      // Full message (user or assistant)
+      const newMsg: ConversationMessage = {
+        id: nextWsMessageId(),
+        parts: data.content || [],
+        role: (data.role as 'assistant' | 'system' | 'user') || 'assistant',
+        timestamp: data.timestamp || new Date().toISOString(),
+      };
+      messages = [...messages, newMsg];
+    } else if (data.type === 'tool-use') {
+      // Append tool_use block to the last assistant message
+      const toolPart: ToolUsePart = {
+        id: data.id || nextWsMessageId(),
+        input: data.input || {},
+        toolName: data.name || 'Unknown',
+        type: 'tool_use',
+      };
+      appendToLastAssistant(toolPart);
+    } else if (data.type === 'tool-result') {
+      // Append a system message with the tool result
+      const resultMsg: ConversationMessage = {
+        id: nextWsMessageId(),
+        parts: [
+          {
+            isError: data.isError || false,
+            output: data.output || '',
+            toolUseId: data.id || '',
+            type: 'tool_result',
+          },
+        ],
+        role: 'system',
+        timestamp: new Date().toISOString(),
+      };
+      messages = [...messages, resultMsg];
+    } else if (data.type === 'thinking') {
+      // Append thinking block to the last assistant message
+      const thinkPart: MessagePart = {
+        content: data.text || '',
+        type: 'thinking',
+      };
+      appendToLastAssistant(thinkPart);
+    } else if (data.type === 'error') {
+      // Server-sent error — display in the UI
+      const errorMsg: ConversationMessage = {
+        id: nextWsMessageId(),
+        parts: [{ content: data.text || data.message || 'Unknown error', type: 'text' }],
+        role: 'system',
+        timestamp: new Date().toISOString(),
+      };
+      messages = [...messages, errorMsg];
+    } else if (data.type === 'permission-requested') {
+      // Permission request — log for now (full UI integration would go here)
+      console.log('[session] Permission requested:', data);
+    } else if (data.type === 'session-end') {
+      // Session has ended — mark as inactive
+      isSessionActive = false;
+      connectionState = 'disconnected';
+      if (ws) {
+        ws.close();
+        ws = null;
+      }
+    }
+  }
+
+  // Append a part to the last assistant message, or create one
+  function appendToLastAssistant(part: MessagePart): void {
+    const lastMsg = messages.length > 0 ? messages[messages.length - 1] : null;
+    if (lastMsg?.role === 'assistant') {
+      // Mutate the parts array and reassign to trigger reactivity
+      const updatedParts = [...lastMsg.parts, part];
+      const updatedMsg = { ...lastMsg, parts: updatedParts };
+      messages = [...messages.slice(0, -1), updatedMsg];
+    } else {
+      // Create a new assistant message to hold this part
+      const newMsg: ConversationMessage = {
+        id: nextWsMessageId(),
+        parts: [part],
+        role: 'assistant',
+        timestamp: new Date().toISOString(),
+      };
+      messages = [...messages, newMsg];
+    }
+  }
+
+  // Connect to the live session WebSocket
+  async function connectWebSocket(): Promise<void> {
+    if (!browser || !isSessionActive) {return;}
+
+    const saved = localStorage.getItem('shooter_config');
+    if (!saved) {return;}
+    const config = JSON.parse(saved);
+
+    connectionState = 'connecting';
+
+    try {
+      // Obtain a short-lived ticket
+      const ticketRes = await fetch('/api/ws-ticket', {
+        headers: { Authorization: `Bearer ${config.apiKey}` },
+        method: 'POST',
+      });
+      if (!ticketRes.ok) {
+        connectionState = 'disconnected';
+        return;
+      }
+      const { ticket } = await ticketRes.json();
+
+      // Build WebSocket URL
+      const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const wsUrl = `${wsProtocol}//${window.location.host}/ws/session/${sessionId}?ticket=${ticket}`;
+
+      const socket = new WebSocket(wsUrl);
+
+      socket.onopen = () => {
+        connectionState = 'connected';
+        ws = socket;
+        wsReconnectAttempts = 0; // Reset on successful connection
+      };
+
+      socket.onmessage = handleWsMessage;
+
+      socket.onclose = () => {
+        connectionState = 'disconnected';
+        ws = null;
+        // Reconnect with backoff (max 5 retries)
+        if (isSessionActive && wsReconnectAttempts < 5) {
+          wsReconnectAttempts++;
+          wsReconnectTimer = window.setTimeout(() => {
+            void connectWebSocket();
+          }, 2000);
+        }
+      };
+
+      socket.onerror = () => {
+        connectionState = 'disconnected';
+        ws = null;
+      };
+    } catch {
+      connectionState = 'disconnected';
+    }
+  }
+
+  function formatDate(ts: string): string {
+    return new Date(ts).toLocaleDateString([], {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    });
+  }
+
+  function shortPath(p: string): string {
+    const parts = p.split('/');
+    return parts.slice(-2).join('/');
+  }
+
+  async function fetchSession(): Promise<void> {
+    if (!browser) {
+      return;
+    }
+
+    // Don't show loading spinner if we already have cached data
+    if (messages.length === 0) {
+      loading = true;
+    }
+
+    try {
+      const saved = localStorage.getItem('shooter_config');
+      if (!saved) {
+        error = 'No configuration found. Please configure settings first.';
+        loading = false;
+        return;
+      }
+      const config = JSON.parse(saved);
+
+      const sid = sessionId || '';
+      const pid = projectId || '';
+      const queryStr = pid
+        ? `id=${encodeURIComponent(sid)}&project=${encodeURIComponent(pid)}`
+        : `id=${encodeURIComponent(sid)}`;
+      const res = await fetch(`/api/sessions?${queryStr}`, {
+        headers: { Authorization: `Bearer ${config.apiKey}` },
+      });
+      if (!res.ok) {
+        error = 'Session not found';
+        loading = false;
+        return;
+      }
+      const data: SessionResponse = await res.json();
+      session = data.session;
+      messages = (data.messages || []).reverse();
+      setCache(`shooter_session_${sid}`, { messages: data.messages || [], session: data.session });
+
+      // Check if session is active and connect WebSocket if so
+      if (data.session) {
+        isSessionActive = checkSessionActive(data.session);
+        if (isSessionActive) {
+          void connectWebSocket();
+        }
+      }
+    } catch {
+      error = 'Failed to load session';
+    }
+    loading = false;
+  }
+
+  onMount(() => {
+    // Show cached data immediately
+    const cached = getCached(`shooter_session_${page.params.id}`) as null | {
+      messages: ConversationMessage[];
+      session: SessionInfo;
+    };
+    if (cached) {
+      session = cached.session;
+      messages = (cached.messages || []).reverse();
+      loading = false;
+    }
+
+    void fetchSession();
+
+    // Cleanup WebSocket and reconnect timer on component destroy
+    return () => {
+      if (wsReconnectTimer) {
+        clearTimeout(wsReconnectTimer);
+        wsReconnectTimer = null;
+      }
+      if (ws) {
+        ws.close();
+        ws = null;
+      }
+    };
+  });
+</script>
+
+<svelte:head>
+  <title>{session?.title || 'Session'} - Shooter</title>
+  <meta name="description" content="Session conversation view" />
+</svelte:head>
+
+<main class="main session-page-main">
+  {#if loading && messages.length === 0}
+    <div class="loading-container">
+      <Shimmer classes="shimmer-header" />
+      <div class="chat-container">
+        <Shimmer classes="shimmer-bubble shimmer-bubble-user" />
+        <Shimmer classes="shimmer-bubble shimmer-bubble-assistant" />
+        <Shimmer classes="shimmer-bubble shimmer-bubble-user-short" />
+        <Shimmer classes="shimmer-bubble shimmer-bubble-assistant-wide" />
+        <Shimmer classes="shimmer-bubble shimmer-bubble-assistant-short" />
+      </div>
+    </div>
+  {:else if error}
+    <div class="session-back-row">
+      <a href="/" class="back-link">
+        <span class="back-arrow">&larr;</span>
+        Back
+      </a>
+    </div>
+    <EmptyState icon="alert-triangle" title="Error" description={error} />
+  {:else if session}
+    <!-- Session Header -->
+    <div class="chat-session-header">
+      <div class="chat-session-header-top">
+        <a href="/project?id={projectId}" class="back-link">&#8592; Back to Project</a>
+        {#if isSessionActive || connectionState === 'connected' || connectionState === 'connecting'}
+          <div class="live-connection-row">
+            {#if connectionState === 'connected'}
+              <span class="connection-status connected">
+                <span class="connection-status-dot"></span>
+              </span>
+            {:else if connectionState === 'connecting'}
+              <span class="connection-status reconnecting">
+                <span class="connection-status-dot"></span>
+              </span>
+            {:else if connectionState === 'disconnected'}
+              <span class="connection-status disconnected">
+                <span class="connection-status-dot"></span>
+              </span>
+            {/if}
+          </div>
+        {/if}
+      </div>
+      <div class="chat-session-title-row">
+        <h1 class="chat-session-title">{session.title}</h1>
+        {#if isSessionActive}
+          <Pill text="LIVE" classes="pill-live" />
+        {/if}
+      </div>
+      <div class="chat-session-meta">
+        <span class="chat-session-meta-item">&#128193; {shortPath(session.projectPath)}</span>
+        <span class="chat-session-meta-item">&#127807; {session.gitBranch}</span>
+        <span class="chat-session-meta-item">&#128172; {session.messageCount} messages</span>
+        <span class="chat-session-meta-item">&#128197; {formatDate(session.created)}</span>
+      </div>
+      {#if connectionState === 'disconnected' && isSessionActive}
+        <Banner text="Live updates paused" classes="banner-warning" />
+      {/if}
+    </div>
+
+    <!-- Chat Container -->
+    <div class="session-chat-container">
+      <ChatView
+        messages={messages}
+        connectionState={connectionState}
+        showInput={false}
+        sessionEnded={!isSessionActive}
+      />
+    </div>
+  {/if}
+</main>
+
+<style>
+  /* Make the main element a flex column so the chat fills remaining space */
+  .session-page-main {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* Chat container fills remaining space */
+  .session-chat-container {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Back link (used in error state) */
+  .session-back-row {
+    margin-bottom: var(--space-5);
+  }
+
+  /* Header top row: back link + connection status */
+  .chat-session-header-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  /* Title row: title + LIVE badge */
+  .chat-session-title-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  /* Connection status row */
+  .live-connection-row {
+    display: flex;
+    align-items: center;
+  }
+
+  /* Paused banner override */
+  :global(.banner-warning) {
+    margin-top: 0.5rem;
+  }
+</style>