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}

{/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}

{#if isCameraLive($appState.activeCameraDeviceId)} {/if} {activeCameraLabel()}

Stream unavailable

{$appState.clientPlaceholderText}

{#if activeStreamDiagnostics()}

Diagnostics {activeStreamSessionId()?.slice(0, 8)} {#if isCameraLive($appState.activeCameraDeviceId)} Peer connected {/if}

{#each activeStreamDiagnostics().entries.slice(0, 4) as entry (entry.id)}

{entry.stage} {new Date(entry.createdAt).toLocaleTimeString()}

{entry.message}

{/each}

{/if}

Recent Clips

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

{new Date(recording.createdAt).toLocaleTimeString()}

{recording.status ?? 'unknown'} · {recording.durationSeconds != null ? `${recording.durationSeconds}s` : '--'}

{/each} {/if}