@alepha/devtools 0.11.3 → 0.11.4

package/dist/index.mjs

@@ -0,0 +1,360 @@
+import { $hook, $inject, $module, Alepha, t } from "@alepha/core";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { $bucket } from "@alepha/bucket";
+import { $cache } from "@alepha/cache";
+import { $logger, logEntrySchema } from "@alepha/logger";
+import { $queue } from "@alepha/queue";
+import { $page } from "@alepha/react";
+import { $scheduler } from "@alepha/scheduler";
+import { $realm } from "@alepha/security";
+import { $action, $route, ServerProvider } from "@alepha/server";
+import { $serve } from "@alepha/server-static";
+import { $topic } from "@alepha/topic";
+
+//#region src/schemas/DevActionMetadata.ts
+const devActionMetadataSchema = t.object({
+	name: t.text(),
+	group: t.text(),
+	method: t.text(),
+	path: t.text(),
+	prefix: t.text(),
+	fullPath: t.text(),
+	description: t.optional(t.text()),
+	summary: t.optional(t.text()),
+	disabled: t.optional(t.boolean()),
+	secure: t.optional(t.boolean()),
+	hide: t.optional(t.boolean()),
+	body: t.optional(t.any()),
+	params: t.optional(t.any()),
+	query: t.optional(t.any()),
+	response: t.optional(t.any()),
+	bodyContentType: t.optional(t.text())
+});
+
+//#endregion
+//#region src/schemas/DevBucketMetadata.ts
+const devBucketMetadataSchema = t.object({
+	name: t.text(),
+	description: t.optional(t.text()),
+	mimeTypes: t.optional(t.array(t.text())),
+	maxSize: t.optional(t.number()),
+	provider: t.text()
+});
+
+//#endregion
+//#region src/schemas/DevCacheMetadata.ts
+const devCacheMetadataSchema = t.object({
+	name: t.text(),
+	ttl: t.optional(t.any()),
+	disabled: t.optional(t.boolean()),
+	provider: t.text()
+});
+
+//#endregion
+//#region src/schemas/DevModuleMetadata.ts
+const devModuleMetadataSchema = t.object({
+	name: t.text(),
+	providers: t.array(t.text())
+});
+
+//#endregion
+//#region src/schemas/DevPageMetadata.ts
+const devPageMetadataSchema = t.object({
+	name: t.text(),
+	description: t.optional(t.text()),
+	path: t.optional(t.text()),
+	params: t.optional(t.any()),
+	query: t.optional(t.any()),
+	hasComponent: t.boolean(),
+	hasLazy: t.boolean(),
+	hasResolve: t.boolean(),
+	hasChildren: t.boolean(),
+	hasParent: t.boolean(),
+	hasErrorHandler: t.boolean(),
+	static: t.optional(t.boolean()),
+	cache: t.optional(t.any()),
+	client: t.optional(t.any()),
+	animation: t.optional(t.any())
+});
+
+//#endregion
+//#region src/schemas/DevProviderMetadata.ts
+const devProviderMetadataSchema = t.object({
+	name: t.text(),
+	module: t.optional(t.text()),
+	dependencies: t.array(t.text()),
+	aliases: t.optional(t.array(t.text()))
+});
+
+//#endregion
+//#region src/schemas/DevQueueMetadata.ts
+const devQueueMetadataSchema = t.object({
+	name: t.text(),
+	description: t.optional(t.text()),
+	schema: t.optional(t.any()),
+	provider: t.text()
+});
+
+//#endregion
+//#region src/schemas/DevRealmMetadata.ts
+const devRealmMetadataSchema = t.object({
+	name: t.text(),
+	description: t.optional(t.text()),
+	roles: t.optional(t.array(t.any())),
+	type: t.enum(["internal", "external"]),
+	settings: t.optional(t.object({
+		accessTokenExpiration: t.optional(t.any()),
+		refreshTokenExpiration: t.optional(t.any()),
+		hasOnCreateSession: t.boolean(),
+		hasOnRefreshSession: t.boolean(),
+		hasOnDeleteSession: t.boolean()
+	}))
+});
+
+//#endregion
+//#region src/schemas/DevSchedulerMetadata.ts
+const devSchedulerMetadataSchema = t.object({
+	name: t.text(),
+	description: t.optional(t.text()),
+	cron: t.optional(t.text()),
+	interval: t.optional(t.any()),
+	lock: t.optional(t.boolean())
+});
+
+//#endregion
+//#region src/schemas/DevTopicMetadata.ts
+const devTopicMetadataSchema = t.object({
+	name: t.text(),
+	description: t.optional(t.text()),
+	schema: t.optional(t.any()),
+	provider: t.text()
+});
+
+//#endregion
+//#region src/schemas/DevMetadata.ts
+const devMetadataSchema = t.object({
+	actions: t.array(devActionMetadataSchema),
+	queues: t.array(devQueueMetadataSchema),
+	schedulers: t.array(devSchedulerMetadataSchema),
+	topics: t.array(devTopicMetadataSchema),
+	buckets: t.array(devBucketMetadataSchema),
+	realms: t.array(devRealmMetadataSchema),
+	caches: t.array(devCacheMetadataSchema),
+	pages: t.array(devPageMetadataSchema),
+	providers: t.array(devProviderMetadataSchema),
+	modules: t.array(devModuleMetadataSchema)
+});
+
+//#endregion
+//#region src/DevCollectorProvider.ts
+var DevCollectorProvider = class {
+	alepha = $inject(Alepha);
+	serverProvider = $inject(ServerProvider);
+	log = $logger();
+	logs = [];
+	maxLogs = 1e4;
+	onStart = $hook({
+		on: "start",
+		handler: () => {
+			this.log.info(`Devtools available at ${this.serverProvider.hostname}/devtools/`);
+		}
+	});
+	onLog = $hook({
+		on: "log",
+		handler: (ev) => {
+			this.logs.unshift(ev.entry);
+			if (this.logs.length > this.maxLogs) this.logs.pop();
+		}
+	});
+	uiRoute = $serve({
+		path: "/devtools",
+		root: join(fileURLToPath(import.meta.url), "../../assets/devtools")
+	});
+	metadataRoute = $route({
+		method: "GET",
+		path: "/devtools/api/metadata",
+		silent: true,
+		schema: { response: devMetadataSchema },
+		handler: () => {
+			return this.getMetadata();
+		}
+	});
+	logsRoute = $route({
+		method: "GET",
+		path: "/devtools/api/logs",
+		silent: true,
+		schema: { response: t.array(logEntrySchema) },
+		handler: () => {
+			return this.getLogs();
+		}
+	});
+	getLogs() {
+		return this.logs;
+	}
+	getActions() {
+		return this.alepha.descriptors($action).map((action) => {
+			const schema = action.schema;
+			const options = action.options;
+			return {
+				name: action.name,
+				group: action.group,
+				method: action.method,
+				path: action.path,
+				prefix: action.prefix,
+				fullPath: action.route.path,
+				description: action.options.description,
+				summary: options.summary,
+				disabled: action.options.disabled,
+				secure: options.secure,
+				hide: options.hide,
+				body: schema?.body,
+				params: schema?.params,
+				query: schema?.query,
+				response: schema?.response,
+				bodyContentType: action.getBodyContentType()
+			};
+		});
+	}
+	getQueues() {
+		return this.alepha.descriptors($queue).map((queue) => ({
+			name: queue.name,
+			description: queue.options.description,
+			schema: queue.options.schema,
+			provider: this.getProviderName(queue.options.provider)
+		}));
+	}
+	getSchedulers() {
+		return this.alepha.descriptors($scheduler).map((scheduler) => ({
+			name: scheduler.name,
+			description: scheduler.options.description,
+			cron: scheduler.options.cron,
+			interval: scheduler.options.interval,
+			lock: scheduler.options.lock
+		}));
+	}
+	getTopics() {
+		return this.alepha.descriptors($topic).map((topic) => ({
+			name: topic.name,
+			description: topic.options.description,
+			schema: topic.options.schema,
+			provider: this.getProviderName(topic.options.provider)
+		}));
+	}
+	getBuckets() {
+		return this.alepha.descriptors($bucket).map((bucket) => ({
+			name: bucket.name,
+			description: bucket.options.description,
+			mimeTypes: bucket.options.mimeTypes,
+			maxSize: bucket.options.maxSize,
+			provider: this.getProviderName(bucket.options.provider)
+		}));
+	}
+	getRealms() {
+		return this.alepha.descriptors($realm).map((realm) => ({
+			name: realm.name,
+			description: realm.options.description,
+			roles: realm.options.roles,
+			type: "secret" in realm.options ? "internal" : "external",
+			settings: {
+				accessTokenExpiration: realm.options.settings?.accessToken?.expiration,
+				refreshTokenExpiration: realm.options.settings?.refreshToken?.expiration,
+				hasOnCreateSession: !!realm.options.settings?.onCreateSession,
+				hasOnRefreshSession: !!realm.options.settings?.onRefreshSession,
+				hasOnDeleteSession: !!realm.options.settings?.onDeleteSession
+			}
+		}));
+	}
+	getCaches() {
+		return this.alepha.descriptors($cache).map((cache) => ({
+			name: cache.container,
+			ttl: cache.options.ttl,
+			disabled: cache.options.disabled,
+			provider: this.getProviderName(cache.options.provider)
+		}));
+	}
+	getPages() {
+		return this.alepha.descriptors($page).map((page) => ({
+			name: page.name,
+			description: page.options.description,
+			path: page.options.path,
+			params: page.options.schema?.params,
+			query: page.options.schema?.query,
+			hasComponent: !!page.options.component,
+			hasLazy: !!page.options.lazy,
+			hasResolve: !!page.options.resolve,
+			hasChildren: !!page.options.children,
+			hasParent: !!page.options.parent,
+			hasErrorHandler: !!page.options.errorHandler,
+			static: typeof page.options.static === "boolean" ? page.options.static : !!page.options.static,
+			cache: page.options.cache,
+			client: page.options.client,
+			animation: page.options.animation
+		}));
+	}
+	getProviders() {
+		const graph = this.alepha.graph();
+		return Object.entries(graph).map(([name, info]) => ({
+			name,
+			module: info.module,
+			dependencies: info.from,
+			aliases: info.as
+		}));
+	}
+	getModules() {
+		const graph = this.alepha.graph();
+		const moduleMap = /* @__PURE__ */ new Map();
+		for (const [providerName, info] of Object.entries(graph)) if (info.module) {
+			if (!moduleMap.has(info.module)) moduleMap.set(info.module, /* @__PURE__ */ new Set());
+			moduleMap.get(info.module).add(providerName);
+		}
+		return Array.from(moduleMap.entries()).map(([name, providers]) => ({
+			name,
+			providers: Array.from(providers)
+		}));
+	}
+	getMetadata() {
+		return {
+			actions: this.getActions(),
+			queues: this.getQueues(),
+			schedulers: this.getSchedulers(),
+			topics: this.getTopics(),
+			buckets: this.getBuckets(),
+			realms: this.getRealms(),
+			caches: this.getCaches(),
+			pages: this.getPages(),
+			providers: this.getProviders(),
+			modules: this.getModules()
+		};
+	}
+	getProviderName(provider) {
+		if (!provider) return "default";
+		if (provider === "memory") return "memory";
+		return provider.name || "custom";
+	}
+};
+
+//#endregion
+//#region src/index.ts
+/**
+* Developer tools module for monitoring and debugging Alepha applications.
+*
+* This module provides comprehensive data collection capabilities for tracking application behavior,
+* performance metrics, and debugging information in real-time.
+*
+* @see {@link DevCollectorProvider}
+* @module alepha.devtools
+*/
+const AlephaDevtools = $module({
+	name: "alepha.devtools",
+	descriptors: [],
+	services: [DevCollectorProvider],
+	register: (alepha) => {
+		alepha.with(DevCollectorProvider);
+		alepha.state.push("assets", "@alepha/devtools");
+	}
+});
+
+//#endregion
+export { AlephaDevtools, DevCollectorProvider, devActionMetadataSchema, devBucketMetadataSchema, devCacheMetadataSchema, devMetadataSchema, devModuleMetadataSchema, devPageMetadataSchema, devProviderMetadataSchema, devQueueMetadataSchema, devRealmMetadataSchema, devSchedulerMetadataSchema, devTopicMetadataSchema };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/schemas/DevActionMetadata.ts","../src/schemas/DevBucketMetadata.ts","../src/schemas/DevCacheMetadata.ts","../src/schemas/DevModuleMetadata.ts","../src/schemas/DevPageMetadata.ts","../src/schemas/DevProviderMetadata.ts","../src/schemas/DevQueueMetadata.ts","../src/schemas/DevRealmMetadata.ts","../src/schemas/DevSchedulerMetadata.ts","../src/schemas/DevTopicMetadata.ts","../src/schemas/DevMetadata.ts","../src/DevCollectorProvider.ts","../src/index.ts"],"sourcesContent":["import { type Static, t } from \"@alepha/core\";\n\nexport const devActionMetadataSchema = t.object({\n  name: t.text(),\n  group: t.text(),\n  method: t.text(),\n  path: t.text(),\n  prefix: t.text(),\n  fullPath: t.text(),\n  description: t.optional(t.text()),\n  summary: t.optional(t.text()),\n  disabled: t.optional(t.boolean()),\n  secure: t.optional(t.boolean()),\n  hide: t.optional(t.boolean()),\n  body: t.optional(t.any()),\n  params: t.optional(t.any()),\n  query: t.optional(t.any()),\n  response: t.optional(t.any()),\n  bodyContentType: t.optional(t.text()),\n});\n\nexport type DevActionMetadata = Static<typeof devActionMetadataSchema>;\n","import { type Static, t } from \"@alepha/core\";\n\nexport const devBucketMetadataSchema = t.object({\n  name: t.text(),\n  description: t.optional(t.text()),\n  mimeTypes: t.optional(t.array(t.text())),\n  maxSize: t.optional(t.number()),\n  provider: t.text(),\n});\n\nexport type DevBucketMetadata = Static<typeof devBucketMetadataSchema>;\n","import { type Static, t } from \"@alepha/core\";\n\nexport const devCacheMetadataSchema = t.object({\n  name: t.text(),\n  ttl: t.optional(t.any()),\n  disabled: t.optional(t.boolean()),\n  provider: t.text(),\n});\n\nexport type DevCacheMetadata = Static<typeof devCacheMetadataSchema>;\n","import { type Static, t } from \"@alepha/core\";\n\nexport const devModuleMetadataSchema = t.object({\n  name: t.text(),\n  providers: t.array(t.text()),\n});\n\nexport type DevModuleMetadata = Static<typeof devModuleMetadataSchema>;\n","import { type Static, t } from \"@alepha/core\";\n\nexport const devPageMetadataSchema = t.object({\n  name: t.text(),\n  description: t.optional(t.text()),\n  path: t.optional(t.text()),\n  params: t.optional(t.any()),\n  query: t.optional(t.any()),\n  hasComponent: t.boolean(),\n  hasLazy: t.boolean(),\n  hasResolve: t.boolean(),\n  hasChildren: t.boolean(),\n  hasParent: t.boolean(),\n  hasErrorHandler: t.boolean(),\n  static: t.optional(t.boolean()),\n  cache: t.optional(t.any()),\n  client: t.optional(t.any()),\n  animation: t.optional(t.any()),\n});\n\nexport type DevPageMetadata = Static<typeof devPageMetadataSchema>;\n","import { type Static, t } from \"@alepha/core\";\n\nexport const devProviderMetadataSchema = t.object({\n  name: t.text(),\n  module: t.optional(t.text()),\n  dependencies: t.array(t.text()),\n  aliases: t.optional(t.array(t.text())),\n});\n\nexport type DevProviderMetadata = Static<typeof devProviderMetadataSchema>;\n","import { type Static, t } from \"@alepha/core\";\n\nexport const devQueueMetadataSchema = t.object({\n  name: t.text(),\n  description: t.optional(t.text()),\n  schema: t.optional(t.any()),\n  provider: t.text(),\n});\n\nexport type DevQueueMetadata = Static<typeof devQueueMetadataSchema>;\n","import { type Static, t } from \"@alepha/core\";\n\nexport const devRealmMetadataSchema = t.object({\n  name: t.text(),\n  description: t.optional(t.text()),\n  roles: t.optional(t.array(t.any())),\n  type: t.enum([\"internal\", \"external\"]),\n  settings: t.optional(\n    t.object({\n      accessTokenExpiration: t.optional(t.any()),\n      refreshTokenExpiration: t.optional(t.any()),\n      hasOnCreateSession: t.boolean(),\n      hasOnRefreshSession: t.boolean(),\n      hasOnDeleteSession: t.boolean(),\n    }),\n  ),\n});\n\nexport type DevRealmMetadata = Static<typeof devRealmMetadataSchema>;\n","import { type Static, t } from \"@alepha/core\";\n\nexport const devSchedulerMetadataSchema = t.object({\n  name: t.text(),\n  description: t.optional(t.text()),\n  cron: t.optional(t.text()),\n  interval: t.optional(t.any()),\n  lock: t.optional(t.boolean()),\n});\n\nexport type DevSchedulerMetadata = Static<typeof devSchedulerMetadataSchema>;\n","import { type Static, t } from \"@alepha/core\";\n\nexport const devTopicMetadataSchema = t.object({\n  name: t.text(),\n  description: t.optional(t.text()),\n  schema: t.optional(t.any()),\n  provider: t.text(),\n});\n\nexport type DevTopicMetadata = Static<typeof devTopicMetadataSchema>;\n","import { type Static, t } from \"@alepha/core\";\nimport { devActionMetadataSchema } from \"./DevActionMetadata.ts\";\nimport { devBucketMetadataSchema } from \"./DevBucketMetadata.ts\";\nimport { devCacheMetadataSchema } from \"./DevCacheMetadata.ts\";\nimport { devModuleMetadataSchema } from \"./DevModuleMetadata.ts\";\nimport { devPageMetadataSchema } from \"./DevPageMetadata.ts\";\nimport { devProviderMetadataSchema } from \"./DevProviderMetadata.ts\";\nimport { devQueueMetadataSchema } from \"./DevQueueMetadata.ts\";\nimport { devRealmMetadataSchema } from \"./DevRealmMetadata.ts\";\nimport { devSchedulerMetadataSchema } from \"./DevSchedulerMetadata.ts\";\nimport { devTopicMetadataSchema } from \"./DevTopicMetadata.ts\";\n\nexport const devMetadataSchema = t.object({\n  actions: t.array(devActionMetadataSchema),\n  queues: t.array(devQueueMetadataSchema),\n  schedulers: t.array(devSchedulerMetadataSchema),\n  topics: t.array(devTopicMetadataSchema),\n  buckets: t.array(devBucketMetadataSchema),\n  realms: t.array(devRealmMetadataSchema),\n  caches: t.array(devCacheMetadataSchema),\n  pages: t.array(devPageMetadataSchema),\n  providers: t.array(devProviderMetadataSchema),\n  modules: t.array(devModuleMetadataSchema),\n  // More metadata will be added here later\n});\n\nexport type DevMetadata = Static<typeof devMetadataSchema>;\n","import { join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport { $bucket } from \"@alepha/bucket\";\nimport { $cache } from \"@alepha/cache\";\nimport { $hook, $inject, Alepha, t } from \"@alepha/core\";\nimport { $logger, type LogEntry, logEntrySchema } from \"@alepha/logger\";\nimport { $queue } from \"@alepha/queue\";\nimport { $page } from \"@alepha/react\";\nimport { $scheduler } from \"@alepha/scheduler\";\nimport { $realm } from \"@alepha/security\";\nimport { $action, $route, ServerProvider } from \"@alepha/server\";\nimport { $serve } from \"@alepha/server-static\";\nimport { $topic } from \"@alepha/topic\";\nimport type { DevActionMetadata } from \"./schemas/DevActionMetadata.ts\";\nimport type { DevBucketMetadata } from \"./schemas/DevBucketMetadata.ts\";\nimport type { DevCacheMetadata } from \"./schemas/DevCacheMetadata.ts\";\nimport { type DevMetadata, devMetadataSchema } from \"./schemas/DevMetadata.ts\";\nimport type { DevModuleMetadata } from \"./schemas/DevModuleMetadata.ts\";\nimport type { DevPageMetadata } from \"./schemas/DevPageMetadata.ts\";\nimport type { DevProviderMetadata } from \"./schemas/DevProviderMetadata.ts\";\nimport type { DevQueueMetadata } from \"./schemas/DevQueueMetadata.ts\";\nimport type { DevRealmMetadata } from \"./schemas/DevRealmMetadata.ts\";\nimport type { DevSchedulerMetadata } from \"./schemas/DevSchedulerMetadata.ts\";\nimport type { DevTopicMetadata } from \"./schemas/DevTopicMetadata.ts\";\n\nexport class DevCollectorProvider {\n  protected readonly alepha = $inject(Alepha);\n  protected readonly serverProvider = $inject(ServerProvider);\n  protected readonly log = $logger();\n  protected readonly logs: LogEntry[] = [];\n  protected readonly maxLogs = 10000;\n\n  protected readonly onStart = $hook({\n    on: \"start\",\n    handler: () => {\n      this.log.info(\n        `Devtools available at ${this.serverProvider.hostname}/devtools/`,\n      );\n    },\n  });\n\n  protected readonly onLog = $hook({\n    on: \"log\",\n    handler: (ev: { message?: string; entry: LogEntry }) => {\n      this.logs.unshift(ev.entry);\n\n      // keep only the last 10000 logs\n      if (this.logs.length > this.maxLogs) {\n        this.logs.pop();\n      }\n    },\n  });\n\n  protected readonly uiRoute = $serve({\n    path: \"/devtools\",\n    root: join(fileURLToPath(import.meta.url), \"../../assets/devtools\"),\n  });\n\n  protected readonly metadataRoute = $route({\n    method: \"GET\",\n    path: \"/devtools/api/metadata\",\n    silent: true,\n    schema: {\n      response: devMetadataSchema,\n    },\n    handler: () => {\n      return this.getMetadata();\n    },\n  });\n\n  protected readonly logsRoute = $route({\n    method: \"GET\",\n    path: \"/devtools/api/logs\",\n    silent: true,\n    schema: {\n      response: t.array(logEntrySchema),\n    },\n    handler: () => {\n      return this.getLogs();\n    },\n  });\n\n  public getLogs(): LogEntry[] {\n    return this.logs;\n  }\n\n  // -------------------------------------------------------------------------------------------------------------------\n\n  public getActions(): DevActionMetadata[] {\n    const actionDescriptors = this.alepha.descriptors($action);\n\n    return actionDescriptors.map((action) => {\n      const schema = action.schema;\n      const options = action.options as any; // Allow accessing augmented properties\n\n      return {\n        name: action.name,\n        group: action.group,\n        method: action.method,\n        path: action.path,\n        prefix: action.prefix,\n        fullPath: action.route.path,\n        description: action.options.description,\n        summary: options.summary,\n        disabled: action.options.disabled,\n        secure: options.secure,\n        hide: options.hide,\n        body: schema?.body,\n        params: schema?.params,\n        query: schema?.query,\n        response: schema?.response,\n        bodyContentType: action.getBodyContentType(),\n      };\n    });\n  }\n\n  public getQueues(): DevQueueMetadata[] {\n    const queueDescriptors = this.alepha.descriptors($queue);\n\n    return queueDescriptors.map((queue) => ({\n      name: queue.name,\n      description: queue.options.description,\n      schema: queue.options.schema,\n      provider: this.getProviderName(queue.options.provider),\n    }));\n  }\n\n  public getSchedulers(): DevSchedulerMetadata[] {\n    const schedulerDescriptors = this.alepha.descriptors($scheduler);\n\n    return schedulerDescriptors.map((scheduler) => ({\n      name: scheduler.name,\n      description: scheduler.options.description,\n      cron: scheduler.options.cron,\n      interval: scheduler.options.interval,\n      lock: scheduler.options.lock,\n    }));\n  }\n\n  public getTopics(): DevTopicMetadata[] {\n    const topicDescriptors = this.alepha.descriptors($topic);\n\n    return topicDescriptors.map((topic) => ({\n      name: topic.name,\n      description: topic.options.description,\n      schema: topic.options.schema,\n      provider: this.getProviderName(topic.options.provider),\n    }));\n  }\n\n  public getBuckets(): DevBucketMetadata[] {\n    const bucketDescriptors = this.alepha.descriptors($bucket);\n\n    return bucketDescriptors.map((bucket) => ({\n      name: bucket.name,\n      description: bucket.options.description,\n      mimeTypes: bucket.options.mimeTypes,\n      maxSize: bucket.options.maxSize,\n      provider: this.getProviderName(bucket.options.provider),\n    }));\n  }\n\n  public getRealms(): DevRealmMetadata[] {\n    const realmDescriptors = this.alepha.descriptors($realm);\n\n    return realmDescriptors.map((realm) => ({\n      name: realm.name,\n      description: realm.options.description,\n      roles: realm.options.roles,\n      type: \"secret\" in realm.options ? \"internal\" : \"external\",\n      settings: {\n        accessTokenExpiration: realm.options.settings?.accessToken?.expiration,\n        refreshTokenExpiration:\n          realm.options.settings?.refreshToken?.expiration,\n        hasOnCreateSession: !!realm.options.settings?.onCreateSession,\n        hasOnRefreshSession: !!realm.options.settings?.onRefreshSession,\n        hasOnDeleteSession: !!realm.options.settings?.onDeleteSession,\n      },\n    }));\n  }\n\n  public getCaches(): DevCacheMetadata[] {\n    const cacheDescriptors = this.alepha.descriptors($cache);\n\n    return cacheDescriptors.map((cache) => ({\n      name: cache.container,\n      ttl: cache.options.ttl,\n      disabled: cache.options.disabled,\n      provider: this.getProviderName(cache.options.provider),\n    }));\n  }\n\n  public getPages(): DevPageMetadata[] {\n    const pageDescriptors = this.alepha.descriptors($page);\n\n    return pageDescriptors.map((page) => ({\n      name: page.name,\n      description: page.options.description,\n      path: page.options.path,\n      params: page.options.schema?.params,\n      query: page.options.schema?.query,\n      hasComponent: !!page.options.component,\n      hasLazy: !!page.options.lazy,\n      hasResolve: !!page.options.resolve,\n      hasChildren: !!page.options.children,\n      hasParent: !!page.options.parent,\n      hasErrorHandler: !!page.options.errorHandler,\n      static:\n        typeof page.options.static === \"boolean\"\n          ? page.options.static\n          : !!page.options.static,\n      cache: page.options.cache,\n      client: page.options.client,\n      animation: page.options.animation,\n    }));\n  }\n\n  public getProviders(): DevProviderMetadata[] {\n    const graph = this.alepha.graph();\n\n    return Object.entries(graph).map(([name, info]) => ({\n      name,\n      module: info.module,\n      dependencies: info.from,\n      aliases: info.as,\n    }));\n  }\n\n  public getModules(): DevModuleMetadata[] {\n    const graph = this.alepha.graph();\n    const moduleMap = new Map<string, Set<string>>();\n\n    // Group providers by module\n    for (const [providerName, info] of Object.entries(graph)) {\n      if (info.module) {\n        if (!moduleMap.has(info.module)) {\n          moduleMap.set(info.module, new Set());\n        }\n        moduleMap.get(info.module)!.add(providerName);\n      }\n    }\n\n    return Array.from(moduleMap.entries()).map(([name, providers]) => ({\n      name,\n      providers: Array.from(providers),\n    }));\n  }\n\n  public getMetadata(): DevMetadata {\n    return {\n      actions: this.getActions(),\n      queues: this.getQueues(),\n      schedulers: this.getSchedulers(),\n      topics: this.getTopics(),\n      buckets: this.getBuckets(),\n      realms: this.getRealms(),\n      caches: this.getCaches(),\n      pages: this.getPages(),\n      providers: this.getProviders(),\n      modules: this.getModules(),\n    };\n  }\n\n  // -------------------------------------------------------------------------------------------------------------------\n\n  protected getProviderName(provider?: \"memory\" | any): string {\n    if (!provider) {\n      return \"default\";\n    }\n    if (provider === \"memory\") {\n      return \"memory\";\n    }\n    return provider.name || \"custom\";\n  }\n}\n","import { $module } from \"@alepha/core\";\nimport { DevCollectorProvider } from \"./DevCollectorProvider.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport * from \"./DevCollectorProvider.ts\";\nexport * from \"./schemas/DevActionMetadata.ts\";\nexport * from \"./schemas/DevBucketMetadata.ts\";\nexport * from \"./schemas/DevCacheMetadata.ts\";\nexport * from \"./schemas/DevMetadata.ts\";\nexport * from \"./schemas/DevModuleMetadata.ts\";\nexport * from \"./schemas/DevPageMetadata.ts\";\nexport * from \"./schemas/DevProviderMetadata.ts\";\nexport * from \"./schemas/DevQueueMetadata.ts\";\nexport * from \"./schemas/DevRealmMetadata.ts\";\nexport * from \"./schemas/DevSchedulerMetadata.ts\";\nexport * from \"./schemas/DevTopicMetadata.ts\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n * Developer tools module for monitoring and debugging Alepha applications.\n *\n * This module provides comprehensive data collection capabilities for tracking application behavior,\n * performance metrics, and debugging information in real-time.\n *\n * @see {@link DevCollectorProvider}\n * @module alepha.devtools\n */\nexport const AlephaDevtools = $module({\n  name: \"alepha.devtools\",\n  descriptors: [],\n  services: [DevCollectorProvider],\n  register: (alepha) => {\n    alepha.with(DevCollectorProvider);\n    alepha.state.push(\"assets\", \"@alepha/devtools\");\n  },\n});\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@alepha/devtools",
 	"description": "Developer tools for monitoring and debugging Alepha applications.",
-	"version": "0.11.3",
+	"version": "0.11.4",
 	"type": "module",
 	"engines": {
 		"node": ">=22.0.0"
@@ -14,28 +14,38 @@
 		"src"
 	],
 	"dependencies": {
-		"@alepha/bucket": "0.11.3",
-		"@alepha/cache": "0.11.3",
-		"@alepha/core": "0.11.3",
-		"@alepha/logger": "0.11.3",
-		"@alepha/queue": "0.11.3",
-		"@alepha/react": "0.11.3",
-		"@alepha/scheduler": "0.11.3",
-		"@alepha/security": "0.11.3",
-		"@alepha/server": "0.11.3",
-		"@alepha/topic": "0.11.3"
+		"@alepha/bucket": "0.11.4",
+		"@alepha/cache": "0.11.4",
+		"@alepha/core": "0.11.4",
+		"@alepha/logger": "0.11.4",
+		"@alepha/queue": "0.11.4",
+		"@alepha/react": "0.11.4",
+		"@alepha/react-i18n": "0.11.4",
+		"@alepha/scheduler": "0.11.4",
+		"@alepha/security": "0.11.4",
+		"@alepha/server": "0.11.4",
+		"@alepha/server-static": "0.11.4",
+		"@alepha/topic": "0.11.4"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.3.2",
-		"tsdown": "^0.15.11",
+		"@alepha/cli": "0.11.4",
+		"@alepha/ui": "0.11.4",
+		"@alepha/vite": "0.11.4",
+		"@biomejs/biome": "^2.3.3",
+		"@tabler/icons-react": "^3.35.0",
+		"react": "^19.2.0",
+		"tsdown": "^0.16.0",
 		"typescript": "^5.9.3",
-		"vitest": "^3.2.4"
+		"vitest": "^4.0.6"
 	},
 	"scripts": {
 		"test": "vitest run",
 		"lint": "biome check --fix",
-		"build": "tsdown -c=../../tsdown.config.ts",
-		"typecheck": "tsc --noEmit"
+		"build:ui": "alepha build && rm -r assets/devtools && cp -r dist/public assets/devtools",
+		"build": "yarn ui:build && tsdown -c=../../tsdown.config.ts",
+		"typecheck": "tsc --noEmit",
+		"ui:dev": "alepha dev",
+		"ui:build": "alepha build && rm -r assets/devtools && cp -r dist/public assets/devtools"
 	},
 	"homepage": "https://github.com/feunard/alepha",
 	"repository": {

package/src/DevCollectorProvider.ts

@@ -1,18 +1,19 @@
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { $bucket } from "@alepha/bucket";
 import { $cache } from "@alepha/cache";
 import { $hook, $inject, Alepha, t } from "@alepha/core";
-import type { LogEntry } from "@alepha/logger";
+import { $logger, type LogEntry, logEntrySchema } from "@alepha/logger";
 import { $queue } from "@alepha/queue";
 import { $page } from "@alepha/react";
 import { $scheduler } from "@alepha/scheduler";
 import { $realm } from "@alepha/security";
-import { $action, $route } from "@alepha/server";
+import { $action, $route, ServerProvider } from "@alepha/server";
+import { $serve } from "@alepha/server-static";
 import { $topic } from "@alepha/topic";
-import { ui } from "./constants/ui.ts";
 import type { DevActionMetadata } from "./schemas/DevActionMetadata.ts";
 import type { DevBucketMetadata } from "./schemas/DevBucketMetadata.ts";
 import type { DevCacheMetadata } from "./schemas/DevCacheMetadata.ts";
-import type { DevLogEntry } from "./schemas/DevLogEntry.ts";
 import { type DevMetadata, devMetadataSchema } from "./schemas/DevMetadata.ts";
 import type { DevModuleMetadata } from "./schemas/DevModuleMetadata.ts";
 import type { DevPageMetadata } from "./schemas/DevPageMetadata.ts";
@@ -24,38 +25,41 @@ import type { DevTopicMetadata } from "./schemas/DevTopicMetadata.ts";
 
 export class DevCollectorProvider {
   protected readonly alepha = $inject(Alepha);
-  protected readonly logs: DevLogEntry[] = [];
+  protected readonly serverProvider = $inject(ServerProvider);
+  protected readonly log = $logger();
+  protected readonly logs: LogEntry[] = [];
   protected readonly maxLogs = 10000;
 
+  protected readonly onStart = $hook({
+    on: "start",
+    handler: () => {
+      this.log.info(
+        `Devtools available at ${this.serverProvider.hostname}/devtools/`,
+      );
+    },
+  });
+
   protected readonly onLog = $hook({
     on: "log",
-    handler: (ev: { message: string; entry: LogEntry }) => {
-      this.logs.push({
-        formatted: ev.message,
-        entry: ev.entry,
-      });
+    handler: (ev: { message?: string; entry: LogEntry }) => {
+      this.logs.unshift(ev.entry);
 
-      // Keep only the last 10000 logs
+      // keep only the last 10000 logs
       if (this.logs.length > this.maxLogs) {
-        this.logs.shift();
+        this.logs.pop();
       }
     },
   });
 
-  protected readonly uiRoute = $route({
-    method: "GET",
+  protected readonly uiRoute = $serve({
     path: "/devtools",
-    schema: {
-      response: t.text(),
-    },
-    handler: () => {
-      return ui;
-    },
+    root: join(fileURLToPath(import.meta.url), "../../assets/devtools"),
   });
 
   protected readonly metadataRoute = $route({
     method: "GET",
-    path: "/devtools/metadata",
+    path: "/devtools/api/metadata",
+    silent: true,
     schema: {
       response: devMetadataSchema,
     },
@@ -66,21 +70,17 @@ export class DevCollectorProvider {
 
   protected readonly logsRoute = $route({
     method: "GET",
-    path: "/devtools/logs",
+    path: "/devtools/api/logs",
+    silent: true,
     schema: {
-      response: t.array(
-        t.object({
-          formatted: t.text(),
-          entry: t.any(),
-        }),
-      ),
+      response: t.array(logEntrySchema),
     },
     handler: () => {
       return this.getLogs();
     },
   });
 
-  public getLogs(): DevLogEntry[] {
+  public getLogs(): LogEntry[] {
     return this.logs;
   }
 

package/src/index.ts

@@ -7,7 +7,6 @@ export * from "./DevCollectorProvider.ts";
 export * from "./schemas/DevActionMetadata.ts";
 export * from "./schemas/DevBucketMetadata.ts";
 export * from "./schemas/DevCacheMetadata.ts";
-export * from "./schemas/DevLogEntry.ts";
 export * from "./schemas/DevMetadata.ts";
 export * from "./schemas/DevModuleMetadata.ts";
 export * from "./schemas/DevPageMetadata.ts";
@@ -32,4 +31,8 @@ export const AlephaDevtools = $module({
   name: "alepha.devtools",
   descriptors: [],
   services: [DevCollectorProvider],
+  register: (alepha) => {
+    alepha.with(DevCollectorProvider);
+    alepha.state.push("assets", "@alepha/devtools");
+  },
 });

package/src/ui/AppRouter.tsx

@@ -0,0 +1,61 @@
+import { $page } from "@alepha/react";
+import { AdminShell, RootRouter, Text, ui } from "@alepha/ui";
+import { IconDashboard, IconLogs } from "@tabler/icons-react";
+import DevLogs from "./DevLogs.tsx";
+
+export class AppRouter extends RootRouter {
+  layout = $page({
+    parent: this.root,
+    component: () => (
+      <AdminShell
+        appShellProps={{
+          bg: ui.colors.surface,
+        }}
+        appShellNavbarProps={{
+          bg: ui.colors.transparent,
+        }}
+        appShellHeaderProps={{
+          bg: ui.colors.transparent,
+          style: {
+            backdropFilter: "blur(10px)",
+          },
+        }}
+        sidebarProps={{
+          collapsed: true,
+          gap: "xs",
+        }}
+        appBarProps={{
+          items: [
+            { position: "left", type: "burger" },
+            {
+              position: "center",
+              element: (
+                <Text fw="bold" size="lg">
+                  Alepha DevTools
+                </Text>
+              ),
+            },
+          ],
+        }}
+      />
+    ),
+  });
+
+  dashboard = $page({
+    path: "/",
+    label: "Dashboard",
+    icon: <IconDashboard />,
+    static: true,
+    parent: this.layout,
+    component: () => <div>Dashboard</div>,
+  });
+
+  logs = $page({
+    path: "/logs",
+    label: "Logs",
+    icon: <IconLogs />,
+    static: true,
+    parent: this.layout,
+    component: DevLogs,
+  });
+}