@alepha/devtools 0.19.1 → 0.19.2

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 && (
               <>

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);

package/src/ui/components/emails/DevEmails.tsx

@@ -0,0 +1,250 @@
+import { Flex, ui } from "@alepha/ui";
+import { Badge, CloseButton, ScrollArea, Text, TextInput } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import { useInject } from "alepha/react";
+import { HttpClient } from "alepha/server";
+import { useCallback, useEffect, useState } from "react";
+
+interface EmailEntry {
+  to: string;
+  subject: string;
+  body: string;
+  sentAt: string;
+}
+
+const formatDate = (iso: string): string => {
+  const d = new Date(iso);
+  return d.toLocaleString();
+};
+
+const formatRelative = (iso: string): string => {
+  const diff = Date.now() - new Date(iso).getTime();
+  if (diff < 1000) return "just now";
+  if (diff < 60_000) return `${Math.floor(diff / 1000)}s ago`;
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  return `${Math.floor(diff / 3_600_000)}h ago`;
+};
+
+export const DevEmails = () => {
+  const http = useInject(HttpClient);
+  const [emails, setEmails] = useState<EmailEntry[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const [search, setSearch] = useState("");
+
+  const fetchEmails = useCallback(async () => {
+    if (document.visibilityState !== "visible") return;
+    try {
+      const res = await http.fetch("/__devtools/api/emails");
+      const data = res.data as any;
+      setEmails(data?.emails ?? []);
+    } catch {
+      // silently fail
+    }
+  }, [http]);
+
+  useEffect(() => {
+    fetchEmails();
+    const interval = setInterval(fetchEmails, 10_000);
+    return () => clearInterval(interval);
+  }, [fetchEmails]);
+
+  const filtered = emails.filter((email) => {
+    if (!search) return true;
+    const q = search.toLowerCase();
+    return (
+      email.to.toLowerCase().includes(q) ||
+      email.subject.toLowerCase().includes(q)
+    );
+  });
+
+  const selectedEmail = selectedIndex !== null ? filtered[selectedIndex] : null;
+
+  return (
+    <Flex style={{ flex: 1, overflow: "hidden" }} direction="column">
+      {/* Filter bar */}
+      <Flex
+        px="md"
+        py="xs"
+        gap="sm"
+        align="center"
+        style={{
+          borderBottom: `1px solid ${ui.colors.border}`,
+          flexShrink: 0,
+        }}
+      >
+        <TextInput
+          size="xs"
+          placeholder="Search..."
+          leftSection={<IconSearch size={14} />}
+          value={search}
+          onChange={(e) => setSearch(e.currentTarget.value)}
+          style={{ flex: 1, minWidth: 150, maxWidth: 300 }}
+        />
+        <Badge variant="light" color="gray" size="sm">
+          {filtered.length} emails
+        </Badge>
+      </Flex>
+
+      {/* Main area: list + detail */}
+      <Flex style={{ flex: 1, overflow: "hidden" }}>
+        {/* Email list */}
+        <Flex direction="column" style={{ flex: 1, overflow: "hidden" }}>
+          <ScrollArea style={{ flex: 1 }}>
+            {filtered.length === 0 && (
+              <Flex align="center" justify="center" py="xl" c="dimmed">
+                <Text fz="sm">No emails to display</Text>
+              </Flex>
+            )}
+            {filtered.map((email, i) => {
+              const isSelected = selectedIndex === i;
+
+              return (
+                <Flex
+                  key={`${email.sentAt}-${i}`}
+                  direction="column"
+                  px="md"
+                  py="xs"
+                  onClick={() => setSelectedIndex(isSelected ? null : i)}
+                  style={{
+                    borderBottom: `1px solid ${ui.colors.border}20`,
+                    background: isSelected ? ui.colors.elevated : "transparent",
+                    cursor: "pointer",
+                    transition: "background 100ms",
+                  }}
+                  onMouseEnter={(e) => {
+                    if (!isSelected) {
+                      (e.currentTarget as HTMLElement).style.background =
+                        `${ui.colors.elevated}80`;
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isSelected) {
+                      (e.currentTarget as HTMLElement).style.background =
+                        "transparent";
+                    }
+                  }}
+                >
+                  <Flex justify="space-between" align="center">
+                    <Text fz="sm" truncate>
+                      {email.to}
+                    </Text>
+                    <Text fz={11} c="dimmed" style={{ flexShrink: 0 }}>
+                      {formatRelative(email.sentAt)}
+                    </Text>
+                  </Flex>
+                  <Text fz="xs" c="dimmed" truncate>
+                    {email.subject}
+                  </Text>
+                </Flex>
+              );
+            })}
+          </ScrollArea>
+        </Flex>
+
+        {/* Detail panel */}
+        {selectedEmail && (
+          <Flex
+            w={500}
+            direction="column"
+            style={{
+              borderLeft: `1px solid ${ui.colors.border}`,
+              flexShrink: 0,
+              overflow: "hidden",
+            }}
+          >
+            <Flex
+              px="md"
+              py="xs"
+              align="center"
+              justify="space-between"
+              style={{
+                borderBottom: `1px solid ${ui.colors.border}`,
+                flexShrink: 0,
+              }}
+            >
+              <Text fz="xs" fw={600} tt="uppercase" c="dimmed" lts={0.5}>
+                Email Detail
+              </Text>
+              <CloseButton size="xs" onClick={() => setSelectedIndex(null)} />
+            </Flex>
+            <ScrollArea style={{ flex: 1 }} p="md">
+              <Flex direction="column" gap="md">
+                {/* To */}
+                <Flex direction="column">
+                  <Text
+                    fz={10}
+                    c="dimmed"
+                    tt="uppercase"
+                    fw={600}
+                    lts={0.5}
+                    mb={4}
+                  >
+                    To
+                  </Text>
+                  <Text fz="xs">{selectedEmail.to}</Text>
+                </Flex>
+
+                {/* Date */}
+                <Flex direction="column">
+                  <Text
+                    fz={10}
+                    c="dimmed"
+                    tt="uppercase"
+                    fw={600}
+                    lts={0.5}
+                    mb={4}
+                  >
+                    Date
+                  </Text>
+                  <Text fz="xs">{formatDate(selectedEmail.sentAt)}</Text>
+                </Flex>
+
+                {/* Subject */}
+                <Flex direction="column">
+                  <Text
+                    fz={10}
+                    c="dimmed"
+                    tt="uppercase"
+                    fw={600}
+                    lts={0.5}
+                    mb={4}
+                  >
+                    Subject
+                  </Text>
+                  <Text fz="xs">{selectedEmail.subject}</Text>
+                </Flex>
+
+                {/* Body */}
+                <Flex direction="column">
+                  <Text
+                    fz={10}
+                    c="dimmed"
+                    tt="uppercase"
+                    fw={600}
+                    lts={0.5}
+                    mb={4}
+                  >
+                    Body
+                  </Text>
+                  <div
+                    style={{
+                      background: "white",
+                      color: "#333",
+                      border: "1px solid #ccc",
+                      borderRadius: 4,
+                      padding: 12,
+                    }}
+                    // biome-ignore lint/security/noDangerouslySetInnerHtml: devtools renders developer's own email HTML
+                    dangerouslySetInnerHTML={{ __html: selectedEmail.body }}
+                  />
+                </Flex>
+              </Flex>
+            </ScrollArea>
+          </Flex>
+        )}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default DevEmails;

package/src/ui/components/explorer/DevExplorer.tsx

@@ -87,7 +87,7 @@ const buildTree = (metadata: any): TreeNode[] => {
     for (const page of metadata.pages) {
       pageNodeMap.set(page.name, {
         id: `page:${page.name}`,
-        label: page.label || page.name,
+        label: page.name,
         type: "page" as const,
         data: page,
         children: [],

package/src/ui/components/sms/DevSms.tsx

@@ -0,0 +1,225 @@
+import { Flex, ui } from "@alepha/ui";
+import { Badge, CloseButton, ScrollArea, Text, TextInput } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import { useInject } from "alepha/react";
+import { HttpClient } from "alepha/server";
+import { useCallback, useEffect, useState } from "react";
+
+interface SmsEntry {
+  to: string;
+  message: string;
+  sentAt: string;
+}
+
+const formatDate = (iso: string): string => {
+  const d = new Date(iso);
+  return d.toLocaleString();
+};
+
+const formatRelative = (iso: string): string => {
+  const diff = Date.now() - new Date(iso).getTime();
+  if (diff < 1000) return "just now";
+  if (diff < 60_000) return `${Math.floor(diff / 1000)}s ago`;
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  return `${Math.floor(diff / 3_600_000)}h ago`;
+};
+
+export const DevSms = () => {
+  const http = useInject(HttpClient);
+  const [messages, setMessages] = useState<SmsEntry[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const [search, setSearch] = useState("");
+
+  const fetchMessages = useCallback(async () => {
+    if (document.visibilityState !== "visible") return;
+    try {
+      const res = await http.fetch("/__devtools/api/sms");
+      const data = res.data as any;
+      setMessages(data?.messages ?? []);
+    } catch {
+      // silently fail
+    }
+  }, [http]);
+
+  useEffect(() => {
+    fetchMessages();
+    const interval = setInterval(fetchMessages, 10_000);
+    return () => clearInterval(interval);
+  }, [fetchMessages]);
+
+  const filtered = messages.filter((sms) => {
+    if (!search) return true;
+    const q = search.toLowerCase();
+    return (
+      sms.to.toLowerCase().includes(q) || sms.message.toLowerCase().includes(q)
+    );
+  });
+
+  const selectedSms = selectedIndex !== null ? filtered[selectedIndex] : null;
+
+  return (
+    <Flex style={{ flex: 1, overflow: "hidden" }} direction="column">
+      {/* Filter bar */}
+      <Flex
+        px="md"
+        py="xs"
+        gap="sm"
+        align="center"
+        style={{
+          borderBottom: `1px solid ${ui.colors.border}`,
+          flexShrink: 0,
+        }}
+      >
+        <TextInput
+          size="xs"
+          placeholder="Search..."
+          leftSection={<IconSearch size={14} />}
+          value={search}
+          onChange={(e) => setSearch(e.currentTarget.value)}
+          style={{ flex: 1, minWidth: 150, maxWidth: 300 }}
+        />
+        <Badge variant="light" color="gray" size="sm">
+          {filtered.length} messages
+        </Badge>
+      </Flex>
+
+      {/* Main area: list + detail */}
+      <Flex style={{ flex: 1, overflow: "hidden" }}>
+        {/* SMS list */}
+        <Flex direction="column" style={{ flex: 1, overflow: "hidden" }}>
+          <ScrollArea style={{ flex: 1 }}>
+            {filtered.length === 0 && (
+              <Flex align="center" justify="center" py="xl" c="dimmed">
+                <Text fz="sm">No messages to display</Text>
+              </Flex>
+            )}
+            {filtered.map((sms, i) => {
+              const isSelected = selectedIndex === i;
+
+              return (
+                <Flex
+                  key={`${sms.sentAt}-${i}`}
+                  direction="column"
+                  px="md"
+                  py="xs"
+                  onClick={() => setSelectedIndex(isSelected ? null : i)}
+                  style={{
+                    borderBottom: `1px solid ${ui.colors.border}20`,
+                    background: isSelected ? ui.colors.elevated : "transparent",
+                    cursor: "pointer",
+                    transition: "background 100ms",
+                  }}
+                  onMouseEnter={(e) => {
+                    if (!isSelected) {
+                      (e.currentTarget as HTMLElement).style.background =
+                        `${ui.colors.elevated}80`;
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isSelected) {
+                      (e.currentTarget as HTMLElement).style.background =
+                        "transparent";
+                    }
+                  }}
+                >
+                  <Flex justify="space-between" align="center">
+                    <Text fz="sm" truncate>
+                      {sms.to}
+                    </Text>
+                    <Text fz={11} c="dimmed" style={{ flexShrink: 0 }}>
+                      {formatRelative(sms.sentAt)}
+                    </Text>
+                  </Flex>
+                  <Text fz="xs" c="dimmed" truncate>
+                    {sms.message}
+                  </Text>
+                </Flex>
+              );
+            })}
+          </ScrollArea>
+        </Flex>
+
+        {/* Detail panel */}
+        {selectedSms && (
+          <Flex
+            w={400}
+            direction="column"
+            style={{
+              borderLeft: `1px solid ${ui.colors.border}`,
+              flexShrink: 0,
+              overflow: "hidden",
+            }}
+          >
+            <Flex
+              px="md"
+              py="xs"
+              align="center"
+              justify="space-between"
+              style={{
+                borderBottom: `1px solid ${ui.colors.border}`,
+                flexShrink: 0,
+              }}
+            >
+              <Text fz="xs" fw={600} tt="uppercase" c="dimmed" lts={0.5}>
+                Message Detail
+              </Text>
+              <CloseButton size="xs" onClick={() => setSelectedIndex(null)} />
+            </Flex>
+            <ScrollArea style={{ flex: 1 }} p="md">
+              <Flex direction="column" gap="md">
+                {/* To */}
+                <Flex direction="column">
+                  <Text
+                    fz={10}
+                    c="dimmed"
+                    tt="uppercase"
+                    fw={600}
+                    lts={0.5}
+                    mb={4}
+                  >
+                    To
+                  </Text>
+                  <Text fz="xs">{selectedSms.to}</Text>
+                </Flex>
+
+                {/* Date */}
+                <Flex direction="column">
+                  <Text
+                    fz={10}
+                    c="dimmed"
+                    tt="uppercase"
+                    fw={600}
+                    lts={0.5}
+                    mb={4}
+                  >
+                    Date
+                  </Text>
+                  <Text fz="xs">{formatDate(selectedSms.sentAt)}</Text>
+                </Flex>
+
+                {/* Message */}
+                <Flex direction="column">
+                  <Text
+                    fz={10}
+                    c="dimmed"
+                    tt="uppercase"
+                    fw={600}
+                    lts={0.5}
+                    mb={4}
+                  >
+                    Message
+                  </Text>
+                  <Text fz="xs" style={{ whiteSpace: "pre-wrap" }}>
+                    {selectedSms.message}
+                  </Text>
+                </Flex>
+              </Flex>
+            </ScrollArea>
+          </Flex>
+        )}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default DevSms;