@alepha/devtools 0.11.4 → 0.11.6

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@alepha/devtools",
 	"description": "Developer tools for monitoring and debugging Alepha applications.",
-	"version": "0.11.4",
+	"version": "0.11.6",
 	"type": "module",
 	"engines": {
 		"node": ">=22.0.0"
@@ -14,29 +14,31 @@
 		"src"
 	],
 	"dependencies": {
-		"@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"
+		"@alepha/batch": "0.11.6",
+		"@alepha/bucket": "0.11.6",
+		"@alepha/cache": "0.11.6",
+		"@alepha/core": "0.11.6",
+		"@alepha/logger": "0.11.6",
+		"@alepha/postgres": "0.11.6",
+		"@alepha/queue": "0.11.6",
+		"@alepha/react": "0.11.6",
+		"@alepha/react-i18n": "0.11.6",
+		"@alepha/scheduler": "0.11.6",
+		"@alepha/security": "0.11.6",
+		"@alepha/server": "0.11.6",
+		"@alepha/server-static": "0.11.6",
+		"@alepha/topic": "0.11.6"
 	},
 	"devDependencies": {
-		"@alepha/cli": "0.11.4",
-		"@alepha/ui": "0.11.4",
-		"@alepha/vite": "0.11.4",
-		"@biomejs/biome": "^2.3.3",
+		"@alepha/cli": "0.11.6",
+		"@alepha/ui": "0.11.6",
+		"@alepha/vite": "0.11.6",
+		"@biomejs/biome": "^2.3.4",
 		"@tabler/icons-react": "^3.35.0",
 		"react": "^19.2.0",
-		"tsdown": "^0.16.0",
+		"tsdown": "^0.16.1",
 		"typescript": "^5.9.3",
-		"vitest": "^4.0.6"
+		"vitest": "^4.0.8"
 	},
 	"scripts": {
 		"test": "vitest run",

package/src/DevCollectorProvider.ts

@@ -1,11 +1,18 @@
 import { join } from "node:path";
 import { fileURLToPath } from "node:url";
+import { $batch } from "@alepha/batch";
 import { $bucket } from "@alepha/bucket";
 import { $cache } from "@alepha/cache";
-import { $hook, $inject, Alepha, t } from "@alepha/core";
+import { $hook, $inject, Alepha, pageQuerySchema, t } from "@alepha/core";
 import { $logger, type LogEntry, logEntrySchema } from "@alepha/logger";
+import {
+  $entity,
+  NodeSqliteProvider,
+  parseQueryString,
+  pg,
+} from "@alepha/postgres";
+import { Repository } from "@alepha/postgres/src/services/Repository.ts";
 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";
@@ -23,12 +30,45 @@ import type { DevRealmMetadata } from "./schemas/DevRealmMetadata.ts";
 import type { DevSchedulerMetadata } from "./schemas/DevSchedulerMetadata.ts";
 import type { DevTopicMetadata } from "./schemas/DevTopicMetadata.ts";
 
+class DevToolsDatabaseProvider extends NodeSqliteProvider {
+  get name() {
+    return "devtools";
+  }
+  options = {
+    path: ":memory:",
+  };
+}
+
+const logs = $entity({
+  name: "logs",
+  schema: t.object({
+    id: pg.primaryKey(),
+    level: t.enum(["SILENT", "TRACE", "DEBUG", "INFO", "WARN", "ERROR"]),
+    message: t.text({
+      size: "rich",
+    }),
+    service: t.text(),
+    module: t.text(),
+    context: t.optional(t.text()),
+    app: t.optional(t.text()),
+    data: t.optional(t.json()),
+    timestamp: t.datetime(),
+  }),
+});
+
+class LogRepository extends Repository<typeof logs.schema> {
+  constructor() {
+    super(logs, DevToolsDatabaseProvider);
+  }
+}
+
 export class DevCollectorProvider {
   protected readonly alepha = $inject(Alepha);
   protected readonly serverProvider = $inject(ServerProvider);
+  protected readonly sqliteProvider = $inject(DevToolsDatabaseProvider);
   protected readonly log = $logger();
-  protected readonly logs: LogEntry[] = [];
-  protected readonly maxLogs = 10000;
+
+  logs = $inject(LogRepository);
 
   protected readonly onStart = $hook({
     on: "start",
@@ -39,21 +79,35 @@ export class DevCollectorProvider {
     },
   });
 
+  protected batchLogs = $batch({
+    maxSize: 50,
+    maxDuration: [10, "seconds"],
+    schema: logEntrySchema,
+    handler: async (entries: LogEntry[]) => {
+      await this.logs.createMany(entries);
+    },
+  });
+
   protected readonly onLog = $hook({
     on: "log",
-    handler: (ev: { message?: string; entry: LogEntry }) => {
-      this.logs.unshift(ev.entry);
+    handler: async (ev: { message?: string; entry: LogEntry }) => {
+      if (!this.alepha.isReady()) {
+        return;
+      }
 
-      // keep only the last 10000 logs
-      if (this.logs.length > this.maxLogs) {
-        this.logs.pop();
+      if (ev.entry.level === "TRACE" && ev.entry.module === "alepha.batch") {
+        // skip batch trace logs to avoid infinite loop
+        return;
       }
+
+      await this.batchLogs.push(ev.entry);
     },
   });
 
   protected readonly uiRoute = $serve({
     path: "/devtools",
     root: join(fileURLToPath(import.meta.url), "../../assets/devtools"),
+    historyApiFallback: true,
   });
 
   protected readonly metadataRoute = $route({
@@ -73,17 +127,30 @@ export class DevCollectorProvider {
     path: "/devtools/api/logs",
     silent: true,
     schema: {
-      response: t.array(logEntrySchema),
+      query: t.interface([pageQuerySchema], {
+        search: t.optional(t.string()),
+      }),
+      response: t.page(logEntrySchema),
     },
-    handler: () => {
-      return this.getLogs();
+    handler: ({ query }) => {
+      query.sort ??= "-timestamp";
+      if (query.search) {
+        console.log(parseQueryString(query.search));
+      }
+      return this.logs.paginate(
+        query,
+        query.search
+          ? {
+              where: parseQueryString(query.search),
+            }
+          : {},
+        {
+          count: true,
+        },
+      );
     },
   });
 
-  public getLogs(): LogEntry[] {
-    return this.logs;
-  }
-
   // -------------------------------------------------------------------------------------------------------------------
 
   public getActions(): DevActionMetadata[] {
@@ -191,28 +258,30 @@ export class DevCollectorProvider {
   }
 
   public getPages(): DevPageMetadata[] {
-    const pageDescriptors = this.alepha.descriptors($page);
-
-    return pageDescriptors.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,
-    }));
+    // const pageDescriptors = this.alepha.descriptors($page);
+    //
+    // return pageDescriptors.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,
+    // }));
+
+    return [];
   }
 
   public getProviders(): DevProviderMetadata[] {

package/src/index.ts

@@ -33,6 +33,6 @@ export const AlephaDevtools = $module({
   services: [DevCollectorProvider],
   register: (alepha) => {
     alepha.with(DevCollectorProvider);
-    alepha.state.push("assets", "@alepha/devtools");
+    alepha.state.push("alepha.build.assets", "@alepha/devtools");
   },
 });

package/src/ui/AppRouter.tsx

@@ -1,5 +1,13 @@
 import { $page } from "@alepha/react";
-import { AdminShell, RootRouter, Text, ui } from "@alepha/ui";
+import {
+  AdminShell,
+  DarkModeButton,
+  OmnibarButton,
+  RootRouter,
+  Text,
+  ui,
+} from "@alepha/ui";
+import ToggleSidebarButton from "@alepha/ui/src/components/buttons/ToggleSidebarButton.tsx";
 import { IconDashboard, IconLogs } from "@tabler/icons-react";
 import DevLogs from "./DevLogs.tsx";
 
@@ -21,20 +29,42 @@ export class AppRouter extends RootRouter {
           },
         }}
         sidebarProps={{
-          collapsed: true,
           gap: "xs",
+          menu: [
+            {
+              element: <ToggleSidebarButton />,
+            },
+            {
+              label: "Dashboard",
+              icon: <IconDashboard />,
+              href: "/",
+            },
+            {
+              label: "Logs",
+              icon: <IconLogs />,
+              href: "/logs",
+            },
+          ],
         }}
         appBarProps={{
           items: [
             { position: "left", type: "burger" },
             {
-              position: "center",
+              position: "left",
               element: (
                 <Text fw="bold" size="lg">
                   Alepha DevTools
                 </Text>
               ),
             },
+            {
+              position: "center",
+              element: <OmnibarButton />,
+            },
+            {
+              position: "right",
+              element: <DarkModeButton />,
+            },
           ],
         }}
       />

package/src/ui/DevLogs.tsx

@@ -1,35 +1,14 @@
-import { t } from "@alepha/core";
+import { type Page, t } from "@alepha/core";
 import { type LogEntry, logEntrySchema } from "@alepha/logger";
-import { useAction, useInject } from "@alepha/react";
+import { useInject } from "@alepha/react";
 import { useI18n } from "@alepha/react-i18n";
 import { HttpClient } from "@alepha/server";
 import { DataTable, Flex, Text } from "@alepha/ui";
-import { useState } from "react";
 
 const DevLogs = () => {
   const http = useInject(HttpClient);
-  const [logs, setLog] = useState<LogEntry[]>([]);
   const { l } = useI18n();
 
-  useAction(
-    {
-      runOnInit: true,
-      runEvery: [10, "seconds"],
-      handler: async () => {
-        setLog(
-          await http
-            .fetch("/devtools/api/logs", {
-              schema: {
-                response: t.array(logEntrySchema),
-              },
-            })
-            .then(({ data }) => data),
-        );
-      },
-    },
-    [],
-  );
-
   const renderLevel = (level: string) => {
     switch (level.toLowerCase()) {
       case "error":
@@ -68,12 +47,24 @@ const DevLogs = () => {
   };
 
   return (
-    <Flex>
-      <DataTable
+    <Flex flex={1}>
+      <DataTable<LogEntry>
+        submitOnInit
+        submitEvery={[10, "seconds"]}
+        defaultSize={20}
         tableProps={{
           horizontalSpacing: "xs",
           verticalSpacing: 0,
         }}
+        filters={t.object({
+          search: t.optional(
+            t.string({
+              $control: {
+                query: logEntrySchema,
+              },
+            }),
+          ),
+        })}
         tableTrProps={(item) => {
           if (item.level.toLowerCase() === "error") {
             return {
@@ -87,7 +78,18 @@ const DevLogs = () => {
           }
           return {};
         }}
-        items={logs}
+        items={async (filters) => {
+          const response = await http.fetch(
+            `/devtools/api/logs?${new URLSearchParams(filters as any).toString()}`,
+            {
+              schema: {
+                response: t.page(logEntrySchema),
+              },
+            },
+          );
+
+          return response.data as Page<LogEntry>;
+        }}
         columns={{
           timestamp: {
             label: "Tme",

package/src/ui/main.server.ts

@@ -0,0 +1,10 @@
+import { Alepha, run } from "@alepha/core";
+import { AlephaDevtools } from "../index.ts";
+import { AppRouter } from "./AppRouter.tsx";
+
+const alepha = Alepha.create();
+
+alepha.with(AppRouter);
+alepha.with(AlephaDevtools);
+
+run(alepha);