Split bin dir into separate daemon and check dirs

This lets us manage their increasingly disparate dependencies separately
2026-04-26 23:49:59 -07:00 · 2025-06-27 10:19:19 -07:00
parent 5bb3dc9db5
commit da18a1f9da
69 changed files with 21 additions and 20 deletions
--- a/daemon/web/src/app.css
+++ b/daemon/web/src/app.css
@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
--- a/daemon/web/src/app.d.ts
+++ b/daemon/web/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app
+// for information about these interfaces
+declare global {
+    namespace App {
+        // interface Error {}
+        // interface Locals {}
+        // interface PageData {}
+        // interface PageState {}
+        // interface Platform {}
+    }
+}
+
+export {};
--- a/daemon/web/src/app.html
+++ b/daemon/web/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        %sveltekit.head%
+    </head>
+    <body data-sveltekit-preload-data="hover">
+        <div style="display: contents" class="m-4 xl:m-8">%sveltekit.body%</div>
+    </body>
+</html>
--- a/daemon/web/src/lib/analysis.spec.svelte.ts
+++ b/daemon/web/src/lib/analysis.spec.svelte.ts
@@ -0,0 +1,91 @@
+import { describe, it, expect } from 'vitest';
+import { EventType, parse_finished_report, Severity } from './analysis.svelte';
+import { type NewlineDeliminatedJson } from './ndjson';
+
+const SAMPLE_REPORT_NDJSON: NewlineDeliminatedJson = [
+    {
+        analyzers: [
+            {
+                name: 'LTE SIB 6/7 Downgrade',
+                description:
+                    'Tests for LTE cells broadcasting a SIB type 6 and 7 which include 2G/3G frequencies with higher priorities.',
+            },
+            {
+                name: 'IMSI Provided',
+                description: "Tests whether the UE's IMSI was ever provided to the cell",
+            },
+            {
+                name: 'Null Cipher',
+                description: 'Tests whether the cell suggests using a null cipher (EEA0)',
+            },
+            {
+                name: 'Example Analyzer',
+                description:
+                    'Always returns true, if you are seeing this you are either a developer or you are about to have problems.',
+            },
+        ],
+    },
+    {
+        timestamp: '2024-10-08T13:25:43.011689003-07:00',
+        skipped_message_reasons: [
+            'DecodingError(UperDecodeError(Error { cause: BufferTooShort, msg: "PerCodec:DecodeError:Requested Bits to decode 3, Remaining bits 1", context: [] }))',
+        ],
+        analysis: [],
+    },
+    {
+        timestamp: '2024-10-08T13:25:43.480872496-07:00',
+        skipped_message_reasons: [],
+        analysis: [
+            {
+                timestamp: '2024-08-19T03:33:54.318Z',
+                events: [
+                    null,
+                    null,
+                    null,
+                    {
+                        event_type: { type: 'QualitativeWarning', severity: 'Low' },
+                        message: 'TMSI was provided to cell',
+                    },
+                ],
+            },
+        ],
+    },
+];
+
+describe('analysis report parsing', () => {
+    it('parses the example analysis', () => {
+        const report = parse_finished_report(SAMPLE_REPORT_NDJSON);
+        expect(report.metadata.analyzers).toEqual([
+            {
+                name: 'LTE SIB 6/7 Downgrade',
+                description:
+                    'Tests for LTE cells broadcasting a SIB type 6 and 7 which include 2G/3G frequencies with higher priorities.',
+            },
+            {
+                name: 'IMSI Provided',
+                description: "Tests whether the UE's IMSI was ever provided to the cell",
+            },
+            {
+                name: 'Null Cipher',
+                description: 'Tests whether the cell suggests using a null cipher (EEA0)',
+            },
+            {
+                name: 'Example Analyzer',
+                description:
+                    'Always returns true, if you are seeing this you are either a developer or you are about to have problems.',
+            },
+        ]);
+        expect(report.rows).toHaveLength(2);
+        expect(report.rows[0].skipped_message_reasons).toHaveLength(1);
+        expect(report.rows[0].analysis).toHaveLength(0);
+        expect(report.rows[1].skipped_message_reasons).toHaveLength(0);
+        expect(report.rows[1].analysis).toHaveLength(1);
+        expect(report.rows[1].analysis[0].events).toHaveLength(1);
+        const event = report.rows[1].analysis[0].events[0];
+        if (event.type === EventType.Warning) {
+            expect(event.severity).toEqual(Severity.Low);
+        } else {
+            throw 'wrong event type';
+        }
+    });
+});
--- a/daemon/web/src/lib/analysis.svelte.ts
+++ b/daemon/web/src/lib/analysis.svelte.ts
@@ -0,0 +1,123 @@
+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 type ReportMetadata = {
+    analyzers: AnalyzerMetadata[];
+    rayhunter: RayhunterMetadata;
+};
+
+export type RayhunterMetadata = {
+    rayhunter_version: string;
+    system_os: string;
+    arch: string;
+};
+
+export type AnalyzerMetadata = {
+    name: string;
+    description: string;
+};
+
+export type AnalysisRow = {
+    timestamp: Date;
+    skipped_message_reasons: string[];
+    analysis: PacketAnalysis[];
+};
+
+export type PacketAnalysis = {
+    timestamp: Date;
+    events: Event[];
+};
+export type Event = QualitativeWarning | InformationalEvent;
+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;
+};
+
+export function parse_finished_report(report_json: NewlineDeliminatedJson): AnalysisReport {
+    const metadata: ReportMetadata = report_json[0]; // this can be cast directly
+    let num_warnings = 0;
+    let num_informational_logs = 0;
+    let num_skipped_packets = 0;
+    const rows: AnalysisRow[] = report_json.slice(1).map((row_json: any) => {
+        const analysis: PacketAnalysis[] = row_json.analysis.map((analysis_json: any) => {
+            const events: Event[] = analysis_json.events
+                .map((event_json: any): Event | null => {
+                    if (event_json === null) {
+                        return null;
+                    } else if (event_json.event_type.type === 'Informational') {
+                        num_informational_logs += 1;
+                        return {
+                            type: EventType.Informational,
+                            message: event_json.message,
+                        };
+                    } else {
+                        num_warnings += 1;
+                        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,
+                        };
+                    }
+                })
+                .filter((maybe_event: Event | null) => maybe_event !== null);
+            return {
+                timestamp: analysis_json.timestamp,
+                events,
+            };
+        });
+        num_skipped_packets += row_json.skipped_message_reasons.length;
+        return {
+            timestamp: new Date(row_json.timestamp),
+            skipped_message_reasons: row_json.skipped_message_reasons,
+            analysis,
+        };
+    });
+    return {
+        statistics: {
+            num_informational_logs,
+            num_warnings,
+            num_skipped_packets,
+        },
+        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);
+}
--- a/daemon/web/src/lib/analysisManager.svelte.ts
+++ b/daemon/web/src/lib/analysisManager.svelte.ts
@@ -0,0 +1,64 @@
+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> = new Map();
+    public reports: Map<string, AnalysisReport | string> = new Map();
+
+    public async run_analysis(name: string) {
+        await req('POST', `/api/analysis/${name}`);
+        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}`);
+                });
+        }
+    }
+}
--- a/daemon/web/src/lib/components/AnalysisStatus.svelte
+++ b/daemon/web/src/lib/components/AnalysisStatus.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { AnalysisStatus } from '$lib/analysisManager.svelte';
+    import { EventType } from '$lib/analysis.svelte';
+    import type { ManifestEntry } from '$lib/manifest.svelte';
+    let {
+        entry,
+        onclick,
+        analysis_visible,
+    }: {
+        entry: ManifestEntry;
+        onclick: () => void;
+        analysis_visible: boolean;
+    } = $props();
+
+    let summary = $derived.by(() => {
+        if (entry.analysis_status === AnalysisStatus.Queued) {
+            return 'Queued...';
+        } else if (entry.analysis_status === AnalysisStatus.Running) {
+            return 'Running...';
+        } else if (entry.analysis_status === AnalysisStatus.Finished) {
+            if (entry.analysis_report === undefined) {
+                return 'Loading...';
+            } else if (typeof entry.analysis_report === 'string') {
+                return entry.analysis_report;
+            } else {
+                let num_warnings = 0;
+                for (let row of entry.analysis_report.rows) {
+                    for (let analysis of row.analysis) {
+                        for (let event of analysis.events) {
+                            if (event.type === EventType.Warning) {
+                                num_warnings += 1;
+                            }
+                        }
+                    }
+                }
+                return `${num_warnings} warnings`;
+            }
+        } else {
+            return 'Loading...';
+        }
+    });
+
+    let ready = $derived.by(() => {
+        let finished = entry.analysis_status === AnalysisStatus.Finished;
+        let report_available = entry.analysis_report !== undefined;
+        return finished && report_available;
+    });
+
+    let button_class = $derived(ready ? 'text-blue-600 border rounded-full px-2' : '');
+</script>
+
+<button class="flex flex-row gap-1 lg:gap-2" disabled={!ready} {onclick}>
+    <span
+        class="{button_class} {(entry.get_num_warnings() || 0) < 1
+            ? 'text-green-700 border-green-500 bg-green-200'
+            : 'text-red-700 border-red-500 bg-red-200'}">{summary}</span
+    >
+    <svg
+        class="w-6 h-6 text-gray-800 transition-transform {analysis_visible ? 'rotate-180' : ''}"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+    >
+        <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m19 9-7 7-7-7"
+        />
+    </svg>
+</button>
--- a/daemon/web/src/lib/components/AnalysisTable.svelte
+++ b/daemon/web/src/lib/components/AnalysisTable.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { EventType, type AnalysisReport } from '$lib/analysis.svelte';
+    let {
+        report,
+    }: {
+        report: AnalysisReport;
+    } = $props();
+
+    const date_formatter = new Intl.DateTimeFormat(undefined, {
+        timeStyle: 'long',
+        dateStyle: 'short',
+    });
+
+    const skipped_messages: Map<string, number> = $derived.by(() => {
+        let map = new Map();
+        for (const row of report.rows) {
+            for (const message of row.skipped_message_reasons) {
+                let count = map.get(message);
+                if (count === undefined) {
+                    count = 0;
+                }
+                map.set(message, count + 1);
+            }
+        }
+        return map;
+    });
+</script>
+
+<div>
+    <p class="text-lg underline">Warnings and Informational Logs</p>
+    {#if report.statistics.num_warnings === 0 && report.statistics.num_informational_logs === 0}
+        <p>Nothing to show!</p>
+    {:else}
+        <table class="table-auto text-left">
+            <thead class="p-2">
+                <tr class="bg-gray-300">
+                    <th class="p-2">Timestamp</th>
+                    <th class="p-2">Warning</th>
+                    <th class="p-2">Severity</th>
+                </tr>
+            </thead>
+            <tbody>
+                {#each report.rows as row}
+                    {#each row.analysis as analysis}
+                        {@const parsed_date = new Date(analysis.timestamp)}
+                        {#each analysis.events.filter((e) => e !== null) as event}
+                            <tr class="even:bg-gray-200 odd:bg-white">
+                                {#if event.type === EventType.Warning}
+                                    {@const severity = ['Low', 'Medium', 'High'][event.severity]}
+                                    {@const severity_class = [
+                                        'bg-red-200',
+                                        'bg-red-400',
+                                        'bg-red-600',
+                                    ][event.severity]}
+                                    <td class="p-2">{date_formatter.format(parsed_date)}</td>
+                                    <td class="p-2">{event.message}</td>
+                                    <td class="p-2 {severity_class} text-center">{severity}</td>
+                                {:else if event.type === EventType.Informational}
+                                    <td class="p-2">{date_formatter.format(parsed_date)}</td>
+                                    <td class="p-2">{event.message}</td>
+                                    <td class="p-2">Info</td>
+                                {/if}
+                            </tr>
+                        {/each}
+                    {/each}
+                {/each}
+            </tbody>
+        </table>
+    {/if}
+</div>
+{#if report.statistics.num_skipped_packets > 0}
+    <div>
+        <p class="text-lg underline">Unparsed Messages</p>
+        <p>
+            These are due to a limitation or bug in Rayhunter's parser, and aren't ususally a
+            problem.
+        </p>
+        <table class="table-auto text-left">
+            <thead class="p-2">
+                <tr class="bg-gray-300">
+                    <th scope="col" class="p-2">Total Msgs Affected</th>
+                    <th scope="col">Reason/Error</th>
+                </tr>
+            </thead>
+            <tbody>
+                {#each skipped_messages.entries() as [message, count]}
+                    <tr class="even:bg-gray-200 odd:bg-white">
+                        <td class="text-center">{count}</td>
+                        <td>{message}</td>
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    </div>
+{/if}
--- a/daemon/web/src/lib/components/AnalysisView.svelte
+++ b/daemon/web/src/lib/components/AnalysisView.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { type ReportMetadata } from '$lib/analysis.svelte';
+    import type { ManifestEntry } from '$lib/manifest.svelte';
+    import AnalysisTable from './AnalysisTable.svelte';
+    let {
+        entry,
+    }: {
+        entry: ManifestEntry;
+    } = $props();
+</script>
+
+<div class="container mt-2">
+    {#if entry.analysis_report === undefined}
+        <p>Report unavailable, try refreshing.</p>
+    {:else if typeof entry.analysis_report === 'string'}
+        <p>Error getting analysis report: {entry.analysis_report}</p>
+    {:else}
+        {@const metadata: ReportMetadata = entry.analysis_report.metadata}
+        <div class="flex flex-col gap-2">
+            {#if entry.analysis_report.rows.length > 0}
+                <AnalysisTable report={entry.analysis_report} />
+            {:else}
+                <p>No warnings to display!</p>
+            {/if}
+            {#if metadata !== undefined && metadata.rayhunter !== undefined}
+                <div>
+                    <p class="text-lg underline">Metadata</p>
+                    <p>Analysis by Rayhunter version {metadata.rayhunter.rayhunter_version}</p>
+                    <p><b>Device system OS:</b> {metadata.rayhunter.system_os}</p>
+                </div>
+                <div>
+                    <p class="text-lg underline">Analyzers</p>
+                    {#each metadata.analyzers as analyzer}
+                        <p><b>{analyzer.name}:</b> {analyzer.description}</p>
+                    {/each}
+                </div>
+            {:else}
+                <p>N/A (analysis generated by an older version of rayhunter)</p>
+            {/if}
+        </div>
+    {/if}
+</div>
--- a/daemon/web/src/lib/components/ConfigForm.svelte
+++ b/daemon/web/src/lib/components/ConfigForm.svelte
@@ -0,0 +1,234 @@
+<script lang="ts">
+    import { get_config, set_config, type Config } from '../utils.svelte';
+
+    let config = $state<Config | null>(null);
+
+    let loading = $state(false);
+    let saving = $state(false);
+    let message = $state('');
+    let messageType = $state<'success' | 'error' | null>(null);
+    let showConfig = $state(false);
+
+    async function loadConfig() {
+        try {
+            loading = true;
+            config = await get_config();
+            message = '';
+            messageType = null;
+        } catch (error) {
+            message = `Failed to load config: ${error}`;
+            messageType = 'error';
+        } finally {
+            loading = false;
+        }
+    }
+
+    async function saveConfig() {
+        if (!config) return;
+
+        try {
+            saving = true;
+            await set_config(config);
+            message =
+                'Config saved successfully! Rayhunter is restarting now. Reload the page in a few seconds.';
+            messageType = 'success';
+        } catch (error) {
+            message = `Failed to save config: ${error}`;
+            messageType = 'error';
+        } finally {
+            saving = false;
+        }
+    }
+
+    // Load config when first shown
+    $effect(() => {
+        if (showConfig && !config) {
+            loadConfig();
+        }
+    });
+</script>
+
+<div class="bg-white rounded-lg shadow-md p-6 m-4">
+    <button
+        class="w-full flex justify-between items-center text-xl font-bold mb-4 text-rayhunter-dark-blue hover:text-rayhunter-blue"
+        onclick={() => (showConfig = !showConfig)}
+    >
+        <span>Configuration</span>
+        <svg
+            class="w-6 h-6 transition-transform {showConfig ? 'rotate-180' : ''}"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+        >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"
+            ></path>
+        </svg>
+    </button>
+
+    {#if showConfig}
+        {#if loading}
+            <div class="text-center py-4">Loading config...</div>
+        {:else if config}
+            <form
+                class="space-y-4"
+                onsubmit={(e) => {
+                    e.preventDefault();
+                    saveConfig();
+                }}
+            >
+                <div>
+                    <label for="ui_level" class="block text-sm font-medium text-gray-700 mb-1">
+                        Device UI Level
+                    </label>
+                    <select
+                        id="ui_level"
+                        bind:value={config.ui_level}
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue"
+                    >
+                        <option value={0}>0 - Invisible mode</option>
+                        <option value={1}>1 - Subtle mode (colored line)</option>
+                        <option value={2}>2 - Demo mode (orca gif)</option>
+                        <option value={3}>3 - EFF logo</option>
+                    </select>
+                </div>
+
+                <div>
+                    <label
+                        for="key_input_mode"
+                        class="block text-sm font-medium text-gray-700 mb-1"
+                    >
+                        Device Input Mode
+                    </label>
+                    <select
+                        id="key_input_mode"
+                        bind:value={config.key_input_mode}
+                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-rayhunter-blue"
+                    >
+                        <option value={0}>0 - Disable button control</option>
+                        <option value={1}
+                            >1 - Double-tap power button to start/stop recording</option
+                        >
+                    </select>
+                </div>
+
+                <div class="space-y-3">
+                    <div class="flex items-center">
+                        <input
+                            id="colorblind_mode"
+                            type="checkbox"
+                            bind:checked={config.colorblind_mode}
+                            class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded"
+                        />
+                        <label for="colorblind_mode" class="ml-2 block text-sm text-gray-700">
+                            Colorblind Mode
+                        </label>
+                    </div>
+                </div>
+
+                <div class="border-t pt-4 mt-6">
+                    <h3 class="text-lg font-semibold text-gray-800 mb-4">
+                        Analyzer Heuristic Settings
+                    </h3>
+                    <div class="space-y-3">
+                        <div class="flex items-center">
+                            <input
+                                id="imsi_requested"
+                                type="checkbox"
+                                bind:checked={config.analyzers.imsi_requested}
+                                class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded"
+                            />
+                            <label for="imsi_requested" class="ml-2 block text-sm text-gray-700">
+                                IMSI Requested Heuristic
+                            </label>
+                        </div>
+
+                        <div class="flex items-center">
+                            <input
+                                id="connection_redirect_2g_downgrade"
+                                type="checkbox"
+                                bind:checked={config.analyzers.connection_redirect_2g_downgrade}
+                                class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded"
+                            />
+                            <label
+                                for="connection_redirect_2g_downgrade"
+                                class="ml-2 block text-sm text-gray-700"
+                            >
+                                Connection Redirect 2G Downgrade Heuristic
+                            </label>
+                        </div>
+
+                        <div class="flex items-center">
+                            <input
+                                id="lte_sib6_and_7_downgrade"
+                                type="checkbox"
+                                bind:checked={config.analyzers.lte_sib6_and_7_downgrade}
+                                class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded"
+                            />
+                            <label
+                                for="lte_sib6_and_7_downgrade"
+                                class="ml-2 block text-sm text-gray-700"
+                            >
+                                LTE SIB6 and SIB7 Downgrade Heuristic
+                            </label>
+                        </div>
+
+                        <div class="flex items-center">
+                            <input
+                                id="null_cipher"
+                                type="checkbox"
+                                bind:checked={config.analyzers.null_cipher}
+                                class="h-4 w-4 text-rayhunter-blue focus:ring-rayhunter-blue border-gray-300 rounded"
+                            />
+                            <label for="null_cipher" class="ml-2 block text-sm text-gray-700">
+                                Null Cipher Heuristic
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex gap-2 pt-4">
+                    <button
+                        type="submit"
+                        disabled={saving}
+                        class="bg-blue-500 hover:bg-blue-700 disabled:opacity-50 text-white font-bold py-2 px-4 rounded-md flex flex-row gap-1 items-center"
+                    >
+                        {#if saving}
+                            <div
+                                class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"
+                            ></div>
+                            Saving...
+                        {:else}
+                            <svg
+                                class="w-4 h-4"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M5 13l4 4L19 7"
+                                ></path>
+                            </svg>
+                            Apply and restart
+                        {/if}
+                    </button>
+                </div>
+            </form>
+            {#if message}
+                <div
+                    class="mt-4 p-3 rounded {messageType === 'error'
+                        ? 'bg-red-100 text-red-700'
+                        : 'bg-green-100 text-green-700'}"
+                >
+                    {message}
+                </div>
+            {/if}
+        {:else}
+            <div class="text-center py-4 text-red-600">
+                Failed to load configuration. Please try reloading the page.
+            </div>
+        {/if}
+    {/if}
+</div>
--- a/daemon/web/src/lib/components/DeleteAllButton.svelte
+++ b/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>
--- a/daemon/web/src/lib/components/DeleteButton.svelte
+++ b/daemon/web/src/lib/components/DeleteButton.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { req } from '$lib/utils.svelte';
+    let {
+        text,
+        url,
+        prompt,
+    }: {
+        text?: string;
+        url: string;
+        prompt: string;
+    } = $props();
+
+    function confirmDelete() {
+        if (window.confirm(prompt)) {
+            req('POST', url);
+        }
+    }
+</script>
+
+<button
+    class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md flex flex-row"
+    onclick={confirmDelete}
+    aria-label="delete"
+>
+    <p>{text}</p>
+    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+        <path
+            fill="white"
+            d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
+        />
+    </svg>
+</button>
--- a/daemon/web/src/lib/components/DownloadLink.svelte
+++ b/daemon/web/src/lib/components/DownloadLink.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    let {
+        url,
+        text,
+        full_button = false,
+    }: {
+        url: string;
+        text: string;
+        full_button?: boolean;
+    } = $props();
+
+    function download() {
+        window.location.href = url;
+    }
+</script>
+
+<button
+    class="flex flex-row {full_button
+        ? 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md'
+        : 'text-blue-600 underline'}"
+    onclick={download}
+>
+    {text}
+    <svg class="fill-current w-4 h-4 m-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+        <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
+    </svg>
+</button>
--- a/daemon/web/src/lib/components/ManifestCard.svelte
+++ b/daemon/web/src/lib/components/ManifestCard.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+    import { ManifestEntry } from '$lib/manifest.svelte';
+    import DownloadLink from '$lib/components/DownloadLink.svelte';
+    import DeleteButton from '$lib/components/DeleteButton.svelte';
+    import AnalysisStatus from './AnalysisStatus.svelte';
+    import AnalysisView from './AnalysisView.svelte';
+    import RecordingControls from './RecordingControls.svelte';
+    let {
+        entry,
+        current,
+        server_is_recording,
+    }: {
+        entry: ManifestEntry;
+        current: boolean;
+        server_is_recording: boolean;
+    } = $props();
+
+    // passing `undefined` as the locale uses the browser default
+    const date_formatter = new Intl.DateTimeFormat(undefined, {
+        timeStyle: 'long',
+        dateStyle: 'short',
+    });
+    let status_row_color = $derived.by(() => {
+        const num_warnings = entry.get_num_warnings();
+        if (num_warnings !== undefined && num_warnings > 0) {
+            return 'bg-red-100';
+        }
+        return current ? 'bg-green-100' : 'bg-gray-100';
+    });
+    let status_border_color = $derived.by(() => {
+        const num_warnings = entry.get_num_warnings();
+        if (num_warnings !== undefined && num_warnings > 0) {
+            return 'border-red-100';
+        }
+        return current ? 'border-green-100' : 'border-gray-100';
+    });
+    let analysis_visible = $state(false);
+    function toggle_analysis_visibility() {
+        analysis_visible = !analysis_visible;
+    }
+</script>
+
+<div
+    class="{status_row_color} {status_border_color} drop-shadow p-4 flex flex-col gap-2 border rounded-md flex-1"
+>
+    {#if current}
+        <div class="flex flex-row justify-between gap-2">
+            <span class="text-xl mb-2">Current Recording</span>
+            <span class=""
+                ><AnalysisStatus
+                    onclick={toggle_analysis_visibility}
+                    {entry}
+                    {analysis_visible}
+                /></span
+            >
+        </div>
+    {/if}
+    <div class="flex flex-col">
+        <div class="flex flex-row justify-between">
+            <span class="font-bold">ID: {entry.name}</span>
+            {#if !current}
+                <span class=""
+                    ><AnalysisStatus
+                        onclick={toggle_analysis_visibility}
+                        {entry}
+                        {analysis_visible}
+                    /></span
+                >
+            {/if}
+        </div>
+        <span class="">{entry.get_readable_qmdl_size()}</span>
+    </div>
+    <div class="flex flex-col">
+        <span class="">Start: {date_formatter.format(entry.start_time)}</span>
+        <span class=""
+            >Last Message: {(entry.last_message_time &&
+                date_formatter.format(entry.last_message_time)) ||
+                'N/A'}</span
+        >
+    </div>
+    <div class="flex flex-row justify-between lg:justify-end gap-2 mt-2">
+        <DownloadLink url={entry.get_pcap_url()} text="pcap" full_button />
+        <DownloadLink url={entry.get_qmdl_url()} text="qmdl" full_button />
+        <DownloadLink url={entry.get_zip_url()} text="zip" full_button />
+        {#if current}
+            <RecordingControls {server_is_recording} />
+        {:else}
+            <DeleteButton
+                prompt={`Are you sure you want to delete entry ${entry.name}?`}
+                url={entry.get_delete_url()}
+            />
+        {/if}
+    </div>
+    <div class="border-b {analysis_visible ? '' : 'hidden'}">
+        <AnalysisView {entry} />
+    </div>
+</div>
--- a/daemon/web/src/lib/components/ManifestTable.svelte
+++ b/daemon/web/src/lib/components/ManifestTable.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { ManifestEntry } from '$lib/manifest.svelte';
+    import TableRow from './ManifestTableRow.svelte';
+    import Card from './ManifestCard.svelte';
+    interface Props {
+        entries: ManifestEntry[];
+        server_is_recording: boolean;
+    }
+    let { entries, server_is_recording }: Props = $props();
+</script>
+
+<!--For larger screens we use a table-->
+<table class="hidden table-auto text-left lg:table">
+    <thead>
+        <tr class="bg-gray-100 drop-shadow">
+            <th class="p-2" scope="col">ID</th>
+            <th class="p-2" scope="col">Started</th>
+            <th class="p-2" scope="col">Last Message</th>
+            <th class="p-2" scope="col">Size</th>
+            <th class="p-2" scope="col">PCAP</th>
+            <th class="p-2" scope="col">QMDL</th>
+            <th class="p-2" scope="col">ZIP</th>
+            <th class="p-2" scope="col">Analysis</th>
+            <th class="p-2" scope="col"></th>
+        </tr>
+    </thead>
+    <tbody>
+        {#each entries as entry, i}
+            <TableRow {entry} current={false} {i} />
+        {/each}
+    </tbody>
+</table>
+<!--For smaller screens we use cards-->
+<div class="lg:hidden flex flex-col gap-4">
+    {#each entries as entry}
+        <Card {entry} current={false} {server_is_recording} />
+    {/each}
+</div>
--- a/daemon/web/src/lib/components/ManifestTableRow.svelte
+++ b/daemon/web/src/lib/components/ManifestTableRow.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { ManifestEntry } from '$lib/manifest.svelte';
+    import DownloadLink from '$lib/components/DownloadLink.svelte';
+    import DeleteButton from '$lib/components/DeleteButton.svelte';
+    import AnalysisStatus from './AnalysisStatus.svelte';
+    import AnalysisView from './AnalysisView.svelte';
+    let {
+        entry,
+        current,
+        i,
+    }: {
+        entry: ManifestEntry;
+        current: boolean;
+        i: number;
+    } = $props();
+
+    // passing `undefined` as the locale uses the browser default
+    const date_formatter = new Intl.DateTimeFormat(undefined, {
+        timeStyle: 'long',
+        dateStyle: 'short',
+    });
+    let alternating_row_color = $derived(i % 2 == 0 ? 'bg-white' : 'bg-gray-100');
+    let status_row_color = $derived.by(() => {
+        const num_warnings = entry.get_num_warnings();
+        if (num_warnings !== undefined && num_warnings > 0) {
+            return 'bg-red-100';
+        }
+        return current ? 'bg-green-100' : alternating_row_color;
+    });
+    let analysis_visible = $state(false);
+    function toggle_analysis_visibility() {
+        analysis_visible = !analysis_visible;
+    }
+</script>
+
+<tr class="{status_row_color} drop-shadow">
+    <td class="p-2">{entry.name}</td>
+    <td class="p-2">{date_formatter.format(entry.start_time)}</td>
+    <td class="p-2"
+        >{(entry.last_message_time && date_formatter.format(entry.last_message_time)) || 'N/A'}</td
+    >
+    <td class="p-2">{entry.get_readable_qmdl_size()}</td>
+    <td class="p-2"><DownloadLink url={entry.get_pcap_url()} text="pcap" /></td>
+    <td class="p-2"><DownloadLink url={entry.get_qmdl_url()} text="qmdl" /></td>
+    <td class="p-2"><DownloadLink url={entry.get_zip_url()} text="zip" /></td>
+    <td class="p-2"
+        ><AnalysisStatus onclick={toggle_analysis_visibility} {entry} {analysis_visible} /></td
+    >
+    {#if current}
+        <td class="p-2"></td>
+    {:else}
+        <td class="p-2">
+            <DeleteButton
+                prompt={`Are you sure you want to delete entry ${entry.name}?`}
+                url={entry.get_delete_url()}
+            />
+        </td>
+    {/if}
+</tr>
+<tr class="{alternating_row_color} border-b {analysis_visible ? '' : 'hidden'}">
+    <td class="border-t border-dashed p-2" colspan="9">
+        <AnalysisView {entry} />
+    </td>
+</tr>
--- a/daemon/web/src/lib/components/RecordingControls.svelte
+++ b/daemon/web/src/lib/components/RecordingControls.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+    import { req } from '$lib/utils.svelte';
+    let {
+        server_is_recording,
+    }: {
+        server_is_recording: boolean;
+    } = $props();
+
+    let client_set_recording = $state(server_is_recording);
+    let waiting_for_server = $derived(client_set_recording !== server_is_recording);
+
+    async function start_recording() {
+        await req('POST', '/api/start-recording');
+        client_set_recording = true;
+    }
+
+    async function stop_recording() {
+        await req('POST', '/api/stop-recording');
+        client_set_recording = false;
+    }
+
+    const recording_button_classes =
+        'text-white font-bold py-2 px-4 rounded-md flex flex-row gap-1';
+    const stop_recording_classes = `${recording_button_classes} bg-red-500 opacity-50 cursor-not-allowed`;
+    const start_recording_classes = `${recording_button_classes} bg-blue-500 opacity-50 cursor-not-allowed`;
+</script>
+
+<div>
+    {#if waiting_for_server}
+        <button
+            class={server_is_recording ? stop_recording_classes : start_recording_classes}
+            disabled
+        >
+            <span>{server_is_recording ? 'Stopping...' : 'Starting...'}</span>
+            <svg
+                class="w-4 h-4 text-white animate-spin"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+            >
+                <circle
+                    class="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="4"
+                ></circle>
+                <path
+                    class="opacity-75"
+                    fill="currentColor"
+                    d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
+            </svg>
+        </button>
+    {:else if server_is_recording}
+        <button
+            class="{recording_button_classes} bg-red-500 hover:bg-red-700"
+            onclick={stop_recording}
+        >
+            <span>Stop</span>
+            <svg
+                class="w-6 h-6 text-white"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+            >
+                <path d="M7 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7Z" />
+            </svg>
+        </button>
+    {:else}
+        <button
+            class="{recording_button_classes} bg-blue-500 hover:bg-blue-700"
+            onclick={start_recording}
+        >
+            <span>Start</span>
+            <svg
+                class="w-6 h-6 text-white"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+            >
+                <path
+                    fill-rule="evenodd"
+                    d="M8.6 5.2A1 1 0 0 0 7 6v12a1 1 0 0 0 1.6.8l8-6a1 1 0 0 0 0-1.6l-8-6Z"
+                    clip-rule="evenodd"
+                />
+            </svg>
+        </button>
+    {/if}
+</div>
+
+<style>
+</style>
--- a/daemon/web/src/lib/components/SystemStatsTable.svelte
+++ b/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>
--- a/daemon/web/src/lib/index.ts
+++ b/daemon/web/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
--- a/daemon/web/src/lib/manifest.svelte.ts
+++ b/daemon/web/src/lib/manifest.svelte.ts
@@ -0,0 +1,107 @@
+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;
+    analysis_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.analysis_size_bytes = json.analysis_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}`;
+    }
+}
--- a/daemon/web/src/lib/ndjson.spec.ts
+++ b/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();
+    });
+});
--- a/daemon/web/src/lib/ndjson.ts
+++ b/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;
+}
--- a/daemon/web/src/lib/systemStats.ts
+++ b/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;
+}
--- a/daemon/web/src/lib/utils.svelte.ts
+++ b/daemon/web/src/lib/utils.svelte.ts
@@ -0,0 +1,56 @@
+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;
+}
+
+export interface Config {
+    ui_level: number;
+    colorblind_mode: boolean;
+    key_input_mode: number;
+    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);
+    }
+}
--- a/daemon/web/src/routes/+layout.js
+++ b/daemon/web/src/routes/+layout.js
@@ -0,0 +1 @@
+export const prerender = true;
--- a/daemon/web/src/routes/+layout.svelte
+++ b/daemon/web/src/routes/+layout.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+    import '../app.css';
+    let { children } = $props();
+</script>
+
+{@render children()}
--- a/daemon/web/src/routes/+page.svelte
+++ b/daemon/web/src/routes/+page.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+    import { ManifestEntry } from '$lib/manifest.svelte';
+    import { get_manifest, get_system_stats } from '$lib/utils.svelte';
+    import ManifestTable from '$lib/components/ManifestTable.svelte';
+    import Card from '$lib/components/ManifestCard.svelte';
+    import type { SystemStats } from '$lib/systemStats';
+    import { AnalysisManager } from '$lib/analysisManager.svelte';
+    import SystemStatsTable from '$lib/components/SystemStatsTable.svelte';
+    import DeleteAllButton from '$lib/components/DeleteAllButton.svelte';
+    import RecordingControls from '$lib/components//RecordingControls.svelte';
+    import ConfigForm from '$lib/components/ConfigForm.svelte';
+
+    let manager: AnalysisManager = new AnalysisManager();
+    let loaded = $state(false);
+    let entries: ManifestEntry[] = $state([]);
+    let current_entry: ManifestEntry | undefined = $state(undefined);
+    let system_stats: SystemStats | undefined = $state(undefined);
+    $effect(() => {
+        const interval = setInterval(async () => {
+            await manager.update();
+            let new_manifest = await get_manifest();
+            await new_manifest.set_analysis_status(manager);
+            entries = new_manifest.entries;
+            current_entry = new_manifest.current_entry;
+
+            system_stats = await get_system_stats();
+            loaded = true;
+        }, 1000);
+
+        return () => clearInterval(interval);
+    });
+</script>
+
+<div class="p-4 xl:px-8 bg-rayhunter-blue drop-shadow flex flex-row justify-between items-center">
+    <!-- https://www.w3.org/WAI/tutorials/images/decorative/ -->
+    <img src="/rayhunter_text.png" alt="" class="h-10 xl:h-12" />
+    <div class="flex flex-row gap-4">
+        <a
+            class="flex flex-row gap-1 group"
+            href="https://github.com/EFForg/rayhunter/issues"
+            target="_blank"
+        >
+            <span class="hidden text-white group-hover:text-gray-400 lg:flex">Report Issue</span>
+            <svg
+                class="w-6 h-6 text-white group-hover:text-gray-400"
+                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="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z"
+                    clip-rule="evenodd"
+                />
+            </svg>
+        </a>
+        <a
+            class="flex flex-row gap-1 group"
+            href="https://efforg.github.io/rayhunter/"
+            target="_blank"
+        >
+            <span class="hidden text-white group-hover:text-gray-400 lg:flex">Docs</span>
+            <svg
+                class="w-6 h-6 text-white group-hover:text-gray-400"
+                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="M5 19V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v13H7a2 2 0 0 0-2 2Zm0 0a2 2 0 0 0 2 2h12M9 3v14m7 0v4"
+                />
+            </svg>
+        </a>
+    </div>
+</div>
+<div class="m-4 xl:mx-8 flex flex-col gap-4">
+    {#if loaded}
+        <div class="flex flex-col lg:flex-row gap-4">
+            {#if current_entry}
+                <Card entry={current_entry} current={true} server_is_recording={!!current_entry} />
+            {:else}
+                <div
+                    class="bg-red-100 border-red-100 drop-shadow p-4 flex flex-col gap-2 border rounded-md flex-1 justify-between"
+                >
+                    <span
+                        class="text-2xl font-bold mb-2 flex flex-row items-center gap-2 text-red-600"
+                    >
+                        <svg
+                            class="w-8 h-8 text-red-600"
+                            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="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0V8Zm-1 7a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H12Z"
+                                clip-rule="evenodd"
+                            />
+                        </svg>
+                        WARNING: Not Running
+                    </span>
+                    <span
+                        >Rayhunter is not currently running and will not detect abnormal behavior!</span
+                    >
+                    <div class="flex flex-row justify-end mt-2">
+                        <RecordingControls server_is_recording={!!current_entry} />
+                    </div>
+                </div>
+            {/if}
+            <SystemStatsTable stats={system_stats!} />
+        </div>
+        <div class="flex flex-col gap-2">
+            <span class="text-xl">History</span>
+            <ManifestTable {entries} server_is_recording={!!current_entry} />
+        </div>
+        <DeleteAllButton />
+        <ConfigForm />
+    {:else}
+        <div class="flex flex-col justify-center items-center">
+            <!-- https://www.w3.org/WAI/tutorials/images/decorative/ -->
+            <img src="/rayhunter_orca_only.png" alt="" class="h-48 animate-spin" />
+            <p class="text-xl">Loading...</p>
+        </div>
+    {/if}
+</div>
				`@@ -0,0 +1 @@`
				// place files you want to import through the `$lib` alias in this folder.