Merge branch 'main' into notifications

daemon/web/src/lib/analysis.svelte.spec.ts

@@ -0,0 +1,140 @@
+import { describe, it, expect } from 'vitest';
+import { AnalysisRowType, EventType, parse_finished_report, Severity } from './analysis.svelte';
+import { type NewlineDeliminatedJson } from './ndjson';
+
+const SAMPLE_V1_REPORT_NDJSON: NewlineDeliminatedJson = [
+    {
+        analyzers: [
+            {
+                name: 'Analyzer 1',
+                description: 'A first analyzer',
+            },
+            {
+                name: 'Analyzer 2',
+                description: 'A second analyzer',
+            },
+        ],
+    },
+    {
+        timestamp: '2024-10-08T13:25:43.011689003-07:00',
+        skipped_message_reasons: ['The reason why the message was skipped'],
+        analysis: [],
+    },
+    {
+        timestamp: '2024-10-08T13:25:43.480872496-07:00',
+        skipped_message_reasons: [],
+        analysis: [
+            {
+                timestamp: '2024-08-19T03:33:54.318Z',
+                events: [
+                    null,
+                    {
+                        event_type: { type: 'QualitativeWarning', severity: 'Low' },
+                        message: 'Something nasty happened',
+                    },
+                ],
+            },
+        ],
+    },
+];
+
+const SAMPLE_V2_REPORT_NDJSON: NewlineDeliminatedJson = [
+    {
+        analyzers: [
+            {
+                name: 'Analyzer 1',
+                description: 'A first analyzer',
+                version: 2,
+            },
+            {
+                name: 'Analyzer 2',
+                description: 'A second analyzer',
+                version: 2,
+            },
+        ],
+        report_version: 2,
+    },
+    {
+        skipped_message_reason: 'The reason why the message was skipped',
+    },
+    {
+        packet_timestamp: '2024-08-19T03:33:54.318Z',
+        events: [
+            null,
+            {
+                event_type: { type: 'QualitativeWarning', severity: 'Low' },
+                message: 'Something nasty happened',
+            },
+        ],
+    },
+];
+
+describe('analysis report parsing', () => {
+    it('parses v1 example analysis', () => {
+        const report = parse_finished_report(SAMPLE_V1_REPORT_NDJSON);
+        expect(report.metadata.report_version).toEqual(1);
+        expect(report.metadata.analyzers).toEqual([
+            {
+                name: 'Analyzer 1',
+                description: 'A first analyzer',
+                version: 0,
+            },
+            {
+                name: 'Analyzer 2',
+                description: 'A second analyzer',
+                version: 0,
+            },
+        ]);
+        expect(report.rows).toHaveLength(2);
+        expect(report.rows[0].type).toBe(AnalysisRowType.Skipped);
+        if (report.rows[1].type === AnalysisRowType.Analysis) {
+            const row = report.rows[1];
+            expect(row.events).toHaveLength(2);
+            expect(row.events[0]).toBeNull();
+            const event = row.events[1];
+            const expected_timestamp = new Date('2024-08-19T03:33:54.318Z');
+            expect(row.packet_timestamp.getTime()).toEqual(expected_timestamp.getTime());
+            if (event !== null && event.type === EventType.Warning) {
+                expect(event.severity).toEqual(Severity.Low);
+            } else {
+                throw 'wrong event type';
+            }
+        } else {
+            throw 'wrong row type';
+        }
+    });
+
+    it('parses v2 example analysis', () => {
+        const report = parse_finished_report(SAMPLE_V2_REPORT_NDJSON);
+        expect(report.metadata.report_version).toEqual(2);
+        expect(report.metadata.analyzers).toEqual([
+            {
+                name: 'Analyzer 1',
+                description: 'A first analyzer',
+                version: 2,
+            },
+            {
+                name: 'Analyzer 2',
+                description: 'A second analyzer',
+                version: 2,
+            },
+        ]);
+        expect(report.rows).toHaveLength(2);
+        expect(report.rows[0].type).toBe(AnalysisRowType.Skipped);
+        if (report.rows[1].type === AnalysisRowType.Analysis) {
+            const row = report.rows[1];
+            expect(row.events).toHaveLength(2);
+            expect(row.events[0]).toBeNull();
+            const event = row.events[1];
+            const expected_timestamp = new Date('2024-08-19T03:33:54.318Z');
+            expect(row.packet_timestamp.getTime()).toEqual(expected_timestamp.getTime());
+            if (event !== null && event.type === EventType.Warning) {
+                expect(event.severity).toEqual(Severity.Low);
+            } else {
+                throw 'wrong event type';
+            }
+        } else {
+            throw 'wrong row type';
+        }
+    });
+});

daemon/web/src/lib/analysis.svelte.ts

@@ -0,0 +1,208 @@
+import { parse_ndjson, type NewlineDeliminatedJson } from './ndjson';
+import { req } from './utils.svelte';
+
+export type AnalysisReport = {
+    metadata: ReportMetadata;
+    rows: AnalysisRow[];
+    statistics: ReportStatistics;
+};
+
+export type ReportStatistics = {
+    num_warnings: number;
+    num_informational_logs: number;
+    num_skipped_packets: number;
+};
+
+export class ReportMetadata {
+    public analyzers: AnalyzerMetadata[];
+    public rayhunter: RayhunterMetadata;
+    public report_version: number;
+
+    constructor(ndjson: any) {
+        this.analyzers = ndjson.analyzers;
+        this.rayhunter = ndjson.rayhunter;
+        if (ndjson.report_version === undefined) {
+            this.report_version = 1;
+            // we consider our legacy (unversioned) heuristics to be v0 --
+            // this'll let us clearly differentiate some known false-positive
+            // results from the pre-versioned era from v1 heuristics
+            this.analyzers.forEach((analyzer) => {
+                analyzer.version = 0;
+            });
+        } else {
+            this.report_version = ndjson.report_version;
+        }
+    }
+}
+
+export type RayhunterMetadata = {
+    rayhunter_version: string;
+    system_os: string;
+    arch: string;
+};
+
+export type AnalyzerMetadata = {
+    name: string;
+    description: string;
+    version: number;
+};
+
+export type AnalysisRow = SkippedPacket | PacketAnalysis;
+export enum AnalysisRowType {
+    Skipped,
+    Analysis,
+}
+
+export type SkippedPacket = {
+    type: AnalysisRowType.Skipped;
+    reason: string;
+};
+
+export type PacketAnalysis = {
+    type: AnalysisRowType.Analysis;
+    packet_timestamp: Date;
+    events: Event[];
+};
+
+export type Event = QualitativeWarning | InformationalEvent | null;
+export enum EventType {
+    Informational,
+    Warning,
+}
+
+export type QualitativeWarning = {
+    type: EventType.Warning;
+    severity: Severity;
+    message: string;
+};
+
+export enum Severity {
+    Low,
+    Medium,
+    High,
+}
+
+export type InformationalEvent = {
+    type: EventType.Informational;
+    message: string;
+};
+
+function get_event(event_json: any): Event {
+    if (event_json.event_type.type === 'Informational') {
+        return {
+            type: EventType.Informational,
+            message: event_json.message,
+        };
+    } else {
+        return {
+            type: EventType.Warning,
+            severity:
+                event_json.event_type.severity === 'High'
+                    ? Severity.High
+                    : event_json.event_type.severity === 'Medium'
+                      ? Severity.Medium
+                      : Severity.Low,
+            message: event_json.message,
+        };
+    }
+}
+
+function get_v1_rows(row_jsons: any[]): AnalysisRow[] {
+    const rows: AnalysisRow[] = [];
+    for (const row_json of row_jsons) {
+        for (const reason of row_json.skipped_message_reasons) {
+            rows.push({
+                type: AnalysisRowType.Skipped,
+                reason,
+            });
+        }
+        for (const analysis_json of row_json.analysis) {
+            const events: Event[] = analysis_json.events.map((event_json: any): Event | null => {
+                if (event_json === null) {
+                    return null;
+                } else {
+                    return get_event(event_json);
+                }
+            });
+            rows.push({
+                type: AnalysisRowType.Analysis,
+                packet_timestamp: new Date(analysis_json.timestamp),
+                events,
+            });
+        }
+    }
+    return rows;
+}
+
+function get_v2_rows(row_jsons: any[]): AnalysisRow[] {
+    const rows: AnalysisRow[] = [];
+    for (const row_json of row_jsons) {
+        if (row_json.skipped_message_reason) {
+            rows.push({
+                type: AnalysisRowType.Skipped,
+                reason: row_json.skipped_message_reason,
+            });
+        } else {
+            const events: Event[] = row_json.events.map((event_json: any): Event | null => {
+                if (event_json === null) {
+                    return null;
+                } else {
+                    return get_event(event_json);
+                }
+            });
+            rows.push({
+                type: AnalysisRowType.Analysis,
+                packet_timestamp: new Date(row_json.packet_timestamp),
+                events,
+            });
+        }
+    }
+    return rows;
+}
+
+function get_report_stats(rows: AnalysisRow[]): ReportStatistics {
+    let num_warnings = 0;
+    let num_informational_logs = 0;
+    let num_skipped_packets = 0;
+    for (const row of rows) {
+        if (row.type === AnalysisRowType.Skipped) {
+            num_skipped_packets++;
+        } else {
+            for (const event of row.events) {
+                if (event !== null) {
+                    if (event.type === EventType.Informational) {
+                        num_informational_logs++;
+                    } else {
+                        num_warnings++;
+                    }
+                }
+            }
+        }
+    }
+    return {
+        num_warnings,
+        num_informational_logs,
+        num_skipped_packets,
+    };
+}
+
+export function parse_finished_report(report_json: NewlineDeliminatedJson): AnalysisReport {
+    const metadata = new ReportMetadata(report_json[0]);
+    let rows;
+    if (metadata.report_version === 1) {
+        rows = get_v1_rows(report_json.slice(1));
+    } else {
+        rows = get_v2_rows(report_json.slice(1));
+    }
+    const statistics = get_report_stats(rows);
+    return {
+        statistics,
+        metadata,
+        rows,
+    };
+}
+
+export async function get_report(name: string): Promise<AnalysisReport> {
+    const report_json = parse_ndjson(await req('GET', `/api/analysis-report/${name}`));
+    return parse_finished_report(report_json);
+}

daemon/web/src/lib/analysisManager.svelte.ts

@@ -0,0 +1,62 @@
+import { get_report, type AnalysisReport } from './analysis.svelte';
+import { req } from './utils.svelte';
+
+export enum AnalysisStatus {
+    // rayhunter is currently analyzing this entry (note that this is distinct
+    // from the currently-recording entry)
+    Running,
+    // this entry is queued to be analyzed
+    Queued,
+    // analysis is finished, and the new report can be accessed
+    Finished,
+}
+
+type AnalysisStatusJson = {
+    running: string | null;
+    queued: string[];
+    finished: string[];
+};
+
+export type AnalysisResult = {
+    name: string;
+    status: AnalysisStatus;
+};
+
+export class AnalysisManager {
+    public status: Map<string, AnalysisStatus> = $state(new Map());
+    public reports: Map<string, AnalysisReport | string> = $state(new Map());
+    public set_queued_status(name: string) {
+        this.status.set(name, AnalysisStatus.Queued);
+        this.reports.delete(name);
+    }
+
+    public async update() {
+        const status: AnalysisStatusJson = JSON.parse(await req('GET', '/api/analysis'));
+        if (status.running) {
+            this.status.set(status.running, AnalysisStatus.Running);
+        }
+
+        for (const entry of status.queued) {
+            this.status.set(entry, AnalysisStatus.Queued);
+        }
+
+        for (const entry of status.finished) {
+            // if entry was already finished, nothing to do
+            if (this.status.get(entry) === AnalysisStatus.Finished) {
+                continue;
+            }
+
+            this.status.set(entry, AnalysisStatus.Finished);
+
+            // fetch the analysis report
+            this.reports.delete(entry);
+            get_report(entry)
+                .then((report) => {
+                    this.reports.set(entry, report);
+                })
+                .catch((err) => {
+                    this.reports.set(entry, `Failed to get analysis: ${err}`);
+                });
+        }
+    }
+}

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>

daemon/web/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

daemon/web/src/lib/manifest.svelte.ts

@@ -0,0 +1,109 @@
+import { get_report, type AnalysisReport } from './analysis.svelte';
+import { AnalysisStatus, type AnalysisManager } from './analysisManager.svelte';
+
+interface JsonManifest {
+    entries: JsonManifestEntry[];
+    current_entry: JsonManifestEntry | null;
+}
+
+interface JsonManifestEntry {
+    name: string;
+    start_time: string;
+    last_message_time: string;
+    qmdl_size_bytes: number;
+}
+
+export class Manifest {
+    public entries: ManifestEntry[] = [];
+    public current_entry: ManifestEntry | undefined;
+
+    constructor(json: JsonManifest) {
+        for (const entry of json.entries) {
+            this.entries.push(new ManifestEntry(entry));
+        }
+        if (json.current_entry !== null) {
+            this.current_entry = new ManifestEntry(json['current_entry']);
+        }
+
+        // sort entries in reverse chronological order
+        this.entries.reverse();
+    }
+
+    async set_analysis_status(manager: AnalysisManager) {
+        for (const entry of this.entries) {
+            entry.analysis_status = manager.status.get(entry.name);
+            entry.analysis_report = manager.reports.get(entry.name);
+        }
+
+        if (this.current_entry) {
+            try {
+                this.current_entry.analysis_report = await get_report(this.current_entry.name);
+            } catch (err) {
+                this.current_entry.analysis_report = `Err: failed to get analysis report: ${err}`;
+            }
+
+            // the current entry should always be considered "finished", as its
+            // analysis report is always available
+            this.current_entry.analysis_status = AnalysisStatus.Finished;
+        }
+    }
+}
+
+export class ManifestEntry {
+    public name = $state('');
+    public start_time: Date;
+    public last_message_time: Date | undefined = $state(undefined);
+    public qmdl_size_bytes = $state(0);
+    public analysis_size_bytes = $state(0);
+    public analysis_status: AnalysisStatus | undefined = $state(undefined);
+    public analysis_report: AnalysisReport | string | undefined = $state(undefined);
+
+    constructor(json: JsonManifestEntry) {
+        this.name = json.name;
+        this.qmdl_size_bytes = json.qmdl_size_bytes;
+        this.start_time = new Date(json.start_time);
+        if (json.last_message_time) {
+            this.last_message_time = new Date(json.last_message_time);
+        }
+    }
+
+    get_readable_qmdl_size(): string {
+        if (this.qmdl_size_bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const dm = 2;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+        const i = Math.floor(Math.log(this.qmdl_size_bytes) / Math.log(k));
+        return `${Number.parseFloat((this.qmdl_size_bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+    }
+
+    get_num_warnings(): number | undefined {
+        if (this.analysis_report === undefined || typeof this.analysis_report === 'string') {
+            return undefined;
+        }
+        return this.analysis_report.statistics.num_warnings;
+    }
+
+    get_pcap_url(): string {
+        return `/api/pcap/${this.name}.pcapng`;
+    }
+
+    get_qmdl_url(): string {
+        return `/api/qmdl/${this.name}.qmdl`;
+    }
+
+    get_zip_url(): string {
+        return `/api/zip/${this.name}.zip`;
+    }
+
+    get_analysis_report_url(): string {
+        return `/api/analysis-report/${this.name}`;
+    }
+
+    get_delete_url(): string {
+        return `/api/delete-recording/${this.name}`;
+    }
+
+    get_reanalyze_url(): string {
+        return `/api/analysis/${this.name}`;
+    }
+}

daemon/web/src/lib/ndjson.spec.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { parse_ndjson } from './ndjson';
+
+describe('parsing newline-deliminated json', () => {
+    it('parses normal JSON', () => {
+        const json = JSON.stringify({ foo: 100 });
+        const result = parse_ndjson(json);
+        expect(result).toHaveLength(1);
+        expect(result[0]).toEqual({ foo: 100 });
+    });
+
+    it('parses simple newline-deliminated json', () => {
+        const json_a = JSON.stringify({ a: 100 });
+        const json_b = JSON.stringify({ b: 200 });
+        const result = parse_ndjson(`${json_a}\n${json_b}`);
+        expect(result).toHaveLength(2);
+        expect(result[0]).toEqual({ a: 100 });
+        expect(result[1]).toEqual({ b: 200 });
+    });
+
+    it('parses newline-deliminated json with escaped newlines within', () => {
+        const json_a = JSON.stringify({ a: 'this one has\n newlines and\nstuff' });
+        const json_b = JSON.stringify({ b: 200 });
+        const result = parse_ndjson(`${json_a}\n${json_b}`);
+        expect(result).toHaveLength(2);
+        expect(result[0]).toEqual({ a: 'this one has\n newlines and\nstuff' });
+        expect(result[1]).toEqual({ b: 200 });
+    });
+
+    it('actually errors out on invalid ndjson', () => {
+        expect(() => parse_ndjson('invalid\njson')).toThrow();
+    });
+});

daemon/web/src/lib/ndjson.ts

@@ -0,0 +1,27 @@
+export type NewlineDeliminatedJson = any[];
+
+export function parse_ndjson(input: string): NewlineDeliminatedJson {
+    const lines = input.split('\n');
+    const result = [];
+    let current_line = '';
+    while (lines.length > 0) {
+        current_line += lines.shift();
+        if (current_line.length === 0) {
+            continue;
+        }
+        try {
+            const entry = JSON.parse(current_line);
+            result.push(entry);
+            current_line = '';
+        } catch (e) {
+            // if this chunk wasn't valid JSON, assume there was an escaped
+            // newline in the JSON line, so simply continue to the next one.
+            // however, if we've reached the end of the input, that means we
+            // were given invalid nd-json
+            if (lines.length === 0) {
+                throw new Error(`unable to parse invalid nd-json: ${e}, "${current_line}"`);
+            }
+        }
+    }
+    return result;
+}

daemon/web/src/lib/systemStats.ts

@@ -0,0 +1,26 @@
+export interface SystemStats {
+    disk_stats: DiskStats;
+    memory_stats: MemoryStats;
+    runtime_metadata: RuntimeMetadata;
+}
+
+export interface RuntimeMetadata {
+    rayhunter_version: string;
+    system_os: string;
+    arch: string;
+}
+
+export interface DiskStats {
+    partition: string;
+    total_size: string;
+    used_size: string;
+    available_size: string;
+    used_percent: string;
+    mounted_on: string;
+}
+
+export interface MemoryStats {
+    total: string;
+    used: string;
+    free: string;
+}

daemon/web/src/lib/utils.svelte.ts

@@ -0,0 +1,59 @@
+import { Manifest } from './manifest.svelte';
+import type { SystemStats } from './systemStats';
+
+export interface AnalyzerConfig {
+    imsi_requested: boolean;
+    connection_redirect_2g_downgrade: boolean;
+    lte_sib6_and_7_downgrade: boolean;
+    null_cipher: boolean;
+    nas_null_cipher: boolean;
+    incomplete_sib: boolean;
+}
+
+export interface Config {
+    ui_level: number;
+    colorblind_mode: boolean;
+    key_input_mode: number;
+    ntfy_topic: string;
+    analyzers: AnalyzerConfig;
+}
+
+export async function req(method: string, url: string): Promise<string> {
+    const response = await fetch(url, {
+        method: method,
+    });
+    const body = await response.text();
+    if (response.status >= 200 && response.status < 300) {
+        return body;
+    } else {
+        throw new Error(body);
+    }
+}
+
+export async function get_manifest(): Promise<Manifest> {
+    const manifest_json = JSON.parse(await req('GET', '/api/qmdl-manifest'));
+    return new Manifest(manifest_json);
+}
+
+export async function get_system_stats(): Promise<SystemStats> {
+    return JSON.parse(await req('GET', '/api/system-stats'));
+}
+
+export async function get_config(): Promise<Config> {
+    return JSON.parse(await req('GET', '/api/config'));
+}
+
+export async function set_config(config: Config): Promise<void> {
+    const response = await fetch('/api/config', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(config),
+    });
+
+    if (!response.ok) {
+        const error = await response.text();
+        throw new Error(error);
+    }
+}