From 9e7c298c47c7f72338f3656fce39a23482d8eabc Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 10:00:53 +0200
Subject: [PATCH 01/28] wip(markers): initial frontend implementation of marker
 editor

---
 .../app/components/markers/MarkersEditor.vue  | 194 ++++++++++
 .../components/markers/MarkersListItem.vue    |  53 +++
 .../components/markers/MarkersTimeline.vue    | 115 ++++++
 frontend/app/composables/useMarkers.ts        | 111 ++++++
 frontend/app/composables/useTools.ts          | 157 ++++----
 frontend/app/pages/markers/[id].vue           | 342 ++++++++++++++++++
 frontend/app/pages/markers/index.vue          |  56 +++
 frontend/app/utils/markers.ts                 |  60 +++
 frontend/locales/en.json                      |  55 +++
 frontend/locales/nb.json                      |  55 +++
 10 files changed, 1128 insertions(+), 70 deletions(-)
 create mode 100644 frontend/app/components/markers/MarkersEditor.vue
 create mode 100644 frontend/app/components/markers/MarkersListItem.vue
 create mode 100644 frontend/app/components/markers/MarkersTimeline.vue
 create mode 100644 frontend/app/composables/useMarkers.ts
 create mode 100644 frontend/app/pages/markers/[id].vue
 create mode 100644 frontend/app/pages/markers/index.vue
 create mode 100644 frontend/app/utils/markers.ts

diff --git a/frontend/app/components/markers/MarkersEditor.vue b/frontend/app/components/markers/MarkersEditor.vue
new file mode 100644
index 0000000..e9afc54
--- /dev/null
+++ b/frontend/app/components/markers/MarkersEditor.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { MARKER_TYPES, markerTypeMeta } from "~/utils/markers";
+import type { Marker } from "~/utils/markers";
+
+const props = defineProps<{
+    marker: Marker | undefined;
+    currentTime: number;
+}>();
+
+const emit = defineEmits<{
+    update: [patch: Partial<Omit<Marker, "id">>];
+    remove: [];
+    seek: [seconds: number];
+}>();
+
+const { t } = useI18n();
+
+const typeItems = computed(() =>
+    MARKER_TYPES.map((m) => ({
+        label: t(`markers.types.${m.value}`),
+        value: m.value,
+    })),
+);
+
+// Two-way bridges that emit a patch on every change.
+const type = computed({
+    get: () => props.marker?.type ?? "name-super",
+    set: (v) => emit("update", { type: v as Marker["type"] }),
+});
+const label = computed({
+    get: () => props.marker?.label ?? "",
+    set: (v) => emit("update", { label: v }),
+});
+const note = computed({
+    get: () => props.marker?.note ?? "",
+    set: (v) => emit("update", { note: v }),
+});
+
+// In/out are edited as formatted strings, committed (parsed) on change so a
+// half-typed value never corrupts the marker.
+const startStr = ref("");
+const endStr = ref("");
+watch(
+    () => props.marker,
+    (m) => {
+        if (!m) return;
+        startStr.value = formatTime(m.start);
+        endStr.value = formatTime(m.end);
+    },
+    { immediate: true, deep: true },
+);
+
+function commit(which: "start" | "end") {
+    const raw = which === "start" ? startStr.value : endStr.value;
+    try {
+        const seconds = secondsFromFormattedTime(raw);
+        if (!Number.isFinite(seconds) || seconds < 0)
+            throw new Error("bad time");
+        emit("update", { [which]: seconds });
+    } catch {
+        // Revert the field to the last good value.
+        if (!props.marker) return;
+        startStr.value = formatTime(props.marker.start);
+        endStr.value = formatTime(props.marker.end);
+    }
+}
+
+function setToCurrent(which: "start" | "end") {
+    emit("update", { [which]: props.currentTime });
+}
+
+const duration = computed(() => {
+    if (!props.marker) return 0;
+    return Math.max(0, props.marker.end - props.marker.start);
+});
+</script>
+
+<template>
+    <div
+        v-if="marker"
+        class="border-border-1 bg-surface-default flex flex-col gap-4 rounded-xl border p-4"
+    >
+        <div class="flex items-center justify-between">
+            <h2 class="text-title-2 text-text-default flex items-center gap-2">
+                <Icon :name="markerTypeMeta(marker.type).icon" class="size-5" />
+                {{ t("markers.editor.title") }}
+            </h2>
+            <DesignBadge
+                :variant="marker.source === 'imported' ? 'info' : 'neutral'"
+            >
+                {{ t(`markers.source.${marker.source}`) }}
+            </DesignBadge>
+        </div>
+
+        <div>
+            <span class="text-body-3 text-text-muted mb-1 block">
+                {{ t("markers.editor.type") }}
+            </span>
+            <DesignSelect v-model="type" :items="typeItems" />
+        </div>
+
+        <DesignInput
+            v-model="label"
+            :label="t('markers.editor.label')"
+            :placeholder="t('markers.editor.labelPlaceholder')"
+        />
+
+        <DesignTextarea
+            v-model="note"
+            :label="t('markers.editor.note')"
+            :rows="2"
+            :placeholder="t('markers.editor.notePlaceholder')"
+        />
+
+        <div class="grid grid-cols-2 gap-3">
+            <div>
+                <span class="text-body-3 text-text-muted mb-1 block">
+                    {{ t("markers.editor.in") }}
+                </span>
+                <DesignInput
+                    v-model="startStr"
+                    class="tabular-nums"
+                    @change="commit('start')"
+                />
+                <div class="mt-1.5 flex gap-1">
+                    <DesignButton
+                        size="small"
+                        variant="tertiary"
+                        icon="tabler:player-track-prev"
+                        @click="setToCurrent('start')"
+                    >
+                        {{ t("markers.editor.setToPlayhead") }}
+                    </DesignButton>
+                    <DesignButton
+                        size="small"
+                        variant="tertiary"
+                        icon="tabler:player-play"
+                        :aria-label="t('markers.editor.seekTo')"
+                        @click="emit('seek', marker.start)"
+                    />
+                </div>
+            </div>
+            <div>
+                <span class="text-body-3 text-text-muted mb-1 block">
+                    {{ t("markers.editor.out") }}
+                </span>
+                <DesignInput
+                    v-model="endStr"
+                    class="tabular-nums"
+                    @change="commit('end')"
+                />
+                <div class="mt-1.5 flex gap-1">
+                    <DesignButton
+                        size="small"
+                        variant="tertiary"
+                        icon="tabler:player-track-next"
+                        @click="setToCurrent('end')"
+                    >
+                        {{ t("markers.editor.setToPlayhead") }}
+                    </DesignButton>
+                    <DesignButton
+                        size="small"
+                        variant="tertiary"
+                        icon="tabler:player-play"
+                        :aria-label="t('markers.editor.seekTo')"
+                        @click="emit('seek', marker.end)"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <p class="text-text-hint text-caption-1">
+            {{ t("markers.editor.duration") }}: {{ duration.toFixed(2) }}s
+        </p>
+
+        <DesignButton
+            variant="secondary"
+            intent="danger"
+            icon="tabler:trash"
+            class="mt-auto"
+            @click="emit('remove')"
+        >
+            {{ t("markers.editor.remove") }}
+        </DesignButton>
+    </div>
+
+    <div
+        v-else
+        class="border-border-1 text-text-hint flex flex-col items-center justify-center gap-2 rounded-xl border border-dashed p-8 text-center text-sm"
+    >
+        <Icon name="tabler:click" class="size-6" />
+        {{ t("markers.editor.noSelection") }}
+    </div>
+</template>
diff --git a/frontend/app/components/markers/MarkersListItem.vue b/frontend/app/components/markers/MarkersListItem.vue
new file mode 100644
index 0000000..cef6021
--- /dev/null
+++ b/frontend/app/components/markers/MarkersListItem.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { markerTypeMeta } from "~/utils/markers";
+import type { Marker } from "~/utils/markers";
+
+const props = defineProps<{
+    marker: Marker;
+    selected: boolean;
+    currentTime: number;
+}>();
+
+defineEmits<{ select: [] }>();
+
+const { t } = useI18n();
+
+// Highlight markers whose in/out range contains the playhead.
+const active = computed(
+    () =>
+        props.currentTime >= props.marker.start &&
+        props.currentTime <= props.marker.end,
+);
+</script>
+
+<template>
+    <button
+        type="button"
+        class="ds-focus-ring flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors"
+        :class="selected ? 'bg-surface-indent' : 'hover:bg-surface-indent/60'"
+        @click="$emit('select')"
+    >
+        <span
+            class="size-2.5 shrink-0 rounded-full"
+            :class="markerTypeMeta(marker.type).color"
+        />
+        <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2">
+                <span class="text-body-3 text-text-default truncate">
+                    {{ marker.label || t(`markers.types.${marker.type}`) }}
+                </span>
+                <Icon
+                    v-if="active"
+                    name="tabler:volume"
+                    class="text-primary-default size-3.5 shrink-0"
+                />
+            </div>
+            <span class="text-text-hint text-caption-1 tabular-nums">
+                {{ formatTime(marker.start) }} – {{ formatTime(marker.end) }}
+            </span>
+        </div>
+        <DesignBadge v-if="marker.source === 'imported'" variant="info">
+            {{ t("markers.source.imported") }}
+        </DesignBadge>
+    </button>
+</template>
diff --git a/frontend/app/components/markers/MarkersTimeline.vue b/frontend/app/components/markers/MarkersTimeline.vue
new file mode 100644
index 0000000..0dd5b9b
--- /dev/null
+++ b/frontend/app/components/markers/MarkersTimeline.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { MARKER_TYPES, markerTypeMeta } from "~/utils/markers";
+import type { Marker, MarkerType } from "~/utils/markers";
+
+const props = defineProps<{
+    markers: Marker[];
+    duration: number;
+    current: number;
+    selectedId?: string;
+}>();
+
+const emit = defineEmits<{
+    select: [id: string];
+    seek: [seconds: number];
+}>();
+
+const { t } = useI18n();
+
+// One lane per marker type that actually has markers, in the canonical order.
+const lanes = computed(() =>
+    MARKER_TYPES.filter((meta) =>
+        props.markers.some((m) => m.type === meta.value),
+    ).map((meta) => ({
+        ...meta,
+        markers: props.markers.filter((m) => m.type === meta.value),
+    })),
+);
+
+function pct(seconds: number) {
+    if (!props.duration) return 0;
+    return Math.min(100, Math.max(0, (seconds / props.duration) * 100));
+}
+
+function blockStyle(marker: Marker) {
+    const left = pct(marker.start);
+    const width = Math.max(pct(marker.end) - left, 0.6);
+    return { left: `${left}%`, width: `${width}%` };
+}
+
+const playheadStyle = computed(() => ({ left: `${pct(props.current)}%` }));
+
+// Click anywhere on a lane background to scrub there.
+function onLaneClick(event: MouseEvent) {
+    if (!props.duration) return;
+    const el = event.currentTarget as HTMLElement;
+    const rect = el.getBoundingClientRect();
+    const ratio = (event.clientX - rect.left) / rect.width;
+    emit("seek", Math.min(props.duration, Math.max(0, ratio * props.duration)));
+}
+
+function laneLabel(type: MarkerType) {
+    return t(`markers.types.${type}`);
+}
+</script>
+
+<template>
+    <div class="border-border-1 bg-surface-default rounded-xl border p-3">
+        <div
+            v-if="lanes.length === 0"
+            class="text-text-hint py-6 text-center text-sm"
+        >
+            {{ t("markers.timeline.empty") }}
+        </div>
+
+        <div v-else class="flex flex-col gap-2">
+            <div
+                v-for="lane in lanes"
+                :key="lane.value"
+                class="flex items-center gap-3"
+            >
+                <div
+                    class="text-text-muted flex w-32 shrink-0 items-center gap-1.5 text-sm"
+                >
+                    <Icon :name="lane.icon" class="size-4 shrink-0" />
+                    <span class="truncate">{{ laneLabel(lane.value) }}</span>
+                </div>
+                <div
+                    class="bg-surface-indent relative h-7 grow cursor-pointer overflow-hidden rounded-md"
+                    @click="onLaneClick"
+                >
+                    <!-- Per-lane playhead segment; stacked lanes read as one line. -->
+                    <div
+                        class="bg-text-default pointer-events-none absolute inset-y-0 z-20 w-px"
+                        :style="playheadStyle"
+                    />
+                    <DesignTooltip
+                        v-for="marker in lane.markers"
+                        :key="marker.id"
+                        :content="`${marker.label || laneLabel(marker.type)} · ${formatTime(marker.start)}–${formatTime(marker.end)}`"
+                    >
+                        <button
+                            type="button"
+                            class="ds-focus-ring absolute top-0.5 bottom-0.5 flex items-center overflow-hidden rounded px-1.5 text-left text-xs text-white/95 transition-[outline]"
+                            :class="[
+                                markerTypeMeta(marker.type).color,
+                                selectedId === marker.id
+                                    ? 'outline-text-default z-10 outline outline-2 outline-offset-1'
+                                    : 'opacity-80 hover:opacity-100',
+                            ]"
+                            :style="blockStyle(marker)"
+                            @click.stop="
+                                emit('select', marker.id);
+                                emit('seek', marker.start);
+                            "
+                        >
+                            <span class="truncate">{{
+                                marker.label || laneLabel(marker.type)
+                            }}</span>
+                        </button>
+                    </DesignTooltip>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/frontend/app/composables/useMarkers.ts b/frontend/app/composables/useMarkers.ts
new file mode 100644
index 0000000..1875008
--- /dev/null
+++ b/frontend/app/composables/useMarkers.ts
@@ -0,0 +1,111 @@
+import { useLocalStorage } from "@vueuse/core";
+import type { Marker, MarkerType } from "~/utils/markers";
+
+// Frontend-only data layer for the markers tool.
+//
+// Working state is auto-persisted to localStorage (keyed by VX-id), mirroring
+// the transcription editor's local-autosave behaviour. `save()` currently just
+// simulates the round-trip to the backend.
+//
+// TODO(backend): replace the seed/load/save internals with the real RPCs, e.g.
+//   load  -> api.getMarkers({ VXID })
+//   save  -> api.submitMarkers({ VXID, markers })
+// The public surface of this composable should not need to change.
+
+// Demo "imported" markers, standing in for the third-party timing feed. Times
+// are kept within the first few minutes so they line up with most previews.
+function seedMarkers(): Marker[] {
+    return [
+        {
+            id: generateRandomId(),
+            type: "name-super",
+            label: "Kåre Johan Hamre",
+            note: "Speaker",
+            start: 12.5,
+            end: 18.0,
+            source: "imported",
+        },
+        {
+            id: generateRandomId(),
+            type: "bible-verse",
+            label: "John 3:16",
+            start: 45.0,
+            end: 52.5,
+            source: "imported",
+        },
+        {
+            id: generateRandomId(),
+            type: "name-super",
+            label: "Bente Lothe",
+            start: 95.2,
+            end: 101.0,
+            source: "imported",
+        },
+        {
+            id: generateRandomId(),
+            type: "song",
+            label: "How Great Thou Art",
+            start: 130.0,
+            end: 240.0,
+            source: "imported",
+        },
+    ];
+}
+
+export function useMarkers(vxId: MaybeRefOrGetter<string>) {
+    // Plain string key, evaluated once. Each asset is opened in a fresh mount
+    // (via the index page), so we don't need a reactive key here.
+    const storageKey = `markers-${toValue(vxId)}`;
+
+    // `useLocalStorage` seeds with the imported demo data on first visit, then
+    // reads the working copy on subsequent loads. Its internal deep watcher
+    // persists every mutation automatically.
+    const markers = useLocalStorage<Marker[]>(storageKey, seedMarkers());
+
+    function add(
+        partial: Partial<Marker> & Pick<Marker, "start" | "end">,
+    ): Marker {
+        const marker: Marker = {
+            id: generateRandomId(),
+            type: "name-super",
+            label: "",
+            source: "manual",
+            ...partial,
+        };
+        markers.value = [...markers.value, marker];
+        return marker;
+    }
+
+    function update(id: string, patch: Partial<Omit<Marker, "id">>) {
+        markers.value = markers.value.map((m) =>
+            m.id === id ? { ...m, ...patch } : m,
+        );
+    }
+
+    function remove(id: string) {
+        markers.value = markers.value.filter((m) => m.id !== id);
+    }
+
+    // Restore a previously removed marker (used by the undo toast).
+    function restore(marker: Marker) {
+        if (markers.value.some((m) => m.id === marker.id)) return;
+        markers.value = [...markers.value, marker];
+    }
+
+    const saving = ref(false);
+    // Simulated submit-to-backend. Swap for `api.submitMarkers` later.
+    async function save() {
+        saving.value = true;
+        try {
+            await new Promise((resolve) => setTimeout(resolve, 400));
+        } finally {
+            saving.value = false;
+        }
+    }
+
+    function countByType(type: MarkerType) {
+        return markers.value.filter((m) => m.type === type).length;
+    }
+
+    return { markers, add, update, remove, restore, save, saving, countByType };
+}
diff --git a/frontend/app/composables/useTools.ts b/frontend/app/composables/useTools.ts
index b8de3f5..a7842a7 100644
--- a/frontend/app/composables/useTools.ts
+++ b/frontend/app/composables/useTools.ts
@@ -1,79 +1,96 @@
 interface Tool {
-	label: string;
-	icon: string;
-	description: string;
-	to: string;
-	enabled?: boolean;
+    label: string;
+    icon: string;
+    description: string;
+    to: string;
+    enabled?: boolean;
 }
 
 export function useTools() {
-	const { t } = useI18n();
-	const { me } = useMe();
-	const route = useRoute()
+    const { t } = useI18n();
+    const { me } = useMe();
+    const route = useRoute();
 
-	const tools = computed<Tool[]>(() => [
-		{
-			label: t("tools.bmmUpload.title"),
-			icon: "tabler:upload",
-			description: t("tools.bmmUpload.description"),
-			to: "/upload/bmm/",
-			enabled: me.value?.bmm && (me.value.bmm.podcasts.length > 0 || me.value.bmm.admin),
-		},
-		{
-			label: t("tools.transcription.title"),
-			icon: "tabler:edit",
-			description: t("tools.transcription.description"),
-			to: "/transcription/",
-			enabled: me.value?.transcription && (me.value.transcription.mediabanken || me.value.transcription.admin),
-		},
-		{
-			label: t("tools.export.title"),
-			icon: "tabler:file-export",
-			description: t("tools.export.description"),
-			to: "/export/",
-			enabled: me.value?.admin || (me.value?.export && (me.value.export.destinations.length > 0 || me.value.export.admin || me.value.export.timedMetadata)),
-		},
-		{
-			label: t("tools.vbExport.title"),
-			icon: "tabler:broadcast",
-			description: t("tools.vbExport.description"),
-			to: "/vb-export/",
-			// Shown when the user has access to any VB destination (or is on the page).
-			enabled:
-				me.value?.admin ||
-				(me.value?.vbExport && (me.value.vbExport.destinations.length > 0 || me.value.vbExport.admin)) ||
-				route.path.startsWith("/vb-export"),
-		},
-		{
-			label: 'Shorts generation',
-			icon: "tabler:device-mobile",
-			description: 'Generate shorts from existing videos',
-			to: "/shorts/",
-		},
-		{
-			label: t("tools.vault.title"),
-			icon: "tabler:building-warehouse",
-			description: t("tools.vault.description"),
-			to: "/vault/",
-			enabled: me.value?.admin || me.value?.vault?.enabled,
-		},
-		{
-			label: t("tools.admin.title"),
-			icon: "tabler:settings",
-			description: t("tools.admin.description"),
-			to: "/admin/",
-			enabled: me.value?.admin,
-		},
-	]);
+    const tools = computed<Tool[]>(() => [
+        {
+            label: t("tools.bmmUpload.title"),
+            icon: "tabler:upload",
+            description: t("tools.bmmUpload.description"),
+            to: "/upload/bmm/",
+            enabled:
+                me.value?.bmm &&
+                (me.value.bmm.podcasts.length > 0 || me.value.bmm.admin),
+        },
+        {
+            label: t("tools.transcription.title"),
+            icon: "tabler:edit",
+            description: t("tools.transcription.description"),
+            to: "/transcription/",
+            enabled:
+                me.value?.transcription &&
+                (me.value.transcription.mediabanken ||
+                    me.value.transcription.admin),
+        },
+        {
+            label: t("tools.export.title"),
+            icon: "tabler:file-export",
+            description: t("tools.export.description"),
+            to: "/export/",
+            enabled:
+                me.value?.admin ||
+                (me.value?.export &&
+                    (me.value.export.destinations.length > 0 ||
+                        me.value.export.admin ||
+                        me.value.export.timedMetadata)),
+        },
+        {
+            label: t("tools.vbExport.title"),
+            icon: "tabler:broadcast",
+            description: t("tools.vbExport.description"),
+            to: "/vb-export/",
+            // Shown when the user has access to any VB destination (or is on the page).
+            enabled:
+                me.value?.admin ||
+                (me.value?.vbExport &&
+                    (me.value.vbExport.destinations.length > 0 ||
+                        me.value.vbExport.admin)) ||
+                route.path.startsWith("/vb-export"),
+        },
+        {
+            label: "Shorts generation",
+            icon: "tabler:device-mobile",
+            description: "Generate shorts from existing videos",
+            to: "/shorts/",
+        },
+        {
+            label: t("tools.markers.title"),
+            icon: "tabler:bookmarks",
+            description: t("tools.markers.description"),
+            to: "/markers/",
+        },
+        {
+            label: t("tools.vault.title"),
+            icon: "tabler:building-warehouse",
+            description: t("tools.vault.description"),
+            to: "/vault/",
+            enabled: me.value?.admin || me.value?.vault?.enabled,
+        },
+        {
+            label: t("tools.admin.title"),
+            icon: "tabler:settings",
+            description: t("tools.admin.description"),
+            to: "/admin/",
+            enabled: me.value?.admin,
+        },
+    ]);
 
+    const enabledTools = computed(() =>
+        tools.value.filter((t) => t.enabled != false),
+    );
 
-	const enabledTools = computed(() =>
-		tools.value.filter((t) => t.enabled != false),
-	);
+    const currentTool = computed(() =>
+        tools.value.find((t) => route.path.startsWith(t.to)),
+    );
 
-	const currentTool = computed(() =>
-		tools.value.find((t) => route.path.startsWith(t.to)),
-	);
-
-	return { tools, enabledTools, currentTool };
+    return { tools, enabledTools, currentTool };
 }
diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
new file mode 100644
index 0000000..ac5062b
--- /dev/null
+++ b/frontend/app/pages/markers/[id].vue
@@ -0,0 +1,342 @@
+<script setup lang="ts">
+import { MARKER_TYPES, markerTypeMeta, sortMarkers } from "~/utils/markers";
+import type { Marker, MarkerType } from "~/utils/markers";
+
+const route = useRoute();
+const vxId = computed(() => String(route.params.id ?? ""));
+
+const { t } = useI18n();
+useHead({ title: () => `Markers · ${vxId.value}` });
+
+const analytics = useAnalytics();
+onMounted(() => {
+    analytics.page({
+        id: "markers_id",
+        title: "markers",
+        meta: { id: vxId.value },
+    });
+});
+
+const api = useAPI();
+const { markers, add, update, remove, restore, save, saving } =
+    useMarkers(vxId);
+
+// ---- Video preview (reuses the existing getPreview RPC, like shorts) --------
+const { data: videoUrl, status: videoStatus } = useAsyncData(
+    () => `markers-preview:${vxId.value}`,
+    () => api.getPreview({ VXID: vxId.value }).then((r) => r.url),
+);
+
+const videoElement = useTemplateRef("videoElement");
+const videoDuration = ref(0);
+const currentTime = ref(0);
+
+useEventListener(videoElement, "loadedmetadata", () => {
+    videoDuration.value = videoElement.value?.duration ?? 0;
+});
+useEventListener(videoElement, "timeupdate", () => {
+    currentTime.value = videoElement.value?.currentTime ?? 0;
+});
+
+// The timeline needs a span even before/without a loaded video: fall back to
+// the last marker's out-point (plus headroom) so blocks still render.
+const effectiveDuration = computed(() => {
+    if (videoDuration.value > 0) return videoDuration.value;
+    const lastEnd = markers.value.reduce((max, m) => Math.max(max, m.end), 0);
+    return Math.max(lastEnd + 60, 300);
+});
+
+function seek(seconds: number) {
+    if (!videoElement.value) return;
+    videoElement.value.currentTime = seconds;
+}
+
+// ---- Selection + filtering --------------------------------------------------
+const selectedId = ref<string>();
+const selectedMarker = computed(() =>
+    markers.value.find((m) => m.id === selectedId.value),
+);
+
+const activeTypes = ref<MarkerType[]>(MARKER_TYPES.map((m) => m.value));
+function toggleType(type: MarkerType) {
+    activeTypes.value = activeTypes.value.includes(type)
+        ? activeTypes.value.filter((v) => v !== type)
+        : [...activeTypes.value, type];
+}
+
+const visibleMarkers = computed(() =>
+    sortMarkers(markers.value).filter((m) =>
+        activeTypes.value.includes(m.type),
+    ),
+);
+
+// Markers whose range contains the playhead — shown as an on-video overlay.
+const activeMarkers = computed(() =>
+    sortMarkers(markers.value).filter(
+        (m) => currentTime.value >= m.start && currentTime.value <= m.end,
+    ),
+);
+
+// ---- Mutations --------------------------------------------------------------
+function addMarker() {
+    const start = currentTime.value;
+    const end = Math.min(start + 5, effectiveDuration.value);
+    const type = activeTypes.value[0] ?? "name-super";
+    const marker = add({ start, end, type });
+    selectedId.value = marker.id;
+}
+
+function onUpdate(patch: Partial<Omit<Marker, "id">>) {
+    if (!selectedId.value) return;
+    update(selectedId.value, patch);
+}
+
+const toaster = useDesignToaster();
+const lastRemoved = ref<Marker>();
+let undoTimer: ReturnType<typeof setTimeout> | undefined;
+
+function onRemove() {
+    const marker = selectedMarker.value;
+    if (!marker) return;
+    remove(marker.id);
+    selectedId.value = undefined;
+    lastRemoved.value = marker;
+    clearTimeout(undoTimer);
+    undoTimer = setTimeout(() => (lastRemoved.value = undefined), 8000);
+}
+
+function undoRemove() {
+    if (!lastRemoved.value) return;
+    restore(lastRemoved.value);
+    selectedId.value = lastRemoved.value.id;
+    lastRemoved.value = undefined;
+    clearTimeout(undoTimer);
+}
+
+async function onSave() {
+    await save();
+    toaster.create({
+        title: t("markers.saved"),
+        description: t("markers.savedMock"),
+        type: "success",
+    });
+}
+
+// ---- Keyboard shortcuts (ignored while typing in a field) -------------------
+function isTyping(target: EventTarget | null) {
+    if (!(target instanceof HTMLElement)) return false;
+    const tag = target.tagName;
+    return tag === "INPUT" || tag === "TEXTAREA" || target.isContentEditable;
+}
+
+useEventListener(window, "keydown", (event: KeyboardEvent) => {
+    if (isTyping(event.target)) return;
+    const el = videoElement.value;
+    switch (event.key) {
+        case " ":
+            if (!el) return;
+            event.preventDefault();
+            el.paused ? el.play() : el.pause();
+            break;
+        case "ArrowRight":
+            if (el) el.currentTime += 1;
+            break;
+        case "ArrowLeft":
+            if (el) el.currentTime -= 1;
+            break;
+        case "m":
+        case "M":
+            addMarker();
+            break;
+    }
+});
+</script>
+
+<template>
+    <div class="mx-auto flex w-full max-w-7xl flex-col gap-4 p-8">
+        <header class="flex flex-wrap items-center justify-between gap-3">
+            <div>
+                <NuxtLink
+                    to="/markers/"
+                    class="text-text-hint hover:text-text-default text-caption-1 inline-flex items-center gap-1"
+                >
+                    <Icon name="tabler:chevron-left" class="size-3.5" />
+                    {{ t("markers.index.title") }}
+                </NuxtLink>
+                <h1 class="text-heading-3 text-text-default">
+                    {{ t("markers.editor.pageTitle") }}
+                    <span class="text-text-muted">{{ vxId }}</span>
+                </h1>
+            </div>
+            <div class="flex items-center gap-3">
+                <span
+                    class="text-text-hint text-caption-1 inline-flex items-center gap-1"
+                >
+                    <Icon name="tabler:device-floppy" class="size-3.5" />
+                    {{ t("markers.savedLocally") }}
+                </span>
+                <DesignButton
+                    icon="tabler:cloud-upload"
+                    :loading="saving"
+                    @click="onSave"
+                >
+                    {{ t("markers.save") }}
+                </DesignButton>
+            </div>
+        </header>
+
+        <!-- Video -->
+        <div
+            class="bg-surface-default relative aspect-video w-full overflow-hidden rounded-xl shadow-xl"
+        >
+            <video
+                v-if="videoStatus === 'success' && videoUrl"
+                ref="videoElement"
+                :src="videoUrl"
+                controls
+                class="size-full"
+            />
+            <DesignSkeleton
+                v-else-if="videoStatus === 'pending'"
+                class="size-full"
+            />
+            <div
+                v-else
+                class="text-text-hint flex size-full flex-col items-center justify-center gap-2 text-sm"
+            >
+                <Icon name="tabler:video-off" class="size-8" />
+                {{ t("markers.previewUnavailable") }}
+            </div>
+
+            <!-- On-video overlay of markers active at the playhead -->
+            <div
+                v-if="activeMarkers.length"
+                class="pointer-events-none absolute top-4 left-4 flex flex-col gap-1.5"
+            >
+                <div
+                    v-for="m in activeMarkers"
+                    :key="m.id"
+                    class="flex items-center gap-2 rounded-md bg-black/70 px-3 py-1.5 text-sm text-white backdrop-blur"
+                >
+                    <span
+                        class="size-2 rounded-full"
+                        :class="markerTypeMeta(m.type).color"
+                    />
+                    <span class="font-medium">{{
+                        m.label || t(`markers.types.${m.type}`)
+                    }}</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Controls -->
+        <div class="flex flex-wrap items-center gap-3">
+            <span class="text-text-default font-medium tabular-nums">
+                {{ formatTime(currentTime) }}
+            </span>
+            <DesignButton icon="tabler:plus" @click="addMarker">
+                {{ t("markers.addAtPlayhead") }}
+            </DesignButton>
+            <span class="text-text-hint text-caption-1">{{
+                t("markers.addHint")
+            }}</span>
+
+            <div class="ml-auto flex flex-wrap items-center gap-1.5">
+                <DesignButton
+                    v-for="meta in MARKER_TYPES"
+                    :key="meta.value"
+                    size="small"
+                    :variant="
+                        activeTypes.includes(meta.value)
+                            ? 'secondary'
+                            : 'tertiary'
+                    "
+                    :icon="meta.icon"
+                    @click="toggleType(meta.value)"
+                >
+                    {{ t(`markers.types.${meta.value}`) }}
+                </DesignButton>
+            </div>
+        </div>
+
+        <!-- Timeline -->
+        <MarkersTimeline
+            :markers="visibleMarkers"
+            :duration="effectiveDuration"
+            :current="currentTime"
+            :selected-id="selectedId"
+            @select="(id) => (selectedId = id)"
+            @seek="seek"
+        />
+
+        <!-- Undo notice -->
+        <div
+            v-if="lastRemoved"
+            class="border-border-1 bg-surface-default flex items-center justify-between gap-3 rounded-xl border px-4 py-2"
+        >
+            <span class="text-text-muted text-sm">
+                {{
+                    t("markers.removed", {
+                        label:
+                            lastRemoved.label ||
+                            t(`markers.types.${lastRemoved.type}`),
+                    })
+                }}
+            </span>
+            <DesignButton
+                size="small"
+                variant="tertiary"
+                icon="tabler:arrow-back-up"
+                @click="undoRemove"
+            >
+                {{ t("markers.undo") }}
+            </DesignButton>
+        </div>
+
+        <!-- List + editor -->
+        <div class="grid grid-cols-1 gap-4 lg:grid-cols-[1fr_360px]">
+            <div
+                class="border-border-1 bg-surface-default flex max-h-[28rem] flex-col overflow-hidden rounded-xl border"
+            >
+                <div
+                    class="border-border-1 text-text-muted flex items-center justify-between border-b px-4 py-2 text-sm"
+                >
+                    <span>{{ t("markers.list.title") }}</span>
+                    <span class="tabular-nums">{{
+                        visibleMarkers.length
+                    }}</span>
+                </div>
+                <div
+                    v-if="visibleMarkers.length"
+                    class="flex flex-col gap-0.5 overflow-y-auto p-2"
+                >
+                    <MarkersListItem
+                        v-for="marker in visibleMarkers"
+                        :key="marker.id"
+                        :marker="marker"
+                        :selected="marker.id === selectedId"
+                        :current-time="currentTime"
+                        @select="
+                            selectedId = marker.id;
+                            seek(marker.start);
+                        "
+                    />
+                </div>
+                <div
+                    v-else
+                    class="text-text-hint flex flex-1 items-center justify-center p-8 text-center text-sm"
+                >
+                    {{ t("markers.list.empty") }}
+                </div>
+            </div>
+
+            <MarkersEditor
+                :marker="selectedMarker"
+                :current-time="currentTime"
+                @update="onUpdate"
+                @remove="onRemove"
+                @seek="seek"
+            />
+        </div>
+    </div>
+</template>
diff --git a/frontend/app/pages/markers/index.vue b/frontend/app/pages/markers/index.vue
new file mode 100644
index 0000000..c95f2f2
--- /dev/null
+++ b/frontend/app/pages/markers/index.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+const { t } = useI18n();
+
+useHead({ title: "Markers" });
+
+const analytics = useAnalytics();
+onMounted(() => {
+    analytics.page({ id: "markers", title: "markers" });
+});
+
+const vxId = ref("");
+
+function open() {
+    const id = vxId.value.trim();
+    if (!id) return;
+    navigateTo(`/markers/${id}`);
+}
+</script>
+
+<template>
+    <div class="mx-auto flex h-full max-w-7xl items-center justify-center p-8">
+        <div class="flex w-full max-w-sm flex-col items-center gap-6">
+            <div class="text-center">
+                <Icon
+                    name="tabler:bookmarks"
+                    class="text-text-muted mb-2 size-10"
+                />
+                <h1 class="text-heading-3 text-text-default">
+                    {{ t("markers.index.title") }}
+                </h1>
+                <p class="text-text-muted text-sm">
+                    {{ t("markers.index.description") }}
+                </p>
+            </div>
+            <form class="flex w-full flex-col gap-2" @submit.prevent="open">
+                <DesignInput
+                    v-model="vxId"
+                    label="VX-ID"
+                    required
+                    placeholder="VX-123456"
+                    leading-icon="tabler:hash"
+                />
+                <DesignButton
+                    type="submit"
+                    class="w-full"
+                    icon="tabler:arrow-right"
+                >
+                    {{ t("markers.index.open") }}
+                </DesignButton>
+            </form>
+            <p class="text-text-hint text-caption-1 text-center">
+                {{ t("markers.index.demoHint") }}
+            </p>
+        </div>
+    </div>
+</template>
diff --git a/frontend/app/utils/markers.ts b/frontend/app/utils/markers.ts
new file mode 100644
index 0000000..9e25648
--- /dev/null
+++ b/frontend/app/utils/markers.ts
@@ -0,0 +1,60 @@
+// Markers tool — data model.
+//
+// NOTE: this tool is currently frontend-only. Markers are persisted to
+// localStorage by `useMarkers`. The shapes below are intentionally close to
+// what a future ConnectRPC `GetMarkers` / `SubmitMarkers` pair would return so
+// the mock data layer can be swapped for `api.*` calls with minimal churn.
+
+export type MarkerType =
+    | "name-super"
+    | "bible-verse"
+    | "song"
+    | "chapter"
+    | "custom";
+
+// Where a marker came from. "imported" markers originate from the third-party
+// timing program (name-supers, bible-verse references, …); "manual" ones are
+// created here. The flag is preserved through edits so the future backend can
+// reconcile imported markers with their source.
+export type MarkerSource = "imported" | "manual";
+
+export type Marker = {
+    id: string;
+    type: MarkerType;
+    // Display text: the name, the verse reference, the song/chapter title.
+    label: string;
+    note?: string;
+    // In/out points in seconds (float, ms precision — matches transcription Word).
+    start: number;
+    end: number;
+    source: MarkerSource;
+};
+
+export type MarkerTypeMeta = {
+    value: MarkerType;
+    icon: string;
+    // Tailwind background class used on timeline blocks and list dots.
+    color: string;
+};
+
+// Single source of truth for the available marker types. Labels are resolved
+// via i18n (`markers.types.<value>`); see `markerTypeLabel`.
+export const MARKER_TYPES: MarkerTypeMeta[] = [
+    { value: "name-super", icon: "tabler:user", color: "bg-blue-500" },
+    { value: "bible-verse", icon: "tabler:book-2", color: "bg-purple-500" },
+    { value: "song", icon: "tabler:music", color: "bg-emerald-500" },
+    { value: "chapter", icon: "tabler:bookmark", color: "bg-amber-500" },
+    { value: "custom", icon: "tabler:tag", color: "bg-slate-500" },
+];
+
+export function markerTypeMeta(type: MarkerType): MarkerTypeMeta {
+    return (
+        MARKER_TYPES.find((m) => m.value === type) ??
+        MARKER_TYPES[MARKER_TYPES.length - 1]!
+    );
+}
+
+// Sort by start time, then end time — stable order for the list and timeline.
+export function sortMarkers(markers: Marker[]): Marker[] {
+    return [...markers].sort((a, b) => a.start - b.start || a.end - b.end);
+}
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index cac00a3..5d70f2a 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -192,6 +192,10 @@
         "vault": {
             "title": "Vault",
             "description": "Search Mediabanken and preview items"
+        },
+        "markers": {
+            "title": "Markers",
+            "description": "Add, edit and remove markers on a video"
         }
     },
     "vault": {
@@ -218,5 +222,56 @@
             "audio": "Audio",
             "image": "Image"
         }
+    },
+    "markers": {
+        "save": "Save",
+        "saved": "Markers saved",
+        "savedMock": "Saved (mock — no backend yet)",
+        "savedLocally": "Saved locally",
+        "addAtPlayhead": "Add marker at playhead",
+        "addHint": "Press M to add a marker",
+        "previewUnavailable": "Preview unavailable",
+        "removed": "Removed \"{label}\"",
+        "undo": "Undo",
+        "index": {
+            "title": "Markers",
+            "description": "Open a Cantemo asset by its VX-ID to manage markers.",
+            "open": "Open",
+            "demoHint": "Frontend-only preview — markers are stored in your browser."
+        },
+        "types": {
+            "name-super": "Name-super",
+            "bible-verse": "Bible verse",
+            "song": "Song",
+            "chapter": "Chapter",
+            "custom": "Custom"
+        },
+        "source": {
+            "imported": "Imported",
+            "manual": "Manual"
+        },
+        "timeline": {
+            "empty": "No markers yet. Add one at the playhead."
+        },
+        "list": {
+            "title": "Markers",
+            "empty": "No markers match the current filter."
+        },
+        "editor": {
+            "pageTitle": "Markers ·",
+            "title": "Edit marker",
+            "type": "Type",
+            "label": "Label",
+            "labelPlaceholder": "e.g. John Doe or John 3:16",
+            "note": "Note",
+            "notePlaceholder": "Optional note",
+            "in": "In",
+            "out": "Out",
+            "setToPlayhead": "Playhead",
+            "seekTo": "Seek to",
+            "duration": "Duration",
+            "remove": "Remove marker",
+            "noSelection": "Select a marker to edit, or add one at the playhead."
+        }
     }
 }
diff --git a/frontend/locales/nb.json b/frontend/locales/nb.json
index 9befe82..e637a18 100644
--- a/frontend/locales/nb.json
+++ b/frontend/locales/nb.json
@@ -192,6 +192,10 @@
         "vault": {
             "title": "Vault",
             "description": "Søk i Mediabanken og forhåndsvis elementer"
+        },
+        "markers": {
+            "title": "Markører",
+            "description": "Legg til, rediger og fjern markører på en video"
         }
     },
     "vault": {
@@ -218,5 +222,56 @@
             "audio": "Lyd",
             "image": "Bilde"
         }
+    },
+    "markers": {
+        "save": "Lagre",
+        "saved": "Markører lagret",
+        "savedMock": "Lagret (mock — ingen backend ennå)",
+        "savedLocally": "Lagret lokalt",
+        "addAtPlayhead": "Legg til markør ved spillehodet",
+        "addHint": "Trykk M for å legge til en markør",
+        "previewUnavailable": "Forhåndsvisning utilgjengelig",
+        "removed": "Fjernet «{label}»",
+        "undo": "Angre",
+        "index": {
+            "title": "Markører",
+            "description": "Åpne et Cantemo-element med VX-ID for å håndtere markører.",
+            "open": "Åpne",
+            "demoHint": "Kun frontend — markører lagres i nettleseren din."
+        },
+        "types": {
+            "name-super": "Navneskilt",
+            "bible-verse": "Bibelvers",
+            "song": "Sang",
+            "chapter": "Kapittel",
+            "custom": "Egendefinert"
+        },
+        "source": {
+            "imported": "Importert",
+            "manual": "Manuell"
+        },
+        "timeline": {
+            "empty": "Ingen markører ennå. Legg til en ved spillehodet."
+        },
+        "list": {
+            "title": "Markører",
+            "empty": "Ingen markører samsvarer med filteret."
+        },
+        "editor": {
+            "pageTitle": "Markører ·",
+            "title": "Rediger markør",
+            "type": "Type",
+            "label": "Etikett",
+            "labelPlaceholder": "f.eks. Ola Nordmann eller Joh 3:16",
+            "note": "Notat",
+            "notePlaceholder": "Valgfritt notat",
+            "in": "Inn",
+            "out": "Ut",
+            "setToPlayhead": "Spillehode",
+            "seekTo": "Gå til",
+            "duration": "Varighet",
+            "remove": "Fjern markør",
+            "noSelection": "Velg en markør for å redigere, eller legg til en ved spillehodet."
+        }
     }
 }

From 2f9df5a957c3e9239b6549f1aa419e234079ab59 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 10:08:50 +0200
Subject: [PATCH 02/28] chore(markers): remove marker track toggles

---
 frontend/app/pages/markers/[id].vue | 48 ++++++-----------------------
 1 file changed, 9 insertions(+), 39 deletions(-)

diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index ac5062b..e5216c3 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { MARKER_TYPES, markerTypeMeta, sortMarkers } from "~/utils/markers";
-import type { Marker, MarkerType } from "~/utils/markers";
+import { markerTypeMeta, sortMarkers } from "~/utils/markers";
+import type { Marker } from "~/utils/markers";
 
 const route = useRoute();
 const vxId = computed(() => String(route.params.id ?? ""));
@@ -57,18 +57,7 @@ const selectedMarker = computed(() =>
     markers.value.find((m) => m.id === selectedId.value),
 );
 
-const activeTypes = ref<MarkerType[]>(MARKER_TYPES.map((m) => m.value));
-function toggleType(type: MarkerType) {
-    activeTypes.value = activeTypes.value.includes(type)
-        ? activeTypes.value.filter((v) => v !== type)
-        : [...activeTypes.value, type];
-}
-
-const visibleMarkers = computed(() =>
-    sortMarkers(markers.value).filter((m) =>
-        activeTypes.value.includes(m.type),
-    ),
-);
+const visibleMarkers = computed(() => sortMarkers(markers.value));
 
 // Markers whose range contains the playhead — shown as an on-video overlay.
 const activeMarkers = computed(() =>
@@ -81,8 +70,7 @@ const activeMarkers = computed(() =>
 function addMarker() {
     const start = currentTime.value;
     const end = Math.min(start + 5, effectiveDuration.value);
-    const type = activeTypes.value[0] ?? "name-super";
-    const marker = add({ start, end, type });
+    const marker = add({ start, end, type: "name-super" });
     selectedId.value = marker.id;
 }
 
@@ -230,33 +218,15 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
         </div>
 
         <!-- Controls -->
-        <div class="flex flex-wrap items-center gap-3">
+        <div class="flex items-center gap-3">
             <span class="text-text-default font-medium tabular-nums">
                 {{ formatTime(currentTime) }}
             </span>
-            <DesignButton icon="tabler:plus" @click="addMarker">
-                {{ t("markers.addAtPlayhead") }}
-            </DesignButton>
-            <span class="text-text-hint text-caption-1">{{
-                t("markers.addHint")
-            }}</span>
-
-            <div class="ml-auto flex flex-wrap items-center gap-1.5">
-                <DesignButton
-                    v-for="meta in MARKER_TYPES"
-                    :key="meta.value"
-                    size="small"
-                    :variant="
-                        activeTypes.includes(meta.value)
-                            ? 'secondary'
-                            : 'tertiary'
-                    "
-                    :icon="meta.icon"
-                    @click="toggleType(meta.value)"
-                >
-                    {{ t(`markers.types.${meta.value}`) }}
+            <DesignTooltip :content="t('markers.addHint')">
+                <DesignButton icon="tabler:plus" @click="addMarker">
+                    {{ t("markers.addAtPlayhead") }}
                 </DesignButton>
-            </div>
+            </DesignTooltip>
         </div>
 
         <!-- Timeline -->

From 0237ee16572978be32a8d2795590d9b6e2837994 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 10:13:56 +0200
Subject: [PATCH 03/28] feat(markers): better playhead

---
 .../components/markers/MarkersTimeline.vue    | 49 ++++++++++++++-----
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/markers/MarkersTimeline.vue b/frontend/app/components/markers/MarkersTimeline.vue
index 0dd5b9b..a5fe3ea 100644
--- a/frontend/app/components/markers/MarkersTimeline.vue
+++ b/frontend/app/components/markers/MarkersTimeline.vue
@@ -39,6 +39,15 @@ function blockStyle(marker: Marker) {
 
 const playheadStyle = computed(() => ({ left: `${pct(props.current)}%` }));
 
+// Muted hover playhead — previews where a click on the tracks would seek.
+const hoverLeft = ref<string | null>(null);
+function onTracksMove(event: MouseEvent) {
+    const el = event.currentTarget as HTMLElement;
+    const rect = el.getBoundingClientRect();
+    const ratio = (event.clientX - rect.left) / rect.width;
+    hoverLeft.value = `${Math.min(100, Math.max(0, ratio * 100))}%`;
+}
+
 // Click anywhere on a lane background to scrub there.
 function onLaneClick(event: MouseEvent) {
     if (!props.duration) return;
@@ -62,27 +71,31 @@ function laneLabel(type: MarkerType) {
             {{ t("markers.timeline.empty") }}
         </div>
 
-        <div v-else class="flex flex-col gap-2">
-            <div
-                v-for="lane in lanes"
-                :key="lane.value"
-                class="flex items-center gap-3"
-            >
+        <div v-else class="flex gap-3">
+            <!-- Labels column; heights mirror the track rows so they align. -->
+            <div class="flex w-32 shrink-0 flex-col gap-2">
                 <div
-                    class="text-text-muted flex w-32 shrink-0 items-center gap-1.5 text-sm"
+                    v-for="lane in lanes"
+                    :key="lane.value"
+                    class="text-text-muted flex h-7 items-center gap-1.5 text-sm"
                 >
                     <Icon :name="lane.icon" class="size-4 shrink-0" />
                     <span class="truncate">{{ laneLabel(lane.value) }}</span>
                 </div>
+            </div>
+
+            <!-- Tracks column; a single playhead is overlaid across all lanes. -->
+            <div
+                class="relative flex grow flex-col gap-2"
+                @mousemove="onTracksMove"
+                @mouseleave="hoverLeft = null"
+            >
                 <div
-                    class="bg-surface-indent relative h-7 grow cursor-pointer overflow-hidden rounded-md"
+                    v-for="lane in lanes"
+                    :key="lane.value"
+                    class="bg-surface-indent relative h-7 cursor-pointer overflow-hidden rounded-md"
                     @click="onLaneClick"
                 >
-                    <!-- Per-lane playhead segment; stacked lanes read as one line. -->
-                    <div
-                        class="bg-text-default pointer-events-none absolute inset-y-0 z-20 w-px"
-                        :style="playheadStyle"
-                    />
                     <DesignTooltip
                         v-for="marker in lane.markers"
                         :key="marker.id"
@@ -109,6 +122,16 @@ function laneLabel(type: MarkerType) {
                         </button>
                     </DesignTooltip>
                 </div>
+
+                <div
+                    v-if="hoverLeft"
+                    class="bg-text-default/30 pointer-events-none absolute inset-y-0 z-10 w-px"
+                    :style="{ left: hoverLeft }"
+                />
+                <div
+                    class="bg-text-default pointer-events-none absolute inset-y-0 z-20 w-px"
+                    :style="playheadStyle"
+                />
             </div>
         </div>
     </div>

From 07e9ba902ce1c50e82c099c1dcdfc463b5a31f30 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 10:19:55 +0200
Subject: [PATCH 04/28] feat(markers): color and icon code track types

---
 .../components/markers/MarkersListItem.vue    | 41 ++++++++++---------
 frontend/app/pages/markers/[id].vue           |  7 ++--
 frontend/app/utils/markers.ts                 | 39 +++++++++++++++---
 3 files changed, 58 insertions(+), 29 deletions(-)

diff --git a/frontend/app/components/markers/MarkersListItem.vue b/frontend/app/components/markers/MarkersListItem.vue
index cef6021..c0b701b 100644
--- a/frontend/app/components/markers/MarkersListItem.vue
+++ b/frontend/app/components/markers/MarkersListItem.vue
@@ -23,30 +23,31 @@ const active = computed(
 <template>
     <button
         type="button"
-        class="ds-focus-ring flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors"
+        class="ds-focus-ring flex w-full items-center gap-3 rounded-lg px-3 py-1.5 text-left transition-colors"
         :class="selected ? 'bg-surface-indent' : 'hover:bg-surface-indent/60'"
         @click="$emit('select')"
     >
-        <span
-            class="size-2.5 shrink-0 rounded-full"
-            :class="markerTypeMeta(marker.type).color"
+        <Icon
+            :name="markerTypeMeta(marker.type).icon"
+            class="size-4 shrink-0"
+            :class="markerTypeMeta(marker.type).iconColor"
         />
-        <div class="min-w-0 flex-1">
-            <div class="flex items-center gap-2">
-                <span class="text-body-3 text-text-default truncate">
-                    {{ marker.label || t(`markers.types.${marker.type}`) }}
-                </span>
-                <Icon
-                    v-if="active"
-                    name="tabler:volume"
-                    class="text-primary-default size-3.5 shrink-0"
-                />
-            </div>
-            <span class="text-text-hint text-caption-1 tabular-nums">
-                {{ formatTime(marker.start) }} – {{ formatTime(marker.end) }}
-            </span>
-        </div>
-        <DesignBadge v-if="marker.source === 'imported'" variant="info">
+        <span class="text-text-hint text-caption-1 w-52 shrink-0 tabular-nums">
+            {{ formatTime(marker.start) }} – {{ formatTime(marker.end) }}
+        </span>
+        <span class="text-body-3 text-text-default truncate">
+            {{ marker.label || t(`markers.types.${marker.type}`) }}
+        </span>
+        <Icon
+            v-if="active"
+            name="tabler:volume"
+            class="text-primary-default size-3.5 shrink-0"
+        />
+        <DesignBadge
+            v-if="marker.source === 'imported'"
+            variant="info"
+            class="ml-auto shrink-0"
+        >
             {{ t("markers.source.imported") }}
         </DesignBadge>
     </button>
diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index e5216c3..1802c1f 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -206,9 +206,10 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
                     :key="m.id"
                     class="flex items-center gap-2 rounded-md bg-black/70 px-3 py-1.5 text-sm text-white backdrop-blur"
                 >
-                    <span
-                        class="size-2 rounded-full"
-                        :class="markerTypeMeta(m.type).color"
+                    <Icon
+                        :name="markerTypeMeta(m.type).icon"
+                        class="size-4 shrink-0"
+                        :class="markerTypeMeta(m.type).iconColor"
                     />
                     <span class="font-medium">{{
                         m.label || t(`markers.types.${m.type}`)
diff --git a/frontend/app/utils/markers.ts b/frontend/app/utils/markers.ts
index 9e25648..371ec55 100644
--- a/frontend/app/utils/markers.ts
+++ b/frontend/app/utils/markers.ts
@@ -33,18 +33,45 @@ export type Marker = {
 export type MarkerTypeMeta = {
     value: MarkerType;
     icon: string;
-    // Tailwind background class used on timeline blocks and list dots.
+    // Tailwind background class, used to fill the timeline blocks.
     color: string;
+    // Tailwind text class, used to tint the type icon in the list / overlay.
+    iconColor: string;
 };
 
 // Single source of truth for the available marker types. Labels are resolved
 // via i18n (`markers.types.<value>`); see `markerTypeLabel`.
 export const MARKER_TYPES: MarkerTypeMeta[] = [
-    { value: "name-super", icon: "tabler:user", color: "bg-blue-500" },
-    { value: "bible-verse", icon: "tabler:book-2", color: "bg-purple-500" },
-    { value: "song", icon: "tabler:music", color: "bg-emerald-500" },
-    { value: "chapter", icon: "tabler:bookmark", color: "bg-amber-500" },
-    { value: "custom", icon: "tabler:tag", color: "bg-slate-500" },
+    {
+        value: "name-super",
+        icon: "tabler:user",
+        color: "bg-blue-500",
+        iconColor: "text-blue-500",
+    },
+    {
+        value: "bible-verse",
+        icon: "tabler:book-2",
+        color: "bg-purple-500",
+        iconColor: "text-purple-500",
+    },
+    {
+        value: "song",
+        icon: "tabler:music",
+        color: "bg-emerald-500",
+        iconColor: "text-emerald-500",
+    },
+    {
+        value: "chapter",
+        icon: "tabler:bookmark",
+        color: "bg-amber-500",
+        iconColor: "text-amber-500",
+    },
+    {
+        value: "custom",
+        icon: "tabler:tag",
+        color: "bg-slate-500",
+        iconColor: "text-slate-500",
+    },
 ];
 
 export function markerTypeMeta(type: MarkerType): MarkerTypeMeta {

From 7fa94f3b579e0e3dba442e962fe9868b9dfdb6c1 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 10:22:32 +0200
Subject: [PATCH 05/28] chore(markers): rename to person

---
 frontend/locales/en.json | 2 +-
 frontend/locales/nb.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 5d70f2a..6ff9fc8 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -240,7 +240,7 @@
             "demoHint": "Frontend-only preview — markers are stored in your browser."
         },
         "types": {
-            "name-super": "Name-super",
+            "name-super": "Person",
             "bible-verse": "Bible verse",
             "song": "Song",
             "chapter": "Chapter",
diff --git a/frontend/locales/nb.json b/frontend/locales/nb.json
index e637a18..be9da53 100644
--- a/frontend/locales/nb.json
+++ b/frontend/locales/nb.json
@@ -240,7 +240,7 @@
             "demoHint": "Kun frontend — markører lagres i nettleseren din."
         },
         "types": {
-            "name-super": "Navneskilt",
+            "name-super": "Person",
             "bible-verse": "Bibelvers",
             "song": "Sang",
             "chapter": "Kapittel",

From 420c5d6cdcaa0179b4c3d1d1f02723a30b6a14da Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 10:40:16 +0200
Subject: [PATCH 06/28] feat(markers): improved layout

---
 frontend/app/pages/markers/[id].vue | 253 +++++++++++++++-------------
 1 file changed, 132 insertions(+), 121 deletions(-)

diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index 1802c1f..72f5ad4 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -141,8 +141,12 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
 </script>
 
 <template>
-    <div class="mx-auto flex w-full max-w-7xl flex-col gap-4 p-8">
-        <header class="flex flex-wrap items-center justify-between gap-3">
+    <div
+        class="mx-auto flex h-[calc(100vh-var(--header-height,3.5rem))] w-full max-w-[1700px] flex-col gap-3 p-4"
+    >
+        <header
+            class="flex shrink-0 flex-wrap items-center justify-between gap-3"
+        >
             <div>
                 <NuxtLink
                     to="/markers/"
@@ -173,141 +177,148 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
             </div>
         </header>
 
-        <!-- Video -->
+        <!-- Workspace: video + timeline (left), list + editor (right) -->
         <div
-            class="bg-surface-default relative aspect-video w-full overflow-hidden rounded-xl shadow-xl"
+            class="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-[1fr_380px]"
         >
-            <video
-                v-if="videoStatus === 'success' && videoUrl"
-                ref="videoElement"
-                :src="videoUrl"
-                controls
-                class="size-full"
-            />
-            <DesignSkeleton
-                v-else-if="videoStatus === 'pending'"
-                class="size-full"
-            />
-            <div
-                v-else
-                class="text-text-hint flex size-full flex-col items-center justify-center gap-2 text-sm"
-            >
-                <Icon name="tabler:video-off" class="size-8" />
-                {{ t("markers.previewUnavailable") }}
-            </div>
-
-            <!-- On-video overlay of markers active at the playhead -->
-            <div
-                v-if="activeMarkers.length"
-                class="pointer-events-none absolute top-4 left-4 flex flex-col gap-1.5"
-            >
+            <!-- Left column -->
+            <div class="flex min-h-0 flex-col gap-3">
                 <div
-                    v-for="m in activeMarkers"
-                    :key="m.id"
-                    class="flex items-center gap-2 rounded-md bg-black/70 px-3 py-1.5 text-sm text-white backdrop-blur"
+                    class="bg-surface-default relative aspect-video max-h-full w-full shrink-0 overflow-hidden rounded-xl shadow-xl"
                 >
-                    <Icon
-                        :name="markerTypeMeta(m.type).icon"
-                        class="size-4 shrink-0"
-                        :class="markerTypeMeta(m.type).iconColor"
+                    <video
+                        v-if="videoStatus === 'success' && videoUrl"
+                        ref="videoElement"
+                        :src="videoUrl"
+                        controls
+                        class="size-full bg-black object-contain"
                     />
-                    <span class="font-medium">{{
-                        m.label || t(`markers.types.${m.type}`)
-                    }}</span>
-                </div>
-            </div>
-        </div>
+                    <DesignSkeleton
+                        v-else-if="videoStatus === 'pending'"
+                        class="size-full"
+                    />
+                    <div
+                        v-else
+                        class="text-text-hint flex size-full flex-col items-center justify-center gap-2 text-sm"
+                    >
+                        <Icon name="tabler:video-off" class="size-8" />
+                        {{ t("markers.previewUnavailable") }}
+                    </div>
 
-        <!-- Controls -->
-        <div class="flex items-center gap-3">
-            <span class="text-text-default font-medium tabular-nums">
-                {{ formatTime(currentTime) }}
-            </span>
-            <DesignTooltip :content="t('markers.addHint')">
-                <DesignButton icon="tabler:plus" @click="addMarker">
-                    {{ t("markers.addAtPlayhead") }}
-                </DesignButton>
-            </DesignTooltip>
-        </div>
+                    <!-- On-video overlay of markers active at the playhead -->
+                    <div
+                        v-if="activeMarkers.length"
+                        class="pointer-events-none absolute top-4 left-4 flex flex-col gap-1.5"
+                    >
+                        <div
+                            v-for="m in activeMarkers"
+                            :key="m.id"
+                            class="flex items-center gap-2 rounded-md bg-black/70 px-3 py-1.5 text-sm text-white backdrop-blur"
+                        >
+                            <Icon
+                                :name="markerTypeMeta(m.type).icon"
+                                class="size-4 shrink-0"
+                                :class="markerTypeMeta(m.type).iconColor"
+                            />
+                            <span class="font-medium">{{
+                                m.label || t(`markers.types.${m.type}`)
+                            }}</span>
+                        </div>
+                    </div>
+                </div>
 
-        <!-- Timeline -->
-        <MarkersTimeline
-            :markers="visibleMarkers"
-            :duration="effectiveDuration"
-            :current="currentTime"
-            :selected-id="selectedId"
-            @select="(id) => (selectedId = id)"
-            @seek="seek"
-        />
+                <!-- Controls (undo notice folds in on the right when present) -->
+                <div class="flex shrink-0 items-center gap-3">
+                    <span class="text-text-default font-medium tabular-nums">
+                        {{ formatTime(currentTime) }}
+                    </span>
+                    <DesignTooltip :content="t('markers.addHint')">
+                        <DesignButton icon="tabler:plus" @click="addMarker">
+                            {{ t("markers.addAtPlayhead") }}
+                        </DesignButton>
+                    </DesignTooltip>
+                    <div
+                        v-if="lastRemoved"
+                        class="ml-auto flex items-center gap-2"
+                    >
+                        <span class="text-text-muted text-sm">
+                            {{
+                                t("markers.removed", {
+                                    label:
+                                        lastRemoved.label ||
+                                        t(`markers.types.${lastRemoved.type}`),
+                                })
+                            }}
+                        </span>
+                        <DesignButton
+                            size="small"
+                            variant="tertiary"
+                            icon="tabler:arrow-back-up"
+                            @click="undoRemove"
+                        >
+                            {{ t("markers.undo") }}
+                        </DesignButton>
+                    </div>
+                </div>
 
-        <!-- Undo notice -->
-        <div
-            v-if="lastRemoved"
-            class="border-border-1 bg-surface-default flex items-center justify-between gap-3 rounded-xl border px-4 py-2"
-        >
-            <span class="text-text-muted text-sm">
-                {{
-                    t("markers.removed", {
-                        label:
-                            lastRemoved.label ||
-                            t(`markers.types.${lastRemoved.type}`),
-                    })
-                }}
-            </span>
-            <DesignButton
-                size="small"
-                variant="tertiary"
-                icon="tabler:arrow-back-up"
-                @click="undoRemove"
-            >
-                {{ t("markers.undo") }}
-            </DesignButton>
-        </div>
+                <MarkersTimeline
+                    class="shrink-0"
+                    :markers="visibleMarkers"
+                    :duration="effectiveDuration"
+                    :current="currentTime"
+                    :selected-id="selectedId"
+                    @select="(id) => (selectedId = id)"
+                    @seek="seek"
+                />
+            </div>
 
-        <!-- List + editor -->
-        <div class="grid grid-cols-1 gap-4 lg:grid-cols-[1fr_360px]">
-            <div
-                class="border-border-1 bg-surface-default flex max-h-[28rem] flex-col overflow-hidden rounded-xl border"
-            >
+            <!-- Right column: marker list (scrolls) on top, editor below -->
+            <div class="flex min-h-0 flex-col gap-4">
                 <div
-                    class="border-border-1 text-text-muted flex items-center justify-between border-b px-4 py-2 text-sm"
+                    class="border-border-1 bg-surface-default flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border"
                 >
-                    <span>{{ t("markers.list.title") }}</span>
-                    <span class="tabular-nums">{{
-                        visibleMarkers.length
-                    }}</span>
+                    <div
+                        class="border-border-1 text-text-muted flex shrink-0 items-center justify-between border-b px-4 py-2 text-sm"
+                    >
+                        <span>{{ t("markers.list.title") }}</span>
+                        <span class="tabular-nums">{{
+                            visibleMarkers.length
+                        }}</span>
+                    </div>
+                    <div
+                        v-if="visibleMarkers.length"
+                        class="flex flex-col gap-0.5 overflow-y-auto p-2"
+                    >
+                        <MarkersListItem
+                            v-for="marker in visibleMarkers"
+                            :key="marker.id"
+                            :marker="marker"
+                            :selected="marker.id === selectedId"
+                            :current-time="currentTime"
+                            @select="
+                                selectedId = marker.id;
+                                seek(marker.start);
+                            "
+                        />
+                    </div>
+                    <div
+                        v-else
+                        class="text-text-hint flex flex-1 items-center justify-center p-8 text-center text-sm"
+                    >
+                        {{ t("markers.list.empty") }}
+                    </div>
                 </div>
-                <div
-                    v-if="visibleMarkers.length"
-                    class="flex flex-col gap-0.5 overflow-y-auto p-2"
-                >
-                    <MarkersListItem
-                        v-for="marker in visibleMarkers"
-                        :key="marker.id"
-                        :marker="marker"
-                        :selected="marker.id === selectedId"
+
+                <div class="shrink-0">
+                    <MarkersEditor
+                        :marker="selectedMarker"
                         :current-time="currentTime"
-                        @select="
-                            selectedId = marker.id;
-                            seek(marker.start);
-                        "
+                        @update="onUpdate"
+                        @remove="onRemove"
+                        @seek="seek"
                     />
                 </div>
-                <div
-                    v-else
-                    class="text-text-hint flex flex-1 items-center justify-center p-8 text-center text-sm"
-                >
-                    {{ t("markers.list.empty") }}
-                </div>
             </div>
-
-            <MarkersEditor
-                :marker="selectedMarker"
-                :current-time="currentTime"
-                @update="onUpdate"
-                @remove="onRemove"
-                @seek="seek"
-            />
         </div>
     </div>
 </template>

From d9e86f801b9c7e096de336fd9b1162cbdcebe337 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 10:45:37 +0200
Subject: [PATCH 07/28] feat(markers): switch placement of editor and list

---
 frontend/app/pages/markers/[id].vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index 72f5ad4..633142c 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -142,7 +142,7 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
 
 <template>
     <div
-        class="mx-auto flex h-[calc(100vh-var(--header-height,3.5rem))] w-full max-w-[1700px] flex-col gap-3 p-4"
+        class="mx-auto flex h-[calc(100vh-var(--header-height,3.5rem))] w-full max-w-[1600px] flex-col gap-3 p-4"
     >
         <header
             class="flex shrink-0 flex-wrap items-center justify-between gap-3"
@@ -274,6 +274,16 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
 
             <!-- Right column: marker list (scrolls) on top, editor below -->
             <div class="flex min-h-0 flex-col gap-4">
+                <div class="shrink-0">
+                    <MarkersEditor
+                        :marker="selectedMarker"
+                        :current-time="currentTime"
+                        @update="onUpdate"
+                        @remove="onRemove"
+                        @seek="seek"
+                    />
+                </div>
+
                 <div
                     class="border-border-1 bg-surface-default flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border"
                 >
@@ -287,7 +297,7 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
                     </div>
                     <div
                         v-if="visibleMarkers.length"
-                        class="flex flex-col gap-0.5 overflow-y-auto p-2"
+                        class="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto p-2"
                     >
                         <MarkersListItem
                             v-for="marker in visibleMarkers"
@@ -308,16 +318,6 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
                         {{ t("markers.list.empty") }}
                     </div>
                 </div>
-
-                <div class="shrink-0">
-                    <MarkersEditor
-                        :marker="selectedMarker"
-                        :current-time="currentTime"
-                        @update="onUpdate"
-                        @remove="onRemove"
-                        @seek="seek"
-                    />
-                </div>
             </div>
         </div>
     </div>

From 8cac2c5b169299eec8259c28e0bdfd2d77295260 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 11:07:30 +0200
Subject: [PATCH 08/28] feat(markers): layout animation

---
 frontend/app/pages/markers/[id].vue | 95 ++++++++++++++++-------------
 1 file changed, 53 insertions(+), 42 deletions(-)

diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index 633142c..1871456 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { LayoutGroup, motion } from "motion-v";
 import { markerTypeMeta, sortMarkers } from "~/utils/markers";
 import type { Marker } from "~/utils/markers";
 
@@ -272,53 +273,63 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
                 />
             </div>
 
-            <!-- Right column: marker list (scrolls) on top, editor below -->
-            <div class="flex min-h-0 flex-col gap-4">
-                <div class="shrink-0">
-                    <MarkersEditor
-                        :marker="selectedMarker"
-                        :current-time="currentTime"
-                        @update="onUpdate"
-                        @remove="onRemove"
-                        @seek="seek"
-                    />
-                </div>
-
-                <div
-                    class="border-border-1 bg-surface-default flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border"
-                >
-                    <div
-                        class="border-border-1 text-text-muted flex shrink-0 items-center justify-between border-b px-4 py-2 text-sm"
+            <!-- Right column: editor (inspector) on top, marker list below.
+                 The editor grows/shrinks with selection; LayoutGroup animates
+                 the list smoothly repositioning instead of jumping. -->
+            <LayoutGroup>
+                <div class="flex min-h-0 flex-col gap-4">
+                    <motion.div
+                        layout="position"
+                        :transition="{ duration: 1, ease: [0.16, 1, 0.3, 1] }"
+                        class="shrink-0"
                     >
-                        <span>{{ t("markers.list.title") }}</span>
-                        <span class="tabular-nums">{{
-                            visibleMarkers.length
-                        }}</span>
-                    </div>
-                    <div
-                        v-if="visibleMarkers.length"
-                        class="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto p-2"
-                    >
-                        <MarkersListItem
-                            v-for="marker in visibleMarkers"
-                            :key="marker.id"
-                            :marker="marker"
-                            :selected="marker.id === selectedId"
+                        <MarkersEditor
+                            :marker="selectedMarker"
                             :current-time="currentTime"
-                            @select="
-                                selectedId = marker.id;
-                                seek(marker.start);
-                            "
+                            @update="onUpdate"
+                            @remove="onRemove"
+                            @seek="seek"
                         />
-                    </div>
-                    <div
-                        v-else
-                        class="text-text-hint flex flex-1 items-center justify-center p-8 text-center text-sm"
+                    </motion.div>
+
+                    <motion.div
+                        layout="position"
+                        :transition="{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }"
+                        class="border-border-1 bg-surface-default flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border"
                     >
-                        {{ t("markers.list.empty") }}
-                    </div>
+                        <div
+                            class="border-border-1 text-text-muted flex shrink-0 items-center justify-between border-b px-4 py-2 text-sm"
+                        >
+                            <span>{{ t("markers.list.title") }}</span>
+                            <span class="tabular-nums">{{
+                                visibleMarkers.length
+                            }}</span>
+                        </div>
+                        <div
+                            v-if="visibleMarkers.length"
+                            class="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto p-2"
+                        >
+                            <MarkersListItem
+                                v-for="marker in visibleMarkers"
+                                :key="marker.id"
+                                :marker="marker"
+                                :selected="marker.id === selectedId"
+                                :current-time="currentTime"
+                                @select="
+                                    selectedId = marker.id;
+                                    seek(marker.start);
+                                "
+                            />
+                        </div>
+                        <div
+                            v-else
+                            class="text-text-hint flex flex-1 items-center justify-center p-8 text-center text-sm"
+                        >
+                            {{ t("markers.list.empty") }}
+                        </div>
+                    </motion.div>
                 </div>
-            </div>
+            </LayoutGroup>
         </div>
     </div>
 </template>

From bf297d14a050ac8005dd9752a37eaa29c495c3ec Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 11:10:56 +0200
Subject: [PATCH 09/28] feat(markers): seek 5 seconds

---
 frontend/app/pages/markers/[id].vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index 1871456..e748d7e 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -3,6 +3,9 @@ import { LayoutGroup, motion } from "motion-v";
 import { markerTypeMeta, sortMarkers } from "~/utils/markers";
 import type { Marker } from "~/utils/markers";
 
+// Seconds the arrow keys jump the playhead.
+const SEEK_STEP_SECONDS = 5;
+
 const route = useRoute();
 const vxId = computed(() => String(route.params.id ?? ""));
 
@@ -128,10 +131,10 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
             el.paused ? el.play() : el.pause();
             break;
         case "ArrowRight":
-            if (el) el.currentTime += 1;
+            if (el) el.currentTime += SEEK_STEP_SECONDS;
             break;
         case "ArrowLeft":
-            if (el) el.currentTime -= 1;
+            if (el) el.currentTime -= SEEK_STEP_SECONDS;
             break;
         case "m":
         case "M":

From f188957264131911e40bc1a5366910735eac39a9 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 11:23:48 +0200
Subject: [PATCH 10/28] chore(markers): hide milliseconds

---
 .../app/components/markers/MarkersEditor.vue  | 28 ++++++++++---------
 .../components/markers/MarkersListItem.vue    |  7 +++--
 .../components/markers/MarkersTimeline.vue    |  8 ++++--
 frontend/app/pages/markers/[id].vue           |  8 +++---
 frontend/app/utils/markers.ts                 | 20 +++++++++++++
 5 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/frontend/app/components/markers/MarkersEditor.vue b/frontend/app/components/markers/MarkersEditor.vue
index e9afc54..23d9cac 100644
--- a/frontend/app/components/markers/MarkersEditor.vue
+++ b/frontend/app/components/markers/MarkersEditor.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { MARKER_TYPES, markerTypeMeta } from "~/utils/markers";
+import {
+    MARKER_TYPES,
+    formatMarkerTime,
+    markerTypeMeta,
+    parseMarkerTime,
+} from "~/utils/markers";
 import type { Marker } from "~/utils/markers";
 
 const props = defineProps<{
@@ -44,29 +49,26 @@ watch(
     () => props.marker,
     (m) => {
         if (!m) return;
-        startStr.value = formatTime(m.start);
-        endStr.value = formatTime(m.end);
+        startStr.value = formatMarkerTime(m.start);
+        endStr.value = formatMarkerTime(m.end);
     },
     { immediate: true, deep: true },
 );
 
 function commit(which: "start" | "end") {
     const raw = which === "start" ? startStr.value : endStr.value;
-    try {
-        const seconds = secondsFromFormattedTime(raw);
-        if (!Number.isFinite(seconds) || seconds < 0)
-            throw new Error("bad time");
+    const seconds = parseMarkerTime(raw);
+    if (Number.isFinite(seconds)) {
         emit("update", { [which]: seconds });
-    } catch {
+    } else if (props.marker) {
         // Revert the field to the last good value.
-        if (!props.marker) return;
-        startStr.value = formatTime(props.marker.start);
-        endStr.value = formatTime(props.marker.end);
+        startStr.value = formatMarkerTime(props.marker.start);
+        endStr.value = formatMarkerTime(props.marker.end);
     }
 }
 
 function setToCurrent(which: "start" | "end") {
-    emit("update", { [which]: props.currentTime });
+    emit("update", { [which]: Math.round(props.currentTime) });
 }
 
 const duration = computed(() => {
@@ -170,7 +172,7 @@ const duration = computed(() => {
         </div>
 
         <p class="text-text-hint text-caption-1">
-            {{ t("markers.editor.duration") }}: {{ duration.toFixed(2) }}s
+            {{ t("markers.editor.duration") }}: {{ Math.round(duration) }} s
         </p>
 
         <DesignButton
diff --git a/frontend/app/components/markers/MarkersListItem.vue b/frontend/app/components/markers/MarkersListItem.vue
index c0b701b..c2bf6c5 100644
--- a/frontend/app/components/markers/MarkersListItem.vue
+++ b/frontend/app/components/markers/MarkersListItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { markerTypeMeta } from "~/utils/markers";
+import { formatMarkerTime, markerTypeMeta } from "~/utils/markers";
 import type { Marker } from "~/utils/markers";
 
 const props = defineProps<{
@@ -32,8 +32,9 @@ const active = computed(
             class="size-4 shrink-0"
             :class="markerTypeMeta(marker.type).iconColor"
         />
-        <span class="text-text-hint text-caption-1 w-52 shrink-0 tabular-nums">
-            {{ formatTime(marker.start) }} – {{ formatTime(marker.end) }}
+        <span class="text-text-hint text-caption-1 w-40 shrink-0 tabular-nums">
+            {{ formatMarkerTime(marker.start) }} –
+            {{ formatMarkerTime(marker.end) }}
         </span>
         <span class="text-body-3 text-text-default truncate">
             {{ marker.label || t(`markers.types.${marker.type}`) }}
diff --git a/frontend/app/components/markers/MarkersTimeline.vue b/frontend/app/components/markers/MarkersTimeline.vue
index a5fe3ea..a5af5c5 100644
--- a/frontend/app/components/markers/MarkersTimeline.vue
+++ b/frontend/app/components/markers/MarkersTimeline.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { MARKER_TYPES, markerTypeMeta } from "~/utils/markers";
+import {
+    MARKER_TYPES,
+    formatMarkerTime,
+    markerTypeMeta,
+} from "~/utils/markers";
 import type { Marker, MarkerType } from "~/utils/markers";
 
 const props = defineProps<{
@@ -99,7 +103,7 @@ function laneLabel(type: MarkerType) {
                     <DesignTooltip
                         v-for="marker in lane.markers"
                         :key="marker.id"
-                        :content="`${marker.label || laneLabel(marker.type)} · ${formatTime(marker.start)}–${formatTime(marker.end)}`"
+                        :content="`${marker.label || laneLabel(marker.type)} · ${formatMarkerTime(marker.start)}–${formatMarkerTime(marker.end)}`"
                     >
                         <button
                             type="button"
diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index e748d7e..1d3d4f0 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { LayoutGroup, motion } from "motion-v";
-import { markerTypeMeta, sortMarkers } from "~/utils/markers";
+import { formatMarkerTime, markerTypeMeta, sortMarkers } from "~/utils/markers";
 import type { Marker } from "~/utils/markers";
 
 // Seconds the arrow keys jump the playhead.
@@ -72,8 +72,8 @@ const activeMarkers = computed(() =>
 
 // ---- Mutations --------------------------------------------------------------
 function addMarker() {
-    const start = currentTime.value;
-    const end = Math.min(start + 5, effectiveDuration.value);
+    const start = Math.round(currentTime.value);
+    const end = Math.min(start + 5, Math.round(effectiveDuration.value));
     const marker = add({ start, end, type: "name-super" });
     selectedId.value = marker.id;
 }
@@ -234,7 +234,7 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
                 <!-- Controls (undo notice folds in on the right when present) -->
                 <div class="flex shrink-0 items-center gap-3">
                     <span class="text-text-default font-medium tabular-nums">
-                        {{ formatTime(currentTime) }}
+                        {{ formatMarkerTime(currentTime) }}
                     </span>
                     <DesignTooltip :content="t('markers.addHint')">
                         <DesignButton icon="tabler:plus" @click="addMarker">
diff --git a/frontend/app/utils/markers.ts b/frontend/app/utils/markers.ts
index 371ec55..529c109 100644
--- a/frontend/app/utils/markers.ts
+++ b/frontend/app/utils/markers.ts
@@ -85,3 +85,23 @@ export function markerTypeMeta(type: MarkerType): MarkerTypeMeta {
 export function sortMarkers(markers: Marker[]): Marker[] {
     return [...markers].sort((a, b) => a.start - b.start || a.end - b.end);
 }
+
+// Markers are shown/edited at whole-second granularity — ms precision isn't
+// meaningful for on-screen graphics. (The shared `formatTime` keeps ms for the
+// transcription editor; these are marker-specific.)
+export function formatMarkerTime(seconds: number): string {
+    const s = Math.max(0, Math.round(seconds));
+    const hh = Math.floor(s / 3600);
+    const mm = Math.floor((s % 3600) / 60);
+    const ss = s % 60;
+    return [hh, mm, ss].map((n) => n.toString().padStart(2, "0")).join(":");
+}
+
+// Parses "SS", "MM:SS" or "HH:MM:SS" into whole seconds; NaN if malformed.
+export function parseMarkerTime(value: string): number {
+    const parts = value.trim().split(":");
+    if (parts.length === 0 || parts.length > 3) return NaN;
+    const nums = parts.map(Number);
+    if (nums.some((n) => !Number.isFinite(n) || n < 0)) return NaN;
+    return nums.reduce((total, n) => total * 60 + n, 0);
+}

From d2b3b023c67e3d406188fe3b89875c65ee4bd280 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 11:33:11 +0200
Subject: [PATCH 11/28] feat(markers): simpler marker list + smaller marker min
 width

---
 .../app/components/markers/MarkersListItem.vue | 18 +++++-------------
 .../app/components/markers/MarkersTimeline.vue |  6 ++++--
 frontend/app/utils/markers.ts                  | 10 ++++++++++
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/app/components/markers/MarkersListItem.vue b/frontend/app/components/markers/MarkersListItem.vue
index c2bf6c5..5a43cf7 100644
--- a/frontend/app/components/markers/MarkersListItem.vue
+++ b/frontend/app/components/markers/MarkersListItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formatMarkerTime, markerTypeMeta } from "~/utils/markers";
+import { formatMarkerDuration, markerTypeMeta } from "~/utils/markers";
 import type { Marker } from "~/utils/markers";
 
 const props = defineProps<{
@@ -32,11 +32,7 @@ const active = computed(
             class="size-4 shrink-0"
             :class="markerTypeMeta(marker.type).iconColor"
         />
-        <span class="text-text-hint text-caption-1 w-40 shrink-0 tabular-nums">
-            {{ formatMarkerTime(marker.start) }} –
-            {{ formatMarkerTime(marker.end) }}
-        </span>
-        <span class="text-body-3 text-text-default truncate">
+        <span class="text-body-3 text-text-default flex-1 truncate">
             {{ marker.label || t(`markers.types.${marker.type}`) }}
         </span>
         <Icon
@@ -44,12 +40,8 @@ const active = computed(
             name="tabler:volume"
             class="text-primary-default size-3.5 shrink-0"
         />
-        <DesignBadge
-            v-if="marker.source === 'imported'"
-            variant="info"
-            class="ml-auto shrink-0"
-        >
-            {{ t("markers.source.imported") }}
-        </DesignBadge>
+        <span class="text-text-hint text-caption-1 shrink-0 tabular-nums">
+            {{ formatMarkerDuration(marker.end - marker.start) }}
+        </span>
     </button>
 </template>
diff --git a/frontend/app/components/markers/MarkersTimeline.vue b/frontend/app/components/markers/MarkersTimeline.vue
index a5af5c5..f989499 100644
--- a/frontend/app/components/markers/MarkersTimeline.vue
+++ b/frontend/app/components/markers/MarkersTimeline.vue
@@ -107,7 +107,7 @@ function laneLabel(type: MarkerType) {
                     >
                         <button
                             type="button"
-                            class="ds-focus-ring absolute top-0.5 bottom-0.5 flex items-center overflow-hidden rounded px-1.5 text-left text-xs text-white/95 transition-[outline]"
+                            class="ds-focus-ring absolute top-0.5 bottom-0.5 flex items-center overflow-hidden rounded text-left text-xs text-white/95 transition-[outline]"
                             :class="[
                                 markerTypeMeta(marker.type).color,
                                 selectedId === marker.id
@@ -120,7 +120,9 @@ function laneLabel(type: MarkerType) {
                                 emit('seek', marker.start);
                             "
                         >
-                            <span class="truncate">{{
+                            <!-- Padding lives on the (clipped) label so the block
+                                 itself can shrink to its true width. -->
+                            <span class="min-w-0 truncate px-1.5">{{
                                 marker.label || laneLabel(marker.type)
                             }}</span>
                         </button>
diff --git a/frontend/app/utils/markers.ts b/frontend/app/utils/markers.ts
index 529c109..b7a9e24 100644
--- a/frontend/app/utils/markers.ts
+++ b/frontend/app/utils/markers.ts
@@ -97,6 +97,16 @@ export function formatMarkerTime(seconds: number): string {
     return [hh, mm, ss].map((n) => n.toString().padStart(2, "0")).join(":");
 }
 
+// Compact marker length as M:SS (or H:MM:SS once it passes an hour).
+export function formatMarkerDuration(seconds: number): string {
+    const s = Math.max(0, Math.round(seconds));
+    const hh = Math.floor(s / 3600);
+    const mm = Math.floor((s % 3600) / 60);
+    const ss = s % 60;
+    const pad = (n: number) => n.toString().padStart(2, "0");
+    return hh > 0 ? `${hh}:${pad(mm)}:${pad(ss)}` : `${mm}:${pad(ss)}`;
+}
+
 // Parses "SS", "MM:SS" or "HH:MM:SS" into whole seconds; NaN if malformed.
 export function parseMarkerTime(value: string): number {
     const parts = value.trim().split(":");

From 634495554933b97e4892246993a0ac3f51dc5cfe Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 11:35:36 +0200
Subject: [PATCH 12/28] chore(markers): remove html comments

---
 frontend/app/components/markers/MarkersTimeline.vue | 4 ----
 frontend/app/pages/markers/[id].vue                 | 7 -------
 2 files changed, 11 deletions(-)

diff --git a/frontend/app/components/markers/MarkersTimeline.vue b/frontend/app/components/markers/MarkersTimeline.vue
index f989499..7daa9e0 100644
--- a/frontend/app/components/markers/MarkersTimeline.vue
+++ b/frontend/app/components/markers/MarkersTimeline.vue
@@ -76,7 +76,6 @@ function laneLabel(type: MarkerType) {
         </div>
 
         <div v-else class="flex gap-3">
-            <!-- Labels column; heights mirror the track rows so they align. -->
             <div class="flex w-32 shrink-0 flex-col gap-2">
                 <div
                     v-for="lane in lanes"
@@ -88,7 +87,6 @@ function laneLabel(type: MarkerType) {
                 </div>
             </div>
 
-            <!-- Tracks column; a single playhead is overlaid across all lanes. -->
             <div
                 class="relative flex grow flex-col gap-2"
                 @mousemove="onTracksMove"
@@ -120,8 +118,6 @@ function laneLabel(type: MarkerType) {
                                 emit('seek', marker.start);
                             "
                         >
-                            <!-- Padding lives on the (clipped) label so the block
-                                 itself can shrink to its true width. -->
                             <span class="min-w-0 truncate px-1.5">{{
                                 marker.label || laneLabel(marker.type)
                             }}</span>
diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index 1d3d4f0..44daf21 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -181,11 +181,9 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
             </div>
         </header>
 
-        <!-- Workspace: video + timeline (left), list + editor (right) -->
         <div
             class="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-[1fr_380px]"
         >
-            <!-- Left column -->
             <div class="flex min-h-0 flex-col gap-3">
                 <div
                     class="bg-surface-default relative aspect-video max-h-full w-full shrink-0 overflow-hidden rounded-xl shadow-xl"
@@ -209,7 +207,6 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
                         {{ t("markers.previewUnavailable") }}
                     </div>
 
-                    <!-- On-video overlay of markers active at the playhead -->
                     <div
                         v-if="activeMarkers.length"
                         class="pointer-events-none absolute top-4 left-4 flex flex-col gap-1.5"
@@ -231,7 +228,6 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
                     </div>
                 </div>
 
-                <!-- Controls (undo notice folds in on the right when present) -->
                 <div class="flex shrink-0 items-center gap-3">
                     <span class="text-text-default font-medium tabular-nums">
                         {{ formatMarkerTime(currentTime) }}
@@ -276,9 +272,6 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
                 />
             </div>
 
-            <!-- Right column: editor (inspector) on top, marker list below.
-                 The editor grows/shrinks with selection; LayoutGroup animates
-                 the list smoothly repositioning instead of jumping. -->
             <LayoutGroup>
                 <div class="flex min-h-0 flex-col gap-4">
                     <motion.div

From 71a05a58f1e76585d74e76fce717102d7b32d800 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 11:48:50 +0200
Subject: [PATCH 13/28] feat(markers): last added marker type

---
 frontend/app/pages/markers/[id].vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index 44daf21..f846811 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { LayoutGroup, motion } from "motion-v";
 import { formatMarkerTime, markerTypeMeta, sortMarkers } from "~/utils/markers";
-import type { Marker } from "~/utils/markers";
+import type { Marker, MarkerType } from "~/utils/markers";
 
 // Seconds the arrow keys jump the playhead.
 const SEEK_STEP_SECONDS = 5;
@@ -71,15 +71,23 @@ const activeMarkers = computed(() =>
 );
 
 // ---- Mutations --------------------------------------------------------------
+// Remembers the type of the last marker added/edited so the next one defaults
+// to it (persisted across sessions).
+const lastMarkerType = useLocalStorage<MarkerType>(
+    "markers-last-type",
+    "name-super",
+);
+
 function addMarker() {
     const start = Math.round(currentTime.value);
     const end = Math.min(start + 5, Math.round(effectiveDuration.value));
-    const marker = add({ start, end, type: "name-super" });
+    const marker = add({ start, end, type: lastMarkerType.value });
     selectedId.value = marker.id;
 }
 
 function onUpdate(patch: Partial<Omit<Marker, "id">>) {
     if (!selectedId.value) return;
+    if (patch.type) lastMarkerType.value = patch.type;
     update(selectedId.value, patch);
 }
 

From 68455534949d43ba4e804b5be40a0226c7912fe3 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 12:13:34 +0200
Subject: [PATCH 14/28] feat(markers): improve marker editor

---
 .../app/components/markers/MarkersEditor.vue  | 221 +++++++++++++-----
 frontend/app/pages/markers/[id].vue           |  14 ++
 frontend/locales/en.json                      |   8 +-
 frontend/locales/nb.json                      |   6 +-
 4 files changed, 188 insertions(+), 61 deletions(-)

diff --git a/frontend/app/components/markers/MarkersEditor.vue b/frontend/app/components/markers/MarkersEditor.vue
index 23d9cac..bd91ada 100644
--- a/frontend/app/components/markers/MarkersEditor.vue
+++ b/frontend/app/components/markers/MarkersEditor.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
     MARKER_TYPES,
+    formatMarkerDuration,
     formatMarkerTime,
     markerTypeMeta,
     parseMarkerTime,
@@ -16,10 +17,16 @@ const emit = defineEmits<{
     update: [patch: Partial<Omit<Marker, "id">>];
     remove: [];
     seek: [seconds: number];
+    preview: [start: number, end: number];
 }>();
 
 const { t } = useI18n();
 
+const NUDGE_STEP = 1;
+
+const iconBtnClass =
+    "ds-focus-ring text-text-muted hover:bg-surface-indent hover:text-text-default flex items-center justify-center rounded-lg p-1.5 transition-colors";
+
 const typeItems = computed(() =>
     MARKER_TYPES.map((m) => ({
         label: t(`markers.types.${m.value}`),
@@ -27,7 +34,6 @@ const typeItems = computed(() =>
     })),
 );
 
-// Two-way bridges that emit a patch on every change.
 const type = computed({
     get: () => props.marker?.type ?? "name-super",
     set: (v) => emit("update", { type: v as Marker["type"] }),
@@ -41,8 +47,6 @@ const note = computed({
     set: (v) => emit("update", { note: v }),
 });
 
-// In/out are edited as formatted strings, committed (parsed) on change so a
-// half-typed value never corrupts the marker.
 const startStr = ref("");
 const endStr = ref("");
 watch(
@@ -61,7 +65,6 @@ function commit(which: "start" | "end") {
     if (Number.isFinite(seconds)) {
         emit("update", { [which]: seconds });
     } else if (props.marker) {
-        // Revert the field to the last good value.
         startStr.value = formatMarkerTime(props.marker.start);
         endStr.value = formatMarkerTime(props.marker.end);
     }
@@ -71,6 +74,16 @@ function setToCurrent(which: "start" | "end") {
     emit("update", { [which]: Math.round(props.currentTime) });
 }
 
+function nudge(which: "start" | "end", delta: number) {
+    if (!props.marker) return;
+    const base = which === "start" ? props.marker.start : props.marker.end;
+    let value = Math.round(base) + delta;
+    if (which === "start")
+        value = Math.min(Math.max(0, value), props.marker.end);
+    else value = Math.max(value, props.marker.start);
+    emit("update", { [which]: value });
+}
+
 const duration = computed(() => {
     if (!props.marker) return 0;
     return Math.max(0, props.marker.end - props.marker.start);
@@ -98,7 +111,18 @@ const duration = computed(() => {
             <span class="text-body-3 text-text-muted mb-1 block">
                 {{ t("markers.editor.type") }}
             </span>
-            <DesignSelect v-model="type" :items="typeItems" />
+            <div class="flex items-center gap-2">
+                <Icon
+                    :name="markerTypeMeta(type).icon"
+                    class="size-5 shrink-0"
+                    :class="markerTypeMeta(type).iconColor"
+                />
+                <DesignSelect
+                    v-model="type"
+                    :items="typeItems"
+                    class="flex-1"
+                />
+            </div>
         </div>
 
         <DesignInput
@@ -114,66 +138,147 @@ const duration = computed(() => {
             :placeholder="t('markers.editor.notePlaceholder')"
         />
 
-        <div class="grid grid-cols-2 gap-3">
-            <div>
-                <span class="text-body-3 text-text-muted mb-1 block">
-                    {{ t("markers.editor.in") }}
+        <div>
+            <div class="mb-2 flex items-center justify-between">
+                <span class="text-body-3 text-text-muted">
+                    {{ t("markers.editor.timing") }}
                 </span>
-                <DesignInput
-                    v-model="startStr"
-                    class="tabular-nums"
-                    @change="commit('start')"
-                />
-                <div class="mt-1.5 flex gap-1">
-                    <DesignButton
-                        size="small"
-                        variant="tertiary"
-                        icon="tabler:player-track-prev"
-                        @click="setToCurrent('start')"
-                    >
-                        {{ t("markers.editor.setToPlayhead") }}
-                    </DesignButton>
-                    <DesignButton
-                        size="small"
-                        variant="tertiary"
-                        icon="tabler:player-play"
-                        :aria-label="t('markers.editor.seekTo')"
-                        @click="emit('seek', marker.start)"
+                <span class="text-text-hint text-caption-1 tabular-nums">
+                    {{ formatMarkerDuration(duration) }}
+                </span>
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <div class="flex items-center gap-2">
+                    <span class="text-text-hint text-caption-1 w-6 shrink-0">
+                        {{ t("markers.editor.in") }}
+                    </span>
+                    <DesignInput
+                        v-model="startStr"
+                        class="w-28 shrink-0 tabular-nums"
+                        @change="commit('start')"
                     />
+                    <div class="ml-auto flex items-center gap-0.5">
+                        <DesignTooltip
+                            :content="t('markers.editor.setToPlayhead')"
+                        >
+                            <button
+                                type="button"
+                                :class="iconBtnClass"
+                                @click="setToCurrent('start')"
+                            >
+                                <Icon
+                                    name="tabler:arrow-bar-to-left"
+                                    class="size-4"
+                                />
+                            </button>
+                        </DesignTooltip>
+                        <DesignTooltip :content="t('markers.editor.nudgeBack')">
+                            <button
+                                type="button"
+                                :class="iconBtnClass"
+                                @click="nudge('start', -NUDGE_STEP)"
+                            >
+                                <Icon name="tabler:minus" class="size-4" />
+                            </button>
+                        </DesignTooltip>
+                        <DesignTooltip
+                            :content="t('markers.editor.nudgeForward')"
+                        >
+                            <button
+                                type="button"
+                                :class="iconBtnClass"
+                                @click="nudge('start', NUDGE_STEP)"
+                            >
+                                <Icon name="tabler:plus" class="size-4" />
+                            </button>
+                        </DesignTooltip>
+                        <DesignTooltip :content="t('markers.editor.seekTo')">
+                            <button
+                                type="button"
+                                :class="iconBtnClass"
+                                @click="emit('seek', marker.start)"
+                            >
+                                <Icon
+                                    name="tabler:player-play"
+                                    class="size-4"
+                                />
+                            </button>
+                        </DesignTooltip>
+                    </div>
                 </div>
-            </div>
-            <div>
-                <span class="text-body-3 text-text-muted mb-1 block">
-                    {{ t("markers.editor.out") }}
-                </span>
-                <DesignInput
-                    v-model="endStr"
-                    class="tabular-nums"
-                    @change="commit('end')"
-                />
-                <div class="mt-1.5 flex gap-1">
-                    <DesignButton
-                        size="small"
-                        variant="tertiary"
-                        icon="tabler:player-track-next"
-                        @click="setToCurrent('end')"
-                    >
-                        {{ t("markers.editor.setToPlayhead") }}
-                    </DesignButton>
-                    <DesignButton
-                        size="small"
-                        variant="tertiary"
-                        icon="tabler:player-play"
-                        :aria-label="t('markers.editor.seekTo')"
-                        @click="emit('seek', marker.end)"
+
+                <div class="flex items-center gap-2">
+                    <span class="text-text-hint text-caption-1 w-6 shrink-0">
+                        {{ t("markers.editor.out") }}
+                    </span>
+                    <DesignInput
+                        v-model="endStr"
+                        class="w-28 shrink-0 tabular-nums"
+                        @change="commit('end')"
                     />
+                    <div class="ml-auto flex items-center gap-0.5">
+                        <DesignTooltip
+                            :content="t('markers.editor.setToPlayhead')"
+                        >
+                            <button
+                                type="button"
+                                :class="iconBtnClass"
+                                @click="setToCurrent('end')"
+                            >
+                                <Icon
+                                    name="tabler:arrow-bar-to-right"
+                                    class="size-4"
+                                />
+                            </button>
+                        </DesignTooltip>
+                        <DesignTooltip :content="t('markers.editor.nudgeBack')">
+                            <button
+                                type="button"
+                                :class="iconBtnClass"
+                                @click="nudge('end', -NUDGE_STEP)"
+                            >
+                                <Icon name="tabler:minus" class="size-4" />
+                            </button>
+                        </DesignTooltip>
+                        <DesignTooltip
+                            :content="t('markers.editor.nudgeForward')"
+                        >
+                            <button
+                                type="button"
+                                :class="iconBtnClass"
+                                @click="nudge('end', NUDGE_STEP)"
+                            >
+                                <Icon name="tabler:plus" class="size-4" />
+                            </button>
+                        </DesignTooltip>
+                        <DesignTooltip :content="t('markers.editor.seekTo')">
+                            <button
+                                type="button"
+                                :class="iconBtnClass"
+                                @click="emit('seek', marker.end)"
+                            >
+                                <Icon
+                                    name="tabler:player-play"
+                                    class="size-4"
+                                />
+                            </button>
+                        </DesignTooltip>
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <p class="text-text-hint text-caption-1">
-            {{ t("markers.editor.duration") }}: {{ Math.round(duration) }} s
-        </p>
+            <div class="mt-3 flex justify-center">
+                <DesignButton
+                    size="small"
+                    variant="tertiary"
+                    icon="tabler:player-play"
+                    @click="emit('preview', marker.start, marker.end)"
+                >
+                    {{ t("markers.editor.previewRange") }}
+                </DesignButton>
+            </div>
+        </div>
 
         <DesignButton
             variant="secondary"
diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index f846811..e1a9fae 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -38,10 +38,23 @@ const currentTime = ref(0);
 useEventListener(videoElement, "loadedmetadata", () => {
     videoDuration.value = videoElement.value?.duration ?? 0;
 });
+// When previewing a marker's range, stop playback once we reach its out-point.
+const previewEnd = ref<number | null>(null);
 useEventListener(videoElement, "timeupdate", () => {
     currentTime.value = videoElement.value?.currentTime ?? 0;
+    if (previewEnd.value !== null && currentTime.value >= previewEnd.value) {
+        videoElement.value?.pause();
+        previewEnd.value = null;
+    }
 });
 
+function previewRange(start: number, end: number) {
+    if (!videoElement.value) return;
+    videoElement.value.currentTime = start;
+    previewEnd.value = end;
+    videoElement.value.play();
+}
+
 // The timeline needs a span even before/without a loaded video: fall back to
 // the last marker's out-point (plus headroom) so blocks still render.
 const effectiveDuration = computed(() => {
@@ -293,6 +306,7 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
                             @update="onUpdate"
                             @remove="onRemove"
                             @seek="seek"
+                            @preview="previewRange"
                         />
                     </motion.div>
 
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 6ff9fc8..50227f5 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -267,8 +267,12 @@
             "notePlaceholder": "Optional note",
             "in": "In",
             "out": "Out",
-            "setToPlayhead": "Playhead",
-            "seekTo": "Seek to",
+            "timing": "Timing",
+            "setToPlayhead": "Set to playhead",
+            "seekTo": "Go to",
+            "nudgeBack": "−1 second",
+            "nudgeForward": "+1 second",
+            "previewRange": "Preview range",
             "duration": "Duration",
             "remove": "Remove marker",
             "noSelection": "Select a marker to edit, or add one at the playhead."
diff --git a/frontend/locales/nb.json b/frontend/locales/nb.json
index be9da53..19bbb11 100644
--- a/frontend/locales/nb.json
+++ b/frontend/locales/nb.json
@@ -267,8 +267,12 @@
             "notePlaceholder": "Valgfritt notat",
             "in": "Inn",
             "out": "Ut",
-            "setToPlayhead": "Spillehode",
+            "timing": "Tidsrom",
+            "setToPlayhead": "Sett til spillehodet",
             "seekTo": "Gå til",
+            "nudgeBack": "−1 sekund",
+            "nudgeForward": "+1 sekund",
+            "previewRange": "Forhåndsvis utsnitt",
             "duration": "Varighet",
             "remove": "Fjern markør",
             "noSelection": "Velg en markør for å redigere, eller legg til en ved spillehodet."

From f08771be939bba4e14a99f3d5d79902c119ff7b5 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 12:27:52 +0200
Subject: [PATCH 15/28] feat(markers): zooming + auto-focus

---
 .../app/components/markers/MarkersEditor.vue  |  28 ++-
 .../components/markers/MarkersListItem.vue    |  33 ++-
 .../components/markers/MarkersTimeline.vue    | 204 +++++++++++++-----
 frontend/app/pages/markers/[id].vue           |   3 +
 4 files changed, 201 insertions(+), 67 deletions(-)

diff --git a/frontend/app/components/markers/MarkersEditor.vue b/frontend/app/components/markers/MarkersEditor.vue
index bd91ada..9fd294d 100644
--- a/frontend/app/components/markers/MarkersEditor.vue
+++ b/frontend/app/components/markers/MarkersEditor.vue
@@ -62,12 +62,22 @@ watch(
 function commit(which: "start" | "end") {
     const raw = which === "start" ? startStr.value : endStr.value;
     const seconds = parseMarkerTime(raw);
-    if (Number.isFinite(seconds)) {
-        emit("update", { [which]: seconds });
-    } else if (props.marker) {
-        startStr.value = formatMarkerTime(props.marker.start);
-        endStr.value = formatMarkerTime(props.marker.end);
+    if (!Number.isFinite(seconds) || !props.marker) {
+        // Revert the field to the last good value.
+        if (props.marker) {
+            startStr.value = formatMarkerTime(props.marker.start);
+            endStr.value = formatMarkerTime(props.marker.end);
+        }
+        return;
     }
+    // Clamp so the range can't invert (Out before In or vice-versa).
+    const value =
+        which === "start"
+            ? Math.min(Math.max(0, seconds), props.marker.end)
+            : Math.max(seconds, props.marker.start);
+    emit("update", { [which]: value });
+    if (which === "start") startStr.value = formatMarkerTime(value);
+    else endStr.value = formatMarkerTime(value);
 }
 
 function setToCurrent(which: "start" | "end") {
@@ -88,6 +98,13 @@ const duration = computed(() => {
     if (!props.marker) return 0;
     return Math.max(0, props.marker.end - props.marker.start);
 });
+
+const labelInput = useTemplateRef("labelInput");
+function focusLabel() {
+    const root = labelInput.value?.$el as HTMLElement | undefined;
+    root?.querySelector("input")?.focus();
+}
+defineExpose({ focusLabel });
 </script>
 
 <template>
@@ -126,6 +143,7 @@ const duration = computed(() => {
         </div>
 
         <DesignInput
+            ref="labelInput"
             v-model="label"
             :label="t('markers.editor.label')"
             :placeholder="t('markers.editor.labelPlaceholder')"
diff --git a/frontend/app/components/markers/MarkersListItem.vue b/frontend/app/components/markers/MarkersListItem.vue
index 5a43cf7..b42dc0a 100644
--- a/frontend/app/components/markers/MarkersListItem.vue
+++ b/frontend/app/components/markers/MarkersListItem.vue
@@ -12,19 +12,46 @@ defineEmits<{ select: [] }>();
 
 const { t } = useI18n();
 
-// Highlight markers whose in/out range contains the playhead.
 const active = computed(
     () =>
         props.currentTime >= props.marker.start &&
         props.currentTime <= props.marker.end,
 );
+
+// Bring the row into view when it becomes the selected one (e.g. selected from
+// the timeline or after adding), without scrolling if it's already visible.
+const el = useTemplateRef("el");
+watch(
+    () => props.selected,
+    (isSelected) => {
+        if (isSelected)
+            nextTick(() =>
+                el.value?.scrollIntoView({
+                    block: "nearest",
+                    behavior: "smooth",
+                }),
+            );
+    },
+);
+
+const displayLabel = computed(
+    () => props.marker.label || t(`markers.types.${props.marker.type}`),
+);
 </script>
 
 <template>
     <button
+        ref="el"
         type="button"
+        :title="displayLabel"
         class="ds-focus-ring flex w-full items-center gap-3 rounded-lg px-3 py-1.5 text-left transition-colors"
-        :class="selected ? 'bg-surface-indent' : 'hover:bg-surface-indent/60'"
+        :class="
+            selected
+                ? 'bg-surface-indent'
+                : active
+                  ? 'bg-surface-indent/40'
+                  : 'hover:bg-surface-indent/60'
+        "
         @click="$emit('select')"
     >
         <Icon
@@ -33,7 +60,7 @@ const active = computed(
             :class="markerTypeMeta(marker.type).iconColor"
         />
         <span class="text-body-3 text-text-default flex-1 truncate">
-            {{ marker.label || t(`markers.types.${marker.type}`) }}
+            {{ displayLabel }}
         </span>
         <Icon
             v-if="active"
diff --git a/frontend/app/components/markers/MarkersTimeline.vue b/frontend/app/components/markers/MarkersTimeline.vue
index 7daa9e0..b1e567a 100644
--- a/frontend/app/components/markers/MarkersTimeline.vue
+++ b/frontend/app/components/markers/MarkersTimeline.vue
@@ -20,7 +20,6 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
-// One lane per marker type that actually has markers, in the canonical order.
 const lanes = computed(() =>
     MARKER_TYPES.filter((meta) =>
         props.markers.some((m) => m.type === meta.value),
@@ -37,13 +36,12 @@ function pct(seconds: number) {
 
 function blockStyle(marker: Marker) {
     const left = pct(marker.start);
-    const width = Math.max(pct(marker.end) - left, 0.6);
+    const width = Math.max(pct(marker.end) - left, 0.4);
     return { left: `${left}%`, width: `${width}%` };
 }
 
 const playheadStyle = computed(() => ({ left: `${pct(props.current)}%` }));
 
-// Muted hover playhead — previews where a click on the tracks would seek.
 const hoverLeft = ref<string | null>(null);
 function onTracksMove(event: MouseEvent) {
     const el = event.currentTarget as HTMLElement;
@@ -52,7 +50,6 @@ function onTracksMove(event: MouseEvent) {
     hoverLeft.value = `${Math.min(100, Math.max(0, ratio * 100))}%`;
 }
 
-// Click anywhere on a lane background to scrub there.
 function onLaneClick(event: MouseEvent) {
     if (!props.duration) return;
     const el = event.currentTarget as HTMLElement;
@@ -64,6 +61,49 @@ function onLaneClick(event: MouseEvent) {
 function laneLabel(type: MarkerType) {
     return t(`markers.types.${type}`);
 }
+
+// ---- Zoom + ruler -----------------------------------------------------------
+const zoom = ref(1);
+const scroll = useTemplateRef("scroll");
+const { width: viewportWidth } = useElementSize(scroll);
+
+// Nice, human-readable tick spacings (seconds) to choose from.
+const NICE_STEPS = [5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600, 7200];
+const tickStep = computed(() => {
+    const contentWidth = viewportWidth.value * zoom.value;
+    if (!contentWidth || !props.duration) return 600;
+    const pxPerSec = contentWidth / props.duration;
+    const minSecondsPerTick = 72 / pxPerSec; // keep labels ~72px apart
+    return (
+        NICE_STEPS.find((s) => s >= minSecondsPerTick) ??
+        NICE_STEPS[NICE_STEPS.length - 1]!
+    );
+});
+const ticks = computed(() => {
+    const step = tickStep.value;
+    const out: { seconds: number; left: string; label: string }[] = [];
+    for (let s = 0; s <= props.duration; s += step) {
+        out.push({
+            seconds: s,
+            left: `${pct(s)}%`,
+            label: formatMarkerTime(s),
+        });
+    }
+    return out;
+});
+
+// Keep the playhead visible: recenter only when it nears/leaves the edges.
+function keepPlayheadVisible() {
+    const el = scroll.value;
+    if (!el || !props.duration) return;
+    const x = (props.current / props.duration) * el.scrollWidth;
+    const pad = 40;
+    if (x < el.scrollLeft + pad || x > el.scrollLeft + el.clientWidth - pad) {
+        el.scrollTo({ left: x - el.clientWidth / 2, behavior: "smooth" });
+    }
+}
+watch(() => props.current, keepPlayheadVisible);
+watch(zoom, () => nextTick(keepPlayheadVisible));
 </script>
 
 <template>
@@ -75,66 +115,112 @@ function laneLabel(type: MarkerType) {
             {{ t("markers.timeline.empty") }}
         </div>
 
-        <div v-else class="flex gap-3">
-            <div class="flex w-32 shrink-0 flex-col gap-2">
-                <div
-                    v-for="lane in lanes"
-                    :key="lane.value"
-                    class="text-text-muted flex h-7 items-center gap-1.5 text-sm"
-                >
-                    <Icon :name="lane.icon" class="size-4 shrink-0" />
-                    <span class="truncate">{{ laneLabel(lane.value) }}</span>
-                </div>
+        <template v-else>
+            <div class="mb-2 flex items-center justify-end gap-2">
+                <Icon name="tabler:zoom-in" class="text-text-hint size-4" />
+                <DesignSlider
+                    v-model="zoom"
+                    :min="1"
+                    :max="20"
+                    :step="0.5"
+                    class="w-40"
+                />
             </div>
 
-            <div
-                class="relative flex grow flex-col gap-2"
-                @mousemove="onTracksMove"
-                @mouseleave="hoverLeft = null"
-            >
-                <div
-                    v-for="lane in lanes"
-                    :key="lane.value"
-                    class="bg-surface-indent relative h-7 cursor-pointer overflow-hidden rounded-md"
-                    @click="onLaneClick"
-                >
-                    <DesignTooltip
-                        v-for="marker in lane.markers"
-                        :key="marker.id"
-                        :content="`${marker.label || laneLabel(marker.type)} · ${formatMarkerTime(marker.start)}–${formatMarkerTime(marker.end)}`"
-                    >
-                        <button
-                            type="button"
-                            class="ds-focus-ring absolute top-0.5 bottom-0.5 flex items-center overflow-hidden rounded text-left text-xs text-white/95 transition-[outline]"
-                            :class="[
-                                markerTypeMeta(marker.type).color,
-                                selectedId === marker.id
-                                    ? 'outline-text-default z-10 outline outline-2 outline-offset-1'
-                                    : 'opacity-80 hover:opacity-100',
-                            ]"
-                            :style="blockStyle(marker)"
-                            @click.stop="
-                                emit('select', marker.id);
-                                emit('seek', marker.start);
-                            "
+            <div class="flex gap-3">
+                <div class="w-28 shrink-0">
+                    <div class="mb-2 h-5" />
+                    <div class="flex flex-col gap-2">
+                        <div
+                            v-for="lane in lanes"
+                            :key="lane.value"
+                            class="text-text-muted flex h-7 items-center gap-1.5 text-sm"
                         >
-                            <span class="min-w-0 truncate px-1.5">{{
-                                marker.label || laneLabel(marker.type)
-                            }}</span>
-                        </button>
-                    </DesignTooltip>
+                            <Icon :name="lane.icon" class="size-4 shrink-0" />
+                            <span class="truncate">
+                                {{ laneLabel(lane.value) }}
+                            </span>
+                        </div>
+                    </div>
                 </div>
 
-                <div
-                    v-if="hoverLeft"
-                    class="bg-text-default/30 pointer-events-none absolute inset-y-0 z-10 w-px"
-                    :style="{ left: hoverLeft }"
-                />
-                <div
-                    class="bg-text-default pointer-events-none absolute inset-y-0 z-20 w-px"
-                    :style="playheadStyle"
-                />
+                <div ref="scroll" class="grow overflow-x-auto">
+                    <div
+                        class="relative"
+                        :style="{ width: `${zoom * 100}%`, minWidth: '100%' }"
+                    >
+                        <div class="relative mb-2 h-5">
+                            <div
+                                v-for="tick in ticks"
+                                :key="tick.seconds"
+                                class="absolute inset-y-0"
+                                :style="{ left: tick.left }"
+                            >
+                                <span
+                                    class="text-text-hint absolute top-0 -translate-x-1/2 text-[10px] whitespace-nowrap tabular-nums"
+                                >
+                                    {{ tick.label }}
+                                </span>
+                                <span
+                                    class="bg-border-1 absolute bottom-0 h-1.5 w-px"
+                                />
+                            </div>
+                        </div>
+
+                        <div
+                            class="relative flex flex-col gap-2"
+                            @mousemove="onTracksMove"
+                            @mouseleave="hoverLeft = null"
+                        >
+                            <div
+                                v-for="lane in lanes"
+                                :key="lane.value"
+                                class="bg-surface-indent relative h-7 cursor-pointer overflow-hidden rounded-md"
+                                @click="onLaneClick"
+                            >
+                                <DesignTooltip
+                                    v-for="marker in lane.markers"
+                                    :key="marker.id"
+                                    :content="`${marker.label || laneLabel(marker.type)} · ${formatMarkerTime(marker.start)}–${formatMarkerTime(marker.end)}`"
+                                >
+                                    <button
+                                        type="button"
+                                        class="ds-focus-ring absolute top-0.5 bottom-0.5 flex items-center overflow-hidden rounded text-left text-xs text-white/95 transition-[outline]"
+                                        :class="[
+                                            markerTypeMeta(marker.type).color,
+                                            selectedId === marker.id
+                                                ? 'outline-text-default z-10 outline outline-2 outline-offset-1'
+                                                : 'opacity-80 hover:opacity-100',
+                                        ]"
+                                        :style="blockStyle(marker)"
+                                        @click.stop="
+                                            emit('select', marker.id);
+                                            emit('seek', marker.start);
+                                        "
+                                    >
+                                        <span class="min-w-0 truncate px-1.5">
+                                            {{
+                                                marker.label ||
+                                                laneLabel(marker.type)
+                                            }}
+                                        </span>
+                                    </button>
+                                </DesignTooltip>
+                            </div>
+
+                            <div
+                                v-if="hoverLeft"
+                                class="bg-text-default/30 pointer-events-none absolute inset-y-0 z-10 w-px"
+                                :style="{ left: hoverLeft }"
+                            />
+                            <div
+                                class="bg-text-default pointer-events-none absolute inset-y-0 z-20 w-px"
+                                :style="playheadStyle"
+                            />
+                        </div>
+                    </div>
+                </div>
             </div>
-        </div>
+        </template>
     </div>
 </template>
diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index e1a9fae..bd84f23 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -91,11 +91,13 @@ const lastMarkerType = useLocalStorage<MarkerType>(
     "name-super",
 );
 
+const editor = useTemplateRef("editor");
 function addMarker() {
     const start = Math.round(currentTime.value);
     const end = Math.min(start + 5, Math.round(effectiveDuration.value));
     const marker = add({ start, end, type: lastMarkerType.value });
     selectedId.value = marker.id;
+    nextTick(() => editor.value?.focusLabel());
 }
 
 function onUpdate(patch: Partial<Omit<Marker, "id">>) {
@@ -301,6 +303,7 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
                         class="shrink-0"
                     >
                         <MarkersEditor
+                            ref="editor"
                             :marker="selectedMarker"
                             :current-time="currentTime"
                             @update="onUpdate"

From 858fd994b04a0c2acc02c0b55dc9745fd911d87c Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 12:28:39 +0200
Subject: [PATCH 16/28] feat(markers): dont show time in tooltips

---
 frontend/app/components/markers/MarkersTimeline.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/app/components/markers/MarkersTimeline.vue b/frontend/app/components/markers/MarkersTimeline.vue
index b1e567a..8d4cf06 100644
--- a/frontend/app/components/markers/MarkersTimeline.vue
+++ b/frontend/app/components/markers/MarkersTimeline.vue
@@ -181,7 +181,9 @@ watch(zoom, () => nextTick(keepPlayheadVisible));
                                 <DesignTooltip
                                     v-for="marker in lane.markers"
                                     :key="marker.id"
-                                    :content="`${marker.label || laneLabel(marker.type)} · ${formatMarkerTime(marker.start)}–${formatMarkerTime(marker.end)}`"
+                                    :content="
+                                        marker.label || laneLabel(marker.type)
+                                    "
                                 >
                                     <button
                                         type="button"

From 4c0f7263ad457ef301285418f1cea53b681d41e1 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 13:10:38 +0200
Subject: [PATCH 17/28] fix(markers): remove direct manipulation of markers in
 timeline

---
 .../components/markers/MarkersTimeline.vue    |  10 +-
 frontend/app/composables/useMarkers.ts        |  22 +++-
 frontend/app/pages/markers/[id].vue           | 119 +++++++++++++++++-
 frontend/locales/en.json                      |  14 ++-
 frontend/locales/nb.json                      |  14 ++-
 5 files changed, 164 insertions(+), 15 deletions(-)

diff --git a/frontend/app/components/markers/MarkersTimeline.vue b/frontend/app/components/markers/MarkersTimeline.vue
index 8d4cf06..e995f22 100644
--- a/frontend/app/components/markers/MarkersTimeline.vue
+++ b/frontend/app/components/markers/MarkersTimeline.vue
@@ -67,13 +67,12 @@ const zoom = ref(1);
 const scroll = useTemplateRef("scroll");
 const { width: viewportWidth } = useElementSize(scroll);
 
-// Nice, human-readable tick spacings (seconds) to choose from.
 const NICE_STEPS = [5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600, 7200];
 const tickStep = computed(() => {
     const contentWidth = viewportWidth.value * zoom.value;
     if (!contentWidth || !props.duration) return 600;
     const pxPerSec = contentWidth / props.duration;
-    const minSecondsPerTick = 72 / pxPerSec; // keep labels ~72px apart
+    const minSecondsPerTick = 72 / pxPerSec;
     return (
         NICE_STEPS.find((s) => s >= minSecondsPerTick) ??
         NICE_STEPS[NICE_STEPS.length - 1]!
@@ -83,16 +82,11 @@ const ticks = computed(() => {
     const step = tickStep.value;
     const out: { seconds: number; left: string; label: string }[] = [];
     for (let s = 0; s <= props.duration; s += step) {
-        out.push({
-            seconds: s,
-            left: `${pct(s)}%`,
-            label: formatMarkerTime(s),
-        });
+        out.push({ seconds: s, left: `${pct(s)}%`, label: formatMarkerTime(s) });
     }
     return out;
 });
 
-// Keep the playhead visible: recenter only when it nears/leaves the edges.
 function keepPlayheadVisible() {
     const el = scroll.value;
     if (!el || !props.duration) return;
diff --git a/frontend/app/composables/useMarkers.ts b/frontend/app/composables/useMarkers.ts
index 1875008..18ff88c 100644
--- a/frontend/app/composables/useMarkers.ts
+++ b/frontend/app/composables/useMarkers.ts
@@ -62,6 +62,11 @@ export function useMarkers(vxId: MaybeRefOrGetter<string>) {
     // persists every mutation automatically.
     const markers = useLocalStorage<Marker[]>(storageKey, seedMarkers());
 
+    // True when there are local changes not yet submitted (via `save`). Starts
+    // clean; every mutation dirties it. With a real backend this would compare
+    // against the last submitted state.
+    const dirty = ref(false);
+
     function add(
         partial: Partial<Marker> & Pick<Marker, "start" | "end">,
     ): Marker {
@@ -73,6 +78,7 @@ export function useMarkers(vxId: MaybeRefOrGetter<string>) {
             ...partial,
         };
         markers.value = [...markers.value, marker];
+        dirty.value = true;
         return marker;
     }
 
@@ -80,16 +86,19 @@ export function useMarkers(vxId: MaybeRefOrGetter<string>) {
         markers.value = markers.value.map((m) =>
             m.id === id ? { ...m, ...patch } : m,
         );
+        dirty.value = true;
     }
 
     function remove(id: string) {
         markers.value = markers.value.filter((m) => m.id !== id);
+        dirty.value = true;
     }
 
     // Restore a previously removed marker (used by the undo toast).
     function restore(marker: Marker) {
         if (markers.value.some((m) => m.id === marker.id)) return;
         markers.value = [...markers.value, marker];
+        dirty.value = true;
     }
 
     const saving = ref(false);
@@ -98,6 +107,7 @@ export function useMarkers(vxId: MaybeRefOrGetter<string>) {
         saving.value = true;
         try {
             await new Promise((resolve) => setTimeout(resolve, 400));
+            dirty.value = false;
         } finally {
             saving.value = false;
         }
@@ -107,5 +117,15 @@ export function useMarkers(vxId: MaybeRefOrGetter<string>) {
         return markers.value.filter((m) => m.type === type).length;
     }
 
-    return { markers, add, update, remove, restore, save, saving, countByType };
+    return {
+        markers,
+        dirty,
+        add,
+        update,
+        remove,
+        restore,
+        save,
+        saving,
+        countByType,
+    };
 }
diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index bd84f23..4db2a34 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { LayoutGroup, motion } from "motion-v";
+import { onBeforeRouteLeave } from "vue-router";
 import { formatMarkerTime, markerTypeMeta, sortMarkers } from "~/utils/markers";
 import type { Marker, MarkerType } from "~/utils/markers";
 
@@ -22,7 +23,7 @@ onMounted(() => {
 });
 
 const api = useAPI();
-const { markers, add, update, remove, restore, save, saving } =
+const { markers, dirty, add, update, remove, restore, save, saving } =
     useMarkers(vxId);
 
 // ---- Video preview (reuses the existing getPreview RPC, like shorts) --------
@@ -106,6 +107,34 @@ function onUpdate(patch: Partial<Omit<Marker, "id">>) {
     update(selectedId.value, patch);
 }
 
+// Select the previous/next marker (by time) and seek to it.
+function selectAdjacent(direction: 1 | -1) {
+    const list = visibleMarkers.value;
+    if (!list.length) return;
+    const index = list.findIndex((m) => m.id === selectedId.value);
+    const next =
+        index === -1
+            ? direction === 1
+                ? 0
+                : list.length - 1
+            : Math.max(0, Math.min(list.length - 1, index + direction));
+    const marker = list[next];
+    if (marker) {
+        selectedId.value = marker.id;
+        seek(marker.start);
+    }
+}
+
+// Set the selected marker's In/Out to the playhead (clamped so it can't invert).
+function setSelectedBound(which: "start" | "end") {
+    const marker = selectedMarker.value;
+    if (!marker) return;
+    const now = Math.round(currentTime.value);
+    if (which === "start")
+        update(marker.id, { start: Math.min(now, marker.end) });
+    else update(marker.id, { end: Math.max(now, marker.start) });
+}
+
 const toaster = useDesignToaster();
 const lastRemoved = ref<Marker>();
 let undoTimer: ReturnType<typeof setTimeout> | undefined;
@@ -144,6 +173,17 @@ function isTyping(target: EventTarget | null) {
     return tag === "INPUT" || tag === "TEXTAREA" || target.isContentEditable;
 }
 
+const showShortcuts = ref(false);
+const shortcuts = computed(() => [
+    { keys: ["Space"], label: t("markers.shortcuts.playPause") },
+    { keys: ["←", "→"], label: t("markers.shortcuts.seek") },
+    { keys: ["↑", "↓"], label: t("markers.shortcuts.prevNext") },
+    { keys: ["M"], label: t("markers.shortcuts.add") },
+    { keys: ["I", "O"], label: t("markers.shortcuts.setInOut") },
+    { keys: ["Del"], label: t("markers.shortcuts.remove") },
+    { keys: ["?"], label: t("markers.shortcuts.help") },
+]);
+
 useEventListener(window, "keydown", (event: KeyboardEvent) => {
     if (isTyping(event.target)) return;
     const el = videoElement.value;
@@ -159,12 +199,43 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
         case "ArrowLeft":
             if (el) el.currentTime -= SEEK_STEP_SECONDS;
             break;
+        case "ArrowUp":
+            event.preventDefault();
+            selectAdjacent(-1);
+            break;
+        case "ArrowDown":
+            event.preventDefault();
+            selectAdjacent(1);
+            break;
         case "m":
         case "M":
             addMarker();
             break;
+        case "i":
+        case "I":
+            setSelectedBound("start");
+            break;
+        case "o":
+        case "O":
+            setSelectedBound("end");
+            break;
+        case "Delete":
+        case "Backspace":
+            onRemove();
+            break;
+        case "?":
+            showShortcuts.value = !showShortcuts.value;
+            break;
     }
 });
+
+// Warn before losing unsaved local changes.
+onBeforeRouteLeave(() => {
+    if (dirty.value && !window.confirm(t("markers.leaveConfirm"))) return false;
+});
+useEventListener(window, "beforeunload", (event: BeforeUnloadEvent) => {
+    if (dirty.value) event.preventDefault();
+});
 </script>
 
 <template>
@@ -189,14 +260,28 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
             </div>
             <div class="flex items-center gap-3">
                 <span
-                    class="text-text-hint text-caption-1 inline-flex items-center gap-1"
+                    class="text-caption-1 inline-flex items-center gap-1"
+                    :class="dirty ? 'text-semantic-warning' : 'text-text-hint'"
                 >
-                    <Icon name="tabler:device-floppy" class="size-3.5" />
-                    {{ t("markers.savedLocally") }}
+                    <Icon
+                        :name="dirty ? 'tabler:point-filled' : 'tabler:check'"
+                        class="size-3.5"
+                    />
+                    {{ dirty ? t("markers.unsaved") : t("markers.allSaved") }}
                 </span>
+                <DesignTooltip :content="t('markers.shortcuts.title')">
+                    <button
+                        type="button"
+                        class="ds-focus-ring text-text-muted hover:bg-surface-indent hover:text-text-default flex items-center justify-center rounded-lg p-2 transition-colors"
+                        @click="showShortcuts = true"
+                    >
+                        <Icon name="tabler:keyboard" class="size-4" />
+                    </button>
+                </DesignTooltip>
                 <DesignButton
                     icon="tabler:cloud-upload"
                     :loading="saving"
+                    :disabled="!dirty"
                     @click="onSave"
                 >
                     {{ t("markers.save") }}
@@ -352,5 +437,31 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
                 </div>
             </LayoutGroup>
         </div>
+
+        <DesignDialog
+            v-model:open="showShortcuts"
+            :title="t('markers.shortcuts.title')"
+        >
+            <div class="flex flex-col gap-2">
+                <div
+                    v-for="(shortcut, i) in shortcuts"
+                    :key="i"
+                    class="flex items-center justify-between gap-4"
+                >
+                    <span class="text-body-3 text-text-default">
+                        {{ shortcut.label }}
+                    </span>
+                    <span class="flex shrink-0 items-center gap-1">
+                        <kbd
+                            v-for="key in shortcut.keys"
+                            :key="key"
+                            class="border-border-1 bg-surface-indent text-text-muted text-caption-1 min-w-6 rounded border px-1.5 py-0.5 text-center tabular-nums"
+                        >
+                            {{ key }}
+                        </kbd>
+                    </span>
+                </div>
+            </div>
+        </DesignDialog>
     </div>
 </template>
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 50227f5..d4bb32f 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -227,12 +227,24 @@
         "save": "Save",
         "saved": "Markers saved",
         "savedMock": "Saved (mock — no backend yet)",
-        "savedLocally": "Saved locally",
+        "unsaved": "Unsaved changes",
+        "allSaved": "Saved",
+        "leaveConfirm": "You have unsaved changes. Leave without saving?",
         "addAtPlayhead": "Add marker at playhead",
         "addHint": "Press M to add a marker",
         "previewUnavailable": "Preview unavailable",
         "removed": "Removed \"{label}\"",
         "undo": "Undo",
+        "shortcuts": {
+            "title": "Keyboard shortcuts",
+            "playPause": "Play / pause",
+            "seek": "Seek ±5 seconds",
+            "prevNext": "Previous / next marker",
+            "add": "Add marker at playhead",
+            "setInOut": "Set In / Out to playhead",
+            "remove": "Remove selected marker",
+            "help": "Show this help"
+        },
         "index": {
             "title": "Markers",
             "description": "Open a Cantemo asset by its VX-ID to manage markers.",
diff --git a/frontend/locales/nb.json b/frontend/locales/nb.json
index 19bbb11..411b077 100644
--- a/frontend/locales/nb.json
+++ b/frontend/locales/nb.json
@@ -227,12 +227,24 @@
         "save": "Lagre",
         "saved": "Markører lagret",
         "savedMock": "Lagret (mock — ingen backend ennå)",
-        "savedLocally": "Lagret lokalt",
+        "unsaved": "Ulagrede endringer",
+        "allSaved": "Lagret",
+        "leaveConfirm": "Du har ulagrede endringer. Forlate uten å lagre?",
         "addAtPlayhead": "Legg til markør ved spillehodet",
         "addHint": "Trykk M for å legge til en markør",
         "previewUnavailable": "Forhåndsvisning utilgjengelig",
         "removed": "Fjernet «{label}»",
         "undo": "Angre",
+        "shortcuts": {
+            "title": "Hurtigtaster",
+            "playPause": "Spill / pause",
+            "seek": "Spol ±5 sekunder",
+            "prevNext": "Forrige / neste markør",
+            "add": "Legg til markør ved spillehodet",
+            "setInOut": "Sett inn / ut til spillehodet",
+            "remove": "Fjern valgt markør",
+            "help": "Vis denne hjelpen"
+        },
         "index": {
             "title": "Markører",
             "description": "Åpne et Cantemo-element med VX-ID for å håndtere markører.",

From 886e54d3ac215e5c3ad225bc5b31bdd9209c9363 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 13:13:58 +0200
Subject: [PATCH 18/28] chore(markers): remove link in header

---
 frontend/app/pages/markers/[id].vue | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index 4db2a34..c727162 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -245,19 +245,11 @@ useEventListener(window, "beforeunload", (event: BeforeUnloadEvent) => {
         <header
             class="flex shrink-0 flex-wrap items-center justify-between gap-3"
         >
-            <div>
-                <NuxtLink
-                    to="/markers/"
-                    class="text-text-hint hover:text-text-default text-caption-1 inline-flex items-center gap-1"
-                >
-                    <Icon name="tabler:chevron-left" class="size-3.5" />
-                    {{ t("markers.index.title") }}
-                </NuxtLink>
-                <h1 class="text-heading-3 text-text-default">
-                    {{ t("markers.editor.pageTitle") }}
-                    <span class="text-text-muted">{{ vxId }}</span>
-                </h1>
-            </div>
+            <h1 class="text-heading-3 text-text-default">
+                {{ t("markers.editor.pageTitle") }}
+                <span class="text-text-muted">{{ vxId }}</span>
+            </h1>
+
             <div class="flex items-center gap-3">
                 <span
                     class="text-caption-1 inline-flex items-center gap-1"

From f4a0e91dc9311de62a1bc1c0444aa188f2cda9a1 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 13:30:36 +0200
Subject: [PATCH 19/28] feat(markers): align design more with design system

---
 frontend/app/components/markers/MarkersEditor.vue   |  2 +-
 frontend/app/components/markers/MarkersTimeline.vue | 10 ++++++++--
 frontend/app/pages/markers/[id].vue                 |  4 ++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/markers/MarkersEditor.vue b/frontend/app/components/markers/MarkersEditor.vue
index 9fd294d..9140d28 100644
--- a/frontend/app/components/markers/MarkersEditor.vue
+++ b/frontend/app/components/markers/MarkersEditor.vue
@@ -110,7 +110,7 @@ defineExpose({ focusLabel });
 <template>
     <div
         v-if="marker"
-        class="border-border-1 bg-surface-default flex flex-col gap-4 rounded-xl border p-4"
+        class="gradient-border bg-surface-default shadow-resting flex flex-col gap-4 rounded-2xl p-4"
     >
         <div class="flex items-center justify-between">
             <h2 class="text-title-2 text-text-default flex items-center gap-2">
diff --git a/frontend/app/components/markers/MarkersTimeline.vue b/frontend/app/components/markers/MarkersTimeline.vue
index e995f22..a95836f 100644
--- a/frontend/app/components/markers/MarkersTimeline.vue
+++ b/frontend/app/components/markers/MarkersTimeline.vue
@@ -82,7 +82,11 @@ const ticks = computed(() => {
     const step = tickStep.value;
     const out: { seconds: number; left: string; label: string }[] = [];
     for (let s = 0; s <= props.duration; s += step) {
-        out.push({ seconds: s, left: `${pct(s)}%`, label: formatMarkerTime(s) });
+        out.push({
+            seconds: s,
+            left: `${pct(s)}%`,
+            label: formatMarkerTime(s),
+        });
     }
     return out;
 });
@@ -101,7 +105,9 @@ watch(zoom, () => nextTick(keepPlayheadVisible));
 </script>
 
 <template>
-    <div class="border-border-1 bg-surface-default rounded-xl border p-3">
+    <div
+        class="gradient-border bg-surface-default shadow-resting rounded-2xl p-3"
+    >
         <div
             v-if="lanes.length === 0"
             class="text-text-hint py-6 text-center text-sm"
diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index c727162..1acb3ef 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -286,7 +286,7 @@ useEventListener(window, "beforeunload", (event: BeforeUnloadEvent) => {
         >
             <div class="flex min-h-0 flex-col gap-3">
                 <div
-                    class="bg-surface-default relative aspect-video max-h-full w-full shrink-0 overflow-hidden rounded-xl shadow-xl"
+                    class="bg-surface-default shadow-resting gradient-border relative aspect-video max-h-full w-full shrink-0 overflow-hidden rounded-2xl"
                 >
                     <video
                         v-if="videoStatus === 'success' && videoUrl"
@@ -393,7 +393,7 @@ useEventListener(window, "beforeunload", (event: BeforeUnloadEvent) => {
                     <motion.div
                         layout="position"
                         :transition="{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }"
-                        class="border-border-1 bg-surface-default flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border"
+                        class="gradient-border bg-surface-default shadow-resting flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl"
                     >
                         <div
                             class="border-border-1 text-text-muted flex shrink-0 items-center justify-between border-b px-4 py-2 text-sm"

From 7bbc12b789b8871bdd0a8f20e60df2fe6719dd76 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 13:37:41 +0200
Subject: [PATCH 20/28] chore(markers): design fix

---
 frontend/app/pages/markers/[id].vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index 1acb3ef..125883c 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -314,16 +314,16 @@ useEventListener(window, "beforeunload", (event: BeforeUnloadEvent) => {
                         <div
                             v-for="m in activeMarkers"
                             :key="m.id"
-                            class="flex items-center gap-2 rounded-md bg-black/70 px-3 py-1.5 text-sm text-white backdrop-blur"
+                            class="text-caption-1 flex items-center gap-2 rounded-lg bg-black/50 py-1.5 pr-3 pl-2 text-white backdrop-blur"
                         >
                             <Icon
                                 :name="markerTypeMeta(m.type).icon"
-                                class="size-4 shrink-0"
+                                class="shrink-0 text-sm"
                                 :class="markerTypeMeta(m.type).iconColor"
                             />
-                            <span class="font-medium">{{
-                                m.label || t(`markers.types.${m.type}`)
-                            }}</span>
+                            <span>
+                                {{ m.label || t(`markers.types.${m.type}`) }}
+                            </span>
                         </div>
                     </div>
                 </div>

From 1cd2bdb8cf286277aeb2734c809d2aa98f4b20d6 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 13:56:48 +0200
Subject: [PATCH 21/28] feat(markers): better empty state

---
 frontend/app/pages/markers/[id].vue | 114 ++++++++++++++++------------
 frontend/locales/en.json            |   4 +
 frontend/locales/nb.json            |   4 +
 3 files changed, 74 insertions(+), 48 deletions(-)

diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index 125883c..29eb1cc 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -362,6 +362,7 @@ useEventListener(window, "beforeunload", (event: BeforeUnloadEvent) => {
                 </div>
 
                 <MarkersTimeline
+                    v-if="visibleMarkers.length"
                     class="shrink-0"
                     :markers="visibleMarkers"
                     :duration="effectiveDuration"
@@ -374,58 +375,75 @@ useEventListener(window, "beforeunload", (event: BeforeUnloadEvent) => {
 
             <LayoutGroup>
                 <div class="flex min-h-0 flex-col gap-4">
-                    <motion.div
-                        layout="position"
-                        :transition="{ duration: 1, ease: [0.16, 1, 0.3, 1] }"
-                        class="shrink-0"
-                    >
-                        <MarkersEditor
-                            ref="editor"
-                            :marker="selectedMarker"
-                            :current-time="currentTime"
-                            @update="onUpdate"
-                            @remove="onRemove"
-                            @seek="seek"
-                            @preview="previewRange"
-                        />
-                    </motion.div>
-
-                    <motion.div
-                        layout="position"
-                        :transition="{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }"
-                        class="gradient-border bg-surface-default shadow-resting flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl"
-                    >
-                        <div
-                            class="border-border-1 text-text-muted flex shrink-0 items-center justify-between border-b px-4 py-2 text-sm"
+                    <template v-if="visibleMarkers.length">
+                        <motion.div
+                            layout="position"
+                            :transition="{
+                                duration: 1,
+                                ease: [0.16, 1, 0.3, 1],
+                            }"
+                            class="shrink-0"
                         >
-                            <span>{{ t("markers.list.title") }}</span>
-                            <span class="tabular-nums">{{
-                                visibleMarkers.length
-                            }}</span>
-                        </div>
-                        <div
-                            v-if="visibleMarkers.length"
-                            class="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto p-2"
-                        >
-                            <MarkersListItem
-                                v-for="marker in visibleMarkers"
-                                :key="marker.id"
-                                :marker="marker"
-                                :selected="marker.id === selectedId"
+                            <MarkersEditor
+                                ref="editor"
+                                :marker="selectedMarker"
                                 :current-time="currentTime"
-                                @select="
-                                    selectedId = marker.id;
-                                    seek(marker.start);
-                                "
+                                @update="onUpdate"
+                                @remove="onRemove"
+                                @seek="seek"
+                                @preview="previewRange"
                             />
-                        </div>
-                        <div
-                            v-else
-                            class="text-text-hint flex flex-1 items-center justify-center p-8 text-center text-sm"
+                        </motion.div>
+
+                        <motion.div
+                            layout="position"
+                            :transition="{
+                                duration: 0.5,
+                                ease: [0.16, 1, 0.3, 1],
+                            }"
+                            class="gradient-border bg-surface-default shadow-resting flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl"
                         >
-                            {{ t("markers.list.empty") }}
-                        </div>
-                    </motion.div>
+                            <div
+                                class="border-border-1 text-text-muted flex shrink-0 items-center justify-between border-b px-4 py-2 text-sm"
+                            >
+                                <span>{{ t("markers.list.title") }}</span>
+                                <span class="tabular-nums">{{
+                                    visibleMarkers.length
+                                }}</span>
+                            </div>
+                            <div
+                                class="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto p-2"
+                            >
+                                <MarkersListItem
+                                    v-for="marker in visibleMarkers"
+                                    :key="marker.id"
+                                    :marker="marker"
+                                    :selected="marker.id === selectedId"
+                                    :current-time="currentTime"
+                                    @select="
+                                        selectedId = marker.id;
+                                        seek(marker.start);
+                                    "
+                                />
+                            </div>
+                        </motion.div>
+                    </template>
+
+                    <div
+                        v-else
+                        class="gradient-border bg-surface-default shadow-resting flex min-h-0 flex-1 flex-col items-center justify-center gap-2 rounded-2xl p-8 text-center"
+                    >
+                        <Icon
+                            name="tabler:bookmark-plus"
+                            class="text-text-hint size-8"
+                        />
+                        <p class="text-body-3 text-text-default">
+                            {{ t("markers.empty.title") }}
+                        </p>
+                        <p class="text-text-hint text-caption-1">
+                            {{ t("markers.empty.hint") }}
+                        </p>
+                    </div>
                 </div>
             </LayoutGroup>
         </div>
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index d4bb32f..4c5b620 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -235,6 +235,10 @@
         "previewUnavailable": "Preview unavailable",
         "removed": "Removed \"{label}\"",
         "undo": "Undo",
+        "empty": {
+            "title": "No markers yet",
+            "hint": "Add a marker at the playhead, or press M"
+        },
         "shortcuts": {
             "title": "Keyboard shortcuts",
             "playPause": "Play / pause",
diff --git a/frontend/locales/nb.json b/frontend/locales/nb.json
index 411b077..69e0a0f 100644
--- a/frontend/locales/nb.json
+++ b/frontend/locales/nb.json
@@ -235,6 +235,10 @@
         "previewUnavailable": "Forhåndsvisning utilgjengelig",
         "removed": "Fjernet «{label}»",
         "undo": "Angre",
+        "empty": {
+            "title": "Ingen markører ennå",
+            "hint": "Legg til en markør ved spillehodet, eller trykk M"
+        },
         "shortcuts": {
             "title": "Hurtigtaster",
             "playPause": "Spill / pause",

From 7621c075f1f685d8684d1dbdcf7bfef70f4a7d58 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 14:14:52 +0200
Subject: [PATCH 22/28] chore(markers): remove mock backend text

---
 frontend/app/pages/markers/[id].vue | 1 -
 frontend/locales/en.json            | 1 -
 frontend/locales/nb.json            | 1 -
 3 files changed, 3 deletions(-)

diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index 29eb1cc..cf420cf 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -161,7 +161,6 @@ async function onSave() {
     await save();
     toaster.create({
         title: t("markers.saved"),
-        description: t("markers.savedMock"),
         type: "success",
     });
 }
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 4c5b620..9e94f4c 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -226,7 +226,6 @@
     "markers": {
         "save": "Save",
         "saved": "Markers saved",
-        "savedMock": "Saved (mock — no backend yet)",
         "unsaved": "Unsaved changes",
         "allSaved": "Saved",
         "leaveConfirm": "You have unsaved changes. Leave without saving?",
diff --git a/frontend/locales/nb.json b/frontend/locales/nb.json
index 69e0a0f..bc94b06 100644
--- a/frontend/locales/nb.json
+++ b/frontend/locales/nb.json
@@ -226,7 +226,6 @@
     "markers": {
         "save": "Lagre",
         "saved": "Markører lagret",
-        "savedMock": "Lagret (mock — ingen backend ennå)",
         "unsaved": "Ulagrede endringer",
         "allSaved": "Lagret",
         "leaveConfirm": "Du har ulagrede endringer. Forlate uten å lagre?",

From 7658986fa36cd6e21be47b6c9a5b82ebe00b1f62 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 14:46:45 +0200
Subject: [PATCH 23/28] fix(markers): ignore shortcuts

---
 frontend/app/pages/markers/[id].vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index cf420cf..c60bffa 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -165,11 +165,17 @@ async function onSave() {
     });
 }
 
-// ---- Keyboard shortcuts (ignored while typing in a field) -------------------
-function isTyping(target: EventTarget | null) {
+// ---- Keyboard shortcuts -----------------------------------------------------
+// Ignore shortcuts while typing in a field or while an Ark widget (select,
+// slider, menu, …) is focused — those consume arrow/space keys themselves.
+function shouldIgnoreKey(target: EventTarget | null) {
     if (!(target instanceof HTMLElement)) return false;
     const tag = target.tagName;
-    return tag === "INPUT" || tag === "TEXTAREA" || target.isContentEditable;
+    if (tag === "INPUT" || tag === "TEXTAREA" || target.isContentEditable)
+        return true;
+    return !!target.closest(
+        '[data-scope="select"],[data-scope="slider"],[data-scope="menu"],[data-scope="combobox"]',
+    );
 }
 
 const showShortcuts = ref(false);
@@ -184,7 +190,7 @@ const shortcuts = computed(() => [
 ]);
 
 useEventListener(window, "keydown", (event: KeyboardEvent) => {
-    if (isTyping(event.target)) return;
+    if (shouldIgnoreKey(event.target)) return;
     const el = videoElement.value;
     switch (event.key) {
         case " ":

From dfd69671426ba98069396e559be79a1d04cd7e78 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 14:52:32 +0200
Subject: [PATCH 24/28] wip(markers): noop backend mock

---
 api/v1/api.proto                           |  49 ++
 backend/api/v1/api.pb.go                   | 688 ++++++++++++++++-----
 backend/api/v1/apiv1connect/api.connect.go |  59 ++
 backend/api/v1/common.pb.go                |   2 +-
 backend/cmd/server/main.go                 |   2 +
 backend/cmd/server/markers.go              |  45 ++
 frontend/app/composables/useMarkers.ts     | 146 ++---
 frontend/src/gen/api/v1/api_pb.ts          | 198 +++++-
 8 files changed, 968 insertions(+), 221 deletions(-)
 create mode 100644 backend/cmd/server/markers.go

diff --git a/api/v1/api.proto b/api/v1/api.proto
index 5b686e1..5221045 100644
--- a/api/v1/api.proto
+++ b/api/v1/api.proto
@@ -398,6 +398,51 @@ message GetVaultItemResponse {
   VaultItem item = 1;
 }
 
+// ---- Markers ----
+
+enum MarkerType {
+  MARKER_TYPE_UNSPECIFIED = 0;
+  MARKER_TYPE_NAME_SUPER = 1;
+  MARKER_TYPE_BIBLE_VERSE = 2;
+  MARKER_TYPE_SONG = 3;
+  MARKER_TYPE_CHAPTER = 4;
+  MARKER_TYPE_CUSTOM = 5;
+}
+
+// Where a marker originated. IMPORTED markers come from the third-party timing
+// program (name-supers, bible-verse references, …); MANUAL ones are created in
+// this tool. The source is preserved through edits for reconciliation.
+enum MarkerSource {
+  MARKER_SOURCE_UNSPECIFIED = 0;
+  MARKER_SOURCE_IMPORTED = 1;
+  MARKER_SOURCE_MANUAL = 2;
+}
+
+message Marker {
+  string id = 1;
+  MarkerType type = 2;
+  // Display text: the name, the verse reference, the song/chapter title.
+  string label = 3;
+  string note = 4;
+  // In/out points in seconds.
+  double start = 5;
+  double end = 6;
+  MarkerSource source = 7;
+}
+
+message GetMarkersRequest {
+  string VXID = 1;
+}
+
+message GetMarkersResponse {
+  repeated Marker markers = 1;
+}
+
+message SubmitMarkersRequest {
+  string VXID = 1;
+  repeated Marker markers = 2;
+}
+
 service APIService {
 	// Permissions
 	rpc GetPermissions (Void) returns (Permissions) {}
@@ -441,4 +486,8 @@ service APIService {
   // VAULT (Vidispine search)
   rpc VaultSearch(VaultSearchRequest) returns (VaultSearchResponse) {}
   rpc GetVaultItem(GetVaultItemRequest) returns (GetVaultItemResponse) {}
+
+  // Markers
+  rpc GetMarkers(GetMarkersRequest) returns (GetMarkersResponse) {}
+  rpc SubmitMarkers(SubmitMarkersRequest) returns (Void) {}
 }
diff --git a/backend/api/v1/api.pb.go b/backend/api/v1/api.pb.go
index 2182bcc..d7347fd 100644
--- a/backend/api/v1/api.pb.go
+++ b/backend/api/v1/api.pb.go
@@ -1,6 +1,6 @@
 // Code generated by protoc-gen-go. DO NOT EDIT.
 // versions:
-// 	protoc-gen-go v1.36.10
+// 	protoc-gen-go v1.36.8
 // 	protoc        (unknown)
 // source: api/v1/api.proto
 
@@ -123,6 +123,116 @@ func (CantemoAction) EnumDescriptor() ([]byte, []int) {
 	return file_api_v1_api_proto_rawDescGZIP(), []int{1}
 }
 
+type MarkerType int32
+
+const (
+	MarkerType_MARKER_TYPE_UNSPECIFIED MarkerType = 0
+	MarkerType_MARKER_TYPE_NAME_SUPER  MarkerType = 1
+	MarkerType_MARKER_TYPE_BIBLE_VERSE MarkerType = 2
+	MarkerType_MARKER_TYPE_SONG        MarkerType = 3
+	MarkerType_MARKER_TYPE_CHAPTER     MarkerType = 4
+	MarkerType_MARKER_TYPE_CUSTOM      MarkerType = 5
+)
+
+// Enum value maps for MarkerType.
+var (
+	MarkerType_name = map[int32]string{
+		0: "MARKER_TYPE_UNSPECIFIED",
+		1: "MARKER_TYPE_NAME_SUPER",
+		2: "MARKER_TYPE_BIBLE_VERSE",
+		3: "MARKER_TYPE_SONG",
+		4: "MARKER_TYPE_CHAPTER",
+		5: "MARKER_TYPE_CUSTOM",
+	}
+	MarkerType_value = map[string]int32{
+		"MARKER_TYPE_UNSPECIFIED": 0,
+		"MARKER_TYPE_NAME_SUPER":  1,
+		"MARKER_TYPE_BIBLE_VERSE": 2,
+		"MARKER_TYPE_SONG":        3,
+		"MARKER_TYPE_CHAPTER":     4,
+		"MARKER_TYPE_CUSTOM":      5,
+	}
+)
+
+func (x MarkerType) Enum() *MarkerType {
+	p := new(MarkerType)
+	*p = x
+	return p
+}
+
+func (x MarkerType) String() string {
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
+}
+
+func (MarkerType) Descriptor() protoreflect.EnumDescriptor {
+	return file_api_v1_api_proto_enumTypes[2].Descriptor()
+}
+
+func (MarkerType) Type() protoreflect.EnumType {
+	return &file_api_v1_api_proto_enumTypes[2]
+}
+
+func (x MarkerType) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
+}
+
+// Deprecated: Use MarkerType.Descriptor instead.
+func (MarkerType) EnumDescriptor() ([]byte, []int) {
+	return file_api_v1_api_proto_rawDescGZIP(), []int{2}
+}
+
+// Where a marker originated. IMPORTED markers come from the third-party timing
+// program (name-supers, bible-verse references, …); MANUAL ones are created in
+// this tool. The source is preserved through edits for reconciliation.
+type MarkerSource int32
+
+const (
+	MarkerSource_MARKER_SOURCE_UNSPECIFIED MarkerSource = 0
+	MarkerSource_MARKER_SOURCE_IMPORTED    MarkerSource = 1
+	MarkerSource_MARKER_SOURCE_MANUAL      MarkerSource = 2
+)
+
+// Enum value maps for MarkerSource.
+var (
+	MarkerSource_name = map[int32]string{
+		0: "MARKER_SOURCE_UNSPECIFIED",
+		1: "MARKER_SOURCE_IMPORTED",
+		2: "MARKER_SOURCE_MANUAL",
+	}
+	MarkerSource_value = map[string]int32{
+		"MARKER_SOURCE_UNSPECIFIED": 0,
+		"MARKER_SOURCE_IMPORTED":    1,
+		"MARKER_SOURCE_MANUAL":      2,
+	}
+)
+
+func (x MarkerSource) Enum() *MarkerSource {
+	p := new(MarkerSource)
+	*p = x
+	return p
+}
+
+func (x MarkerSource) String() string {
+	return protoimpl.X.EnumStringOf(x.Descriptor(), protoreflect.EnumNumber(x))
+}
+
+func (MarkerSource) Descriptor() protoreflect.EnumDescriptor {
+	return file_api_v1_api_proto_enumTypes[3].Descriptor()
+}
+
+func (MarkerSource) Type() protoreflect.EnumType {
+	return &file_api_v1_api_proto_enumTypes[3]
+}
+
+func (x MarkerSource) Number() protoreflect.EnumNumber {
+	return protoreflect.EnumNumber(x)
+}
+
+// Deprecated: Use MarkerSource.Descriptor instead.
+func (MarkerSource) EnumDescriptor() ([]byte, []int) {
+	return file_api_v1_api_proto_rawDescGZIP(), []int{3}
+}
+
 type BMMPermission struct {
 	state         protoimpl.MessageState `protogen:"open.v1"`
 	Languages     []string               `protobuf:"bytes,1,rep,name=languages,proto3" json:"languages,omitempty"`
@@ -3502,6 +3612,240 @@ func (x *GetVaultItemResponse) GetItem() *VaultItem {
 	return nil
 }
 
+type Marker struct {
+	state protoimpl.MessageState `protogen:"open.v1"`
+	Id    string                 `protobuf:"bytes,1,opt,name=id,proto3" json:"id,omitempty"`
+	Type  MarkerType             `protobuf:"varint,2,opt,name=type,proto3,enum=api.v1.MarkerType" json:"type,omitempty"`
+	// Display text: the name, the verse reference, the song/chapter title.
+	Label string `protobuf:"bytes,3,opt,name=label,proto3" json:"label,omitempty"`
+	Note  string `protobuf:"bytes,4,opt,name=note,proto3" json:"note,omitempty"`
+	// In/out points in seconds.
+	Start         float64      `protobuf:"fixed64,5,opt,name=start,proto3" json:"start,omitempty"`
+	End           float64      `protobuf:"fixed64,6,opt,name=end,proto3" json:"end,omitempty"`
+	Source        MarkerSource `protobuf:"varint,7,opt,name=source,proto3,enum=api.v1.MarkerSource" json:"source,omitempty"`
+	unknownFields protoimpl.UnknownFields
+	sizeCache     protoimpl.SizeCache
+}
+
+func (x *Marker) Reset() {
+	*x = Marker{}
+	mi := &file_api_v1_api_proto_msgTypes[57]
+	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+	ms.StoreMessageInfo(mi)
+}
+
+func (x *Marker) String() string {
+	return protoimpl.X.MessageStringOf(x)
+}
+
+func (*Marker) ProtoMessage() {}
+
+func (x *Marker) ProtoReflect() protoreflect.Message {
+	mi := &file_api_v1_api_proto_msgTypes[57]
+	if x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use Marker.ProtoReflect.Descriptor instead.
+func (*Marker) Descriptor() ([]byte, []int) {
+	return file_api_v1_api_proto_rawDescGZIP(), []int{57}
+}
+
+func (x *Marker) GetId() string {
+	if x != nil {
+		return x.Id
+	}
+	return ""
+}
+
+func (x *Marker) GetType() MarkerType {
+	if x != nil {
+		return x.Type
+	}
+	return MarkerType_MARKER_TYPE_UNSPECIFIED
+}
+
+func (x *Marker) GetLabel() string {
+	if x != nil {
+		return x.Label
+	}
+	return ""
+}
+
+func (x *Marker) GetNote() string {
+	if x != nil {
+		return x.Note
+	}
+	return ""
+}
+
+func (x *Marker) GetStart() float64 {
+	if x != nil {
+		return x.Start
+	}
+	return 0
+}
+
+func (x *Marker) GetEnd() float64 {
+	if x != nil {
+		return x.End
+	}
+	return 0
+}
+
+func (x *Marker) GetSource() MarkerSource {
+	if x != nil {
+		return x.Source
+	}
+	return MarkerSource_MARKER_SOURCE_UNSPECIFIED
+}
+
+type GetMarkersRequest struct {
+	state         protoimpl.MessageState `protogen:"open.v1"`
+	VXID          string                 `protobuf:"bytes,1,opt,name=VXID,proto3" json:"VXID,omitempty"`
+	unknownFields protoimpl.UnknownFields
+	sizeCache     protoimpl.SizeCache
+}
+
+func (x *GetMarkersRequest) Reset() {
+	*x = GetMarkersRequest{}
+	mi := &file_api_v1_api_proto_msgTypes[58]
+	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+	ms.StoreMessageInfo(mi)
+}
+
+func (x *GetMarkersRequest) String() string {
+	return protoimpl.X.MessageStringOf(x)
+}
+
+func (*GetMarkersRequest) ProtoMessage() {}
+
+func (x *GetMarkersRequest) ProtoReflect() protoreflect.Message {
+	mi := &file_api_v1_api_proto_msgTypes[58]
+	if x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use GetMarkersRequest.ProtoReflect.Descriptor instead.
+func (*GetMarkersRequest) Descriptor() ([]byte, []int) {
+	return file_api_v1_api_proto_rawDescGZIP(), []int{58}
+}
+
+func (x *GetMarkersRequest) GetVXID() string {
+	if x != nil {
+		return x.VXID
+	}
+	return ""
+}
+
+type GetMarkersResponse struct {
+	state         protoimpl.MessageState `protogen:"open.v1"`
+	Markers       []*Marker              `protobuf:"bytes,1,rep,name=markers,proto3" json:"markers,omitempty"`
+	unknownFields protoimpl.UnknownFields
+	sizeCache     protoimpl.SizeCache
+}
+
+func (x *GetMarkersResponse) Reset() {
+	*x = GetMarkersResponse{}
+	mi := &file_api_v1_api_proto_msgTypes[59]
+	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+	ms.StoreMessageInfo(mi)
+}
+
+func (x *GetMarkersResponse) String() string {
+	return protoimpl.X.MessageStringOf(x)
+}
+
+func (*GetMarkersResponse) ProtoMessage() {}
+
+func (x *GetMarkersResponse) ProtoReflect() protoreflect.Message {
+	mi := &file_api_v1_api_proto_msgTypes[59]
+	if x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use GetMarkersResponse.ProtoReflect.Descriptor instead.
+func (*GetMarkersResponse) Descriptor() ([]byte, []int) {
+	return file_api_v1_api_proto_rawDescGZIP(), []int{59}
+}
+
+func (x *GetMarkersResponse) GetMarkers() []*Marker {
+	if x != nil {
+		return x.Markers
+	}
+	return nil
+}
+
+type SubmitMarkersRequest struct {
+	state         protoimpl.MessageState `protogen:"open.v1"`
+	VXID          string                 `protobuf:"bytes,1,opt,name=VXID,proto3" json:"VXID,omitempty"`
+	Markers       []*Marker              `protobuf:"bytes,2,rep,name=markers,proto3" json:"markers,omitempty"`
+	unknownFields protoimpl.UnknownFields
+	sizeCache     protoimpl.SizeCache
+}
+
+func (x *SubmitMarkersRequest) Reset() {
+	*x = SubmitMarkersRequest{}
+	mi := &file_api_v1_api_proto_msgTypes[60]
+	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+	ms.StoreMessageInfo(mi)
+}
+
+func (x *SubmitMarkersRequest) String() string {
+	return protoimpl.X.MessageStringOf(x)
+}
+
+func (*SubmitMarkersRequest) ProtoMessage() {}
+
+func (x *SubmitMarkersRequest) ProtoReflect() protoreflect.Message {
+	mi := &file_api_v1_api_proto_msgTypes[60]
+	if x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use SubmitMarkersRequest.ProtoReflect.Descriptor instead.
+func (*SubmitMarkersRequest) Descriptor() ([]byte, []int) {
+	return file_api_v1_api_proto_rawDescGZIP(), []int{60}
+}
+
+func (x *SubmitMarkersRequest) GetVXID() string {
+	if x != nil {
+		return x.VXID
+	}
+	return ""
+}
+
+func (x *SubmitMarkersRequest) GetMarkers() []*Marker {
+	if x != nil {
+		return x.Markers
+	}
+	return nil
+}
+
 var File_api_v1_api_proto protoreflect.FileDescriptor
 
 const file_api_v1_api_proto_rawDesc = "" +
@@ -3754,7 +4098,22 @@ const file_api_v1_api_proto_rawDesc = "" +
 	"\x13GetVaultItemRequest\x12\x12\n" +
 	"\x04VXID\x18\x01 \x01(\tR\x04VXID\"=\n" +
 	"\x14GetVaultItemResponse\x12%\n" +
-	"\x04item\x18\x01 \x01(\v2\x11.api.v1.VaultItemR\x04item*1\n" +
+	"\x04item\x18\x01 \x01(\v2\x11.api.v1.VaultItemR\x04item\"\xc0\x01\n" +
+	"\x06Marker\x12\x0e\n" +
+	"\x02id\x18\x01 \x01(\tR\x02id\x12&\n" +
+	"\x04type\x18\x02 \x01(\x0e2\x12.api.v1.MarkerTypeR\x04type\x12\x14\n" +
+	"\x05label\x18\x03 \x01(\tR\x05label\x12\x12\n" +
+	"\x04note\x18\x04 \x01(\tR\x04note\x12\x14\n" +
+	"\x05start\x18\x05 \x01(\x01R\x05start\x12\x10\n" +
+	"\x03end\x18\x06 \x01(\x01R\x03end\x12,\n" +
+	"\x06source\x18\a \x01(\x0e2\x14.api.v1.MarkerSourceR\x06source\"'\n" +
+	"\x11GetMarkersRequest\x12\x12\n" +
+	"\x04VXID\x18\x01 \x01(\tR\x04VXID\">\n" +
+	"\x12GetMarkersResponse\x12(\n" +
+	"\amarkers\x18\x01 \x03(\v2\x0e.api.v1.MarkerR\amarkers\"T\n" +
+	"\x14SubmitMarkersRequest\x12\x12\n" +
+	"\x04VXID\x18\x01 \x01(\tR\x04VXID\x12(\n" +
+	"\amarkers\x18\x02 \x03(\v2\x0e.api.v1.MarkerR\amarkers*1\n" +
 	"\x0eBmmEnvironment\x12\x0e\n" +
 	"\n" +
 	"Production\x10\x00\x12\x0f\n" +
@@ -3764,7 +4123,19 @@ const file_api_v1_api_proto_rawDesc = "" +
 	"\x16CANTEMO_ACTION_PREVIEW\x10\x01\x12\x1d\n" +
 	"\x19CANTEMO_ACTION_TRANSCRIBE\x10\x02\x12)\n" +
 	"%CANTEMO_ACTION_SUBTITLE_FROM_SUBTRANS\x10\x03\x12#\n" +
-	"\x1fCANTEMO_ACTION_UPDATE_RELATIONS\x10\x042\xe3\r\n" +
+	"\x1fCANTEMO_ACTION_UPDATE_RELATIONS\x10\x04*\xa9\x01\n" +
+	"\n" +
+	"MarkerType\x12\x1b\n" +
+	"\x17MARKER_TYPE_UNSPECIFIED\x10\x00\x12\x1a\n" +
+	"\x16MARKER_TYPE_NAME_SUPER\x10\x01\x12\x1b\n" +
+	"\x17MARKER_TYPE_BIBLE_VERSE\x10\x02\x12\x14\n" +
+	"\x10MARKER_TYPE_SONG\x10\x03\x12\x17\n" +
+	"\x13MARKER_TYPE_CHAPTER\x10\x04\x12\x16\n" +
+	"\x12MARKER_TYPE_CUSTOM\x10\x05*c\n" +
+	"\fMarkerSource\x12\x1d\n" +
+	"\x19MARKER_SOURCE_UNSPECIFIED\x10\x00\x12\x1a\n" +
+	"\x16MARKER_SOURCE_IMPORTED\x10\x01\x12\x18\n" +
+	"\x14MARKER_SOURCE_MANUAL\x10\x022\xe9\x0e\n" +
 	"\n" +
 	"APIService\x125\n" +
 	"\x0eGetPermissions\x12\f.api.v1.Void\x1a\x13.api.v1.Permissions\"\x00\x12B\n" +
@@ -3791,7 +4162,10 @@ const file_api_v1_api_proto_rawDesc = "" +
 	"\x15GetExportDestinations\x12\f.api.v1.Void\x1a\".api.v1.ExportDestinationsResponse\"\x00\x12K\n" +
 	"\x14TriggerCantemoAction\x12#.api.v1.TriggerCantemoActionRequest\x1a\f.api.v1.Void\"\x00\x12H\n" +
 	"\vVaultSearch\x12\x1a.api.v1.VaultSearchRequest\x1a\x1b.api.v1.VaultSearchResponse\"\x00\x12K\n" +
-	"\fGetVaultItem\x12\x1b.api.v1.GetVaultItemRequest\x1a\x1c.api.v1.GetVaultItemResponse\"\x00B\x1eZ\x1cbcc-media-tools/api/v1;apiv1b\x06proto3"
+	"\fGetVaultItem\x12\x1b.api.v1.GetVaultItemRequest\x1a\x1c.api.v1.GetVaultItemResponse\"\x00\x12E\n" +
+	"\n" +
+	"GetMarkers\x12\x19.api.v1.GetMarkersRequest\x1a\x1a.api.v1.GetMarkersResponse\"\x00\x12=\n" +
+	"\rSubmitMarkers\x12\x1c.api.v1.SubmitMarkersRequest\x1a\f.api.v1.Void\"\x00B\x1eZ\x1cbcc-media-tools/api/v1;apiv1b\x06proto3"
 
 var (
 	file_api_v1_api_proto_rawDescOnce sync.Once
@@ -3805,162 +4179,176 @@ func file_api_v1_api_proto_rawDescGZIP() []byte {
 	return file_api_v1_api_proto_rawDescData
 }
 
-var file_api_v1_api_proto_enumTypes = make([]protoimpl.EnumInfo, 2)
-var file_api_v1_api_proto_msgTypes = make([]protoimpl.MessageInfo, 59)
+var file_api_v1_api_proto_enumTypes = make([]protoimpl.EnumInfo, 4)
+var file_api_v1_api_proto_msgTypes = make([]protoimpl.MessageInfo, 63)
 var file_api_v1_api_proto_goTypes = []any{
 	(BmmEnvironment)(0),                  // 0: api.v1.BmmEnvironment
 	(CantemoAction)(0),                   // 1: api.v1.CantemoAction
-	(*BMMPermission)(nil),                // 2: api.v1.BMMPermission
-	(*TranscriptionPermission)(nil),      // 3: api.v1.TranscriptionPermission
-	(*ExportPermission)(nil),             // 4: api.v1.ExportPermission
-	(*VBExportPermission)(nil),           // 5: api.v1.VBExportPermission
-	(*CantemoPermission)(nil),            // 6: api.v1.CantemoPermission
-	(*VaultPermission)(nil),              // 7: api.v1.VaultPermission
-	(*Permissions)(nil),                  // 8: api.v1.Permissions
-	(*GetPermissionsRequest)(nil),        // 9: api.v1.GetPermissionsRequest
-	(*SetPermissionsRequest)(nil),        // 10: api.v1.SetPermissionsRequest
-	(*DeletePermissionsRequest)(nil),     // 11: api.v1.DeletePermissionsRequest
-	(*PermissionsList)(nil),              // 12: api.v1.PermissionsList
-	(*BMMYear)(nil),                      // 13: api.v1.BMMYear
-	(*GetYearsResponse)(nil),             // 14: api.v1.GetYearsResponse
-	(*GetYearsRequest)(nil),              // 15: api.v1.GetYearsRequest
-	(*GetAlbumsRequest)(nil),             // 16: api.v1.GetAlbumsRequest
-	(*Album)(nil),                        // 17: api.v1.Album
-	(*AlbumsList)(nil),                   // 18: api.v1.AlbumsList
-	(*GetAlbumTracksRequest)(nil),        // 19: api.v1.GetAlbumTracksRequest
-	(*GetPodcastTracksRequest)(nil),      // 20: api.v1.GetPodcastTracksRequest
-	(*GetAvailableLanguagesRequest)(nil), // 21: api.v1.GetAvailableLanguagesRequest
-	(*BMMTrack)(nil),                     // 22: api.v1.BMMTrack
-	(*TracksList)(nil),                   // 23: api.v1.TracksList
-	(*LanguageList)(nil),                 // 24: api.v1.LanguageList
-	(*Language)(nil),                     // 25: api.v1.Language
-	(*GetTranscriptionReqest)(nil),       // 26: api.v1.GetTranscriptionReqest
-	(*Transcription)(nil),                // 27: api.v1.Transcription
-	(*Segments)(nil),                     // 28: api.v1.Segments
-	(*Words)(nil),                        // 29: api.v1.Words
-	(*GetPreviewRequest)(nil),            // 30: api.v1.GetPreviewRequest
-	(*Preview)(nil),                      // 31: api.v1.Preview
-	(*GetBMMTranscriptionRequest)(nil),   // 32: api.v1.GetBMMTranscriptionRequest
-	(*SubmitTranscriptionRequest)(nil),   // 33: api.v1.SubmitTranscriptionRequest
-	(*SubmitShortRequest)(nil),           // 34: api.v1.SubmitShortRequest
-	(*ExportResolution)(nil),             // 35: api.v1.ExportResolution
-	(*ExportLanguage)(nil),               // 36: api.v1.ExportLanguage
-	(*ExportSubclip)(nil),                // 37: api.v1.ExportSubclip
-	(*GetExportConfigRequest)(nil),       // 38: api.v1.GetExportConfigRequest
-	(*GetExportConfigResponse)(nil),      // 39: api.v1.GetExportConfigResponse
-	(*ExportResolutionSelection)(nil),    // 40: api.v1.ExportResolutionSelection
-	(*StartExportRequest)(nil),           // 41: api.v1.StartExportRequest
-	(*StartExportResponse)(nil),          // 42: api.v1.StartExportResponse
-	(*ExportTimedMetadataRequest)(nil),   // 43: api.v1.ExportTimedMetadataRequest
-	(*GetVBExportConfigRequest)(nil),     // 44: api.v1.GetVBExportConfigRequest
-	(*GetVBExportConfigResponse)(nil),    // 45: api.v1.GetVBExportConfigResponse
-	(*StartVBExportRequest)(nil),         // 46: api.v1.StartVBExportRequest
-	(*StartVBExportResponse)(nil),        // 47: api.v1.StartVBExportResponse
-	(*ExportDestinationsResponse)(nil),   // 48: api.v1.ExportDestinationsResponse
-	(*ResolveAssetsRequest)(nil),         // 49: api.v1.ResolveAssetsRequest
-	(*ResolvedAsset)(nil),                // 50: api.v1.ResolvedAsset
-	(*ResolveAssetsResponse)(nil),        // 51: api.v1.ResolveAssetsResponse
-	(*TriggerCantemoActionRequest)(nil),  // 52: api.v1.TriggerCantemoActionRequest
-	(*VaultSearchRequest)(nil),           // 53: api.v1.VaultSearchRequest
-	(*VaultItem)(nil),                    // 54: api.v1.VaultItem
-	(*VaultFacet)(nil),                   // 55: api.v1.VaultFacet
-	(*VaultSearchResponse)(nil),          // 56: api.v1.VaultSearchResponse
-	(*GetVaultItemRequest)(nil),          // 57: api.v1.GetVaultItemRequest
-	(*GetVaultItemResponse)(nil),         // 58: api.v1.GetVaultItemResponse
-	nil,                                  // 59: api.v1.PermissionsList.PermissionsEntry
-	nil,                                  // 60: api.v1.GetYearsResponse.DataEntry
-	(*timestamppb.Timestamp)(nil),        // 61: google.protobuf.Timestamp
-	(*Void)(nil),                         // 62: api.v1.Void
+	(MarkerType)(0),                      // 2: api.v1.MarkerType
+	(MarkerSource)(0),                    // 3: api.v1.MarkerSource
+	(*BMMPermission)(nil),                // 4: api.v1.BMMPermission
+	(*TranscriptionPermission)(nil),      // 5: api.v1.TranscriptionPermission
+	(*ExportPermission)(nil),             // 6: api.v1.ExportPermission
+	(*VBExportPermission)(nil),           // 7: api.v1.VBExportPermission
+	(*CantemoPermission)(nil),            // 8: api.v1.CantemoPermission
+	(*VaultPermission)(nil),              // 9: api.v1.VaultPermission
+	(*Permissions)(nil),                  // 10: api.v1.Permissions
+	(*GetPermissionsRequest)(nil),        // 11: api.v1.GetPermissionsRequest
+	(*SetPermissionsRequest)(nil),        // 12: api.v1.SetPermissionsRequest
+	(*DeletePermissionsRequest)(nil),     // 13: api.v1.DeletePermissionsRequest
+	(*PermissionsList)(nil),              // 14: api.v1.PermissionsList
+	(*BMMYear)(nil),                      // 15: api.v1.BMMYear
+	(*GetYearsResponse)(nil),             // 16: api.v1.GetYearsResponse
+	(*GetYearsRequest)(nil),              // 17: api.v1.GetYearsRequest
+	(*GetAlbumsRequest)(nil),             // 18: api.v1.GetAlbumsRequest
+	(*Album)(nil),                        // 19: api.v1.Album
+	(*AlbumsList)(nil),                   // 20: api.v1.AlbumsList
+	(*GetAlbumTracksRequest)(nil),        // 21: api.v1.GetAlbumTracksRequest
+	(*GetPodcastTracksRequest)(nil),      // 22: api.v1.GetPodcastTracksRequest
+	(*GetAvailableLanguagesRequest)(nil), // 23: api.v1.GetAvailableLanguagesRequest
+	(*BMMTrack)(nil),                     // 24: api.v1.BMMTrack
+	(*TracksList)(nil),                   // 25: api.v1.TracksList
+	(*LanguageList)(nil),                 // 26: api.v1.LanguageList
+	(*Language)(nil),                     // 27: api.v1.Language
+	(*GetTranscriptionReqest)(nil),       // 28: api.v1.GetTranscriptionReqest
+	(*Transcription)(nil),                // 29: api.v1.Transcription
+	(*Segments)(nil),                     // 30: api.v1.Segments
+	(*Words)(nil),                        // 31: api.v1.Words
+	(*GetPreviewRequest)(nil),            // 32: api.v1.GetPreviewRequest
+	(*Preview)(nil),                      // 33: api.v1.Preview
+	(*GetBMMTranscriptionRequest)(nil),   // 34: api.v1.GetBMMTranscriptionRequest
+	(*SubmitTranscriptionRequest)(nil),   // 35: api.v1.SubmitTranscriptionRequest
+	(*SubmitShortRequest)(nil),           // 36: api.v1.SubmitShortRequest
+	(*ExportResolution)(nil),             // 37: api.v1.ExportResolution
+	(*ExportLanguage)(nil),               // 38: api.v1.ExportLanguage
+	(*ExportSubclip)(nil),                // 39: api.v1.ExportSubclip
+	(*GetExportConfigRequest)(nil),       // 40: api.v1.GetExportConfigRequest
+	(*GetExportConfigResponse)(nil),      // 41: api.v1.GetExportConfigResponse
+	(*ExportResolutionSelection)(nil),    // 42: api.v1.ExportResolutionSelection
+	(*StartExportRequest)(nil),           // 43: api.v1.StartExportRequest
+	(*StartExportResponse)(nil),          // 44: api.v1.StartExportResponse
+	(*ExportTimedMetadataRequest)(nil),   // 45: api.v1.ExportTimedMetadataRequest
+	(*GetVBExportConfigRequest)(nil),     // 46: api.v1.GetVBExportConfigRequest
+	(*GetVBExportConfigResponse)(nil),    // 47: api.v1.GetVBExportConfigResponse
+	(*StartVBExportRequest)(nil),         // 48: api.v1.StartVBExportRequest
+	(*StartVBExportResponse)(nil),        // 49: api.v1.StartVBExportResponse
+	(*ExportDestinationsResponse)(nil),   // 50: api.v1.ExportDestinationsResponse
+	(*ResolveAssetsRequest)(nil),         // 51: api.v1.ResolveAssetsRequest
+	(*ResolvedAsset)(nil),                // 52: api.v1.ResolvedAsset
+	(*ResolveAssetsResponse)(nil),        // 53: api.v1.ResolveAssetsResponse
+	(*TriggerCantemoActionRequest)(nil),  // 54: api.v1.TriggerCantemoActionRequest
+	(*VaultSearchRequest)(nil),           // 55: api.v1.VaultSearchRequest
+	(*VaultItem)(nil),                    // 56: api.v1.VaultItem
+	(*VaultFacet)(nil),                   // 57: api.v1.VaultFacet
+	(*VaultSearchResponse)(nil),          // 58: api.v1.VaultSearchResponse
+	(*GetVaultItemRequest)(nil),          // 59: api.v1.GetVaultItemRequest
+	(*GetVaultItemResponse)(nil),         // 60: api.v1.GetVaultItemResponse
+	(*Marker)(nil),                       // 61: api.v1.Marker
+	(*GetMarkersRequest)(nil),            // 62: api.v1.GetMarkersRequest
+	(*GetMarkersResponse)(nil),           // 63: api.v1.GetMarkersResponse
+	(*SubmitMarkersRequest)(nil),         // 64: api.v1.SubmitMarkersRequest
+	nil,                                  // 65: api.v1.PermissionsList.PermissionsEntry
+	nil,                                  // 66: api.v1.GetYearsResponse.DataEntry
+	(*timestamppb.Timestamp)(nil),        // 67: google.protobuf.Timestamp
+	(*Void)(nil),                         // 68: api.v1.Void
 }
 var file_api_v1_api_proto_depIdxs = []int32{
-	2,  // 0: api.v1.Permissions.bmm:type_name -> api.v1.BMMPermission
-	3,  // 1: api.v1.Permissions.transcription:type_name -> api.v1.TranscriptionPermission
-	4,  // 2: api.v1.Permissions.export:type_name -> api.v1.ExportPermission
-	5,  // 3: api.v1.Permissions.vb_export:type_name -> api.v1.VBExportPermission
-	6,  // 4: api.v1.Permissions.cantemo:type_name -> api.v1.CantemoPermission
-	7,  // 5: api.v1.Permissions.vault:type_name -> api.v1.VaultPermission
-	8,  // 6: api.v1.SetPermissionsRequest.permissions:type_name -> api.v1.Permissions
-	59, // 7: api.v1.PermissionsList.permissions:type_name -> api.v1.PermissionsList.PermissionsEntry
-	60, // 8: api.v1.GetYearsResponse.data:type_name -> api.v1.GetYearsResponse.DataEntry
+	4,  // 0: api.v1.Permissions.bmm:type_name -> api.v1.BMMPermission
+	5,  // 1: api.v1.Permissions.transcription:type_name -> api.v1.TranscriptionPermission
+	6,  // 2: api.v1.Permissions.export:type_name -> api.v1.ExportPermission
+	7,  // 3: api.v1.Permissions.vb_export:type_name -> api.v1.VBExportPermission
+	8,  // 4: api.v1.Permissions.cantemo:type_name -> api.v1.CantemoPermission
+	9,  // 5: api.v1.Permissions.vault:type_name -> api.v1.VaultPermission
+	10, // 6: api.v1.SetPermissionsRequest.permissions:type_name -> api.v1.Permissions
+	65, // 7: api.v1.PermissionsList.permissions:type_name -> api.v1.PermissionsList.PermissionsEntry
+	66, // 8: api.v1.GetYearsResponse.data:type_name -> api.v1.GetYearsResponse.DataEntry
 	0,  // 9: api.v1.GetYearsRequest.environment:type_name -> api.v1.BmmEnvironment
 	0,  // 10: api.v1.GetAlbumsRequest.environment:type_name -> api.v1.BmmEnvironment
-	17, // 11: api.v1.AlbumsList.albums:type_name -> api.v1.Album
+	19, // 11: api.v1.AlbumsList.albums:type_name -> api.v1.Album
 	0,  // 12: api.v1.GetAlbumTracksRequest.environment:type_name -> api.v1.BmmEnvironment
 	0,  // 13: api.v1.GetPodcastTracksRequest.environment:type_name -> api.v1.BmmEnvironment
 	0,  // 14: api.v1.GetAvailableLanguagesRequest.environment:type_name -> api.v1.BmmEnvironment
-	61, // 15: api.v1.BMMTrack.publishedAt:type_name -> google.protobuf.Timestamp
-	24, // 16: api.v1.BMMTrack.languages:type_name -> api.v1.LanguageList
-	24, // 17: api.v1.BMMTrack.transcriptions:type_name -> api.v1.LanguageList
-	22, // 18: api.v1.TracksList.tracks:type_name -> api.v1.BMMTrack
-	25, // 19: api.v1.LanguageList.Languages:type_name -> api.v1.Language
-	28, // 20: api.v1.Transcription.segments:type_name -> api.v1.Segments
-	29, // 21: api.v1.Segments.words:type_name -> api.v1.Words
+	67, // 15: api.v1.BMMTrack.publishedAt:type_name -> google.protobuf.Timestamp
+	26, // 16: api.v1.BMMTrack.languages:type_name -> api.v1.LanguageList
+	26, // 17: api.v1.BMMTrack.transcriptions:type_name -> api.v1.LanguageList
+	24, // 18: api.v1.TracksList.tracks:type_name -> api.v1.BMMTrack
+	27, // 19: api.v1.LanguageList.Languages:type_name -> api.v1.Language
+	30, // 20: api.v1.Transcription.segments:type_name -> api.v1.Segments
+	31, // 21: api.v1.Segments.words:type_name -> api.v1.Words
 	0,  // 22: api.v1.GetBMMTranscriptionRequest.environment:type_name -> api.v1.BmmEnvironment
-	27, // 23: api.v1.SubmitTranscriptionRequest.transcription:type_name -> api.v1.Transcription
-	36, // 24: api.v1.GetExportConfigResponse.languages:type_name -> api.v1.ExportLanguage
-	35, // 25: api.v1.GetExportConfigResponse.resolutions:type_name -> api.v1.ExportResolution
-	37, // 26: api.v1.GetExportConfigResponse.subclips:type_name -> api.v1.ExportSubclip
-	40, // 27: api.v1.StartExportRequest.resolutions:type_name -> api.v1.ExportResolutionSelection
-	50, // 28: api.v1.ResolveAssetsResponse.assets:type_name -> api.v1.ResolvedAsset
+	29, // 23: api.v1.SubmitTranscriptionRequest.transcription:type_name -> api.v1.Transcription
+	38, // 24: api.v1.GetExportConfigResponse.languages:type_name -> api.v1.ExportLanguage
+	37, // 25: api.v1.GetExportConfigResponse.resolutions:type_name -> api.v1.ExportResolution
+	39, // 26: api.v1.GetExportConfigResponse.subclips:type_name -> api.v1.ExportSubclip
+	42, // 27: api.v1.StartExportRequest.resolutions:type_name -> api.v1.ExportResolutionSelection
+	52, // 28: api.v1.ResolveAssetsResponse.assets:type_name -> api.v1.ResolvedAsset
 	1,  // 29: api.v1.TriggerCantemoActionRequest.action:type_name -> api.v1.CantemoAction
-	54, // 30: api.v1.VaultSearchResponse.items:type_name -> api.v1.VaultItem
-	55, // 31: api.v1.VaultSearchResponse.facets:type_name -> api.v1.VaultFacet
-	54, // 32: api.v1.GetVaultItemResponse.item:type_name -> api.v1.VaultItem
-	8,  // 33: api.v1.PermissionsList.PermissionsEntry.value:type_name -> api.v1.Permissions
-	13, // 34: api.v1.GetYearsResponse.DataEntry.value:type_name -> api.v1.BMMYear
-	62, // 35: api.v1.APIService.GetPermissions:input_type -> api.v1.Void
-	10, // 36: api.v1.APIService.UpdatePermissions:input_type -> api.v1.SetPermissionsRequest
-	11, // 37: api.v1.APIService.DeletePermissions:input_type -> api.v1.DeletePermissionsRequest
-	62, // 38: api.v1.APIService.ListPermissions:input_type -> api.v1.Void
-	26, // 39: api.v1.APIService.GetTranscription:input_type -> api.v1.GetTranscriptionReqest
-	30, // 40: api.v1.APIService.GetPreview:input_type -> api.v1.GetPreviewRequest
-	33, // 41: api.v1.APIService.SubmitTranscription:input_type -> api.v1.SubmitTranscriptionRequest
-	15, // 42: api.v1.APIService.GetYears:input_type -> api.v1.GetYearsRequest
-	16, // 43: api.v1.APIService.GetAlbums:input_type -> api.v1.GetAlbumsRequest
-	19, // 44: api.v1.APIService.GetAlbumTracks:input_type -> api.v1.GetAlbumTracksRequest
-	20, // 45: api.v1.APIService.GetPodcastTracks:input_type -> api.v1.GetPodcastTracksRequest
-	21, // 46: api.v1.APIService.GetLanguages:input_type -> api.v1.GetAvailableLanguagesRequest
-	32, // 47: api.v1.APIService.GetBMMTranscription:input_type -> api.v1.GetBMMTranscriptionRequest
-	34, // 48: api.v1.APIService.SubmitShort:input_type -> api.v1.SubmitShortRequest
-	38, // 49: api.v1.APIService.GetExportConfig:input_type -> api.v1.GetExportConfigRequest
-	41, // 50: api.v1.APIService.StartExport:input_type -> api.v1.StartExportRequest
-	43, // 51: api.v1.APIService.ExportTimedMetadata:input_type -> api.v1.ExportTimedMetadataRequest
-	49, // 52: api.v1.APIService.ResolveAssets:input_type -> api.v1.ResolveAssetsRequest
-	44, // 53: api.v1.APIService.GetVBExportConfig:input_type -> api.v1.GetVBExportConfigRequest
-	46, // 54: api.v1.APIService.StartVBExport:input_type -> api.v1.StartVBExportRequest
-	62, // 55: api.v1.APIService.GetExportDestinations:input_type -> api.v1.Void
-	52, // 56: api.v1.APIService.TriggerCantemoAction:input_type -> api.v1.TriggerCantemoActionRequest
-	53, // 57: api.v1.APIService.VaultSearch:input_type -> api.v1.VaultSearchRequest
-	57, // 58: api.v1.APIService.GetVaultItem:input_type -> api.v1.GetVaultItemRequest
-	8,  // 59: api.v1.APIService.GetPermissions:output_type -> api.v1.Permissions
-	62, // 60: api.v1.APIService.UpdatePermissions:output_type -> api.v1.Void
-	62, // 61: api.v1.APIService.DeletePermissions:output_type -> api.v1.Void
-	12, // 62: api.v1.APIService.ListPermissions:output_type -> api.v1.PermissionsList
-	27, // 63: api.v1.APIService.GetTranscription:output_type -> api.v1.Transcription
-	31, // 64: api.v1.APIService.GetPreview:output_type -> api.v1.Preview
-	62, // 65: api.v1.APIService.SubmitTranscription:output_type -> api.v1.Void
-	14, // 66: api.v1.APIService.GetYears:output_type -> api.v1.GetYearsResponse
-	18, // 67: api.v1.APIService.GetAlbums:output_type -> api.v1.AlbumsList
-	23, // 68: api.v1.APIService.GetAlbumTracks:output_type -> api.v1.TracksList
-	23, // 69: api.v1.APIService.GetPodcastTracks:output_type -> api.v1.TracksList
-	24, // 70: api.v1.APIService.GetLanguages:output_type -> api.v1.LanguageList
-	27, // 71: api.v1.APIService.GetBMMTranscription:output_type -> api.v1.Transcription
-	62, // 72: api.v1.APIService.SubmitShort:output_type -> api.v1.Void
-	39, // 73: api.v1.APIService.GetExportConfig:output_type -> api.v1.GetExportConfigResponse
-	42, // 74: api.v1.APIService.StartExport:output_type -> api.v1.StartExportResponse
-	62, // 75: api.v1.APIService.ExportTimedMetadata:output_type -> api.v1.Void
-	51, // 76: api.v1.APIService.ResolveAssets:output_type -> api.v1.ResolveAssetsResponse
-	45, // 77: api.v1.APIService.GetVBExportConfig:output_type -> api.v1.GetVBExportConfigResponse
-	47, // 78: api.v1.APIService.StartVBExport:output_type -> api.v1.StartVBExportResponse
-	48, // 79: api.v1.APIService.GetExportDestinations:output_type -> api.v1.ExportDestinationsResponse
-	62, // 80: api.v1.APIService.TriggerCantemoAction:output_type -> api.v1.Void
-	56, // 81: api.v1.APIService.VaultSearch:output_type -> api.v1.VaultSearchResponse
-	58, // 82: api.v1.APIService.GetVaultItem:output_type -> api.v1.GetVaultItemResponse
-	59, // [59:83] is the sub-list for method output_type
-	35, // [35:59] is the sub-list for method input_type
-	35, // [35:35] is the sub-list for extension type_name
-	35, // [35:35] is the sub-list for extension extendee
-	0,  // [0:35] is the sub-list for field type_name
+	56, // 30: api.v1.VaultSearchResponse.items:type_name -> api.v1.VaultItem
+	57, // 31: api.v1.VaultSearchResponse.facets:type_name -> api.v1.VaultFacet
+	56, // 32: api.v1.GetVaultItemResponse.item:type_name -> api.v1.VaultItem
+	2,  // 33: api.v1.Marker.type:type_name -> api.v1.MarkerType
+	3,  // 34: api.v1.Marker.source:type_name -> api.v1.MarkerSource
+	61, // 35: api.v1.GetMarkersResponse.markers:type_name -> api.v1.Marker
+	61, // 36: api.v1.SubmitMarkersRequest.markers:type_name -> api.v1.Marker
+	10, // 37: api.v1.PermissionsList.PermissionsEntry.value:type_name -> api.v1.Permissions
+	15, // 38: api.v1.GetYearsResponse.DataEntry.value:type_name -> api.v1.BMMYear
+	68, // 39: api.v1.APIService.GetPermissions:input_type -> api.v1.Void
+	12, // 40: api.v1.APIService.UpdatePermissions:input_type -> api.v1.SetPermissionsRequest
+	13, // 41: api.v1.APIService.DeletePermissions:input_type -> api.v1.DeletePermissionsRequest
+	68, // 42: api.v1.APIService.ListPermissions:input_type -> api.v1.Void
+	28, // 43: api.v1.APIService.GetTranscription:input_type -> api.v1.GetTranscriptionReqest
+	32, // 44: api.v1.APIService.GetPreview:input_type -> api.v1.GetPreviewRequest
+	35, // 45: api.v1.APIService.SubmitTranscription:input_type -> api.v1.SubmitTranscriptionRequest
+	17, // 46: api.v1.APIService.GetYears:input_type -> api.v1.GetYearsRequest
+	18, // 47: api.v1.APIService.GetAlbums:input_type -> api.v1.GetAlbumsRequest
+	21, // 48: api.v1.APIService.GetAlbumTracks:input_type -> api.v1.GetAlbumTracksRequest
+	22, // 49: api.v1.APIService.GetPodcastTracks:input_type -> api.v1.GetPodcastTracksRequest
+	23, // 50: api.v1.APIService.GetLanguages:input_type -> api.v1.GetAvailableLanguagesRequest
+	34, // 51: api.v1.APIService.GetBMMTranscription:input_type -> api.v1.GetBMMTranscriptionRequest
+	36, // 52: api.v1.APIService.SubmitShort:input_type -> api.v1.SubmitShortRequest
+	40, // 53: api.v1.APIService.GetExportConfig:input_type -> api.v1.GetExportConfigRequest
+	43, // 54: api.v1.APIService.StartExport:input_type -> api.v1.StartExportRequest
+	45, // 55: api.v1.APIService.ExportTimedMetadata:input_type -> api.v1.ExportTimedMetadataRequest
+	51, // 56: api.v1.APIService.ResolveAssets:input_type -> api.v1.ResolveAssetsRequest
+	46, // 57: api.v1.APIService.GetVBExportConfig:input_type -> api.v1.GetVBExportConfigRequest
+	48, // 58: api.v1.APIService.StartVBExport:input_type -> api.v1.StartVBExportRequest
+	68, // 59: api.v1.APIService.GetExportDestinations:input_type -> api.v1.Void
+	54, // 60: api.v1.APIService.TriggerCantemoAction:input_type -> api.v1.TriggerCantemoActionRequest
+	55, // 61: api.v1.APIService.VaultSearch:input_type -> api.v1.VaultSearchRequest
+	59, // 62: api.v1.APIService.GetVaultItem:input_type -> api.v1.GetVaultItemRequest
+	62, // 63: api.v1.APIService.GetMarkers:input_type -> api.v1.GetMarkersRequest
+	64, // 64: api.v1.APIService.SubmitMarkers:input_type -> api.v1.SubmitMarkersRequest
+	10, // 65: api.v1.APIService.GetPermissions:output_type -> api.v1.Permissions
+	68, // 66: api.v1.APIService.UpdatePermissions:output_type -> api.v1.Void
+	68, // 67: api.v1.APIService.DeletePermissions:output_type -> api.v1.Void
+	14, // 68: api.v1.APIService.ListPermissions:output_type -> api.v1.PermissionsList
+	29, // 69: api.v1.APIService.GetTranscription:output_type -> api.v1.Transcription
+	33, // 70: api.v1.APIService.GetPreview:output_type -> api.v1.Preview
+	68, // 71: api.v1.APIService.SubmitTranscription:output_type -> api.v1.Void
+	16, // 72: api.v1.APIService.GetYears:output_type -> api.v1.GetYearsResponse
+	20, // 73: api.v1.APIService.GetAlbums:output_type -> api.v1.AlbumsList
+	25, // 74: api.v1.APIService.GetAlbumTracks:output_type -> api.v1.TracksList
+	25, // 75: api.v1.APIService.GetPodcastTracks:output_type -> api.v1.TracksList
+	26, // 76: api.v1.APIService.GetLanguages:output_type -> api.v1.LanguageList
+	29, // 77: api.v1.APIService.GetBMMTranscription:output_type -> api.v1.Transcription
+	68, // 78: api.v1.APIService.SubmitShort:output_type -> api.v1.Void
+	41, // 79: api.v1.APIService.GetExportConfig:output_type -> api.v1.GetExportConfigResponse
+	44, // 80: api.v1.APIService.StartExport:output_type -> api.v1.StartExportResponse
+	68, // 81: api.v1.APIService.ExportTimedMetadata:output_type -> api.v1.Void
+	53, // 82: api.v1.APIService.ResolveAssets:output_type -> api.v1.ResolveAssetsResponse
+	47, // 83: api.v1.APIService.GetVBExportConfig:output_type -> api.v1.GetVBExportConfigResponse
+	49, // 84: api.v1.APIService.StartVBExport:output_type -> api.v1.StartVBExportResponse
+	50, // 85: api.v1.APIService.GetExportDestinations:output_type -> api.v1.ExportDestinationsResponse
+	68, // 86: api.v1.APIService.TriggerCantemoAction:output_type -> api.v1.Void
+	58, // 87: api.v1.APIService.VaultSearch:output_type -> api.v1.VaultSearchResponse
+	60, // 88: api.v1.APIService.GetVaultItem:output_type -> api.v1.GetVaultItemResponse
+	63, // 89: api.v1.APIService.GetMarkers:output_type -> api.v1.GetMarkersResponse
+	68, // 90: api.v1.APIService.SubmitMarkers:output_type -> api.v1.Void
+	65, // [65:91] is the sub-list for method output_type
+	39, // [39:65] is the sub-list for method input_type
+	39, // [39:39] is the sub-list for extension type_name
+	39, // [39:39] is the sub-list for extension extendee
+	0,  // [0:39] is the sub-list for field type_name
 }
 
 func init() { file_api_v1_api_proto_init() }
@@ -3974,8 +4362,8 @@ func file_api_v1_api_proto_init() {
 		File: protoimpl.DescBuilder{
 			GoPackagePath: reflect.TypeOf(x{}).PkgPath(),
 			RawDescriptor: unsafe.Slice(unsafe.StringData(file_api_v1_api_proto_rawDesc), len(file_api_v1_api_proto_rawDesc)),
-			NumEnums:      2,
-			NumMessages:   59,
+			NumEnums:      4,
+			NumMessages:   63,
 			NumExtensions: 0,
 			NumServices:   1,
 		},
diff --git a/backend/api/v1/apiv1connect/api.connect.go b/backend/api/v1/apiv1connect/api.connect.go
index 1d99b11..3d0928e 100644
--- a/backend/api/v1/apiv1connect/api.connect.go
+++ b/backend/api/v1/apiv1connect/api.connect.go
@@ -97,6 +97,11 @@ const (
 	APIServiceVaultSearchProcedure = "/api.v1.APIService/VaultSearch"
 	// APIServiceGetVaultItemProcedure is the fully-qualified name of the APIService's GetVaultItem RPC.
 	APIServiceGetVaultItemProcedure = "/api.v1.APIService/GetVaultItem"
+	// APIServiceGetMarkersProcedure is the fully-qualified name of the APIService's GetMarkers RPC.
+	APIServiceGetMarkersProcedure = "/api.v1.APIService/GetMarkers"
+	// APIServiceSubmitMarkersProcedure is the fully-qualified name of the APIService's SubmitMarkers
+	// RPC.
+	APIServiceSubmitMarkersProcedure = "/api.v1.APIService/SubmitMarkers"
 )
 
 // APIServiceClient is a client for the api.v1.APIService service.
@@ -135,6 +140,9 @@ type APIServiceClient interface {
 	// VAULT (Vidispine search)
 	VaultSearch(context.Context, *connect.Request[v1.VaultSearchRequest]) (*connect.Response[v1.VaultSearchResponse], error)
 	GetVaultItem(context.Context, *connect.Request[v1.GetVaultItemRequest]) (*connect.Response[v1.GetVaultItemResponse], error)
+	// Markers
+	GetMarkers(context.Context, *connect.Request[v1.GetMarkersRequest]) (*connect.Response[v1.GetMarkersResponse], error)
+	SubmitMarkers(context.Context, *connect.Request[v1.SubmitMarkersRequest]) (*connect.Response[v1.Void], error)
 }
 
 // NewAPIServiceClient constructs a client for the api.v1.APIService service. By default, it uses
@@ -292,6 +300,18 @@ func NewAPIServiceClient(httpClient connect.HTTPClient, baseURL string, opts ...
 			connect.WithSchema(aPIServiceMethods.ByName("GetVaultItem")),
 			connect.WithClientOptions(opts...),
 		),
+		getMarkers: connect.NewClient[v1.GetMarkersRequest, v1.GetMarkersResponse](
+			httpClient,
+			baseURL+APIServiceGetMarkersProcedure,
+			connect.WithSchema(aPIServiceMethods.ByName("GetMarkers")),
+			connect.WithClientOptions(opts...),
+		),
+		submitMarkers: connect.NewClient[v1.SubmitMarkersRequest, v1.Void](
+			httpClient,
+			baseURL+APIServiceSubmitMarkersProcedure,
+			connect.WithSchema(aPIServiceMethods.ByName("SubmitMarkers")),
+			connect.WithClientOptions(opts...),
+		),
 	}
 }
 
@@ -321,6 +341,8 @@ type aPIServiceClient struct {
 	triggerCantemoAction  *connect.Client[v1.TriggerCantemoActionRequest, v1.Void]
 	vaultSearch           *connect.Client[v1.VaultSearchRequest, v1.VaultSearchResponse]
 	getVaultItem          *connect.Client[v1.GetVaultItemRequest, v1.GetVaultItemResponse]
+	getMarkers            *connect.Client[v1.GetMarkersRequest, v1.GetMarkersResponse]
+	submitMarkers         *connect.Client[v1.SubmitMarkersRequest, v1.Void]
 }
 
 // GetPermissions calls api.v1.APIService.GetPermissions.
@@ -443,6 +465,16 @@ func (c *aPIServiceClient) GetVaultItem(ctx context.Context, req *connect.Reques
 	return c.getVaultItem.CallUnary(ctx, req)
 }
 
+// GetMarkers calls api.v1.APIService.GetMarkers.
+func (c *aPIServiceClient) GetMarkers(ctx context.Context, req *connect.Request[v1.GetMarkersRequest]) (*connect.Response[v1.GetMarkersResponse], error) {
+	return c.getMarkers.CallUnary(ctx, req)
+}
+
+// SubmitMarkers calls api.v1.APIService.SubmitMarkers.
+func (c *aPIServiceClient) SubmitMarkers(ctx context.Context, req *connect.Request[v1.SubmitMarkersRequest]) (*connect.Response[v1.Void], error) {
+	return c.submitMarkers.CallUnary(ctx, req)
+}
+
 // APIServiceHandler is an implementation of the api.v1.APIService service.
 type APIServiceHandler interface {
 	// Permissions
@@ -479,6 +511,9 @@ type APIServiceHandler interface {
 	// VAULT (Vidispine search)
 	VaultSearch(context.Context, *connect.Request[v1.VaultSearchRequest]) (*connect.Response[v1.VaultSearchResponse], error)
 	GetVaultItem(context.Context, *connect.Request[v1.GetVaultItemRequest]) (*connect.Response[v1.GetVaultItemResponse], error)
+	// Markers
+	GetMarkers(context.Context, *connect.Request[v1.GetMarkersRequest]) (*connect.Response[v1.GetMarkersResponse], error)
+	SubmitMarkers(context.Context, *connect.Request[v1.SubmitMarkersRequest]) (*connect.Response[v1.Void], error)
 }
 
 // NewAPIServiceHandler builds an HTTP handler from the service implementation. It returns the path
@@ -632,6 +667,18 @@ func NewAPIServiceHandler(svc APIServiceHandler, opts ...connect.HandlerOption)
 		connect.WithSchema(aPIServiceMethods.ByName("GetVaultItem")),
 		connect.WithHandlerOptions(opts...),
 	)
+	aPIServiceGetMarkersHandler := connect.NewUnaryHandler(
+		APIServiceGetMarkersProcedure,
+		svc.GetMarkers,
+		connect.WithSchema(aPIServiceMethods.ByName("GetMarkers")),
+		connect.WithHandlerOptions(opts...),
+	)
+	aPIServiceSubmitMarkersHandler := connect.NewUnaryHandler(
+		APIServiceSubmitMarkersProcedure,
+		svc.SubmitMarkers,
+		connect.WithSchema(aPIServiceMethods.ByName("SubmitMarkers")),
+		connect.WithHandlerOptions(opts...),
+	)
 	return "/api.v1.APIService/", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		switch r.URL.Path {
 		case APIServiceGetPermissionsProcedure:
@@ -682,6 +729,10 @@ func NewAPIServiceHandler(svc APIServiceHandler, opts ...connect.HandlerOption)
 			aPIServiceVaultSearchHandler.ServeHTTP(w, r)
 		case APIServiceGetVaultItemProcedure:
 			aPIServiceGetVaultItemHandler.ServeHTTP(w, r)
+		case APIServiceGetMarkersProcedure:
+			aPIServiceGetMarkersHandler.ServeHTTP(w, r)
+		case APIServiceSubmitMarkersProcedure:
+			aPIServiceSubmitMarkersHandler.ServeHTTP(w, r)
 		default:
 			http.NotFound(w, r)
 		}
@@ -786,3 +837,11 @@ func (UnimplementedAPIServiceHandler) VaultSearch(context.Context, *connect.Requ
 func (UnimplementedAPIServiceHandler) GetVaultItem(context.Context, *connect.Request[v1.GetVaultItemRequest]) (*connect.Response[v1.GetVaultItemResponse], error) {
 	return nil, connect.NewError(connect.CodeUnimplemented, errors.New("api.v1.APIService.GetVaultItem is not implemented"))
 }
+
+func (UnimplementedAPIServiceHandler) GetMarkers(context.Context, *connect.Request[v1.GetMarkersRequest]) (*connect.Response[v1.GetMarkersResponse], error) {
+	return nil, connect.NewError(connect.CodeUnimplemented, errors.New("api.v1.APIService.GetMarkers is not implemented"))
+}
+
+func (UnimplementedAPIServiceHandler) SubmitMarkers(context.Context, *connect.Request[v1.SubmitMarkersRequest]) (*connect.Response[v1.Void], error) {
+	return nil, connect.NewError(connect.CodeUnimplemented, errors.New("api.v1.APIService.SubmitMarkers is not implemented"))
+}
diff --git a/backend/api/v1/common.pb.go b/backend/api/v1/common.pb.go
index 982edaa..4f8681d 100644
--- a/backend/api/v1/common.pb.go
+++ b/backend/api/v1/common.pb.go
@@ -1,6 +1,6 @@
 // Code generated by protoc-gen-go. DO NOT EDIT.
 // versions:
-// 	protoc-gen-go v1.36.10
+// 	protoc-gen-go v1.36.8
 // 	protoc        (unknown)
 // source: api/v1/common.proto
 
diff --git a/backend/cmd/server/main.go b/backend/cmd/server/main.go
index e742dfc..f95b2cd 100644
--- a/backend/cmd/server/main.go
+++ b/backend/cmd/server/main.go
@@ -56,6 +56,7 @@ type ApiServer struct {
 	ExportAPI
 	CantemoAPI
 	VaultAPI
+	*MarkersAPI
 }
 
 func withCORS(connectHandler http.Handler) http.Handler {
@@ -142,6 +143,7 @@ func main() {
 		ExportAPI:        *exportAPI,
 		CantemoAPI:       *cantemoAPI,
 		VaultAPI:         *vaultAPI,
+		MarkersAPI:       NewMarkersAPI(),
 	}
 
 	if os.Getenv("STATIC_FILE_PATH") != "" {
diff --git a/backend/cmd/server/markers.go b/backend/cmd/server/markers.go
new file mode 100644
index 0000000..bb5f3e4
--- /dev/null
+++ b/backend/cmd/server/markers.go
@@ -0,0 +1,45 @@
+package main
+
+import (
+	apiv1 "bcc-media-tools/api/v1"
+	"context"
+	"fmt"
+	"sync"
+
+	"connectrpc.com/connect"
+)
+
+// MarkersAPI is a placeholder, in-memory implementation of the markers store so
+// the frontend can develop against a real contract.
+//
+// TODO: replace the in-memory map + demo seed with the real integration:
+//   - GetMarkers should merge markers imported from the third-party timing
+//     program (name-supers, bible-verse references, …) with manually-created
+//     ones, keyed by VX-id.
+//   - SubmitMarkers should persist edits and reconcile IMPORTED markers with
+//     their source.
+type MarkersAPI struct {
+	mu    sync.Mutex
+	store map[string][]*apiv1.Marker
+}
+
+func NewMarkersAPI() *MarkersAPI {
+	return &MarkersAPI{store: map[string][]*apiv1.Marker{}}
+}
+
+func (m *MarkersAPI) GetMarkers(ctx context.Context, req *connect.Request[apiv1.GetMarkersRequest]) (*connect.Response[apiv1.GetMarkersResponse], error) {
+	m.mu.Lock()
+	defer m.mu.Unlock()
+
+	return connect.NewResponse(&apiv1.GetMarkersResponse{Markers: m.store[req.Msg.VXID]}), nil
+}
+
+func (m *MarkersAPI) SubmitMarkers(ctx context.Context, req *connect.Request[apiv1.SubmitMarkersRequest]) (*connect.Response[apiv1.Void], error) {
+	m.mu.Lock()
+	defer m.mu.Unlock()
+
+	m.store[req.Msg.VXID] = req.Msg.Markers
+	fmt.Printf("Stored %d markers for VXID %s\n", len(req.Msg.Markers), req.Msg.VXID)
+
+	return connect.NewResponse(&apiv1.Void{}), nil
+}
diff --git a/frontend/app/composables/useMarkers.ts b/frontend/app/composables/useMarkers.ts
index 18ff88c..0be890e 100644
--- a/frontend/app/composables/useMarkers.ts
+++ b/frontend/app/composables/useMarkers.ts
@@ -1,72 +1,83 @@
-import { useLocalStorage } from "@vueuse/core";
-import type { Marker, MarkerType } from "~/utils/markers";
+import {
+    MarkerSource as PbMarkerSource,
+    MarkerType as PbMarkerType,
+    type Marker as PbMarker,
+} from "~~/src/gen/api/v1/api_pb";
+import type { Marker, MarkerSource, MarkerType } from "~/utils/markers";
 
-// Frontend-only data layer for the markers tool.
-//
-// Working state is auto-persisted to localStorage (keyed by VX-id), mirroring
-// the transcription editor's local-autosave behaviour. `save()` currently just
-// simulates the round-trip to the backend.
-//
-// TODO(backend): replace the seed/load/save internals with the real RPCs, e.g.
-//   load  -> api.getMarkers({ VXID })
-//   save  -> api.submitMarkers({ VXID, markers })
-// The public surface of this composable should not need to change.
+// Markers data layer, backed by the ConnectRPC API. Working state is held
+// locally; `save` submits it. See `backend/cmd/server/markers.go` — the backend
+// is still an in-memory placeholder pending the third-party timing integration.
 
-// Demo "imported" markers, standing in for the third-party timing feed. Times
-// are kept within the first few minutes so they line up with most previews.
-function seedMarkers(): Marker[] {
-    return [
-        {
-            id: generateRandomId(),
-            type: "name-super",
-            label: "Kåre Johan Hamre",
-            note: "Speaker",
-            start: 12.5,
-            end: 18.0,
-            source: "imported",
-        },
-        {
-            id: generateRandomId(),
-            type: "bible-verse",
-            label: "John 3:16",
-            start: 45.0,
-            end: 52.5,
-            source: "imported",
-        },
-        {
-            id: generateRandomId(),
-            type: "name-super",
-            label: "Bente Lothe",
-            start: 95.2,
-            end: 101.0,
-            source: "imported",
-        },
-        {
-            id: generateRandomId(),
-            type: "song",
-            label: "How Great Thou Art",
-            start: 130.0,
-            end: 240.0,
-            source: "imported",
-        },
-    ];
+const TYPE_TO_PB: Record<MarkerType, PbMarkerType> = {
+    "name-super": PbMarkerType.NAME_SUPER,
+    "bible-verse": PbMarkerType.BIBLE_VERSE,
+    song: PbMarkerType.SONG,
+    chapter: PbMarkerType.CHAPTER,
+    custom: PbMarkerType.CUSTOM,
+};
+const TYPE_FROM_PB: Record<number, MarkerType> = {
+    [PbMarkerType.NAME_SUPER]: "name-super",
+    [PbMarkerType.BIBLE_VERSE]: "bible-verse",
+    [PbMarkerType.SONG]: "song",
+    [PbMarkerType.CHAPTER]: "chapter",
+    [PbMarkerType.CUSTOM]: "custom",
+};
+const SOURCE_TO_PB: Record<MarkerSource, PbMarkerSource> = {
+    imported: PbMarkerSource.IMPORTED,
+    manual: PbMarkerSource.MANUAL,
+};
+const SOURCE_FROM_PB: Record<number, MarkerSource> = {
+    [PbMarkerSource.IMPORTED]: "imported",
+    [PbMarkerSource.MANUAL]: "manual",
+};
+
+function fromPb(m: PbMarker): Marker {
+    return {
+        id: m.id,
+        type: TYPE_FROM_PB[m.type] ?? "custom",
+        label: m.label,
+        note: m.note || undefined,
+        start: m.start,
+        end: m.end,
+        source: SOURCE_FROM_PB[m.source] ?? "manual",
+    };
 }
 
-export function useMarkers(vxId: MaybeRefOrGetter<string>) {
-    // Plain string key, evaluated once. Each asset is opened in a fresh mount
-    // (via the index page), so we don't need a reactive key here.
-    const storageKey = `markers-${toValue(vxId)}`;
+function toPb(m: Marker) {
+    return {
+        id: m.id,
+        type: TYPE_TO_PB[m.type],
+        label: m.label,
+        note: m.note ?? "",
+        start: m.start,
+        end: m.end,
+        source: SOURCE_TO_PB[m.source],
+    };
+}
 
-    // `useLocalStorage` seeds with the imported demo data on first visit, then
-    // reads the working copy on subsequent loads. Its internal deep watcher
-    // persists every mutation automatically.
-    const markers = useLocalStorage<Marker[]>(storageKey, seedMarkers());
+export function useMarkers(vxId: MaybeRefOrGetter<string>) {
+    const api = useAPI();
 
-    // True when there are local changes not yet submitted (via `save`). Starts
-    // clean; every mutation dirties it. With a real backend this would compare
-    // against the last submitted state.
+    const markers = ref<Marker[]>([]);
+    const loading = ref(true);
+    // True when there are local changes not yet submitted (via `save`).
     const dirty = ref(false);
 
+    async function load() {
+        loading.value = true;
+        try {
+            const res = await api.getMarkers({ VXID: toValue(vxId) });
+            markers.value = res.markers.map(fromPb);
+            dirty.value = false;
+        } catch (err) {
+            console.error("Failed to load markers", err);
+        } finally {
+            loading.value = false;
+        }
+    }
+    onMounted(load);
+
     function add(
         partial: Partial<Marker> & Pick<Marker, "start" | "end">,
     ): Marker {
@@ -94,7 +105,6 @@ export function useMarkers(vxId: MaybeRefOrGetter<string>) {
         dirty.value = true;
     }
 
-    // Restore a previously removed marker (used by the undo toast).
     function restore(marker: Marker) {
         if (markers.value.some((m) => m.id === marker.id)) return;
         markers.value = [...markers.value, marker];
@@ -102,23 +112,22 @@ export function useMarkers(vxId: MaybeRefOrGetter<string>) {
     }
 
     const saving = ref(false);
-    // Simulated submit-to-backend. Swap for `api.submitMarkers` later.
     async function save() {
         saving.value = true;
         try {
-            await new Promise((resolve) => setTimeout(resolve, 400));
+            await api.submitMarkers({
+                VXID: toValue(vxId),
+                markers: markers.value.map(toPb),
+            });
             dirty.value = false;
         } finally {
             saving.value = false;
         }
     }
 
-    function countByType(type: MarkerType) {
-        return markers.value.filter((m) => m.type === type).length;
-    }
-
     return {
         markers,
+        loading,
         dirty,
         add,
         update,
@@ -126,6 +135,5 @@ export function useMarkers(vxId: MaybeRefOrGetter<string>) {
         restore,
         save,
         saving,
-        countByType,
     };
 }
diff --git a/frontend/src/gen/api/v1/api_pb.ts b/frontend/src/gen/api/v1/api_pb.ts
index 3c3e908..76d9071 100644
--- a/frontend/src/gen/api/v1/api_pb.ts
+++ b/frontend/src/gen/api/v1/api_pb.ts
@@ -14,7 +14,7 @@ import type { Message } from "@bufbuild/protobuf";
  * Describes the file api/v1/api.proto.
  */
 export const file_api_v1_api: GenFile = /*@__PURE__*/
-  fileDesc("ChBhcGkvdjEvYXBpLnByb3RvEgZhcGkudjEiaAoNQk1NUGVybWlzc2lvbhIRCglsYW5ndWFnZXMYASADKAkSDgoGYWxidW1zGAIgAygJEhAKCHBvZGNhc3RzGAMgAygJEg0KBWFkbWluGAQgASgIEhMKC2ludGVncmF0aW9uGAUgASgIIj0KF1RyYW5zY3JpcHRpb25QZXJtaXNzaW9uEg0KBWFkbWluGAEgASgIEhMKC21lZGlhYmFua2VuGAIgASgIImQKEEV4cG9ydFBlcm1pc3Npb24SFAoMZGVzdGluYXRpb25zGAEgAygJEg0KBWFkbWluGAIgASgIEhYKDnRpbWVkX21ldGFkYXRhGAMgASgIEhMKC2J1bGtfZXhwb3J0GAQgASgIIk4KElZCRXhwb3J0UGVybWlzc2lvbhIUCgxkZXN0aW5hdGlvbnMYASADKAkSDQoFYWRtaW4YAiABKAgSEwoLYnVsa19leHBvcnQYAyABKAgiXgoRQ2FudGVtb1Blcm1pc3Npb24SDwoHcHJldmlldxgBIAEoCBISCgp0cmFuc2NyaWJlGAIgASgIEhEKCXN1YnRpdGxlcxgDIAEoCBIRCglyZWxhdGlvbnMYBCABKAgiIgoPVmF1bHRQZXJtaXNzaW9uEg8KB2VuYWJsZWQYASABKAgitAIKC1Blcm1pc3Npb25zEg0KBWFkbWluGAEgASgIEiIKA2JtbRgCIAEoCzIVLmFwaS52MS5CTU1QZXJtaXNzaW9uEg0KBWVtYWlsGAMgASgJEjYKDXRyYW5zY3JpcHRpb24YBCABKAsyHy5hcGkudjEuVHJhbnNjcmlwdGlvblBlcm1pc3Npb24SKAoGZXhwb3J0GAUgASgLMhguYXBpLnYxLkV4cG9ydFBlcm1pc3Npb24SLQoJdmJfZXhwb3J0GAYgASgLMhouYXBpLnYxLlZCRXhwb3J0UGVybWlzc2lvbhIqCgdjYW50ZW1vGAcgASgLMhkuYXBpLnYxLkNhbnRlbW9QZXJtaXNzaW9uEiYKBXZhdWx0GAggASgLMhcuYXBpLnYxLlZhdWx0UGVybWlzc2lvbiIXChVHZXRQZXJtaXNzaW9uc1JlcXVlc3QiUAoVU2V0UGVybWlzc2lvbnNSZXF1ZXN0Eg0KBWVtYWlsGAEgASgJEigKC3Blcm1pc3Npb25zGAIgASgLMhMuYXBpLnYxLlBlcm1pc3Npb25zIikKGERlbGV0ZVBlcm1pc3Npb25zUmVxdWVzdBINCgVlbWFpbBgBIAEoCSKZAQoPUGVybWlzc2lvbnNMaXN0Ej0KC3Blcm1pc3Npb25zGAEgAygLMiguYXBpLnYxLlBlcm1pc3Npb25zTGlzdC5QZXJtaXNzaW9uc0VudHJ5GkcKEFBlcm1pc3Npb25zRW50cnkSCwoDa2V5GAEgASgJEiIKBXZhbHVlGAIgASgLMhMuYXBpLnYxLlBlcm1pc3Npb25zOgI4ASImCgdCTU1ZZWFyEgwKBHllYXIYASABKA0SDQoFY291bnQYAiABKA0iggEKEEdldFllYXJzUmVzcG9uc2USMAoEZGF0YRgBIAMoCzIiLmFwaS52MS5HZXRZZWFyc1Jlc3BvbnNlLkRhdGFFbnRyeRo8CglEYXRhRW50cnkSCwoDa2V5GAEgASgNEh4KBXZhbHVlGAIgASgLMg8uYXBpLnYxLkJNTVllYXI6AjgBIj4KD0dldFllYXJzUmVxdWVzdBIrCgtlbnZpcm9ubWVudBgBIAEoDjIWLmFwaS52MS5CbW1FbnZpcm9ubWVudCJNChBHZXRBbGJ1bXNSZXF1ZXN0EgwKBHllYXIYASABKA0SKwoLZW52aXJvbm1lbnQYAiABKA4yFi5hcGkudjEuQm1tRW52aXJvbm1lbnQiRAoFQWxidW0SCgoCaWQYASABKAkSDQoFdGl0bGUYAiABKAkSDQoFY292ZXIYBCABKAkSEQoJbGFuZ3VhZ2VzGAUgAygJIisKCkFsYnVtc0xpc3QSHQoGYWxidW1zGAEgAygLMg0uYXBpLnYxLkFsYnVtIlYKFUdldEFsYnVtVHJhY2tzUmVxdWVzdBIQCghhbGJ1bV9pZBgBIAEoCRIrCgtlbnZpcm9ubWVudBgCIAEoDjIWLmFwaS52MS5CbW1FbnZpcm9ubWVudCJqChdHZXRQb2RjYXN0VHJhY2tzUmVxdWVzdBITCgtwb2RjYXN0X3RhZxgBIAEoCRINCgVsaW1pdBgCIAEoDRIrCgtlbnZpcm9ubWVudBgDIAEoDjIWLmFwaS52MS5CbW1FbnZpcm9ubWVudCJLChxHZXRBdmFpbGFibGVMYW5ndWFnZXNSZXF1ZXN0EisKC2Vudmlyb25tZW50GAEgASgOMhYuYXBpLnYxLkJtbUVudmlyb25tZW50IsgBCghCTU1UcmFjaxIKCgJpZBgBIAEoCRINCgV0aXRsZRgCIAEoCRIvCgtwdWJsaXNoZWRBdBgDIAEoCzIaLmdvb2dsZS5wcm90b2J1Zi5UaW1lc3RhbXASJwoJbGFuZ3VhZ2VzGAQgASgLMhQuYXBpLnYxLkxhbmd1YWdlTGlzdBIsCg50cmFuc2NyaXB0aW9ucxgFIAEoCzIULmFwaS52MS5MYW5ndWFnZUxpc3QSGQoRaGFzVHJhbnNjcmlwdGlvbnMYBiABKAgiLgoKVHJhY2tzTGlzdBIgCgZ0cmFja3MYASADKAsyEC5hcGkudjEuQk1NVHJhY2siMwoMTGFuZ3VhZ2VMaXN0EiMKCUxhbmd1YWdlcxgBIAMoCzIQLmFwaS52MS5MYW5ndWFnZSIrCghMYW5ndWFnZRIMCgRjb2RlGAEgASgJEhEKCWljb25fZmlsZRgDIAEoCSImChZHZXRUcmFuc2NyaXB0aW9uUmVxZXN0EgwKBFZYSUQYASABKAkiQQoNVHJhbnNjcmlwdGlvbhIMCgR0ZXh0GAEgASgJEiIKCHNlZ21lbnRzGAIgAygLMhAuYXBpLnYxLlNlZ21lbnRzIu0BCghTZWdtZW50cxIKCgJpZBgBIAEoARIMCgRzZWVrGAIgASgFEg0KBXN0YXJ0GAMgASgBEgsKA2VuZBgEIAEoARIMCgR0ZXh0GAUgASgJEg4KBnRva2VucxgGIAMoBRITCgt0ZW1wZXJhdHVyZRgHIAEoARITCgthdmdfbG9ncHJvYhgIIAEoARIZChFjb21wcmVzc2lvbl9yYXRpbxgJIAEoARIWCg5ub19zcGVlY2hfcHJvYhgKIAEoARISCgpjb25maWRlbmNlGAsgASgBEhwKBXdvcmRzGAwgAygLMg0uYXBpLnYxLldvcmRzIkUKBVdvcmRzEgwKBHRleHQYASABKAkSDQoFc3RhcnQYAiABKAESCwoDZW5kGAMgASgBEhIKCmNvbmZpZGVuY2UYBCABKAEiIQoRR2V0UHJldmlld1JlcXVlc3QSDAoEVlhJRBgBIAEoCSIWCgdQcmV2aWV3EgsKA3VybBgBIAEoCSJrChpHZXRCTU1UcmFuc2NyaXB0aW9uUmVxdWVzdBIOCgZibW1faWQYASABKAkSEAoIbGFuZ3VhZ2UYAiABKAkSKwoLZW52aXJvbm1lbnQYAyABKA4yFi5hcGkudjEuQm1tRW52aXJvbm1lbnQiWAoaU3VibWl0VHJhbnNjcmlwdGlvblJlcXVlc3QSDAoEVlhJRBgBIAEoCRIsCg10cmFuc2NyaXB0aW9uGAIgASgLMhUuYXBpLnYxLlRyYW5zY3JpcHRpb24iSQoSU3VibWl0U2hvcnRSZXF1ZXN0EgwKBFZYSUQYASABKAkSEQoJSW5TZWNvbmRzGAIgASgBEhIKCk91dFNlY29uZHMYAyABKAEiMQoQRXhwb3J0UmVzb2x1dGlvbhINCgV3aWR0aBgBIAEoBRIOCgZoZWlnaHQYAiABKAUiRgoORXhwb3J0TGFuZ3VhZ2USDAoEY29kZRgBIAEoCRIMCgRuYW1lGAIgASgJEgsKA211MRgDIAEoCBILCgNtdTIYBCABKAgiHgoNRXhwb3J0U3ViY2xpcBINCgV0aXRsZRgBIAEoCSImChZHZXRFeHBvcnRDb25maWdSZXF1ZXN0EgwKBFZYSUQYASABKAki1gIKF0dldEV4cG9ydENvbmZpZ1Jlc3BvbnNlEgwKBFZYSUQYASABKAkSDQoFdGl0bGUYAiABKAkSFAoMZGVzdGluYXRpb25zGAMgAygJEhUKDWF1ZGlvX3NvdXJjZXMYBCADKAkSHQoVc2VsZWN0ZWRfYXVkaW9fc291cmNlGAUgASgJEikKCWxhbmd1YWdlcxgGIAMoCzIWLmFwaS52MS5FeHBvcnRMYW5ndWFnZRIaChJzZWxlY3RlZF9sYW5ndWFnZXMYByADKAkSLQoLcmVzb2x1dGlvbnMYCCADKAsyGC5hcGkudjEuRXhwb3J0UmVzb2x1dGlvbhIQCghvdmVybGF5cxgJIAMoCRInCghzdWJjbGlwcxgKIAMoCzIVLmFwaS52MS5FeHBvcnRTdWJjbGlwEiEKGWNhbl9leHBvcnRfdGltZWRfbWV0YWRhdGEYCyABKAgiUAoZRXhwb3J0UmVzb2x1dGlvblNlbGVjdGlvbhINCgV3aWR0aBgBIAEoBRIOCgZoZWlnaHQYAiABKAUSFAoMZG93bmxvYWRhYmxlGAMgASgIIoMCChJTdGFydEV4cG9ydFJlcXVlc3QSDAoEVlhJRBgBIAEoCRIUCgxkZXN0aW5hdGlvbnMYAiADKAkSFAoMYXVkaW9fc291cmNlGAMgASgJEhEKCWxhbmd1YWdlcxgEIAMoCRI2CgtyZXNvbHV0aW9ucxgFIAMoCzIhLmFwaS52MS5FeHBvcnRSZXNvbHV0aW9uU2VsZWN0aW9uEg8KB292ZXJsYXkYBiABKAkSFQoNd2l0aF9jaGFwdGVycxgHIAEoCBIWCg5pZ25vcmVfc2lsZW5jZRgIIAEoCBIWCg5leHBvcnRfYWlfc3VicxgJIAEoCBIQCghzdWJjbGlwcxgKIAMoCSIrChNTdGFydEV4cG9ydFJlc3BvbnNlEhQKDHdvcmtmbG93X2lkcxgBIAMoCSIqChpFeHBvcnRUaW1lZE1ldGFkYXRhUmVxdWVzdBIMCgRWWElEGAEgASgJIigKGEdldFZCRXhwb3J0Q29uZmlnUmVxdWVzdBIMCgRWWElEGAEgASgJIoABChlHZXRWQkV4cG9ydENvbmZpZ1Jlc3BvbnNlEgwKBFZYSUQYASABKAkSDQoFdGl0bGUYAiABKAkSFAoMZGVzdGluYXRpb25zGAMgAygJEhcKD3N1YnRpdGxlX3NoYXBlcxgEIAMoCRIXCg9zdWJ0aXRsZV9zdHlsZXMYBSADKAkiagoUU3RhcnRWQkV4cG9ydFJlcXVlc3QSDAoEVlhJRBgBIAEoCRIUCgxkZXN0aW5hdGlvbnMYAiADKAkSFgoOc3VidGl0bGVfc2hhcGUYAyABKAkSFgoOc3VidGl0bGVfc3R5bGUYBCABKAkiLAoVU3RhcnRWQkV4cG9ydFJlc3BvbnNlEhMKC3dvcmtmbG93X2lkGAEgASgJIjQKGkV4cG9ydERlc3RpbmF0aW9uc1Jlc3BvbnNlEgoKAnZ4GAEgAygJEgoKAnZiGAIgAygJIiUKFFJlc29sdmVBc3NldHNSZXF1ZXN0Eg0KBVZYSURzGAEgAygJIjsKDVJlc29sdmVkQXNzZXQSDAoEVlhJRBgBIAEoCRINCgV0aXRsZRgCIAEoCRINCgVmb3VuZBgDIAEoCCI+ChVSZXNvbHZlQXNzZXRzUmVzcG9uc2USJQoGYXNzZXRzGAEgAygLMhUuYXBpLnYxLlJlc29sdmVkQXNzZXQiUgobVHJpZ2dlckNhbnRlbW9BY3Rpb25SZXF1ZXN0EgwKBFZYSUQYASABKAkSJQoGYWN0aW9uGAIgASgOMhUuYXBpLnYxLkNhbnRlbW9BY3Rpb24iRgoSVmF1bHRTZWFyY2hSZXF1ZXN0Eg0KBXF1ZXJ5GAEgASgJEhMKC21lZGlhX3R5cGVzGAIgAygJEgwKBHBhZ2UYAyABKAUimAEKCVZhdWx0SXRlbRIMCgRWWElEGAEgASgJEg0KBXRpdGxlGAIgASgJEhIKCm1lZGlhX3R5cGUYAyABKAkSDQoFYWRkZWQYBCABKAkSDgoGZm9ybWF0GAUgASgJEgwKBHNpemUYBiABKAkSGAoQZHVyYXRpb25fc2Vjb25kcxgHIAEoBRITCgtoYXNfcHJldmlldxgIIAEoCCIvCgpWYXVsdEZhY2V0EhIKCm1lZGlhX3R5cGUYASABKAkSDQoFY291bnQYAiABKAUikAEKE1ZhdWx0U2VhcmNoUmVzcG9uc2USIAoFaXRlbXMYASADKAsyES5hcGkudjEuVmF1bHRJdGVtEhIKCnRvdGFsX2hpdHMYAiABKAUSDAoEcGFnZRgDIAEoBRIRCglwYWdlX3NpemUYBCABKAUSIgoGZmFjZXRzGAUgAygLMhIuYXBpLnYxLlZhdWx0RmFjZXQiIwoTR2V0VmF1bHRJdGVtUmVxdWVzdBIMCgRWWElEGAEgASgJIjcKFEdldFZhdWx0SXRlbVJlc3BvbnNlEh8KBGl0ZW0YASABKAsyES5hcGkudjEuVmF1bHRJdGVtKjEKDkJtbUVudmlyb25tZW50Eg4KClByb2R1Y3Rpb24QABIPCgtJbnRlZ3JhdGlvbhABKroBCg1DYW50ZW1vQWN0aW9uEh4KGkNBTlRFTU9fQUNUSU9OX1VOU1BFQ0lGSUVEEAASGgoWQ0FOVEVNT19BQ1RJT05fUFJFVklFVxABEh0KGUNBTlRFTU9fQUNUSU9OX1RSQU5TQ1JJQkUQAhIpCiVDQU5URU1PX0FDVElPTl9TVUJUSVRMRV9GUk9NX1NVQlRSQU5TEAMSIwofQ0FOVEVNT19BQ1RJT05fVVBEQVRFX1JFTEFUSU9OUxAEMuMNCgpBUElTZXJ2aWNlEjUKDkdldFBlcm1pc3Npb25zEgwuYXBpLnYxLlZvaWQaEy5hcGkudjEuUGVybWlzc2lvbnMiABJCChFVcGRhdGVQZXJtaXNzaW9ucxIdLmFwaS52MS5TZXRQZXJtaXNzaW9uc1JlcXVlc3QaDC5hcGkudjEuVm9pZCIAEkUKEURlbGV0ZVBlcm1pc3Npb25zEiAuYXBpLnYxLkRlbGV0ZVBlcm1pc3Npb25zUmVxdWVzdBoMLmFwaS52MS5Wb2lkIgASOgoPTGlzdFBlcm1pc3Npb25zEgwuYXBpLnYxLlZvaWQaFy5hcGkudjEuUGVybWlzc2lvbnNMaXN0IgASSwoQR2V0VHJhbnNjcmlwdGlvbhIeLmFwaS52MS5HZXRUcmFuc2NyaXB0aW9uUmVxZXN0GhUuYXBpLnYxLlRyYW5zY3JpcHRpb24iABI6CgpHZXRQcmV2aWV3EhkuYXBpLnYxLkdldFByZXZpZXdSZXF1ZXN0Gg8uYXBpLnYxLlByZXZpZXciABJJChNTdWJtaXRUcmFuc2NyaXB0aW9uEiIuYXBpLnYxLlN1Ym1pdFRyYW5zY3JpcHRpb25SZXF1ZXN0GgwuYXBpLnYxLlZvaWQiABI/CghHZXRZZWFycxIXLmFwaS52MS5HZXRZZWFyc1JlcXVlc3QaGC5hcGkudjEuR2V0WWVhcnNSZXNwb25zZSIAEjsKCUdldEFsYnVtcxIYLmFwaS52MS5HZXRBbGJ1bXNSZXF1ZXN0GhIuYXBpLnYxLkFsYnVtc0xpc3QiABJFCg5HZXRBbGJ1bVRyYWNrcxIdLmFwaS52MS5HZXRBbGJ1bVRyYWNrc1JlcXVlc3QaEi5hcGkudjEuVHJhY2tzTGlzdCIAEkkKEEdldFBvZGNhc3RUcmFja3MSHy5hcGkudjEuR2V0UG9kY2FzdFRyYWNrc1JlcXVlc3QaEi5hcGkudjEuVHJhY2tzTGlzdCIAEkwKDEdldExhbmd1YWdlcxIkLmFwaS52MS5HZXRBdmFpbGFibGVMYW5ndWFnZXNSZXF1ZXN0GhQuYXBpLnYxLkxhbmd1YWdlTGlzdCIAElIKE0dldEJNTVRyYW5zY3JpcHRpb24SIi5hcGkudjEuR2V0Qk1NVHJhbnNjcmlwdGlvblJlcXVlc3QaFS5hcGkudjEuVHJhbnNjcmlwdGlvbiIAEjkKC1N1Ym1pdFNob3J0EhouYXBpLnYxLlN1Ym1pdFNob3J0UmVxdWVzdBoMLmFwaS52MS5Wb2lkIgASVAoPR2V0RXhwb3J0Q29uZmlnEh4uYXBpLnYxLkdldEV4cG9ydENvbmZpZ1JlcXVlc3QaHy5hcGkudjEuR2V0RXhwb3J0Q29uZmlnUmVzcG9uc2UiABJICgtTdGFydEV4cG9ydBIaLmFwaS52MS5TdGFydEV4cG9ydFJlcXVlc3QaGy5hcGkudjEuU3RhcnRFeHBvcnRSZXNwb25zZSIAEkkKE0V4cG9ydFRpbWVkTWV0YWRhdGESIi5hcGkudjEuRXhwb3J0VGltZWRNZXRhZGF0YVJlcXVlc3QaDC5hcGkudjEuVm9pZCIAEk4KDVJlc29sdmVBc3NldHMSHC5hcGkudjEuUmVzb2x2ZUFzc2V0c1JlcXVlc3QaHS5hcGkudjEuUmVzb2x2ZUFzc2V0c1Jlc3BvbnNlIgASWgoRR2V0VkJFeHBvcnRDb25maWcSIC5hcGkudjEuR2V0VkJFeHBvcnRDb25maWdSZXF1ZXN0GiEuYXBpLnYxLkdldFZCRXhwb3J0Q29uZmlnUmVzcG9uc2UiABJOCg1TdGFydFZCRXhwb3J0EhwuYXBpLnYxLlN0YXJ0VkJFeHBvcnRSZXF1ZXN0Gh0uYXBpLnYxLlN0YXJ0VkJFeHBvcnRSZXNwb25zZSIAEksKFUdldEV4cG9ydERlc3RpbmF0aW9ucxIMLmFwaS52MS5Wb2lkGiIuYXBpLnYxLkV4cG9ydERlc3RpbmF0aW9uc1Jlc3BvbnNlIgASSwoUVHJpZ2dlckNhbnRlbW9BY3Rpb24SIy5hcGkudjEuVHJpZ2dlckNhbnRlbW9BY3Rpb25SZXF1ZXN0GgwuYXBpLnYxLlZvaWQiABJICgtWYXVsdFNlYXJjaBIaLmFwaS52MS5WYXVsdFNlYXJjaFJlcXVlc3QaGy5hcGkudjEuVmF1bHRTZWFyY2hSZXNwb25zZSIAEksKDEdldFZhdWx0SXRlbRIbLmFwaS52MS5HZXRWYXVsdEl0ZW1SZXF1ZXN0GhwuYXBpLnYxLkdldFZhdWx0SXRlbVJlc3BvbnNlIgBCHlocYmNjLW1lZGlhLXRvb2xzL2FwaS92MTthcGl2MWIGcHJvdG8z", [file_google_protobuf_timestamp, file_api_v1_common]);
+  fileDesc("ChBhcGkvdjEvYXBpLnByb3RvEgZhcGkudjEiaAoNQk1NUGVybWlzc2lvbhIRCglsYW5ndWFnZXMYASADKAkSDgoGYWxidW1zGAIgAygJEhAKCHBvZGNhc3RzGAMgAygJEg0KBWFkbWluGAQgASgIEhMKC2ludGVncmF0aW9uGAUgASgIIj0KF1RyYW5zY3JpcHRpb25QZXJtaXNzaW9uEg0KBWFkbWluGAEgASgIEhMKC21lZGlhYmFua2VuGAIgASgIImQKEEV4cG9ydFBlcm1pc3Npb24SFAoMZGVzdGluYXRpb25zGAEgAygJEg0KBWFkbWluGAIgASgIEhYKDnRpbWVkX21ldGFkYXRhGAMgASgIEhMKC2J1bGtfZXhwb3J0GAQgASgIIk4KElZCRXhwb3J0UGVybWlzc2lvbhIUCgxkZXN0aW5hdGlvbnMYASADKAkSDQoFYWRtaW4YAiABKAgSEwoLYnVsa19leHBvcnQYAyABKAgiXgoRQ2FudGVtb1Blcm1pc3Npb24SDwoHcHJldmlldxgBIAEoCBISCgp0cmFuc2NyaWJlGAIgASgIEhEKCXN1YnRpdGxlcxgDIAEoCBIRCglyZWxhdGlvbnMYBCABKAgiIgoPVmF1bHRQZXJtaXNzaW9uEg8KB2VuYWJsZWQYASABKAgitAIKC1Blcm1pc3Npb25zEg0KBWFkbWluGAEgASgIEiIKA2JtbRgCIAEoCzIVLmFwaS52MS5CTU1QZXJtaXNzaW9uEg0KBWVtYWlsGAMgASgJEjYKDXRyYW5zY3JpcHRpb24YBCABKAsyHy5hcGkudjEuVHJhbnNjcmlwdGlvblBlcm1pc3Npb24SKAoGZXhwb3J0GAUgASgLMhguYXBpLnYxLkV4cG9ydFBlcm1pc3Npb24SLQoJdmJfZXhwb3J0GAYgASgLMhouYXBpLnYxLlZCRXhwb3J0UGVybWlzc2lvbhIqCgdjYW50ZW1vGAcgASgLMhkuYXBpLnYxLkNhbnRlbW9QZXJtaXNzaW9uEiYKBXZhdWx0GAggASgLMhcuYXBpLnYxLlZhdWx0UGVybWlzc2lvbiIXChVHZXRQZXJtaXNzaW9uc1JlcXVlc3QiUAoVU2V0UGVybWlzc2lvbnNSZXF1ZXN0Eg0KBWVtYWlsGAEgASgJEigKC3Blcm1pc3Npb25zGAIgASgLMhMuYXBpLnYxLlBlcm1pc3Npb25zIikKGERlbGV0ZVBlcm1pc3Npb25zUmVxdWVzdBINCgVlbWFpbBgBIAEoCSKZAQoPUGVybWlzc2lvbnNMaXN0Ej0KC3Blcm1pc3Npb25zGAEgAygLMiguYXBpLnYxLlBlcm1pc3Npb25zTGlzdC5QZXJtaXNzaW9uc0VudHJ5GkcKEFBlcm1pc3Npb25zRW50cnkSCwoDa2V5GAEgASgJEiIKBXZhbHVlGAIgASgLMhMuYXBpLnYxLlBlcm1pc3Npb25zOgI4ASImCgdCTU1ZZWFyEgwKBHllYXIYASABKA0SDQoFY291bnQYAiABKA0iggEKEEdldFllYXJzUmVzcG9uc2USMAoEZGF0YRgBIAMoCzIiLmFwaS52MS5HZXRZZWFyc1Jlc3BvbnNlLkRhdGFFbnRyeRo8CglEYXRhRW50cnkSCwoDa2V5GAEgASgNEh4KBXZhbHVlGAIgASgLMg8uYXBpLnYxLkJNTVllYXI6AjgBIj4KD0dldFllYXJzUmVxdWVzdBIrCgtlbnZpcm9ubWVudBgBIAEoDjIWLmFwaS52MS5CbW1FbnZpcm9ubWVudCJNChBHZXRBbGJ1bXNSZXF1ZXN0EgwKBHllYXIYASABKA0SKwoLZW52aXJvbm1lbnQYAiABKA4yFi5hcGkudjEuQm1tRW52aXJvbm1lbnQiRAoFQWxidW0SCgoCaWQYASABKAkSDQoFdGl0bGUYAiABKAkSDQoFY292ZXIYBCABKAkSEQoJbGFuZ3VhZ2VzGAUgAygJIisKCkFsYnVtc0xpc3QSHQoGYWxidW1zGAEgAygLMg0uYXBpLnYxLkFsYnVtIlYKFUdldEFsYnVtVHJhY2tzUmVxdWVzdBIQCghhbGJ1bV9pZBgBIAEoCRIrCgtlbnZpcm9ubWVudBgCIAEoDjIWLmFwaS52MS5CbW1FbnZpcm9ubWVudCJqChdHZXRQb2RjYXN0VHJhY2tzUmVxdWVzdBITCgtwb2RjYXN0X3RhZxgBIAEoCRINCgVsaW1pdBgCIAEoDRIrCgtlbnZpcm9ubWVudBgDIAEoDjIWLmFwaS52MS5CbW1FbnZpcm9ubWVudCJLChxHZXRBdmFpbGFibGVMYW5ndWFnZXNSZXF1ZXN0EisKC2Vudmlyb25tZW50GAEgASgOMhYuYXBpLnYxLkJtbUVudmlyb25tZW50IsgBCghCTU1UcmFjaxIKCgJpZBgBIAEoCRINCgV0aXRsZRgCIAEoCRIvCgtwdWJsaXNoZWRBdBgDIAEoCzIaLmdvb2dsZS5wcm90b2J1Zi5UaW1lc3RhbXASJwoJbGFuZ3VhZ2VzGAQgASgLMhQuYXBpLnYxLkxhbmd1YWdlTGlzdBIsCg50cmFuc2NyaXB0aW9ucxgFIAEoCzIULmFwaS52MS5MYW5ndWFnZUxpc3QSGQoRaGFzVHJhbnNjcmlwdGlvbnMYBiABKAgiLgoKVHJhY2tzTGlzdBIgCgZ0cmFja3MYASADKAsyEC5hcGkudjEuQk1NVHJhY2siMwoMTGFuZ3VhZ2VMaXN0EiMKCUxhbmd1YWdlcxgBIAMoCzIQLmFwaS52MS5MYW5ndWFnZSIrCghMYW5ndWFnZRIMCgRjb2RlGAEgASgJEhEKCWljb25fZmlsZRgDIAEoCSImChZHZXRUcmFuc2NyaXB0aW9uUmVxZXN0EgwKBFZYSUQYASABKAkiQQoNVHJhbnNjcmlwdGlvbhIMCgR0ZXh0GAEgASgJEiIKCHNlZ21lbnRzGAIgAygLMhAuYXBpLnYxLlNlZ21lbnRzIu0BCghTZWdtZW50cxIKCgJpZBgBIAEoARIMCgRzZWVrGAIgASgFEg0KBXN0YXJ0GAMgASgBEgsKA2VuZBgEIAEoARIMCgR0ZXh0GAUgASgJEg4KBnRva2VucxgGIAMoBRITCgt0ZW1wZXJhdHVyZRgHIAEoARITCgthdmdfbG9ncHJvYhgIIAEoARIZChFjb21wcmVzc2lvbl9yYXRpbxgJIAEoARIWCg5ub19zcGVlY2hfcHJvYhgKIAEoARISCgpjb25maWRlbmNlGAsgASgBEhwKBXdvcmRzGAwgAygLMg0uYXBpLnYxLldvcmRzIkUKBVdvcmRzEgwKBHRleHQYASABKAkSDQoFc3RhcnQYAiABKAESCwoDZW5kGAMgASgBEhIKCmNvbmZpZGVuY2UYBCABKAEiIQoRR2V0UHJldmlld1JlcXVlc3QSDAoEVlhJRBgBIAEoCSIWCgdQcmV2aWV3EgsKA3VybBgBIAEoCSJrChpHZXRCTU1UcmFuc2NyaXB0aW9uUmVxdWVzdBIOCgZibW1faWQYASABKAkSEAoIbGFuZ3VhZ2UYAiABKAkSKwoLZW52aXJvbm1lbnQYAyABKA4yFi5hcGkudjEuQm1tRW52aXJvbm1lbnQiWAoaU3VibWl0VHJhbnNjcmlwdGlvblJlcXVlc3QSDAoEVlhJRBgBIAEoCRIsCg10cmFuc2NyaXB0aW9uGAIgASgLMhUuYXBpLnYxLlRyYW5zY3JpcHRpb24iSQoSU3VibWl0U2hvcnRSZXF1ZXN0EgwKBFZYSUQYASABKAkSEQoJSW5TZWNvbmRzGAIgASgBEhIKCk91dFNlY29uZHMYAyABKAEiMQoQRXhwb3J0UmVzb2x1dGlvbhINCgV3aWR0aBgBIAEoBRIOCgZoZWlnaHQYAiABKAUiRgoORXhwb3J0TGFuZ3VhZ2USDAoEY29kZRgBIAEoCRIMCgRuYW1lGAIgASgJEgsKA211MRgDIAEoCBILCgNtdTIYBCABKAgiHgoNRXhwb3J0U3ViY2xpcBINCgV0aXRsZRgBIAEoCSImChZHZXRFeHBvcnRDb25maWdSZXF1ZXN0EgwKBFZYSUQYASABKAki1gIKF0dldEV4cG9ydENvbmZpZ1Jlc3BvbnNlEgwKBFZYSUQYASABKAkSDQoFdGl0bGUYAiABKAkSFAoMZGVzdGluYXRpb25zGAMgAygJEhUKDWF1ZGlvX3NvdXJjZXMYBCADKAkSHQoVc2VsZWN0ZWRfYXVkaW9fc291cmNlGAUgASgJEikKCWxhbmd1YWdlcxgGIAMoCzIWLmFwaS52MS5FeHBvcnRMYW5ndWFnZRIaChJzZWxlY3RlZF9sYW5ndWFnZXMYByADKAkSLQoLcmVzb2x1dGlvbnMYCCADKAsyGC5hcGkudjEuRXhwb3J0UmVzb2x1dGlvbhIQCghvdmVybGF5cxgJIAMoCRInCghzdWJjbGlwcxgKIAMoCzIVLmFwaS52MS5FeHBvcnRTdWJjbGlwEiEKGWNhbl9leHBvcnRfdGltZWRfbWV0YWRhdGEYCyABKAgiUAoZRXhwb3J0UmVzb2x1dGlvblNlbGVjdGlvbhINCgV3aWR0aBgBIAEoBRIOCgZoZWlnaHQYAiABKAUSFAoMZG93bmxvYWRhYmxlGAMgASgIIoMCChJTdGFydEV4cG9ydFJlcXVlc3QSDAoEVlhJRBgBIAEoCRIUCgxkZXN0aW5hdGlvbnMYAiADKAkSFAoMYXVkaW9fc291cmNlGAMgASgJEhEKCWxhbmd1YWdlcxgEIAMoCRI2CgtyZXNvbHV0aW9ucxgFIAMoCzIhLmFwaS52MS5FeHBvcnRSZXNvbHV0aW9uU2VsZWN0aW9uEg8KB292ZXJsYXkYBiABKAkSFQoNd2l0aF9jaGFwdGVycxgHIAEoCBIWCg5pZ25vcmVfc2lsZW5jZRgIIAEoCBIWCg5leHBvcnRfYWlfc3VicxgJIAEoCBIQCghzdWJjbGlwcxgKIAMoCSIrChNTdGFydEV4cG9ydFJlc3BvbnNlEhQKDHdvcmtmbG93X2lkcxgBIAMoCSIqChpFeHBvcnRUaW1lZE1ldGFkYXRhUmVxdWVzdBIMCgRWWElEGAEgASgJIigKGEdldFZCRXhwb3J0Q29uZmlnUmVxdWVzdBIMCgRWWElEGAEgASgJIoABChlHZXRWQkV4cG9ydENvbmZpZ1Jlc3BvbnNlEgwKBFZYSUQYASABKAkSDQoFdGl0bGUYAiABKAkSFAoMZGVzdGluYXRpb25zGAMgAygJEhcKD3N1YnRpdGxlX3NoYXBlcxgEIAMoCRIXCg9zdWJ0aXRsZV9zdHlsZXMYBSADKAkiagoUU3RhcnRWQkV4cG9ydFJlcXVlc3QSDAoEVlhJRBgBIAEoCRIUCgxkZXN0aW5hdGlvbnMYAiADKAkSFgoOc3VidGl0bGVfc2hhcGUYAyABKAkSFgoOc3VidGl0bGVfc3R5bGUYBCABKAkiLAoVU3RhcnRWQkV4cG9ydFJlc3BvbnNlEhMKC3dvcmtmbG93X2lkGAEgASgJIjQKGkV4cG9ydERlc3RpbmF0aW9uc1Jlc3BvbnNlEgoKAnZ4GAEgAygJEgoKAnZiGAIgAygJIiUKFFJlc29sdmVBc3NldHNSZXF1ZXN0Eg0KBVZYSURzGAEgAygJIjsKDVJlc29sdmVkQXNzZXQSDAoEVlhJRBgBIAEoCRINCgV0aXRsZRgCIAEoCRINCgVmb3VuZBgDIAEoCCI+ChVSZXNvbHZlQXNzZXRzUmVzcG9uc2USJQoGYXNzZXRzGAEgAygLMhUuYXBpLnYxLlJlc29sdmVkQXNzZXQiUgobVHJpZ2dlckNhbnRlbW9BY3Rpb25SZXF1ZXN0EgwKBFZYSUQYASABKAkSJQoGYWN0aW9uGAIgASgOMhUuYXBpLnYxLkNhbnRlbW9BY3Rpb24iRgoSVmF1bHRTZWFyY2hSZXF1ZXN0Eg0KBXF1ZXJ5GAEgASgJEhMKC21lZGlhX3R5cGVzGAIgAygJEgwKBHBhZ2UYAyABKAUimAEKCVZhdWx0SXRlbRIMCgRWWElEGAEgASgJEg0KBXRpdGxlGAIgASgJEhIKCm1lZGlhX3R5cGUYAyABKAkSDQoFYWRkZWQYBCABKAkSDgoGZm9ybWF0GAUgASgJEgwKBHNpemUYBiABKAkSGAoQZHVyYXRpb25fc2Vjb25kcxgHIAEoBRITCgtoYXNfcHJldmlldxgIIAEoCCIvCgpWYXVsdEZhY2V0EhIKCm1lZGlhX3R5cGUYASABKAkSDQoFY291bnQYAiABKAUikAEKE1ZhdWx0U2VhcmNoUmVzcG9uc2USIAoFaXRlbXMYASADKAsyES5hcGkudjEuVmF1bHRJdGVtEhIKCnRvdGFsX2hpdHMYAiABKAUSDAoEcGFnZRgDIAEoBRIRCglwYWdlX3NpemUYBCABKAUSIgoGZmFjZXRzGAUgAygLMhIuYXBpLnYxLlZhdWx0RmFjZXQiIwoTR2V0VmF1bHRJdGVtUmVxdWVzdBIMCgRWWElEGAEgASgJIjcKFEdldFZhdWx0SXRlbVJlc3BvbnNlEh8KBGl0ZW0YASABKAsyES5hcGkudjEuVmF1bHRJdGVtIpUBCgZNYXJrZXISCgoCaWQYASABKAkSIAoEdHlwZRgCIAEoDjISLmFwaS52MS5NYXJrZXJUeXBlEg0KBWxhYmVsGAMgASgJEgwKBG5vdGUYBCABKAkSDQoFc3RhcnQYBSABKAESCwoDZW5kGAYgASgBEiQKBnNvdXJjZRgHIAEoDjIULmFwaS52MS5NYXJrZXJTb3VyY2UiIQoRR2V0TWFya2Vyc1JlcXVlc3QSDAoEVlhJRBgBIAEoCSI1ChJHZXRNYXJrZXJzUmVzcG9uc2USHwoHbWFya2VycxgBIAMoCzIOLmFwaS52MS5NYXJrZXIiRQoUU3VibWl0TWFya2Vyc1JlcXVlc3QSDAoEVlhJRBgBIAEoCRIfCgdtYXJrZXJzGAIgAygLMg4uYXBpLnYxLk1hcmtlcioxCg5CbW1FbnZpcm9ubWVudBIOCgpQcm9kdWN0aW9uEAASDwoLSW50ZWdyYXRpb24QASq6AQoNQ2FudGVtb0FjdGlvbhIeChpDQU5URU1PX0FDVElPTl9VTlNQRUNJRklFRBAAEhoKFkNBTlRFTU9fQUNUSU9OX1BSRVZJRVcQARIdChlDQU5URU1PX0FDVElPTl9UUkFOU0NSSUJFEAISKQolQ0FOVEVNT19BQ1RJT05fU1VCVElUTEVfRlJPTV9TVUJUUkFOUxADEiMKH0NBTlRFTU9fQUNUSU9OX1VQREFURV9SRUxBVElPTlMQBCqpAQoKTWFya2VyVHlwZRIbChdNQVJLRVJfVFlQRV9VTlNQRUNJRklFRBAAEhoKFk1BUktFUl9UWVBFX05BTUVfU1VQRVIQARIbChdNQVJLRVJfVFlQRV9CSUJMRV9WRVJTRRACEhQKEE1BUktFUl9UWVBFX1NPTkcQAxIXChNNQVJLRVJfVFlQRV9DSEFQVEVSEAQSFgoSTUFSS0VSX1RZUEVfQ1VTVE9NEAUqYwoMTWFya2VyU291cmNlEh0KGU1BUktFUl9TT1VSQ0VfVU5TUEVDSUZJRUQQABIaChZNQVJLRVJfU09VUkNFX0lNUE9SVEVEEAESGAoUTUFSS0VSX1NPVVJDRV9NQU5VQUwQAjLpDgoKQVBJU2VydmljZRI1Cg5HZXRQZXJtaXNzaW9ucxIMLmFwaS52MS5Wb2lkGhMuYXBpLnYxLlBlcm1pc3Npb25zIgASQgoRVXBkYXRlUGVybWlzc2lvbnMSHS5hcGkudjEuU2V0UGVybWlzc2lvbnNSZXF1ZXN0GgwuYXBpLnYxLlZvaWQiABJFChFEZWxldGVQZXJtaXNzaW9ucxIgLmFwaS52MS5EZWxldGVQZXJtaXNzaW9uc1JlcXVlc3QaDC5hcGkudjEuVm9pZCIAEjoKD0xpc3RQZXJtaXNzaW9ucxIMLmFwaS52MS5Wb2lkGhcuYXBpLnYxLlBlcm1pc3Npb25zTGlzdCIAEksKEEdldFRyYW5zY3JpcHRpb24SHi5hcGkudjEuR2V0VHJhbnNjcmlwdGlvblJlcWVzdBoVLmFwaS52MS5UcmFuc2NyaXB0aW9uIgASOgoKR2V0UHJldmlldxIZLmFwaS52MS5HZXRQcmV2aWV3UmVxdWVzdBoPLmFwaS52MS5QcmV2aWV3IgASSQoTU3VibWl0VHJhbnNjcmlwdGlvbhIiLmFwaS52MS5TdWJtaXRUcmFuc2NyaXB0aW9uUmVxdWVzdBoMLmFwaS52MS5Wb2lkIgASPwoIR2V0WWVhcnMSFy5hcGkudjEuR2V0WWVhcnNSZXF1ZXN0GhguYXBpLnYxLkdldFllYXJzUmVzcG9uc2UiABI7CglHZXRBbGJ1bXMSGC5hcGkudjEuR2V0QWxidW1zUmVxdWVzdBoSLmFwaS52MS5BbGJ1bXNMaXN0IgASRQoOR2V0QWxidW1UcmFja3MSHS5hcGkudjEuR2V0QWxidW1UcmFja3NSZXF1ZXN0GhIuYXBpLnYxLlRyYWNrc0xpc3QiABJJChBHZXRQb2RjYXN0VHJhY2tzEh8uYXBpLnYxLkdldFBvZGNhc3RUcmFja3NSZXF1ZXN0GhIuYXBpLnYxLlRyYWNrc0xpc3QiABJMCgxHZXRMYW5ndWFnZXMSJC5hcGkudjEuR2V0QXZhaWxhYmxlTGFuZ3VhZ2VzUmVxdWVzdBoULmFwaS52MS5MYW5ndWFnZUxpc3QiABJSChNHZXRCTU1UcmFuc2NyaXB0aW9uEiIuYXBpLnYxLkdldEJNTVRyYW5zY3JpcHRpb25SZXF1ZXN0GhUuYXBpLnYxLlRyYW5zY3JpcHRpb24iABI5CgtTdWJtaXRTaG9ydBIaLmFwaS52MS5TdWJtaXRTaG9ydFJlcXVlc3QaDC5hcGkudjEuVm9pZCIAElQKD0dldEV4cG9ydENvbmZpZxIeLmFwaS52MS5HZXRFeHBvcnRDb25maWdSZXF1ZXN0Gh8uYXBpLnYxLkdldEV4cG9ydENvbmZpZ1Jlc3BvbnNlIgASSAoLU3RhcnRFeHBvcnQSGi5hcGkudjEuU3RhcnRFeHBvcnRSZXF1ZXN0GhsuYXBpLnYxLlN0YXJ0RXhwb3J0UmVzcG9uc2UiABJJChNFeHBvcnRUaW1lZE1ldGFkYXRhEiIuYXBpLnYxLkV4cG9ydFRpbWVkTWV0YWRhdGFSZXF1ZXN0GgwuYXBpLnYxLlZvaWQiABJOCg1SZXNvbHZlQXNzZXRzEhwuYXBpLnYxLlJlc29sdmVBc3NldHNSZXF1ZXN0Gh0uYXBpLnYxLlJlc29sdmVBc3NldHNSZXNwb25zZSIAEloKEUdldFZCRXhwb3J0Q29uZmlnEiAuYXBpLnYxLkdldFZCRXhwb3J0Q29uZmlnUmVxdWVzdBohLmFwaS52MS5HZXRWQkV4cG9ydENvbmZpZ1Jlc3BvbnNlIgASTgoNU3RhcnRWQkV4cG9ydBIcLmFwaS52MS5TdGFydFZCRXhwb3J0UmVxdWVzdBodLmFwaS52MS5TdGFydFZCRXhwb3J0UmVzcG9uc2UiABJLChVHZXRFeHBvcnREZXN0aW5hdGlvbnMSDC5hcGkudjEuVm9pZBoiLmFwaS52MS5FeHBvcnREZXN0aW5hdGlvbnNSZXNwb25zZSIAEksKFFRyaWdnZXJDYW50ZW1vQWN0aW9uEiMuYXBpLnYxLlRyaWdnZXJDYW50ZW1vQWN0aW9uUmVxdWVzdBoMLmFwaS52MS5Wb2lkIgASSAoLVmF1bHRTZWFyY2gSGi5hcGkudjEuVmF1bHRTZWFyY2hSZXF1ZXN0GhsuYXBpLnYxLlZhdWx0U2VhcmNoUmVzcG9uc2UiABJLCgxHZXRWYXVsdEl0ZW0SGy5hcGkudjEuR2V0VmF1bHRJdGVtUmVxdWVzdBocLmFwaS52MS5HZXRWYXVsdEl0ZW1SZXNwb25zZSIAEkUKCkdldE1hcmtlcnMSGS5hcGkudjEuR2V0TWFya2Vyc1JlcXVlc3QaGi5hcGkudjEuR2V0TWFya2Vyc1Jlc3BvbnNlIgASPQoNU3VibWl0TWFya2VycxIcLmFwaS52MS5TdWJtaXRNYXJrZXJzUmVxdWVzdBoMLmFwaS52MS5Wb2lkIgBCHlocYmNjLW1lZGlhLXRvb2xzL2FwaS92MTthcGl2MWIGcHJvdG8z", [file_google_protobuf_timestamp, file_api_v1_common]);
 
 /**
  * @generated from message api.v1.BMMPermission
@@ -1584,6 +1584,113 @@ export type GetVaultItemResponse = Message<"api.v1.GetVaultItemResponse"> & {
 export const GetVaultItemResponseSchema: GenMessage<GetVaultItemResponse> = /*@__PURE__*/
   messageDesc(file_api_v1_api, 56);
 
+/**
+ * @generated from message api.v1.Marker
+ */
+export type Marker = Message<"api.v1.Marker"> & {
+  /**
+   * @generated from field: string id = 1;
+   */
+  id: string;
+
+  /**
+   * @generated from field: api.v1.MarkerType type = 2;
+   */
+  type: MarkerType;
+
+  /**
+   * Display text: the name, the verse reference, the song/chapter title.
+   *
+   * @generated from field: string label = 3;
+   */
+  label: string;
+
+  /**
+   * @generated from field: string note = 4;
+   */
+  note: string;
+
+  /**
+   * In/out points in seconds.
+   *
+   * @generated from field: double start = 5;
+   */
+  start: number;
+
+  /**
+   * @generated from field: double end = 6;
+   */
+  end: number;
+
+  /**
+   * @generated from field: api.v1.MarkerSource source = 7;
+   */
+  source: MarkerSource;
+};
+
+/**
+ * Describes the message api.v1.Marker.
+ * Use `create(MarkerSchema)` to create a new message.
+ */
+export const MarkerSchema: GenMessage<Marker> = /*@__PURE__*/
+  messageDesc(file_api_v1_api, 57);
+
+/**
+ * @generated from message api.v1.GetMarkersRequest
+ */
+export type GetMarkersRequest = Message<"api.v1.GetMarkersRequest"> & {
+  /**
+   * @generated from field: string VXID = 1;
+   */
+  VXID: string;
+};
+
+/**
+ * Describes the message api.v1.GetMarkersRequest.
+ * Use `create(GetMarkersRequestSchema)` to create a new message.
+ */
+export const GetMarkersRequestSchema: GenMessage<GetMarkersRequest> = /*@__PURE__*/
+  messageDesc(file_api_v1_api, 58);
+
+/**
+ * @generated from message api.v1.GetMarkersResponse
+ */
+export type GetMarkersResponse = Message<"api.v1.GetMarkersResponse"> & {
+  /**
+   * @generated from field: repeated api.v1.Marker markers = 1;
+   */
+  markers: Marker[];
+};
+
+/**
+ * Describes the message api.v1.GetMarkersResponse.
+ * Use `create(GetMarkersResponseSchema)` to create a new message.
+ */
+export const GetMarkersResponseSchema: GenMessage<GetMarkersResponse> = /*@__PURE__*/
+  messageDesc(file_api_v1_api, 59);
+
+/**
+ * @generated from message api.v1.SubmitMarkersRequest
+ */
+export type SubmitMarkersRequest = Message<"api.v1.SubmitMarkersRequest"> & {
+  /**
+   * @generated from field: string VXID = 1;
+   */
+  VXID: string;
+
+  /**
+   * @generated from field: repeated api.v1.Marker markers = 2;
+   */
+  markers: Marker[];
+};
+
+/**
+ * Describes the message api.v1.SubmitMarkersRequest.
+ * Use `create(SubmitMarkersRequestSchema)` to create a new message.
+ */
+export const SubmitMarkersRequestSchema: GenMessage<SubmitMarkersRequest> = /*@__PURE__*/
+  messageDesc(file_api_v1_api, 60);
+
 /**
  * @generated from enum api.v1.BmmEnvironment
  */
@@ -1641,6 +1748,77 @@ export enum CantemoAction {
 export const CantemoActionSchema: GenEnum<CantemoAction> = /*@__PURE__*/
   enumDesc(file_api_v1_api, 1);
 
+/**
+ * @generated from enum api.v1.MarkerType
+ */
+export enum MarkerType {
+  /**
+   * @generated from enum value: MARKER_TYPE_UNSPECIFIED = 0;
+   */
+  UNSPECIFIED = 0,
+
+  /**
+   * @generated from enum value: MARKER_TYPE_NAME_SUPER = 1;
+   */
+  NAME_SUPER = 1,
+
+  /**
+   * @generated from enum value: MARKER_TYPE_BIBLE_VERSE = 2;
+   */
+  BIBLE_VERSE = 2,
+
+  /**
+   * @generated from enum value: MARKER_TYPE_SONG = 3;
+   */
+  SONG = 3,
+
+  /**
+   * @generated from enum value: MARKER_TYPE_CHAPTER = 4;
+   */
+  CHAPTER = 4,
+
+  /**
+   * @generated from enum value: MARKER_TYPE_CUSTOM = 5;
+   */
+  CUSTOM = 5,
+}
+
+/**
+ * Describes the enum api.v1.MarkerType.
+ */
+export const MarkerTypeSchema: GenEnum<MarkerType> = /*@__PURE__*/
+  enumDesc(file_api_v1_api, 2);
+
+/**
+ * Where a marker originated. IMPORTED markers come from the third-party timing
+ * program (name-supers, bible-verse references, …); MANUAL ones are created in
+ * this tool. The source is preserved through edits for reconciliation.
+ *
+ * @generated from enum api.v1.MarkerSource
+ */
+export enum MarkerSource {
+  /**
+   * @generated from enum value: MARKER_SOURCE_UNSPECIFIED = 0;
+   */
+  UNSPECIFIED = 0,
+
+  /**
+   * @generated from enum value: MARKER_SOURCE_IMPORTED = 1;
+   */
+  IMPORTED = 1,
+
+  /**
+   * @generated from enum value: MARKER_SOURCE_MANUAL = 2;
+   */
+  MANUAL = 2,
+}
+
+/**
+ * Describes the enum api.v1.MarkerSource.
+ */
+export const MarkerSourceSchema: GenEnum<MarkerSource> = /*@__PURE__*/
+  enumDesc(file_api_v1_api, 3);
+
 /**
  * @generated from service api.v1.APIService
  */
@@ -1857,6 +2035,24 @@ export const APIService: GenService<{
     input: typeof GetVaultItemRequestSchema;
     output: typeof GetVaultItemResponseSchema;
   },
+  /**
+   * Markers
+   *
+   * @generated from rpc api.v1.APIService.GetMarkers
+   */
+  getMarkers: {
+    methodKind: "unary";
+    input: typeof GetMarkersRequestSchema;
+    output: typeof GetMarkersResponseSchema;
+  },
+  /**
+   * @generated from rpc api.v1.APIService.SubmitMarkers
+   */
+  submitMarkers: {
+    methodKind: "unary";
+    input: typeof SubmitMarkersRequestSchema;
+    output: typeof VoidSchema;
+  },
 }> = /*@__PURE__*/
   serviceDesc(file_api_v1_api, 0);
 

From d778524ad4aff7f2fa9b6c4932e20ad7fbf1fae9 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 15:08:21 +0200
Subject: [PATCH 25/28] feat(markers): import export

---
 frontend/app/composables/useMarkers.ts |  7 ++
 frontend/app/pages/markers/[id].vue    | 93 ++++++++++++++++++++++++--
 frontend/app/utils/markers.ts          | 40 +++++++++++
 frontend/locales/en.json               |  5 ++
 frontend/locales/nb.json               |  5 ++
 5 files changed, 146 insertions(+), 4 deletions(-)

diff --git a/frontend/app/composables/useMarkers.ts b/frontend/app/composables/useMarkers.ts
index 0be890e..edf3a3a 100644
--- a/frontend/app/composables/useMarkers.ts
+++ b/frontend/app/composables/useMarkers.ts
@@ -111,6 +111,12 @@ export function useMarkers(vxId: MaybeRefOrGetter<string>) {
         dirty.value = true;
     }
 
+    // Replace the whole working set (used by import).
+    function replaceAll(next: Marker[]) {
+        markers.value = next;
+        dirty.value = true;
+    }
+
     const saving = ref(false);
     async function save() {
         saving.value = true;
@@ -133,6 +139,7 @@ export function useMarkers(vxId: MaybeRefOrGetter<string>) {
         update,
         remove,
         restore,
+        replaceAll,
         save,
         saving,
     };
diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index c60bffa..2f90f13 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { LayoutGroup, motion } from "motion-v";
 import { onBeforeRouteLeave } from "vue-router";
-import { formatMarkerTime, markerTypeMeta, sortMarkers } from "~/utils/markers";
+import {
+    formatMarkerTime,
+    markerTypeMeta,
+    parseMarkers,
+    serializeMarkers,
+    sortMarkers,
+} from "~/utils/markers";
 import type { Marker, MarkerType } from "~/utils/markers";
 
 // Seconds the arrow keys jump the playhead.
@@ -23,8 +29,17 @@ onMounted(() => {
 });
 
 const api = useAPI();
-const { markers, dirty, add, update, remove, restore, save, saving } =
-    useMarkers(vxId);
+const {
+    markers,
+    dirty,
+    add,
+    update,
+    remove,
+    restore,
+    replaceAll,
+    save,
+    saving,
+} = useMarkers(vxId);
 
 // ---- Video preview (reuses the existing getPreview RPC, like shorts) --------
 const { data: videoUrl, status: videoStatus } = useAsyncData(
@@ -165,6 +180,41 @@ async function onSave() {
     });
 }
 
+// ---- Import / export --------------------------------------------------------
+function exportMarkers() {
+    const blob = new Blob([serializeMarkers(vxId.value, markers.value)], {
+        type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `markers-${vxId.value}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+
+const fileInput = useTemplateRef("fileInput");
+async function onImportFile(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    input.value = "";
+    if (!file) return;
+    try {
+        const imported = parseMarkers(await file.text());
+        if (markers.value.length && !window.confirm(t("markers.importConfirm")))
+            return;
+        replaceAll(imported);
+        selectedId.value = undefined;
+        toaster.create({
+            title: t("markers.imported", { count: imported.length }),
+            type: "success",
+        });
+    } catch (err) {
+        console.error("Marker import failed", err);
+        toaster.create({ title: t("markers.importError"), type: "error" });
+    }
+}
+
 // ---- Keyboard shortcuts -----------------------------------------------------
 // Ignore shortcuts while typing in a field or while an Ark widget (select,
 // slider, menu, …) is focused — those consume arrow/space keys themselves.
@@ -266,7 +316,42 @@ useEventListener(window, "beforeunload", (event: BeforeUnloadEvent) => {
                     />
                     {{ dirty ? t("markers.unsaved") : t("markers.allSaved") }}
                 </span>
-                <DesignTooltip :content="t('markers.shortcuts.title')">
+                <input
+                    ref="fileInput"
+                    type="file"
+                    accept="application/json,.json"
+                    class="hidden"
+                    @change="onImportFile"
+                />
+                <DesignTooltip
+                    :content="t('markers.import')"
+                    placement="bottom"
+                >
+                    <button
+                        type="button"
+                        class="ds-focus-ring text-text-muted hover:bg-surface-indent hover:text-text-default flex items-center justify-center rounded-lg p-2 transition-colors"
+                        @click="fileInput?.click()"
+                    >
+                        <Icon name="tabler:file-import" class="size-4" />
+                    </button>
+                </DesignTooltip>
+                <DesignTooltip
+                    :content="t('markers.export')"
+                    placement="bottom"
+                >
+                    <button
+                        type="button"
+                        :disabled="!markers.length"
+                        class="ds-focus-ring text-text-muted hover:bg-surface-indent hover:text-text-default flex items-center justify-center rounded-lg p-2 transition-colors disabled:pointer-events-none disabled:opacity-40"
+                        @click="exportMarkers"
+                    >
+                        <Icon name="tabler:file-export" class="size-4" />
+                    </button>
+                </DesignTooltip>
+                <DesignTooltip
+                    :content="t('markers.shortcuts.title')"
+                    placement="bottom"
+                >
                     <button
                         type="button"
                         class="ds-focus-ring text-text-muted hover:bg-surface-indent hover:text-text-default flex items-center justify-center rounded-lg p-2 transition-colors"
diff --git a/frontend/app/utils/markers.ts b/frontend/app/utils/markers.ts
index b7a9e24..3ea4bbc 100644
--- a/frontend/app/utils/markers.ts
+++ b/frontend/app/utils/markers.ts
@@ -86,6 +86,46 @@ export function sortMarkers(markers: Marker[]): Marker[] {
     return [...markers].sort((a, b) => a.start - b.start || a.end - b.end);
 }
 
+// ---- Import / export --------------------------------------------------------
+
+export type MarkersFile = {
+    vxId: string;
+    markers: Marker[];
+};
+
+export function serializeMarkers(vxId: string, markers: Marker[]): string {
+    const data: MarkersFile = { vxId, markers };
+    return JSON.stringify(data, null, 2);
+}
+
+// Coerce an untrusted imported entry into a valid Marker, filling gaps.
+function normalizeImportedMarker(raw: unknown): Marker {
+    const m = (raw ?? {}) as Record<string, unknown>;
+    const type = MARKER_TYPES.some((t) => t.value === m.type)
+        ? (m.type as MarkerType)
+        : "custom";
+    const start = Math.max(0, Number(m.start) || 0);
+    const end = Math.max(start, Number(m.end) || start);
+    return {
+        id: typeof m.id === "string" && m.id ? m.id : generateRandomId(),
+        type,
+        label: typeof m.label === "string" ? m.label : "",
+        note: typeof m.note === "string" && m.note ? m.note : undefined,
+        start,
+        end,
+        source: m.source === "imported" ? "imported" : "manual",
+    };
+}
+
+// Parse an exported markers file — either a { markers: [...] } wrapper or a
+// bare array — into validated markers. Throws if the shape is unusable.
+export function parseMarkers(text: string): Marker[] {
+    const data = JSON.parse(text);
+    const raw = Array.isArray(data) ? data : (data?.markers ?? null);
+    if (!Array.isArray(raw)) throw new Error("Invalid markers file");
+    return raw.map(normalizeImportedMarker);
+}
+
 // Markers are shown/edited at whole-second granularity — ms precision isn't
 // meaningful for on-screen graphics. (The shared `formatTime` keeps ms for the
 // transcription editor; these are marker-specific.)
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 9e94f4c..7af6bb2 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -234,6 +234,11 @@
         "previewUnavailable": "Preview unavailable",
         "removed": "Removed \"{label}\"",
         "undo": "Undo",
+        "import": "Import markers",
+        "export": "Export markers",
+        "importConfirm": "Replace the current markers with the imported file?",
+        "imported": "Imported {count} markers",
+        "importError": "Couldn't read that markers file",
         "empty": {
             "title": "No markers yet",
             "hint": "Add a marker at the playhead, or press M"
diff --git a/frontend/locales/nb.json b/frontend/locales/nb.json
index bc94b06..9136eff 100644
--- a/frontend/locales/nb.json
+++ b/frontend/locales/nb.json
@@ -234,6 +234,11 @@
         "previewUnavailable": "Forhåndsvisning utilgjengelig",
         "removed": "Fjernet «{label}»",
         "undo": "Angre",
+        "import": "Importer markører",
+        "export": "Eksporter markører",
+        "importConfirm": "Erstatt gjeldende markører med den importerte filen?",
+        "imported": "Importerte {count} markører",
+        "importError": "Kunne ikke lese markørfilen",
         "empty": {
             "title": "Ingen markører ennå",
             "hint": "Legg til en markør ved spillehodet, eller trykk M"

From 12cdae6614c5b09024a9a0206fc9ab8f02ce02c5 Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 15:30:34 +0200
Subject: [PATCH 26/28] fix(markers): prevent scrolling timeline with arrows

---
 frontend/app/pages/markers/[id].vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index 2f90f13..49336f3 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -249,9 +249,11 @@ useEventListener(window, "keydown", (event: KeyboardEvent) => {
             el.paused ? el.play() : el.pause();
             break;
         case "ArrowRight":
+            event.preventDefault();
             if (el) el.currentTime += SEEK_STEP_SECONDS;
             break;
         case "ArrowLeft":
+            event.preventDefault();
             if (el) el.currentTime -= SEEK_STEP_SECONDS;
             break;
         case "ArrowUp":

From 109e028afd82624dafd54f9cee085a5bbfcda23d Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Wed, 1 Jul 2026 16:01:42 +0200
Subject: [PATCH 27/28] feat(markers): error and loading states

---
 frontend/app/composables/useMarkers.ts |  5 +++
 frontend/app/pages/markers/[id].vue    | 48 ++++++++++++++++++++++++--
 frontend/locales/en.json               |  2 ++
 frontend/locales/nb.json               |  2 ++
 4 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/frontend/app/composables/useMarkers.ts b/frontend/app/composables/useMarkers.ts
index edf3a3a..a86cb96 100644
--- a/frontend/app/composables/useMarkers.ts
+++ b/frontend/app/composables/useMarkers.ts
@@ -61,17 +61,20 @@ export function useMarkers(vxId: MaybeRefOrGetter<string>) {
 
     const markers = ref<Marker[]>([]);
     const loading = ref(true);
+    const error = ref(false);
     // True when there are local changes not yet submitted (via `save`).
     const dirty = ref(false);
 
     async function load() {
         loading.value = true;
+        error.value = false;
         try {
             const res = await api.getMarkers({ VXID: toValue(vxId) });
             markers.value = res.markers.map(fromPb);
             dirty.value = false;
         } catch (err) {
             console.error("Failed to load markers", err);
+            error.value = true;
         } finally {
             loading.value = false;
         }
@@ -134,6 +137,8 @@ export function useMarkers(vxId: MaybeRefOrGetter<string>) {
     return {
         markers,
         loading,
+        error,
+        reload: load,
         dirty,
         add,
         update,
diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index 49336f3..d95de4a 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -31,6 +31,9 @@ onMounted(() => {
 const api = useAPI();
 const {
     markers,
+    loading,
+    error,
+    reload,
     dirty,
     add,
     update,
@@ -109,6 +112,7 @@ const lastMarkerType = useLocalStorage<MarkerType>(
 
 const editor = useTemplateRef("editor");
 function addMarker() {
+    if (loading.value || error.value) return;
     const start = Math.round(currentTime.value);
     const end = Math.min(start + 5, Math.round(effectiveDuration.value));
     const marker = add({ start, end, type: lastMarkerType.value });
@@ -425,7 +429,11 @@ useEventListener(window, "beforeunload", (event: BeforeUnloadEvent) => {
                         {{ formatMarkerTime(currentTime) }}
                     </span>
                     <DesignTooltip :content="t('markers.addHint')">
-                        <DesignButton icon="tabler:plus" @click="addMarker">
+                        <DesignButton
+                            icon="tabler:plus"
+                            :disabled="loading || error"
+                            @click="addMarker"
+                        >
                             {{ t("markers.addAtPlayhead") }}
                         </DesignButton>
                     </DesignTooltip>
@@ -453,8 +461,12 @@ useEventListener(window, "beforeunload", (event: BeforeUnloadEvent) => {
                     </div>
                 </div>
 
+                <DesignSkeleton
+                    v-if="loading"
+                    class="h-40 w-full shrink-0 rounded-2xl"
+                />
                 <MarkersTimeline
-                    v-if="visibleMarkers.length"
+                    v-else-if="visibleMarkers.length"
                     class="shrink-0"
                     :markers="visibleMarkers"
                     :duration="effectiveDuration"
@@ -467,7 +479,37 @@ useEventListener(window, "beforeunload", (event: BeforeUnloadEvent) => {
 
             <LayoutGroup>
                 <div class="flex min-h-0 flex-col gap-4">
-                    <template v-if="visibleMarkers.length">
+                    <template v-if="loading">
+                        <DesignSkeleton
+                            class="h-72 w-full shrink-0 rounded-2xl"
+                        />
+                        <DesignSkeleton
+                            class="min-h-0 w-full flex-1 rounded-2xl"
+                        />
+                    </template>
+
+                    <div
+                        v-else-if="error"
+                        class="gradient-border bg-surface-default shadow-resting flex min-h-0 flex-1 flex-col items-center justify-center gap-3 rounded-2xl p-8 text-center"
+                    >
+                        <Icon
+                            name="tabler:alert-triangle"
+                            class="text-semantic-error size-8"
+                        />
+                        <p class="text-body-3 text-text-default">
+                            {{ t("markers.loadError") }}
+                        </p>
+                        <DesignButton
+                            size="small"
+                            variant="secondary"
+                            icon="tabler:refresh"
+                            @click="reload"
+                        >
+                            {{ t("markers.retry") }}
+                        </DesignButton>
+                    </div>
+
+                    <template v-else-if="visibleMarkers.length">
                         <motion.div
                             layout="position"
                             :transition="{
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 7af6bb2..513ec90 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -239,6 +239,8 @@
         "importConfirm": "Replace the current markers with the imported file?",
         "imported": "Imported {count} markers",
         "importError": "Couldn't read that markers file",
+        "loadError": "Couldn't load markers",
+        "retry": "Retry",
         "empty": {
             "title": "No markers yet",
             "hint": "Add a marker at the playhead, or press M"
diff --git a/frontend/locales/nb.json b/frontend/locales/nb.json
index 9136eff..67a1d8b 100644
--- a/frontend/locales/nb.json
+++ b/frontend/locales/nb.json
@@ -239,6 +239,8 @@
         "importConfirm": "Erstatt gjeldende markører med den importerte filen?",
         "imported": "Importerte {count} markører",
         "importError": "Kunne ikke lese markørfilen",
+        "loadError": "Kunne ikke laste markører",
+        "retry": "Prøv igjen",
         "empty": {
             "title": "Ingen markører ennå",
             "hint": "Legg til en markør ved spillehodet, eller trykk M"

From 894cba9f70a5c1778ab197e60124a951a4280e4f Mon Sep 17 00:00:00 2001
From: Sigve Hansen <sighan12@gmail.com>
Date: Thu, 2 Jul 2026 12:14:07 +0200
Subject: [PATCH 28/28] feat(markers): bible references auto-complete

---
 api/v1/api.proto                              |  62 ++
 backend/api/v1/api.pb.go                      | 637 +++++++++++++++---
 backend/api/v1/apiv1connect/api.connect.go    |  62 ++
 backend/cmd/server/bible.go                   | 287 ++++++++
 backend/cmd/server/main.go                    |   4 +-
 backend/cmd/server/markers.go                 |  66 +-
 .../app/components/design/DesignCombobox.vue  | 175 +++++
 .../app/components/markers/MarkersEditor.vue  | 183 ++++-
 .../components/markers/MarkersListItem.vue    |  18 +-
 frontend/app/composables/useMarkers.ts        |   6 +-
 frontend/app/pages/markers/[id].vue           |  72 ++
 frontend/app/utils/markers.ts                 |  28 +-
 frontend/locales/en.json                      |  12 +
 frontend/locales/nb.json                      |  12 +
 frontend/src/gen/api/v1/api_pb.ts             | 232 ++++++-
 15 files changed, 1747 insertions(+), 109 deletions(-)
 create mode 100644 backend/cmd/server/bible.go
 create mode 100644 frontend/app/components/design/DesignCombobox.vue

diff --git a/api/v1/api.proto b/api/v1/api.proto
index 5221045..29203f9 100644
--- a/api/v1/api.proto
+++ b/api/v1/api.proto
@@ -422,12 +422,70 @@ message Marker {
   string id = 1;
   MarkerType type = 2;
   // Display text: the name, the verse reference, the song/chapter title.
+  // Always present; for linked markers it mirrors the canonical entity label,
+  // for custom / free-text markers it's whatever the user typed.
   string label = 3;
   string note = 4;
   // In/out points in seconds.
   double start = 5;
   double end = 6;
   MarkerSource source = 7;
+  // Canonical entity reference, when the label is linked to a known entity (a
+  // bible passage, a song, a person). Empty for free-text / custom markers.
+  // `label` is kept as denormalized display text so linking is enrichment, not
+  // a requirement — unmatched markers still round-trip.
+  string entity_id = 8;
+  // Which registry `entity_id` belongs to: "bible" | "songbook" | "people".
+  // Empty when `entity_id` is empty.
+  string entity_source = 9;
+}
+
+// A resolvable entity behind a marker label, returned by SearchEntities for
+// autocomplete. `id`/`source` map to Marker.entity_id/entity_source.
+message Entity {
+  string id = 1;
+  string source = 2;
+  // Canonical display text, e.g. "John 3:16".
+  string label = 3;
+  // Optional secondary text shown under the label, e.g. a translation or book.
+  string detail = 4;
+}
+
+message SearchEntitiesRequest {
+  // Which kind of entity to search — mapped from the marker's type.
+  MarkerType type = 1;
+  string query = 2;
+  // Max results to return; server clamps to a sane bound. 0 means default.
+  int32 limit = 3;
+}
+
+message SearchEntitiesResponse {
+  repeated Entity entities = 1;
+}
+
+// One free-text label to try to resolve to a canonical entity, used by the bulk
+// "resolve references" action.
+message ReferenceQuery {
+  // Opaque id echoed back so the caller can correlate results (the marker id).
+  string ref_id = 1;
+  MarkerType type = 2;
+  string text = 3;
+}
+
+message ResolvedReference {
+  string ref_id = 1;
+  // True only when the text resolved to a single, confident match.
+  bool resolved = 2;
+  // Set only when resolved.
+  Entity entity = 3;
+}
+
+message ResolveReferencesRequest {
+  repeated ReferenceQuery queries = 1;
+}
+
+message ResolveReferencesResponse {
+  repeated ResolvedReference results = 1;
 }
 
 message GetMarkersRequest {
@@ -490,4 +548,8 @@ service APIService {
   // Markers
   rpc GetMarkers(GetMarkersRequest) returns (GetMarkersResponse) {}
   rpc SubmitMarkers(SubmitMarkersRequest) returns (Void) {}
+  // Autocomplete for marker labels (bible passages, songs, people).
+  rpc SearchEntities(SearchEntitiesRequest) returns (SearchEntitiesResponse) {}
+  // Bulk-resolve free-text marker labels to canonical entities.
+  rpc ResolveReferences(ResolveReferencesRequest) returns (ResolveReferencesResponse) {}
 }
diff --git a/backend/api/v1/api.pb.go b/backend/api/v1/api.pb.go
index d7347fd..804f2f1 100644
--- a/backend/api/v1/api.pb.go
+++ b/backend/api/v1/api.pb.go
@@ -3617,12 +3617,22 @@ type Marker struct {
 	Id    string                 `protobuf:"bytes,1,opt,name=id,proto3" json:"id,omitempty"`
 	Type  MarkerType             `protobuf:"varint,2,opt,name=type,proto3,enum=api.v1.MarkerType" json:"type,omitempty"`
 	// Display text: the name, the verse reference, the song/chapter title.
+	// Always present; for linked markers it mirrors the canonical entity label,
+	// for custom / free-text markers it's whatever the user typed.
 	Label string `protobuf:"bytes,3,opt,name=label,proto3" json:"label,omitempty"`
 	Note  string `protobuf:"bytes,4,opt,name=note,proto3" json:"note,omitempty"`
 	// In/out points in seconds.
-	Start         float64      `protobuf:"fixed64,5,opt,name=start,proto3" json:"start,omitempty"`
-	End           float64      `protobuf:"fixed64,6,opt,name=end,proto3" json:"end,omitempty"`
-	Source        MarkerSource `protobuf:"varint,7,opt,name=source,proto3,enum=api.v1.MarkerSource" json:"source,omitempty"`
+	Start  float64      `protobuf:"fixed64,5,opt,name=start,proto3" json:"start,omitempty"`
+	End    float64      `protobuf:"fixed64,6,opt,name=end,proto3" json:"end,omitempty"`
+	Source MarkerSource `protobuf:"varint,7,opt,name=source,proto3,enum=api.v1.MarkerSource" json:"source,omitempty"`
+	// Canonical entity reference, when the label is linked to a known entity (a
+	// bible passage, a song, a person). Empty for free-text / custom markers.
+	// `label` is kept as denormalized display text so linking is enrichment, not
+	// a requirement — unmatched markers still round-trip.
+	EntityId string `protobuf:"bytes,8,opt,name=entity_id,json=entityId,proto3" json:"entity_id,omitempty"`
+	// Which registry `entity_id` belongs to: "bible" | "songbook" | "people".
+	// Empty when `entity_id` is empty.
+	EntitySource  string `protobuf:"bytes,9,opt,name=entity_source,json=entitySource,proto3" json:"entity_source,omitempty"`
 	unknownFields protoimpl.UnknownFields
 	sizeCache     protoimpl.SizeCache
 }
@@ -3706,6 +3716,411 @@ func (x *Marker) GetSource() MarkerSource {
 	return MarkerSource_MARKER_SOURCE_UNSPECIFIED
 }
 
+func (x *Marker) GetEntityId() string {
+	if x != nil {
+		return x.EntityId
+	}
+	return ""
+}
+
+func (x *Marker) GetEntitySource() string {
+	if x != nil {
+		return x.EntitySource
+	}
+	return ""
+}
+
+// A resolvable entity behind a marker label, returned by SearchEntities for
+// autocomplete. `id`/`source` map to Marker.entity_id/entity_source.
+type Entity struct {
+	state  protoimpl.MessageState `protogen:"open.v1"`
+	Id     string                 `protobuf:"bytes,1,opt,name=id,proto3" json:"id,omitempty"`
+	Source string                 `protobuf:"bytes,2,opt,name=source,proto3" json:"source,omitempty"`
+	// Canonical display text, e.g. "John 3:16".
+	Label string `protobuf:"bytes,3,opt,name=label,proto3" json:"label,omitempty"`
+	// Optional secondary text shown under the label, e.g. a translation or book.
+	Detail        string `protobuf:"bytes,4,opt,name=detail,proto3" json:"detail,omitempty"`
+	unknownFields protoimpl.UnknownFields
+	sizeCache     protoimpl.SizeCache
+}
+
+func (x *Entity) Reset() {
+	*x = Entity{}
+	mi := &file_api_v1_api_proto_msgTypes[58]
+	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+	ms.StoreMessageInfo(mi)
+}
+
+func (x *Entity) String() string {
+	return protoimpl.X.MessageStringOf(x)
+}
+
+func (*Entity) ProtoMessage() {}
+
+func (x *Entity) ProtoReflect() protoreflect.Message {
+	mi := &file_api_v1_api_proto_msgTypes[58]
+	if x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use Entity.ProtoReflect.Descriptor instead.
+func (*Entity) Descriptor() ([]byte, []int) {
+	return file_api_v1_api_proto_rawDescGZIP(), []int{58}
+}
+
+func (x *Entity) GetId() string {
+	if x != nil {
+		return x.Id
+	}
+	return ""
+}
+
+func (x *Entity) GetSource() string {
+	if x != nil {
+		return x.Source
+	}
+	return ""
+}
+
+func (x *Entity) GetLabel() string {
+	if x != nil {
+		return x.Label
+	}
+	return ""
+}
+
+func (x *Entity) GetDetail() string {
+	if x != nil {
+		return x.Detail
+	}
+	return ""
+}
+
+type SearchEntitiesRequest struct {
+	state protoimpl.MessageState `protogen:"open.v1"`
+	// Which kind of entity to search — mapped from the marker's type.
+	Type  MarkerType `protobuf:"varint,1,opt,name=type,proto3,enum=api.v1.MarkerType" json:"type,omitempty"`
+	Query string     `protobuf:"bytes,2,opt,name=query,proto3" json:"query,omitempty"`
+	// Max results to return; server clamps to a sane bound. 0 means default.
+	Limit         int32 `protobuf:"varint,3,opt,name=limit,proto3" json:"limit,omitempty"`
+	unknownFields protoimpl.UnknownFields
+	sizeCache     protoimpl.SizeCache
+}
+
+func (x *SearchEntitiesRequest) Reset() {
+	*x = SearchEntitiesRequest{}
+	mi := &file_api_v1_api_proto_msgTypes[59]
+	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+	ms.StoreMessageInfo(mi)
+}
+
+func (x *SearchEntitiesRequest) String() string {
+	return protoimpl.X.MessageStringOf(x)
+}
+
+func (*SearchEntitiesRequest) ProtoMessage() {}
+
+func (x *SearchEntitiesRequest) ProtoReflect() protoreflect.Message {
+	mi := &file_api_v1_api_proto_msgTypes[59]
+	if x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use SearchEntitiesRequest.ProtoReflect.Descriptor instead.
+func (*SearchEntitiesRequest) Descriptor() ([]byte, []int) {
+	return file_api_v1_api_proto_rawDescGZIP(), []int{59}
+}
+
+func (x *SearchEntitiesRequest) GetType() MarkerType {
+	if x != nil {
+		return x.Type
+	}
+	return MarkerType_MARKER_TYPE_UNSPECIFIED
+}
+
+func (x *SearchEntitiesRequest) GetQuery() string {
+	if x != nil {
+		return x.Query
+	}
+	return ""
+}
+
+func (x *SearchEntitiesRequest) GetLimit() int32 {
+	if x != nil {
+		return x.Limit
+	}
+	return 0
+}
+
+type SearchEntitiesResponse struct {
+	state         protoimpl.MessageState `protogen:"open.v1"`
+	Entities      []*Entity              `protobuf:"bytes,1,rep,name=entities,proto3" json:"entities,omitempty"`
+	unknownFields protoimpl.UnknownFields
+	sizeCache     protoimpl.SizeCache
+}
+
+func (x *SearchEntitiesResponse) Reset() {
+	*x = SearchEntitiesResponse{}
+	mi := &file_api_v1_api_proto_msgTypes[60]
+	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+	ms.StoreMessageInfo(mi)
+}
+
+func (x *SearchEntitiesResponse) String() string {
+	return protoimpl.X.MessageStringOf(x)
+}
+
+func (*SearchEntitiesResponse) ProtoMessage() {}
+
+func (x *SearchEntitiesResponse) ProtoReflect() protoreflect.Message {
+	mi := &file_api_v1_api_proto_msgTypes[60]
+	if x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use SearchEntitiesResponse.ProtoReflect.Descriptor instead.
+func (*SearchEntitiesResponse) Descriptor() ([]byte, []int) {
+	return file_api_v1_api_proto_rawDescGZIP(), []int{60}
+}
+
+func (x *SearchEntitiesResponse) GetEntities() []*Entity {
+	if x != nil {
+		return x.Entities
+	}
+	return nil
+}
+
+// One free-text label to try to resolve to a canonical entity, used by the bulk
+// "resolve references" action.
+type ReferenceQuery struct {
+	state protoimpl.MessageState `protogen:"open.v1"`
+	// Opaque id echoed back so the caller can correlate results (the marker id).
+	RefId         string     `protobuf:"bytes,1,opt,name=ref_id,json=refId,proto3" json:"ref_id,omitempty"`
+	Type          MarkerType `protobuf:"varint,2,opt,name=type,proto3,enum=api.v1.MarkerType" json:"type,omitempty"`
+	Text          string     `protobuf:"bytes,3,opt,name=text,proto3" json:"text,omitempty"`
+	unknownFields protoimpl.UnknownFields
+	sizeCache     protoimpl.SizeCache
+}
+
+func (x *ReferenceQuery) Reset() {
+	*x = ReferenceQuery{}
+	mi := &file_api_v1_api_proto_msgTypes[61]
+	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+	ms.StoreMessageInfo(mi)
+}
+
+func (x *ReferenceQuery) String() string {
+	return protoimpl.X.MessageStringOf(x)
+}
+
+func (*ReferenceQuery) ProtoMessage() {}
+
+func (x *ReferenceQuery) ProtoReflect() protoreflect.Message {
+	mi := &file_api_v1_api_proto_msgTypes[61]
+	if x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use ReferenceQuery.ProtoReflect.Descriptor instead.
+func (*ReferenceQuery) Descriptor() ([]byte, []int) {
+	return file_api_v1_api_proto_rawDescGZIP(), []int{61}
+}
+
+func (x *ReferenceQuery) GetRefId() string {
+	if x != nil {
+		return x.RefId
+	}
+	return ""
+}
+
+func (x *ReferenceQuery) GetType() MarkerType {
+	if x != nil {
+		return x.Type
+	}
+	return MarkerType_MARKER_TYPE_UNSPECIFIED
+}
+
+func (x *ReferenceQuery) GetText() string {
+	if x != nil {
+		return x.Text
+	}
+	return ""
+}
+
+type ResolvedReference struct {
+	state protoimpl.MessageState `protogen:"open.v1"`
+	RefId string                 `protobuf:"bytes,1,opt,name=ref_id,json=refId,proto3" json:"ref_id,omitempty"`
+	// True only when the text resolved to a single, confident match.
+	Resolved bool `protobuf:"varint,2,opt,name=resolved,proto3" json:"resolved,omitempty"`
+	// Set only when resolved.
+	Entity        *Entity `protobuf:"bytes,3,opt,name=entity,proto3" json:"entity,omitempty"`
+	unknownFields protoimpl.UnknownFields
+	sizeCache     protoimpl.SizeCache
+}
+
+func (x *ResolvedReference) Reset() {
+	*x = ResolvedReference{}
+	mi := &file_api_v1_api_proto_msgTypes[62]
+	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+	ms.StoreMessageInfo(mi)
+}
+
+func (x *ResolvedReference) String() string {
+	return protoimpl.X.MessageStringOf(x)
+}
+
+func (*ResolvedReference) ProtoMessage() {}
+
+func (x *ResolvedReference) ProtoReflect() protoreflect.Message {
+	mi := &file_api_v1_api_proto_msgTypes[62]
+	if x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use ResolvedReference.ProtoReflect.Descriptor instead.
+func (*ResolvedReference) Descriptor() ([]byte, []int) {
+	return file_api_v1_api_proto_rawDescGZIP(), []int{62}
+}
+
+func (x *ResolvedReference) GetRefId() string {
+	if x != nil {
+		return x.RefId
+	}
+	return ""
+}
+
+func (x *ResolvedReference) GetResolved() bool {
+	if x != nil {
+		return x.Resolved
+	}
+	return false
+}
+
+func (x *ResolvedReference) GetEntity() *Entity {
+	if x != nil {
+		return x.Entity
+	}
+	return nil
+}
+
+type ResolveReferencesRequest struct {
+	state         protoimpl.MessageState `protogen:"open.v1"`
+	Queries       []*ReferenceQuery      `protobuf:"bytes,1,rep,name=queries,proto3" json:"queries,omitempty"`
+	unknownFields protoimpl.UnknownFields
+	sizeCache     protoimpl.SizeCache
+}
+
+func (x *ResolveReferencesRequest) Reset() {
+	*x = ResolveReferencesRequest{}
+	mi := &file_api_v1_api_proto_msgTypes[63]
+	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+	ms.StoreMessageInfo(mi)
+}
+
+func (x *ResolveReferencesRequest) String() string {
+	return protoimpl.X.MessageStringOf(x)
+}
+
+func (*ResolveReferencesRequest) ProtoMessage() {}
+
+func (x *ResolveReferencesRequest) ProtoReflect() protoreflect.Message {
+	mi := &file_api_v1_api_proto_msgTypes[63]
+	if x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use ResolveReferencesRequest.ProtoReflect.Descriptor instead.
+func (*ResolveReferencesRequest) Descriptor() ([]byte, []int) {
+	return file_api_v1_api_proto_rawDescGZIP(), []int{63}
+}
+
+func (x *ResolveReferencesRequest) GetQueries() []*ReferenceQuery {
+	if x != nil {
+		return x.Queries
+	}
+	return nil
+}
+
+type ResolveReferencesResponse struct {
+	state         protoimpl.MessageState `protogen:"open.v1"`
+	Results       []*ResolvedReference   `protobuf:"bytes,1,rep,name=results,proto3" json:"results,omitempty"`
+	unknownFields protoimpl.UnknownFields
+	sizeCache     protoimpl.SizeCache
+}
+
+func (x *ResolveReferencesResponse) Reset() {
+	*x = ResolveReferencesResponse{}
+	mi := &file_api_v1_api_proto_msgTypes[64]
+	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+	ms.StoreMessageInfo(mi)
+}
+
+func (x *ResolveReferencesResponse) String() string {
+	return protoimpl.X.MessageStringOf(x)
+}
+
+func (*ResolveReferencesResponse) ProtoMessage() {}
+
+func (x *ResolveReferencesResponse) ProtoReflect() protoreflect.Message {
+	mi := &file_api_v1_api_proto_msgTypes[64]
+	if x != nil {
+		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
+		if ms.LoadMessageInfo() == nil {
+			ms.StoreMessageInfo(mi)
+		}
+		return ms
+	}
+	return mi.MessageOf(x)
+}
+
+// Deprecated: Use ResolveReferencesResponse.ProtoReflect.Descriptor instead.
+func (*ResolveReferencesResponse) Descriptor() ([]byte, []int) {
+	return file_api_v1_api_proto_rawDescGZIP(), []int{64}
+}
+
+func (x *ResolveReferencesResponse) GetResults() []*ResolvedReference {
+	if x != nil {
+		return x.Results
+	}
+	return nil
+}
+
 type GetMarkersRequest struct {
 	state         protoimpl.MessageState `protogen:"open.v1"`
 	VXID          string                 `protobuf:"bytes,1,opt,name=VXID,proto3" json:"VXID,omitempty"`
@@ -3715,7 +4130,7 @@ type GetMarkersRequest struct {
 
 func (x *GetMarkersRequest) Reset() {
 	*x = GetMarkersRequest{}
-	mi := &file_api_v1_api_proto_msgTypes[58]
+	mi := &file_api_v1_api_proto_msgTypes[65]
 	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
 	ms.StoreMessageInfo(mi)
 }
@@ -3727,7 +4142,7 @@ func (x *GetMarkersRequest) String() string {
 func (*GetMarkersRequest) ProtoMessage() {}
 
 func (x *GetMarkersRequest) ProtoReflect() protoreflect.Message {
-	mi := &file_api_v1_api_proto_msgTypes[58]
+	mi := &file_api_v1_api_proto_msgTypes[65]
 	if x != nil {
 		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
 		if ms.LoadMessageInfo() == nil {
@@ -3740,7 +4155,7 @@ func (x *GetMarkersRequest) ProtoReflect() protoreflect.Message {
 
 // Deprecated: Use GetMarkersRequest.ProtoReflect.Descriptor instead.
 func (*GetMarkersRequest) Descriptor() ([]byte, []int) {
-	return file_api_v1_api_proto_rawDescGZIP(), []int{58}
+	return file_api_v1_api_proto_rawDescGZIP(), []int{65}
 }
 
 func (x *GetMarkersRequest) GetVXID() string {
@@ -3759,7 +4174,7 @@ type GetMarkersResponse struct {
 
 func (x *GetMarkersResponse) Reset() {
 	*x = GetMarkersResponse{}
-	mi := &file_api_v1_api_proto_msgTypes[59]
+	mi := &file_api_v1_api_proto_msgTypes[66]
 	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
 	ms.StoreMessageInfo(mi)
 }
@@ -3771,7 +4186,7 @@ func (x *GetMarkersResponse) String() string {
 func (*GetMarkersResponse) ProtoMessage() {}
 
 func (x *GetMarkersResponse) ProtoReflect() protoreflect.Message {
-	mi := &file_api_v1_api_proto_msgTypes[59]
+	mi := &file_api_v1_api_proto_msgTypes[66]
 	if x != nil {
 		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
 		if ms.LoadMessageInfo() == nil {
@@ -3784,7 +4199,7 @@ func (x *GetMarkersResponse) ProtoReflect() protoreflect.Message {
 
 // Deprecated: Use GetMarkersResponse.ProtoReflect.Descriptor instead.
 func (*GetMarkersResponse) Descriptor() ([]byte, []int) {
-	return file_api_v1_api_proto_rawDescGZIP(), []int{59}
+	return file_api_v1_api_proto_rawDescGZIP(), []int{66}
 }
 
 func (x *GetMarkersResponse) GetMarkers() []*Marker {
@@ -3804,7 +4219,7 @@ type SubmitMarkersRequest struct {
 
 func (x *SubmitMarkersRequest) Reset() {
 	*x = SubmitMarkersRequest{}
-	mi := &file_api_v1_api_proto_msgTypes[60]
+	mi := &file_api_v1_api_proto_msgTypes[67]
 	ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
 	ms.StoreMessageInfo(mi)
 }
@@ -3816,7 +4231,7 @@ func (x *SubmitMarkersRequest) String() string {
 func (*SubmitMarkersRequest) ProtoMessage() {}
 
 func (x *SubmitMarkersRequest) ProtoReflect() protoreflect.Message {
-	mi := &file_api_v1_api_proto_msgTypes[60]
+	mi := &file_api_v1_api_proto_msgTypes[67]
 	if x != nil {
 		ms := protoimpl.X.MessageStateOf(protoimpl.Pointer(x))
 		if ms.LoadMessageInfo() == nil {
@@ -3829,7 +4244,7 @@ func (x *SubmitMarkersRequest) ProtoReflect() protoreflect.Message {
 
 // Deprecated: Use SubmitMarkersRequest.ProtoReflect.Descriptor instead.
 func (*SubmitMarkersRequest) Descriptor() ([]byte, []int) {
-	return file_api_v1_api_proto_rawDescGZIP(), []int{60}
+	return file_api_v1_api_proto_rawDescGZIP(), []int{67}
 }
 
 func (x *SubmitMarkersRequest) GetVXID() string {
@@ -4098,7 +4513,7 @@ const file_api_v1_api_proto_rawDesc = "" +
 	"\x13GetVaultItemRequest\x12\x12\n" +
 	"\x04VXID\x18\x01 \x01(\tR\x04VXID\"=\n" +
 	"\x14GetVaultItemResponse\x12%\n" +
-	"\x04item\x18\x01 \x01(\v2\x11.api.v1.VaultItemR\x04item\"\xc0\x01\n" +
+	"\x04item\x18\x01 \x01(\v2\x11.api.v1.VaultItemR\x04item\"\x82\x02\n" +
 	"\x06Marker\x12\x0e\n" +
 	"\x02id\x18\x01 \x01(\tR\x02id\x12&\n" +
 	"\x04type\x18\x02 \x01(\x0e2\x12.api.v1.MarkerTypeR\x04type\x12\x14\n" +
@@ -4106,7 +4521,32 @@ const file_api_v1_api_proto_rawDesc = "" +
 	"\x04note\x18\x04 \x01(\tR\x04note\x12\x14\n" +
 	"\x05start\x18\x05 \x01(\x01R\x05start\x12\x10\n" +
 	"\x03end\x18\x06 \x01(\x01R\x03end\x12,\n" +
-	"\x06source\x18\a \x01(\x0e2\x14.api.v1.MarkerSourceR\x06source\"'\n" +
+	"\x06source\x18\a \x01(\x0e2\x14.api.v1.MarkerSourceR\x06source\x12\x1b\n" +
+	"\tentity_id\x18\b \x01(\tR\bentityId\x12#\n" +
+	"\rentity_source\x18\t \x01(\tR\fentitySource\"^\n" +
+	"\x06Entity\x12\x0e\n" +
+	"\x02id\x18\x01 \x01(\tR\x02id\x12\x16\n" +
+	"\x06source\x18\x02 \x01(\tR\x06source\x12\x14\n" +
+	"\x05label\x18\x03 \x01(\tR\x05label\x12\x16\n" +
+	"\x06detail\x18\x04 \x01(\tR\x06detail\"k\n" +
+	"\x15SearchEntitiesRequest\x12&\n" +
+	"\x04type\x18\x01 \x01(\x0e2\x12.api.v1.MarkerTypeR\x04type\x12\x14\n" +
+	"\x05query\x18\x02 \x01(\tR\x05query\x12\x14\n" +
+	"\x05limit\x18\x03 \x01(\x05R\x05limit\"D\n" +
+	"\x16SearchEntitiesResponse\x12*\n" +
+	"\bentities\x18\x01 \x03(\v2\x0e.api.v1.EntityR\bentities\"c\n" +
+	"\x0eReferenceQuery\x12\x15\n" +
+	"\x06ref_id\x18\x01 \x01(\tR\x05refId\x12&\n" +
+	"\x04type\x18\x02 \x01(\x0e2\x12.api.v1.MarkerTypeR\x04type\x12\x12\n" +
+	"\x04text\x18\x03 \x01(\tR\x04text\"n\n" +
+	"\x11ResolvedReference\x12\x15\n" +
+	"\x06ref_id\x18\x01 \x01(\tR\x05refId\x12\x1a\n" +
+	"\bresolved\x18\x02 \x01(\bR\bresolved\x12&\n" +
+	"\x06entity\x18\x03 \x01(\v2\x0e.api.v1.EntityR\x06entity\"L\n" +
+	"\x18ResolveReferencesRequest\x120\n" +
+	"\aqueries\x18\x01 \x03(\v2\x16.api.v1.ReferenceQueryR\aqueries\"P\n" +
+	"\x19ResolveReferencesResponse\x123\n" +
+	"\aresults\x18\x01 \x03(\v2\x19.api.v1.ResolvedReferenceR\aresults\"'\n" +
 	"\x11GetMarkersRequest\x12\x12\n" +
 	"\x04VXID\x18\x01 \x01(\tR\x04VXID\">\n" +
 	"\x12GetMarkersResponse\x12(\n" +
@@ -4135,7 +4575,7 @@ const file_api_v1_api_proto_rawDesc = "" +
 	"\fMarkerSource\x12\x1d\n" +
 	"\x19MARKER_SOURCE_UNSPECIFIED\x10\x00\x12\x1a\n" +
 	"\x16MARKER_SOURCE_IMPORTED\x10\x01\x12\x18\n" +
-	"\x14MARKER_SOURCE_MANUAL\x10\x022\xe9\x0e\n" +
+	"\x14MARKER_SOURCE_MANUAL\x10\x022\x98\x10\n" +
 	"\n" +
 	"APIService\x125\n" +
 	"\x0eGetPermissions\x12\f.api.v1.Void\x1a\x13.api.v1.Permissions\"\x00\x12B\n" +
@@ -4165,7 +4605,9 @@ const file_api_v1_api_proto_rawDesc = "" +
 	"\fGetVaultItem\x12\x1b.api.v1.GetVaultItemRequest\x1a\x1c.api.v1.GetVaultItemResponse\"\x00\x12E\n" +
 	"\n" +
 	"GetMarkers\x12\x19.api.v1.GetMarkersRequest\x1a\x1a.api.v1.GetMarkersResponse\"\x00\x12=\n" +
-	"\rSubmitMarkers\x12\x1c.api.v1.SubmitMarkersRequest\x1a\f.api.v1.Void\"\x00B\x1eZ\x1cbcc-media-tools/api/v1;apiv1b\x06proto3"
+	"\rSubmitMarkers\x12\x1c.api.v1.SubmitMarkersRequest\x1a\f.api.v1.Void\"\x00\x12Q\n" +
+	"\x0eSearchEntities\x12\x1d.api.v1.SearchEntitiesRequest\x1a\x1e.api.v1.SearchEntitiesResponse\"\x00\x12Z\n" +
+	"\x11ResolveReferences\x12 .api.v1.ResolveReferencesRequest\x1a!.api.v1.ResolveReferencesResponse\"\x00B\x1eZ\x1cbcc-media-tools/api/v1;apiv1b\x06proto3"
 
 var (
 	file_api_v1_api_proto_rawDescOnce sync.Once
@@ -4180,7 +4622,7 @@ func file_api_v1_api_proto_rawDescGZIP() []byte {
 }
 
 var file_api_v1_api_proto_enumTypes = make([]protoimpl.EnumInfo, 4)
-var file_api_v1_api_proto_msgTypes = make([]protoimpl.MessageInfo, 63)
+var file_api_v1_api_proto_msgTypes = make([]protoimpl.MessageInfo, 70)
 var file_api_v1_api_proto_goTypes = []any{
 	(BmmEnvironment)(0),                  // 0: api.v1.BmmEnvironment
 	(CantemoAction)(0),                   // 1: api.v1.CantemoAction
@@ -4244,13 +4686,20 @@ var file_api_v1_api_proto_goTypes = []any{
 	(*GetVaultItemRequest)(nil),          // 59: api.v1.GetVaultItemRequest
 	(*GetVaultItemResponse)(nil),         // 60: api.v1.GetVaultItemResponse
 	(*Marker)(nil),                       // 61: api.v1.Marker
-	(*GetMarkersRequest)(nil),            // 62: api.v1.GetMarkersRequest
-	(*GetMarkersResponse)(nil),           // 63: api.v1.GetMarkersResponse
-	(*SubmitMarkersRequest)(nil),         // 64: api.v1.SubmitMarkersRequest
-	nil,                                  // 65: api.v1.PermissionsList.PermissionsEntry
-	nil,                                  // 66: api.v1.GetYearsResponse.DataEntry
-	(*timestamppb.Timestamp)(nil),        // 67: google.protobuf.Timestamp
-	(*Void)(nil),                         // 68: api.v1.Void
+	(*Entity)(nil),                       // 62: api.v1.Entity
+	(*SearchEntitiesRequest)(nil),        // 63: api.v1.SearchEntitiesRequest
+	(*SearchEntitiesResponse)(nil),       // 64: api.v1.SearchEntitiesResponse
+	(*ReferenceQuery)(nil),               // 65: api.v1.ReferenceQuery
+	(*ResolvedReference)(nil),            // 66: api.v1.ResolvedReference
+	(*ResolveReferencesRequest)(nil),     // 67: api.v1.ResolveReferencesRequest
+	(*ResolveReferencesResponse)(nil),    // 68: api.v1.ResolveReferencesResponse
+	(*GetMarkersRequest)(nil),            // 69: api.v1.GetMarkersRequest
+	(*GetMarkersResponse)(nil),           // 70: api.v1.GetMarkersResponse
+	(*SubmitMarkersRequest)(nil),         // 71: api.v1.SubmitMarkersRequest
+	nil,                                  // 72: api.v1.PermissionsList.PermissionsEntry
+	nil,                                  // 73: api.v1.GetYearsResponse.DataEntry
+	(*timestamppb.Timestamp)(nil),        // 74: google.protobuf.Timestamp
+	(*Void)(nil),                         // 75: api.v1.Void
 }
 var file_api_v1_api_proto_depIdxs = []int32{
 	4,  // 0: api.v1.Permissions.bmm:type_name -> api.v1.BMMPermission
@@ -4260,15 +4709,15 @@ var file_api_v1_api_proto_depIdxs = []int32{
 	8,  // 4: api.v1.Permissions.cantemo:type_name -> api.v1.CantemoPermission
 	9,  // 5: api.v1.Permissions.vault:type_name -> api.v1.VaultPermission
 	10, // 6: api.v1.SetPermissionsRequest.permissions:type_name -> api.v1.Permissions
-	65, // 7: api.v1.PermissionsList.permissions:type_name -> api.v1.PermissionsList.PermissionsEntry
-	66, // 8: api.v1.GetYearsResponse.data:type_name -> api.v1.GetYearsResponse.DataEntry
+	72, // 7: api.v1.PermissionsList.permissions:type_name -> api.v1.PermissionsList.PermissionsEntry
+	73, // 8: api.v1.GetYearsResponse.data:type_name -> api.v1.GetYearsResponse.DataEntry
 	0,  // 9: api.v1.GetYearsRequest.environment:type_name -> api.v1.BmmEnvironment
 	0,  // 10: api.v1.GetAlbumsRequest.environment:type_name -> api.v1.BmmEnvironment
 	19, // 11: api.v1.AlbumsList.albums:type_name -> api.v1.Album
 	0,  // 12: api.v1.GetAlbumTracksRequest.environment:type_name -> api.v1.BmmEnvironment
 	0,  // 13: api.v1.GetPodcastTracksRequest.environment:type_name -> api.v1.BmmEnvironment
 	0,  // 14: api.v1.GetAvailableLanguagesRequest.environment:type_name -> api.v1.BmmEnvironment
-	67, // 15: api.v1.BMMTrack.publishedAt:type_name -> google.protobuf.Timestamp
+	74, // 15: api.v1.BMMTrack.publishedAt:type_name -> google.protobuf.Timestamp
 	26, // 16: api.v1.BMMTrack.languages:type_name -> api.v1.LanguageList
 	26, // 17: api.v1.BMMTrack.transcriptions:type_name -> api.v1.LanguageList
 	24, // 18: api.v1.TracksList.tracks:type_name -> api.v1.BMMTrack
@@ -4288,67 +4737,77 @@ var file_api_v1_api_proto_depIdxs = []int32{
 	56, // 32: api.v1.GetVaultItemResponse.item:type_name -> api.v1.VaultItem
 	2,  // 33: api.v1.Marker.type:type_name -> api.v1.MarkerType
 	3,  // 34: api.v1.Marker.source:type_name -> api.v1.MarkerSource
-	61, // 35: api.v1.GetMarkersResponse.markers:type_name -> api.v1.Marker
-	61, // 36: api.v1.SubmitMarkersRequest.markers:type_name -> api.v1.Marker
-	10, // 37: api.v1.PermissionsList.PermissionsEntry.value:type_name -> api.v1.Permissions
-	15, // 38: api.v1.GetYearsResponse.DataEntry.value:type_name -> api.v1.BMMYear
-	68, // 39: api.v1.APIService.GetPermissions:input_type -> api.v1.Void
-	12, // 40: api.v1.APIService.UpdatePermissions:input_type -> api.v1.SetPermissionsRequest
-	13, // 41: api.v1.APIService.DeletePermissions:input_type -> api.v1.DeletePermissionsRequest
-	68, // 42: api.v1.APIService.ListPermissions:input_type -> api.v1.Void
-	28, // 43: api.v1.APIService.GetTranscription:input_type -> api.v1.GetTranscriptionReqest
-	32, // 44: api.v1.APIService.GetPreview:input_type -> api.v1.GetPreviewRequest
-	35, // 45: api.v1.APIService.SubmitTranscription:input_type -> api.v1.SubmitTranscriptionRequest
-	17, // 46: api.v1.APIService.GetYears:input_type -> api.v1.GetYearsRequest
-	18, // 47: api.v1.APIService.GetAlbums:input_type -> api.v1.GetAlbumsRequest
-	21, // 48: api.v1.APIService.GetAlbumTracks:input_type -> api.v1.GetAlbumTracksRequest
-	22, // 49: api.v1.APIService.GetPodcastTracks:input_type -> api.v1.GetPodcastTracksRequest
-	23, // 50: api.v1.APIService.GetLanguages:input_type -> api.v1.GetAvailableLanguagesRequest
-	34, // 51: api.v1.APIService.GetBMMTranscription:input_type -> api.v1.GetBMMTranscriptionRequest
-	36, // 52: api.v1.APIService.SubmitShort:input_type -> api.v1.SubmitShortRequest
-	40, // 53: api.v1.APIService.GetExportConfig:input_type -> api.v1.GetExportConfigRequest
-	43, // 54: api.v1.APIService.StartExport:input_type -> api.v1.StartExportRequest
-	45, // 55: api.v1.APIService.ExportTimedMetadata:input_type -> api.v1.ExportTimedMetadataRequest
-	51, // 56: api.v1.APIService.ResolveAssets:input_type -> api.v1.ResolveAssetsRequest
-	46, // 57: api.v1.APIService.GetVBExportConfig:input_type -> api.v1.GetVBExportConfigRequest
-	48, // 58: api.v1.APIService.StartVBExport:input_type -> api.v1.StartVBExportRequest
-	68, // 59: api.v1.APIService.GetExportDestinations:input_type -> api.v1.Void
-	54, // 60: api.v1.APIService.TriggerCantemoAction:input_type -> api.v1.TriggerCantemoActionRequest
-	55, // 61: api.v1.APIService.VaultSearch:input_type -> api.v1.VaultSearchRequest
-	59, // 62: api.v1.APIService.GetVaultItem:input_type -> api.v1.GetVaultItemRequest
-	62, // 63: api.v1.APIService.GetMarkers:input_type -> api.v1.GetMarkersRequest
-	64, // 64: api.v1.APIService.SubmitMarkers:input_type -> api.v1.SubmitMarkersRequest
-	10, // 65: api.v1.APIService.GetPermissions:output_type -> api.v1.Permissions
-	68, // 66: api.v1.APIService.UpdatePermissions:output_type -> api.v1.Void
-	68, // 67: api.v1.APIService.DeletePermissions:output_type -> api.v1.Void
-	14, // 68: api.v1.APIService.ListPermissions:output_type -> api.v1.PermissionsList
-	29, // 69: api.v1.APIService.GetTranscription:output_type -> api.v1.Transcription
-	33, // 70: api.v1.APIService.GetPreview:output_type -> api.v1.Preview
-	68, // 71: api.v1.APIService.SubmitTranscription:output_type -> api.v1.Void
-	16, // 72: api.v1.APIService.GetYears:output_type -> api.v1.GetYearsResponse
-	20, // 73: api.v1.APIService.GetAlbums:output_type -> api.v1.AlbumsList
-	25, // 74: api.v1.APIService.GetAlbumTracks:output_type -> api.v1.TracksList
-	25, // 75: api.v1.APIService.GetPodcastTracks:output_type -> api.v1.TracksList
-	26, // 76: api.v1.APIService.GetLanguages:output_type -> api.v1.LanguageList
-	29, // 77: api.v1.APIService.GetBMMTranscription:output_type -> api.v1.Transcription
-	68, // 78: api.v1.APIService.SubmitShort:output_type -> api.v1.Void
-	41, // 79: api.v1.APIService.GetExportConfig:output_type -> api.v1.GetExportConfigResponse
-	44, // 80: api.v1.APIService.StartExport:output_type -> api.v1.StartExportResponse
-	68, // 81: api.v1.APIService.ExportTimedMetadata:output_type -> api.v1.Void
-	53, // 82: api.v1.APIService.ResolveAssets:output_type -> api.v1.ResolveAssetsResponse
-	47, // 83: api.v1.APIService.GetVBExportConfig:output_type -> api.v1.GetVBExportConfigResponse
-	49, // 84: api.v1.APIService.StartVBExport:output_type -> api.v1.StartVBExportResponse
-	50, // 85: api.v1.APIService.GetExportDestinations:output_type -> api.v1.ExportDestinationsResponse
-	68, // 86: api.v1.APIService.TriggerCantemoAction:output_type -> api.v1.Void
-	58, // 87: api.v1.APIService.VaultSearch:output_type -> api.v1.VaultSearchResponse
-	60, // 88: api.v1.APIService.GetVaultItem:output_type -> api.v1.GetVaultItemResponse
-	63, // 89: api.v1.APIService.GetMarkers:output_type -> api.v1.GetMarkersResponse
-	68, // 90: api.v1.APIService.SubmitMarkers:output_type -> api.v1.Void
-	65, // [65:91] is the sub-list for method output_type
-	39, // [39:65] is the sub-list for method input_type
-	39, // [39:39] is the sub-list for extension type_name
-	39, // [39:39] is the sub-list for extension extendee
-	0,  // [0:39] is the sub-list for field type_name
+	2,  // 35: api.v1.SearchEntitiesRequest.type:type_name -> api.v1.MarkerType
+	62, // 36: api.v1.SearchEntitiesResponse.entities:type_name -> api.v1.Entity
+	2,  // 37: api.v1.ReferenceQuery.type:type_name -> api.v1.MarkerType
+	62, // 38: api.v1.ResolvedReference.entity:type_name -> api.v1.Entity
+	65, // 39: api.v1.ResolveReferencesRequest.queries:type_name -> api.v1.ReferenceQuery
+	66, // 40: api.v1.ResolveReferencesResponse.results:type_name -> api.v1.ResolvedReference
+	61, // 41: api.v1.GetMarkersResponse.markers:type_name -> api.v1.Marker
+	61, // 42: api.v1.SubmitMarkersRequest.markers:type_name -> api.v1.Marker
+	10, // 43: api.v1.PermissionsList.PermissionsEntry.value:type_name -> api.v1.Permissions
+	15, // 44: api.v1.GetYearsResponse.DataEntry.value:type_name -> api.v1.BMMYear
+	75, // 45: api.v1.APIService.GetPermissions:input_type -> api.v1.Void
+	12, // 46: api.v1.APIService.UpdatePermissions:input_type -> api.v1.SetPermissionsRequest
+	13, // 47: api.v1.APIService.DeletePermissions:input_type -> api.v1.DeletePermissionsRequest
+	75, // 48: api.v1.APIService.ListPermissions:input_type -> api.v1.Void
+	28, // 49: api.v1.APIService.GetTranscription:input_type -> api.v1.GetTranscriptionReqest
+	32, // 50: api.v1.APIService.GetPreview:input_type -> api.v1.GetPreviewRequest
+	35, // 51: api.v1.APIService.SubmitTranscription:input_type -> api.v1.SubmitTranscriptionRequest
+	17, // 52: api.v1.APIService.GetYears:input_type -> api.v1.GetYearsRequest
+	18, // 53: api.v1.APIService.GetAlbums:input_type -> api.v1.GetAlbumsRequest
+	21, // 54: api.v1.APIService.GetAlbumTracks:input_type -> api.v1.GetAlbumTracksRequest
+	22, // 55: api.v1.APIService.GetPodcastTracks:input_type -> api.v1.GetPodcastTracksRequest
+	23, // 56: api.v1.APIService.GetLanguages:input_type -> api.v1.GetAvailableLanguagesRequest
+	34, // 57: api.v1.APIService.GetBMMTranscription:input_type -> api.v1.GetBMMTranscriptionRequest
+	36, // 58: api.v1.APIService.SubmitShort:input_type -> api.v1.SubmitShortRequest
+	40, // 59: api.v1.APIService.GetExportConfig:input_type -> api.v1.GetExportConfigRequest
+	43, // 60: api.v1.APIService.StartExport:input_type -> api.v1.StartExportRequest
+	45, // 61: api.v1.APIService.ExportTimedMetadata:input_type -> api.v1.ExportTimedMetadataRequest
+	51, // 62: api.v1.APIService.ResolveAssets:input_type -> api.v1.ResolveAssetsRequest
+	46, // 63: api.v1.APIService.GetVBExportConfig:input_type -> api.v1.GetVBExportConfigRequest
+	48, // 64: api.v1.APIService.StartVBExport:input_type -> api.v1.StartVBExportRequest
+	75, // 65: api.v1.APIService.GetExportDestinations:input_type -> api.v1.Void
+	54, // 66: api.v1.APIService.TriggerCantemoAction:input_type -> api.v1.TriggerCantemoActionRequest
+	55, // 67: api.v1.APIService.VaultSearch:input_type -> api.v1.VaultSearchRequest
+	59, // 68: api.v1.APIService.GetVaultItem:input_type -> api.v1.GetVaultItemRequest
+	69, // 69: api.v1.APIService.GetMarkers:input_type -> api.v1.GetMarkersRequest
+	71, // 70: api.v1.APIService.SubmitMarkers:input_type -> api.v1.SubmitMarkersRequest
+	63, // 71: api.v1.APIService.SearchEntities:input_type -> api.v1.SearchEntitiesRequest
+	67, // 72: api.v1.APIService.ResolveReferences:input_type -> api.v1.ResolveReferencesRequest
+	10, // 73: api.v1.APIService.GetPermissions:output_type -> api.v1.Permissions
+	75, // 74: api.v1.APIService.UpdatePermissions:output_type -> api.v1.Void
+	75, // 75: api.v1.APIService.DeletePermissions:output_type -> api.v1.Void
+	14, // 76: api.v1.APIService.ListPermissions:output_type -> api.v1.PermissionsList
+	29, // 77: api.v1.APIService.GetTranscription:output_type -> api.v1.Transcription
+	33, // 78: api.v1.APIService.GetPreview:output_type -> api.v1.Preview
+	75, // 79: api.v1.APIService.SubmitTranscription:output_type -> api.v1.Void
+	16, // 80: api.v1.APIService.GetYears:output_type -> api.v1.GetYearsResponse
+	20, // 81: api.v1.APIService.GetAlbums:output_type -> api.v1.AlbumsList
+	25, // 82: api.v1.APIService.GetAlbumTracks:output_type -> api.v1.TracksList
+	25, // 83: api.v1.APIService.GetPodcastTracks:output_type -> api.v1.TracksList
+	26, // 84: api.v1.APIService.GetLanguages:output_type -> api.v1.LanguageList
+	29, // 85: api.v1.APIService.GetBMMTranscription:output_type -> api.v1.Transcription
+	75, // 86: api.v1.APIService.SubmitShort:output_type -> api.v1.Void
+	41, // 87: api.v1.APIService.GetExportConfig:output_type -> api.v1.GetExportConfigResponse
+	44, // 88: api.v1.APIService.StartExport:output_type -> api.v1.StartExportResponse
+	75, // 89: api.v1.APIService.ExportTimedMetadata:output_type -> api.v1.Void
+	53, // 90: api.v1.APIService.ResolveAssets:output_type -> api.v1.ResolveAssetsResponse
+	47, // 91: api.v1.APIService.GetVBExportConfig:output_type -> api.v1.GetVBExportConfigResponse
+	49, // 92: api.v1.APIService.StartVBExport:output_type -> api.v1.StartVBExportResponse
+	50, // 93: api.v1.APIService.GetExportDestinations:output_type -> api.v1.ExportDestinationsResponse
+	75, // 94: api.v1.APIService.TriggerCantemoAction:output_type -> api.v1.Void
+	58, // 95: api.v1.APIService.VaultSearch:output_type -> api.v1.VaultSearchResponse
+	60, // 96: api.v1.APIService.GetVaultItem:output_type -> api.v1.GetVaultItemResponse
+	70, // 97: api.v1.APIService.GetMarkers:output_type -> api.v1.GetMarkersResponse
+	75, // 98: api.v1.APIService.SubmitMarkers:output_type -> api.v1.Void
+	64, // 99: api.v1.APIService.SearchEntities:output_type -> api.v1.SearchEntitiesResponse
+	68, // 100: api.v1.APIService.ResolveReferences:output_type -> api.v1.ResolveReferencesResponse
+	73, // [73:101] is the sub-list for method output_type
+	45, // [45:73] is the sub-list for method input_type
+	45, // [45:45] is the sub-list for extension type_name
+	45, // [45:45] is the sub-list for extension extendee
+	0,  // [0:45] is the sub-list for field type_name
 }
 
 func init() { file_api_v1_api_proto_init() }
@@ -4363,7 +4822,7 @@ func file_api_v1_api_proto_init() {
 			GoPackagePath: reflect.TypeOf(x{}).PkgPath(),
 			RawDescriptor: unsafe.Slice(unsafe.StringData(file_api_v1_api_proto_rawDesc), len(file_api_v1_api_proto_rawDesc)),
 			NumEnums:      4,
-			NumMessages:   63,
+			NumMessages:   70,
 			NumExtensions: 0,
 			NumServices:   1,
 		},
diff --git a/backend/api/v1/apiv1connect/api.connect.go b/backend/api/v1/apiv1connect/api.connect.go
index 3d0928e..4f2baaf 100644
--- a/backend/api/v1/apiv1connect/api.connect.go
+++ b/backend/api/v1/apiv1connect/api.connect.go
@@ -102,6 +102,12 @@ const (
 	// APIServiceSubmitMarkersProcedure is the fully-qualified name of the APIService's SubmitMarkers
 	// RPC.
 	APIServiceSubmitMarkersProcedure = "/api.v1.APIService/SubmitMarkers"
+	// APIServiceSearchEntitiesProcedure is the fully-qualified name of the APIService's SearchEntities
+	// RPC.
+	APIServiceSearchEntitiesProcedure = "/api.v1.APIService/SearchEntities"
+	// APIServiceResolveReferencesProcedure is the fully-qualified name of the APIService's
+	// ResolveReferences RPC.
+	APIServiceResolveReferencesProcedure = "/api.v1.APIService/ResolveReferences"
 )
 
 // APIServiceClient is a client for the api.v1.APIService service.
@@ -143,6 +149,10 @@ type APIServiceClient interface {
 	// Markers
 	GetMarkers(context.Context, *connect.Request[v1.GetMarkersRequest]) (*connect.Response[v1.GetMarkersResponse], error)
 	SubmitMarkers(context.Context, *connect.Request[v1.SubmitMarkersRequest]) (*connect.Response[v1.Void], error)
+	// Autocomplete for marker labels (bible passages, songs, people).
+	SearchEntities(context.Context, *connect.Request[v1.SearchEntitiesRequest]) (*connect.Response[v1.SearchEntitiesResponse], error)
+	// Bulk-resolve free-text marker labels to canonical entities.
+	ResolveReferences(context.Context, *connect.Request[v1.ResolveReferencesRequest]) (*connect.Response[v1.ResolveReferencesResponse], error)
 }
 
 // NewAPIServiceClient constructs a client for the api.v1.APIService service. By default, it uses
@@ -312,6 +322,18 @@ func NewAPIServiceClient(httpClient connect.HTTPClient, baseURL string, opts ...
 			connect.WithSchema(aPIServiceMethods.ByName("SubmitMarkers")),
 			connect.WithClientOptions(opts...),
 		),
+		searchEntities: connect.NewClient[v1.SearchEntitiesRequest, v1.SearchEntitiesResponse](
+			httpClient,
+			baseURL+APIServiceSearchEntitiesProcedure,
+			connect.WithSchema(aPIServiceMethods.ByName("SearchEntities")),
+			connect.WithClientOptions(opts...),
+		),
+		resolveReferences: connect.NewClient[v1.ResolveReferencesRequest, v1.ResolveReferencesResponse](
+			httpClient,
+			baseURL+APIServiceResolveReferencesProcedure,
+			connect.WithSchema(aPIServiceMethods.ByName("ResolveReferences")),
+			connect.WithClientOptions(opts...),
+		),
 	}
 }
 
@@ -343,6 +365,8 @@ type aPIServiceClient struct {
 	getVaultItem          *connect.Client[v1.GetVaultItemRequest, v1.GetVaultItemResponse]
 	getMarkers            *connect.Client[v1.GetMarkersRequest, v1.GetMarkersResponse]
 	submitMarkers         *connect.Client[v1.SubmitMarkersRequest, v1.Void]
+	searchEntities        *connect.Client[v1.SearchEntitiesRequest, v1.SearchEntitiesResponse]
+	resolveReferences     *connect.Client[v1.ResolveReferencesRequest, v1.ResolveReferencesResponse]
 }
 
 // GetPermissions calls api.v1.APIService.GetPermissions.
@@ -475,6 +499,16 @@ func (c *aPIServiceClient) SubmitMarkers(ctx context.Context, req *connect.Reque
 	return c.submitMarkers.CallUnary(ctx, req)
 }
 
+// SearchEntities calls api.v1.APIService.SearchEntities.
+func (c *aPIServiceClient) SearchEntities(ctx context.Context, req *connect.Request[v1.SearchEntitiesRequest]) (*connect.Response[v1.SearchEntitiesResponse], error) {
+	return c.searchEntities.CallUnary(ctx, req)
+}
+
+// ResolveReferences calls api.v1.APIService.ResolveReferences.
+func (c *aPIServiceClient) ResolveReferences(ctx context.Context, req *connect.Request[v1.ResolveReferencesRequest]) (*connect.Response[v1.ResolveReferencesResponse], error) {
+	return c.resolveReferences.CallUnary(ctx, req)
+}
+
 // APIServiceHandler is an implementation of the api.v1.APIService service.
 type APIServiceHandler interface {
 	// Permissions
@@ -514,6 +548,10 @@ type APIServiceHandler interface {
 	// Markers
 	GetMarkers(context.Context, *connect.Request[v1.GetMarkersRequest]) (*connect.Response[v1.GetMarkersResponse], error)
 	SubmitMarkers(context.Context, *connect.Request[v1.SubmitMarkersRequest]) (*connect.Response[v1.Void], error)
+	// Autocomplete for marker labels (bible passages, songs, people).
+	SearchEntities(context.Context, *connect.Request[v1.SearchEntitiesRequest]) (*connect.Response[v1.SearchEntitiesResponse], error)
+	// Bulk-resolve free-text marker labels to canonical entities.
+	ResolveReferences(context.Context, *connect.Request[v1.ResolveReferencesRequest]) (*connect.Response[v1.ResolveReferencesResponse], error)
 }
 
 // NewAPIServiceHandler builds an HTTP handler from the service implementation. It returns the path
@@ -679,6 +717,18 @@ func NewAPIServiceHandler(svc APIServiceHandler, opts ...connect.HandlerOption)
 		connect.WithSchema(aPIServiceMethods.ByName("SubmitMarkers")),
 		connect.WithHandlerOptions(opts...),
 	)
+	aPIServiceSearchEntitiesHandler := connect.NewUnaryHandler(
+		APIServiceSearchEntitiesProcedure,
+		svc.SearchEntities,
+		connect.WithSchema(aPIServiceMethods.ByName("SearchEntities")),
+		connect.WithHandlerOptions(opts...),
+	)
+	aPIServiceResolveReferencesHandler := connect.NewUnaryHandler(
+		APIServiceResolveReferencesProcedure,
+		svc.ResolveReferences,
+		connect.WithSchema(aPIServiceMethods.ByName("ResolveReferences")),
+		connect.WithHandlerOptions(opts...),
+	)
 	return "/api.v1.APIService/", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		switch r.URL.Path {
 		case APIServiceGetPermissionsProcedure:
@@ -733,6 +783,10 @@ func NewAPIServiceHandler(svc APIServiceHandler, opts ...connect.HandlerOption)
 			aPIServiceGetMarkersHandler.ServeHTTP(w, r)
 		case APIServiceSubmitMarkersProcedure:
 			aPIServiceSubmitMarkersHandler.ServeHTTP(w, r)
+		case APIServiceSearchEntitiesProcedure:
+			aPIServiceSearchEntitiesHandler.ServeHTTP(w, r)
+		case APIServiceResolveReferencesProcedure:
+			aPIServiceResolveReferencesHandler.ServeHTTP(w, r)
 		default:
 			http.NotFound(w, r)
 		}
@@ -845,3 +899,11 @@ func (UnimplementedAPIServiceHandler) GetMarkers(context.Context, *connect.Reque
 func (UnimplementedAPIServiceHandler) SubmitMarkers(context.Context, *connect.Request[v1.SubmitMarkersRequest]) (*connect.Response[v1.Void], error) {
 	return nil, connect.NewError(connect.CodeUnimplemented, errors.New("api.v1.APIService.SubmitMarkers is not implemented"))
 }
+
+func (UnimplementedAPIServiceHandler) SearchEntities(context.Context, *connect.Request[v1.SearchEntitiesRequest]) (*connect.Response[v1.SearchEntitiesResponse], error) {
+	return nil, connect.NewError(connect.CodeUnimplemented, errors.New("api.v1.APIService.SearchEntities is not implemented"))
+}
+
+func (UnimplementedAPIServiceHandler) ResolveReferences(context.Context, *connect.Request[v1.ResolveReferencesRequest]) (*connect.Response[v1.ResolveReferencesResponse], error) {
+	return nil, connect.NewError(connect.CodeUnimplemented, errors.New("api.v1.APIService.ResolveReferences is not implemented"))
+}
diff --git a/backend/cmd/server/bible.go b/backend/cmd/server/bible.go
new file mode 100644
index 0000000..c55e9f9
--- /dev/null
+++ b/backend/cmd/server/bible.go
@@ -0,0 +1,287 @@
+package main
+
+import (
+	apiv1 "bcc-media-tools/api/v1"
+	"context"
+	"fmt"
+	"regexp"
+	"strconv"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/go-resty/resty/v2"
+)
+
+// Bible-verse marker autocomplete, backed by BCC's bible server
+// (https://bibleapi.bcc.media, source: github.com/bcc-code/bible-server).
+//
+// The bible server has no search/autocomplete endpoint — only "list books" and
+// "get verse". So the autocomplete logic (parse a free-text reference, prefix-
+// match the book) lives here, driven by the authoritative book list we fetch
+// and cache from the server. Using the server means the book names come from
+// the actual translation (BCC broadcasts nb-1930) rather than a bundled table.
+//
+// A book's `id` is the canonical, translation-independent code ("Jn", "Gen")
+// used both as the verse-endpoint path segment and in the canonical verse
+// format ("Jn 3/16", "1Sam 2/18-34"). That canonical ref becomes the marker's
+// entity_id, so a linked verse resolves the same regardless of display language.
+
+const (
+	defaultBibleBaseURL = "https://bibleapi.bcc.media/v1"
+	// nb-1930 (Norwegian, Bibelen 1930) — BCC's broadcast translation.
+	defaultBibleID = "nb-1930"
+	booksCacheTTL  = 24 * time.Hour
+)
+
+type bibleBook struct {
+	ID        string `json:"id"`
+	Number    int    `json:"number"`
+	LongName  string `json:"long_name"`
+	ShortName string `json:"short_name"`
+
+	// Normalized match forms, precomputed once when the list is cached so a
+	// search doesn't re-normalize every book on every keystroke.
+	normLong  string
+	normWords []string
+	normShort string
+	normID    string
+}
+
+// BibleClient fetches and caches the book list for a single translation and
+// resolves free-text references against it.
+type BibleClient struct {
+	bibleID string
+	rest    *resty.Client
+
+	mu          sync.Mutex
+	books       []bibleBook
+	booksExpiry time.Time
+}
+
+func NewBibleClient(baseURL, bibleID string) *BibleClient {
+	if baseURL == "" {
+		baseURL = defaultBibleBaseURL
+	}
+	if bibleID == "" {
+		bibleID = defaultBibleID
+	}
+	rest := resty.New()
+	rest.SetBaseURL(strings.TrimRight(baseURL, "/"))
+	rest.SetHeader("Accept", "application/json")
+	rest.SetTimeout(8 * time.Second)
+	return &BibleClient{bibleID: bibleID, rest: rest}
+}
+
+// getBooks returns the cached book list, refreshing it from the server when stale.
+func (c *BibleClient) getBooks(ctx context.Context) ([]bibleBook, error) {
+	c.mu.Lock()
+	defer c.mu.Unlock()
+
+	if c.books != nil && time.Now().Before(c.booksExpiry) {
+		return c.books, nil
+	}
+
+	var books []bibleBook
+	resp, err := c.rest.R().
+		SetContext(ctx).
+		SetResult(&books).
+		Get(fmt.Sprintf("/%s/books", c.bibleID))
+	if err != nil {
+		return nil, err
+	}
+	if resp.IsError() {
+		return nil, fmt.Errorf("bible server returned %s for %s", resp.Status(), resp.Request.URL)
+	}
+
+	for i := range books {
+		b := &books[i]
+		b.normLong = normalizeBibleQuery(b.LongName)
+		b.normWords = strings.Fields(b.normLong)
+		b.normShort = normalizeBibleQuery(b.ShortName)
+		b.normID = normalizeBibleQuery(b.ID)
+	}
+
+	c.books = books
+	c.booksExpiry = time.Now().Add(booksCacheTTL)
+	return books, nil
+}
+
+var (
+	bibleSpaceRe = regexp.MustCompile(`\s+`)
+	// Splits a reference into its book part and a trailing chapter[:verse[-verse]].
+	// The book part is non-greedy so a leading number ("1 Johannes") stays with
+	// the book while the anchored trailing number is taken as the chapter. Both
+	// ":" and "/" are accepted as the chapter/verse separator.
+	bibleRefRe = regexp.MustCompile(`^(.*?)\s*(\d+)(?:[:/](\d+)(?:\s*-\s*(\d+))?)?$`)
+)
+
+func normalizeBibleQuery(s string) string {
+	s = strings.ToLower(strings.TrimSpace(s))
+	s = strings.ReplaceAll(s, ".", "") // drop abbreviation dots ("Joh." -> "joh")
+	return bibleSpaceRe.ReplaceAllString(s, " ")
+}
+
+// bookPrimaryMatch reports whether the query prefix names this book by its full
+// display name, short name, or canonical id — the strong signals. A book whose
+// name merely contains the query as a later word (e.g. "Johannes" in "Johannes’
+// åpenbaring") is deliberately excluded.
+func bookPrimaryMatch(b bibleBook, q string) bool {
+	return strings.HasPrefix(b.normLong, q) ||
+		strings.HasPrefix(b.normShort, q) ||
+		strings.HasPrefix(b.normID, q)
+}
+
+// bookMatchTier scores how strongly the query names this book: 2 for an exact
+// short-name/id/long-name hit, 1 for a prefix (primary) hit, 0 otherwise. The
+// tiers let Resolve prefer the exact match — "joh" uniquely picks Johannes over
+// "Johannes’ åpenbaring", which only shares the prefix.
+func bookMatchTier(b bibleBook, q string) int {
+	if q == b.normShort || q == b.normID || q == b.normLong {
+		return 2
+	}
+	if bookPrimaryMatch(b, q) {
+		return 1
+	}
+	return 0
+}
+
+// bookMatches is the looser search predicate: a primary match, or any word of
+// the display name (so "genesis" hits "1 Mosebok Genesis"). All match forms are
+// precomputed in getBooks.
+func bookMatches(b bibleBook, q string) bool {
+	if q == "" {
+		return true
+	}
+	if bookPrimaryMatch(b, q) {
+		return true
+	}
+	for _, word := range b.normWords {
+		if strings.HasPrefix(word, q) {
+			return true
+		}
+	}
+	return false
+}
+
+// parsedRef is a bible reference split into its book part and numeric location.
+type parsedRef struct {
+	bookPart  string
+	chapter   int
+	verseFrom int
+	verseTo   int
+}
+
+func parseBibleRef(normalizedQuery string) parsedRef {
+	if m := bibleRefRe.FindStringSubmatch(normalizedQuery); m != nil {
+		p := parsedRef{bookPart: strings.TrimSpace(m[1])}
+		p.chapter, _ = strconv.Atoi(m[2])
+		if m[3] != "" {
+			p.verseFrom, _ = strconv.Atoi(m[3])
+		}
+		if m[4] != "" {
+			p.verseTo, _ = strconv.Atoi(m[4])
+		}
+		return p
+	}
+	// No trailing number — the whole query is a book-name prefix.
+	return parsedRef{bookPart: normalizedQuery}
+}
+
+// Search turns a free-text reference into canonical suggestions. Examples:
+// "joh 3:16", "1 kor 13:4-7", "salme 23", "genesis", "jn 3/16".
+//
+// NOTE: chapter/verse numbers aren't range-validated here (the book list
+// doesn't carry chapter counts); an out-of-range reference simply won't resolve
+// when fetched. Book identity, however, is validated against the real list.
+func (c *BibleClient) Search(ctx context.Context, query string, limit int) ([]*apiv1.Entity, error) {
+	q := normalizeBibleQuery(query)
+	if q == "" {
+		return nil, nil
+	}
+
+	books, err := c.getBooks(ctx)
+	if err != nil {
+		return nil, err
+	}
+
+	ref := parseBibleRef(q)
+	results := make([]*apiv1.Entity, 0, limit)
+	for _, b := range books {
+		if !bookMatches(b, ref.bookPart) {
+			continue
+		}
+		results = append(results, bibleEntity(b, ref.chapter, ref.verseFrom, ref.verseTo))
+		if len(results) >= limit {
+			break
+		}
+	}
+	return results, nil
+}
+
+// Resolve returns the single canonical entity a free-text reference maps to, or
+// nil when it can't be resolved confidently. Confidence requires a chapter (so
+// a bare book name won't auto-link a verse marker) and exactly one book at the
+// strongest match tier (so an ambiguous prefix like "jo 3:16" is left for
+// manual review, while an exact "joh 3:16" resolves).
+func (c *BibleClient) Resolve(ctx context.Context, text string) (*apiv1.Entity, error) {
+	q := normalizeBibleQuery(text)
+	if q == "" {
+		return nil, nil
+	}
+
+	books, err := c.getBooks(ctx)
+	if err != nil {
+		return nil, err
+	}
+
+	ref := parseBibleRef(q)
+	if ref.chapter == 0 {
+		return nil, nil
+	}
+
+	var match *bibleBook
+	bestTier, tieCount := 0, 0
+	for i := range books {
+		tier := bookMatchTier(books[i], ref.bookPart)
+		if tier == 0 {
+			continue
+		}
+		if tier > bestTier {
+			bestTier, tieCount, match = tier, 1, &books[i]
+		} else if tier == bestTier {
+			tieCount++
+		}
+	}
+	if match == nil || tieCount != 1 {
+		return nil, nil // no match, or ambiguous at the strongest tier
+	}
+	return bibleEntity(*match, ref.chapter, ref.verseFrom, ref.verseTo), nil
+}
+
+// bibleEntity builds the autocomplete entry. `label` is human display text
+// (":" separator, translation name); `id` is the canonical machine ref ("/"
+// separator, canonical book code) stored as Marker.entity_id.
+func bibleEntity(b bibleBook, chapter, verseFrom, verseTo int) *apiv1.Entity {
+	var id, label string
+	switch {
+	case chapter == 0:
+		id = b.ID
+		label = b.LongName
+	case verseFrom == 0:
+		id = fmt.Sprintf("%s %d", b.ID, chapter)
+		label = fmt.Sprintf("%s %d", b.LongName, chapter)
+	case verseTo > verseFrom:
+		id = fmt.Sprintf("%s %d/%d-%d", b.ID, chapter, verseFrom, verseTo)
+		label = fmt.Sprintf("%s %d:%d-%d", b.LongName, chapter, verseFrom, verseTo)
+	default:
+		id = fmt.Sprintf("%s %d/%d", b.ID, chapter, verseFrom)
+		label = fmt.Sprintf("%s %d:%d", b.LongName, chapter, verseFrom)
+	}
+	return &apiv1.Entity{
+		Id:     id,
+		Source: "bible",
+		Label:  label,
+		Detail: id, // show the canonical ref as secondary text
+	}
+}
diff --git a/backend/cmd/server/main.go b/backend/cmd/server/main.go
index f95b2cd..1a86b5f 100644
--- a/backend/cmd/server/main.go
+++ b/backend/cmd/server/main.go
@@ -130,6 +130,8 @@ func main() {
 		os.Getenv("VIDISPINE_USERNAME"),
 		os.Getenv("VIDISPINE_PASSWORD"),
 	)
+	bibleClient := NewBibleClient(os.Getenv("BIBLE_API_URL"), os.Getenv("BIBLE_ID"))
+	markersAPI := NewMarkersAPI(bibleClient)
 
 	// Dedicated Cantemo client for the VAULT preview proxy (same creds as the
 	// transcription tool).
@@ -143,7 +145,7 @@ func main() {
 		ExportAPI:        *exportAPI,
 		CantemoAPI:       *cantemoAPI,
 		VaultAPI:         *vaultAPI,
-		MarkersAPI:       NewMarkersAPI(),
+		MarkersAPI:       markersAPI,
 	}
 
 	if os.Getenv("STATIC_FILE_PATH") != "" {
diff --git a/backend/cmd/server/markers.go b/backend/cmd/server/markers.go
index bb5f3e4..33f4d73 100644
--- a/backend/cmd/server/markers.go
+++ b/backend/cmd/server/markers.go
@@ -7,6 +7,7 @@ import (
 	"sync"
 
 	"connectrpc.com/connect"
+	"github.com/bcc-code/mediabank-bridge/log"
 )
 
 // MarkersAPI is a placeholder, in-memory implementation of the markers store so
@@ -21,10 +22,15 @@ import (
 type MarkersAPI struct {
 	mu    sync.Mutex
 	store map[string][]*apiv1.Marker
+
+	bible *BibleClient
 }
 
-func NewMarkersAPI() *MarkersAPI {
-	return &MarkersAPI{store: map[string][]*apiv1.Marker{}}
+func NewMarkersAPI(bible *BibleClient) *MarkersAPI {
+	return &MarkersAPI{
+		store: map[string][]*apiv1.Marker{},
+		bible: bible,
+	}
 }
 
 func (m *MarkersAPI) GetMarkers(ctx context.Context, req *connect.Request[apiv1.GetMarkersRequest]) (*connect.Response[apiv1.GetMarkersResponse], error) {
@@ -43,3 +49,59 @@ func (m *MarkersAPI) SubmitMarkers(ctx context.Context, req *connect.Request[api
 
 	return connect.NewResponse(&apiv1.Void{}), nil
 }
+
+const defaultEntitySearchLimit = 10
+const maxEntitySearchLimit = 25
+
+// SearchEntities powers marker-label autocomplete. Today only bible-verse
+// lookups are wired up (against the BCC bible server); song and people
+// registries can be added as further cases without changing the contract.
+func (m *MarkersAPI) SearchEntities(ctx context.Context, req *connect.Request[apiv1.SearchEntitiesRequest]) (*connect.Response[apiv1.SearchEntitiesResponse], error) {
+	limit := int(req.Msg.Limit)
+	if limit <= 0 {
+		limit = defaultEntitySearchLimit
+	}
+	if limit > maxEntitySearchLimit {
+		limit = maxEntitySearchLimit
+	}
+
+	var entities []*apiv1.Entity
+	switch req.Msg.Type {
+	case apiv1.MarkerType_MARKER_TYPE_BIBLE_VERSE:
+		found, err := m.bible.Search(ctx, req.Msg.Query, limit)
+		if err != nil {
+			// Autocomplete is best-effort: log and return no suggestions rather
+			// than failing the request (the user can still type free text).
+			log.L.Warn().Err(err).Msg("bible search failed")
+			break
+		}
+		entities = found
+	}
+
+	return connect.NewResponse(&apiv1.SearchEntitiesResponse{Entities: entities}), nil
+}
+
+// ResolveReferences bulk-resolves free-text marker labels to canonical entities
+// for the "resolve references" action. Unresolvable entries come back with
+// resolved=false; the whole request never fails on a per-entry lookup error.
+func (m *MarkersAPI) ResolveReferences(ctx context.Context, req *connect.Request[apiv1.ResolveReferencesRequest]) (*connect.Response[apiv1.ResolveReferencesResponse], error) {
+	results := make([]*apiv1.ResolvedReference, 0, len(req.Msg.Queries))
+	for _, q := range req.Msg.Queries {
+		res := &apiv1.ResolvedReference{RefId: q.RefId}
+		switch q.Type {
+		case apiv1.MarkerType_MARKER_TYPE_BIBLE_VERSE:
+			entity, err := m.bible.Resolve(ctx, q.Text)
+			if err != nil {
+				log.L.Warn().Err(err).Msg("bible resolve failed")
+				break
+			}
+			if entity != nil {
+				res.Resolved = true
+				res.Entity = entity
+			}
+		}
+		results = append(results, res)
+	}
+
+	return connect.NewResponse(&apiv1.ResolveReferencesResponse{Results: results}), nil
+}
diff --git a/frontend/app/components/design/DesignCombobox.vue b/frontend/app/components/design/DesignCombobox.vue
new file mode 100644
index 0000000..96827d7
--- /dev/null
+++ b/frontend/app/components/design/DesignCombobox.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { Combobox, createListCollection } from "@ark-ui/vue";
+import { useDebounceFn } from "@vueuse/core";
+import type { Placement } from "~/types/design";
+
+export interface ComboboxItem {
+    // Canonical value stored on selection (e.g. an entity id).
+    value: string;
+    // Display text shown in the input and as the primary line.
+    label: string;
+    // Optional secondary line (e.g. the canonical reference).
+    detail?: string;
+}
+
+interface Props {
+    // The visible text — parent-controlled (the marker label). Free-form, so
+    // the field doubles as a plain input when nothing is linked.
+    modelValue: string;
+    // Suggestions to show; the parent refreshes these in response to `search`.
+    items: ComboboxItem[];
+    fieldLabel?: string;
+    placeholder?: string;
+    placement?: Placement;
+    disabled?: boolean;
+    loading?: boolean;
+    leadingIcon?: string;
+    // Debounce for the `search` emit, in ms.
+    debounce?: number;
+    // Message shown when a query returned no suggestions.
+    emptyText?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    fieldLabel: undefined,
+    placeholder: undefined,
+    placement: "bottom-start",
+    debounce: 300,
+    leadingIcon: undefined,
+    emptyText: undefined,
+});
+
+const emit = defineEmits<{
+    // Fired on genuine user typing (not on programmatic selection sync). Update
+    // the bound value and refresh suggestions in response.
+    "update:modelValue": [value: string];
+    // Debounced, fired as the user types. The parent should fetch suggestions.
+    search: [query: string];
+    // Fired when a suggestion is picked.
+    select: [item: ComboboxItem];
+}>();
+
+const collection = computed(() =>
+    createListCollection({
+        items: props.items,
+        itemToValue: (item) => item.value,
+        itemToString: (item) => item.label,
+    }),
+);
+
+const emitSearch = useDebounceFn(
+    (q: string) => emit("search", q),
+    () => Math.max(0, props.debounce),
+);
+
+// Picking an item makes Ark sync the input text, which fires an input-value
+// change we must NOT treat as user typing. This flag swallows that echo
+// regardless of whether value-change or input-value-change fires first.
+let selecting = false;
+
+function onInputValueChange(details: { inputValue: string }) {
+    if (selecting) return; // echo from a selection — `selecting` clears on nextTick
+    emit("update:modelValue", details.inputValue);
+    emitSearch(details.inputValue);
+}
+
+function onValueChange(details: { value: string[] }) {
+    const picked = props.items.find((i) => i.value === details.value[0]);
+    if (!picked) return;
+    // Guard the input-value echo Ark emits on selection, whichever order it
+    // arrives in, then release the guard once this tick settles.
+    selecting = true;
+    nextTick(() => {
+        selecting = false;
+    });
+    emit("select", picked);
+}
+
+const showEmpty = computed(
+    () =>
+        !props.loading &&
+        !!props.emptyText &&
+        !!props.modelValue.trim() &&
+        props.items.length === 0,
+);
+</script>
+
+<template>
+    <Combobox.Root
+        :collection="collection"
+        :input-value="modelValue"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :open-on-click="false"
+        allow-custom-value
+        select-on-blur
+        :positioning="{ placement, gutter: 4 }"
+        @input-value-change="onInputValueChange"
+        @value-change="onValueChange"
+    >
+        <Combobox.Label
+            v-if="fieldLabel"
+            class="text-body-3 text-text-muted mb-1 block"
+        >
+            {{ fieldLabel }}
+        </Combobox.Label>
+
+        <Combobox.Control class="relative flex items-center">
+            <Icon
+                v-if="leadingIcon"
+                :name="leadingIcon"
+                class="text-text-hint pointer-events-none absolute left-3 size-4"
+            />
+            <Combobox.Input
+                :placeholder="placeholder"
+                :class="[
+                    'border-border-1 text-body-3 text-text-default placeholder:text-text-hint ds-focus-ring w-full rounded-xl border py-2 disabled:cursor-not-allowed disabled:opacity-50',
+                    leadingIcon ? 'pl-9' : 'pl-3',
+                    'pr-9',
+                ]"
+            />
+            <div class="absolute right-2 flex items-center gap-1">
+                <Icon
+                    v-if="loading"
+                    name="tabler:loader-2"
+                    class="text-text-hint size-4 animate-spin"
+                />
+                <slot name="trailing" />
+            </div>
+        </Combobox.Control>
+
+        <Teleport to="#teleports">
+            <Combobox.Positioner>
+                <Combobox.Content
+                    class="gradient-border bg-surface-raise shadow-floating ease-out-expo z-50 max-h-72 min-w-[var(--reference-width)] origin-[--transform-origin] overflow-y-auto rounded-xl p-1 transition-[opacity,transform] duration-200 data-[state=closed]:scale-95 data-[state=closed]:opacity-0 data-[state=open]:scale-100 data-[state=open]:opacity-100"
+                >
+                    <Combobox.Item
+                        v-for="item in items"
+                        :key="item.value"
+                        :item="item"
+                        class="text-body-3 text-text-default data-highlighted:bg-surface-indent flex cursor-pointer items-center justify-between gap-3 rounded-lg px-3 py-2"
+                    >
+                        <span class="min-w-0 flex-1 truncate">
+                            <Combobox.ItemText>
+                                {{ item.label }}
+                            </Combobox.ItemText>
+                        </span>
+                        <span
+                            v-if="item.detail"
+                            class="text-text-hint text-caption-1 shrink-0 tabular-nums"
+                        >
+                            {{ item.detail }}
+                        </span>
+                    </Combobox.Item>
+
+                    <div
+                        v-if="showEmpty"
+                        class="text-text-hint text-body-3 px-3 py-2"
+                    >
+                        {{ emptyText }}
+                    </div>
+                </Combobox.Content>
+            </Combobox.Positioner>
+        </Teleport>
+    </Combobox.Root>
+</template>
diff --git a/frontend/app/components/markers/MarkersEditor.vue b/frontend/app/components/markers/MarkersEditor.vue
index 9140d28..0d02811 100644
--- a/frontend/app/components/markers/MarkersEditor.vue
+++ b/frontend/app/components/markers/MarkersEditor.vue
@@ -3,10 +3,14 @@ import {
     MARKER_TYPES,
     formatMarkerDuration,
     formatMarkerTime,
+    isMarkerUnresolved,
     markerTypeMeta,
     parseMarkerTime,
 } from "~/utils/markers";
 import type { Marker } from "~/utils/markers";
+import { TYPE_TO_PB } from "~/composables/useMarkers";
+import type { ComboboxItem } from "~/components/design/DesignCombobox.vue";
+import type { Entity } from "~~/src/gen/api/v1/api_pb";
 
 const props = defineProps<{
     marker: Marker | undefined;
@@ -42,11 +46,126 @@ const label = computed({
     get: () => props.marker?.label ?? "",
     set: (v) => emit("update", { label: v }),
 });
+
+// Bible-verse labels autocomplete against the bible server. Selecting a
+// suggestion links the marker to a canonical reference (entityId); typing free
+// text clears that link but keeps working as a plain label.
+const api = useAPI();
+// Raw suggestions kept so a selection can recover the entity's `source` (which
+// registry it came from) rather than re-guessing it on the frontend.
+const entities = ref<Entity[]>([]);
+const entityItems = computed<ComboboxItem[]>(() =>
+    entities.value.map((e) => ({
+        value: e.id,
+        label: e.label,
+        detail: e.detail,
+    })),
+);
+const entityLoading = ref(false);
+let searchSeq = 0;
+
+function resetSuggestions() {
+    entities.value = [];
+    entityLoading.value = false;
+}
+
+// Drop suggestions (and invalidate any in-flight search) when switching markers.
+watch(
+    () => props.marker?.id,
+    () => {
+        resetSuggestions();
+        searchSeq++;
+    },
+);
+
+async function onEntitySearch(query: string) {
+    const q = query.trim();
+    if (!q) {
+        resetSuggestions();
+        return;
+    }
+    const seq = ++searchSeq;
+    entityLoading.value = true;
+    try {
+        const res = await api.searchEntities({
+            type: TYPE_TO_PB[type.value],
+            query: q,
+        });
+        // Ignore results from a stale request that resolved out of order.
+        if (seq !== searchSeq) return;
+        entities.value = res.entities;
+    } catch (err) {
+        if (seq !== searchSeq) return;
+        console.error("Entity search failed", err);
+        entities.value = [];
+    } finally {
+        if (seq === searchSeq) entityLoading.value = false;
+    }
+}
+
+// Free-text edit: keep the label, drop any stale entity link.
+function onLabelInput(v: string) {
+    emit("update", { label: v, entityId: undefined, entitySource: undefined });
+}
+
+function onEntitySelect(item: ComboboxItem) {
+    const source =
+        entities.value.find((e) => e.id === item.value)?.source ?? "";
+    emit("update", {
+        label: item.label,
+        entityId: item.value,
+        entitySource: source,
+    });
+    entities.value = [];
+}
+
+// Try to auto-resolve just this marker's label. Links it on a confident match;
+// otherwise nudges the user to pick from the suggestions manually.
+const toaster = useDesignToaster();
+const resolving = ref(false);
+async function resolveThis() {
+    const marker = props.marker;
+    if (!marker) return;
+    resolving.value = true;
+    try {
+        const res = await api.resolveReferences({
+            queries: [
+                {
+                    refId: marker.id,
+                    type: TYPE_TO_PB[marker.type],
+                    text: marker.label,
+                },
+            ],
+        });
+        const result = res.results[0];
+        if (result?.resolved && result.entity) {
+            emit("update", {
+                label: result.entity.label,
+                entityId: result.entity.id,
+                entitySource: result.entity.source,
+            });
+        } else {
+            toaster.create({
+                title: t("markers.resolve.noMatch"),
+                type: "warning",
+            });
+        }
+    } catch (err) {
+        console.error("Resolve failed", err);
+        toaster.create({ title: t("markers.resolve.error"), type: "error" });
+    } finally {
+        resolving.value = false;
+    }
+}
 const note = computed({
     get: () => props.marker?.note ?? "",
     set: (v) => emit("update", { note: v }),
 });
 
+const unresolved = computed(
+    () => !!props.marker && isMarkerUnresolved(props.marker),
+);
+
 const startStr = ref("");
 const endStr = ref("");
 watch(
@@ -99,10 +218,9 @@ const duration = computed(() => {
     return Math.max(0, props.marker.end - props.marker.start);
 });
 
-const labelInput = useTemplateRef("labelInput");
+const labelInput = useTemplateRef<HTMLElement>("labelInput");
 function focusLabel() {
-    const root = labelInput.value?.$el as HTMLElement | undefined;
-    root?.querySelector("input")?.focus();
+    labelInput.value?.querySelector("input")?.focus();
 }
 defineExpose({ focusLabel });
 </script>
@@ -142,12 +260,59 @@ defineExpose({ focusLabel });
             </div>
         </div>
 
-        <DesignInput
-            ref="labelInput"
-            v-model="label"
-            :label="t('markers.editor.label')"
-            :placeholder="t('markers.editor.labelPlaceholder')"
-        />
+        <div ref="labelInput">
+            <DesignCombobox
+                v-if="type === 'bible-verse'"
+                :model-value="label"
+                :items="entityItems"
+                :loading="entityLoading"
+                :field-label="t('markers.editor.label')"
+                :placeholder="t('markers.editor.biblePlaceholder')"
+                :empty-text="t('markers.editor.bibleEmpty')"
+                leading-icon="tabler:book-2"
+                @update:model-value="onLabelInput"
+                @search="onEntitySearch"
+                @select="onEntitySelect"
+            >
+                <template #trailing>
+                    <DesignTooltip
+                        v-if="unresolved && !entityLoading"
+                        :content="t('markers.resolve.one')"
+                    >
+                        <button
+                            type="button"
+                            :disabled="resolving"
+                            class="ds-focus-ring text-text-muted hover:text-text-default flex items-center justify-center rounded-md p-1 transition-colors disabled:opacity-50"
+                            @mousedown.prevent
+                            @click.stop="resolveThis"
+                        >
+                            <Icon
+                                :name="
+                                    resolving
+                                        ? 'tabler:loader-2'
+                                        : 'tabler:wand'
+                                "
+                                class="size-4"
+                                :class="{ 'animate-spin': resolving }"
+                            />
+                        </button>
+                    </DesignTooltip>
+                </template>
+            </DesignCombobox>
+            <DesignInput
+                v-else
+                v-model="label"
+                :label="t('markers.editor.label')"
+                :placeholder="t('markers.editor.labelPlaceholder')"
+            />
+            <p
+                v-if="unresolved"
+                class="text-caption-1 text-semantic-warning mt-1.5 flex items-center gap-1"
+            >
+                <Icon name="tabler:alert-triangle" class="size-3.5 shrink-0" />
+                {{ t("markers.review.hint") }}
+            </p>
+        </div>
 
         <DesignTextarea
             v-model="note"
diff --git a/frontend/app/components/markers/MarkersListItem.vue b/frontend/app/components/markers/MarkersListItem.vue
index b42dc0a..ee99a7f 100644
--- a/frontend/app/components/markers/MarkersListItem.vue
+++ b/frontend/app/components/markers/MarkersListItem.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { formatMarkerDuration, markerTypeMeta } from "~/utils/markers";
+import {
+    formatMarkerDuration,
+    isMarkerUnresolved,
+    markerTypeMeta,
+} from "~/utils/markers";
 import type { Marker } from "~/utils/markers";
 
 const props = defineProps<{
@@ -37,6 +41,8 @@ watch(
 const displayLabel = computed(
     () => props.marker.label || t(`markers.types.${props.marker.type}`),
 );
+
+const unresolved = computed(() => isMarkerUnresolved(props.marker));
 </script>
 
 <template>
@@ -62,6 +68,16 @@ const displayLabel = computed(
         <span class="text-body-3 text-text-default flex-1 truncate">
             {{ displayLabel }}
         </span>
+        <DesignTooltip
+            v-if="unresolved"
+            :content="t('markers.review.hint')"
+            placement="top"
+        >
+            <Icon
+                name="tabler:alert-triangle"
+                class="text-semantic-warning size-3.5 shrink-0"
+            />
+        </DesignTooltip>
         <Icon
             v-if="active"
             name="tabler:volume"
diff --git a/frontend/app/composables/useMarkers.ts b/frontend/app/composables/useMarkers.ts
index a86cb96..3ac7839 100644
--- a/frontend/app/composables/useMarkers.ts
+++ b/frontend/app/composables/useMarkers.ts
@@ -9,7 +9,7 @@ import type { Marker, MarkerSource, MarkerType } from "~/utils/markers";
 // locally; `save` submits it. See `backend/cmd/server/markers.go` — the backend
 // is still an in-memory placeholder pending the third-party timing integration.
 
-const TYPE_TO_PB: Record<MarkerType, PbMarkerType> = {
+export const TYPE_TO_PB: Record<MarkerType, PbMarkerType> = {
     "name-super": PbMarkerType.NAME_SUPER,
     "bible-verse": PbMarkerType.BIBLE_VERSE,
     song: PbMarkerType.SONG,
@@ -41,6 +41,8 @@ function fromPb(m: PbMarker): Marker {
         start: m.start,
         end: m.end,
         source: SOURCE_FROM_PB[m.source] ?? "manual",
+        entityId: m.entityId || undefined,
+        entitySource: m.entitySource || undefined,
     };
 }
 
@@ -53,6 +55,8 @@ function toPb(m: Marker) {
         start: m.start,
         end: m.end,
         source: SOURCE_TO_PB[m.source],
+        entityId: m.entityId ?? "",
+        entitySource: m.entitySource ?? "",
     };
 }
 
diff --git a/frontend/app/pages/markers/[id].vue b/frontend/app/pages/markers/[id].vue
index d95de4a..ba2ab84 100644
--- a/frontend/app/pages/markers/[id].vue
+++ b/frontend/app/pages/markers/[id].vue
@@ -3,12 +3,14 @@ import { LayoutGroup, motion } from "motion-v";
 import { onBeforeRouteLeave } from "vue-router";
 import {
     formatMarkerTime,
+    isMarkerUnresolved,
     markerTypeMeta,
     parseMarkers,
     serializeMarkers,
     sortMarkers,
 } from "~/utils/markers";
 import type { Marker, MarkerType } from "~/utils/markers";
+import { TYPE_TO_PB } from "~/composables/useMarkers";
 
 // Seconds the arrow keys jump the playhead.
 const SEEK_STEP_SECONDS = 5;
@@ -219,6 +221,51 @@ async function onImportFile(event: Event) {
     }
 }
 
+// ---- Resolve references -----------------------------------------------------
+// Try to auto-link every unlinked marker with a resolvable label to its
+// canonical entity. Confident matches are linked; the rest stay "for review".
+const resolving = ref(false);
+async function resolveReferences() {
+    const candidates = markers.value.filter(isMarkerUnresolved);
+    if (!candidates.length) return;
+
+    resolving.value = true;
+    try {
+        const res = await api.resolveReferences({
+            queries: candidates.map((m) => ({
+                refId: m.id,
+                type: TYPE_TO_PB[m.type],
+                text: m.label,
+            })),
+        });
+        let linked = 0;
+        for (const r of res.results) {
+            if (!r.resolved || !r.entity) continue;
+            update(r.refId, {
+                label: r.entity.label,
+                entityId: r.entity.id,
+                entitySource: r.entity.source,
+            });
+            linked++;
+        }
+        toaster.create({
+            title: t("markers.resolve.done", { linked }),
+            type: "success",
+        });
+    } catch (err) {
+        console.error("Resolve references failed", err);
+        toaster.create({ title: t("markers.resolve.error"), type: "error" });
+    } finally {
+        resolving.value = false;
+    }
+}
+
+// Count of markers still awaiting a canonical link — gates the resolve button
+// and drives the "for review" indicators.
+const unresolvedCount = computed(
+    () => markers.value.filter(isMarkerUnresolved).length,
+);
+
 // ---- Keyboard shortcuts -----------------------------------------------------
 // Ignore shortcuts while typing in a field or while an Ark widget (select,
 // slider, menu, …) is focused — those consume arrow/space keys themselves.
@@ -329,6 +376,31 @@ useEventListener(window, "beforeunload", (event: BeforeUnloadEvent) => {
                     class="hidden"
                     @change="onImportFile"
                 />
+                <DesignTooltip
+                    :content="t('markers.resolve.action')"
+                    placement="bottom"
+                >
+                    <button
+                        type="button"
+                        :disabled="resolving || !unresolvedCount"
+                        class="ds-focus-ring text-text-muted hover:bg-surface-indent hover:text-text-default relative flex items-center justify-center rounded-lg p-2 transition-colors disabled:pointer-events-none disabled:opacity-40"
+                        @click="resolveReferences"
+                    >
+                        <Icon
+                            :name="
+                                resolving ? 'tabler:loader-2' : 'tabler:wand'
+                            "
+                            class="size-4"
+                            :class="{ 'animate-spin': resolving }"
+                        />
+                        <span
+                            v-if="unresolvedCount"
+                            class="border-semantic-warning bg-surface-default text-semantic-warning absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full border px-1 text-[10px] font-semibold tabular-nums"
+                        >
+                            {{ unresolvedCount }}
+                        </span>
+                    </button>
+                </DesignTooltip>
                 <DesignTooltip
                     :content="t('markers.import')"
                     placement="bottom"
diff --git a/frontend/app/utils/markers.ts b/frontend/app/utils/markers.ts
index 3ea4bbc..b1ba734 100644
--- a/frontend/app/utils/markers.ts
+++ b/frontend/app/utils/markers.ts
@@ -28,6 +28,13 @@ export type Marker = {
     start: number;
     end: number;
     source: MarkerSource;
+    // Canonical entity reference when the label is linked to a known entity (a
+    // bible passage, song, or person) — e.g. the bible ref "Jn 3/16". Empty for
+    // free-text / custom markers; `label` always holds the display text so
+    // linking stays optional enrichment.
+    entityId?: string;
+    // Which registry `entityId` belongs to: "bible" | "songbook" | "people".
+    entitySource?: string;
 };
 
 export type MarkerTypeMeta = {
@@ -81,6 +88,17 @@ export function markerTypeMeta(type: MarkerType): MarkerTypeMeta {
     );
 }
 
+// Marker types whose labels can be linked to a canonical entity via the entity
+// search / resolve backend. Grows as song and people registries come online.
+export const LINKABLE_TYPES: ReadonlySet<MarkerType> = new Set(["bible-verse"]);
+
+// A marker whose type should carry a canonical reference but doesn't yet — it
+// has a label to resolve but no `entityId`. These are surfaced as "for review":
+// auto-resolve couldn't confidently match them, so they need a manual look.
+export function isMarkerUnresolved(m: Marker): boolean {
+    return LINKABLE_TYPES.has(m.type) && !!m.label.trim() && !m.entityId;
+}
+
 // Sort by start time, then end time — stable order for the list and timeline.
 export function sortMarkers(markers: Marker[]): Marker[] {
     return [...markers].sort((a, b) => a.start - b.start || a.end - b.end);
@@ -98,6 +116,10 @@ export function serializeMarkers(vxId: string, markers: Marker[]): string {
     return JSON.stringify(data, null, 2);
 }
 
+// A non-empty string, or undefined — used to coerce optional imported fields.
+const optStr = (v: unknown): string | undefined =>
+    typeof v === "string" && v ? v : undefined;
+
 // Coerce an untrusted imported entry into a valid Marker, filling gaps.
 function normalizeImportedMarker(raw: unknown): Marker {
     const m = (raw ?? {}) as Record<string, unknown>;
@@ -107,13 +129,15 @@ function normalizeImportedMarker(raw: unknown): Marker {
     const start = Math.max(0, Number(m.start) || 0);
     const end = Math.max(start, Number(m.end) || start);
     return {
-        id: typeof m.id === "string" && m.id ? m.id : generateRandomId(),
+        id: optStr(m.id) ?? generateRandomId(),
         type,
         label: typeof m.label === "string" ? m.label : "",
-        note: typeof m.note === "string" && m.note ? m.note : undefined,
+        note: optStr(m.note),
         start,
         end,
         source: m.source === "imported" ? "imported" : "manual",
+        entityId: optStr(m.entityId),
+        entitySource: optStr(m.entitySource),
     };
 }
 
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 513ec90..1873302 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -241,6 +241,16 @@
         "importError": "Couldn't read that markers file",
         "loadError": "Couldn't load markers",
         "retry": "Retry",
+        "resolve": {
+            "action": "Resolve references",
+            "one": "Resolve",
+            "done": "Linked {linked} references",
+            "noMatch": "Couldn't find a confident match — pick it manually",
+            "error": "Couldn't resolve references"
+        },
+        "review": {
+            "hint": "Not linked to a reference yet"
+        },
         "empty": {
             "title": "No markers yet",
             "hint": "Add a marker at the playhead, or press M"
@@ -285,6 +295,8 @@
             "type": "Type",
             "label": "Label",
             "labelPlaceholder": "e.g. John Doe or John 3:16",
+            "biblePlaceholder": "Search a passage, e.g. John 3:16",
+            "bibleEmpty": "No matching passage",
             "note": "Note",
             "notePlaceholder": "Optional note",
             "in": "In",
diff --git a/frontend/locales/nb.json b/frontend/locales/nb.json
index 67a1d8b..6e366d6 100644
--- a/frontend/locales/nb.json
+++ b/frontend/locales/nb.json
@@ -241,6 +241,16 @@
         "importError": "Kunne ikke lese markørfilen",
         "loadError": "Kunne ikke laste markører",
         "retry": "Prøv igjen",
+        "resolve": {
+            "action": "Koble referanser",
+            "one": "Koble",
+            "done": "Koblet {linked} referanser",
+            "noMatch": "Fant ingen sikker match — velg manuelt",
+            "error": "Kunne ikke koble referanser"
+        },
+        "review": {
+            "hint": "Ikke koblet til en referanse ennå"
+        },
         "empty": {
             "title": "Ingen markører ennå",
             "hint": "Legg til en markør ved spillehodet, eller trykk M"
@@ -285,6 +295,8 @@
             "type": "Type",
             "label": "Etikett",
             "labelPlaceholder": "f.eks. Ola Nordmann eller Joh 3:16",
+            "biblePlaceholder": "Søk etter et skriftsted, f.eks. Joh 3:16",
+            "bibleEmpty": "Fant ingen skriftsteder",
             "note": "Notat",
             "notePlaceholder": "Valgfritt notat",
             "in": "Inn",
diff --git a/frontend/src/gen/api/v1/api_pb.ts b/frontend/src/gen/api/v1/api_pb.ts
index 76d9071..d307100 100644
--- a/frontend/src/gen/api/v1/api_pb.ts
+++ b/frontend/src/gen/api/v1/api_pb.ts
@@ -14,7 +14,7 @@ import type { Message } from "@bufbuild/protobuf";
  * Describes the file api/v1/api.proto.
  */
 export const file_api_v1_api: GenFile = /*@__PURE__*/
-  fileDesc("ChBhcGkvdjEvYXBpLnByb3RvEgZhcGkudjEiaAoNQk1NUGVybWlzc2lvbhIRCglsYW5ndWFnZXMYASADKAkSDgoGYWxidW1zGAIgAygJEhAKCHBvZGNhc3RzGAMgAygJEg0KBWFkbWluGAQgASgIEhMKC2ludGVncmF0aW9uGAUgASgIIj0KF1RyYW5zY3JpcHRpb25QZXJtaXNzaW9uEg0KBWFkbWluGAEgASgIEhMKC21lZGlhYmFua2VuGAIgASgIImQKEEV4cG9ydFBlcm1pc3Npb24SFAoMZGVzdGluYXRpb25zGAEgAygJEg0KBWFkbWluGAIgASgIEhYKDnRpbWVkX21ldGFkYXRhGAMgASgIEhMKC2J1bGtfZXhwb3J0GAQgASgIIk4KElZCRXhwb3J0UGVybWlzc2lvbhIUCgxkZXN0aW5hdGlvbnMYASADKAkSDQoFYWRtaW4YAiABKAgSEwoLYnVsa19leHBvcnQYAyABKAgiXgoRQ2FudGVtb1Blcm1pc3Npb24SDwoHcHJldmlldxgBIAEoCBISCgp0cmFuc2NyaWJlGAIgASgIEhEKCXN1YnRpdGxlcxgDIAEoCBIRCglyZWxhdGlvbnMYBCABKAgiIgoPVmF1bHRQZXJtaXNzaW9uEg8KB2VuYWJsZWQYASABKAgitAIKC1Blcm1pc3Npb25zEg0KBWFkbWluGAEgASgIEiIKA2JtbRgCIAEoCzIVLmFwaS52MS5CTU1QZXJtaXNzaW9uEg0KBWVtYWlsGAMgASgJEjYKDXRyYW5zY3JpcHRpb24YBCABKAsyHy5hcGkudjEuVHJhbnNjcmlwdGlvblBlcm1pc3Npb24SKAoGZXhwb3J0GAUgASgLMhguYXBpLnYxLkV4cG9ydFBlcm1pc3Npb24SLQoJdmJfZXhwb3J0GAYgASgLMhouYXBpLnYxLlZCRXhwb3J0UGVybWlzc2lvbhIqCgdjYW50ZW1vGAcgASgLMhkuYXBpLnYxLkNhbnRlbW9QZXJtaXNzaW9uEiYKBXZhdWx0GAggASgLMhcuYXBpLnYxLlZhdWx0UGVybWlzc2lvbiIXChVHZXRQZXJtaXNzaW9uc1JlcXVlc3QiUAoVU2V0UGVybWlzc2lvbnNSZXF1ZXN0Eg0KBWVtYWlsGAEgASgJEigKC3Blcm1pc3Npb25zGAIgASgLMhMuYXBpLnYxLlBlcm1pc3Npb25zIikKGERlbGV0ZVBlcm1pc3Npb25zUmVxdWVzdBINCgVlbWFpbBgBIAEoCSKZAQoPUGVybWlzc2lvbnNMaXN0Ej0KC3Blcm1pc3Npb25zGAEgAygLMiguYXBpLnYxLlBlcm1pc3Npb25zTGlzdC5QZXJtaXNzaW9uc0VudHJ5GkcKEFBlcm1pc3Npb25zRW50cnkSCwoDa2V5GAEgASgJEiIKBXZhbHVlGAIgASgLMhMuYXBpLnYxLlBlcm1pc3Npb25zOgI4ASImCgdCTU1ZZWFyEgwKBHllYXIYASABKA0SDQoFY291bnQYAiABKA0iggEKEEdldFllYXJzUmVzcG9uc2USMAoEZGF0YRgBIAMoCzIiLmFwaS52MS5HZXRZZWFyc1Jlc3BvbnNlLkRhdGFFbnRyeRo8CglEYXRhRW50cnkSCwoDa2V5GAEgASgNEh4KBXZhbHVlGAIgASgLMg8uYXBpLnYxLkJNTVllYXI6AjgBIj4KD0dldFllYXJzUmVxdWVzdBIrCgtlbnZpcm9ubWVudBgBIAEoDjIWLmFwaS52MS5CbW1FbnZpcm9ubWVudCJNChBHZXRBbGJ1bXNSZXF1ZXN0EgwKBHllYXIYASABKA0SKwoLZW52aXJvbm1lbnQYAiABKA4yFi5hcGkudjEuQm1tRW52aXJvbm1lbnQiRAoFQWxidW0SCgoCaWQYASABKAkSDQoFdGl0bGUYAiABKAkSDQoFY292ZXIYBCABKAkSEQoJbGFuZ3VhZ2VzGAUgAygJIisKCkFsYnVtc0xpc3QSHQoGYWxidW1zGAEgAygLMg0uYXBpLnYxLkFsYnVtIlYKFUdldEFsYnVtVHJhY2tzUmVxdWVzdBIQCghhbGJ1bV9pZBgBIAEoCRIrCgtlbnZpcm9ubWVudBgCIAEoDjIWLmFwaS52MS5CbW1FbnZpcm9ubWVudCJqChdHZXRQb2RjYXN0VHJhY2tzUmVxdWVzdBITCgtwb2RjYXN0X3RhZxgBIAEoCRINCgVsaW1pdBgCIAEoDRIrCgtlbnZpcm9ubWVudBgDIAEoDjIWLmFwaS52MS5CbW1FbnZpcm9ubWVudCJLChxHZXRBdmFpbGFibGVMYW5ndWFnZXNSZXF1ZXN0EisKC2Vudmlyb25tZW50GAEgASgOMhYuYXBpLnYxLkJtbUVudmlyb25tZW50IsgBCghCTU1UcmFjaxIKCgJpZBgBIAEoCRINCgV0aXRsZRgCIAEoCRIvCgtwdWJsaXNoZWRBdBgDIAEoCzIaLmdvb2dsZS5wcm90b2J1Zi5UaW1lc3RhbXASJwoJbGFuZ3VhZ2VzGAQgASgLMhQuYXBpLnYxLkxhbmd1YWdlTGlzdBIsCg50cmFuc2NyaXB0aW9ucxgFIAEoCzIULmFwaS52MS5MYW5ndWFnZUxpc3QSGQoRaGFzVHJhbnNjcmlwdGlvbnMYBiABKAgiLgoKVHJhY2tzTGlzdBIgCgZ0cmFja3MYASADKAsyEC5hcGkudjEuQk1NVHJhY2siMwoMTGFuZ3VhZ2VMaXN0EiMKCUxhbmd1YWdlcxgBIAMoCzIQLmFwaS52MS5MYW5ndWFnZSIrCghMYW5ndWFnZRIMCgRjb2RlGAEgASgJEhEKCWljb25fZmlsZRgDIAEoCSImChZHZXRUcmFuc2NyaXB0aW9uUmVxZXN0EgwKBFZYSUQYASABKAkiQQoNVHJhbnNjcmlwdGlvbhIMCgR0ZXh0GAEgASgJEiIKCHNlZ21lbnRzGAIgAygLMhAuYXBpLnYxLlNlZ21lbnRzIu0BCghTZWdtZW50cxIKCgJpZBgBIAEoARIMCgRzZWVrGAIgASgFEg0KBXN0YXJ0GAMgASgBEgsKA2VuZBgEIAEoARIMCgR0ZXh0GAUgASgJEg4KBnRva2VucxgGIAMoBRITCgt0ZW1wZXJhdHVyZRgHIAEoARITCgthdmdfbG9ncHJvYhgIIAEoARIZChFjb21wcmVzc2lvbl9yYXRpbxgJIAEoARIWCg5ub19zcGVlY2hfcHJvYhgKIAEoARISCgpjb25maWRlbmNlGAsgASgBEhwKBXdvcmRzGAwgAygLMg0uYXBpLnYxLldvcmRzIkUKBVdvcmRzEgwKBHRleHQYASABKAkSDQoFc3RhcnQYAiABKAESCwoDZW5kGAMgASgBEhIKCmNvbmZpZGVuY2UYBCABKAEiIQoRR2V0UHJldmlld1JlcXVlc3QSDAoEVlhJRBgBIAEoCSIWCgdQcmV2aWV3EgsKA3VybBgBIAEoCSJrChpHZXRCTU1UcmFuc2NyaXB0aW9uUmVxdWVzdBIOCgZibW1faWQYASABKAkSEAoIbGFuZ3VhZ2UYAiABKAkSKwoLZW52aXJvbm1lbnQYAyABKA4yFi5hcGkudjEuQm1tRW52aXJvbm1lbnQiWAoaU3VibWl0VHJhbnNjcmlwdGlvblJlcXVlc3QSDAoEVlhJRBgBIAEoCRIsCg10cmFuc2NyaXB0aW9uGAIgASgLMhUuYXBpLnYxLlRyYW5zY3JpcHRpb24iSQoSU3VibWl0U2hvcnRSZXF1ZXN0EgwKBFZYSUQYASABKAkSEQoJSW5TZWNvbmRzGAIgASgBEhIKCk91dFNlY29uZHMYAyABKAEiMQoQRXhwb3J0UmVzb2x1dGlvbhINCgV3aWR0aBgBIAEoBRIOCgZoZWlnaHQYAiABKAUiRgoORXhwb3J0TGFuZ3VhZ2USDAoEY29kZRgBIAEoCRIMCgRuYW1lGAIgASgJEgsKA211MRgDIAEoCBILCgNtdTIYBCABKAgiHgoNRXhwb3J0U3ViY2xpcBINCgV0aXRsZRgBIAEoCSImChZHZXRFeHBvcnRDb25maWdSZXF1ZXN0EgwKBFZYSUQYASABKAki1gIKF0dldEV4cG9ydENvbmZpZ1Jlc3BvbnNlEgwKBFZYSUQYASABKAkSDQoFdGl0bGUYAiABKAkSFAoMZGVzdGluYXRpb25zGAMgAygJEhUKDWF1ZGlvX3NvdXJjZXMYBCADKAkSHQoVc2VsZWN0ZWRfYXVkaW9fc291cmNlGAUgASgJEikKCWxhbmd1YWdlcxgGIAMoCzIWLmFwaS52MS5FeHBvcnRMYW5ndWFnZRIaChJzZWxlY3RlZF9sYW5ndWFnZXMYByADKAkSLQoLcmVzb2x1dGlvbnMYCCADKAsyGC5hcGkudjEuRXhwb3J0UmVzb2x1dGlvbhIQCghvdmVybGF5cxgJIAMoCRInCghzdWJjbGlwcxgKIAMoCzIVLmFwaS52MS5FeHBvcnRTdWJjbGlwEiEKGWNhbl9leHBvcnRfdGltZWRfbWV0YWRhdGEYCyABKAgiUAoZRXhwb3J0UmVzb2x1dGlvblNlbGVjdGlvbhINCgV3aWR0aBgBIAEoBRIOCgZoZWlnaHQYAiABKAUSFAoMZG93bmxvYWRhYmxlGAMgASgIIoMCChJTdGFydEV4cG9ydFJlcXVlc3QSDAoEVlhJRBgBIAEoCRIUCgxkZXN0aW5hdGlvbnMYAiADKAkSFAoMYXVkaW9fc291cmNlGAMgASgJEhEKCWxhbmd1YWdlcxgEIAMoCRI2CgtyZXNvbHV0aW9ucxgFIAMoCzIhLmFwaS52MS5FeHBvcnRSZXNvbHV0aW9uU2VsZWN0aW9uEg8KB292ZXJsYXkYBiABKAkSFQoNd2l0aF9jaGFwdGVycxgHIAEoCBIWCg5pZ25vcmVfc2lsZW5jZRgIIAEoCBIWCg5leHBvcnRfYWlfc3VicxgJIAEoCBIQCghzdWJjbGlwcxgKIAMoCSIrChNTdGFydEV4cG9ydFJlc3BvbnNlEhQKDHdvcmtmbG93X2lkcxgBIAMoCSIqChpFeHBvcnRUaW1lZE1ldGFkYXRhUmVxdWVzdBIMCgRWWElEGAEgASgJIigKGEdldFZCRXhwb3J0Q29uZmlnUmVxdWVzdBIMCgRWWElEGAEgASgJIoABChlHZXRWQkV4cG9ydENvbmZpZ1Jlc3BvbnNlEgwKBFZYSUQYASABKAkSDQoFdGl0bGUYAiABKAkSFAoMZGVzdGluYXRpb25zGAMgAygJEhcKD3N1YnRpdGxlX3NoYXBlcxgEIAMoCRIXCg9zdWJ0aXRsZV9zdHlsZXMYBSADKAkiagoUU3RhcnRWQkV4cG9ydFJlcXVlc3QSDAoEVlhJRBgBIAEoCRIUCgxkZXN0aW5hdGlvbnMYAiADKAkSFgoOc3VidGl0bGVfc2hhcGUYAyABKAkSFgoOc3VidGl0bGVfc3R5bGUYBCABKAkiLAoVU3RhcnRWQkV4cG9ydFJlc3BvbnNlEhMKC3dvcmtmbG93X2lkGAEgASgJIjQKGkV4cG9ydERlc3RpbmF0aW9uc1Jlc3BvbnNlEgoKAnZ4GAEgAygJEgoKAnZiGAIgAygJIiUKFFJlc29sdmVBc3NldHNSZXF1ZXN0Eg0KBVZYSURzGAEgAygJIjsKDVJlc29sdmVkQXNzZXQSDAoEVlhJRBgBIAEoCRINCgV0aXRsZRgCIAEoCRINCgVmb3VuZBgDIAEoCCI+ChVSZXNvbHZlQXNzZXRzUmVzcG9uc2USJQoGYXNzZXRzGAEgAygLMhUuYXBpLnYxLlJlc29sdmVkQXNzZXQiUgobVHJpZ2dlckNhbnRlbW9BY3Rpb25SZXF1ZXN0EgwKBFZYSUQYASABKAkSJQoGYWN0aW9uGAIgASgOMhUuYXBpLnYxLkNhbnRlbW9BY3Rpb24iRgoSVmF1bHRTZWFyY2hSZXF1ZXN0Eg0KBXF1ZXJ5GAEgASgJEhMKC21lZGlhX3R5cGVzGAIgAygJEgwKBHBhZ2UYAyABKAUimAEKCVZhdWx0SXRlbRIMCgRWWElEGAEgASgJEg0KBXRpdGxlGAIgASgJEhIKCm1lZGlhX3R5cGUYAyABKAkSDQoFYWRkZWQYBCABKAkSDgoGZm9ybWF0GAUgASgJEgwKBHNpemUYBiABKAkSGAoQZHVyYXRpb25fc2Vjb25kcxgHIAEoBRITCgtoYXNfcHJldmlldxgIIAEoCCIvCgpWYXVsdEZhY2V0EhIKCm1lZGlhX3R5cGUYASABKAkSDQoFY291bnQYAiABKAUikAEKE1ZhdWx0U2VhcmNoUmVzcG9uc2USIAoFaXRlbXMYASADKAsyES5hcGkudjEuVmF1bHRJdGVtEhIKCnRvdGFsX2hpdHMYAiABKAUSDAoEcGFnZRgDIAEoBRIRCglwYWdlX3NpemUYBCABKAUSIgoGZmFjZXRzGAUgAygLMhIuYXBpLnYxLlZhdWx0RmFjZXQiIwoTR2V0VmF1bHRJdGVtUmVxdWVzdBIMCgRWWElEGAEgASgJIjcKFEdldFZhdWx0SXRlbVJlc3BvbnNlEh8KBGl0ZW0YASABKAsyES5hcGkudjEuVmF1bHRJdGVtIpUBCgZNYXJrZXISCgoCaWQYASABKAkSIAoEdHlwZRgCIAEoDjISLmFwaS52MS5NYXJrZXJUeXBlEg0KBWxhYmVsGAMgASgJEgwKBG5vdGUYBCABKAkSDQoFc3RhcnQYBSABKAESCwoDZW5kGAYgASgBEiQKBnNvdXJjZRgHIAEoDjIULmFwaS52MS5NYXJrZXJTb3VyY2UiIQoRR2V0TWFya2Vyc1JlcXVlc3QSDAoEVlhJRBgBIAEoCSI1ChJHZXRNYXJrZXJzUmVzcG9uc2USHwoHbWFya2VycxgBIAMoCzIOLmFwaS52MS5NYXJrZXIiRQoUU3VibWl0TWFya2Vyc1JlcXVlc3QSDAoEVlhJRBgBIAEoCRIfCgdtYXJrZXJzGAIgAygLMg4uYXBpLnYxLk1hcmtlcioxCg5CbW1FbnZpcm9ubWVudBIOCgpQcm9kdWN0aW9uEAASDwoLSW50ZWdyYXRpb24QASq6AQoNQ2FudGVtb0FjdGlvbhIeChpDQU5URU1PX0FDVElPTl9VTlNQRUNJRklFRBAAEhoKFkNBTlRFTU9fQUNUSU9OX1BSRVZJRVcQARIdChlDQU5URU1PX0FDVElPTl9UUkFOU0NSSUJFEAISKQolQ0FOVEVNT19BQ1RJT05fU1VCVElUTEVfRlJPTV9TVUJUUkFOUxADEiMKH0NBTlRFTU9fQUNUSU9OX1VQREFURV9SRUxBVElPTlMQBCqpAQoKTWFya2VyVHlwZRIbChdNQVJLRVJfVFlQRV9VTlNQRUNJRklFRBAAEhoKFk1BUktFUl9UWVBFX05BTUVfU1VQRVIQARIbChdNQVJLRVJfVFlQRV9CSUJMRV9WRVJTRRACEhQKEE1BUktFUl9UWVBFX1NPTkcQAxIXChNNQVJLRVJfVFlQRV9DSEFQVEVSEAQSFgoSTUFSS0VSX1RZUEVfQ1VTVE9NEAUqYwoMTWFya2VyU291cmNlEh0KGU1BUktFUl9TT1VSQ0VfVU5TUEVDSUZJRUQQABIaChZNQVJLRVJfU09VUkNFX0lNUE9SVEVEEAESGAoUTUFSS0VSX1NPVVJDRV9NQU5VQUwQAjLpDgoKQVBJU2VydmljZRI1Cg5HZXRQZXJtaXNzaW9ucxIMLmFwaS52MS5Wb2lkGhMuYXBpLnYxLlBlcm1pc3Npb25zIgASQgoRVXBkYXRlUGVybWlzc2lvbnMSHS5hcGkudjEuU2V0UGVybWlzc2lvbnNSZXF1ZXN0GgwuYXBpLnYxLlZvaWQiABJFChFEZWxldGVQZXJtaXNzaW9ucxIgLmFwaS52MS5EZWxldGVQZXJtaXNzaW9uc1JlcXVlc3QaDC5hcGkudjEuVm9pZCIAEjoKD0xpc3RQZXJtaXNzaW9ucxIMLmFwaS52MS5Wb2lkGhcuYXBpLnYxLlBlcm1pc3Npb25zTGlzdCIAEksKEEdldFRyYW5zY3JpcHRpb24SHi5hcGkudjEuR2V0VHJhbnNjcmlwdGlvblJlcWVzdBoVLmFwaS52MS5UcmFuc2NyaXB0aW9uIgASOgoKR2V0UHJldmlldxIZLmFwaS52MS5HZXRQcmV2aWV3UmVxdWVzdBoPLmFwaS52MS5QcmV2aWV3IgASSQoTU3VibWl0VHJhbnNjcmlwdGlvbhIiLmFwaS52MS5TdWJtaXRUcmFuc2NyaXB0aW9uUmVxdWVzdBoMLmFwaS52MS5Wb2lkIgASPwoIR2V0WWVhcnMSFy5hcGkudjEuR2V0WWVhcnNSZXF1ZXN0GhguYXBpLnYxLkdldFllYXJzUmVzcG9uc2UiABI7CglHZXRBbGJ1bXMSGC5hcGkudjEuR2V0QWxidW1zUmVxdWVzdBoSLmFwaS52MS5BbGJ1bXNMaXN0IgASRQoOR2V0QWxidW1UcmFja3MSHS5hcGkudjEuR2V0QWxidW1UcmFja3NSZXF1ZXN0GhIuYXBpLnYxLlRyYWNrc0xpc3QiABJJChBHZXRQb2RjYXN0VHJhY2tzEh8uYXBpLnYxLkdldFBvZGNhc3RUcmFja3NSZXF1ZXN0GhIuYXBpLnYxLlRyYWNrc0xpc3QiABJMCgxHZXRMYW5ndWFnZXMSJC5hcGkudjEuR2V0QXZhaWxhYmxlTGFuZ3VhZ2VzUmVxdWVzdBoULmFwaS52MS5MYW5ndWFnZUxpc3QiABJSChNHZXRCTU1UcmFuc2NyaXB0aW9uEiIuYXBpLnYxLkdldEJNTVRyYW5zY3JpcHRpb25SZXF1ZXN0GhUuYXBpLnYxLlRyYW5zY3JpcHRpb24iABI5CgtTdWJtaXRTaG9ydBIaLmFwaS52MS5TdWJtaXRTaG9ydFJlcXVlc3QaDC5hcGkudjEuVm9pZCIAElQKD0dldEV4cG9ydENvbmZpZxIeLmFwaS52MS5HZXRFeHBvcnRDb25maWdSZXF1ZXN0Gh8uYXBpLnYxLkdldEV4cG9ydENvbmZpZ1Jlc3BvbnNlIgASSAoLU3RhcnRFeHBvcnQSGi5hcGkudjEuU3RhcnRFeHBvcnRSZXF1ZXN0GhsuYXBpLnYxLlN0YXJ0RXhwb3J0UmVzcG9uc2UiABJJChNFeHBvcnRUaW1lZE1ldGFkYXRhEiIuYXBpLnYxLkV4cG9ydFRpbWVkTWV0YWRhdGFSZXF1ZXN0GgwuYXBpLnYxLlZvaWQiABJOCg1SZXNvbHZlQXNzZXRzEhwuYXBpLnYxLlJlc29sdmVBc3NldHNSZXF1ZXN0Gh0uYXBpLnYxLlJlc29sdmVBc3NldHNSZXNwb25zZSIAEloKEUdldFZCRXhwb3J0Q29uZmlnEiAuYXBpLnYxLkdldFZCRXhwb3J0Q29uZmlnUmVxdWVzdBohLmFwaS52MS5HZXRWQkV4cG9ydENvbmZpZ1Jlc3BvbnNlIgASTgoNU3RhcnRWQkV4cG9ydBIcLmFwaS52MS5TdGFydFZCRXhwb3J0UmVxdWVzdBodLmFwaS52MS5TdGFydFZCRXhwb3J0UmVzcG9uc2UiABJLChVHZXRFeHBvcnREZXN0aW5hdGlvbnMSDC5hcGkudjEuVm9pZBoiLmFwaS52MS5FeHBvcnREZXN0aW5hdGlvbnNSZXNwb25zZSIAEksKFFRyaWdnZXJDYW50ZW1vQWN0aW9uEiMuYXBpLnYxLlRyaWdnZXJDYW50ZW1vQWN0aW9uUmVxdWVzdBoMLmFwaS52MS5Wb2lkIgASSAoLVmF1bHRTZWFyY2gSGi5hcGkudjEuVmF1bHRTZWFyY2hSZXF1ZXN0GhsuYXBpLnYxLlZhdWx0U2VhcmNoUmVzcG9uc2UiABJLCgxHZXRWYXVsdEl0ZW0SGy5hcGkudjEuR2V0VmF1bHRJdGVtUmVxdWVzdBocLmFwaS52MS5HZXRWYXVsdEl0ZW1SZXNwb25zZSIAEkUKCkdldE1hcmtlcnMSGS5hcGkudjEuR2V0TWFya2Vyc1JlcXVlc3QaGi5hcGkudjEuR2V0TWFya2Vyc1Jlc3BvbnNlIgASPQoNU3VibWl0TWFya2VycxIcLmFwaS52MS5TdWJtaXRNYXJrZXJzUmVxdWVzdBoMLmFwaS52MS5Wb2lkIgBCHlocYmNjLW1lZGlhLXRvb2xzL2FwaS92MTthcGl2MWIGcHJvdG8z", [file_google_protobuf_timestamp, file_api_v1_common]);
+  fileDesc("ChBhcGkvdjEvYXBpLnByb3RvEgZhcGkudjEiaAoNQk1NUGVybWlzc2lvbhIRCglsYW5ndWFnZXMYASADKAkSDgoGYWxidW1zGAIgAygJEhAKCHBvZGNhc3RzGAMgAygJEg0KBWFkbWluGAQgASgIEhMKC2ludGVncmF0aW9uGAUgASgIIj0KF1RyYW5zY3JpcHRpb25QZXJtaXNzaW9uEg0KBWFkbWluGAEgASgIEhMKC21lZGlhYmFua2VuGAIgASgIImQKEEV4cG9ydFBlcm1pc3Npb24SFAoMZGVzdGluYXRpb25zGAEgAygJEg0KBWFkbWluGAIgASgIEhYKDnRpbWVkX21ldGFkYXRhGAMgASgIEhMKC2J1bGtfZXhwb3J0GAQgASgIIk4KElZCRXhwb3J0UGVybWlzc2lvbhIUCgxkZXN0aW5hdGlvbnMYASADKAkSDQoFYWRtaW4YAiABKAgSEwoLYnVsa19leHBvcnQYAyABKAgiXgoRQ2FudGVtb1Blcm1pc3Npb24SDwoHcHJldmlldxgBIAEoCBISCgp0cmFuc2NyaWJlGAIgASgIEhEKCXN1YnRpdGxlcxgDIAEoCBIRCglyZWxhdGlvbnMYBCABKAgiIgoPVmF1bHRQZXJtaXNzaW9uEg8KB2VuYWJsZWQYASABKAgitAIKC1Blcm1pc3Npb25zEg0KBWFkbWluGAEgASgIEiIKA2JtbRgCIAEoCzIVLmFwaS52MS5CTU1QZXJtaXNzaW9uEg0KBWVtYWlsGAMgASgJEjYKDXRyYW5zY3JpcHRpb24YBCABKAsyHy5hcGkudjEuVHJhbnNjcmlwdGlvblBlcm1pc3Npb24SKAoGZXhwb3J0GAUgASgLMhguYXBpLnYxLkV4cG9ydFBlcm1pc3Npb24SLQoJdmJfZXhwb3J0GAYgASgLMhouYXBpLnYxLlZCRXhwb3J0UGVybWlzc2lvbhIqCgdjYW50ZW1vGAcgASgLMhkuYXBpLnYxLkNhbnRlbW9QZXJtaXNzaW9uEiYKBXZhdWx0GAggASgLMhcuYXBpLnYxLlZhdWx0UGVybWlzc2lvbiIXChVHZXRQZXJtaXNzaW9uc1JlcXVlc3QiUAoVU2V0UGVybWlzc2lvbnNSZXF1ZXN0Eg0KBWVtYWlsGAEgASgJEigKC3Blcm1pc3Npb25zGAIgASgLMhMuYXBpLnYxLlBlcm1pc3Npb25zIikKGERlbGV0ZVBlcm1pc3Npb25zUmVxdWVzdBINCgVlbWFpbBgBIAEoCSKZAQoPUGVybWlzc2lvbnNMaXN0Ej0KC3Blcm1pc3Npb25zGAEgAygLMiguYXBpLnYxLlBlcm1pc3Npb25zTGlzdC5QZXJtaXNzaW9uc0VudHJ5GkcKEFBlcm1pc3Npb25zRW50cnkSCwoDa2V5GAEgASgJEiIKBXZhbHVlGAIgASgLMhMuYXBpLnYxLlBlcm1pc3Npb25zOgI4ASImCgdCTU1ZZWFyEgwKBHllYXIYASABKA0SDQoFY291bnQYAiABKA0iggEKEEdldFllYXJzUmVzcG9uc2USMAoEZGF0YRgBIAMoCzIiLmFwaS52MS5HZXRZZWFyc1Jlc3BvbnNlLkRhdGFFbnRyeRo8CglEYXRhRW50cnkSCwoDa2V5GAEgASgNEh4KBXZhbHVlGAIgASgLMg8uYXBpLnYxLkJNTVllYXI6AjgBIj4KD0dldFllYXJzUmVxdWVzdBIrCgtlbnZpcm9ubWVudBgBIAEoDjIWLmFwaS52MS5CbW1FbnZpcm9ubWVudCJNChBHZXRBbGJ1bXNSZXF1ZXN0EgwKBHllYXIYASABKA0SKwoLZW52aXJvbm1lbnQYAiABKA4yFi5hcGkudjEuQm1tRW52aXJvbm1lbnQiRAoFQWxidW0SCgoCaWQYASABKAkSDQoFdGl0bGUYAiABKAkSDQoFY292ZXIYBCABKAkSEQoJbGFuZ3VhZ2VzGAUgAygJIisKCkFsYnVtc0xpc3QSHQoGYWxidW1zGAEgAygLMg0uYXBpLnYxLkFsYnVtIlYKFUdldEFsYnVtVHJhY2tzUmVxdWVzdBIQCghhbGJ1bV9pZBgBIAEoCRIrCgtlbnZpcm9ubWVudBgCIAEoDjIWLmFwaS52MS5CbW1FbnZpcm9ubWVudCJqChdHZXRQb2RjYXN0VHJhY2tzUmVxdWVzdBITCgtwb2RjYXN0X3RhZxgBIAEoCRINCgVsaW1pdBgCIAEoDRIrCgtlbnZpcm9ubWVudBgDIAEoDjIWLmFwaS52MS5CbW1FbnZpcm9ubWVudCJLChxHZXRBdmFpbGFibGVMYW5ndWFnZXNSZXF1ZXN0EisKC2Vudmlyb25tZW50GAEgASgOMhYuYXBpLnYxLkJtbUVudmlyb25tZW50IsgBCghCTU1UcmFjaxIKCgJpZBgBIAEoCRINCgV0aXRsZRgCIAEoCRIvCgtwdWJsaXNoZWRBdBgDIAEoCzIaLmdvb2dsZS5wcm90b2J1Zi5UaW1lc3RhbXASJwoJbGFuZ3VhZ2VzGAQgASgLMhQuYXBpLnYxLkxhbmd1YWdlTGlzdBIsCg50cmFuc2NyaXB0aW9ucxgFIAEoCzIULmFwaS52MS5MYW5ndWFnZUxpc3QSGQoRaGFzVHJhbnNjcmlwdGlvbnMYBiABKAgiLgoKVHJhY2tzTGlzdBIgCgZ0cmFja3MYASADKAsyEC5hcGkudjEuQk1NVHJhY2siMwoMTGFuZ3VhZ2VMaXN0EiMKCUxhbmd1YWdlcxgBIAMoCzIQLmFwaS52MS5MYW5ndWFnZSIrCghMYW5ndWFnZRIMCgRjb2RlGAEgASgJEhEKCWljb25fZmlsZRgDIAEoCSImChZHZXRUcmFuc2NyaXB0aW9uUmVxZXN0EgwKBFZYSUQYASABKAkiQQoNVHJhbnNjcmlwdGlvbhIMCgR0ZXh0GAEgASgJEiIKCHNlZ21lbnRzGAIgAygLMhAuYXBpLnYxLlNlZ21lbnRzIu0BCghTZWdtZW50cxIKCgJpZBgBIAEoARIMCgRzZWVrGAIgASgFEg0KBXN0YXJ0GAMgASgBEgsKA2VuZBgEIAEoARIMCgR0ZXh0GAUgASgJEg4KBnRva2VucxgGIAMoBRITCgt0ZW1wZXJhdHVyZRgHIAEoARITCgthdmdfbG9ncHJvYhgIIAEoARIZChFjb21wcmVzc2lvbl9yYXRpbxgJIAEoARIWCg5ub19zcGVlY2hfcHJvYhgKIAEoARISCgpjb25maWRlbmNlGAsgASgBEhwKBXdvcmRzGAwgAygLMg0uYXBpLnYxLldvcmRzIkUKBVdvcmRzEgwKBHRleHQYASABKAkSDQoFc3RhcnQYAiABKAESCwoDZW5kGAMgASgBEhIKCmNvbmZpZGVuY2UYBCABKAEiIQoRR2V0UHJldmlld1JlcXVlc3QSDAoEVlhJRBgBIAEoCSIWCgdQcmV2aWV3EgsKA3VybBgBIAEoCSJrChpHZXRCTU1UcmFuc2NyaXB0aW9uUmVxdWVzdBIOCgZibW1faWQYASABKAkSEAoIbGFuZ3VhZ2UYAiABKAkSKwoLZW52aXJvbm1lbnQYAyABKA4yFi5hcGkudjEuQm1tRW52aXJvbm1lbnQiWAoaU3VibWl0VHJhbnNjcmlwdGlvblJlcXVlc3QSDAoEVlhJRBgBIAEoCRIsCg10cmFuc2NyaXB0aW9uGAIgASgLMhUuYXBpLnYxLlRyYW5zY3JpcHRpb24iSQoSU3VibWl0U2hvcnRSZXF1ZXN0EgwKBFZYSUQYASABKAkSEQoJSW5TZWNvbmRzGAIgASgBEhIKCk91dFNlY29uZHMYAyABKAEiMQoQRXhwb3J0UmVzb2x1dGlvbhINCgV3aWR0aBgBIAEoBRIOCgZoZWlnaHQYAiABKAUiRgoORXhwb3J0TGFuZ3VhZ2USDAoEY29kZRgBIAEoCRIMCgRuYW1lGAIgASgJEgsKA211MRgDIAEoCBILCgNtdTIYBCABKAgiHgoNRXhwb3J0U3ViY2xpcBINCgV0aXRsZRgBIAEoCSImChZHZXRFeHBvcnRDb25maWdSZXF1ZXN0EgwKBFZYSUQYASABKAki1gIKF0dldEV4cG9ydENvbmZpZ1Jlc3BvbnNlEgwKBFZYSUQYASABKAkSDQoFdGl0bGUYAiABKAkSFAoMZGVzdGluYXRpb25zGAMgAygJEhUKDWF1ZGlvX3NvdXJjZXMYBCADKAkSHQoVc2VsZWN0ZWRfYXVkaW9fc291cmNlGAUgASgJEikKCWxhbmd1YWdlcxgGIAMoCzIWLmFwaS52MS5FeHBvcnRMYW5ndWFnZRIaChJzZWxlY3RlZF9sYW5ndWFnZXMYByADKAkSLQoLcmVzb2x1dGlvbnMYCCADKAsyGC5hcGkudjEuRXhwb3J0UmVzb2x1dGlvbhIQCghvdmVybGF5cxgJIAMoCRInCghzdWJjbGlwcxgKIAMoCzIVLmFwaS52MS5FeHBvcnRTdWJjbGlwEiEKGWNhbl9leHBvcnRfdGltZWRfbWV0YWRhdGEYCyABKAgiUAoZRXhwb3J0UmVzb2x1dGlvblNlbGVjdGlvbhINCgV3aWR0aBgBIAEoBRIOCgZoZWlnaHQYAiABKAUSFAoMZG93bmxvYWRhYmxlGAMgASgIIoMCChJTdGFydEV4cG9ydFJlcXVlc3QSDAoEVlhJRBgBIAEoCRIUCgxkZXN0aW5hdGlvbnMYAiADKAkSFAoMYXVkaW9fc291cmNlGAMgASgJEhEKCWxhbmd1YWdlcxgEIAMoCRI2CgtyZXNvbHV0aW9ucxgFIAMoCzIhLmFwaS52MS5FeHBvcnRSZXNvbHV0aW9uU2VsZWN0aW9uEg8KB292ZXJsYXkYBiABKAkSFQoNd2l0aF9jaGFwdGVycxgHIAEoCBIWCg5pZ25vcmVfc2lsZW5jZRgIIAEoCBIWCg5leHBvcnRfYWlfc3VicxgJIAEoCBIQCghzdWJjbGlwcxgKIAMoCSIrChNTdGFydEV4cG9ydFJlc3BvbnNlEhQKDHdvcmtmbG93X2lkcxgBIAMoCSIqChpFeHBvcnRUaW1lZE1ldGFkYXRhUmVxdWVzdBIMCgRWWElEGAEgASgJIigKGEdldFZCRXhwb3J0Q29uZmlnUmVxdWVzdBIMCgRWWElEGAEgASgJIoABChlHZXRWQkV4cG9ydENvbmZpZ1Jlc3BvbnNlEgwKBFZYSUQYASABKAkSDQoFdGl0bGUYAiABKAkSFAoMZGVzdGluYXRpb25zGAMgAygJEhcKD3N1YnRpdGxlX3NoYXBlcxgEIAMoCRIXCg9zdWJ0aXRsZV9zdHlsZXMYBSADKAkiagoUU3RhcnRWQkV4cG9ydFJlcXVlc3QSDAoEVlhJRBgBIAEoCRIUCgxkZXN0aW5hdGlvbnMYAiADKAkSFgoOc3VidGl0bGVfc2hhcGUYAyABKAkSFgoOc3VidGl0bGVfc3R5bGUYBCABKAkiLAoVU3RhcnRWQkV4cG9ydFJlc3BvbnNlEhMKC3dvcmtmbG93X2lkGAEgASgJIjQKGkV4cG9ydERlc3RpbmF0aW9uc1Jlc3BvbnNlEgoKAnZ4GAEgAygJEgoKAnZiGAIgAygJIiUKFFJlc29sdmVBc3NldHNSZXF1ZXN0Eg0KBVZYSURzGAEgAygJIjsKDVJlc29sdmVkQXNzZXQSDAoEVlhJRBgBIAEoCRINCgV0aXRsZRgCIAEoCRINCgVmb3VuZBgDIAEoCCI+ChVSZXNvbHZlQXNzZXRzUmVzcG9uc2USJQoGYXNzZXRzGAEgAygLMhUuYXBpLnYxLlJlc29sdmVkQXNzZXQiUgobVHJpZ2dlckNhbnRlbW9BY3Rpb25SZXF1ZXN0EgwKBFZYSUQYASABKAkSJQoGYWN0aW9uGAIgASgOMhUuYXBpLnYxLkNhbnRlbW9BY3Rpb24iRgoSVmF1bHRTZWFyY2hSZXF1ZXN0Eg0KBXF1ZXJ5GAEgASgJEhMKC21lZGlhX3R5cGVzGAIgAygJEgwKBHBhZ2UYAyABKAUimAEKCVZhdWx0SXRlbRIMCgRWWElEGAEgASgJEg0KBXRpdGxlGAIgASgJEhIKCm1lZGlhX3R5cGUYAyABKAkSDQoFYWRkZWQYBCABKAkSDgoGZm9ybWF0GAUgASgJEgwKBHNpemUYBiABKAkSGAoQZHVyYXRpb25fc2Vjb25kcxgHIAEoBRITCgtoYXNfcHJldmlldxgIIAEoCCIvCgpWYXVsdEZhY2V0EhIKCm1lZGlhX3R5cGUYASABKAkSDQoFY291bnQYAiABKAUikAEKE1ZhdWx0U2VhcmNoUmVzcG9uc2USIAoFaXRlbXMYASADKAsyES5hcGkudjEuVmF1bHRJdGVtEhIKCnRvdGFsX2hpdHMYAiABKAUSDAoEcGFnZRgDIAEoBRIRCglwYWdlX3NpemUYBCABKAUSIgoGZmFjZXRzGAUgAygLMhIuYXBpLnYxLlZhdWx0RmFjZXQiIwoTR2V0VmF1bHRJdGVtUmVxdWVzdBIMCgRWWElEGAEgASgJIjcKFEdldFZhdWx0SXRlbVJlc3BvbnNlEh8KBGl0ZW0YASABKAsyES5hcGkudjEuVmF1bHRJdGVtIr8BCgZNYXJrZXISCgoCaWQYASABKAkSIAoEdHlwZRgCIAEoDjISLmFwaS52MS5NYXJrZXJUeXBlEg0KBWxhYmVsGAMgASgJEgwKBG5vdGUYBCABKAkSDQoFc3RhcnQYBSABKAESCwoDZW5kGAYgASgBEiQKBnNvdXJjZRgHIAEoDjIULmFwaS52MS5NYXJrZXJTb3VyY2USEQoJZW50aXR5X2lkGAggASgJEhUKDWVudGl0eV9zb3VyY2UYCSABKAkiQwoGRW50aXR5EgoKAmlkGAEgASgJEg4KBnNvdXJjZRgCIAEoCRINCgVsYWJlbBgDIAEoCRIOCgZkZXRhaWwYBCABKAkiVwoVU2VhcmNoRW50aXRpZXNSZXF1ZXN0EiAKBHR5cGUYASABKA4yEi5hcGkudjEuTWFya2VyVHlwZRINCgVxdWVyeRgCIAEoCRINCgVsaW1pdBgDIAEoBSI6ChZTZWFyY2hFbnRpdGllc1Jlc3BvbnNlEiAKCGVudGl0aWVzGAEgAygLMg4uYXBpLnYxLkVudGl0eSJQCg5SZWZlcmVuY2VRdWVyeRIOCgZyZWZfaWQYASABKAkSIAoEdHlwZRgCIAEoDjISLmFwaS52MS5NYXJrZXJUeXBlEgwKBHRleHQYAyABKAkiVQoRUmVzb2x2ZWRSZWZlcmVuY2USDgoGcmVmX2lkGAEgASgJEhAKCHJlc29sdmVkGAIgASgIEh4KBmVudGl0eRgDIAEoCzIOLmFwaS52MS5FbnRpdHkiQwoYUmVzb2x2ZVJlZmVyZW5jZXNSZXF1ZXN0EicKB3F1ZXJpZXMYASADKAsyFi5hcGkudjEuUmVmZXJlbmNlUXVlcnkiRwoZUmVzb2x2ZVJlZmVyZW5jZXNSZXNwb25zZRIqCgdyZXN1bHRzGAEgAygLMhkuYXBpLnYxLlJlc29sdmVkUmVmZXJlbmNlIiEKEUdldE1hcmtlcnNSZXF1ZXN0EgwKBFZYSUQYASABKAkiNQoSR2V0TWFya2Vyc1Jlc3BvbnNlEh8KB21hcmtlcnMYASADKAsyDi5hcGkudjEuTWFya2VyIkUKFFN1Ym1pdE1hcmtlcnNSZXF1ZXN0EgwKBFZYSUQYASABKAkSHwoHbWFya2VycxgCIAMoCzIOLmFwaS52MS5NYXJrZXIqMQoOQm1tRW52aXJvbm1lbnQSDgoKUHJvZHVjdGlvbhAAEg8KC0ludGVncmF0aW9uEAEqugEKDUNhbnRlbW9BY3Rpb24SHgoaQ0FOVEVNT19BQ1RJT05fVU5TUEVDSUZJRUQQABIaChZDQU5URU1PX0FDVElPTl9QUkVWSUVXEAESHQoZQ0FOVEVNT19BQ1RJT05fVFJBTlNDUklCRRACEikKJUNBTlRFTU9fQUNUSU9OX1NVQlRJVExFX0ZST01fU1VCVFJBTlMQAxIjCh9DQU5URU1PX0FDVElPTl9VUERBVEVfUkVMQVRJT05TEAQqqQEKCk1hcmtlclR5cGUSGwoXTUFSS0VSX1RZUEVfVU5TUEVDSUZJRUQQABIaChZNQVJLRVJfVFlQRV9OQU1FX1NVUEVSEAESGwoXTUFSS0VSX1RZUEVfQklCTEVfVkVSU0UQAhIUChBNQVJLRVJfVFlQRV9TT05HEAMSFwoTTUFSS0VSX1RZUEVfQ0hBUFRFUhAEEhYKEk1BUktFUl9UWVBFX0NVU1RPTRAFKmMKDE1hcmtlclNvdXJjZRIdChlNQVJLRVJfU09VUkNFX1VOU1BFQ0lGSUVEEAASGgoWTUFSS0VSX1NPVVJDRV9JTVBPUlRFRBABEhgKFE1BUktFUl9TT1VSQ0VfTUFOVUFMEAIymBAKCkFQSVNlcnZpY2USNQoOR2V0UGVybWlzc2lvbnMSDC5hcGkudjEuVm9pZBoTLmFwaS52MS5QZXJtaXNzaW9ucyIAEkIKEVVwZGF0ZVBlcm1pc3Npb25zEh0uYXBpLnYxLlNldFBlcm1pc3Npb25zUmVxdWVzdBoMLmFwaS52MS5Wb2lkIgASRQoRRGVsZXRlUGVybWlzc2lvbnMSIC5hcGkudjEuRGVsZXRlUGVybWlzc2lvbnNSZXF1ZXN0GgwuYXBpLnYxLlZvaWQiABI6Cg9MaXN0UGVybWlzc2lvbnMSDC5hcGkudjEuVm9pZBoXLmFwaS52MS5QZXJtaXNzaW9uc0xpc3QiABJLChBHZXRUcmFuc2NyaXB0aW9uEh4uYXBpLnYxLkdldFRyYW5zY3JpcHRpb25SZXFlc3QaFS5hcGkudjEuVHJhbnNjcmlwdGlvbiIAEjoKCkdldFByZXZpZXcSGS5hcGkudjEuR2V0UHJldmlld1JlcXVlc3QaDy5hcGkudjEuUHJldmlldyIAEkkKE1N1Ym1pdFRyYW5zY3JpcHRpb24SIi5hcGkudjEuU3VibWl0VHJhbnNjcmlwdGlvblJlcXVlc3QaDC5hcGkudjEuVm9pZCIAEj8KCEdldFllYXJzEhcuYXBpLnYxLkdldFllYXJzUmVxdWVzdBoYLmFwaS52MS5HZXRZZWFyc1Jlc3BvbnNlIgASOwoJR2V0QWxidW1zEhguYXBpLnYxLkdldEFsYnVtc1JlcXVlc3QaEi5hcGkudjEuQWxidW1zTGlzdCIAEkUKDkdldEFsYnVtVHJhY2tzEh0uYXBpLnYxLkdldEFsYnVtVHJhY2tzUmVxdWVzdBoSLmFwaS52MS5UcmFja3NMaXN0IgASSQoQR2V0UG9kY2FzdFRyYWNrcxIfLmFwaS52MS5HZXRQb2RjYXN0VHJhY2tzUmVxdWVzdBoSLmFwaS52MS5UcmFja3NMaXN0IgASTAoMR2V0TGFuZ3VhZ2VzEiQuYXBpLnYxLkdldEF2YWlsYWJsZUxhbmd1YWdlc1JlcXVlc3QaFC5hcGkudjEuTGFuZ3VhZ2VMaXN0IgASUgoTR2V0Qk1NVHJhbnNjcmlwdGlvbhIiLmFwaS52MS5HZXRCTU1UcmFuc2NyaXB0aW9uUmVxdWVzdBoVLmFwaS52MS5UcmFuc2NyaXB0aW9uIgASOQoLU3VibWl0U2hvcnQSGi5hcGkudjEuU3VibWl0U2hvcnRSZXF1ZXN0GgwuYXBpLnYxLlZvaWQiABJUCg9HZXRFeHBvcnRDb25maWcSHi5hcGkudjEuR2V0RXhwb3J0Q29uZmlnUmVxdWVzdBofLmFwaS52MS5HZXRFeHBvcnRDb25maWdSZXNwb25zZSIAEkgKC1N0YXJ0RXhwb3J0EhouYXBpLnYxLlN0YXJ0RXhwb3J0UmVxdWVzdBobLmFwaS52MS5TdGFydEV4cG9ydFJlc3BvbnNlIgASSQoTRXhwb3J0VGltZWRNZXRhZGF0YRIiLmFwaS52MS5FeHBvcnRUaW1lZE1ldGFkYXRhUmVxdWVzdBoMLmFwaS52MS5Wb2lkIgASTgoNUmVzb2x2ZUFzc2V0cxIcLmFwaS52MS5SZXNvbHZlQXNzZXRzUmVxdWVzdBodLmFwaS52MS5SZXNvbHZlQXNzZXRzUmVzcG9uc2UiABJaChFHZXRWQkV4cG9ydENvbmZpZxIgLmFwaS52MS5HZXRWQkV4cG9ydENvbmZpZ1JlcXVlc3QaIS5hcGkudjEuR2V0VkJFeHBvcnRDb25maWdSZXNwb25zZSIAEk4KDVN0YXJ0VkJFeHBvcnQSHC5hcGkudjEuU3RhcnRWQkV4cG9ydFJlcXVlc3QaHS5hcGkudjEuU3RhcnRWQkV4cG9ydFJlc3BvbnNlIgASSwoVR2V0RXhwb3J0RGVzdGluYXRpb25zEgwuYXBpLnYxLlZvaWQaIi5hcGkudjEuRXhwb3J0RGVzdGluYXRpb25zUmVzcG9uc2UiABJLChRUcmlnZ2VyQ2FudGVtb0FjdGlvbhIjLmFwaS52MS5UcmlnZ2VyQ2FudGVtb0FjdGlvblJlcXVlc3QaDC5hcGkudjEuVm9pZCIAEkgKC1ZhdWx0U2VhcmNoEhouYXBpLnYxLlZhdWx0U2VhcmNoUmVxdWVzdBobLmFwaS52MS5WYXVsdFNlYXJjaFJlc3BvbnNlIgASSwoMR2V0VmF1bHRJdGVtEhsuYXBpLnYxLkdldFZhdWx0SXRlbVJlcXVlc3QaHC5hcGkudjEuR2V0VmF1bHRJdGVtUmVzcG9uc2UiABJFCgpHZXRNYXJrZXJzEhkuYXBpLnYxLkdldE1hcmtlcnNSZXF1ZXN0GhouYXBpLnYxLkdldE1hcmtlcnNSZXNwb25zZSIAEj0KDVN1Ym1pdE1hcmtlcnMSHC5hcGkudjEuU3VibWl0TWFya2Vyc1JlcXVlc3QaDC5hcGkudjEuVm9pZCIAElEKDlNlYXJjaEVudGl0aWVzEh0uYXBpLnYxLlNlYXJjaEVudGl0aWVzUmVxdWVzdBoeLmFwaS52MS5TZWFyY2hFbnRpdGllc1Jlc3BvbnNlIgASWgoRUmVzb2x2ZVJlZmVyZW5jZXMSIC5hcGkudjEuUmVzb2x2ZVJlZmVyZW5jZXNSZXF1ZXN0GiEuYXBpLnYxLlJlc29sdmVSZWZlcmVuY2VzUmVzcG9uc2UiAEIeWhxiY2MtbWVkaWEtdG9vbHMvYXBpL3YxO2FwaXYxYgZwcm90bzM", [file_google_protobuf_timestamp, file_api_v1_common]);
 
 /**
  * @generated from message api.v1.BMMPermission
@@ -1600,6 +1600,8 @@ export type Marker = Message<"api.v1.Marker"> & {
 
   /**
    * Display text: the name, the verse reference, the song/chapter title.
+   * Always present; for linked markers it mirrors the canonical entity label,
+   * for custom / free-text markers it's whatever the user typed.
    *
    * @generated from field: string label = 3;
    */
@@ -1626,6 +1628,24 @@ export type Marker = Message<"api.v1.Marker"> & {
    * @generated from field: api.v1.MarkerSource source = 7;
    */
   source: MarkerSource;
+
+  /**
+   * Canonical entity reference, when the label is linked to a known entity (a
+   * bible passage, a song, a person). Empty for free-text / custom markers.
+   * `label` is kept as denormalized display text so linking is enrichment, not
+   * a requirement — unmatched markers still round-trip.
+   *
+   * @generated from field: string entity_id = 8;
+   */
+  entityId: string;
+
+  /**
+   * Which registry `entity_id` belongs to: "bible" | "songbook" | "people".
+   * Empty when `entity_id` is empty.
+   *
+   * @generated from field: string entity_source = 9;
+   */
+  entitySource: string;
 };
 
 /**
@@ -1635,6 +1655,190 @@ export type Marker = Message<"api.v1.Marker"> & {
 export const MarkerSchema: GenMessage<Marker> = /*@__PURE__*/
   messageDesc(file_api_v1_api, 57);
 
+/**
+ * A resolvable entity behind a marker label, returned by SearchEntities for
+ * autocomplete. `id`/`source` map to Marker.entity_id/entity_source.
+ *
+ * @generated from message api.v1.Entity
+ */
+export type Entity = Message<"api.v1.Entity"> & {
+  /**
+   * @generated from field: string id = 1;
+   */
+  id: string;
+
+  /**
+   * @generated from field: string source = 2;
+   */
+  source: string;
+
+  /**
+   * Canonical display text, e.g. "John 3:16".
+   *
+   * @generated from field: string label = 3;
+   */
+  label: string;
+
+  /**
+   * Optional secondary text shown under the label, e.g. a translation or book.
+   *
+   * @generated from field: string detail = 4;
+   */
+  detail: string;
+};
+
+/**
+ * Describes the message api.v1.Entity.
+ * Use `create(EntitySchema)` to create a new message.
+ */
+export const EntitySchema: GenMessage<Entity> = /*@__PURE__*/
+  messageDesc(file_api_v1_api, 58);
+
+/**
+ * @generated from message api.v1.SearchEntitiesRequest
+ */
+export type SearchEntitiesRequest = Message<"api.v1.SearchEntitiesRequest"> & {
+  /**
+   * Which kind of entity to search — mapped from the marker's type.
+   *
+   * @generated from field: api.v1.MarkerType type = 1;
+   */
+  type: MarkerType;
+
+  /**
+   * @generated from field: string query = 2;
+   */
+  query: string;
+
+  /**
+   * Max results to return; server clamps to a sane bound. 0 means default.
+   *
+   * @generated from field: int32 limit = 3;
+   */
+  limit: number;
+};
+
+/**
+ * Describes the message api.v1.SearchEntitiesRequest.
+ * Use `create(SearchEntitiesRequestSchema)` to create a new message.
+ */
+export const SearchEntitiesRequestSchema: GenMessage<SearchEntitiesRequest> = /*@__PURE__*/
+  messageDesc(file_api_v1_api, 59);
+
+/**
+ * @generated from message api.v1.SearchEntitiesResponse
+ */
+export type SearchEntitiesResponse = Message<"api.v1.SearchEntitiesResponse"> & {
+  /**
+   * @generated from field: repeated api.v1.Entity entities = 1;
+   */
+  entities: Entity[];
+};
+
+/**
+ * Describes the message api.v1.SearchEntitiesResponse.
+ * Use `create(SearchEntitiesResponseSchema)` to create a new message.
+ */
+export const SearchEntitiesResponseSchema: GenMessage<SearchEntitiesResponse> = /*@__PURE__*/
+  messageDesc(file_api_v1_api, 60);
+
+/**
+ * One free-text label to try to resolve to a canonical entity, used by the bulk
+ * "resolve references" action.
+ *
+ * @generated from message api.v1.ReferenceQuery
+ */
+export type ReferenceQuery = Message<"api.v1.ReferenceQuery"> & {
+  /**
+   * Opaque id echoed back so the caller can correlate results (the marker id).
+   *
+   * @generated from field: string ref_id = 1;
+   */
+  refId: string;
+
+  /**
+   * @generated from field: api.v1.MarkerType type = 2;
+   */
+  type: MarkerType;
+
+  /**
+   * @generated from field: string text = 3;
+   */
+  text: string;
+};
+
+/**
+ * Describes the message api.v1.ReferenceQuery.
+ * Use `create(ReferenceQuerySchema)` to create a new message.
+ */
+export const ReferenceQuerySchema: GenMessage<ReferenceQuery> = /*@__PURE__*/
+  messageDesc(file_api_v1_api, 61);
+
+/**
+ * @generated from message api.v1.ResolvedReference
+ */
+export type ResolvedReference = Message<"api.v1.ResolvedReference"> & {
+  /**
+   * @generated from field: string ref_id = 1;
+   */
+  refId: string;
+
+  /**
+   * True only when the text resolved to a single, confident match.
+   *
+   * @generated from field: bool resolved = 2;
+   */
+  resolved: boolean;
+
+  /**
+   * Set only when resolved.
+   *
+   * @generated from field: api.v1.Entity entity = 3;
+   */
+  entity?: Entity | undefined;
+};
+
+/**
+ * Describes the message api.v1.ResolvedReference.
+ * Use `create(ResolvedReferenceSchema)` to create a new message.
+ */
+export const ResolvedReferenceSchema: GenMessage<ResolvedReference> = /*@__PURE__*/
+  messageDesc(file_api_v1_api, 62);
+
+/**
+ * @generated from message api.v1.ResolveReferencesRequest
+ */
+export type ResolveReferencesRequest = Message<"api.v1.ResolveReferencesRequest"> & {
+  /**
+   * @generated from field: repeated api.v1.ReferenceQuery queries = 1;
+   */
+  queries: ReferenceQuery[];
+};
+
+/**
+ * Describes the message api.v1.ResolveReferencesRequest.
+ * Use `create(ResolveReferencesRequestSchema)` to create a new message.
+ */
+export const ResolveReferencesRequestSchema: GenMessage<ResolveReferencesRequest> = /*@__PURE__*/
+  messageDesc(file_api_v1_api, 63);
+
+/**
+ * @generated from message api.v1.ResolveReferencesResponse
+ */
+export type ResolveReferencesResponse = Message<"api.v1.ResolveReferencesResponse"> & {
+  /**
+   * @generated from field: repeated api.v1.ResolvedReference results = 1;
+   */
+  results: ResolvedReference[];
+};
+
+/**
+ * Describes the message api.v1.ResolveReferencesResponse.
+ * Use `create(ResolveReferencesResponseSchema)` to create a new message.
+ */
+export const ResolveReferencesResponseSchema: GenMessage<ResolveReferencesResponse> = /*@__PURE__*/
+  messageDesc(file_api_v1_api, 64);
+
 /**
  * @generated from message api.v1.GetMarkersRequest
  */
@@ -1650,7 +1854,7 @@ export type GetMarkersRequest = Message<"api.v1.GetMarkersRequest"> & {
  * Use `create(GetMarkersRequestSchema)` to create a new message.
  */
 export const GetMarkersRequestSchema: GenMessage<GetMarkersRequest> = /*@__PURE__*/
-  messageDesc(file_api_v1_api, 58);
+  messageDesc(file_api_v1_api, 65);
 
 /**
  * @generated from message api.v1.GetMarkersResponse
@@ -1667,7 +1871,7 @@ export type GetMarkersResponse = Message<"api.v1.GetMarkersResponse"> & {
  * Use `create(GetMarkersResponseSchema)` to create a new message.
  */
 export const GetMarkersResponseSchema: GenMessage<GetMarkersResponse> = /*@__PURE__*/
-  messageDesc(file_api_v1_api, 59);
+  messageDesc(file_api_v1_api, 66);
 
 /**
  * @generated from message api.v1.SubmitMarkersRequest
@@ -1689,7 +1893,7 @@ export type SubmitMarkersRequest = Message<"api.v1.SubmitMarkersRequest"> & {
  * Use `create(SubmitMarkersRequestSchema)` to create a new message.
  */
 export const SubmitMarkersRequestSchema: GenMessage<SubmitMarkersRequest> = /*@__PURE__*/
-  messageDesc(file_api_v1_api, 60);
+  messageDesc(file_api_v1_api, 67);
 
 /**
  * @generated from enum api.v1.BmmEnvironment
@@ -2053,6 +2257,26 @@ export const APIService: GenService<{
     input: typeof SubmitMarkersRequestSchema;
     output: typeof VoidSchema;
   },
+  /**
+   * Autocomplete for marker labels (bible passages, songs, people).
+   *
+   * @generated from rpc api.v1.APIService.SearchEntities
+   */
+  searchEntities: {
+    methodKind: "unary";
+    input: typeof SearchEntitiesRequestSchema;
+    output: typeof SearchEntitiesResponseSchema;
+  },
+  /**
+   * Bulk-resolve free-text marker labels to canonical entities.
+   *
+   * @generated from rpc api.v1.APIService.ResolveReferences
+   */
+  resolveReferences: {
+    methodKind: "unary";
+    input: typeof ResolveReferencesRequestSchema;
+    output: typeof ResolveReferencesResponseSchema;
+  },
 }> = /*@__PURE__*/
   serviceDesc(file_api_v1_api, 0);