@alepha/devtools 0.19.1 → 0.19.3

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;

package/dist/index.browser.js

@@ -1,224 +0,0 @@
-import { $module, t } from "alepha";
-//#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()),
-	middlewares: t.optional(t.array(t.object({
-		name: t.text(),
-		options: t.optional(t.any())
-	})))
-});
-//#endregion
-//#region src/schemas/DevAtomMetadata.ts
-const devAtomMetadataSchema = t.object({
-	name: t.text(),
-	description: t.optional(t.text()),
-	schema: t.any(),
-	defaultValue: t.optional(t.any()),
-	currentValue: t.optional(t.any())
-});
-//#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/DevEntityMetadata.ts
-const devEntityColumnSchema = t.object({
-	name: t.text(),
-	type: t.text(),
-	nullable: t.boolean(),
-	primaryKey: t.boolean(),
-	identity: t.boolean(),
-	createdAt: t.boolean(),
-	updatedAt: t.boolean(),
-	deletedAt: t.boolean(),
-	version: t.boolean(),
-	hasDefault: t.boolean(),
-	ref: t.optional(t.object({
-		entity: t.text(),
-		column: t.text(),
-		onUpdate: t.optional(t.text()),
-		onDelete: t.optional(t.text())
-	}))
-});
-const devEntityIndexSchema = t.object({
-	name: t.optional(t.text()),
-	columns: t.array(t.text()),
-	unique: t.boolean()
-});
-const devEntityForeignKeySchema = t.object({
-	name: t.optional(t.text()),
-	columns: t.array(t.text()),
-	foreignEntity: t.text(),
-	foreignColumns: t.array(t.text())
-});
-const devEntityConstraintSchema = t.object({
-	name: t.optional(t.text()),
-	columns: t.array(t.text()),
-	unique: t.boolean(),
-	hasCheck: t.boolean()
-});
-const devEntityMetadataSchema = t.object({
-	name: t.text(),
-	provider: t.text(),
-	columns: t.array(devEntityColumnSchema),
-	indexes: t.array(devEntityIndexSchema),
-	foreignKeys: t.array(devEntityForeignKeySchema),
-	constraints: t.array(devEntityConstraintSchema),
-	schema: t.optional(t.any()),
-	insertSchema: t.optional(t.any()),
-	updateSchema: t.optional(t.any())
-});
-//#endregion
-//#region src/schemas/DevEnvMetadata.ts
-const devEnvMetadataSchema = t.object({
-	propertyKey: t.text(),
-	schema: t.any(),
-	values: t.record(t.text(), t.any()),
-	serviceName: t.optional(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(),
-	label: t.optional(t.text()),
-	description: t.optional(t.text()),
-	path: t.optional(t.text()),
-	parentName: t.optional(t.text()),
-	params: t.optional(t.any()),
-	query: t.optional(t.any()),
-	hasComponent: t.boolean(),
-	hasLazy: t.boolean(),
-	hasResolve: t.boolean(),
-	childrenNames: t.optional(t.array(t.text())),
-	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/DevRouteMetadata.ts
-const devRouteMetadataSchema = t.object({
-	method: t.text(),
-	path: t.text()
-});
-//#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(),
-	subscribers: t.integer()
-});
-//#endregion
-//#region src/schemas/DevMetadata.ts
-const devSystemSchema = t.object({
-	alephaVersion: t.text(),
-	nodeVersion: t.text(),
-	runtime: t.enum(["node", "bun"]),
-	mode: t.enum(["development", "production"]),
-	port: t.integer(),
-	uptime: t.number(),
-	memoryUsage: t.number()
-});
-const devMetadataSchema = t.object({
-	system: devSystemSchema,
-	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),
-	entities: t.array(devEntityMetadataSchema),
-	routes: t.array(devRouteMetadataSchema),
-	envs: t.array(devEnvMetadataSchema),
-	atoms: t.array(devAtomMetadataSchema)
-});
-//#endregion
-//#region src/index.browser.ts
-const AlephaDevtools = $module({ name: "alepha.devtools" });
-//#endregion
-export { AlephaDevtools, devActionMetadataSchema, devAtomMetadataSchema, devBucketMetadataSchema, devCacheMetadataSchema, devEntityColumnSchema, devEntityConstraintSchema, devEntityForeignKeySchema, devEntityIndexSchema, devEntityMetadataSchema, devEnvMetadataSchema, devMetadataSchema, devModuleMetadataSchema, devPageMetadataSchema, devProviderMetadataSchema, devQueueMetadataSchema, devRealmMetadataSchema, devRouteMetadataSchema, devSchedulerMetadataSchema, devSystemSchema, devTopicMetadataSchema };
-
-//# sourceMappingURL=index.browser.js.map