@antelopejs/dms-database 0.0.1

package/dist/utils/query.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.asNonEmptyString = asNonEmptyString;
+exports.parseInteger = parseInteger;
+exports.clamp = clamp;
+exports.parseFilter = parseFilter;
+exports.unwrapIsFilter = unwrapIsFilter;
+exports.decodeInstanceFilter = decodeInstanceFilter;
+exports.applyFilterToList = applyFilterToList;
+exports.applySearchToList = applySearchToList;
+exports.cellToText = cellToText;
+exports.applySortToList = applySortToList;
+exports.normalizeSortDirection = normalizeSortDirection;
+const interface_database_1 = require("@antelopejs/interface-database");
+const constants_1 = require("../types/constants");
+const FILTER_MODE_SEPARATOR = ":";
+const FILTER_MODE_IS = "is";
+const FILTER_MODE_CONTAINS = "contains";
+function asNonEmptyString(value) {
+    if (typeof value !== "string")
+        return undefined;
+    if (value.length === 0)
+        return undefined;
+    return value;
+}
+function parseInteger(value, fallback) {
+    const text = asNonEmptyString(value);
+    if (!text)
+        return fallback;
+    const parsed = Number.parseInt(text, 10);
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function parseFilter(raw) {
+    const text = asNonEmptyString(raw);
+    if (!text)
+        return undefined;
+    const idx = text.indexOf(FILTER_MODE_SEPARATOR);
+    if (idx < 0)
+        return { mode: FILTER_MODE_IS, value: text };
+    return { mode: text.slice(0, idx), value: text.slice(idx + 1) };
+}
+function unwrapIsFilter(raw) {
+    const parsed = parseFilter(raw);
+    if (!parsed || parsed.mode !== FILTER_MODE_IS)
+        return undefined;
+    return parsed.value;
+}
+function decodeInstanceFilter(raw) {
+    const value = unwrapIsFilter(raw);
+    if (value === undefined || value === null || value === "")
+        return undefined;
+    if (value === constants_1.CROSS_INSTANCE_SENTINEL)
+        return interface_database_1.CROSS_INSTANCE;
+    return value;
+}
+const FILTER_PREDICATES = {
+    [FILTER_MODE_IS]: (cell, value) => cell === value,
+    [FILTER_MODE_CONTAINS]: (cell, value) => cell.toLowerCase().includes(value.toLowerCase()),
+};
+function applyFilterToList(rows, field, rawFilter) {
+    const parsed = parseFilter(rawFilter);
+    if (!parsed)
+        return rows;
+    const predicate = FILTER_PREDICATES[parsed.mode];
+    if (!predicate)
+        return rows;
+    return rows.filter((row) => predicate(String(row[field] ?? ""), parsed.value));
+}
+function applySearchToList(rows, field, search) {
+    const needle = asNonEmptyString(search)?.toLowerCase();
+    if (!needle)
+        return rows;
+    return rows.filter((row) => cellToText(row[field]).toLowerCase().includes(needle));
+}
+function cellToText(value) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string")
+        return value;
+    if (typeof value === "number" || typeof value === "boolean") {
+        return value.toString();
+    }
+    try {
+        const json = JSON.stringify(value);
+        if (json !== undefined)
+            return json;
+    }
+    catch {
+    }
+    try {
+        return String(value);
+    }
+    catch {
+        return "";
+    }
+}
+function compareValues(a, b) {
+    if (typeof a === "number" && typeof b === "number")
+        return a - b;
+    return cellToText(a).localeCompare(cellToText(b));
+}
+function applySortToList(rows, sortKey, sortDirection) {
+    const key = asNonEmptyString(sortKey);
+    if (!key)
+        return rows;
+    const direction = asNonEmptyString(sortDirection) === "desc" ? -1 : 1;
+    return [...rows].sort((a, b) => compareValues(a[key], b[key]) * direction);
+}
+const SORT_DIRECTION_DESC = "desc";
+function normalizeSortDirection(value) {
+    return asNonEmptyString(value) === SORT_DIRECTION_DESC ? "desc" : "asc";
+}
+//# sourceMappingURL=query.js.map

package/dist/utils/query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query.js","sourceRoot":"","sources":["../../src/utils/query.ts"],"names":[],"mappings":"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"}

package/dist/utils/requestValidation.d.ts

@@ -0,0 +1,2 @@
+export declare function asString(value: unknown): string | undefined;
+export declare function asNonEmptyString(value: unknown): string;

package/dist/utils/requestValidation.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.asString = asString;
+exports.asNonEmptyString = asNonEmptyString;
+const interface_api_util_1 = require("@antelopejs/interface-api-util");
+function asString(value) {
+    return typeof value === "string" ? value : undefined;
+}
+function asNonEmptyString(value) {
+    const str = asString(value);
+    (0, interface_api_util_1.assert)(str !== undefined && str.length > 0, 400, "Expected non-empty string");
+    return str;
+}
+//# sourceMappingURL=requestValidation.js.map

package/dist/utils/requestValidation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"requestValidation.js","sourceRoot":"","sources":["../../src/utils/requestValidation.ts"],"names":[],"mappings":";;AAMA,4BAEC;AAED,4CAIC;AAdD,uEAAwD;AAMxD,SAAgB,QAAQ,CAAC,KAAc;IACrC,OAAO,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;AACvD,CAAC;AAED,SAAgB,gBAAgB,CAAC,KAAc;IAC7C,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5B,IAAA,2BAAM,EAAC,GAAG,KAAK,SAAS,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,EAAE,2BAA2B,CAAC,CAAC;IAC9E,OAAO,GAAG,CAAC;AACb,CAAC"}

package/frontend-vue/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/frontend-vue/.prettierrc

@@ -0,0 +1,11 @@
+{
+	"semi": false,
+	"singleQuote": true,
+	"trailingComma": "all",
+	"endOfLine": "auto",
+	"plugins": ["prettier-plugin-tailwindcss"],
+	"useTabs": true,
+
+	"htmlWhitespaceSensitivity": "ignore",
+	"tailwindStylesheet": "~/assets/css/main.css"
+}

package/frontend-vue/app/components/DataBrowserSidebar.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import type { SchemaSummary } from "../composables/useDatabaseSchemas";
+
+const TABLES_LIST_ENDPOINT = "/api/database/tables/list";
+// Row-count fetch cap; mirrors the backend MAX_LIMIT for /api/database/tables.
+const ROW_COUNT_FETCH_LIMIT = 200;
+
+interface TableListRow {
+	schema: string;
+	name: string;
+	columnCount: number;
+	indexCount: number;
+	elementCount: number;
+}
+
+const props = defineProps<{ schemas: SchemaSummary[] }>();
+
+const { t } = useI18n();
+const { $authFetch } = useAuthFetch();
+const { activeTab, openTab } = useDataBrowserTabs();
+const route = useDmsRoute();
+
+const selectedSchemaId = ref<string | null>(null);
+const selectedInstanceId = ref<string>(DEFAULT_INSTANCE_VALUE);
+const tableSearch = ref("");
+
+// A schema-only deep-link (?schema=X without table, e.g. "Open in data
+// browser" on a schema card) pre-selects the pickers. Captured at setup:
+// the tab restore may rewrite the URL before the schemas fetch resolves.
+const initialQuerySchema =
+	typeof route.query.schema === "string" && route.query.schema
+		? route.query.schema
+		: null;
+const initialQueryInstance =
+	typeof route.query.instance === "string" && route.query.instance
+		? route.query.instance
+		: null;
+const initialQueryHasTable =
+	typeof route.query.table === "string" && route.query.table.length > 0;
+
+// How the pickers were last set. The active tab (restored tabs, deep-links)
+// may override an automatic selection but never a user-driven one — so
+// browsing another schema never loses the user's place, while a restore that
+// lands AFTER the first-schema fallback still wins (the sidebar setup runs
+// before the page's onMounted restore()).
+type SelectionSource = "none" | "fallback" | "tab" | "user";
+const selectionSource = ref<SelectionSource>("none");
+
+watch(
+	activeTab,
+	(tab) => {
+		if (!tab || selectionSource.value === "user") return;
+		selectedSchemaId.value = tab.schema;
+		selectedInstanceId.value = tab.instance;
+		selectionSource.value = "tab";
+	},
+	{ immediate: true },
+);
+watch(
+	() => props.schemas,
+	(schemas) => {
+		if (selectionSource.value !== "none" || schemas.length === 0) return;
+		// A schema-only deep-link wins over the first-schema fallback and, being
+		// an explicit user request, is not overridden by a restored tab either.
+		if (
+			initialQuerySchema &&
+			!initialQueryHasTable &&
+			schemas.some((schema) => schema.id === initialQuerySchema)
+		) {
+			selectedSchemaId.value = initialQuerySchema;
+			selectedInstanceId.value = initialQueryInstance ?? DEFAULT_INSTANCE_VALUE;
+			selectionSource.value = "user";
+			return;
+		}
+		selectedSchemaId.value = schemas[0]?.id ?? null;
+		selectionSource.value = "fallback";
+	},
+	{ immediate: true },
+);
+
+// User-driven picker changes (the USelects emit update:model-value only for
+// user interaction, not for the programmatic assignments above).
+function onUserSchemaChange() {
+	selectionSource.value = "user";
+	// Named instances belong to one schema; reset when the user switches.
+	selectedInstanceId.value = DEFAULT_INSTANCE_VALUE;
+}
+function onUserInstanceChange() {
+	selectionSource.value = "user";
+}
+
+const currentSchema = computed(
+	() => props.schemas.find((schema) => schema.id === selectedSchemaId.value) ?? null,
+);
+
+const schemaOptions = computed(() =>
+	props.schemas.map((schema) => ({ label: schema.id, value: schema.id })),
+);
+const instanceOptions = computed(() => {
+	const options = [
+		{ label: t("dms_database.data.instanceDefault"), value: DEFAULT_INSTANCE_VALUE },
+	];
+	for (const id of currentSchema.value?.instances ?? []) {
+		options.push({ label: id, value: id });
+	}
+	options.push({
+		label: t("dms_database.data.instanceCross"),
+		value: CROSS_INSTANCE_VALUE,
+	});
+	return options;
+});
+
+// --- row counts (best effort, display only) ---
+const rowCounts = ref<Record<string, number>>({});
+// No explicit locale: let the runtime format with the browser's preference.
+const countFormatter = new Intl.NumberFormat();
+
+watch(
+	[selectedSchemaId, selectedInstanceId],
+	async ([schemaId, instanceId]) => {
+		rowCounts.value = {};
+		if (!schemaId) return;
+		const query: Record<string, string | number> = {
+			filter_schema: isFilterToken(schemaId),
+			limit: ROW_COUNT_FETCH_LIMIT,
+		};
+		// Counts follow the instance picker (backend defaults to the base
+		// instance when the filter is absent).
+		if (instanceId !== DEFAULT_INSTANCE_VALUE) {
+			query.filter_instance = isFilterToken(instanceId);
+		}
+		const isCurrent = () =>
+			selectedSchemaId.value === schemaId &&
+			selectedInstanceId.value === instanceId;
+		try {
+			const res = await $authFetch<{ results: TableListRow[] }>(
+				TABLES_LIST_ENDPOINT,
+				{ query },
+			);
+			// Ignore a response that arrived after the user switched selection.
+			if (!isCurrent()) return;
+			const counts: Record<string, number> = {};
+			for (const row of res.results ?? []) counts[row.name] = row.elementCount;
+			rowCounts.value = counts;
+		} catch {
+			// Only clear when the failure concerns the current selection — a late
+			// failure from a previous one must not wipe fresh counts.
+			if (isCurrent()) rowCounts.value = {};
+		}
+	},
+	{ immediate: true },
+);
+
+const visibleTables = computed(() => {
+	const needle = tableSearch.value.trim().toLowerCase();
+	const tables = currentSchema.value?.tables ?? [];
+	const filtered = needle
+		? tables.filter((table) => table.name.toLowerCase().includes(needle))
+		: tables;
+	return filtered.map((table) => ({
+		name: table.name,
+		count: rowCounts.value[table.name] ?? null,
+	}));
+});
+
+function isActive(tableName: string): boolean {
+	const tab = activeTab.value;
+	return (
+		tab !== null &&
+		tab.schema === selectedSchemaId.value &&
+		tab.instance === selectedInstanceId.value &&
+		tab.table === tableName
+	);
+}
+
+// Single click opens as a preview; double-click opens permanently (VS Code
+// explorer behaviour — the first click already opened the preview, the second
+// pins it). A modified click (cmd/ctrl/alt) also opens permanently: it is the
+// keyboard path to a pinned open, since Enter can never produce a dblclick.
+function open(tableName: string, preview = true) {
+	if (!selectedSchemaId.value) return;
+	openTab(selectedSchemaId.value, selectedInstanceId.value, tableName, preview);
+}
+</script>
+
+<template>
+	<aside class="flex h-full w-[270px] shrink-0 flex-col border-r border-default bg-default">
+		<div class="space-y-2 border-b border-default p-3">
+			<USelect
+				v-model="selectedSchemaId"
+				:items="schemaOptions"
+				:placeholder="$t('dms_database.data.schema')"
+				icon="i-ph-stack"
+				size="sm"
+				class="w-full"
+				@update:model-value="onUserSchemaChange"
+			/>
+			<USelect
+				v-model="selectedInstanceId"
+				:items="instanceOptions"
+				:disabled="!selectedSchemaId"
+				icon="i-ph-tree-structure"
+				size="sm"
+				class="w-full"
+				@update:model-value="onUserInstanceChange"
+			/>
+			<UInput
+				v-model="tableSearch"
+				:placeholder="$t('dms_database.data.findTable')"
+				:disabled="!selectedSchemaId"
+				icon="i-ph-magnifying-glass"
+				size="sm"
+				class="w-full"
+			/>
+		</div>
+		<nav class="flex-1 overflow-y-auto p-1.5">
+			<button
+				v-for="table in visibleTables"
+				:key="table.name"
+				type="button"
+				class="flex w-full select-none items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors"
+				:class="
+					isActive(table.name)
+						? 'bg-primary/10 text-primary'
+						: 'text-toned hover:bg-elevated'
+				"
+				@click="open(table.name, !($event.metaKey || $event.ctrlKey || $event.altKey))"
+				@dblclick="open(table.name, false)"
+			>
+				<UIcon
+					name="i-ph-table"
+					class="size-3.5 shrink-0"
+					:class="isActive(table.name) ? 'text-primary' : 'text-dimmed'"
+				/>
+				<span class="min-w-0 flex-1 truncate font-mono text-xs">{{ table.name }}</span>
+				<span
+					v-if="table.count !== null"
+					class="shrink-0 text-[10px] tabular-nums text-dimmed"
+				>
+					{{ countFormatter.format(table.count) }}
+				</span>
+			</button>
+			<p
+				v-if="selectedSchemaId && visibleTables.length === 0"
+				class="px-2 py-4 text-center text-xs text-muted"
+			>
+				{{ $t("dms_database.overview.tables.empty") }}
+			</p>
+			<p v-else-if="!selectedSchemaId" class="px-2 py-4 text-center text-xs text-muted">
+				{{ $t("dms_database.data.pickPrompt") }}
+			</p>
+		</nav>
+	</aside>
+</template>

package/frontend-vue/app/components/DataBrowserTabBar.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import type { BrowserTab } from "../composables/useDataBrowserTabs";
+
+const {
+	tabs,
+	activeId,
+	hasMultipleSchemas,
+	activateTab,
+	closeTab,
+	pinTab,
+	moveTab,
+} = useDataBrowserTabs();
+const { t } = useI18n();
+
+// Shared by the pin and close buttons — they are a hover-reveal pair on the
+// same tab and must render identically.
+const tabActionClass =
+	"rounded p-0.5 text-dimmed opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 hover:bg-elevated hover:text-default";
+
+// The label doubles as the accessible name; a preview tab announces its
+// ephemeral state, which the italic styling alone cannot convey.
+function tabAriaLabel(tab: BrowserTab): string {
+	return tab.preview
+		? t("dms_database.data.previewTab", { name: label(tab) })
+		: label(tab);
+}
+
+// Pinning from the pin button unmounts the button under focus (v-if), which
+// would drop focus to <body> for keyboard users; re-anchor it on the tab's
+// label button — but only when focus actually fell to the body, so a mouse
+// click doesn't get focus stolen elsewhere.
+function pinFromButton(tab: BrowserTab, event: MouseEvent) {
+	const tabEl = (event.currentTarget as HTMLElement).closest("[data-tab]");
+	pinTab(tab.id);
+	nextTick(() => {
+		if (document.activeElement === document.body) {
+			tabEl?.querySelector("button")?.focus();
+		}
+	});
+}
+
+// --- drag & drop reorder ---
+const draggedId = ref<string | null>(null);
+const dropTargetId = ref<string | null>(null);
+
+function onDragStart(tab: BrowserTab, event: DragEvent) {
+	draggedId.value = tab.id;
+	// Firefox refuses to start a drag without data attached.
+	event.dataTransfer?.setData("text/plain", tab.id);
+	if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+}
+
+function onDragOver(tab: BrowserTab, event: DragEvent) {
+	if (!draggedId.value || draggedId.value === tab.id) return;
+	// preventDefault marks the tab as a valid drop target.
+	event.preventDefault();
+	if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+	dropTargetId.value = tab.id;
+}
+
+function onDrop(tab: BrowserTab) {
+	// A self-drop is not a reorder: no pin, no move. (onDragOver never marks
+	// the dragged tab as a valid target, so this is belt-and-braces.)
+	if (draggedId.value && draggedId.value !== tab.id) {
+		// An arranged tab is kept (VS Code): a completed drag-reorder pins.
+		pinTab(draggedId.value);
+		moveTab(draggedId.value, tab.id);
+	}
+	onDragEnd();
+}
+
+function onDragEnd() {
+	draggedId.value = null;
+	dropTargetId.value = null;
+}
+
+function label(tab: BrowserTab): string {
+	return hasMultipleSchemas.value ? `${tab.schema}.${tab.table}` : tab.table;
+}
+
+function instanceBadge(tab: BrowserTab): string | null {
+	if (tab.instance === DEFAULT_INSTANCE_VALUE) return null;
+	if (tab.instance === CROSS_INSTANCE_VALUE) return "*";
+	return `@${tab.instance}`;
+}
+
+function close(tab: BrowserTab) {
+	closeTab(tab.id);
+}
+</script>
+
+<template>
+	<div
+		v-if="tabs.length > 0"
+		class="flex items-end gap-1 overflow-x-auto border-b border-default bg-elevated/50 px-2 pt-1.5"
+	>
+		<div
+			v-for="tab in tabs"
+			:key="tab.id"
+			data-tab
+			draggable="true"
+			class="group flex shrink-0 select-none items-center gap-1.5 rounded-t-md border border-b-0 px-2.5 py-1.5"
+			:class="[
+				tab.id === activeId
+					? 'border-default bg-default'
+					: 'border-transparent bg-transparent hover:bg-default/60',
+				tab.id === draggedId ? 'opacity-40' : '',
+				tab.id === dropTargetId ? 'ring-1 ring-primary ring-inset' : '',
+			]"
+			@dragstart="onDragStart(tab, $event)"
+			@dragover="onDragOver(tab, $event)"
+			@drop.prevent="onDrop(tab)"
+			@dragend="onDragEnd"
+		>
+			<button
+				type="button"
+				class="flex items-center gap-1.5"
+				:aria-label="tabAriaLabel(tab)"
+				@click="activateTab(tab.id)"
+				@dblclick="pinTab(tab.id)"
+			>
+				<UIcon
+					name="i-ph-table"
+					class="size-3.5"
+					:class="tab.id === activeId ? 'text-primary' : 'text-dimmed'"
+				/>
+				<span
+					class="max-w-48 truncate font-mono text-xs"
+					:class="[
+						tab.id === activeId ? 'text-highlighted' : 'text-muted',
+						tab.preview ? 'italic' : '',
+					]"
+				>
+					{{ label(tab) }}
+				</span>
+				<span
+					v-if="instanceBadge(tab)"
+					class="rounded bg-primary/10 px-1 font-mono text-[10px] text-primary"
+				>
+					{{ instanceBadge(tab) }}
+				</span>
+			</button>
+			<button
+				type="button"
+				:class="[tabActionClass, { 'opacity-100': tab.id === activeId }]"
+				:aria-label="$t('dms_database.data.closeTab')"
+				@click.stop="close(tab)"
+			>
+				<UIcon name="i-ph-x" class="size-3" />
+			</button>
+			<!-- The pin button sits AFTER the close button: pinning unmounts it, and
+			     nothing may reflow into the pointer's position — a double-click's
+			     second click would otherwise land on the close button and destroy
+			     the tab the user just pinned. -->
+			<button
+				v-if="tab.preview"
+				type="button"
+				:class="[tabActionClass, { 'opacity-100': tab.id === activeId }]"
+				:aria-label="$t('dms_database.data.keepTab')"
+				@click.stop="pinFromButton(tab, $event)"
+			>
+				<UIcon name="i-ph-push-pin" class="size-3" />
+			</button>
+		</div>
+	</div>
+</template>