@alepha/devtools 0.19.1 → 0.19.3

package/dist/public/chunk.yh4jaMrg.js

@@ -0,0 +1 @@
+import{At as e,D as t,E as n,J as r,Lt as i,a,jt as o,tt as s}from"./chunk.p3hCiSrt.js";var c=i(o(),1),l=e(),u=(e,t)=>{if(!t)return e;let n=t.toLowerCase();return e.reduce((e,r)=>{if(r.children){let i=u(r.children,t);i.length>0?e.push({...r,children:i}):r.label.toLowerCase().includes(n)&&e.push(r)}else r.label.toLowerCase().includes(n)&&e.push(r);return e},[])},d=e=>{let t=0;for(let n of e)n.children&&n.children.length>0?t+=d(n.children):t++;return t},f=({nodes:e,selectedId:t,openNodes:n,search:r=``,onSelect:i,onToggle:o,showLeafCount:s=!0})=>(0,l.jsx)(a,{direction:`column`,gap:2,style:{minHeight:0},children:(0,c.useMemo)(()=>u(e,r),[e,r]).map(e=>(0,l.jsx)(p,{node:e,depth:0,selectedId:t,openNodes:n,onSelect:i,onToggle:o,showLeafCount:s},e.id))}),p=({node:e,depth:i,selectedId:o,openNodes:c,onSelect:u,onToggle:f,showLeafCount:m})=>{let h=!!e.children&&e.children.length>0,g=c.has(e.id),_=o===e.id,v=h?d(e.children):0;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s,{w:`100%`,py:4,className:`devtools-tree-node`,"data-selected":_||void 0,style:{borderRadius:6,paddingLeft:8+i*20,paddingRight:8,transition:`background 100ms ease`},onClick:()=>{h?f(e.id):u(e.id)},children:(0,l.jsxs)(a,{gap:8,wrap:`nowrap`,children:[h?(0,l.jsx)(a,{style:{width:14,flexShrink:0,display:`flex`,alignItems:`center`},children:g?(0,l.jsx)(t,{size:14,opacity:.5}):(0,l.jsx)(n,{size:14,opacity:.5})}):(0,l.jsx)(a,{style:{width:14,flexShrink:0,display:`flex`,alignItems:`center`}}),e.icon,(0,l.jsx)(r,{fz:12,fw:_?600:400,truncate:!0,style:{flex:1},children:e.label}),e.badge,h&&m&&v>0&&(0,l.jsx)(r,{fz:10,c:`dimmed`,style:{flexShrink:0},children:v})]})}),h&&g&&(0,l.jsx)(a,{direction:`column`,gap:2,style:{minHeight:0},children:e.children.map(e=>(0,l.jsx)(p,{node:e,depth:i+1,selectedId:o,openNodes:c,onSelect:u,onToggle:f,showLeafCount:m},e.id))})]})};export{f as t};

package/dist/public/entry.DnXws2rz.js

@@ -0,0 +1,2 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["chunk.DuQak1OK.js","chunk.p3hCiSrt.js","chunk.DOwjsMaD.js","chunk.CCbhJSL_.js","chunk.BHYZ9sAK.js","chunk.Bc7_n90V.js","chunk.De1vj4hM.js","chunk.TIounDiA.js","chunk.B9jGefQy.js","chunk.D93ZmnLR.js","chunk.yh4jaMrg.js","chunk.CK6Z-I-W.js","chunk.CJt_09bu.js","chunk.D9MCnLj_.js","asset.CHpVij2M.css","chunk.B82rsdDI.js","chunk.DYIu-C82.js","chunk.CvCu4yZb.js","chunk.Cj1opA98.js","chunk.9plHAFDW.js","chunk.Dc4PCYcb.js","chunk.DxnuHDOY.js","chunk.D_-fkSwu.js"])))=>i.map(i=>d[i]);
+import{A as e,At as t,Mt as n,b as r,h as i,j as a,t as o,x as s}from"./chunk.p3hCiSrt.js";(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();var c=e(`outline`,`dashboard`,`Dashboard`,[[`path`,{d:`M10 13a2 2 0 1 0 4 0a2 2 0 1 0 -4 0`,key:`svg-0`}],[`path`,{d:`M13.45 11.55l2.05 -2.05`,key:`svg-1`}],[`path`,{d:`M6.4 20a9 9 0 1 1 11.2 0l-11.2 0`,key:`svg-2`}]]),l=e(`outline`,`database`,`Database`,[[`path`,{d:`M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0`,key:`svg-0`}],[`path`,{d:`M4 6v6a8 3 0 0 0 16 0v-6`,key:`svg-1`}],[`path`,{d:`M4 12v6a8 3 0 0 0 16 0v-6`,key:`svg-2`}]]),u=e(`outline`,`message`,`Message`,[[`path`,{d:`M8 9h8`,key:`svg-0`}],[`path`,{d:`M8 13h6`,key:`svg-1`}],[`path`,{d:`M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12`,key:`svg-2`}]]),d=e(`outline`,`settings`,`Settings`,[[`path`,{d:`M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065`,key:`svg-0`}],[`path`,{d:`M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0`,key:`svg-1`}]]),f=e(`outline`,`sitemap`,`Sitemap`,[[`path`,{d:`M3 17a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2`,key:`svg-0`}],[`path`,{d:`M15 17a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2`,key:`svg-1`}],[`path`,{d:`M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2l0 -2`,key:`svg-2`}],[`path`,{d:`M6 15v-1a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v1`,key:`svg-3`}],[`path`,{d:`M12 9l0 3`,key:`svg-4`}]]),p=e(`outline`,`topology-ring`,`TopologyRing`,[[`path`,{d:`M14 20a2 2 0 1 0 -4 0a2 2 0 0 0 4 0`,key:`svg-0`}],[`path`,{d:`M14 4a2 2 0 1 0 -4 0a2 2 0 0 0 4 0`,key:`svg-1`}],[`path`,{d:`M6 12a2 2 0 1 0 -4 0a2 2 0 0 0 4 0`,key:`svg-2`}],[`path`,{d:`M22 12a2 2 0 1 0 -4 0a2 2 0 0 0 4 0`,key:`svg-3`}],[`path`,{d:`M13.5 5.5l5 5`,key:`svg-4`}],[`path`,{d:`M5.5 13.5l5 5`,key:`svg-5`}],[`path`,{d:`M13.5 18.5l5 -5`,key:`svg-6`}],[`path`,{d:`M10.5 5.5l-5 5`,key:`svg-7`}]]),m=t(),h=`modulepreload`,g=function(e){return`/__devtools/`+e},_={},v=function(e,t,n){let r=Promise.resolve();if(t&&t.length>0){let e=document.getElementsByTagName(`link`),i=document.querySelector(`meta[property=csp-nonce]`),a=i?.nonce||i?.getAttribute(`nonce`);function o(e){return Promise.all(e.map(e=>Promise.resolve(e).then(e=>({status:`fulfilled`,value:e}),e=>({status:`rejected`,reason:e}))))}r=o(t.map(t=>{if(t=g(t,n),t in _)return;_[t]=!0;let r=t.endsWith(`.css`),i=r?`[rel="stylesheet"]`:``;if(n)for(let n=e.length-1;n>=0;n--){let i=e[n];if(i.href===t&&(!r||i.rel===`stylesheet`))return}else if(document.querySelector(`link[href="${t}"]${i}`))return;let o=document.createElement(`link`);if(o.rel=r?`stylesheet`:h,r||(o.as=`script`),o.crossOrigin=``,o.href=t,a&&o.setAttribute(`nonce`,a),document.head.appendChild(o),r)return new Promise((e,n)=>{o.addEventListener(`load`,e),o.addEventListener(`error`,()=>n(Error(`Unable to preload CSS for ${t}`)))})}))}function i(e){let t=new Event(`vite:preloadError`,{cancelable:!0});if(t.payload=e,window.dispatchEvent(t),!t.defaultPrevented)throw e}return r.then(t=>{for(let e of t||[])e.status===`rejected`&&i(e.reason);return e().catch(i)})};n(class{ui=o({themes:[a]});layout=i({parent:this.ui.root,lazy:()=>v(()=>import(`./chunk.DuQak1OK.js`),__vite__mapDeps([0,1,2])),[Symbol.for(`alepha.page.preload`)]:`bfc0f5d4`});dashboard=i({path:`/`,label:`Dashboard`,icon:(0,m.jsx)(c,{}),parent:this.layout,lazy:()=>v(()=>import(`./chunk.CCbhJSL_.js`),__vite__mapDeps([3,1,4,5,6,7,2])),[Symbol.for(`alepha.page.preload`)]:`1465b743`});explorer=i({path:`/explorer`,label:`Explorer`,icon:(0,m.jsx)(f,{}),parent:this.layout,lazy:()=>v(()=>import(`./chunk.B9jGefQy.js`),__vite__mapDeps([8,1,9,4,7,2,10])),[Symbol.for(`alepha.page.preload`)]:`fc9abada`});db=i({path:`/db`,parent:this.layout,lazy:()=>v(()=>import(`./chunk.CK6Z-I-W.js`),__vite__mapDeps([11,1])),[Symbol.for(`alepha.page.preload`)]:`ea7ea43a`});dbErd=i({path:`/erd`,label:`Database`,icon:(0,m.jsx)(l,{}),parent:this.db,lazy:()=>v(()=>import(`./chunk.CJt_09bu.js`),__vite__mapDeps([12,1,13,14,7,2])),[Symbol.for(`alepha.page.preload`)]:`935dbb60`});dbEditor=i({path:`/editor`,label:`Database`,icon:(0,m.jsx)(l,{}),parent:this.db,lazy:()=>v(()=>import(`./chunk.B82rsdDI.js`),__vite__mapDeps([15,1,7,2,10])),[Symbol.for(`alepha.page.preload`)]:`30dd87a0`});dbEditorTable=i({path:`/editor/:table`,parent:this.db,lazy:()=>v(()=>import(`./chunk.B82rsdDI.js`),__vite__mapDeps([15,1,7,2,10])),[Symbol.for(`alepha.page.preload`)]:`30dd87a0`});dbEditorRecord=i({path:`/editor/:table/:id`,parent:this.db,lazy:()=>v(()=>import(`./chunk.B82rsdDI.js`),__vite__mapDeps([15,1,7,2,10])),[Symbol.for(`alepha.page.preload`)]:`30dd87a0`});conf=i({path:`/conf`,parent:this.layout,lazy:()=>v(()=>import(`./chunk.DYIu-C82.js`),__vite__mapDeps([16,1])),[Symbol.for(`alepha.page.preload`)]:`11bf7128`});confEnv=i({path:`/env`,label:`Configuration`,icon:(0,m.jsx)(d,{}),parent:this.conf,lazy:()=>v(()=>import(`./chunk.CvCu4yZb.js`),__vite__mapDeps([17,1,9,6,7,2])),[Symbol.for(`alepha.page.preload`)]:`1e4d954e`});confAtoms=i({path:`/atoms`,label:`Configuration`,icon:(0,m.jsx)(d,{}),parent:this.conf,lazy:()=>v(()=>import(`./chunk.Cj1opA98.js`),__vite__mapDeps([18,1,5,7,2,10])),[Symbol.for(`alepha.page.preload`)]:`1e40f4e0`});graph=i({path:`/graph`,label:`Graph`,icon:(0,m.jsx)(p,{}),parent:this.layout,lazy:()=>v(()=>import(`./chunk.9plHAFDW.js`),__vite__mapDeps([19,1,13,14,7,2])),[Symbol.for(`alepha.page.preload`)]:`4fded5f0`});emails=i({path:`/emails`,label:`Emails`,icon:(0,m.jsx)(r,{}),parent:this.layout,lazy:()=>v(()=>import(`./chunk.Dc4PCYcb.js`),__vite__mapDeps([20,1])),[Symbol.for(`alepha.page.preload`)]:`5a1d01de`});sms=i({path:`/sms`,label:`SMS`,icon:(0,m.jsx)(u,{}),parent:this.layout,lazy:()=>v(()=>import(`./chunk.DxnuHDOY.js`),__vite__mapDeps([21,1])),[Symbol.for(`alepha.page.preload`)]:`ed875639`});logs=i({path:`/logs`,label:`Logs`,icon:(0,m.jsx)(s,{}),parent:this.layout,lazy:()=>v(()=>import(`./chunk.D_-fkSwu.js`),__vite__mapDeps([22,1,9])),[Symbol.for(`alepha.page.preload`)]:`5e261ada`})});export{l as a,u as i,f as n,c as o,d as r,p as t};

package/dist/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="midnight">
+<head><meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="/__devtools/asset.Cxu56LSy.css">
+<script type="module" crossorigin="" src="/__devtools/entry.DnXws2rz.js"></script>
+<title>App</title>
+</head>
+<body><div id="root"></div></body>
+</html>

package/dist/public/index.html.br

@@ -0,0 +1 @@
+n
��qýlN[�h3�[���F��M!0�
r,_[�H`Y�0Dd���-�0���� ��L��޲9DXO�p����n�ZR:��YbA�m�k�b�m3�œJ߰�`�[�)�?U������w����p��C$�ј�L��n�b�/+:��\P���5{_�A�

package/package.json

@@ -5,8 +5,8 @@
     "alepha",
     "devtools"
   ],
-  "author": "Nicolas Foures",
-  "version": "0.19.1",
+  "author": "Feunard",
+  "version": "0.19.3",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -20,30 +20,30 @@
     "assets"
   ],
   "devDependencies": {
-    "@alepha/ui": "0.19.1",
-    "@biomejs/biome": "^2.4.8",
-    "@mantine/core": "^8.3.18",
-    "@mantine/hooks": "^8.3.18",
-    "@tabler/icons-react": "^3.40.0",
-    "@xyflow/react": "^12.10.1",
-    "alepha": "0.19.1",
+    "@alepha/ui": "0.19.3",
+    "@biomejs/biome": "^2.4.10",
+    "@mantine/core": "^9.0.0",
+    "@mantine/hooks": "^9.0.0",
+    "@tabler/icons-react": "^3.41.1",
+    "@xyflow/react": "^12.10.2",
+    "alepha": "0.19.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tsdown": "^0.21.4",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.0",
-    "vitest": "^4.1.0"
+    "tsdown": "^0.21.7",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3",
+    "vitest": "^4.1.2"
   },
   "peerDependencies": {
-    "alepha": "0.19.1"
+    "alepha": "0.19.3"
   },
   "scripts": {
     "lint": "alepha lint",
     "typecheck": "alepha typecheck",
     "test": "alepha test",
     "dev:ui": "alepha dev --no-devtools",
-    "build": "tsdown",
-    "build:ui": "alepha build -t static && rm -rf assets/ui && cp -r dist/public assets/ui"
+    "build": "tsdown && yarn build:ui",
+    "build:ui": "alepha build -t static && rm -rf assets/ui && mkdir -p assets && cp -r dist/public assets/ui"
   },
   "repository": {
     "type": "git",
@@ -57,6 +57,7 @@
       "browser": "./dist/index.browser.js",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
-    }
+    },
+    "./package.json": "./package.json"
   }
 }

package/src/providers/DevToolsMetadataProvider.ts

@@ -421,7 +421,7 @@ export class DevToolsMetadataProvider {
       mode: this.alepha.isProduction() ? "production" : "development",
       port,
       uptime: (this.dateTime.nowMillis() - this.startedAt) / 1000,
-      memoryUsage: process.memoryUsage?.()?.rss ?? 0,
+      memoryUsage: process.memoryUsage?.()?.heapUsed ?? 0,
     };
   }
 

package/src/providers/DevToolsProvider.ts

@@ -1,8 +1,10 @@
-import { $hook, $inject, Alepha, t } from "alepha";
+import { $hook, $inject, $state, Alepha, t } from "alepha";
+import { localEmailOptions } from "alepha/email";
 import { $logger, MemoryDestinationProvider } from "alepha/logger";
 import { RepositoryProvider } from "alepha/orm";
 import { $route, ServerProvider } from "alepha/server";
 import { $serve } from "alepha/server/static";
+import { FileSystemProvider } from "alepha/system";
 import { devtoolsAssets } from "../assets.ts";
 import { devMetadataSchema } from "../schemas/DevMetadata.ts";
 import { DevToolsMetadataProvider } from "./DevToolsMetadataProvider.ts";
@@ -13,6 +15,8 @@ export class DevToolsProvider {
   protected readonly serverProvider = $inject(ServerProvider);
   protected readonly devCollectorProvider = $inject(DevToolsMetadataProvider);
   protected readonly memoryDestination = $inject(MemoryDestinationProvider);
+  protected readonly fs = $inject(FileSystemProvider);
+  protected readonly emailOptions = $state(localEmailOptions);
 
   protected readonly onStart = $hook({
     on: "start",
@@ -166,6 +170,116 @@ export class DevToolsProvider {
     },
   });
 
+  // -------------------------------------------------------------------------------------------------------------------
+  // Email endpoint
+  // -------------------------------------------------------------------------------------------------------------------
+
+  protected readonly emailsRoute = $route({
+    method: "GET",
+    path: "/__devtools/api/emails",
+    silent: true,
+    schema: {
+      response: t.object({
+        emails: t.array(
+          t.object({
+            to: t.text(),
+            subject: t.text(),
+            body: t.string(),
+            sentAt: t.text(),
+          }),
+        ),
+      }),
+    },
+    handler: async () => {
+      try {
+        const dir = this.emailOptions.directory;
+        const exists = await this.fs.exists(dir);
+        if (!exists) return { emails: [] };
+
+        const files = await this.fs.ls(dir);
+        const emailFiles = files.filter((f) => f.endsWith(".eml.json"));
+
+        const emails: Array<{
+          to: string;
+          subject: string;
+          body: string;
+          sentAt: string;
+        }> = [];
+
+        for (const file of emailFiles) {
+          try {
+            const data = await this.fs.readJsonFile<{
+              to: string;
+              subject: string;
+              body: string;
+              sentAt: string;
+            }>(this.fs.join(dir, file));
+            emails.push(data);
+          } catch {
+            // skip malformed files
+          }
+        }
+
+        emails.sort((a, b) => b.sentAt.localeCompare(a.sentAt));
+        return { emails };
+      } catch {
+        return { emails: [] };
+      }
+    },
+  });
+
+  // -------------------------------------------------------------------------------------------------------------------
+  // SMS endpoint
+  // -------------------------------------------------------------------------------------------------------------------
+
+  protected readonly smsRoute = $route({
+    method: "GET",
+    path: "/__devtools/api/sms",
+    silent: true,
+    schema: {
+      response: t.object({
+        messages: t.array(
+          t.object({
+            to: t.text(),
+            message: t.string(),
+            sentAt: t.text(),
+          }),
+        ),
+      }),
+    },
+    handler: async () => {
+      try {
+        const dir = "node_modules/.alepha/sms";
+        const exists = await this.fs.exists(dir);
+        if (!exists) return { messages: [] };
+
+        const files = await this.fs.ls(dir);
+        const smsFiles = files.filter((f) => f.endsWith(".sms.json"));
+
+        const messages: Array<{ to: string; message: string; sentAt: string }> =
+          [];
+
+        for (const file of smsFiles) {
+          try {
+            const data = await this.fs.readJsonFile<{
+              to: string;
+              message: string;
+              sentAt: string;
+            }>(this.fs.join(dir, file));
+            messages.push(data);
+          } catch {
+            // skip malformed files
+          }
+        }
+
+        messages.sort((a, b) => b.sentAt.localeCompare(a.sentAt));
+        return { messages };
+      } catch {
+        return { messages: [] };
+      }
+    },
+  });
+
   // -------------------------------------------------------------------------------------------------------------------
   // DB CRUD endpoints
   // -------------------------------------------------------------------------------------------------------------------

package/src/ui/AppRouter.tsx

@@ -3,6 +3,8 @@ import {
   IconDashboard,
   IconDatabase,
   IconList,
+  IconMail,
+  IconMessage,
   IconSettings,
   IconSitemap,
   IconTopologyRing,
@@ -101,6 +103,22 @@ export class AppRouter {
     lazy: () => import("./components/graph/DevDependencyGraph.tsx"),
   });
 
+  emails = $page({
+    path: "/emails",
+    label: "Emails",
+    icon: <IconMail />,
+    parent: this.layout,
+    lazy: () => import("./components/emails/DevEmails.tsx"),
+  });
+
+  sms = $page({
+    path: "/sms",
+    label: "SMS",
+    icon: <IconMessage />,
+    parent: this.layout,
+    lazy: () => import("./components/sms/DevSms.tsx"),
+  });
+
   logs = $page({
     path: "/logs",
     label: "Logs",

package/src/ui/components/DevLayout.tsx

@@ -1,15 +1,15 @@
 import {
-  ActionButton,
   DarkModeButton,
   DashboardShell,
   Flex,
   OmnibarButton,
 } from "@alepha/ui";
 import {
-  IconArrowLeft,
   IconDashboard,
   IconDatabase,
   IconList,
+  IconMail,
+  IconMessage,
   IconSettings,
   IconSitemap,
   IconTopologyRing,
@@ -68,6 +68,17 @@ export const DevLayout = () => {
         href: "/conf/env",
       },
       { type: "divider" },
+      {
+        label: "Emails",
+        icon: <IconMail />,
+        href: "/emails",
+      },
+      {
+        label: "SMS",
+        icon: <IconMessage />,
+        href: "/sms",
+      },
+      { type: "divider" },
       {
         label: "Graph",
         icon: <IconTopologyRing />,
@@ -96,19 +107,7 @@ export const DevLayout = () => {
       navbarFooter={<Flex />}
       footerHeight={24}
       headerHeight={60}
-      navbarHeader={() => (
-        <Flex align="center" justify="center" h="100%" w="100%">
-          <ActionButton
-            href="/"
-            target="_self"
-            variant="subtle"
-            color="gray"
-            size="sm"
-          >
-            <IconArrowLeft size={18} />
-          </ActionButton>
-        </Flex>
-      )}
+      navbarHeader={() => <Flex />}
       sidebarProps={{
         collapsed: true,
         items: sidebarItems,

package/src/ui/components/configuration/ConfigEnv.tsx

@@ -80,7 +80,7 @@ const EnvLine = ({ variable }: { variable: EnvVariable }) => {
   const sensitive = isSensitive(variable.name);
 
   return (
-    <Flex>
+    <Flex direction="column">
       {/* Description as comment */}
       {variable.description?.split("\n").map((line, i) => (
         <Text key={i} fz={11} ff="monospace" c="dimmed" fs="italic" lh={1.6}>

package/src/ui/components/dashboard/DevDashboard.tsx

@@ -1,5 +1,5 @@
 import { devMetadataSchema } from "@alepha/devtools";
-import { Flex, ui } from "@alepha/ui";
+import { ActionButton, Flex, ui } from "@alepha/ui";
 import {
   Badge,
   Card,
@@ -19,6 +19,7 @@ import {
   IconDatabase,
   IconFileText,
   IconPlug,
+  IconRefresh,
   IconRoute,
   IconServer,
   IconSettings,
@@ -93,6 +94,7 @@ export const DevDashboard = () => {
   const [metadata, setMetadata] = useState<any>(null);
   const [logs, setLogs] = useState<LogEntry[]>([]);
   const [events, setEvents] = useState<LogEntry[]>([]);
+  const [reloading, setReloading] = useState(false);
 
   const fetchData = useCallback(async () => {
     if (document.visibilityState !== "visible") return;
@@ -112,6 +114,19 @@ export const DevDashboard = () => {
     }
   }, [http]);
 
+  const handleReload = useCallback(async () => {
+    setReloading(true);
+    try {
+      await http.fetch("/__devtools/api/reload", { method: "POST" });
+      setTimeout(() => {
+        fetchData();
+        setReloading(false);
+      }, 1000);
+    } catch {
+      setReloading(false);
+    }
+  }, [http, fetchData]);
+
   useEffect(() => {
     fetchData();
     const interval = setInterval(fetchData, 10_000);
@@ -191,17 +206,21 @@ export const DevDashboard = () => {
       <Flex direction="column" gap="lg">
         {/* App Stats */}
         <div>
-          <Title
-            order={5}
-            mb="sm"
-            c="dimmed"
-            tt="uppercase"
-            fz="xs"
-            fw={600}
-            lts={1}
-          >
-            System
-          </Title>
+          <Flex justify="space-between" align="center" mb="sm">
+            <Title order={5} c="dimmed" tt="uppercase" fz="xs" fw={600} lts={1}>
+              System
+            </Title>
+            <ActionButton
+              size="xs"
+              variant="subtle"
+              color="gray"
+              loading={reloading}
+              onClick={handleReload}
+              icon={<IconRefresh size={14} />}
+            >
+              Reload
+            </ActionButton>
+          </Flex>
           <SimpleGrid cols={{ base: 2, sm: 3, md: 4, lg: 6 }} spacing="sm">
             {system && (
               <>
@@ -240,7 +259,7 @@ export const DevDashboard = () => {
           </SimpleGrid>
         </div>
 
-        <Grid gutter="lg">
+        <Grid gap="lg">
           {/* Recent Events */}
           <Grid.Col span={{ base: 12, md: 7 }}>
             <Card

package/src/ui/components/database/DatabaseEditor.tsx

@@ -16,7 +16,7 @@ import {
 import { jsonSchemaToTypeBox, t } from "alepha";
 import { useInject } from "alepha/react";
 import { useForm } from "alepha/react/form";
-import { useRouter } from "alepha/react/router";
+import { useRouter, useRouterState } from "alepha/react/router";
 import { HttpClient } from "alepha/server";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { TreeView, type TreeViewNode } from "../shared/TreeView.tsx";
@@ -107,12 +107,15 @@ const parseEditorPath = (pathname: string) => {
 export const DatabaseEditor = ({ entities }: { entities: any[] }) => {
   const http = useInject(HttpClient);
   const router = useRouter();
+  const state = useRouterState();
   const [records, setRecords] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [search, setSearch] = useState("");
   const [pageInfo, setPageInfo] = useState<any>(null);
 
-  const { table: selectedEntity, recordId } = parseEditorPath(router.pathname);
+  const { table: selectedEntity, recordId } = parseEditorPath(
+    state.url.pathname,
+  );
   const isNew = recordId === "new";
 
   const entity = entities.find((e) => e.name === selectedEntity);