@empyria/webui 0.1.1

package/.oxfmtrc.json

@@ -0,0 +1,9 @@
+{
+	"$schema": "./node_modules/oxfmt/configuration_schema.json",
+	"ignorePatterns": [],
+	"useTabs": true,
+	"tabWidth": 4,
+	"singleQuote": true,
+	"trailingComma": "all",
+	"semi": false
+}

package/.oxlintrc.json

@@ -0,0 +1,3 @@
+{
+	"ignorePatterns": ["node_modules", ".nx", "coverage", "**/tmp/**"]
+}

package/README.md

@@ -0,0 +1,18 @@
+# Principia
+
+The Architecture:
+
+```
+Browser (Client)          Nuxt Server               Moleculer Backend
+    │                         │                            │
+    ├─ login() ──────────────>│                            │
+    │                         ├─ call('v1.Auth.login') ───>│
+    │                         │<── returns user data ──────┤
+    │                         ├─ setCookie(tokenKey) ──────┤ (secure, httpOnly)
+    │<── returns user data ───┤
+    ├─ update Pinia store
+    │
+    ├─ Future requests ───────>│
+    │                         ├─ reads cookie ─────────────┤ (auto-included)
+    │                         ├─ moleculer.call() ─────────>│ (with tokenKey)
+```

package/app/app.config.ts

@@ -0,0 +1,7 @@
+export default defineAppConfig({
+	ui: {
+		colors: {
+			primary: 'blue',
+		},
+	},
+})

package/app/app.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+const toaster = { duration: 5000 }
+
+const color = computed(() => (colorMode.value === 'dark' ? '#1b1718' : 'white'))
+
+useHead({
+	meta: [
+		{ charset: 'utf-8' },
+		{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
+		{ key: 'theme-color', name: 'theme-color', content: color },
+	],
+	link: [{ rel: 'icon', href: '/favicon.ico' }],
+	htmlAttrs: {
+		lang: 'en',
+	},
+})
+
+const title = 'Principia Fluxus'
+const description = 'AI-powered Data Lake platform'
+
+useSeoMeta({
+	title,
+	description,
+	ogTitle: title,
+	ogDescription: description,
+})
+</script>
+
+<template>
+	<UApp :toaster="toaster">
+		<NuxtLayout>
+			<NuxtPage />
+		</NuxtLayout>
+	</UApp>
+</template>

package/app/assets/css/main.css

@@ -0,0 +1,189 @@
+@import 'tailwindcss';
+@import '@nuxt/ui';
+
+@plugin "@tailwindcss/typography";
+
+@theme static {
+	--font-sans: 'Public Sans', sans-serif;
+
+	--color-green-50: #effdf5;
+	--color-green-100: #d9fbe8;
+	--color-green-200: #b3f5d1;
+	--color-green-300: #75edae;
+	--color-green-400: #00dc82;
+	--color-green-500: #00c16a;
+	--color-green-600: #00a155;
+	--color-green-700: #007f45;
+	--color-green-800: #016538;
+	--color-green-900: #0a5331;
+	--color-green-950: #052e16;
+}
+
+@theme {
+	--color-cbh-50: #f4f6fb;
+	--color-cbh-100: #e8ebf6;
+	--color-cbh-200: #cdd6ea;
+	--color-cbh-300: #a1b3d8;
+	--color-cbh-400: #6e8bc2;
+	--color-cbh-500: #4c6dab;
+	--color-cbh-600: #3c5896;
+	--color-cbh-700: #2f4475;
+	--color-cbh-800: #2a3a62;
+	--color-cbh-900: #283452;
+	--color-cbh-950: #1a2137;
+
+	--font-sans: 'Montserrat', system-ui, sans-serif;
+	--breakpoint-3xl: 1920px;
+	--breakpoint-4xl: 2560px;
+	--breakpoint-5xl: 3840px;
+
+	@keyframes tada {
+		from {
+			transform: scale3d(1, 1, 1);
+		}
+
+		10%,
+		20% {
+			transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+		}
+
+		30%,
+		50%,
+		70%,
+		90% {
+			transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+		}
+
+		40%,
+		60%,
+		80% {
+			transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+		}
+
+		to {
+			transform: scale3d(1, 1, 1);
+		}
+	}
+
+	--animate-tada: tada 1s ease-in-out infinite;
+
+	@keyframes backOutLeft {
+		0% {
+			transform: scale(1);
+			opacity: 1;
+		}
+
+		20% {
+			transform: translateX(0px) scale(0.8);
+			opacity: 0.7;
+		}
+
+		100% {
+			transform: translateX(-100px) scale(0.8);
+			opacity: 0.7;
+		}
+	}
+
+	--animate-backOutLeft: backOutLeft 0.8s ease-in-out infinite;
+
+	@keyframes backOutRight {
+		0% {
+			transform: scale(1);
+			opacity: 1;
+		}
+
+		20% {
+			transform: translateX(0px) scale(0.8);
+			opacity: 0.7;
+		}
+
+		100% {
+			transform: translateX(50px) scale(0.8);
+			opacity: 0.5;
+		}
+	}
+
+	--animate-backOutRight: backOutRight 0.8s ease-in-out infinite;
+
+	@keyframes outRight {
+		0% {
+			transform: scale(1);
+			opacity: 1;
+		}
+
+		100% {
+			transform: translateX(50px);
+			opacity: 0.5;
+		}
+	}
+
+	--animate-outRight: outRight 0.8s ease-in-out infinite;
+
+	@keyframes outDown {
+		0% {
+			transform: scale(1);
+			opacity: 1;
+		}
+
+		100% {
+			transform: translateY(50px);
+			opacity: 0.5;
+		}
+	}
+
+	--animate-outDown: outDown 0.8s ease-in-out infinite;
+
+	@keyframes outUp {
+		0% {
+			transform: scale(1);
+			opacity: 1;
+		}
+
+		100% {
+			transform: translateY(-50px);
+			opacity: 0.5;
+		}
+	}
+
+	--animate-outUp: outUp 0.8s ease-in-out infinite;
+
+	@keyframes spinning {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	--animate-spinning: spinning 0.8s linear infinite;
+}
+
+@utility animate-tada {
+	animation: var(--animate-tada);
+}
+
+@utility animate-backOutLeft {
+	animation: var(--animate-backOutLeft);
+}
+
+@utility animate-backOutRight {
+	animation: var(--animate-backOutRight);
+}
+
+@utility animate-outRight {
+	animation: var(--animate-outRight);
+}
+
+@utility animate-outDown {
+	animation: var(--animate-outDown);
+}
+
+@utility animate-outUp {
+	animation: var(--animate-outUp);
+}
+
+@utility animate-spinning {
+	animation: var(--animate-spinning);
+}

package/app/consts.ts

@@ -0,0 +1,5 @@
+export const MIN_WINDOW_WIDTH: number = 1280
+export const MIN_WINDOW_HEIGHT: number = 700
+export const OPTIMAL_WIDTH: number = 1500
+
+export const AccessTokenCookieKey = 'cbh-access-token'

package/app/layouts/default.vue

@@ -0,0 +1,3 @@
+<template>
+	<slot />
+</template>

package/app/pages/index.vue

@@ -0,0 +1,7 @@
+<script setup>
+definePageMeta({ layout: 'default' })
+</script>
+
+<template>
+	<h1>Hello</h1>
+</template>

package/app/plugins/trpc.client.ts

@@ -0,0 +1,74 @@
+import { createTRPCProxyClient, httpBatchStreamLink, httpLink, splitLink } from '@trpc/client'
+import type { AppRouter } from '~/server/trpc/router'
+
+export default defineNuxtPlugin(() => {
+	const isLoading = ref(false)
+	const toast = useToast()
+
+	let activeRequests = 0
+
+	const getBaseUrl = () => {
+		if (import.meta.server) {
+			return process.env.NUXT_PUBLIC_API_URL || 'http://localhost:3000'
+		}
+		return ''
+	}
+
+	const client = createTRPCProxyClient<AppRouter>({
+		links: [
+			splitLink({
+				condition: (op) => op.path.includes('login') || op.path.includes('auth'),
+				true: httpLink({
+					url: `${getBaseUrl()}/api/trpc`,
+					fetch(url, options) {
+						return fetch(url, { ...options, credentials: 'include' })
+					},
+				}),
+				false: httpBatchStreamLink({
+					url: `${getBaseUrl()}/api/trpc`,
+					fetch(url, options) {
+						activeRequests++
+						isLoading.value = true
+						return fetch(url, {
+							...options,
+							credentials: 'include',
+						})
+							.then((response) => {
+								if (response.status >= 500) {
+									toast.add({
+										title: 'Server Error',
+										description: 'Something went wrong. Please try again.',
+										icon: 'i-lucide-server-crash',
+										color: 'error',
+									})
+								}
+								return response
+							})
+							.catch((error) => {
+								toast.add({
+									title: 'Connection Error',
+									description: 'Unable to reach the server.',
+									icon: 'i-lucide-server-off',
+									color: 'error',
+								})
+								throw error
+							})
+							.finally(() => {
+								activeRequests--
+								if (activeRequests === 0) {
+									isLoading.value = false
+								}
+							})
+					},
+				}),
+			}),
+		],
+	})
+
+	return {
+		provide: {
+			client,
+			trpcLoading: readonly(isLoading),
+		},
+	}
+})

package/app/stores/credential.ts

@@ -0,0 +1,45 @@
+import { defineStore } from 'pinia'
+
+export const useCredentialStore = defineStore('principia-credential', {
+	state: () => ({
+		email: '',
+		actor: '',
+		federation: '',
+		role: '',
+		flowID: '',
+		processID: '',
+		cookieExpiration: 0,
+	}),
+	getters: {
+		isAuthenticated: (state) => state.actor !== null && state.federation !== null,
+	},
+	actions: {
+		setCredentials(credentials: {
+			email: string
+			actor: string
+			federation: string
+			role: string
+			flowID: string
+			processID: string
+			cookieExpiration: number
+		}) {
+			this.email = credentials.email
+			this.actor = credentials.actor
+			this.federation = credentials.federation
+			this.role = credentials.role
+			this.flowID = credentials.flowID
+			this.processID = credentials.processID
+			this.cookieExpiration = credentials.cookieExpiration
+		},
+
+		logout() {
+			this.email = ''
+			this.actor = ''
+			this.federation = ''
+			this.role = ''
+			this.cookieExpiration = 0
+		},
+	},
+
+	persist: true,
+})

package/app/utils/Date.ts

@@ -0,0 +1,33 @@
+import { DateTime } from 'luxon'
+
+const DATE_FORMAT = 'yyyy-LL-dd'
+
+export const DISPLAY_DATE = 'dd / LLL / yyyy'
+export const DISPLAY_TIME = 'dd / LLL / yyyy HH:mm'
+
+export function dateToMillis(format: string) {
+	return DateTime.fromFormat(format, DATE_FORMAT).toMillis()
+}
+export function dateStartToMillis(format: string) {
+	return DateTime.fromFormat(format, DATE_FORMAT).startOf('day').toMillis()
+}
+export function dateEndToMillis(format: string) {
+	return DateTime.fromFormat(format, DATE_FORMAT).endOf('day').toMillis()
+}
+export function dateToFormat(millis?: number, format?: string) {
+	if (!millis) return undefined
+	return DateTime.fromMillis(millis).toFormat(format || DATE_FORMAT)
+}
+
+export function timeToFormat(millis?: number, format?: string) {
+	if (!millis) return undefined
+	return DateTime.fromMillis(millis).toFormat(format || DISPLAY_TIME)
+}
+
+export function isoToFormat(isoDate?: string, format?: string) {
+	return DateTime.fromISO(isoDate).toFormat(format || DATE_FORMAT)
+}
+
+export function nowISO() {
+	return DateTime.now().toISO()
+}

package/app/utils/colors.ts

@@ -0,0 +1,44 @@
+// "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
+// status — possible values: pending, scheduled, ready, running, paused, backing-off, suspended, completed
+// completion_result — only set when status = 'completed': success or failure
+
+export const colors = {
+	status: {
+		completed: 'success',
+		pending: 'info',
+		scheduled: 'info',
+		ready: 'info',
+		running: 'warning',
+		'backing-off': 'warning',
+		suspended: 'warning',
+		default: 'neutral',
+	},
+	completion: {
+		success: 'success',
+		failure: 'error',
+	},
+}
+
+export function componentColor(status: string, completion: string): string {
+	return colors.completion[completion] ?? colors.status[status] ?? colors.status.default
+}
+
+export function dotColor(status, completion_result): string {
+	return status !== 'completed'
+		? 'yellow'
+		: !completion_result
+			? 'ghost'
+			: completion_result === 'failure'
+				? 'red'
+				: 'green'
+}
+
+export function textColor(status, completion_result): string {
+	return status !== 'completed'
+		? 'text-warning'
+		: !completion_result
+			? 'text-info'
+			: completion_result === 'failure'
+				? 'text-error'
+				: 'text-success'
+}

package/app/utils/workflow.ts

@@ -0,0 +1,7 @@
+export const isFinished = (callChain) => {
+	return callChain?.status === 'completed'
+}
+
+export const wfOutput = (callChain) => {
+	return callChain?.journal?.result ?? callChain?.completion_failure
+}

package/nuxt.config.ts

@@ -0,0 +1,57 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+	ssr: false,
+	compatibilityDate: '2025-07-15',
+	devtools: { enabled: true },
+	experimental: {
+		asyncContext: true,
+	},
+	build: {
+		transpile: [],
+	},
+	modules: [
+		'@vueuse/nuxt',
+		'@pinia/nuxt',
+		'pinia-plugin-persistedstate/nuxt',
+		'@nuxtjs/color-mode',
+		'@nuxt/ui',
+		'@nuxt/fonts',
+		'@nuxtjs/tailwindcss',
+	],
+
+	css: ['~/assets/css/main.css'],
+
+	fonts: {
+		families: [{ name: 'Montserrat', provider: 'google' }],
+		providers: {
+			fontshare: false,
+		},
+	},
+
+	ui: {
+		theme: {
+			colors: [
+				'primary',
+				'secondary',
+				'success',
+				'info',
+				'warning',
+				'error',
+				'neutral',
+				'cbh',
+			],
+		},
+	},
+
+	vite: {
+		server: {
+			watch: {
+				usePolling: true,
+			},
+		},
+	},
+
+	nitro: {
+		plugins: [],
+	},
+})

package/package.json

@@ -0,0 +1,61 @@
+{
+	"name": "@empyria/webui",
+	"version": "0.1.1",
+	"description": "Restate.dev helpers for the Empyria nanoservice framework",
+	"license": "MIT",
+	"author": "Imre Fazekas <imre.fazekas@icloud.com>",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/empyria-nano/guard-web.git"
+	},
+	"type": "module",
+	"scripts": {
+		"build": "nuxt build",
+		"dev": "nuxt dev",
+		"generate": "nuxt generate",
+		"preview": "nuxt preview",
+		"postinstall": "nuxt prepare",
+		"typecheck": "nuxt typecheck",
+		"clean": "pkill -9 -f 'nuxt dev' 2>/dev/null; rm -rf .nuxt .output dist node_modules/.cache node_modules/.vite",
+		"format": "bun oxfmt --check",
+		"format:fix": "bun oxfmt",
+		"lint": "bun oxlint",
+		"lint:fix": "bun oxlint --fix"
+	},
+	"dependencies": {
+		"@empyria/common": "0.1.2",
+		"@iconify-json/lucide": "^1.2.124",
+		"@iconify-json/simple-icons": "^1.2.93",
+		"@pinia/nuxt": "^1.0.2",
+		"@simplewebauthn/browser": "^13.3.0",
+		"@trpc/client": "^11.18.0",
+		"@trpc/server": "^11.18.0",
+		"@vueuse/core": "^14.4.0",
+		"@vueuse/nuxt": "^14.4.0",
+		"croner": "^10.0.1",
+		"cronstrue": "^3.24.0",
+		"moleculer": "0.15.1",
+		"ms": "^2.1.3",
+		"pinia-plugin-persistedstate": "^4.7.1",
+		"vue": "^3.5.41",
+		"vue-cal": "^5.0.1-rc.34",
+		"vue-router": "^5.2.0"
+	},
+	"devDependencies": {
+		"@nuxt/fonts": "^0.14.0",
+		"@nuxt/ui": "^4.10.0",
+		"@nuxtjs/tailwindcss": "7.0.0-beta.1",
+		"@tailwindcss/typography": "^0.5.20",
+		"nuxt": "^4.5.2",
+		"tailwindcss": "^4.3.3",
+		"typescript": "^7.0.2",
+		"vue-tsc": "^3.3.10",
+		"oxfmt": "0.64.0",
+		"oxlint": "1.79.0"
+	},
+	"engines": {
+		"bun": ">=1.4.0",
+		"node": ">=26"
+	},
+	"packageManager": "bun@1.4.0"
+}

package/renovate.json

@@ -0,0 +1,13 @@
+{
+	"extends": ["github>nuxt/renovate-config-nuxt"],
+	"lockFileMaintenance": {
+		"enabled": true
+	},
+	"packageRules": [
+		{
+			"matchDepTypes": ["resolutions"],
+			"enabled": false
+		}
+	],
+	"postUpdateOptions": ["pnpmDedupe"]
+}

package/server/api/trpc/[trpc].ts

@@ -0,0 +1,16 @@
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
+import { createContext } from '../../trpc/context'
+import { appRouter } from '../../routers'
+
+export default defineEventHandler(async (event) => {
+	// console.log('✅ Test route hit!')
+
+	const request = toWebRequest(event)
+
+	return fetchRequestHandler({
+		endpoint: '/api/trpc',
+		req: request,
+		router: appRouter,
+		createContext: () => createContext(event),
+	})
+})

package/server/env.js

@@ -0,0 +1,7 @@
+import { createEnv, validate } from '@empyria/common'
+
+const schema = createEnv({})
+
+export const env = validate(schema, { ...process.env }, { coerceTypes: true })
+
+export const settings = Object.assign({}, env, {})

package/server/routers/index.ts

@@ -0,0 +1,6 @@
+// server/trpc/router.ts
+import { router } from '../trpc'
+
+export const appRouter = router({})
+
+export type AppRouter = typeof appRouter

package/server/trpc/context.ts

@@ -0,0 +1,33 @@
+import { type CookieSerializeOptions } from 'cookie-es'
+import {
+	type H3Event,
+	parseCookies,
+	getCookie as getCookieFromEvent,
+	setCookie as setCookieOnEvent,
+	deleteCookie as deleteCookieOnEvent,
+} from 'h3'
+import { AccessTokenCookieKey } from '../../app/consts'
+
+export const createContext = async (event: H3Event) => {
+	const getCookie = (name: string) => getCookieFromEvent(event, name)
+	const setCookie = (name: string, value: string, serializeOptions?: CookieSerializeOptions) =>
+		setCookieOnEvent(event, name, value, serializeOptions)
+	const deleteCookie = (name: string, serializeOptions?: CookieSerializeOptions) =>
+		deleteCookieOnEvent(event, name, serializeOptions)
+
+	const tokenKey = getCookie(AccessTokenCookieKey)
+	if (tokenKey) {
+		event.context.tokenKey = tokenKey
+	}
+
+	return {
+		event,
+		cookies: parseCookies(event),
+		getCookie,
+		setCookie,
+		deleteCookie,
+		headers: event.headers,
+	}
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>

package/server/trpc/index.ts

@@ -0,0 +1,72 @@
+// server/trpc/trpc.ts
+import { initTRPC, TRPCError } from '@trpc/server'
+
+import { createValidator } from '@empyria/common'
+
+import { AccessTokenCookieKey } from '../../app/consts'
+import type { Context } from './context'
+
+const t = initTRPC.context<Context>().create()
+
+/**
+ * Public procedure - no authentication required
+ */
+export const publicProcedure = t.procedure
+
+/**
+ * Authorized procedure - requires access token in cookie
+ */
+export const authorizedProcedure = t.procedure.use(async ({ ctx, next }) => {
+	const tokenKey = ctx.getCookie(AccessTokenCookieKey)
+
+	if (!tokenKey) {
+		throw new TRPCError({
+			code: 'UNAUTHORIZED',
+			message: 'You are not authorized to make this request',
+		})
+	}
+
+	// Token is validated, proceed with request
+	return next()
+})
+
+// Passthrough parser - accepts any input and returns it as-is
+const passthroughParser = {
+	parse: (input: unknown) => input,
+}
+
+export const validatedMiddleware = (schema: object) => {
+	const validate = createValidator(schema)
+
+	return middleware(async ({ next, getRawInput }) => {
+		const rawInput = await getRawInput()
+		try {
+			validate(rawInput)
+		} catch (err) {
+			throw new TRPCError({
+				code: 'BAD_REQUEST',
+				message: 'Validation failed',
+				cause: {
+					errors: [err],
+					input: rawInput,
+				},
+			})
+		}
+		return next()
+	})
+}
+
+/**
+ * Add AJV validation to any procedure
+ * @param baseProcedure - The base procedure (publicProcedure or authorizedProcedure)
+ * @param schema - The AJV schema to validate against
+ */
+export const validatedProcedure = <T extends typeof publicProcedure>(
+	baseProcedure: T,
+	schema: object,
+) => {
+	return baseProcedure.input(passthroughParser).use(validatedMiddleware(schema))
+}
+
+export const router = t.router
+export const middleware = t.middleware

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	// https://nuxt.com/docs/guide/concepts/typescript
+	"files": [],
+	"references": [
+		{ "path": "./.nuxt/tsconfig.app.json" },
+		{ "path": "./.nuxt/tsconfig.server.json" },
+		{ "path": "./.nuxt/tsconfig.shared.json" },
+		{ "path": "./.nuxt/tsconfig.node.json" }
+	]
+}