@hearthlog/shell 0.0.0-stage → 0.1.0

package/src/pages/developer/PendingWorkImport.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import Button from "@hearthlog/ui/components/ui/Button.svelte";
+    import { importPendingWork } from "@hearthlog/runtime/store/pending-work-transfer.js";
+    import { parsePendingWorkFile, type ImportReport } from "@hearthlog/runtime/store/pending-work.js";
+
+    let busy = $state(false);
+    let error = $state<string | null>(null);
+    let report = $state<ImportReport | null>(null);
+    let input = $state<HTMLInputElement | null>(null);
+
+    async function run(): Promise<void> {
+        const file = input?.files?.[0];
+        if (!file) return;
+        busy = true;
+        error = null;
+        report = null;
+        try {
+            report = await importPendingWork(parsePendingWorkFile(await file.text()));
+        } catch (cause) {
+            error = cause instanceof Error ? cause.message : "Could not read the file";
+        } finally {
+            busy = false;
+        }
+    }
+</script>
+
+<div class="mt-4 border-t border-[var(--stor-border)] pt-4">
+    <h3 class="text-sm font-semibold text-[var(--stor-ink)]">Pending changes from a moved workspace</h3>
+    <p class="mt-1 text-sm text-[var(--stor-muted-text)]">Send the changes a device exported before the move. Ones already accepted are recognized.</p>
+    <div class="mt-3 flex flex-wrap items-center gap-2">
+        <input bind:this={input} type="file" accept="application/json,.json" class="text-sm" disabled={busy} data-testid="pending-work-file" />
+        <Button variant="secondary" onclick={run} disabled={busy}>{busy ? "Sending" : "Send changes"}</Button>
+    </div>
+    {#if error}
+        <p class="mt-3 text-sm text-[var(--stor-negative)]" role="alert">{error}</p>
+    {/if}
+    {#if report}
+        <div class="mt-3 text-sm" role="status">
+            <p class="text-[var(--stor-ink)]">{report.applied} applied, {report.notApplied} not applied.</p>
+            {#if report.notApplied > 0}
+                <ul class="mt-1 list-disc pl-5 text-[var(--stor-muted-text)]">
+                    {#each report.results.filter((result) => result.outcome !== "applied") as result (result.requestId)}
+                        <li>{result.message}</li>
+                    {/each}
+                </ul>
+            {/if}
+        </div>
+    {/if}
+</div>

package/src/pages/developer/PerformanceDashboard.svelte

@@ -0,0 +1,262 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { page } from "$app/state";
+    import { workspaceReadiness } from "@hearthlog/ui/state/readiness.js";
+    import { currentPageResource } from "@hearthlog/ui/state/page-context.js";
+    import {
+        clearPerfEntries,
+        formatDuration,
+        getBaselineMetricLabel,
+        getBaselineMetricDescription,
+        measurementMetadata,
+        getPerfEntries,
+        subscribeToPerfEntries,
+        summarizeBaselineMetrics,
+        type PerfEntry,
+        type PerfBaselineMetric,
+    } from "@hearthlog/runtime/utils/perf.js";
+    import IconDeleteOutline from "~icons/mdi/delete-outline";
+    import IconDownload from "~icons/mdi/download";
+    import IconRefresh from "~icons/mdi/refresh";
+
+    let entries = $state<PerfEntry[]>([]);
+    const documentId = measurementMetadata().documentId as string;
+    const resource = currentPageResource();
+    const launchMetrics: PerfBaselineMetric[] = ['firstContentfulPaint', 'shellInteractive', 'dataReady', 'firstSyncComplete'];
+    const buildEntries = $derived(entries.filter(entry => entry.metadata?.build === __BUILD_TIMESTAMP__));
+    const currentEntries = $derived(buildEntries.filter(entry => entry.metadata?.documentId === documentId));
+    const pageEntry = $derived(currentEntries.find(entry => entry.baselineMetric === 'pageContentReady' && entry.metadata?.loadId === resource?.().measurement?.id));
+    const pageFailed = $derived(pageEntry?.metadata?.outcome === 'failed' || resource?.().error);
+    let summaries = $derived(summarizeBaselineMetrics(buildEntries));
+    let activeSummaries = $derived(
+        summaries.filter((summary) => summary.sampleCount > 0),
+    );
+    let idleMetricCount = $derived(summaries.length - activeSummaries.length);
+    let recentEntries = $derived(
+        buildEntries
+            .filter((entry) => entry.baselineMetric)
+            .sort((left, right) => right.timestamp - left.timestamp)
+            .slice(0, 8),
+    );
+
+    function refreshEntries() {
+        entries = getPerfEntries();
+    }
+
+    function exportEntries() {
+        const payload = JSON.stringify(
+            {
+                exportedAt: new Date().toISOString(),
+                entries,
+            },
+            null,
+            2,
+        );
+        const blob = new Blob([payload], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "performance-baseline.json";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+    }
+
+    onMount(() => {
+        refreshEntries();
+        return subscribeToPerfEntries((nextEntries) => {
+            entries = nextEntries;
+        });
+    });
+</script>
+
+<div class="stor-panel min-w-0 p-[var(--stor-panel-padding)]">
+    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+            <h2 class="text-base font-semibold text-stone-900">
+                Performance
+            </h2>
+            {#if idleMetricCount > 0}
+                <p class="mt-1 text-sm text-[var(--stor-muted-text)]">
+                    {idleMetricCount} idle metric{idleMetricCount === 1 ? "" : "s"}
+                </p>
+            {/if}
+        </div>
+
+        <div class="flex flex-wrap gap-2">
+            <button
+                type="button"
+                class="inline-flex items-center gap-1.5 rounded-lg bg-[var(--stor-surface-muted)] px-3 py-1.5 text-xs font-semibold text-stone-700 hover:bg-stone-200"
+                onclick={refreshEntries}
+            >
+                <IconRefresh class="h-3.5 w-3.5" />
+                Refresh
+            </button>
+            <button
+                type="button"
+                class="inline-flex items-center gap-1.5 rounded-lg bg-[var(--stor-surface-muted)] px-3 py-1.5 text-xs font-semibold text-stone-700 hover:bg-stone-200 disabled:opacity-50"
+                onclick={exportEntries}
+                disabled={entries.length === 0}
+            >
+                <IconDownload class="h-3.5 w-3.5" />
+                Export
+            </button>
+            <button
+                type="button"
+                class="inline-flex items-center gap-1.5 rounded-lg bg-red-50 px-3 py-1.5 text-xs font-semibold text-red-700 hover:bg-red-100 disabled:opacity-50"
+                onclick={() => {
+                    clearPerfEntries();
+                    refreshEntries();
+                }}
+                disabled={entries.length === 0}
+            >
+                <IconDeleteOutline class="h-3.5 w-3.5" />
+                Clear
+            </button>
+        </div>
+    </div>
+
+    <section class="mt-4 rounded-lg bg-[var(--stor-surface-muted)] p-3" aria-label="Current page performance">
+        <h3 class="text-sm font-semibold text-[var(--stor-ink)]">Current page</h3>
+        <p class="mt-1 break-all text-xs text-[var(--stor-muted-text)]">{page.url.pathname}{page.url.search}</p>
+        <dl class="mt-3">
+            <div class="flex justify-between gap-3 text-xs">
+                <dt class="font-medium text-[var(--stor-ink)]">{getBaselineMetricLabel('pageContentReady')}</dt>
+                <dd class="shrink-0 tabular-nums text-[var(--stor-muted-text)]">{pageFailed ? 'Failed' : pageEntry ? formatDuration(pageEntry.durationMs) : resource?.().loading ? 'Pending' : 'Not recorded'}</dd>
+            </div>
+        </dl>
+        <p class="mt-1 text-xs text-[var(--stor-muted-text)]">
+            {#if pageEntry?.metadata?.kind === 'startup'}
+                From opening the app, including local workspace setup.
+            {:else if pageEntry?.metadata?.kind === 'navigation'}
+                From navigating to this page until its required data has rendered.
+            {:else if pageEntry?.metadata?.kind === 'refresh'}
+                Background refresh; previously loaded content stays visible.
+            {:else if resource?.().loading}
+                Waiting for this page's required data to render.
+            {:else}
+                No retained sample for this page. Navigate or reload to record one.
+            {/if}
+        </p>
+    </section>
+
+    <section class="mt-4 rounded-lg bg-[var(--stor-surface-muted)] p-3" aria-label="App launch performance">
+        <h3 class="text-sm font-semibold text-[var(--stor-ink)]">App launch</h3>
+        <p class="mt-1 text-xs text-[var(--stor-muted-text)]">Elapsed since opening the app. These milestones overlap; do not add them together.</p>
+        <dl class="mt-3 space-y-3">
+            {#each launchMetrics as metric}
+                {@const entry = currentEntries.find(entry => entry.baselineMetric === metric)}
+                {@const failed = entry?.metadata?.outcome === 'failed' || (metric === 'dataReady' && $workspaceReadiness.error)}
+                <div>
+                    <div class="flex justify-between gap-3 text-xs">
+                        <dt class="font-medium text-stone-700">{getBaselineMetricLabel(metric)}</dt>
+                        <dd class="shrink-0 tabular-nums text-stone-600">{failed ? 'Failed' : entry?.metadata?.outcome === 'offline' ? 'Offline' : entry?.metadata?.outcome === 'skipped' ? 'Skipped' : entry ? formatDuration(entry.durationMs) : 'Pending'}</dd>
+                    </div>
+                    <p class="mt-0.5 text-xs text-[var(--stor-muted-text)]">{getBaselineMetricDescription(metric)}</p>
+                    {#if entry}<p class="mt-0.5 break-all text-[11px] text-[var(--stor-muted-text)]">{entry.metadata?.kind} · {entry.metadata?.route}</p>{/if}
+                </div>
+            {/each}
+        </dl>
+    </section>
+
+    <h3 class="mt-4 text-sm font-semibold text-[var(--stor-ink)]">History for this build</h3>
+    {#if activeSummaries.length > 0}
+        <div class="mt-4 overflow-hidden rounded-lg bg-[var(--stor-surface-muted)]">
+            {#each activeSummaries as summary}
+                <section class="grid gap-3 border-b border-[var(--stor-border)] p-3 last:border-b-0 sm:grid-cols-[minmax(0,1fr)_auto_auto_auto] sm:items-center">
+                    <div class="min-w-0">
+                        <h3 class="truncate text-sm font-semibold text-stone-900">
+                            {summary.label}
+                        </h3>
+                        <p class="mt-0.5 text-xs text-[var(--stor-muted-text)]">
+                            {summary.group}
+                        </p>
+                        <p class="mt-1 text-xs text-[var(--stor-muted-text)]">{summary.description}</p>
+                        <p class="mt-1 text-xs text-[var(--stor-muted-text)]">
+                            {summary.sampleCount} sample{summary.sampleCount === 1
+                                ? ""
+                                : "s"}
+                        </p>
+                    </div>
+                    <div>
+                        <div class="text-[10.5px] font-semibold uppercase tracking-[0.1em] text-[var(--stor-muted-text)]">
+                            Latest
+                        </div>
+                        <div class="text-sm font-semibold text-stone-900">
+                            {summary.latestMs !== null
+                                ? formatDuration(summary.latestMs)
+                                : "—"}
+                        </div>
+                    </div>
+                    <div>
+                        <div class="text-[10.5px] font-semibold uppercase tracking-[0.1em] text-[var(--stor-muted-text)]">
+                            Avg
+                        </div>
+                        <div class="text-sm font-semibold text-stone-900">
+                            {summary.averageMs !== null
+                                ? formatDuration(summary.averageMs)
+                                : "—"}
+                        </div>
+                    </div>
+                    <div>
+                        <div class="text-[10.5px] font-semibold uppercase tracking-[0.1em] text-[var(--stor-muted-text)]">
+                            Slow
+                        </div>
+                        <div class="text-sm font-semibold text-stone-900">
+                            {summary.slowCount}
+                        </div>
+                    </div>
+                </section>
+            {/each}
+        </div>
+    {:else}
+        <div
+            class="mt-4 rounded-lg border border-dashed border-[var(--stor-border)] bg-[var(--stor-surface-muted)] py-6 text-center"
+        >
+            <p class="text-sm text-[var(--stor-muted-text)]">No performance samples yet.</p>
+        </div>
+    {/if}
+
+    <div class="mt-4">
+        <div class="mb-2 flex items-center justify-between gap-3">
+            <h3 class="text-sm font-semibold text-stone-900">Recent samples</h3>
+            <span class="text-xs text-[var(--stor-muted-text)]">{recentEntries.length}</span>
+        </div>
+
+        {#if recentEntries.length > 0}
+            <div class="overflow-hidden rounded-lg bg-[var(--stor-surface-muted)]">
+                {#each recentEntries as entry}
+                    <div class="grid gap-1 border-b border-[var(--stor-border)] px-3 py-2 text-xs last:border-b-0 sm:grid-cols-[minmax(0,1fr)_7rem_10rem] sm:items-center">
+                        <div class="min-w-0">
+                            <div class="truncate font-medium text-stone-900">
+                                {entry.baselineMetric
+                                    ? getBaselineMetricLabel(
+                                            entry.baselineMetric,
+                                        )
+                                    : entry.operation}
+                            </div>
+                            <div class="truncate text-[10.5px] text-[var(--stor-muted-text)]">
+                                {entry.metadata?.route ?? 'Legacy sample'} · {entry.metadata?.kind ?? entry.category} · {entry.metadata?.outcome ?? 'success'}
+                            </div>
+                        </div>
+                        <div class="font-semibold text-stone-900">
+                            {formatDuration(entry.durationMs)}
+                        </div>
+                        <div class="text-[var(--stor-muted-text)]">
+                            {new Date(entry.timestamp).toLocaleTimeString()}
+                        </div>
+                    </div>
+                {/each}
+            </div>
+        {:else}
+            <div
+                class="rounded-lg border border-dashed border-[var(--stor-border)] bg-[var(--stor-surface-muted)] py-8 text-center"
+            >
+                <p class="text-sm text-[var(--stor-muted-text)]">
+                    No samples yet.
+                </p>
+            </div>
+        {/if}
+    </div>
+</div>

package/src/pages/developer/StackInfo.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { tenant } from '@hearthlog/contracts/tenant/config';
+    import { formatSqliteBytes, type LocalSqliteStats } from '@hearthlog/runtime/db/local-statistics.js';
+    import IconLayersOutline from '~icons/mdi/layers-outline';
+
+    let { stats }: { stats: LocalSqliteStats | null } = $props();
+
+    const stack = __STACK_INFO__;
+    const mode = import.meta.env.VITE_E2E === '1' ? 'e2e' : import.meta.env.DEV ? 'development' : 'production';
+    const buildDate = new Date(__BUILD_TIMESTAMP__).toLocaleString('en-US');
+    const ledgerUrl = import.meta.env.VITE_LEDGER_SERVICE_URL || 'same origin';
+
+    let opfs = $state('checking');
+    let quota = $state('unknown');
+    let serviceWorker = $state('checking');
+    let online = $state(true);
+    const isolated = typeof crossOriginIsolated !== 'undefined' && crossOriginIsolated;
+
+    onMount(() => {
+        online = navigator.onLine;
+        const sync = () => (online = navigator.onLine);
+        window.addEventListener('online', sync);
+        window.addEventListener('offline', sync);
+
+        navigator.storage
+            ?.getDirectory?.()
+            .then(() => (opfs = 'available'))
+            .catch(() => (opfs = 'unavailable'));
+        if (!navigator.storage?.getDirectory) opfs = 'unavailable';
+        navigator.storage
+            ?.estimate?.()
+            .then(({ usage = 0, quota: limit = 0 }) => {
+                quota = `${formatSqliteBytes(usage)} of ${formatSqliteBytes(limit)}`;
+            })
+            .catch(() => {});
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker
+                .getRegistration()
+                .then((registration) => {
+                    serviceWorker = registration?.active ? 'active' : registration ? 'installing' : 'none';
+                })
+                .catch(() => (serviceWorker = 'unavailable'));
+        } else {
+            serviceWorker = 'unsupported';
+        }
+
+        return () => {
+            window.removeEventListener('online', sync);
+            window.removeEventListener('offline', sync);
+        };
+    });
+
+    const frameworks = $derived([
+        ['Svelte', stack.packages.svelte],
+        ['SvelteKit', stack.packages['@sveltejs/kit']],
+        ['Vite', stack.packages.vite],
+        ['TypeScript', stack.packages.typescript],
+        ['Tailwind CSS', stack.packages.tailwindcss],
+        ['Bits UI', stack.packages['bits-ui']],
+        ['TanStack Table', stack.packages['@tanstack/svelte-table']],
+        ['TanStack Virtual', stack.packages['@tanstack/svelte-virtual']],
+        ['Kysely', stack.packages.kysely],
+        ['SQLocal', stack.packages.sqlocal],
+        ['date-fns', stack.packages['date-fns']],
+        ['Node (build)', stack.node],
+    ]);
+    const runtime = $derived([
+        ['SQLite', stats?.sqliteVersion ?? '…'],
+        ['Schema version', stats ? String(stats.schemaVersion) : '…'],
+        ['OPFS', opfs],
+        ['Storage used', quota],
+        ['Service worker', serviceWorker],
+        ['Cross-origin isolated', isolated ? 'yes' : 'no'],
+        ['Network', online ? 'online' : 'offline'],
+    ]);
+    const build = $derived([
+        ['Commit', stack.commit ? `${stack.commit}${stack.dirty ? ' (dirty)' : ''}` : 'unknown'],
+        ['Branch', stack.branch || 'unknown'],
+        ['Built', buildDate],
+        ['Mode', mode],
+    ]);
+    const site = $derived([
+        ['Tenant', tenant.id],
+        ['Ledger app', tenant.ledgerAppName],
+        ['Features', String(tenant.features.size)],
+        ['Ledger URL', ledgerUrl],
+    ]);
+    const groups = $derived([
+        { title: 'Frameworks', rows: frameworks },
+        { title: 'Runtime', rows: runtime },
+        { title: 'Build', rows: build },
+        { title: 'Site', rows: site },
+    ]);
+</script>
+
+<section class="stor-panel min-w-0 p-[var(--stor-panel-padding)]" aria-labelledby="stack-info-heading" data-testid="stack-info">
+    <div class="flex items-start gap-3">
+        <IconLayersOutline class="mt-0.5 h-5 w-5 shrink-0 text-[var(--stor-accent-strong)]" />
+        <h2 id="stack-info-heading" class="text-base font-semibold text-[var(--stor-ink)]">Stack</h2>
+    </div>
+    <div class="mt-4 grid gap-x-8 gap-y-5 sm:grid-cols-2 xl:grid-cols-4">
+        {#each groups as group (group.title)}
+            <div class="min-w-0">
+                <h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--stor-muted-text)]">{group.title}</h3>
+                <dl class="mt-2 space-y-1.5 text-sm">
+                    {#each group.rows as [label, value] (label)}
+                        <div class="flex items-baseline justify-between gap-3">
+                            <dt class="shrink-0 text-[var(--stor-muted-text)]">{label}</dt>
+                            <dd class="min-w-0 truncate font-semibold tabular-nums text-[var(--stor-ink)]" title={value}>{value}</dd>
+                        </div>
+                    {/each}
+                </dl>
+            </div>
+        {/each}
+    </div>
+</section>

package/src/pages/developer/SyncLog.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import {
+        syncLog,
+        clearSyncLog,
+        loadSyncLog,
+        loadMoreSyncLog,
+        type SyncLogType,
+    } from "@hearthlog/runtime/store/sync.svelte.js";
+    import IconDeleteOutline from "~icons/mdi/delete-outline";
+
+    const typeConfig: Record<
+        SyncLogType,
+        { label: string; bgColor: string; textColor: string }
+    > = {
+        upload: {
+            label: "UPLOAD",
+            bgColor: "bg-green-100",
+            textColor: "text-green-700",
+        },
+        download: {
+            label: "DOWNLOAD",
+            bgColor: "bg-blue-100",
+            textColor: "text-blue-700",
+        },
+        ws_receive: {
+            label: "WEBSOCKET",
+            bgColor: "bg-cyan-100",
+            textColor: "text-cyan-700",
+        },
+        ws_ready: {
+            label: "READY",
+            bgColor: "bg-emerald-100",
+            textColor: "text-emerald-700",
+        },
+        ws_close: {
+            label: "DISCONNECT",
+            bgColor: "bg-[var(--stor-surface-muted)]",
+            textColor: "text-stone-600",
+        },
+        ws_error: {
+            label: "WS ERROR",
+            bgColor: "bg-orange-100",
+            textColor: "text-orange-700",
+        },
+        ws_resync: {
+            label: "RESYNC",
+            bgColor: "bg-violet-100",
+            textColor: "text-violet-700",
+        },
+        drain: {
+            label: "DRAIN",
+            bgColor: "bg-amber-100",
+            textColor: "text-amber-700",
+        },
+        error: {
+            label: "ERROR",
+            bgColor: "bg-red-100",
+            textColor: "text-red-700",
+        },
+    };
+
+    let expandedIds = $state<Set<string>>(new Set());
+    let isLoadingMore = $state(false);
+
+    onMount(() => {
+        loadSyncLog();
+    });
+
+    function toggleExpanded(id: string) {
+        const newSet = new Set(expandedIds);
+        if (newSet.has(id)) {
+            newSet.delete(id);
+        } else {
+            newSet.add(id);
+        }
+        expandedIds = newSet;
+    }
+
+    function formatTime(date: Date): string {
+        return date.toLocaleTimeString("en-US", {
+            hour12: false,
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+        });
+    }
+
+    async function handleLoadMore() {
+        isLoadingMore = true;
+        try {
+            await loadMoreSyncLog();
+        } finally {
+            isLoadingMore = false;
+        }
+    }
+</script>
+
+<div class="stor-panel p-[var(--stor-panel-padding)]">
+    <div class="mb-3 flex items-center justify-between gap-3">
+        <h2 class="text-base font-semibold text-stone-900">
+            Recent sync
+        </h2>
+        <div class="flex gap-2 items-center">
+            <span class="text-xs text-[var(--stor-muted-text)]">
+                {syncLog.entries.length} entries{syncLog.hasMore ? "+" : ""}
+            </span>
+            {#if syncLog.entries.length > 0}
+                <button
+                    type="button"
+                    class="inline-flex items-center gap-1.5 rounded-lg bg-[var(--stor-surface-muted)] px-3 py-1.5 text-xs font-semibold text-stone-700 hover:bg-stone-200"
+                    onclick={clearSyncLog}
+                >
+                    <IconDeleteOutline class="h-3.5 w-3.5" />
+                    Clear
+                </button>
+            {/if}
+        </div>
+    </div>
+
+    {#if syncLog.entries.length > 0}
+        <div
+            class="max-h-80 overflow-y-auto rounded-lg bg-[var(--stor-surface-muted)]"
+        >
+            {#each syncLog.entries as entry (entry.id)}
+                {@const config = typeConfig[entry.type]}
+                <button
+                    type="button"
+                    class="w-full border-b border-[var(--stor-border)] px-3 py-2 text-left transition-colors last:border-b-0 hover:bg-[var(--stor-surface-muted)] focus:outline-none focus:ring-2 focus:ring-inset focus:ring-stone-300"
+                    onclick={() => entry.details && toggleExpanded(entry.id)}
+                    aria-expanded={entry.details
+                        ? expandedIds.has(entry.id)
+                        : undefined}
+                >
+                    <div class="flex items-center gap-2">
+                        <span
+                            class="w-14 shrink-0 text-[10.5px] text-[var(--stor-muted-text)]"
+                        >
+                            {formatTime(entry.timestamp)}
+                        </span>
+                        <span
+                            class="shrink-0 rounded px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide {config.bgColor} {config.textColor}"
+                        >
+                            {config.label}
+                        </span>
+                        <span class="text-xs text-stone-700 truncate flex-1">
+                            {entry.message}
+                        </span>
+                        {#if entry.details}
+                            <span
+                                class="text-stone-300 text-xs transition-transform"
+                                class:rotate-90={expandedIds.has(entry.id)}
+                            >
+                                ▶
+                            </span>
+                        {/if}
+                    </div>
+                    {#if entry.details && expandedIds.has(entry.id)}
+                        <div
+                            class="mt-2 ml-[4rem] rounded bg-[var(--stor-surface-muted)] px-2 py-1 text-[11px] text-[var(--stor-muted-text)]"
+                        >
+                            {entry.details}
+                        </div>
+                    {/if}
+                </button>
+            {/each}
+
+            {#if syncLog.hasMore}
+                <div class="py-3 text-center">
+                    <button
+                        type="button"
+                        class="text-xs text-stone-700 hover:text-stone-950 font-medium disabled:opacity-50"
+                        onclick={handleLoadMore}
+                        disabled={isLoadingMore}
+                    >
+                        {isLoadingMore ? "Loading..." : "Load More"}
+                    </button>
+                </div>
+            {/if}
+        </div>
+    {:else}
+        <div
+            class="rounded-lg border border-dashed border-[var(--stor-border)] bg-[var(--stor-surface-muted)] py-6 text-center"
+        >
+            <p class="text-sm text-[var(--stor-muted-text)]">No sync events</p>
+        </div>
+    {/if}
+</div>

package/src/pages/developer/load.ts

@@ -0,0 +1,28 @@
+import type { LoadEvent } from '@sveltejs/kit';
+type PageLoad = (event: LoadEvent) => unknown;
+import { deferPage } from '@hearthlog/runtime/runtime/page-data.svelte.js';
+import { getAllEvents } from '@hearthlog/runtime/event/index.js';
+import { getAllOutboxEvents } from '@hearthlog/runtime/store/outbox.js';
+import { loadRawSqliteTablePage, parseRawSqlitePage, parseRawSqlitePageSize, parseRawSqliteSortDirection, parseRawSqliteSortField } from '@hearthlog/runtime/db/raw-browser.js';
+import { loadLocalSqliteStats } from '@hearthlog/runtime/db/local-statistics.js';
+import { tenant } from '@hearthlog/contracts/tenant/config';
+export const load = ((event) => {
+    event.depends('app:developer');
+    const requestedTab = event.url.searchParams.get('tab');
+    const tab = requestedTab === 'events' || requestedTab === 'database' || requestedTab === 'performance'
+        || (requestedTab === 'ledger' && tenant.admin) ? requestedTab : 'overview';
+    const table = event.url.searchParams.get('table');
+    const page = parseRawSqlitePage(event.url.searchParams.get('page'));
+    const pageSize = parseRawSqlitePageSize(event.url.searchParams.get('pageSize'));
+    const sort = parseRawSqliteSortField(event.url.searchParams.get('sort'));
+    const direction = parseRawSqliteSortDirection(event.url.searchParams.get('direction'));
+    return deferPage(event, { events: [], outboxEvents: [], databasePage: null, sqliteStats: null }, async () => {
+        const [events, outboxEvents, databasePage, sqliteStats] = await Promise.all([
+            tab === 'events' ? getAllEvents() : Promise.resolve([]),
+            tab === 'overview' ? getAllOutboxEvents() : Promise.resolve([]),
+            tab === 'database' ? loadRawSqliteTablePage({ tableName: table, page, pageSize, sort, direction }) : Promise.resolve(null),
+            tab === 'overview' || tab === 'database' ? loadLocalSqliteStats() : Promise.resolve(null),
+        ]);
+        return { events, outboxEvents, databasePage, sqliteStats };
+    });
+}) satisfies PageLoad;