@hearthlog/shell 0.0.0-stage → 0.1.0

package/src/components/data-table/EntityRefsCell.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    import type { ReferencedByResult } from "@hearthlog/runtime/event/reference-lookup.js";
+
+    let {
+        refs,
+        entityHref,
+    }: {
+        refs?: ReferencedByResult | null;
+        entityHref: (name: string) => string;
+    } = $props();
+</script>
+
+{#if refs && refs.totalCount > 0}
+    <div class="group/refs relative inline-block">
+        <span
+            class="cursor-help rounded-full bg-[var(--stor-accent-soft)] px-2.5 py-1 text-[10.5px] font-bold uppercase tracking-wide text-[var(--stor-accent-strong)]"
+        >
+            {refs.totalCount} ref{refs.totalCount !== 1 ? "s" : ""}
+        </span>
+        <div
+            class="absolute bottom-full left-0 z-20 mb-2 hidden group-hover/refs:block"
+        >
+            <div
+                class="stor-menu min-w-[180px] border border-[var(--stor-border)] p-3 text-xs"
+            >
+                <div class="mb-2 font-bold text-[var(--stor-ink)]">
+                    Referenced by:
+                </div>
+                {#each Object.entries(refs.byType) as [typeName, entities]}
+                    <div class="mb-1.5">
+                        <span class="font-semibold text-[var(--stor-accent-strong)]"
+                            >{typeName}</span
+                        >
+                        <ul class="mt-0.5 pl-2">
+                            {#each entities.slice(0, 5) as ref}
+                                <li class="text-[var(--stor-muted-text)]">
+                                    <a
+                                        href={entityHref(ref.entityType)}
+                                        class="transition hover:text-[var(--stor-ink)] hover:underline"
+                                    >
+                                        {ref.entityLabel}
+                                    </a>
+                                </li>
+                            {/each}
+                            {#if entities.length > 5}
+                                <li class="italic text-[var(--stor-muted-text)]">
+                                    +{entities.length - 5} more
+                                </li>
+                            {/if}
+                        </ul>
+                    </div>
+                {/each}
+            </div>
+        </div>
+    </div>
+{:else}
+    <span class="text-xs text-[var(--stor-muted-text)]">—</span>
+{/if}

package/src/components/data-table/EntityValue.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import type { DynamicFieldDefinition } from "@hearthlog/runtime/event/meta-entity-types.js";
+
+    let {
+        value,
+        field,
+        referenceLabel = null,
+    }: {
+        value: unknown;
+        field: DynamicFieldDefinition;
+        referenceLabel?: string | null;
+    } = $props();
+
+    const text = $derived.by(() => {
+        if (value === null || value === undefined) return "-";
+        if (field.type === "boolean") return value ? "✓" : "✗";
+        if (field.type === "datetime" && value) {
+            try {
+                return new Date(value as string).toLocaleString();
+            } catch {
+                return String(value);
+            }
+        }
+        if (field.type === "reference" && referenceLabel) return referenceLabel;
+        return String(value);
+    });
+    const truthy = $derived(Boolean(value));
+</script>
+
+{#if field.type === "boolean"}
+    <span
+        class="rounded-full px-2 py-0.5 text-[10.5px] font-bold uppercase {truthy
+            ? 'bg-[var(--stor-positive-soft)] text-[var(--stor-positive)]'
+            : 'bg-[var(--stor-surface-muted)] text-[var(--stor-muted-text)]'}"
+    >
+        {text}
+    </span>
+{:else if field.type === "number"}
+    <span class="font-mono font-medium text-[var(--stor-ink)]">{text}</span>
+{:else}
+    <span class="whitespace-pre-wrap break-words">{text}</span>
+{/if}

package/src/components/data-table/entity-columns.ts

@@ -0,0 +1,87 @@
+import type { DynamicFieldDefinition } from "@hearthlog/runtime/event/meta-entity-types.js";
+import type { ReferencedByResult } from "@hearthlog/runtime/event/reference-lookup.js";
+import { renderComponent } from "@tanstack/svelte-table";
+import DataTableHeader from "@hearthlog/ui/components/data-table/DataTableHeader.svelte";
+import EntityActionsCell from "./EntityActionsCell.svelte";
+import EntityRefsCell from "./EntityRefsCell.svelte";
+import EntityValue from "./EntityValue.svelte";
+import { createAppColumnHelper } from "@hearthlog/ui/components/data-table/table.js";
+import type { DataTableColumn } from "@hearthlog/ui/components/data-table/types.js";
+
+export type DataTableEntityColumn = DataTableColumn;
+
+export interface EntityTableCallbacks {
+    getReferencedBy: (id: string) => ReferencedByResult | null;
+    getReferenceLabel: (fieldName: string, value: unknown) => string | null;
+    entityHref: (name: string) => string;
+    onEdit: (row: Record<string, unknown>) => void;
+    onDelete: (id: string) => void;
+}
+
+export function describeEntityField(field: DynamicFieldDefinition): string {
+    const parts: string[] = [field.type];
+    if (field.required) parts.push("required");
+    if (field.referenceTo) parts.push(`→ ${field.referenceTo}`);
+    else if (field.enum?.length) parts.push(`${field.enum.length} options`);
+    return parts.join(" · ");
+}
+
+const columnHelper = createAppColumnHelper<Record<string, unknown>>();
+
+export function toEntityTableColumns(
+    fields: DynamicFieldDefinition[],
+    callbacks: EntityTableCallbacks,
+): DataTableColumn[] {
+    const dataColumns = fields.map((field) =>
+        columnHelper.accessor((row) => row[field.name], {
+            id: field.name,
+            enableSorting: true,
+            header: (headerContext) =>
+                renderComponent(DataTableHeader, {
+                    name: field.name,
+                    subtitle: describeEntityField(field),
+                    context: headerContext,
+                }),
+            cell: (info) =>
+                renderComponent(EntityValue, {
+                    value: info.getValue(),
+                    field,
+                    referenceLabel: callbacks.getReferenceLabel(
+                        field.name,
+                        info.getValue(),
+                    ),
+                }),
+        }),
+    );
+    const refsColumn = columnHelper.display({
+        id: "__refs",
+        enableSorting: false,
+        header: () =>
+            renderComponent(DataTableHeader, {
+                name: "References",
+            }),
+        cell: (info) =>
+            renderComponent(EntityRefsCell, {
+                refs: callbacks.getReferencedBy(
+                    String(info.row.original.id),
+                ),
+                entityHref: callbacks.entityHref,
+            }),
+    });
+    const actionsColumn = columnHelper.display({
+        id: "__actions",
+        enableSorting: false,
+        header: () =>
+            renderComponent(DataTableHeader, {
+                name: "Actions",
+                align: "right",
+            }),
+        cell: (info) =>
+            renderComponent(EntityActionsCell, {
+                onEdit: () => callbacks.onEdit(info.row.original),
+                onDelete: () =>
+                    callbacks.onDelete(String(info.row.original.id)),
+            }),
+    });
+    return columnHelper.columns([...dataColumns, refsColumn, actionsColumn]);
+}

package/src/components/data-table/sqlite-columns.ts

@@ -0,0 +1,42 @@
+import type { RawSqliteColumn } from "@hearthlog/runtime/db/raw-browser.js";
+import { presentRawSqliteValue } from "@hearthlog/runtime/db/raw-browser.js";
+import { renderComponent } from "@tanstack/svelte-table";
+import DataTableHeader from "@hearthlog/ui/components/data-table/DataTableHeader.svelte";
+import DataTableValue from "./DataTableValue.svelte";
+import { createAppColumnHelper } from "@hearthlog/ui/components/data-table/table.js";
+import type { DataTableColumn } from "@hearthlog/ui/components/data-table/types.js";
+
+export function describeSqliteColumn(column: RawSqliteColumn): string {
+    const parts = [column.dataType];
+    if (column.primaryKeyPosition > 0) {
+        parts.push(`PK ${column.primaryKeyPosition}`);
+    } else if (column.notNull) {
+        parts.push("NOT NULL");
+    }
+    return parts.join(" · ");
+}
+
+const columnHelper = createAppColumnHelper<Record<string, unknown>>();
+
+export function toSqliteTableColumns(
+    columns: RawSqliteColumn[],
+): DataTableColumn[] {
+    return columnHelper.columns(
+        columns.map((column) =>
+            columnHelper.accessor((row) => row[column.name], {
+                id: column.name,
+                enableSorting: true,
+                header: (headerContext) =>
+                    renderComponent(DataTableHeader, {
+                        name: column.name,
+                        subtitle: describeSqliteColumn(column),
+                        context: headerContext,
+                    }),
+                cell: (info) =>
+                    renderComponent(DataTableValue, {
+                        presented: presentRawSqliteValue(info.getValue()),
+                    }),
+            }),
+        ),
+    );
+}

package/src/components/entities/CalendarSourceFields.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+    import Checkbox from "@hearthlog/ui/components/ui/Checkbox.svelte";
+    import Field from "@hearthlog/ui/components/ui/Field.svelte";
+    import Input from "@hearthlog/ui/components/ui/Input.svelte";
+    import Select from "@hearthlog/ui/components/ui/Select.svelte";
+    import type { DynamicFieldDefinition } from "@hearthlog/runtime/event/meta-entity-types.js";
+    import {
+        calendarDraftError,
+        type CalendarSourceDraft,
+    } from "@hearthlog/runtime/calendar/draft.js";
+
+    let {
+        fields,
+        draft = $bindable(),
+        defaultLabel = "",
+    }: {
+        fields: readonly DynamicFieldDefinition[];
+        draft: CalendarSourceDraft;
+        defaultLabel?: string;
+    } = $props();
+
+    const dateOptions = $derived.by(() => {
+        const options = fields
+            .filter((field) => field.type === "datetime")
+            .map((field) => ({ value: field.name, label: field.name }));
+        if (
+            draft.dateField &&
+            !options.some((option) => option.value === draft.dateField)
+        ) {
+            options.push({ value: draft.dateField, label: draft.dateField });
+        }
+        return options;
+    });
+
+    const optionalDateOptions = $derived([
+        { value: "", label: "None" },
+        ...dateOptions,
+    ]);
+
+    const textOptions = $derived([
+        { value: "", label: "None" },
+        ...fields
+            .filter((field) => field.type === "string")
+            .map((field) => ({ value: field.name, label: field.name })),
+    ]);
+
+    const error = $derived(draft.enabled ? calendarDraftError(draft, fields) : null);
+
+    function setEnabled(enabled: boolean): void {
+        draft.enabled = enabled;
+        if (enabled && !draft.label.trim()) {
+            draft.label = defaultLabel.trim() || "Event";
+        }
+    }
+</script>
+
+<div class="space-y-4 rounded-xl bg-[var(--stor-surface-muted)] p-4">
+    <div class="flex items-start justify-between gap-3">
+        <div>
+            <h3 class="text-base font-semibold text-[var(--stor-ink)]">Calendar</h3>
+            <p class="mt-0.5 text-xs text-[var(--stor-muted-text)]">
+                Show records from this entity on the Calendar page.
+            </p>
+        </div>
+        <label class="flex items-center gap-2 whitespace-nowrap text-sm text-[var(--stor-ink)]">
+            <Checkbox
+                checked={draft.enabled}
+                onCheckedChange={(checked) => setEnabled(Boolean(checked))}
+                aria-label="Show on calendar"
+            />
+            On calendar
+        </label>
+    </div>
+
+    {#if draft.enabled}
+        {#if dateOptions.length === 0}
+            <p class="text-xs text-[var(--stor-muted-text)]">
+                Add a datetime field first, then choose it as the calendar date.
+            </p>
+        {:else}
+            <div class="grid gap-3 sm:grid-cols-2">
+                <Field
+                    label="Date field"
+                    htmlFor="calendar-draft-date"
+                    required
+                >
+                    <Select
+                        id="calendar-draft-date"
+                        value={draft.dateField}
+                        options={dateOptions}
+                        placeholder="Choose a date field"
+                        onValueChange={(value) => (draft.dateField = value)}
+                    />
+                </Field>
+                <Field
+                    label="Label"
+                    htmlFor="calendar-draft-label"
+                    hint="Shown in the agenda and calendar feeds"
+                    required
+                >
+                    <Input
+                        id="calendar-draft-label"
+                        bind:value={draft.label}
+                        placeholder="e.g. Task due"
+                    />
+                </Field>
+                <Field
+                    label="End date"
+                    htmlFor="calendar-draft-end"
+                    hint="For multi-day records"
+                >
+                    <Select
+                        id="calendar-draft-end"
+                        value={draft.endDateField}
+                        options={optionalDateOptions}
+                        onValueChange={(value) => (draft.endDateField = value)}
+                    />
+                </Field>
+                <Field
+                    label="Time field"
+                    htmlFor="calendar-draft-time"
+                    hint="Optional HH:mm column"
+                >
+                    <Select
+                        id="calendar-draft-time"
+                        value={draft.timeField}
+                        options={textOptions}
+                        onValueChange={(value) => (draft.timeField = value)}
+                    />
+                </Field>
+                <Field
+                    label="Title field"
+                    htmlFor="calendar-draft-title"
+                    hint="Defaults to the record name"
+                >
+                    <Select
+                        id="calendar-draft-title"
+                        value={draft.titleField}
+                        options={textOptions}
+                        onValueChange={(value) => (draft.titleField = value)}
+                    />
+                </Field>
+            </div>
+            {#if error}
+                <p class="text-xs text-[var(--stor-negative)]" role="alert">{error}</p>
+            {/if}
+        {/if}
+    {/if}
+</div>

package/src/components/history/ChangeRecord.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { HistoryRecord } from '@hearthlog/runtime/history/contracts.js';
+    import { displayHistoryValue } from '@hearthlog/runtime/history/change-display.js';
+
+    let { change }: { change: HistoryRecord } = $props();
+    const verb = $derived(change.kind === 'saved' ? 'Saved values' : change.kind === 'added' ? 'Added' : change.kind === 'removed' ? 'Removed' : 'Changed');
+</script>
+
+<section class="py-2" aria-label={change.label}>
+    <div class="mb-3 flex flex-wrap items-baseline justify-between gap-2">
+        <h4 class="break-words text-sm font-semibold text-[var(--stor-ink)]">{change.label}</h4>
+        <span class="text-xs text-[var(--stor-muted-text)]">{verb}</span>
+    </div>
+    <dl class="space-y-3">
+        {#each change.fields as field (field.key)}
+            <div class="grid gap-1">
+                <dt class="text-xs font-medium capitalize text-[var(--stor-muted-text)]">{field.label}</dt>
+                <dd class="grid min-w-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-start gap-3 text-sm text-[var(--stor-ink)]">
+                    {#if change.kind === 'saved'}
+                        <span class="col-span-3 whitespace-pre-wrap break-words">{displayHistoryValue(field.after)}</span>
+                    {:else}
+                        <span class="whitespace-pre-wrap break-words"><span class="sr-only">Before: </span>{displayHistoryValue(field.before)}</span>
+                        <span aria-hidden="true" class="text-[var(--stor-muted-text)]">→</span>
+                        <span class="whitespace-pre-wrap break-words font-semibold"><span class="sr-only">After: </span>{displayHistoryValue(field.after)}</span>
+                    {/if}
+                </dd>
+            </div>
+        {/each}
+    </dl>
+</section>

package/src/components/history/ForkComposer.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+    import { tick, untrack } from 'svelte';
+    import Button from '@hearthlog/ui/components/ui/Button.svelte';
+    import Input from '@hearthlog/ui/components/ui/Input.svelte';
+    import { queryDatabase } from '@hearthlog/runtime/db/read-repositories.js';
+    import type { ForkReview, HistoryEntry } from '@hearthlog/runtime/history/contracts.js';
+    import { events } from '@hearthlog/runtime/store/events.svelte.js';
+    import { syncStatus } from '@hearthlog/runtime/store/sync.svelte.js';
+    import { notify } from '@hearthlog/ui/state/notifications.svelte.js';
+    import { getLedgerClient, type LogSummary } from '@hearthlog/runtime/ledger/index.js';
+    import { forkAndActivateLog } from '@hearthlog/runtime/log-management.js';
+    import { suggestForkName } from '@hearthlog/runtime/history/lineage.js';
+    import { formatNumber } from '@hearthlog/ui/utils/number-format.js';
+
+    let {
+        step,
+        actionId,
+        currentLogId,
+        currentLogName,
+        logs,
+        onCancel,
+        onSwitch,
+        onDone,
+        onBusyChange,
+    }: {
+        /** `fork` starts after the opened action; `copy` after the latest one. */
+        step: 'fork' | 'copy';
+        actionId: string | null;
+        currentLogId: string | null;
+        currentLogName: string | null;
+        logs: LogSummary[];
+        onCancel: () => void;
+        onSwitch: (logId: string) => Promise<void>;
+        onDone: () => void;
+        onBusyChange: (busy: boolean) => void;
+    } = $props();
+
+    let entry = $state<HistoryEntry | null>(null);
+    let loading = $state(true);
+    let name = $state('');
+    let namedFor = '';
+    let review = $state<ForkReview | null>(null);
+    let sourceHead = $state<number | null>(null);
+    let reviewLoading = $state(false);
+    let reviewRetry = $state(0);
+    let busy = $state(false);
+    let progress = $state('');
+    let error = $state('');
+    let request: { key: string; id: string } | null = null;
+
+    const unavailable = $derived(!syncStatus.isOnline ? 'Connect to create a log. You can still read history offline.'
+        : syncStatus.pendingUploads > 0 ? 'Sync your changes before creating a log.' : '');
+
+    // The action the new log ends with.
+    $effect(() => {
+        const selected = step === 'copy' ? null : actionId;
+        const scope = currentLogId;
+        void events.updatedAt;
+        if (!scope || untrack(() => busy)) return;
+        let cancelled = false;
+        loading = true;
+        void queryDatabase(r => selected ? r.history.get({ id: selected }) : r.history.latest())
+            .then(found => { if (!cancelled) entry = found; })
+            .catch(cause => { if (!cancelled) error = message(cause); })
+            .finally(() => { if (!cancelled) loading = false; });
+        return () => { cancelled = true; };
+    });
+
+    $effect(() => {
+        const target = entry;
+        if (!target || namedFor === `${step}:${target.id}`) return;
+        namedFor = `${step}:${target.id}`;
+        name = suggestForkName(untrack(() => logs), currentLogId, target.timestamp);
+        // Selected, so typing replaces the suggestion.
+        void tick().then(() => (document.getElementById('fork-log-name') as HTMLInputElement | null)?.select());
+    });
+
+    $effect(() => {
+        const target = entry?.status === 'ready' ? entry.version : null;
+        const scope = currentLogId;
+        const online = syncStatus.isOnline;
+        void reviewRetry;
+        void events.updatedAt;
+        if (!scope || target === null || !online || untrack(() => busy)) return;
+        let cancelled = false;
+        reviewLoading = true;
+        review = null;
+        sourceHead = null;
+        error = '';
+        void Promise.all([
+            queryDatabase(r => r.history.review(target)),
+            getLedgerClient().getLog(scope),
+        ]).then(([impact, log]) => {
+            if (cancelled) return;
+            review = impact;
+            if (impact.localHead !== log.headVersion) error = 'This log has newer changes to download. Sync, then check again.';
+            else sourceHead = log.headVersion;
+        }).catch(cause => { if (!cancelled) error = message(cause); })
+            .finally(() => { if (!cancelled) reviewLoading = false; });
+        return () => { cancelled = true; };
+    });
+
+    function message(cause: unknown): string {
+        return cause instanceof Error ? cause.message : 'Could not check this starting point. Try again.';
+    }
+
+    function plural(count: number, one: string, many: string): string {
+        return `${formatNumber(count)} ${count === 1 ? one : many}`;
+    }
+
+    async function create(): Promise<void> {
+        const target = entry;
+        if (!target || target.version === null || sourceHead === null || !currentLogId || unavailable || busy) return;
+        const source = currentLogId;
+        const key = JSON.stringify([source, target.version, sourceHead, name.trim()]);
+        if (request?.key !== key) request = { key, id: crypto.randomUUID() };
+        busy = true;
+        onBusyChange(true);
+        error = '';
+        try {
+            const fork = await forkAndActivateLog({ name, targetVersion: target.version, expectedSourceHeadVersion: sourceHead,
+                requestId: request.id, onProgress: value => { progress = value; } });
+            onDone();
+            notify.success(`Opened ${fork.name}`, { label: 'Open original log', run: async () => {
+                try { await onSwitch(source); } catch (cause) { notify.error(message(cause)); }
+            } });
+        } catch (cause) {
+            error = message(cause);
+        } finally {
+            busy = false;
+            progress = '';
+            onBusyChange(false);
+        }
+    }
+</script>
+
+<form class="w-full space-y-2.5" onsubmit={(event) => { event.preventDefault(); void create(); }}>
+    {#if loading && !entry}
+        <p role="status" class="text-sm text-[var(--stor-muted-text)] motion-safe:animate-pulse">Finding the starting point…</p>
+    {:else if !entry}
+        <p class="text-sm text-[var(--stor-muted-text)]">{step === 'copy' ? 'Nothing to copy yet. Save something in this log first.' : 'This action is not in this log any more.'}</p>
+        <div class="flex justify-end"><Button variant="ghost" onclick={onCancel}>Cancel</Button></div>
+    {:else}
+        <fieldset disabled={busy} class="space-y-2.5">
+            <div>
+                <label for="fork-log-name" class="mb-1.5 block text-sm font-semibold text-[var(--stor-ink)]">New log name</label>
+                <Input id="fork-log-name" bind:value={name} placeholder="Name this log" autocomplete="off" />
+            </div>
+            <p class="text-xs text-[var(--stor-muted-text)]" role="status">
+                {#if entry.status !== 'ready'}
+                    {entry.reason ?? 'This action is not synced yet.'}
+                {:else if reviewLoading || !review}
+                    Checking this starting point…
+                {:else}
+                    <b class="font-semibold text-[var(--stor-ink)]">Keeps {plural(review.keptActions, 'action', 'actions')}.</b>
+                    {review.laterActions === 0 ? '' : `Leaves out ${plural(review.laterActions, 'newer one', 'newer ones')}.`}
+                    {currentLogName ?? 'This log'} stays as it is.
+                {/if}
+            </p>
+        </fieldset>
+        {#if unavailable}<p class="text-xs text-[var(--stor-muted-text)]">{unavailable}</p>{/if}
+        {#if progress}<p role="status" class="text-sm text-[var(--stor-muted-text)]">{progress}</p>{/if}
+        {#if error}
+            <p role="alert" class="text-sm text-[var(--stor-negative)]">{error}</p>
+        {/if}
+        <div class="flex flex-wrap justify-end gap-2">
+            {#if error && !busy}<Button variant="secondary" onclick={() => reviewRetry++}>Check again</Button>{/if}
+            <Button variant="ghost" disabled={busy} onclick={onCancel}>Cancel</Button>
+            <Button type="submit" disabled={busy || reviewLoading || sourceHead === null || Boolean(unavailable) || !name.trim() || entry.status !== 'ready'}>
+                {busy ? 'Creating and switching…' : 'Create and switch'}
+            </Button>
+        </div>
+    {/if}
+</form>