Split bin dir into separate daemon and check dirs

This lets us manage their increasingly disparate dependencies separately

daemon/web/src/lib/components/AnalysisStatus.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { AnalysisStatus } from '$lib/analysisManager.svelte';
+    import { EventType } from '$lib/analysis.svelte';
+    import type { ManifestEntry } from '$lib/manifest.svelte';
+    let {
+        entry,
+        onclick,
+        analysis_visible,
+    }: {
+        entry: ManifestEntry;
+        onclick: () => void;
+        analysis_visible: boolean;
+    } = $props();
+
+    let summary = $derived.by(() => {
+        if (entry.analysis_status === AnalysisStatus.Queued) {
+            return 'Queued...';
+        } else if (entry.analysis_status === AnalysisStatus.Running) {
+            return 'Running...';
+        } else if (entry.analysis_status === AnalysisStatus.Finished) {
+            if (entry.analysis_report === undefined) {
+                return 'Loading...';
+            } else if (typeof entry.analysis_report === 'string') {
+                return entry.analysis_report;
+            } else {
+                let num_warnings = 0;
+                for (let row of entry.analysis_report.rows) {
+                    for (let analysis of row.analysis) {
+                        for (let event of analysis.events) {
+                            if (event.type === EventType.Warning) {
+                                num_warnings += 1;
+                            }
+                        }
+                    }
+                }
+                return `${num_warnings} warnings`;
+            }
+        } else {
+            return 'Loading...';
+        }
+    });
+
+    let ready = $derived.by(() => {
+        let finished = entry.analysis_status === AnalysisStatus.Finished;
+        let report_available = entry.analysis_report !== undefined;
+        return finished && report_available;
+    });
+
+    let button_class = $derived(ready ? 'text-blue-600 border rounded-full px-2' : '');
+</script>
+
+<button class="flex flex-row gap-1 lg:gap-2" disabled={!ready} {onclick}>
+    <span
+        class="{button_class} {(entry.get_num_warnings() || 0) < 1
+            ? 'text-green-700 border-green-500 bg-green-200'
+            : 'text-red-700 border-red-500 bg-red-200'}">{summary}</span
+    >
+    <svg
+        class="w-6 h-6 text-gray-800 transition-transform {analysis_visible ? 'rotate-180' : ''}"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+    >
+        <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m19 9-7 7-7-7"
+        />
+    </svg>
+</button>

daemon/web/src/lib/components/AnalysisTable.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { EventType, type AnalysisReport } from '$lib/analysis.svelte';
+    let {
+        report,
+    }: {
+        report: AnalysisReport;
+    } = $props();
+
+    const date_formatter = new Intl.DateTimeFormat(undefined, {
+        timeStyle: 'long',
+        dateStyle: 'short',
+    });
+
+    const skipped_messages: Map<string, number> = $derived.by(() => {
+        let map = new Map();
+        for (const row of report.rows) {
+            for (const message of row.skipped_message_reasons) {
+                let count = map.get(message);
+                if (count === undefined) {
+                    count = 0;
+                }
+                map.set(message, count + 1);
+            }
+        }
+        return map;
+    });
+</script>
+
+<div>
+    <p class="text-lg underline">Warnings and Informational Logs</p>
+    {#if report.statistics.num_warnings === 0 && report.statistics.num_informational_logs === 0}
+        <p>Nothing to show!</p>
+    {:else}
+        <table class="table-auto text-left">
+            <thead class="p-2">
+                <tr class="bg-gray-300">
+                    <th class="p-2">Timestamp</th>
+                    <th class="p-2">Warning</th>
+                    <th class="p-2">Severity</th>
+                </tr>
+            </thead>
+            <tbody>
+                {#each report.rows as row}
+                    {#each row.analysis as analysis}
+                        {@const parsed_date = new Date(analysis.timestamp)}
+                        {#each analysis.events.filter((e) => e !== null) as event}
+                            <tr class="even:bg-gray-200 odd:bg-white">
+                                {#if event.type === EventType.Warning}
+                                    {@const severity = ['Low', 'Medium', 'High'][event.severity]}
+                                    {@const severity_class = [
+                                        'bg-red-200',
+                                        'bg-red-400',
+                                        'bg-red-600',
+                                    ][event.severity]}
+                                    <td class="p-2">{date_formatter.format(parsed_date)}</td>
+                                    <td class="p-2">{event.message}</td>
+                                    <td class="p-2 {severity_class} text-center">{severity}</td>
+                                {:else if event.type === EventType.Informational}
+                                    <td class="p-2">{date_formatter.format(parsed_date)}</td>
+                                    <td class="p-2">{event.message}</td>
+                                    <td class="p-2">Info</td>
+                                {/if}
+                            </tr>
+                        {/each}
+                    {/each}
+                {/each}
+            </tbody>
+        </table>
+    {/if}
+</div>
+{#if report.statistics.num_skipped_packets > 0}
+    <div>
+        <p class="text-lg underline">Unparsed Messages</p>
+        <p>
+            These are due to a limitation or bug in Rayhunter's parser, and aren't ususally a
+            problem.
+        </p>
+        <table class="table-auto text-left">
+            <thead class="p-2">
+                <tr class="bg-gray-300">
+                    <th scope="col" class="p-2">Total Msgs Affected</th>
+                    <th scope="col">Reason/Error</th>
+                </tr>
+            </thead>
+            <tbody>
+                {#each skipped_messages.entries() as [message, count]}
+                    <tr class="even:bg-gray-200 odd:bg-white">
+                        <td class="text-center">{count}</td>
+                        <td>{message}</td>
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    </div>
+{/if}

daemon/web/src/lib/components/AnalysisView.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { type ReportMetadata } from '$lib/analysis.svelte';
+    import type { ManifestEntry } from '$lib/manifest.svelte';
+    import AnalysisTable from './AnalysisTable.svelte';
+    let {
+        entry,
+    }: {
+        entry: ManifestEntry;
+    } = $props();
+</script>
+
+<div class="container mt-2">
+    {#if entry.analysis_report === undefined}
+        <p>Report unavailable, try refreshing.</p>
+    {:else if typeof entry.analysis_report === 'string'}
+        <p>Error getting analysis report: {entry.analysis_report}</p>
+    {:else}
+        {@const metadata: ReportMetadata = entry.analysis_report.metadata}
+        <div class="flex flex-col gap-2">
+            {#if entry.analysis_report.rows.length > 0}
+                <AnalysisTable report={entry.analysis_report} />
+            {:else}
+                <p>No warnings to display!</p>
+            {/if}
+            {#if metadata !== undefined && metadata.rayhunter !== undefined}
+                <div>
+                    <p class="text-lg underline">Metadata</p>
+                    <p>Analysis by Rayhunter version {metadata.rayhunter.rayhunter_version}</p>
+                    <p><b>Device system OS:</b> {metadata.rayhunter.system_os}</p>
+                </div>
+                <div>
+                    <p class="text-lg underline">Analyzers</p>
+                    {#each metadata.analyzers as analyzer}
+                        <p><b>{analyzer.name}:</b> {analyzer.description}</p>
+                    {/each}
+                </div>
+            {:else}
+                <p>N/A (analysis generated by an older version of rayhunter)</p>
+            {/if}
+        </div>
+    {/if}
+</div>

daemon/web/src/lib/components/ConfigForm.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+    import { get_config, set_config, type Config } from '../utils.svelte';
+
+    let config = $state<Config | null>(null);
+
+    let loading = $state(false);
+    let saving = $state(false);
+    let message = $state('');
+    let messageType = $state<'success' | 'error' | null>(null);
+    let showConfig = $state(false);
+
+    async function loadConfig() {
+        try {
+            loading = true;
+            config = await get_config();
+            message = '';
+            messageType = null;
+        } catch (error) {
+            message = `Failed to load config: ${error}`;
+            messageType = 'error';
+        } finally {
+            loading = false;
+        }
+    }
+
+    async function saveConfig() {
+        if (!config) return;
+
+        try {
+            saving = true;
+            await set_config(config);
+            message =
+                'Config saved successfully! Rayhunter is restarting now. Reload the page in a few seconds.';
+            messageType = 'success';
+        } catch (error) {
+            message = `Failed to save config: ${error}`;
+            messageType = 'error';
+        } finally {
+            saving = false;
+        }
+    }
+
+    // Load config when first shown
+    $effect(() => {
+        if (showConfig && !config) {
+            loadConfig();
+        }
+    });
+</script>
+
+<div class="bg-white rounded-lg shadow-md p-6 m-4">
+    <button
+        class="w-full flex justify-between items-center text-xl font-bold mb-4 text-rayhunter-dark-blue hover:text-rayhunter-blue"
+        onclick={() => (showConfig = !showConfig)}
+    >
+        <span>Configuration</span>
+        <svg
+            class="w-6 h-6 transition-transform {showConfig ? 'rotate-180' : ''}"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+        >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"
+            ></path>
+        </svg>
+    </button>
+
+    {#if showConfig}
+        {#if loading}
+            <div class="text-center py-4">Loading config...</div>
+        {:else if config}
+            <form
+                class="space-y-4"
+                onsubmit={(e) => {
+                    e.preventDefault();
+                    saveConfig();
+                }}
+            >
+                <div>
+                    <label for="ui_level" class="block text-sm font-medium text-gray-700 mb-1">
+                        Device UI Level
+                    </label>
+                    <select
+                        id="ui_level"
+                        bind:value={config.ui_level}
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue"
+                    >
+                        <option value={0}>0 - Invisible mode</option>
+                        <option value={1}>1 - Subtle mode (colored line)</option>
+                        <option value={2}>2 - Demo mode (orca gif)</option>
+                        <option value={3}>3 - EFF logo</option>
+                    </select>
+                </div>
+
+                <div>
+                    <label
+                        for="key_input_mode"
+                        class="block text-sm font-medium text-gray-700 mb-1"
+                    >
+                        Device Input Mode
+                    </label>
+                    <select
+                        id="key_input_mode"
+                        bind:value={config.key_input_mode}
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue"
+                    >
+                        <option value={0}>0 - Disable button control</option>
+                        <option value={1}
+                            >1 - Double-tap power button to start/stop recording</option
+                        >
+                    </select>
+                </div>
+
+                <div class="space-y-3">
+                    <div class="flex items-center">
+                        <input
+                            id="colorblind_mode"
+                            type="checkbox"
+                            bind:checked={config.colorblind_mode}
+                            class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded"
+                        />
+                        <label for="colorblind_mode" class="ml-2 block text-sm text-gray-700">
+                            Colorblind Mode
+                        </label>
+                    </div>
+                </div>
+
+                <div class="border-t pt-4 mt-6">
+                    <h3 class="text-lg font-semibold text-gray-800 mb-4">
+                        Analyzer Heuristic Settings
+                    </h3>
+                    <div class="space-y-3">
+                        <div class="flex items-center">
+                            <input
+                                id="imsi_requested"
+                                type="checkbox"
+                                bind:checked={config.analyzers.imsi_requested}
+                                class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded"
+                            />
+                            <label for="imsi_requested" class="ml-2 block text-sm text-gray-700">
+                                IMSI Requested Heuristic
+                            </label>
+                        </div>
+
+                        <div class="flex items-center">
+                            <input
+                                id="connection_redirect_2g_downgrade"
+                                type="checkbox"
+                                bind:checked={config.analyzers.connection_redirect_2g_downgrade}
+                                class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded"
+                            />
+                            <label
+                                for="connection_redirect_2g_downgrade"
+                                class="ml-2 block text-sm text-gray-700"
+                            >
+                                Connection Redirect 2G Downgrade Heuristic
+                            </label>
+                        </div>
+
+                        <div class="flex items-center">
+                            <input
+                                id="lte_sib6_and_7_downgrade"
+                                type="checkbox"
+                                bind:checked={config.analyzers.lte_sib6_and_7_downgrade}
+                                class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded"
+                            />
+                            <label
+                                for="lte_sib6_and_7_downgrade"
+                                class="ml-2 block text-sm text-gray-700"
+                            >
+                                LTE SIB6 and SIB7 Downgrade Heuristic
+                            </label>
+                        </div>
+
+                        <div class="flex items-center">
+                            <input
+                                id="null_cipher"
+                                type="checkbox"
+                                bind:checked={config.analyzers.null_cipher}
+                                class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded"
+                            />
+                            <label for="null_cipher" class="ml-2 block text-sm text-gray-700">
+                                Null Cipher Heuristic
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex gap-2 pt-4">
+                    <button
+                        type="submit"
+                        disabled={saving}
+                        class="bg-blue-500 hover:bg-blue-700 disabled:opacity-50 text-white font-bold py-2 px-4 rounded-md flex flex-row gap-1 items-center"
+                    >
+                        {#if saving}
+                            <div
+                                class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"
+                            ></div>
+                            Saving...
+                        {:else}
+                            <svg
+                                class="w-4 h-4"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M5 13l4 4L19 7"
+                                ></path>
+                            </svg>
+                            Apply and restart
+                        {/if}
+                    </button>
+                </div>
+            </form>
+            {#if message}
+                <div
+                    class="mt-4 p-3 rounded {messageType === 'error'
+                        ? 'bg-red-100 text-red-700'
+                        : 'bg-green-100 text-green-700'}"
+                >
+                    {message}
+                </div>
+            {/if}
+        {:else}
+            <div class="text-center py-4 text-red-600">
+                Failed to load configuration. Please try reloading the page.
+            </div>
+        {/if}
+    {/if}
+</div>

daemon/web/src/lib/components/DeleteAllButton.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import DeleteButton from './DeleteButton.svelte';
+</script>
+
+<div class="flex flex-row justify-end gap-2">
+    <DeleteButton
+        text="Delete ALL Recordings"
+        prompt={`Are you sure you want to delete ALL recordings?`}
+        url={`/api/delete-all-recordings`}
+    />
+</div>

daemon/web/src/lib/components/DeleteButton.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { req } from '$lib/utils.svelte';
+    let {
+        text,
+        url,
+        prompt,
+    }: {
+        text?: string;
+        url: string;
+        prompt: string;
+    } = $props();
+
+    function confirmDelete() {
+        if (window.confirm(prompt)) {
+            req('POST', url);
+        }
+    }
+</script>
+
+<button
+    class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md flex flex-row"
+    onclick={confirmDelete}
+    aria-label="delete"
+>
+    <p>{text}</p>
+    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+        <path
+            fill="white"
+            d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
+        />
+    </svg>
+</button>

daemon/web/src/lib/components/DownloadLink.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    let {
+        url,
+        text,
+        full_button = false,
+    }: {
+        url: string;
+        text: string;
+        full_button?: boolean;
+    } = $props();
+
+    function download() {
+        window.location.href = url;
+    }
+</script>
+
+<button
+    class="flex flex-row {full_button
+        ? 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md'
+        : 'text-blue-600 underline'}"
+    onclick={download}
+>
+    {text}
+    <svg class="fill-current w-4 h-4 m-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+        <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
+    </svg>
+</button>

daemon/web/src/lib/components/ManifestCard.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+    import { ManifestEntry } from '$lib/manifest.svelte';
+    import DownloadLink from '$lib/components/DownloadLink.svelte';
+    import DeleteButton from '$lib/components/DeleteButton.svelte';
+    import AnalysisStatus from './AnalysisStatus.svelte';
+    import AnalysisView from './AnalysisView.svelte';
+    import RecordingControls from './RecordingControls.svelte';
+    let {
+        entry,
+        current,
+        server_is_recording,
+    }: {
+        entry: ManifestEntry;
+        current: boolean;
+        server_is_recording: boolean;
+    } = $props();
+
+    // passing `undefined` as the locale uses the browser default
+    const date_formatter = new Intl.DateTimeFormat(undefined, {
+        timeStyle: 'long',
+        dateStyle: 'short',
+    });
+    let status_row_color = $derived.by(() => {
+        const num_warnings = entry.get_num_warnings();
+        if (num_warnings !== undefined && num_warnings > 0) {
+            return 'bg-red-100';
+        }
+        return current ? 'bg-green-100' : 'bg-gray-100';
+    });
+    let status_border_color = $derived.by(() => {
+        const num_warnings = entry.get_num_warnings();
+        if (num_warnings !== undefined && num_warnings > 0) {
+            return 'border-red-100';
+        }
+        return current ? 'border-green-100' : 'border-gray-100';
+    });
+    let analysis_visible = $state(false);
+    function toggle_analysis_visibility() {
+        analysis_visible = !analysis_visible;
+    }
+</script>
+
+<div
+    class="{status_row_color} {status_border_color} drop-shadow p-4 flex flex-col gap-2 border rounded-md flex-1"
+>
+    {#if current}
+        <div class="flex flex-row justify-between gap-2">
+            <span class="text-xl mb-2">Current Recording</span>
+            <span class=""
+                ><AnalysisStatus
+                    onclick={toggle_analysis_visibility}
+                    {entry}
+                    {analysis_visible}
+                /></span
+            >
+        </div>
+    {/if}
+    <div class="flex flex-col">
+        <div class="flex flex-row justify-between">
+            <span class="font-bold">ID: {entry.name}</span>
+            {#if !current}
+                <span class=""
+                    ><AnalysisStatus
+                        onclick={toggle_analysis_visibility}
+                        {entry}
+                        {analysis_visible}
+                    /></span
+                >
+            {/if}
+        </div>
+        <span class="">{entry.get_readable_qmdl_size()}</span>
+    </div>
+    <div class="flex flex-col">
+        <span class="">Start: {date_formatter.format(entry.start_time)}</span>
+        <span class=""
+            >Last Message: {(entry.last_message_time &&
+                date_formatter.format(entry.last_message_time)) ||
+                'N/A'}</span
+        >
+    </div>
+    <div class="flex flex-row justify-between lg:justify-end gap-2 mt-2">
+        <DownloadLink url={entry.get_pcap_url()} text="pcap" full_button />
+        <DownloadLink url={entry.get_qmdl_url()} text="qmdl" full_button />
+        <DownloadLink url={entry.get_zip_url()} text="zip" full_button />
+        {#if current}
+            <RecordingControls {server_is_recording} />
+        {:else}
+            <DeleteButton
+                prompt={`Are you sure you want to delete entry ${entry.name}?`}
+                url={entry.get_delete_url()}
+            />
+        {/if}
+    </div>
+    <div class="border-b {analysis_visible ? '' : 'hidden'}">
+        <AnalysisView {entry} />
+    </div>
+</div>

daemon/web/src/lib/components/ManifestTable.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { ManifestEntry } from '$lib/manifest.svelte';
+    import TableRow from './ManifestTableRow.svelte';
+    import Card from './ManifestCard.svelte';
+    interface Props {
+        entries: ManifestEntry[];
+        server_is_recording: boolean;
+    }
+    let { entries, server_is_recording }: Props = $props();
+</script>
+
+<!--For larger screens we use a table-->
+<table class="hidden table-auto text-left lg:table">
+    <thead>
+        <tr class="bg-gray-100 drop-shadow">
+            <th class="p-2" scope="col">ID</th>
+            <th class="p-2" scope="col">Started</th>
+            <th class="p-2" scope="col">Last Message</th>
+            <th class="p-2" scope="col">Size</th>
+            <th class="p-2" scope="col">PCAP</th>
+            <th class="p-2" scope="col">QMDL</th>
+            <th class="p-2" scope="col">ZIP</th>
+            <th class="p-2" scope="col">Analysis</th>
+            <th class="p-2" scope="col"></th>
+        </tr>
+    </thead>
+    <tbody>
+        {#each entries as entry, i}
+            <TableRow {entry} current={false} {i} />
+        {/each}
+    </tbody>
+</table>
+<!--For smaller screens we use cards-->
+<div class="lg:hidden flex flex-col gap-4">
+    {#each entries as entry}
+        <Card {entry} current={false} {server_is_recording} />
+    {/each}
+</div>

daemon/web/src/lib/components/ManifestTableRow.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { ManifestEntry } from '$lib/manifest.svelte';
+    import DownloadLink from '$lib/components/DownloadLink.svelte';
+    import DeleteButton from '$lib/components/DeleteButton.svelte';
+    import AnalysisStatus from './AnalysisStatus.svelte';
+    import AnalysisView from './AnalysisView.svelte';
+    let {
+        entry,
+        current,
+        i,
+    }: {
+        entry: ManifestEntry;
+        current: boolean;
+        i: number;
+    } = $props();
+
+    // passing `undefined` as the locale uses the browser default
+    const date_formatter = new Intl.DateTimeFormat(undefined, {
+        timeStyle: 'long',
+        dateStyle: 'short',
+    });
+    let alternating_row_color = $derived(i % 2 == 0 ? 'bg-white' : 'bg-gray-100');
+    let status_row_color = $derived.by(() => {
+        const num_warnings = entry.get_num_warnings();
+        if (num_warnings !== undefined && num_warnings > 0) {
+            return 'bg-red-100';
+        }
+        return current ? 'bg-green-100' : alternating_row_color;
+    });
+    let analysis_visible = $state(false);
+    function toggle_analysis_visibility() {
+        analysis_visible = !analysis_visible;
+    }
+</script>
+
+<tr class="{status_row_color} drop-shadow">
+    <td class="p-2">{entry.name}</td>
+    <td class="p-2">{date_formatter.format(entry.start_time)}</td>
+    <td class="p-2"
+        >{(entry.last_message_time && date_formatter.format(entry.last_message_time)) || 'N/A'}</td
+    >
+    <td class="p-2">{entry.get_readable_qmdl_size()}</td>
+    <td class="p-2"><DownloadLink url={entry.get_pcap_url()} text="pcap" /></td>
+    <td class="p-2"><DownloadLink url={entry.get_qmdl_url()} text="qmdl" /></td>
+    <td class="p-2"><DownloadLink url={entry.get_zip_url()} text="zip" /></td>
+    <td class="p-2"
+        ><AnalysisStatus onclick={toggle_analysis_visibility} {entry} {analysis_visible} /></td
+    >
+    {#if current}
+        <td class="p-2"></td>
+    {:else}
+        <td class="p-2">
+            <DeleteButton
+                prompt={`Are you sure you want to delete entry ${entry.name}?`}
+                url={entry.get_delete_url()}
+            />
+        </td>
+    {/if}
+</tr>
+<tr class="{alternating_row_color} border-b {analysis_visible ? '' : 'hidden'}">
+    <td class="border-t border-dashed p-2" colspan="9">
+        <AnalysisView {entry} />
+    </td>
+</tr>

daemon/web/src/lib/components/RecordingControls.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+    import { req } from '$lib/utils.svelte';
+    let {
+        server_is_recording,
+    }: {
+        server_is_recording: boolean;
+    } = $props();
+
+    let client_set_recording = $state(server_is_recording);
+    let waiting_for_server = $derived(client_set_recording !== server_is_recording);
+
+    async function start_recording() {
+        await req('POST', '/api/start-recording');
+        client_set_recording = true;
+    }
+
+    async function stop_recording() {
+        await req('POST', '/api/stop-recording');
+        client_set_recording = false;
+    }
+
+    const recording_button_classes =
+        'text-white font-bold py-2 px-4 rounded-md flex flex-row gap-1';
+    const stop_recording_classes = `${recording_button_classes} bg-red-500 opacity-50 cursor-not-allowed`;
+    const start_recording_classes = `${recording_button_classes} bg-blue-500 opacity-50 cursor-not-allowed`;
+</script>
+
+<div>
+    {#if waiting_for_server}
+        <button
+            class={server_is_recording ? stop_recording_classes : start_recording_classes}
+            disabled
+        >
+            <span>{server_is_recording ? 'Stopping...' : 'Starting...'}</span>
+            <svg
+                class="w-4 h-4 text-white animate-spin"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+            >
+                <circle
+                    class="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="4"
+                ></circle>
+                <path
+                    class="opacity-75"
+                    fill="currentColor"
+                    d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
+            </svg>
+        </button>
+    {:else if server_is_recording}
+        <button
+            class="{recording_button_classes} bg-red-500 hover:bg-red-700"
+            onclick={stop_recording}
+        >
+            <span>Stop</span>
+            <svg
+                class="w-6 h-6 text-white"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+            >
+                <path d="M7 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7Z" />
+            </svg>
+        </button>
+    {:else}
+        <button
+            class="{recording_button_classes} bg-blue-500 hover:bg-blue-700"
+            onclick={start_recording}
+        >
+            <span>Start</span>
+            <svg
+                class="w-6 h-6 text-white"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+            >
+                <path
+                    fill-rule="evenodd"
+                    d="M8.6 5.2A1 1 0 0 0 7 6v12a1 1 0 0 0 1.6.8l8-6a1 1 0 0 0 0-1.6l-8-6Z"
+                    clip-rule="evenodd"
+                />
+            </svg>
+        </button>
+    {/if}
+</div>
+
+<style>
+</style>

daemon/web/src/lib/components/SystemStatsTable.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { type SystemStats } from '$lib/systemStats';
+    let {
+        stats,
+    }: {
+        stats: SystemStats;
+    } = $props();
+
+    const table_cell_classes = 'border p-1 lg:p-2';
+</script>
+
+<div
+    class="flex-1 drop-shadow p-4 flex flex-col gap-2 border rounded-md bg-gray-100 border-gray-100"
+>
+    <p class="text-xl mb-2">System Information</p>
+    <table class="table-auto border">
+        <tbody>
+            <tr class="border">
+                <th class={table_cell_classes}> Rayhunter Version </th>
+                <td class={table_cell_classes}>{stats.runtime_metadata.rayhunter_version}</td>
+            </tr>
+            <tr class="border">
+                <th class={table_cell_classes}> Storage </th>
+                <td class={table_cell_classes}>
+                    {stats.disk_stats.used_percent} used ({stats.disk_stats.used_size} used / {stats
+                        .disk_stats.available_size} available)
+                </td>
+            </tr>
+            <tr class="border-b">
+                <th class={table_cell_classes}> Memory (RAM) </th>
+                <td class={table_cell_classes}>
+                    Free: {stats.memory_stats.free}, Used: {stats.memory_stats.used}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>