commit 3d9be029ce3f9f2d6aa9acbd843274207b23e582 · nekomimi.pet/cute-monitor

+3 -1

web/config.example.json

···

       2
        
       	"pds": "https://bsky.social",

     

       3
        
       	"did": "did:plc:your-did-here",

     

       4
        
       	"title": "cuteuptime",

     

       5
       -
       	"subtitle": "cute uptime monitoring using your PDS to store events"

     

       0
        
       
     

       0
        
       
     

       6
        
       }

     

       7

···

       2
        
       	"pds": "https://bsky.social",

     

       3
        
       	"did": "did:plc:your-did-here",

     

       4
        
       	"title": "cuteuptime",

     

       5
       +
       	"subtitle": "cute uptime monitoring using your PDS to store events",

     

       6
       +
       	"showInactivityWarning": true,

     

       7
       +
       	"inactivityThresholdMinutes": 5

     

       8
        
       }

     

       9

+59 -13

web/src/app.svelte

···

       1
        
       <script lang="ts">

     

       2
        
       	import { onMount } from 'svelte';

     

       3
       -
       	import { fetchUptimeChecks } from './lib/atproto.ts';

     

       4
        
       	import UptimeDisplay from './lib/uptime-display.svelte';

     

       5
        
       	import type { UptimeCheckRecord } from './lib/types.ts';

     

       6
        
       	import { config } from './lib/config.ts';

     

       7
        
       

     

       8
        
       	let checks = $state<UptimeCheckRecord[]>([]);

     

       9
       -
       	let loading = $state(true);

     

       10
        
       	let error = $state('');

     

       11
        
       	let lastUpdate = $state<Date | null>(null);

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       12
        
       

     

       13
        
       	async function loadChecks() {

     

       14
       -
       		loading = true;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       15
        
       		error = '';

     

       16
        
       

     

       17
        
       		try {

     

       18
       -
       			checks = await fetchUptimeChecks(config.pds, config.did);

     

       19
       -
       			lastUpdate = new Date();

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       20
        
       		} catch (err) {

     

       21
        
       			error = (err as Error).message || 'failed to fetch uptime checks';

     

       22
        
       			checks = [];

     

       23
        
       		} finally {

     

       24
        
       			loading = false;

     

       0
        
       
     

       25
        
       		}

     

       26
        
       	}

     

       27
        
       

     
···

       48
        
       					last updated: {lastUpdate.toLocaleTimeString()}

     

       49
        
       				</span>

     

       50
        
       			{/if}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       51
        
       		</div>

     

       52
        
       		<button 

     

       53
        
       			class="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50 transition-opacity" 

     

       54
        
       			onclick={loadChecks} 

     

       55
       -
       			disabled={loading}

     

       56
        
       		>

     

       57
       -
       			{loading ? 'refreshing...' : 'refresh'}

     

       58
        
       		</button>

     

       59
        
       	</div>

     

       60
        
       

     
···

       64
        
       		</div>

     

       65
        
       	{/if}

     

       66
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       67
        
       	{#if loading && checks.length === 0}

     

       68
        
       		<div class="text-center py-12 bg-card rounded-lg shadow-sm text-muted-foreground">

     

       69
       -
       			loading uptime data...

     

       70
        
       		</div>

     

       71
       -
       	{:else if checks.length > 0}

     

       72
        
       		<UptimeDisplay {checks} />

     

       73
       -
       	{:else if !loading}

     

       74
       -
       		<div class="text-center py-12 bg-card rounded-lg shadow-sm text-muted-foreground">

     

       75
       -
       			no uptime data available

     

       76
       -
       		</div>

     

       77
        
       	{/if}

     

       78
        
       

     

       79
        
       	<footer class="mt-12 pt-8 border-t border-border text-center text-sm text-muted-foreground">

···

       1
        
       <script lang="ts">

     

       2
        
       	import { onMount } from 'svelte';

     

       3
       +
       	import { fetchUptimeChecks, fetchInitialUptimeChecks } from './lib/atproto.ts';

     

       4
        
       	import UptimeDisplay from './lib/uptime-display.svelte';

     

       5
        
       	import type { UptimeCheckRecord } from './lib/types.ts';

     

       6
        
       	import { config } from './lib/config.ts';

     

       7
        
       

     

       8
        
       	let checks = $state<UptimeCheckRecord[]>([]);

     

       9
       +
       	let loading = $state(false);

     

       10
        
       	let error = $state('');

     

       11
        
       	let lastUpdate = $state<Date | null>(null);

     

       12
       +
       	let hasRecentEvents = $state(true);

     

       13
       +
       	let initialLoadComplete = $state(false);

     

       14
       +
       	let isLoadingMore = $state(false);

     

       15
       +
       

     

       16
       +
       	/**

     

       17
       +
       	 * checks if there are any events in the configured threshold period

     

       18
       +
       	 */

     

       19
       +
       	function checkForRecentEvents(records: UptimeCheckRecord[]): boolean {

     

       20
       +
       		const thresholdMinutes = config.inactivityThresholdMinutes || 5;

     

       21
       +
       		const thresholdTimeAgo = new Date(Date.now() - thresholdMinutes * 60 * 1000);

     

       22
       +
       		return records.some(record => record.indexedAt > thresholdTimeAgo);

     

       23
       +
       	}

     

       24
        
       

     

       25
        
       	async function loadChecks() {

     

       26
       +
       		if (!initialLoadComplete) {

     

       27
       +
       			isLoadingMore = true;

     

       28
       +
       		} else {

     

       29
       +
       			loading = true;

     

       30
       +
       		}

     

       31
        
       		error = '';

     

       32
        
       

     

       33
        
       		try {

     

       34
       +
       			if (!initialLoadComplete) {

     

       35
       +
       				// Initial load: fetch records progressively and show in real-time

     

       36
       +
       				await fetchInitialUptimeChecks(config.pds, config.did, (progressRecords) => {

     

       37
       +
       					checks = progressRecords;

     

       38
       +
       					lastUpdate = new Date();

     

       39
       +
       					hasRecentEvents = checkForRecentEvents(progressRecords);

     

       40
       +
       				});

     

       41
       +
       				initialLoadComplete = true;

     

       42
       +
       			} else {

     

       43
       +
       				// Refresh: fetch only new records and append them

     

       44
       +
       				const result = await fetchUptimeChecks(config.pds, config.did);

     

       45
       +
       				if (result.records.length > 0) {

     

       46
       +
       					// Check if we actually have new records by comparing with existing ones

     

       47
       +
       					const existingUris = new Set(checks.map(c => c.uri));

     

       48
       +
       					const newRecords = result.records.filter(r => !existingUris.has(r.uri));

     

       49
       +
       					

     

       50
       +
       					if (newRecords.length > 0) {

     

       51
       +
       						checks = newRecords.concat(checks); // prepend new records

     

       52
       +
       					}

     

       53
       +
       				}

     

       54
       +
       				lastUpdate = new Date();

     

       55
       +
       				hasRecentEvents = checkForRecentEvents(checks);

     

       56
       +
       			}

     

       57
        
       		} catch (err) {

     

       58
        
       			error = (err as Error).message || 'failed to fetch uptime checks';

     

       59
        
       			checks = [];

     

       60
        
       		} finally {

     

       61
        
       			loading = false;

     

       62
       +
       			isLoadingMore = false;

     

       63
        
       		}

     

       64
        
       	}

     

       65
        
       

     
···

       86
        
       					last updated: {lastUpdate.toLocaleTimeString()}

     

       87
        
       				</span>

     

       88
        
       			{/if}

     

       89
       +
       			{#if isLoadingMore}

     

       90
       +
       				<span class="text-sm text-primary animate-pulse">

     

       91
       +
       					fetching more data...

     

       92
       +
       				</span>

     

       93
       +
       			{/if}

     

       94
        
       		</div>

     

       95
        
       		<button 

     

       96
        
       			class="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50 transition-opacity" 

     

       97
        
       			onclick={loadChecks} 

     

       98
       +
       			disabled={loading || isLoadingMore}

     

       99
        
       		>

     

       100
       +
       			{loading || isLoadingMore ? 'loading...' : 'refresh'}

     

       101
        
       		</button>

     

       102
        
       	</div>

     

       103
        
       

     
···

       107
        
       		</div>

     

       108
        
       	{/if}

     

       109
        
       

     

       110
       +
       	{#if config.showInactivityWarning && !hasRecentEvents && checks.length > 0}

     

       111
       +
       		<div class="bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-lg p-4 mb-4">

     

       112
       +
       			<strong>⚠️ Warning:</strong> No uptime pings received in the last {config.inactivityThresholdMinutes || 5} minutes. 

     

       113
       +
       			The uptime monitor may be offline or experiencing issues.

     

       114
       +
       		</div>

     

       115
       +
       	{/if}

     

       116
       +
       

     

       117
        
       	{#if loading && checks.length === 0}

     

       118
        
       		<div class="text-center py-12 bg-card rounded-lg shadow-sm text-muted-foreground">

     

       119
       +
       			fetching uptime data...

     

       120
        
       		</div>

     

       121
       +
       	{:else}

     

       122
        
       		<UptimeDisplay {checks} />

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       123
        
       	{/if}

     

       124
        
       

     

       125
        
       	<footer class="mt-12 pt-8 border-t border-border text-center text-sm text-muted-foreground">

+48 -5

web/src/lib/atproto.ts

···

       4
        
       import type { UptimeCheck, UptimeCheckRecord } from './types.ts';

     

       5
        
       

     

       6
        
       /**

     

       7
       -
        * fetches uptime check records from a PDS for a given DID

     

       8
        
        *

     

       9
        
        * @param pds the PDS URL

     

       10
        
        * @param did the DID or handle to fetch records for

     

       11
       -
        * @returns array of uptime check records

     

       0
        
       
     

       12
        
        */

     

       13
        
       export async function fetchUptimeChecks(

     

       14
        
       	pds: string,

     

       15
        
       	did: ActorIdentifier,

     

       16
       -
       ): Promise<UptimeCheckRecord[]> {

     

       0
        
       
     

       17
        
       	const handler = simpleFetchHandler({ service: pds });

     

       18
        
       	const rpc = new Client({ handler });

     

       19
        
       

     
···

       30
        
       		resolvedDid = did as Did;

     

       31
        
       	}

     

       32
        
       

     

       33
       -
       	// fetch uptime check records

     

       34
        
       	const response = await ok(

     

       35
        
       		rpc.get('com.atproto.repo.listRecords', {

     

       36
        
       			params: {

     

       37
        
       				repo: resolvedDid,

     

       38
        
       				collection: 'pet.nkp.uptime.check',

     

       39
        
       				limit: 100,

     

       0
        
       
     

       40
        
       			},

     

       41
        
       		}),

     

       42
        
       	);

     

       43
        
       

     

       44
        
       	// transform records into a more usable format

     

       45
       -
       	return response.records.map((record) => ({

     

       46
        
       		uri: record.uri,

     

       47
        
       		cid: record.cid,

     

       48
        
       		value: record.value as unknown as UptimeCheck,

     

       49
        
       		indexedAt: new Date((record.value as unknown as UptimeCheck).checkedAt),

     

       50
        
       	}));

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       51
        
       }

···

       4
        
       import type { UptimeCheck, UptimeCheckRecord } from './types.ts';

     

       5
        
       

     

       6
        
       /**

     

       7
       +
        * fetches uptime check records from a PDS for a given DID with cursor support

     

       8
        
        *

     

       9
        
        * @param pds the PDS URL

     

       10
        
        * @param did the DID or handle to fetch records for

     

       11
       +
        * @param cursor optional cursor for pagination

     

       12
       +
        * @returns object with records array and optional next cursor

     

       13
        
        */

     

       14
        
       export async function fetchUptimeChecks(

     

       15
        
       	pds: string,

     

       16
        
       	did: ActorIdentifier,

     

       17
       +
       	cursor?: string,

     

       18
       +
       ): Promise<{ records: UptimeCheckRecord[]; cursor?: string }> {

     

       19
        
       	const handler = simpleFetchHandler({ service: pds });

     

       20
        
       	const rpc = new Client({ handler });

     

       21
        
       

     
···

       32
        
       		resolvedDid = did as Did;

     

       33
        
       	}

     

       34
        
       

     

       35
       +
       	// fetch uptime check records with cursor

     

       36
        
       	const response = await ok(

     

       37
        
       		rpc.get('com.atproto.repo.listRecords', {

     

       38
        
       			params: {

     

       39
        
       				repo: resolvedDid,

     

       40
        
       				collection: 'pet.nkp.uptime.check',

     

       41
        
       				limit: 100,

     

       42
       +
       				cursor,

     

       43
        
       			},

     

       44
        
       		}),

     

       45
        
       	);

     

       46
        
       

     

       47
        
       	// transform records into a more usable format

     

       48
       +
       	const records = response.records.map((record) => ({

     

       49
        
       		uri: record.uri,

     

       50
        
       		cid: record.cid,

     

       51
        
       		value: record.value as unknown as UptimeCheck,

     

       52
        
       		indexedAt: new Date((record.value as unknown as UptimeCheck).checkedAt),

     

       53
        
       	}));

     

       54
       +
       

     

       55
       +
       	return {

     

       56
       +
       		records,

     

       57
       +
       		cursor: response.cursor,

     

       58
       +
       	};

     

       59
       +
       }

     

       60
       +
       

     

       61
       +
       /**

     

       62
       +
        * fetches up to 2000 uptime check records using cursor pagination with progress callback

     

       63
       +
        *

     

       64
       +
        * @param pds the PDS URL

     

       65
       +
        * @param did the DID or handle to fetch records for

     

       66
       +
        * @param onProgress optional callback called with each batch of records

     

       67
       +
        * @returns array of uptime check records (max 2000)

     

       68
       +
        */

     

       69
       +
       export async function fetchInitialUptimeChecks(

     

       70
       +
       	pds: string,

     

       71
       +
       	did: ActorIdentifier,

     

       72
       +
       	onProgress?: (records: UptimeCheckRecord[]) => void,

     

       73
       +
       ): Promise<UptimeCheckRecord[]> {

     

       74
       +
       	let allRecords: UptimeCheckRecord[] = [];

     

       75
       +
       	let cursor: string | undefined;

     

       76
       +
       	const maxRecords = 2000;

     

       77
       +
       	const batchSize = 100;

     

       78
       +
       	let totalFetched = 0;

     

       79
       +
       

     

       80
       +
       	do {

     

       81
       +
       		const result = await fetchUptimeChecks(pds, did, cursor);

     

       82
       +
       		const newRecords = result.records;

     

       83
       +
       		allRecords = allRecords.concat(newRecords);

     

       84
       +
       		totalFetched += newRecords.length;

     

       85
       +
       		cursor = result.cursor;

     

       86
       +
       		

     

       87
       +
       		// Call progress callback with the accumulated records

     

       88
       +
       		if (onProgress) {

     

       89
       +
       			onProgress(allRecords);

     

       90
       +
       		}

     

       91
       +
       	} while (cursor && totalFetched < maxRecords);

     

       92
       +
       

     

       93
       +
       	return allRecords;

     

       94
        
       }

+8 -1

web/src/lib/config.ts

···

       9
        
       	did: ActorIdentifier;

     

       10
        
       	title: string;

     

       11
        
       	subtitle: string;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       12
        
       };

     

       13
        
       

     

       14
       -
       export const config = __CONFIG__;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       15

···

       9
        
       	did: ActorIdentifier;

     

       10
        
       	title: string;

     

       11
        
       	subtitle: string;

     

       12
       +
       	/** whether to show the 5-minute inactivity warning */

     

       13
       +
       	showInactivityWarning?: boolean;

     

       14
       +
       	/** minutes to check for recent activity (default: 5) */

     

       15
       +
       	inactivityThresholdMinutes?: number;

     

       16
        
       };

     

       17
        
       

     

       18
       +
       export const config = __CONFIG__ as typeof __CONFIG__ & {

     

       19
       +
       	showInactivityWarning: boolean;

     

       20
       +
       	inactivityThresholdMinutes: number;

     

       21
       +
       };

     

       22