Client Dashboard

Your Cameras {#if $appState.linkedCameras.length === 0} No cameras linked Link a camera to start viewing live feeds and recordings. {:else}

{#each $appState.linkedCameras as link (link.id)}

{ if ((event.target as HTMLElement).closest('[data-menu-trigger]')) return; appController.selectCamera(link.cameraDeviceId); }} onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') appController.selectCamera(link.cameraDeviceId); }} >

{#if $appState.activeCameraDeviceId === link.cameraDeviceId}

Viewing

{:else}

{isCameraLive(link.cameraDeviceId) ? 'Live Stream Active' : 'Click to view'}

{/if}

{link.cameraName || link.cameraDeviceId}

{link.cameraStatus || 'offline'}

{#snippet child({ props })} {/snippet} { event.stopPropagation(); appController.renameLinkedCamera(link.cameraDeviceId); }} > Rename { event.stopPropagation(); appController.deleteLinkedCamera(link.id); }} > Delete

{/each}

{/if}

Live Feed: {activeCameraLabel()}

Stream unavailable {$appState.clientPlaceholderText}

Recent Recordings

{#if $appState.recordings.length === 0} No recordings found Captured clips will appear here when they are ready. {:else} {#each $appState.recordings.slice(0, 5) as recording (recording.id)}

{new Date(recording.createdAt).toLocaleString()} {recording.durationSeconds != null ? `${recording.durationSeconds}s duration` : 'Duration pending'} · {recording.status ?? 'unknown'}

{/each} {/if}