Add warning about default routes

I hope this puts a lot of questions about SIM cards to rest. I found
that the warning also sometimes applies to "dead" SIM cards which have
expired a long time ago.

Run `busybox ip route` to determine whether the device has an active SIM
card. That command has been manually tested on Moxee, Orbic and TP-Link.
It's prefixed with `busybox` because that makes it more likely it would
work on UZ801, though it wasn't tested there. If the command invocation
fails, the alert is suppressed and a warning is logged.

The command is only run once on pageload. It could've been part of the
status endpoint, but then the UI would poll it way too often.

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

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { action_errors } from '../action_errors.svelte';
+    import WarningIcon from './WarningIcon.svelte';
 
     let pos = $state(0);
     let current_error = $derived(action_errors[pos]);
@@ -25,21 +26,7 @@
     >
         <div class="flex flex-row justify-between">
             <span class="text-xl font-bold mb-2 mr-5 flex flex-row items-center gap-1 text-red-600">
-                <svg
-                    class="w-6 h-6 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>
+                <WarningIcon class="w-6 h-6 text-red-600" />
                 Error Completing Action {current_error.times > 1 ? `x${current_error.times}` : ''}
             </span>
             <div class="flex items-center mb-2">

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { get_route_status } from '$lib/utils.svelte';
+    import WarningIcon from './WarningIcon.svelte';
+
+    let show_alert = $state(false);
+    let check_completed = $state(false);
+
+    async function check_route() {
+        if (check_completed) return;
+
+        try {
+            const status = await get_route_status();
+            if (!status.has_default_route) {
+                show_alert = true;
+            }
+        } catch (err) {
+            console.error('Failed to check route status:', err);
+        }
+        check_completed = true;
+    }
+
+    function dismiss() {
+        show_alert = false;
+    }
+
+    $effect(() => {
+        check_route();
+    });
+</script>
+
+{#if show_alert}
+    <div
+        class="bg-yellow-100 border-yellow-400 drop-shadow p-4 flex flex-col gap-2 border rounded-md"
+    >
+        <span class="text-xl font-bold flex flex-row items-center gap-2 text-yellow-700">
+            <WarningIcon class="w-6 h-6 text-yellow-600" />
+            No Default Route Detected
+        </span>
+        <p>
+            This device didn't get an IP address from the network operator. Presumably the SIM card
+            is not inserted or very old. Try a different SIM card.
+        </p>
+        <div class="flex flex-row gap-2 justify-end">
+            <button
+                class="font-medium py-2 px-4 rounded-md border border-gray-400 hover:bg-yellow-200"
+                onclick={dismiss}
+            >
+                Dismiss
+            </button>
+        </div>
+    </div>
+{/if}

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+    let { class: className = 'w-6 h-6' }: { class?: string } = $props();
+</script>
+
+<svg
+    class={className}
+    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>

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

@@ -97,3 +97,11 @@ export async function test_notification(): Promise<void> {
         throw new Error(error);
     }
 }
+
+export interface RouteStatus {
+    has_default_route: boolean;
+}
+
+export async function get_route_status(): Promise<RouteStatus> {
+    return JSON.parse(await req('GET', '/api/route-status'));
+}

daemon/web/src/routes/+page.svelte

@@ -10,7 +10,9 @@
     import RecordingControls from '$lib/components/RecordingControls.svelte';
     import ConfigForm from '$lib/components/ConfigForm.svelte';
     import ActionErrors from '$lib/components/ActionErrors.svelte';
+    import IPRouteAlert from '$lib/components/IPRouteAlert.svelte';
     import LogView from '$lib/components/LogView.svelte';
+    import WarningIcon from '$lib/components/WarningIcon.svelte';
 
     let manager: AnalysisManager = new AnalysisManager();
     let loaded = $state(false);
@@ -156,21 +158,7 @@
             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>
+                <WarningIcon class="w-8 h-8 text-red-600" />
                 Connection Error
             </span>
             <span
@@ -186,6 +174,7 @@
         </div>
     {/if}
     <ActionErrors />
+    <IPRouteAlert />
     {#if loaded}
         <div class="flex flex-col lg:flex-row gap-4">
             {#if current_entry}
@@ -202,21 +191,7 @@
                     <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>
+                        <WarningIcon class="w-8 h-8 text-red-600" />
                         WARNING: Not Running
                     </span>
                     <span>