Frontend Services

This directory contains service functions that handle API calls and external integrations.

Handles glimpse data API calls.

Functions:

• fetchGlimpseData(glimpseId) - Fetch glimpse data from /glimpse/{id} endpoint

Handles agent data API calls.

Functions:

• fetchAgentData(glimpseId) - Fetch agent data from /api/agent/{id} endpoint
• Returns null for missing agents (expected behavior)

Handles viewing status tracking.

Functions:

• updateViewingStatus(payload) - Send viewing status updates to /api/viewing
• Silently fails to avoid disrupting user experience

Note: Uses ViewingStatusPayload type from /frontend/types/viewing.ts

Handles cobrowse session management.

Functions:

• startCobrowseSession() - Initialize cobrowse session using GLANCE library
• Includes error handling and user feedback

import { fetchGlimpseData } from "../services/glimpseService.ts";
import { fetchAgentData } from "../services/agentService.ts";
import { updateViewingStatus } from "../services/viewingService.ts";
import { startCobrowseSession } from "../services/cobrowseService.ts";

// Fetch data
const glimpseData = await fetchGlimpseData(glimpseId);
const agentData = await fetchAgentData(glimpseId);

// Update status
await updateViewingStatus({ pageId: glimpseId, viewing: true, tabVisible: true });

// Start cobrowse
startCobrowseSession();

• Centralized API logic: All external calls in one place
• Consistent error handling: Standardized error responses
• Reusable: Can be used across components and hooks
• Testable: Easy to mock for unit tests
• Type-safe: Full TypeScript support