@hearthlog/shell 0.0.0-stage → 0.1.0

package/src/pages/entity/load.ts

@@ -0,0 +1,79 @@
+import { deferPage } from '@hearthlog/runtime/runtime/page-data.svelte.js';
+import { getEntityDefinition, getPayloadKey } from '@hearthlog/contracts/event/entity-definitions';
+import type { LoadEvent } from '@sveltejs/kit';
+type PageLoad = (event: LoadEvent<{ type: string }>) => unknown;
+import { error, redirect } from '@sveltejs/kit';
+import { queryDatabase } from '@hearthlog/runtime/db/read-repositories.js';
+import { tenant } from '@hearthlog/contracts/tenant/config';
+import { tenantRouteRedirect } from '@hearthlog/contracts/tenant/route-access';
+import { withTiming, measurementMetadata } from '@hearthlog/runtime/utils/perf.js';
+
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100] as const;
+const DEFAULT_PAGE_SIZE = 20;
+
+const loadData = async ({ params, url, depends }: Parameters<PageLoad>[0]) => {
+
+    const entityName = params.type;
+
+    const redirectTarget = tenantRouteRedirect(`/entities/${entityName}`, tenant);
+    if (redirectTarget) redirect(307, redirectTarget);
+
+    let rowCount = 0;
+    let referenceFieldCount = 0;
+    const metadata = measurementMetadata();
+
+    const result = await withTiming(
+        'ui',
+        'loadEntityPage',
+        () => queryDatabase(async (repositories) => {
+            const repository = repositories.entities;
+            const entityType = await repository.getEntityType(entityName);
+            if (!entityType) {
+                throw error(
+                    404,
+                    `Entity type "${entityName}" is not available in this view.`,
+                );
+            }
+            referenceFieldCount = entityType.fields.filter((field) => field.type === 'reference').length;
+            const result = await repository.queryEntities(entityName, {
+                search: (url.searchParams.get('search') ?? '').trim(),
+                pageSize: parsePageSize(url.searchParams.get('pageSize')),
+                requestedPage: parsePage(url.searchParams.get('page')),
+                sortField: url.searchParams.get('sort'),
+                sortDirection: url.searchParams.get('direction') === 'desc' ? 'desc' : 'asc',
+            });
+            if (!result) throw error(404, `Entity type "${entityName}" not found.`);
+            rowCount = result.totalRows;
+            return result;
+        }),
+        () => ({
+            ...metadata, kind: 'operation', route: `/entities/${entityName}`,
+            baselineMetric: 'entityPageLoadTime',
+            entityType: entityName,
+            rowCount,
+            referenceFieldCount,
+        }),
+    );
+
+    return {
+        ...result,
+    };
+};
+
+function parsePageSize(value: string | null): number {
+    const parsed = Number(value);
+    return PAGE_SIZE_OPTIONS.includes(parsed as (typeof PAGE_SIZE_OPTIONS)[number])
+        ? parsed
+        : DEFAULT_PAGE_SIZE;
+}
+
+function parsePage(value: string | null): number {
+    const parsed = Number(value);
+    return Number.isInteger(parsed) && parsed > 0 ? parsed : 1;
+}
+
+export const load = ((event) => {
+    event.depends('app:entities'); const target = tenantRouteRedirect(`/entities/${event.params.type}`, tenant); if (target) redirect(307, target);
+    const definition = getEntityDefinition(event.params.type);
+    return deferPage(event, { entityType: { name: event.params.type, display_name: definition?.displayName ?? event.params.type.replace(/(^|_)([a-z])/g, (_, separator, letter) => `${separator ? ' ' : ''}${letter.toUpperCase()}`), id: '', tenant_id: '', log_id: '', created_at: '', updated_at: '', is_archived: 0, is_static: Boolean(definition), table_name: event.params.type, fields_json: '[]', calendar_json: null }, fields: definition?.fields.map(field => ({ ...field, payloadKey: getPayloadKey(field) })) ?? [], entities: [], referenceOptions: {}, referencedBy: {}, totalRows: 0, totalPages: 1, currentPage: parsePage(event.url.searchParams.get('page')), pageSize: parsePageSize(event.url.searchParams.get('pageSize')), search: event.url.searchParams.get('search') ?? '', sortField: event.url.searchParams.get('sort'), sortDirection: event.url.searchParams.get('direction') === 'desc' ? 'desc' : 'asc' } as Awaited<ReturnType<typeof loadData>>, () => loadData(event));
+}) satisfies PageLoad;

package/src/pages/error/ErrorPage.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+    import { page } from "$app/state";
+    import { localStoreStatus } from "@hearthlog/runtime/store/local-store.svelte.js";
+    import { onMount } from "svelte";
+    import type { LocalRecoverySummary } from "@hearthlog/runtime/recovery/local-recovery.js";
+
+    type LocalRecoveryModule = typeof import("@hearthlog/runtime/recovery/local-recovery.js");
+    let { error = null }: { error?: unknown } = $props();
+
+    let recoverySummary = $state<LocalRecoverySummary>({ pending: null, blocked: null });
+    let recoveryBusy = $state(false);
+    let recoveryMessage = $state("");
+    let confirmReset = $state(false);
+    let isOffline = $state(false);
+    let recoveryModulePromise: Promise<LocalRecoveryModule> | null = null;
+
+    const localStoreFailed = $derived(localStoreStatus.phase === "failed");
+    const offlinePageError = $derived(!localStoreFailed && isOffline);
+    const title = $derived(
+        localStoreFailed
+            ? "Local data could not be opened"
+            : offlinePageError
+                ? "Could not open this page offline"
+                : "stor could not open this page",
+    );
+    const description = $derived(
+        localStoreFailed
+            ? localStoreStatus.errorMessage ??
+                  "The local database did not finish starting. Your Ledger data has not been changed."
+            : offlinePageError
+                ? "The offline app bundle or local data may be unavailable. Connect and retry."
+                : error instanceof Error ? error.message : page.error?.message ?? "An unexpected error interrupted this page.",
+    );
+
+    function getRecoveryModule(): Promise<LocalRecoveryModule> {
+        recoveryModulePromise ??= import("@hearthlog/runtime/recovery/local-recovery.js");
+        return recoveryModulePromise;
+    }
+
+    async function retry(): Promise<void> {
+        if (!localStoreFailed) {
+            window.location.reload();
+            return;
+        }
+        recoveryBusy = true;
+        recoveryMessage = "Retrying the local migration…";
+        try {
+            const recovery = await getRecoveryModule();
+            await recovery.retryLocalMigration();
+            window.location.reload();
+        } catch (error) {
+            recoveryMessage = error instanceof Error ? error.message : "The migration still could not complete.";
+            recoveryBusy = false;
+        }
+    }
+
+    async function download(): Promise<void> {
+        try {
+            const recovery = await getRecoveryModule();
+            await recovery.downloadLocalDatabase();
+            recoveryMessage = "SQLite backup downloaded.";
+        } catch (error) {
+            recoveryMessage = error instanceof Error ? error.message : "SQLite could not be downloaded.";
+        }
+    }
+
+    async function reset(): Promise<void> {
+        if (!confirmReset) {
+            confirmReset = true;
+            return;
+        }
+        recoveryBusy = true;
+        recoveryMessage = "Stopping synchronization and deleting local data…";
+        try {
+            const recovery = await getRecoveryModule();
+            await recovery.resetLocalDataFromLedger();
+        } catch (error) {
+            recoveryMessage = error instanceof Error ? error.message : "Local data could not be reset.";
+            recoveryBusy = false;
+        }
+    }
+
+    onMount(() => {
+        window.dispatchEvent(new CustomEvent("stor:app-mounted"));
+        const updateOnlineState = () => (isOffline = !navigator.onLine);
+        updateOnlineState();
+        window.addEventListener("online", updateOnlineState);
+        window.addEventListener("offline", updateOnlineState);
+        return () => {
+            window.removeEventListener("online", updateOnlineState);
+            window.removeEventListener("offline", updateOnlineState);
+        };
+    });
+
+    $effect(() => {
+        if (!localStoreFailed) return;
+        void getRecoveryModule()
+            .then((recovery) => recovery.getLocalRecoverySummary())
+            .then((summary) => (recoverySummary = summary));
+    });
+</script>
+
+<svelte:head>
+    <title>{title} | stor</title>
+</svelte:head>
+
+<main class="flex min-h-screen items-center justify-center bg-[var(--stor-surface-muted)] px-4 py-12">
+    <section class="stor-panel w-full max-w-lg p-6 sm:p-8">
+        <a href="/" class="inline-flex items-center gap-2 font-mono font-semibold text-stone-950">
+            <span class="flex h-9 w-9 items-center justify-center rounded-xl bg-stone-950 text-lg font-black text-white">s</span>
+            stor
+        </a>
+        <p class="mt-8 font-mono text-[11px] font-semibold uppercase tracking-normal text-[var(--stor-muted-text)]">
+            {localStoreFailed ? "Local store" : error ? "Workspace unavailable" : `Error ${page.status}`}
+        </p>
+        <h1 class="mt-2 text-2xl font-semibold tracking-tight text-stone-950">{title}</h1>
+        <p class="mt-3 text-sm leading-6 text-stone-600">{description}</p>
+        <div class="mt-6 flex flex-wrap gap-2">
+            <button
+                type="button"
+                class="inline-flex items-center justify-center rounded-xl bg-stone-950 px-4 py-2.5 text-sm font-semibold text-white hover:bg-stone-800"
+                onclick={() => void retry()}
+                disabled={recoveryBusy}
+            >
+                Retry
+            </button>
+            {#if !localStoreFailed}
+                <a
+                    href="/"
+                    class="inline-flex items-center justify-center rounded-xl bg-[var(--stor-surface-muted)] px-4 py-2.5 text-sm font-semibold text-stone-700 hover:bg-[var(--stor-surface-hover)]"
+                >
+                    Go to start
+                </a>
+            {/if}
+            {#if localStoreFailed}
+                <button type="button" class="inline-flex items-center justify-center rounded-xl bg-[var(--stor-surface-muted)] px-4 py-2.5 text-sm font-semibold text-stone-700 hover:bg-[var(--stor-surface-hover)]" onclick={() => void download()} disabled={recoveryBusy}>Download SQLite</button>
+                <button type="button" class="inline-flex items-center justify-center rounded-xl border border-red-200 bg-red-50 px-4 py-2.5 text-sm font-semibold text-red-700 hover:bg-red-100" onclick={() => void reset()} disabled={recoveryBusy}>{confirmReset ? "Confirm reset" : "Reset from Ledger"}</button>
+            {/if}
+        </div>
+        {#if localStoreFailed}
+            <p class="mt-5 border-t border-[var(--stor-border)] pt-4 text-xs leading-5 text-[var(--stor-muted-text)]">
+                {recoverySummary.pending ?? "Unknown"} pending events · {recoverySummary.blocked ?? "Unknown"} blocked operations. Reset removes them from this device; remote events return through normal sync after reload.
+            </p>
+            {#if recoveryMessage}<p class="mt-3 text-xs font-medium text-stone-700">{recoveryMessage}</p>{/if}
+        {/if}
+    </section>
+</main>