Merge branch 'main' into notifications

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

@@ -0,0 +1,92 @@
+<script lang="ts">
+    import { AnalysisStatus } from '$lib/analysisManager.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 {
+                return `${entry.analysis_report.statistics.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.by(() => {
+        if (!ready) {
+            return 'text-gray-700';
+        } else if ((entry.get_num_warnings() || 0) < 1) {
+            return 'text-green-700 border-green-500 bg-green-200 text-blue-600 border rounded-full px-2';
+        } else {
+            return 'text-red-700 border-red-500 bg-red-200 text-blue-600 border rounded-full px-2';
+        }
+    });
+</script>
+
+<button class="flex flex-row gap-1 lg:gap-2" disabled={!ready} {onclick}>
+    <span class="flex flex-row items-center gap-1">
+        {#if entry.analysis_status === AnalysisStatus.Queued || entry.analysis_status === AnalysisStatus.Running || (entry.analysis_status === AnalysisStatus.Finished && entry.analysis_report === undefined)}
+            <svg
+                class="animate-spin h-4 w-4 text-blue-600"
+                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>
+        {/if}
+        <span class={button_class}>{summary}</span>
+    </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,107 @@
+<script lang="ts">
+    import { AnalysisRowType, EventType, type AnalysisReport } from '$lib/analysis.svelte';
+    let {
+        report,
+    }: {
+        report: AnalysisReport;
+    } = $props();
+
+    const date_formatter = new Intl.DateTimeFormat(undefined, {
+        timeStyle: 'long',
+        dateStyle: 'short',
+    });
+
+    const analyzers = report.metadata.analyzers;
+
+    const skipped_messages: Map<string, number> = $derived.by(() => {
+        let map = new Map();
+        for (const row of report.rows) {
+            if (row.type === AnalysisRowType.Skipped) {
+                let count = map.get(row.reason);
+                if (count === undefined) {
+                    count = 0;
+                }
+                map.set(row.reason, 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}
+        <div class="overflow-x-scroll">
+            <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">Heuristic</th>
+                        <th class="p-2">Warning</th>
+                        <th class="p-2">Severity</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {#each report.rows as row}
+                        {#if row.type === AnalysisRowType.Analysis}
+                            {@const parsed_date = new Date(row.packet_timestamp)}
+                            {#each row.events.filter((e) => e !== null) as event, i}
+                                {@const analyzer = analyzers[i]}
+                                <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">{analyzer.name} v{analyzer.version}</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">{analyzer.name} v{analyzer.version}</td>
+                                        <td class="p-2">{event.message}</td>
+                                        <td class="p-2">Info</td>
+                                    {/if}
+                                </tr>
+                            {/each}
+                        {/if}
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+    {/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>
+        <div class="overflow-x-scroll">
+            <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>
+    </div>
+{/if}

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { type ReportMetadata } from '$lib/analysis.svelte';
+    import type { ManifestEntry } from '$lib/manifest.svelte';
+    import { AnalysisManager } from '$lib/analysisManager.svelte';
+    import AnalysisTable from './AnalysisTable.svelte';
+    import ReAnalyzeButton from './ReAnalyzeButton.svelte';
+    let {
+        entry,
+        manager,
+        current,
+    }: {
+        entry: ManifestEntry;
+        manager: AnalysisManager;
+        current: boolean;
+    } = $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 !current}
+                <div class="flex flex-row justify-end items-center">
+                    <ReAnalyzeButton {entry} {manager} />
+                </div>
+            {/if}
+            {#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/ApiRequestButton.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+    import { req } from '$lib/utils.svelte';
+
+    let {
+        url,
+        method = 'POST',
+        label,
+        loadingLabel,
+        disabled = false,
+        variant = 'blue',
+        icon,
+        onclick,
+        ariaLabel,
+    }: {
+        url: string;
+        method?: string;
+        label: string;
+        loadingLabel?: string;
+        disabled?: boolean;
+        variant?: 'blue' | 'red' | 'green';
+        icon?: any; // Svelte snippet
+        onclick?: () => void | Promise<void>;
+        ariaLabel?: string;
+    } = $props();
+
+    let is_requesting = $state(false);
+    let is_disabled = $derived(disabled || is_requesting);
+
+    const variantClasses = {
+        blue: {
+            enabled: 'bg-blue-500 hover:bg-blue-700',
+            disabled: 'bg-blue-500 opacity-50 cursor-not-allowed',
+        },
+        red: {
+            enabled: 'bg-red-500 hover:bg-red-700',
+            disabled: 'bg-red-500 opacity-50 cursor-not-allowed',
+        },
+        green: {
+            enabled: 'bg-green-500 hover:bg-green-700',
+            disabled: 'bg-green-500 opacity-50 cursor-not-allowed',
+        },
+    };
+
+    async function handleClick() {
+        if (is_disabled) return;
+
+        is_requesting = true;
+        try {
+            await req(method, url);
+            if (onclick) {
+                await onclick();
+            }
+        } catch (err) {
+            console.error(`Failed to ${method} ${url}:`, err);
+            alert(`Request failed. Please try again.`);
+        } finally {
+            is_requesting = false;
+        }
+    }
+
+    let buttonClasses = $derived(
+        is_disabled ? variantClasses[variant].disabled : variantClasses[variant].enabled
+    );
+</script>
+
+<button
+    class="text-white font-bold py-2 px-2 sm:px-4 rounded-md flex flex-row items-center gap-1 {buttonClasses}"
+    onclick={handleClick}
+    disabled={is_disabled}
+    aria-label={ariaLabel || label}
+>
+    <span>{is_requesting && loadingLabel ? loadingLabel : label}</span>
+    {#if is_requesting}
+        <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>
+    {:else if icon}
+        {@render icon()}
+    {/if}
+</button>

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

@@ -0,0 +1,269 @@
+<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>
+                    <label for="ntfy_topic" class="block text-sm font-medium text-gray-700 mb-1">
+                        ntfy Topic
+					</label>
+					<input
+                        id="ntfy_topic"
+                        bind:value={config.ntfy_topic}
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue"
+                    >
+                </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 class="flex items-center">
+                            <input
+                                id="nas_null_cipher"
+                                type="checkbox"
+                                bind:checked={config.analyzers.nas_null_cipher}
+                                class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded"
+                            />
+                            <label for="nas_null_cipher" class="ml-2 block text-sm text-gray-700">
+                                NAS Null Cipher Heuristic
+                            </label>
+                        </div>
+
+                        <div class="flex items-center">
+                            <input
+                                id="incomplete_sib"
+                                type="checkbox"
+                                bind:checked={config.analyzers.incomplete_sib}
+                                class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded"
+                            />
+                            <label for="incomplete_sib" class="ml-2 block text-sm text-gray-700">
+                                Incomplete SIB 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-2 sm: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-2 sm: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,100 @@
+<script lang="ts">
+    import { ManifestEntry } from '$lib/manifest.svelte';
+    import { AnalysisManager } from '$lib/analysisManager.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,
+        manager,
+    }: {
+        entry: ManifestEntry;
+        current: boolean;
+        server_is_recording: boolean;
+        manager: AnalysisManager;
+    } = $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 overflow-x-scroll overflow-y-hidden"
+>
+    {#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-1 mt-2 overflow-x-scroll">
+        <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} {manager} {current} />
+    </div>
+</div>

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { ManifestEntry } from '$lib/manifest.svelte';
+    import { AnalysisManager } from '$lib/analysisManager.svelte';
+    import TableRow from './ManifestTableRow.svelte';
+    import Card from './ManifestCard.svelte';
+    interface Props {
+        entries: ManifestEntry[];
+        server_is_recording: boolean;
+        manager: AnalysisManager;
+    }
+    let { entries, server_is_recording, manager }: 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} {manager} />
+        {/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} {manager} />
+    {/each}
+</div>

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

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import { ManifestEntry } from '$lib/manifest.svelte';
+    import { AnalysisManager } from '$lib/analysisManager.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,
+        manager,
+    }: {
+        entry: ManifestEntry;
+        current: boolean;
+        i: number;
+        manager: AnalysisManager;
+    } = $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} {manager} {current} />
+    </td>
+</tr>

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import ApiRequestButton from './ApiRequestButton.svelte';
+    import { AnalysisStatus, AnalysisManager } from '$lib/analysisManager.svelte';
+    import type { ManifestEntry } from '$lib/manifest.svelte';
+
+    let {
+        entry,
+        manager,
+    }: {
+        entry: ManifestEntry;
+        manager: AnalysisManager;
+    } = $props();
+
+    let url = $derived(entry.get_reanalyze_url());
+    let entry_name = $derived(entry.name);
+    let analysis_status = $derived(entry.analysis_status);
+
+    let is_processing = $derived(
+        analysis_status === AnalysisStatus.Queued || analysis_status === AnalysisStatus.Running
+    );
+
+    async function handleReAnalyze() {
+        // Update the entry directly for immediate UI feedback
+        entry.analysis_status = AnalysisStatus.Queued;
+        entry.analysis_report = undefined;
+        manager.set_queued_status(entry_name);
+    }
+</script>
+
+<ApiRequestButton
+    {url}
+    label="Re-analyze"
+    loadingLabel="Analyzing..."
+    disabled={is_processing}
+    variant="blue"
+    onclick={handleReAnalyze}
+    ariaLabel="re-analyze"
+>
+    {#snippet icon()}
+        <svg style="width:20px;height:20px" viewBox="0 0 24 24">
+            <path
+                fill="white"
+                d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z"
+            />
+        </svg>
+    {/snippet}
+</ApiRequestButton>

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import ApiRequestButton from './ApiRequestButton.svelte';
+
+    let {
+        server_is_recording,
+    }: {
+        server_is_recording: boolean;
+    } = $props();
+</script>
+
+<div>
+    {#if server_is_recording}
+        <ApiRequestButton url="/api/stop-recording" label="Stop" variant="red">
+            {#snippet icon()}
+                <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>
+            {/snippet}
+        </ApiRequestButton>
+    {:else}
+        <ApiRequestButton url="/api/start-recording" label="Start" variant="blue">
+            {#snippet icon()}
+                <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>
+            {/snippet}
+        </ApiRequestButton>
+    {/if}
+</div>

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>