@antelopejs/dms-database 0.0.1

package/frontend-vue/app/composables/useDatabaseHealth.ts

@@ -0,0 +1,50 @@
+export interface StorageEntry {
+	schema: string;
+	table: string;
+	rows: number;
+}
+
+export interface OverviewHealth {
+	status: "ok" | "down";
+	latencyMs: number | null;
+	driver: string | null;
+	pool: string | null;
+	collections: number;
+	schemaCount: number;
+	tableCount: number;
+	indexCount: number;
+	totalRows: number;
+	sizeBytes: number | null;
+	storage: StorageEntry[];
+}
+
+const HEALTH_ENDPOINT = "/api/database/health";
+
+const EMPTY_HEALTH: OverviewHealth = {
+	status: "down",
+	latencyMs: null,
+	driver: null,
+	pool: null,
+	collections: 0,
+	schemaCount: 0,
+	tableCount: 0,
+	indexCount: 0,
+	totalRows: 0,
+	sizeBytes: null,
+	storage: [],
+};
+
+export function useDatabaseHealth() {
+	const { useFetchAuth } = useAuthFetch();
+	const { data, pending, error, refresh } = useFetchAuth<OverviewHealth>(
+		HEALTH_ENDPOINT,
+		{ default: () => ({ ...EMPTY_HEALTH }) },
+	);
+
+	return {
+		health: computed(() => data.value ?? { ...EMPTY_HEALTH }),
+		isLoading: pending,
+		error,
+		refresh,
+	};
+}

package/frontend-vue/app/composables/useDatabaseSchemas.ts

@@ -0,0 +1,92 @@
+interface RelationDeclaration {
+	fromField: string;
+	toSchema: string;
+	toTable: string;
+	toField: string;
+	many: boolean;
+}
+
+type FieldDescriptor =
+	| { kind: "string" }
+	| { kind: "number" }
+	| { kind: "boolean" }
+	| { kind: "date" }
+	| { kind: "unknown" }
+	| { kind: "any" }
+	| { kind: "null" }
+	| { kind: "undefined" }
+	| { kind: "literal"; value: string | number | boolean }
+	| { kind: "union"; members: FieldDescriptor[] }
+	| { kind: "intersection"; members: FieldDescriptor[] }
+	| { kind: "array"; element?: FieldDescriptor }
+	| { kind: "tuple"; elements: FieldDescriptor[] }
+	| {
+			kind: "object";
+			fields: Record<string, FieldDescriptor>;
+			partial?: boolean;
+		}
+	| { kind: "record"; key?: FieldDescriptor; value: FieldDescriptor }
+	| { kind: "keyof"; keys: string[] }
+	| { kind: "refinement"; base: FieldDescriptor; name: string }
+	| { kind: "recursive"; name: string };
+
+interface TableSummary {
+	name: string;
+	fields: Record<string, FieldDescriptor>;
+	indexes: Record<string, { fields?: string[]; multi?: boolean }>;
+	relations: RelationDeclaration[];
+	modifiers?: Record<string, string[]>;
+}
+
+type SchemaLabelColor =
+	| "primary"
+	| "secondary"
+	| "success"
+	| "info"
+	| "warning"
+	| "error"
+	| "neutral";
+
+interface SchemaLabel {
+	text: string;
+	color?: SchemaLabelColor;
+}
+
+interface SchemaStats {
+	tableCount: number;
+	elementCount: number;
+	instanceCount: number;
+}
+
+interface SchemaSummary {
+	id: string;
+	options: Record<string, never>;
+	tables: TableSummary[];
+	label?: SchemaLabel;
+	stats: SchemaStats;
+	instances: string[];
+}
+
+const SCHEMAS_ENDPOINT = "/api/database/schemas";
+const EMPTY_SCHEMAS = { schemas: [] as SchemaSummary[] };
+
+export function useDatabaseSchemas() {
+	const { useFetchAuth } = useAuthFetch();
+	const { data, pending, error, refresh } = useFetchAuth<{
+		schemas: SchemaSummary[];
+	}>(SCHEMAS_ENDPOINT, { default: () => EMPTY_SCHEMAS });
+
+	return {
+		schemas: computed(() => data.value?.schemas ?? []),
+		isLoading: pending,
+		error,
+		refresh,
+	};
+}
+
+export type {
+	FieldDescriptor,
+	RelationDeclaration,
+	SchemaSummary,
+	TableSummary,
+};

package/frontend-vue/app/composables/useDiagramPersistence.ts

@@ -0,0 +1,99 @@
+export interface DiagramPosition {
+	x: number;
+	y: number;
+}
+
+export type DiagramPositions = Record<string, DiagramPosition>;
+
+export interface DiagramNote {
+	id: string;
+	schemaName: string;
+	text: string;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	color: string | null;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface DiagramNoteCreate {
+	schemaName: string;
+	text: string;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	color?: string;
+}
+
+export type DiagramNoteUpdate = Partial<
+	Pick<DiagramNote, "text" | "x" | "y" | "width" | "height" | "color">
+>;
+
+const BASE = "/api/database/diagram";
+
+export function useDiagramPersistence() {
+	const { $authFetch } = useAuthFetch();
+
+	async function fetchLayout(schema: string): Promise<DiagramPositions> {
+		const res = await $authFetch<{ positions: DiagramPositions }>(
+			`${BASE}/layout/${encodeURIComponent(schema)}`,
+		);
+		return res.positions ?? {};
+	}
+
+	async function saveLayout(
+		schema: string,
+		positions: DiagramPositions,
+	): Promise<void> {
+		await $authFetch<{ success: boolean }>(
+			`${BASE}/layout/${encodeURIComponent(schema)}`,
+			{
+				method: "PUT",
+				body: { positions },
+			},
+		);
+	}
+
+	async function fetchNotes(schema: string): Promise<DiagramNote[]> {
+		const res = await $authFetch<{ items: DiagramNote[] }>(`${BASE}/notes`, {
+			query: { schema },
+		});
+		return res.items ?? [];
+	}
+
+	async function createNote(payload: DiagramNoteCreate): Promise<DiagramNote> {
+		return $authFetch<DiagramNote>(`${BASE}/notes`, {
+			method: "POST",
+			body: payload,
+		});
+	}
+
+	async function updateNote(
+		id: string,
+		patch: DiagramNoteUpdate,
+	): Promise<DiagramNote> {
+		return $authFetch<DiagramNote>(
+			`${BASE}/notes/${encodeURIComponent(id)}`,
+			{ method: "PUT", body: patch },
+		);
+	}
+
+	async function deleteNote(id: string): Promise<void> {
+		await $authFetch<{ success: boolean }>(
+			`${BASE}/notes/${encodeURIComponent(id)}`,
+			{ method: "DELETE" },
+		);
+	}
+
+	return {
+		fetchLayout,
+		saveLayout,
+		fetchNotes,
+		createNote,
+		updateNote,
+		deleteNote,
+	};
+}

package/frontend-vue/app/composables/useQueryRuntime.ts

@@ -0,0 +1,118 @@
+import {
+	CROSS_INSTANCE,
+	Datum,
+	Query,
+	Schema,
+	SchemaInstance,
+	Selection,
+	SingleSelection,
+	Stream,
+	Table,
+	ValueProxy,
+} from '@antelopejs/interface-database/staged-query'
+import { containsMutations, encodeStaged } from '../utils/stagedSerialization'
+import type { SchemaSummary } from './useDatabaseSchemas'
+
+interface PreparedQuery {
+	query: Record<string, unknown>
+	source: string
+	hasMutations: boolean
+}
+
+interface SchemaDefLike {
+	[tableName: string]: { fields: unknown; indexes: unknown }
+}
+
+function toSchemaDefinition(summary: SchemaSummary): SchemaDefLike {
+	const def: SchemaDefLike = {}
+	for (const table of summary.tables) {
+		def[table.name] = {
+			fields: table.fields ?? {},
+			indexes: table.indexes ?? {},
+		}
+	}
+	return def
+}
+
+function buildSchemasMap(
+	summaries: SchemaSummary[],
+): Record<string, Schema<unknown, SchemaDefLike>> {
+	const bindings: Record<string, Schema<unknown, SchemaDefLike>> = {}
+	for (const summary of summaries) {
+		bindings[summary.id] =
+			Schema.get<unknown, SchemaDefLike>(summary.id) ??
+			new Schema(summary.id, toSchemaDefinition(summary))
+	}
+	return bindings
+}
+
+function evaluateUserCode(
+	code: string,
+	schemas: Record<string, Schema<unknown, SchemaDefLike>>,
+): unknown {
+	const wrapped = `"use strict"; return (${code}\n);`
+	const fn = new Function(
+		'schemas',
+		'Schema',
+		'SchemaInstance',
+		'Table',
+		'Selection',
+		'SingleSelection',
+		'Stream',
+		'Datum',
+		'Query',
+		'ValueProxy',
+		'CROSS_INSTANCE',
+		wrapped,
+	)
+	return fn(
+		schemas,
+		Schema,
+		SchemaInstance,
+		Table,
+		Selection,
+		SingleSelection,
+		Stream,
+		Datum,
+		Query,
+		ValueProxy,
+		CROSS_INSTANCE,
+	)
+}
+
+export function prepareQueryPayload(
+	editorText: string,
+	summaries: SchemaSummary[],
+): PreparedQuery {
+	const trimmed = editorText.trim()
+	if (!trimmed) {
+		throw new Error('Query is empty')
+	}
+
+	const schemas = buildSchemasMap(summaries)
+	const result = evaluateUserCode(trimmed, schemas)
+
+	if (!result || typeof result !== 'object') {
+		throw new TypeError(
+			'Query must evaluate to a staged object (e.g. schemas.<id>.instance().table("...").slice(0, 10))',
+		)
+	}
+
+	const stages = (result as { stages?: unknown }).stages
+	if (!Array.isArray(stages)) {
+		throw new TypeError(
+			'Query result is not a staged object — check that the chain ends on a Table/Selection/Stream/Datum/Query.',
+		)
+	}
+
+	const encoded = encodeStaged(result)
+	if (!encoded || typeof encoded !== 'object' || Array.isArray(encoded)) {
+		throw new TypeError('Failed to encode query')
+	}
+
+	return {
+		query: encoded as Record<string, unknown>,
+		source: trimmed,
+		hasMutations: containsMutations(result),
+	}
+}

package/frontend-vue/app/composables/useQueryStore.ts

@@ -0,0 +1,117 @@
+export type QueryLanguage = "aql";
+export type QueryScope = "me" | "shared";
+
+export interface SavedQuery {
+	id: string;
+	userId: string;
+	name: string;
+	description: string;
+	query: Record<string, unknown>;
+	source: string;
+	language: QueryLanguage;
+	shared: boolean;
+	createdAt: string;
+}
+
+export interface HistoryEntry {
+	id: string;
+	userId: string;
+	query: Record<string, unknown>;
+	source: string;
+	language: QueryLanguage;
+	executedAt: string;
+	durationMs: number;
+	rowCount: number;
+}
+
+export interface ExecuteResult {
+	rows: Record<string, unknown>[];
+	executedAt: string;
+	durationMs: number;
+	error?: string;
+}
+
+export interface SaveQueryInput {
+	name: string;
+	description: string;
+	query: Record<string, unknown>;
+	source: string;
+	language: QueryLanguage;
+	shared: boolean;
+}
+
+const QUERY_BASE = "/api/database/query";
+
+export function useQueryStore() {
+	const { $authFetch } = useAuthFetch();
+
+	const savedQueries = ref<SavedQuery[]>([]);
+	const historyItems = ref<HistoryEntry[]>([]);
+	const historyTotal = ref(0);
+
+	async function fetchSaved(scope: QueryScope): Promise<void> {
+		const response = await $authFetch<{ items: SavedQuery[] }>(
+			`${QUERY_BASE}/saved`,
+			{ query: { scope } },
+		);
+		savedQueries.value = response.items ?? [];
+	}
+
+	async function fetchHistory(limit: number, offset: number): Promise<void> {
+		const response = await $authFetch<{
+			items: HistoryEntry[];
+			total: number;
+		}>(`${QUERY_BASE}/history`, {
+			query: { limit, offset },
+		});
+		historyItems.value = response.items ?? [];
+		historyTotal.value = response.total ?? 0;
+	}
+
+	async function executeQuery(
+		query: Record<string, unknown>,
+		source: string,
+		language: QueryLanguage,
+	): Promise<ExecuteResult> {
+		return $authFetch<ExecuteResult>(`${QUERY_BASE}/execute`, {
+			method: "POST",
+			body: { query, source, language },
+		});
+	}
+
+	async function saveQuery(input: SaveQueryInput): Promise<SavedQuery> {
+		return $authFetch<SavedQuery>(`${QUERY_BASE}/saved`, {
+			method: "POST",
+			body: input,
+		});
+	}
+
+	async function updateSaved(
+		id: string,
+		input: SaveQueryInput,
+	): Promise<SavedQuery> {
+		return $authFetch<SavedQuery>(
+			`${QUERY_BASE}/saved/${encodeURIComponent(id)}`,
+			{ method: "PUT", body: input },
+		);
+	}
+
+	async function deleteSaved(id: string): Promise<void> {
+		await $authFetch<{ success: boolean }>(
+			`${QUERY_BASE}/saved/${encodeURIComponent(id)}`,
+			{ method: "DELETE" },
+		);
+	}
+
+	return {
+		savedQueries,
+		historyItems,
+		historyTotal,
+		fetchSaved,
+		fetchHistory,
+		executeQuery,
+		saveQuery,
+		updateSaved,
+		deleteSaved,
+	};
+}

package/frontend-vue/app/composables/useTableViewRowClick.ts

@@ -0,0 +1,22 @@
+// A read-only DmsTableView has no edit form, so a row (double-)click only
+// broadcasts the `DmsComponent.TableView.RowClick` event on `window`
+// (detail = { component, data: { row } }). This composable subscribes to it for a
+// single table instance and invokes `onRow` with the clicked row.
+const ROW_CLICK_EVENT = "DmsComponent.TableView.RowClick";
+
+export function useTableViewRowClick<T = Record<string, unknown>>(
+	componentId: string,
+	onRow: (row: T) => void,
+): void {
+	function handle(event: Event) {
+		const detail = (event as CustomEvent).detail as {
+			component?: string;
+			data?: { row?: T };
+		};
+		if (detail?.component !== componentId) return;
+		const row = detail.data?.row;
+		if (row) onRow(row);
+	}
+	onMounted(() => window.addEventListener(ROW_CLICK_EVENT, handle));
+	onBeforeUnmount(() => window.removeEventListener(ROW_CLICK_EVENT, handle));
+}

package/frontend-vue/app/custom-pages/database/data.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const { schemas } = useDatabaseSchemas();
+const { activeTab, restore } = useDataBrowserTabs();
+
+onMounted(() => restore());
+
+// Schema-introspected field names for the active tab's table: the grid falls
+// back to them when the backend column sampling returns nothing (empty table).
+const fallbackFields = computed(() => {
+	const tab = activeTab.value;
+	if (!tab) return [];
+	const schema = schemas.value.find((s) => s.id === tab.schema);
+	const table = schema?.tables.find((tbl) => tbl.name === tab.table);
+	return Object.keys(table?.fields ?? {});
+});
+</script>
+
+<template>
+	<!-- Studio layout: full height, only the grid scrolls. The offset accounts
+	     for the DMS shell chrome + page header — tune it at the visual
+	     checkpoint so the page itself never scrolls. -->
+	<div
+		class="flex h-[calc(100dvh-13.5rem)] min-h-[30rem] overflow-hidden rounded-lg border border-default bg-default"
+	>
+		<DmsDatabaseDataBrowserSidebar :schemas="schemas" />
+		<div class="flex min-w-0 flex-1 flex-col">
+			<DmsDatabaseDataBrowserTabBar />
+			<DmsDatabaseDataGrid
+				v-if="activeTab"
+				:key="activeTab.id"
+				:tab="activeTab"
+				:fallback-fields="fallbackFields"
+			/>
+			<div
+				v-else
+				class="flex flex-1 items-center justify-center text-sm text-muted"
+			>
+				{{ $t("dms_database.data.pickPrompt") }}
+			</div>
+		</div>
+	</div>
+</template>