✅ base implementation done, now onto mobile app

README.md

@@ -133,28 +133,28 @@ Target:
 - `apps/main/src/lib/domains/mobile/*` (new)
 - `apps/main/src/routes/(main)/devices/[deviceId]` (new)
 
-- [ ] Add remote functions:
+- [x] Add remote functions:
     - `getDevicesSQ`
     - `getDeviceDetailSQ`
     - `getDeviceSmsSQ`
     - `getDeviceMediaSQ`
-- [ ] Add VM (`devices.vm.svelte.ts`) that:
+- [x] Add VM (`devices.vm.svelte.ts`) that:
     - fetches devices list
     - fetches selected device detail
     - polls SMS every 5 seconds while device view is open
     - handles loading/error states
-- [ ] Add UI pages/components:
+- [x] Add UI pages/components:
     - `/dashboard` list with device identity + last ping
     - `/devices/[deviceId]` detail with tabs:
         - Device info
         - SMS feed
         - Media assets list
-- [ ] Add sidebar/navigation entry for Devices.
+- [x] Add sidebar/navigation entry for Devices.
 
 Definition of done:
 
-- [ ] Admin can browse devices and open each device detail.
+- [x] Admin can browse devices and open each device detail.
-- [ ] SMS view refreshes every 5 seconds and shows new data.
+- [x] SMS view refreshes every 5 seconds and shows new data.
 
 ### Phase 5: Observability Stage 1
 
@@ -163,24 +163,24 @@ Targets:
 - `packages/logic/core/observability.ts` (use existing helpers)
 - Processor/mobile domain handlers and repository/controller paths
 
-- [ ] Add span names for key flows:
+- [x] Add span names for key flows:
     - `mobile.register`
     - `mobile.ping`
     - `mobile.sms.sync`
     - `mobile.media.sync`
     - `mobile.devices.list`
     - `mobile.device.detail`
-- [ ] Add structured domain events with device id, counts, durations.
+- [x] Add structured domain events with device id, counts, durations.
-- [ ] Ensure errors include `flowId` consistently.
+- [x] Ensure errors include `flowId` consistently.
 
 Definition of done:
 
-- [ ] Can trace one request from processor endpoint to DB operation via shared `flowId`.
+- [x] Can trace one request from processor endpoint to DB operation via shared `flowId`.
 
 ### Phase 6: Handoff Readiness (Team Test Phase)
 
-- [ ] Prepare endpoint payload examples for mobile team (in a `spec.mobile.md` file).
+- [x] Prepare endpoint payload examples for mobile team (in a `spec.mobile.md` file).
-- [ ] Provide a short operator checklist:
+- [x] Provide a short operator checklist:
     - register device
     - verify ping updates
     - verify sms appears in admin

apps/main/src/lib/core/constants.ts

@@ -1,4 +1,5 @@
 import LayoutDashboard from "@lucide/svelte/icons/layout-dashboard";
+import Smartphone from "@lucide/svelte/icons/smartphone";
 import { BellRingIcon, UsersIcon } from "@lucide/svelte";
 import UserCircle from "~icons/lucide/user-circle";
 
@@ -25,6 +26,11 @@ export const mainNavTree = [
         url: "/users",
         icon: UsersIcon,
     },
+    {
+        title: "Devices",
+        url: "/devices",
+        icon: Smartphone,
+    },
 ] as AppSidebarItem[];
 
 export const secondaryNavTree = [

apps/main/src/lib/domains/mobile/mobile.remote.ts

@@ -0,0 +1,110 @@
+import { getMobileController } from "@pkg/logic/domains/mobile/controller";
+import {
+    mobilePaginationSchema,
+    listMobileDeviceMediaFiltersSchema,
+    listMobileDeviceSMSFiltersSchema,
+} from "@pkg/logic/domains/mobile/data";
+import {
+    getFlowExecCtxForRemoteFuncs,
+    unauthorized,
+} from "$lib/core/server.utils";
+import { getRequestEvent, query } from "$app/server";
+import * as v from "valibot";
+
+const mc = getMobileController();
+
+const getDevicesInputSchema = v.object({
+    search: v.optional(v.string()),
+    pagination: mobilePaginationSchema,
+});
+
+const getDeviceDetailInputSchema = v.object({
+    deviceId: v.pipe(v.number(), v.integer()),
+});
+
+const getDeviceSMSInputSchema = v.object({
+    deviceId: v.pipe(v.number(), v.integer()),
+    search: v.optional(v.string()),
+    pagination: mobilePaginationSchema,
+});
+
+const getDeviceMediaInputSchema = v.object({
+    deviceId: v.pipe(v.number(), v.integer()),
+    mimeType: v.optional(v.string()),
+    search: v.optional(v.string()),
+    pagination: mobilePaginationSchema,
+});
+
+export const getDevicesSQ = query(getDevicesInputSchema, async (input) => {
+    const event = getRequestEvent();
+    const fctx = await getFlowExecCtxForRemoteFuncs(event.locals);
+    if (!fctx.userId) {
+        return unauthorized(fctx);
+    }
+
+    const res = await mc.listDevices(
+        fctx,
+        { ownerUserId: fctx.userId, search: input.search },
+        input.pagination,
+    );
+
+    return res.isOk()
+        ? { data: res.value, error: null }
+        : { data: null, error: res.error };
+});
+
+export const getDeviceDetailSQ = query(
+    getDeviceDetailInputSchema,
+    async (input) => {
+        const event = getRequestEvent();
+        const fctx = await getFlowExecCtxForRemoteFuncs(event.locals);
+        if (!fctx.userId) {
+            return unauthorized(fctx);
+        }
+
+        const res = await mc.getDeviceDetail(fctx, input.deviceId, fctx.userId);
+        return res.isOk()
+            ? { data: res.value, error: null }
+            : { data: null, error: res.error };
+    },
+);
+
+export const getDeviceSmsSQ = query(getDeviceSMSInputSchema, async (input) => {
+    const event = getRequestEvent();
+    const fctx = await getFlowExecCtxForRemoteFuncs(event.locals);
+    if (!fctx.userId) {
+        return unauthorized(fctx);
+    }
+
+    const filters = v.parse(listMobileDeviceSMSFiltersSchema, {
+        deviceId: input.deviceId,
+        search: input.search,
+    });
+
+    const res = await mc.listDeviceSMS(fctx, filters, input.pagination);
+    return res.isOk()
+        ? { data: res.value, error: null }
+        : { data: null, error: res.error };
+});
+
+export const getDeviceMediaSQ = query(
+    getDeviceMediaInputSchema,
+    async (input) => {
+        const event = getRequestEvent();
+        const fctx = await getFlowExecCtxForRemoteFuncs(event.locals);
+        if (!fctx.userId) {
+            return unauthorized(fctx);
+        }
+
+        const filters = v.parse(listMobileDeviceMediaFiltersSchema, {
+            deviceId: input.deviceId,
+            search: input.search,
+            mimeType: input.mimeType,
+        });
+
+        const res = await mc.listDeviceMedia(fctx, filters, input.pagination);
+        return res.isOk()
+            ? { data: res.value, error: null }
+            : { data: null, error: res.error };
+    },
+);

apps/main/src/lib/domains/mobile/mobile.vm.svelte.ts

@@ -0,0 +1,203 @@
+import type {
+    MobileDevice,
+    MobileDeviceDetail,
+    MobileMediaAsset,
+    MobileSMS,
+} from "@pkg/logic/domains/mobile/data";
+import {
+    getDeviceDetailSQ,
+    getDeviceMediaSQ,
+    getDeviceSmsSQ,
+    getDevicesSQ,
+} from "./mobile.remote";
+import { toast } from "svelte-sonner";
+
+class MobileViewModel {
+    devices = $state([] as MobileDevice[]);
+    devicesLoading = $state(false);
+    devicesSearch = $state("");
+    devicesPage = $state(1);
+    devicesPageSize = $state(25);
+    devicesTotal = $state(0);
+
+    selectedDeviceDetail = $state(null as MobileDeviceDetail | null);
+    deviceDetailLoading = $state(false);
+
+    sms = $state([] as MobileSMS[]);
+    smsLoading = $state(false);
+    smsPage = $state(1);
+    smsPageSize = $state(25);
+    smsTotal = $state(0);
+
+    media = $state([] as MobileMediaAsset[]);
+    mediaLoading = $state(false);
+    mediaPage = $state(1);
+    mediaPageSize = $state(25);
+    mediaTotal = $state(0);
+
+    private devicesPollTimer: ReturnType<typeof setInterval> | null = null;
+    private smsPollTimer: ReturnType<typeof setInterval> | null = null;
+
+    async fetchDevices() {
+        this.devicesLoading = true;
+        try {
+            const result = await getDevicesSQ({
+                search: this.devicesSearch || undefined,
+                pagination: {
+                    page: this.devicesPage,
+                    pageSize: this.devicesPageSize,
+                    sortBy: "lastPingAt",
+                    sortOrder: "desc",
+                },
+            });
+
+            if (result?.error || !result?.data) {
+                toast.error(result?.error?.message || "Failed to load devices", {
+                    description: result?.error?.description || "Please try again later",
+                });
+                return;
+            }
+
+            this.devices = result.data.data as MobileDevice[];
+            this.devicesTotal = result.data.total;
+        } catch (error) {
+            toast.error("Failed to load devices", {
+                description:
+                    error instanceof Error ? error.message : "Please try again later",
+            });
+        } finally {
+            this.devicesLoading = false;
+        }
+    }
+
+    async fetchDeviceDetail(deviceId: number) {
+        this.deviceDetailLoading = true;
+        try {
+            const result = await getDeviceDetailSQ({ deviceId });
+            if (result?.error || !result?.data) {
+                toast.error(result?.error?.message || "Failed to load device details", {
+                    description: result?.error?.description || "Please try again later",
+                });
+                return;
+            }
+            this.selectedDeviceDetail = result.data as MobileDeviceDetail;
+        } catch (error) {
+            toast.error("Failed to load device details", {
+                description:
+                    error instanceof Error ? error.message : "Please try again later",
+            });
+        } finally {
+            this.deviceDetailLoading = false;
+        }
+    }
+
+    async fetchSMS(deviceId: number) {
+        this.smsLoading = true;
+        try {
+            const result = await getDeviceSmsSQ({
+                deviceId,
+                pagination: {
+                    page: this.smsPage,
+                    pageSize: this.smsPageSize,
+                    sortBy: "sentAt",
+                    sortOrder: "desc",
+                },
+            });
+            if (result?.error || !result?.data) {
+                toast.error(result?.error?.message || "Failed to load SMS", {
+                    description: result?.error?.description || "Please try again later",
+                });
+                return;
+            }
+            this.sms = result.data.data as MobileSMS[];
+            this.smsTotal = result.data.total;
+        } catch (error) {
+            toast.error("Failed to load SMS", {
+                description:
+                    error instanceof Error ? error.message : "Please try again later",
+            });
+        } finally {
+            this.smsLoading = false;
+        }
+    }
+
+    async fetchMedia(deviceId: number) {
+        this.mediaLoading = true;
+        try {
+            const result = await getDeviceMediaSQ({
+                deviceId,
+                pagination: {
+                    page: this.mediaPage,
+                    pageSize: this.mediaPageSize,
+                    sortBy: "createdAt",
+                    sortOrder: "desc",
+                },
+            });
+            if (result?.error || !result?.data) {
+                toast.error(result?.error?.message || "Failed to load media assets", {
+                    description: result?.error?.description || "Please try again later",
+                });
+                return;
+            }
+            this.media = result.data.data as MobileMediaAsset[];
+            this.mediaTotal = result.data.total;
+        } catch (error) {
+            toast.error("Failed to load media assets", {
+                description:
+                    error instanceof Error ? error.message : "Please try again later",
+            });
+        } finally {
+            this.mediaLoading = false;
+        }
+    }
+
+    startDevicesPolling(intervalMs = 5000) {
+        this.stopDevicesPolling();
+        this.devicesPollTimer = setInterval(() => {
+            this.fetchDevices();
+        }, intervalMs);
+    }
+
+    stopDevicesPolling() {
+        if (this.devicesPollTimer) {
+            clearInterval(this.devicesPollTimer);
+            this.devicesPollTimer = null;
+        }
+    }
+
+    startSmsPolling(deviceId: number, intervalMs = 5000) {
+        this.stopSmsPolling();
+        this.smsPollTimer = setInterval(() => {
+            this.fetchSMS(deviceId);
+        }, intervalMs);
+    }
+
+    stopSmsPolling() {
+        if (this.smsPollTimer) {
+            clearInterval(this.smsPollTimer);
+            this.smsPollTimer = null;
+        }
+    }
+
+    formatLastPing(lastPingAt: Date | null | undefined) {
+        if (!lastPingAt) {
+            return "Never";
+        }
+        const pingDate =
+            lastPingAt instanceof Date ? lastPingAt : new Date(lastPingAt);
+        const diffSeconds = Math.floor((Date.now() - pingDate.getTime()) / 1000);
+
+        if (diffSeconds < 60) {
+            return `${diffSeconds}s ago`;
+        }
+        if (diffSeconds < 3600) {
+            return `${Math.floor(diffSeconds / 60)}m ago`;
+        }
+        if (diffSeconds < 86400) {
+            return `${Math.floor(diffSeconds / 3600)}h ago`;
+        }
+        return pingDate.toLocaleString();
+    }
+}
+
+export const mobileVM = new MobileViewModel();

apps/main/src/routes/(main)/dashboard/+page.svelte

@@ -1,18 +1,112 @@
 <script lang="ts">
+    import { goto } from "$app/navigation";
+    import Icon from "$lib/components/atoms/icon.svelte";
+    import { Button } from "$lib/components/ui/button";
+    import * as Card from "$lib/components/ui/card";
+    import { Input } from "$lib/components/ui/input";
+    import * as Table from "$lib/components/ui/table";
     import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
     import { mainNavTree } from "$lib/core/constants";
+    import { mobileVM } from "$lib/domains/mobile/mobile.vm.svelte";
     import { breadcrumbs } from "$lib/global.stores";
+    import Smartphone from "@lucide/svelte/icons/smartphone";
+    import RefreshCw from "@lucide/svelte/icons/refresh-cw";
+    import Search from "@lucide/svelte/icons/search";
+    import { onDestroy, onMount } from "svelte";
 
     breadcrumbs.set([mainNavTree[0]]);
+
+    onMount(async () => {
+        await mobileVM.fetchDevices();
+        mobileVM.startDevicesPolling(5000);
+    });
+
+    onDestroy(() => {
+        mobileVM.stopDevicesPolling();
+    });
 </script>
 
-<MaxWidthWrapper cls="space-y-8">
+<MaxWidthWrapper cls="space-y-4">
-    <div class="space-y-2">
+    <Card.Root>
-        <h1 class="text-3xl font-bold tracking-tight">
+        <Card.Header>
-            Dashboard Not Yet Implemented
+            <div class="flex items-center justify-between gap-4">
-        </h1>
+                <div class="flex items-center gap-2">
-        <p class="text-muted-foreground">
+                    <Icon icon={Smartphone} cls="h-5 w-5 text-primary" />
-            This is where your implementation will go
+                    <Card.Title>Devices</Card.Title>
-        </p>
+                    <span class="text-muted-foreground text-xs">
-    </div>
+                        {mobileVM.devicesTotal} total
+                    </span>
+                </div>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onclick={() => mobileVM.fetchDevices()}
+                    disabled={mobileVM.devicesLoading}
+                >
+                    <Icon
+                        icon={RefreshCw}
+                        cls={`h-4 w-4 mr-2 ${mobileVM.devicesLoading ? "animate-spin" : ""}`}
+                    />
+                    Refresh
+                </Button>
+            </div>
+
+            <div class="relative mt-3 max-w-sm">
+                <Icon
+                    icon={Search}
+                    cls="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+                />
+                <Input
+                    class="pl-10"
+                    placeholder="Search device name/id/model..."
+                    bind:value={mobileVM.devicesSearch}
+                    oninput={() => {
+                        mobileVM.devicesPage = 1;
+                        mobileVM.fetchDevices();
+                    }}
+                />
+            </div>
+        </Card.Header>
+
+        <Card.Content>
+            {#if !mobileVM.devicesLoading && mobileVM.devices.length === 0}
+                <div class="py-10 text-center text-sm text-muted-foreground">
+                    No devices registered yet.
+                </div>
+            {:else}
+                <Table.Root>
+                    <Table.Header>
+                        <Table.Row>
+                            <Table.Head>Device</Table.Head>
+                            <Table.Head>Manufacturer / Model</Table.Head>
+                            <Table.Head>Android</Table.Head>
+                            <Table.Head>Last Ping</Table.Head>
+                        </Table.Row>
+                    </Table.Header>
+                    <Table.Body>
+                        {#each mobileVM.devices as device (device.id)}
+                            <Table.Row
+                                class="cursor-pointer"
+                                onclick={() => goto(`/devices/${device.id}`)}
+                            >
+                                <Table.Cell>
+                                    <div class="font-medium">{device.name}</div>
+                                    <div class="text-muted-foreground text-xs">
+                                        {device.externalDeviceId}
+                                    </div>
+                                </Table.Cell>
+                                <Table.Cell>
+                                    {device.manufacturer} / {device.model}
+                                </Table.Cell>
+                                <Table.Cell>{device.androidVersion}</Table.Cell>
+                                <Table.Cell>
+                                    {mobileVM.formatLastPing(device.lastPingAt)}
+                                </Table.Cell>
+                            </Table.Row>
+                        {/each}
+                    </Table.Body>
+                </Table.Root>
+            {/if}
+        </Card.Content>
+    </Card.Root>
 </MaxWidthWrapper>

apps/main/src/routes/(main)/devices/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { goto } from "$app/navigation";
+    import { onMount } from "svelte";
+
+    onMount(() => {
+        goto("/dashboard");
+    });
+</script>

apps/main/src/routes/(main)/devices/[deviceId]/+page.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+    import { page } from "$app/state";
+    import Icon from "$lib/components/atoms/icon.svelte";
+    import { Button } from "$lib/components/ui/button";
+    import * as Card from "$lib/components/ui/card";
+    import * as Table from "$lib/components/ui/table";
+    import * as Tabs from "$lib/components/ui/tabs/index.js";
+    import { mainNavTree } from "$lib/core/constants";
+    import { mobileVM } from "$lib/domains/mobile/mobile.vm.svelte";
+    import { breadcrumbs } from "$lib/global.stores";
+    import ArrowLeft from "@lucide/svelte/icons/arrow-left";
+    import ImageIcon from "@lucide/svelte/icons/image";
+    import MessageSquare from "@lucide/svelte/icons/message-square";
+    import Smartphone from "@lucide/svelte/icons/smartphone";
+    import { onDestroy, onMount } from "svelte";
+
+    let selectedTab = $state("sms");
+    const deviceId = $derived(Number(page.params.deviceId));
+
+    breadcrumbs.set([
+        mainNavTree[0],
+        { title: "Device Detail", url: page.url.pathname },
+    ]);
+
+    onMount(async () => {
+        if (!deviceId || Number.isNaN(deviceId)) {
+            return;
+        }
+        await mobileVM.fetchDeviceDetail(deviceId);
+        await mobileVM.fetchSMS(deviceId);
+        await mobileVM.fetchMedia(deviceId);
+        mobileVM.startSmsPolling(deviceId, 5000);
+    });
+
+    onDestroy(() => {
+        mobileVM.stopSmsPolling();
+    });
+</script>
+
+<div class="space-y-4">
+    <div class="flex items-center gap-2">
+        <Button variant="outline" size="sm" href="/dashboard">
+            <Icon icon={ArrowLeft} cls="h-4 w-4 mr-1" />
+            Back
+        </Button>
+    </div>
+
+    <Card.Root>
+        <Card.Header>
+            <div class="flex items-center gap-2">
+                <Icon icon={Smartphone} cls="h-5 w-5 text-primary" />
+                <Card.Title>
+                    {mobileVM.selectedDeviceDetail?.device.name || "Device"}
+                </Card.Title>
+            </div>
+        </Card.Header>
+        <Card.Content>
+            {#if mobileVM.selectedDeviceDetail}
+                <div class="grid grid-cols-1 gap-3 text-sm md:grid-cols-2">
+                    <div>
+                        <span class="text-muted-foreground">External ID:</span>
+                        <div class="font-mono">
+                            {mobileVM.selectedDeviceDetail.device.externalDeviceId}
+                        </div>
+                    </div>
+                    <div>
+                        <span class="text-muted-foreground">Last Ping:</span>
+                        <div>
+                            {mobileVM.formatLastPing(
+                                mobileVM.selectedDeviceDetail.device.lastPingAt,
+                            )}
+                        </div>
+                    </div>
+                    <div>
+                        <span class="text-muted-foreground">Manufacturer:</span>
+                        <div>{mobileVM.selectedDeviceDetail.device.manufacturer}</div>
+                    </div>
+                    <div>
+                        <span class="text-muted-foreground">Model:</span>
+                        <div>{mobileVM.selectedDeviceDetail.device.model}</div>
+                    </div>
+                    <div>
+                        <span class="text-muted-foreground">Android:</span>
+                        <div>{mobileVM.selectedDeviceDetail.device.androidVersion}</div>
+                    </div>
+                    <div>
+                        <span class="text-muted-foreground">Counts:</span>
+                        <div>
+                            SMS: {mobileVM.selectedDeviceDetail.smsCount}, Media:
+                            {mobileVM.selectedDeviceDetail.mediaCount}
+                        </div>
+                    </div>
+                </div>
+            {/if}
+        </Card.Content>
+    </Card.Root>
+
+    <Tabs.Root bind:value={selectedTab}>
+        <Tabs.List>
+            <Tabs.Trigger value="sms">
+                <Icon icon={MessageSquare} cls="mr-1 h-4 w-4" />
+                SMS
+            </Tabs.Trigger>
+            <Tabs.Trigger value="media">
+                <Icon icon={ImageIcon} cls="mr-1 h-4 w-4" />
+                Media Assets
+            </Tabs.Trigger>
+        </Tabs.List>
+
+        <Tabs.Content value="sms" class="mt-3">
+            <Card.Root>
+                <Card.Header>
+                    <Card.Title>SMS</Card.Title>
+                </Card.Header>
+                <Card.Content>
+                    {#if !mobileVM.smsLoading && mobileVM.sms.length === 0}
+                        <div class="py-8 text-center text-sm text-muted-foreground">
+                            No SMS records yet.
+                        </div>
+                    {:else}
+                        <Table.Root>
+                            <Table.Header>
+                                <Table.Row>
+                                    <Table.Head>From</Table.Head>
+                                    <Table.Head>To</Table.Head>
+                                    <Table.Head>Body</Table.Head>
+                                    <Table.Head>Sent</Table.Head>
+                                </Table.Row>
+                            </Table.Header>
+                            <Table.Body>
+                                {#each mobileVM.sms as message (message.id)}
+                                    <Table.Row>
+                                        <Table.Cell>{message.sender}</Table.Cell>
+                                        <Table.Cell>
+                                            {message.recipient || "-"}
+                                        </Table.Cell>
+                                        <Table.Cell class="max-w-[520px] truncate">
+                                            {message.body}
+                                        </Table.Cell>
+                                        <Table.Cell>
+                                            {new Date(message.sentAt).toLocaleString()}
+                                        </Table.Cell>
+                                    </Table.Row>
+                                {/each}
+                            </Table.Body>
+                        </Table.Root>
+                    {/if}
+                </Card.Content>
+            </Card.Root>
+        </Tabs.Content>
+
+        <Tabs.Content value="media" class="mt-3">
+            <Card.Root>
+                <Card.Header>
+                    <Card.Title>Media Assets</Card.Title>
+                </Card.Header>
+                <Card.Content>
+                    {#if !mobileVM.mediaLoading && mobileVM.media.length === 0}
+                        <div class="py-8 text-center text-sm text-muted-foreground">
+                            No media assets yet.
+                        </div>
+                    {:else}
+                        <Table.Root>
+                            <Table.Header>
+                                <Table.Row>
+                                    <Table.Head>Filename</Table.Head>
+                                    <Table.Head>MIME</Table.Head>
+                                    <Table.Head>Size</Table.Head>
+                                    <Table.Head>Captured</Table.Head>
+                                    <Table.Head>File ID</Table.Head>
+                                </Table.Row>
+                            </Table.Header>
+                            <Table.Body>
+                                {#each mobileVM.media as asset (asset.id)}
+                                    <Table.Row>
+                                        <Table.Cell>{asset.filename || "-"}</Table.Cell>
+                                        <Table.Cell>{asset.mimeType}</Table.Cell>
+                                        <Table.Cell>
+                                            {asset.sizeBytes ? `${asset.sizeBytes} B` : "-"}
+                                        </Table.Cell>
+                                        <Table.Cell>
+                                            {asset.capturedAt
+                                                ? new Date(asset.capturedAt).toLocaleString()
+                                                : "-"}
+                                        </Table.Cell>
+                                        <Table.Cell class="font-mono text-xs">
+                                            {asset.fileId}
+                                        </Table.Cell>
+                                    </Table.Row>
+                                {/each}
+                            </Table.Body>
+                        </Table.Root>
+                    {/if}
+                </Card.Content>
+            </Card.Root>
+        </Tabs.Content>
+    </Tabs.Root>
+</div>

packages/logic/domains/mobile/controller.ts

@@ -1,4 +1,4 @@
-import {
+import type {
     ListMobileDeviceMediaFilters,
     ListMobileDeviceSMSFilters,
     ListMobileDevicesFilters,
@@ -8,13 +8,13 @@ import {
     PingMobileDevice,
     RegisterMobileDevice,
 } from "./data";
-import { FlowExecCtx } from "@core/flow.execution.context";
+import type { FlowExecCtx } from "@core/flow.execution.context";
 import { traceResultAsync } from "@core/observability";
 import { MobileRepository } from "./repository";
-import { errAsync } from "neverthrow";
-import { db } from "@pkg/db";
 import { settings } from "@core/settings";
 import { mobileErrors } from "./errors";
+import { errAsync } from "neverthrow";
+import { db } from "@pkg/db";
 
 export class MobileController {
     constructor(
@@ -24,14 +24,20 @@ export class MobileController {
 
     registerDevice(fctx: FlowExecCtx, payload: RegisterMobileDevice) {
         return traceResultAsync({
-            name: "logic.mobile.controller.register",
+            name: "mobile.register",
             fctx,
-            attributes: { "app.mobile.external_device_id": payload.externalDeviceId },
+            attributes: {
+                "app.mobile.external_device_id": payload.externalDeviceId,
+            },
             fn: () =>
                 this.mobileRepo
                     .findAdminOwnerId(fctx, this.defaultAdminEmail)
                     .andThen((ownerUserId) =>
-                        this.mobileRepo.upsertDevice(fctx, payload, ownerUserId),
+                        this.mobileRepo.upsertDevice(
+                            fctx,
+                            payload,
+                            ownerUserId,
+                        ),
                     ),
         });
     }
@@ -42,12 +48,13 @@ export class MobileController {
         payload?: PingMobileDevice,
     ) {
         return traceResultAsync({
-            name: "logic.mobile.controller.ping",
+            name: "mobile.ping",
             fctx,
             attributes: { "app.mobile.external_device_id": externalDeviceId },
             fn: () =>
-                this.mobileRepo.getDeviceByExternalId(fctx, externalDeviceId).andThen(
+                this.mobileRepo
-                    (device) => {
+                    .getDeviceByExternalId(fctx, externalDeviceId)
+                    .andThen((device) => {
                         const pingAt = payload?.pingAt
                             ? new Date(payload.pingAt as Date | string)
                             : new Date();
@@ -59,9 +66,12 @@ export class MobileController {
                                 ),
                             );
                         }
-                        return this.mobileRepo.touchDevicePing(fctx, device.id, pingAt);
+                        return this.mobileRepo.touchDevicePing(
-                    },
+                            fctx,
-                ),
+                            device.id,
+                            pingAt,
+                        );
+                    }),
         });
     }
 
@@ -71,24 +81,27 @@ export class MobileController {
         messages: MobileSMSInput[],
     ) {
         return traceResultAsync({
-            name: "logic.mobile.controller.sms_sync",
+            name: "mobile.sms.sync",
             fctx,
             attributes: {
                 "app.mobile.external_device_id": externalDeviceId,
                 "app.mobile.sms.received_count": messages.length,
             },
             fn: () =>
-                this.mobileRepo.getDeviceByExternalId(fctx, externalDeviceId).andThen(
+                this.mobileRepo
-                    (device) =>
+                    .getDeviceByExternalId(fctx, externalDeviceId)
+                    .andThen((device) =>
                         this.mobileRepo
                             .syncSMS(fctx, device.id, messages)
                             .andThen((syncResult) =>
-                                this.mobileRepo.touchDevicePing(fctx, device.id).map(() => ({
+                                this.mobileRepo
-                                    ...syncResult,
+                                    .touchDevicePing(fctx, device.id)
-                                    deviceId: device.id,
+                                    .map(() => ({
-                                })),
+                                        ...syncResult,
+                                        deviceId: device.id,
+                                    })),
                             ),
-                ),
+                    ),
         });
     }
 
@@ -98,24 +111,27 @@ export class MobileController {
         assets: MobileMediaAssetInput[],
     ) {
         return traceResultAsync({
-            name: "logic.mobile.controller.media_sync",
+            name: "mobile.media.sync",
             fctx,
             attributes: {
                 "app.mobile.external_device_id": externalDeviceId,
                 "app.mobile.media.received_count": assets.length,
             },
             fn: () =>
-                this.mobileRepo.getDeviceByExternalId(fctx, externalDeviceId).andThen(
+                this.mobileRepo
-                    (device) =>
+                    .getDeviceByExternalId(fctx, externalDeviceId)
+                    .andThen((device) =>
                         this.mobileRepo
                             .syncMediaAssets(fctx, device.id, assets)
                             .andThen((syncResult) =>
-                                this.mobileRepo.touchDevicePing(fctx, device.id).map(() => ({
+                                this.mobileRepo
-                                    ...syncResult,
+                                    .touchDevicePing(fctx, device.id)
-                                    deviceId: device.id,
+                                    .map(() => ({
-                                })),
+                                        ...syncResult,
+                                        deviceId: device.id,
+                                    })),
                             ),
-                ),
+                    ),
         });
     }
 
@@ -125,7 +141,7 @@ export class MobileController {
         pagination: MobilePagination,
     ) {
         return traceResultAsync({
-            name: "logic.mobile.controller.list_devices",
+            name: "mobile.devices.list",
             fctx,
             attributes: { "app.user.id": filters.ownerUserId },
             fn: () => this.mobileRepo.listDevices(fctx, filters, pagination),
@@ -134,10 +150,14 @@ export class MobileController {
 
     getDeviceDetail(fctx: FlowExecCtx, deviceId: number, ownerUserId: string) {
         return traceResultAsync({
-            name: "logic.mobile.controller.get_device_detail",
+            name: "mobile.device.detail",
             fctx,
-            attributes: { "app.user.id": ownerUserId, "app.mobile.device_id": deviceId },
+            attributes: {
-            fn: () => this.mobileRepo.getDeviceDetail(fctx, deviceId, ownerUserId),
+                "app.user.id": ownerUserId,
+                "app.mobile.device_id": deviceId,
+            },
+            fn: () =>
+                this.mobileRepo.getDeviceDetail(fctx, deviceId, ownerUserId),
         });
     }
 
@@ -147,7 +167,7 @@ export class MobileController {
         pagination: MobilePagination,
     ) {
         return traceResultAsync({
-            name: "logic.mobile.controller.list_device_sms",
+            name: "mobile.device.sms.list",
             fctx,
             attributes: { "app.mobile.device_id": filters.deviceId },
             fn: () => this.mobileRepo.listDeviceSMS(fctx, filters, pagination),
@@ -160,40 +180,54 @@ export class MobileController {
         pagination: MobilePagination,
     ) {
         return traceResultAsync({
-            name: "logic.mobile.controller.list_device_media",
+            name: "mobile.device.media.list",
             fctx,
             attributes: { "app.mobile.device_id": filters.deviceId },
-            fn: () => this.mobileRepo.listDeviceMedia(fctx, filters, pagination),
+            fn: () =>
+                this.mobileRepo.listDeviceMedia(fctx, filters, pagination),
         });
     }
 
-    deleteMediaAsset(fctx: FlowExecCtx, mediaAssetId: number, ownerUserId: string) {
+    deleteMediaAsset(
+        fctx: FlowExecCtx,
+        mediaAssetId: number,
+        ownerUserId: string,
+    ) {
         return traceResultAsync({
-            name: "logic.mobile.controller.delete_media_asset",
+            name: "mobile.media.delete",
             fctx,
             attributes: {
                 "app.user.id": ownerUserId,
                 "app.mobile.media_asset_id": mediaAssetId,
             },
-            fn: () => this.mobileRepo.deleteMediaAsset(fctx, mediaAssetId, ownerUserId),
+            fn: () =>
+                this.mobileRepo.deleteMediaAsset(
+                    fctx,
+                    mediaAssetId,
+                    ownerUserId,
+                ),
         });
     }
 
     deleteDevice(fctx: FlowExecCtx, deviceId: number, ownerUserId: string) {
         return traceResultAsync({
-            name: "logic.mobile.controller.delete_device",
+            name: "mobile.device.delete",
             fctx,
-            attributes: { "app.user.id": ownerUserId, "app.mobile.device_id": deviceId },
+            attributes: {
+                "app.user.id": ownerUserId,
+                "app.mobile.device_id": deviceId,
+            },
             fn: () => this.mobileRepo.deleteDevice(fctx, deviceId, ownerUserId),
         });
     }
 
     resolveDeviceByExternalId(fctx: FlowExecCtx, externalDeviceId: string) {
         return traceResultAsync({
-            name: "logic.mobile.controller.resolve_device",
+            name: "mobile.device.resolve",
             fctx,
             attributes: { "app.mobile.external_device_id": externalDeviceId },
-            fn: () => this.mobileRepo.getDeviceByExternalId(fctx, externalDeviceId),
+            fn: () =>
+                this.mobileRepo.getDeviceByExternalId(fctx, externalDeviceId),
         });
     }
 }

spec.mobile.md

@@ -0,0 +1,155 @@
+# Mobile Integration Spec (Stage 1)
+
+## Base URL
+
+- Processor endpoints are mounted under `/api/v1/mobile`.
+
+## Headers
+
+- Optional: `x-flow-id` for end-to-end trace correlation.
+- Required for ping/sync endpoints: `x-device-id` with a previously registered `externalDeviceId`.
+
+## Endpoints
+
+### Register Device
+
+- Method: `POST`
+- Path: `/api/v1/mobile/register`
+- Auth: none (trusted private network assumption)
+
+Payload:
+
+```json
+{
+  "externalDeviceId": "android-1234",
+  "name": "Pixel 8 Pro",
+  "manufacturer": "Google",
+  "model": "Pixel 8 Pro",
+  "androidVersion": "15"
+}
+```
+
+### Ping Device
+
+- Method: `PUT`
+- Path: `/api/v1/mobile/ping`
+- Required header: `x-device-id`
+
+Payload:
+
+```json
+{
+  "pingAt": "2026-03-01T10:15:00.000Z"
+}
+```
+
+### Sync SMS
+
+- Method: `PUT`
+- Path: `/api/v1/mobile/sms/sync`
+- Required header: `x-device-id`
+
+Payload:
+
+```json
+{
+  "messages": [
+    {
+      "externalMessageId": "msg-1",
+      "sender": "+358401111111",
+      "recipient": "+358402222222",
+      "body": "Hello from device",
+      "sentAt": "2026-03-01T10:10:00.000Z",
+      "receivedAt": "2026-03-01T10:10:01.000Z",
+      "rawPayload": {
+        "threadId": "7"
+      }
+    }
+  ]
+}
+```
+
+### Sync Media Assets
+
+- Method: `PUT`
+- Path: `/api/v1/mobile/media/sync`
+- Required header: `x-device-id`
+
+Payload:
+
+```json
+{
+  "assets": [
+    {
+      "externalMediaId": "media-1",
+      "fileId": "01JNE3Q1S3KQX9Y7G2J8G7R0A8",
+      "mimeType": "image/jpeg",
+      "filename": "IMG_1234.jpg",
+      "capturedAt": "2026-03-01T10:05:00.000Z",
+      "sizeBytes": 1350021,
+      "hash": "sha256-...",
+      "metadata": {
+        "width": 3024,
+        "height": 4032
+      }
+    }
+  ]
+}
+```
+
+## Response Contract
+
+Success:
+
+```json
+{
+  "data": {},
+  "error": null
+}
+```
+
+Failure:
+
+```json
+{
+  "data": null,
+  "error": {
+    "flowId": "uuid",
+    "code": "VALIDATION_ERROR",
+    "message": "Human message",
+    "description": "Actionable description",
+    "detail": "Technical detail"
+  }
+}
+```
+
+## Admin Query Contract
+
+- Pagination:
+  - `page`: 1-based integer
+  - `pageSize`: integer
+- Sorting:
+  - `sortBy`: operation-specific
+  - `sortOrder`: `asc` or `desc`
+- Paginated response payload:
+  - `data`: rows
+  - `total`: full row count
+  - `page`, `pageSize`, `totalPages`
+
+## Dedup Rules
+
+- Device:
+  - Upsert on unique `externalDeviceId`.
+- SMS:
+  - Dedup key #1: `(deviceId, externalMessageId)` when provided.
+  - Dedup key #2 fallback: `(deviceId, dedupHash)` where dedup hash is SHA-256 of `(deviceId + sentAt + sender + body)`.
+- Media:
+  - Dedup key: `(deviceId, externalMediaId)` when provided.
+  - `fileId` in `mobile_media_asset` is unique.
+
+## Operator Checklist
+
+1. Register a device.
+2. Send ping with `x-device-id` and verify dashboard `lastPingAt` updates.
+3. Sync SMS and verify device detail `SMS` tab updates (polling every 5s).
+4. Sync media and verify device detail `Media Assets` tab displays rows.