@alepha/devtools 0.16.0 → 0.19.1

package/src/ui/components/DevEnvExplorer.tsx

@@ -1,462 +0,0 @@
-import { ui } from "@alepha/ui";
-import {
-  Badge,
-  Box,
-  Code,
-  CopyButton,
-  Flex,
-  ScrollArea,
-  Stack,
-  Table,
-  Text,
-  TextInput,
-  Tooltip,
-} from "@mantine/core";
-import {
-  IconCheck,
-  IconCopy,
-  IconKey,
-  IconSearch,
-  IconSettings,
-  IconVariable,
-} from "@tabler/icons-react";
-import { useInject } from "alepha/react";
-import { HttpClient } from "alepha/server";
-import { useEffect, useMemo, useState } from "react";
-import type { DevEnvMetadata } from "../../api/schemas/DevEnvMetadata.ts";
-import { devMetadataSchema } from "../../api/schemas/DevMetadata.ts";
-
-interface EnvVariable {
-  name: string;
-  value: any;
-  type: string;
-  description?: string;
-  format?: string;
-}
-
-const parseEnvVariables = (envs: DevEnvMetadata[]): EnvVariable[] => {
-  const variableMap = new Map<string, EnvVariable>();
-
-  for (const env of envs) {
-    const schema = env.schema;
-    if (!schema?.properties) continue;
-
-    for (const [name, propSchema] of Object.entries(schema.properties)) {
-      // Skip if already added (deduplication)
-      if (variableMap.has(name)) continue;
-
-      const prop = propSchema as any;
-      const value = env.values[name];
-
-      // Get the actual type from schema
-      let type = prop.type ?? "unknown";
-      let format = prop.format;
-
-      // Handle union types (optional)
-      if (prop.anyOf) {
-        const nonNull = prop.anyOf.find((t: any) => t.type !== "null");
-        if (nonNull) {
-          type = nonNull.type ?? "unknown";
-          format = nonNull.format;
-        }
-      }
-
-      variableMap.set(name, {
-        name,
-        value,
-        type,
-        description: prop.description,
-        format,
-      });
-    }
-  }
-
-  return Array.from(variableMap.values()).sort((a, b) =>
-    a.name.localeCompare(b.name),
-  );
-};
-
-const EnvSidebar = ({
-  variables,
-  selectedVar,
-  onSelectVar,
-  search,
-  onSearchChange,
-}: {
-  variables: EnvVariable[];
-  selectedVar: EnvVariable | null;
-  onSelectVar: (v: EnvVariable) => void;
-  search: string;
-  onSearchChange: (s: string) => void;
-}) => {
-  return (
-    <Stack gap={0} h="100%">
-      <Box p="sm" style={{ borderBottom: `1px solid ${ui.colors.border}` }}>
-        <TextInput
-          placeholder="Search variables..."
-          leftSection={<IconSearch size={14} />}
-          size="xs"
-          value={search}
-          onChange={(e) => onSearchChange(e.target.value)}
-        />
-      </Box>
-      <ScrollArea style={{ flex: 1 }}>
-        <Box>
-          <Text
-            size="xs"
-            fw={600}
-            c="dimmed"
-            px="sm"
-            py="xs"
-            style={{
-              backgroundColor: ui.colors.background,
-              borderBottom: `1px solid ${ui.colors.border}`,
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-            }}
-          >
-            Variables ({variables.length})
-          </Text>
-          {variables.map((v) => {
-            const isSelected = selectedVar?.name === v.name;
-            return (
-              <Flex
-                key={v.name}
-                align="center"
-                gap="xs"
-                px="sm"
-                py={6}
-                onClick={() => onSelectVar(v)}
-                style={{
-                  cursor: "pointer",
-                  backgroundColor: isSelected ? "#228be615" : undefined,
-                  borderLeft: isSelected
-                    ? "2px solid #228be6"
-                    : "2px solid transparent",
-                  borderBottom: `1px solid ${ui.colors.border}`,
-                }}
-              >
-                <IconVariable size={14} opacity={0.5} />
-                <Text size="sm" style={{ flex: 1 }} truncate ff="monospace">
-                  {v.name}
-                </Text>
-              </Flex>
-            );
-          })}
-        </Box>
-      </ScrollArea>
-    </Stack>
-  );
-};
-
-const EnvPanel = ({ variable }: { variable: EnvVariable }) => {
-  const hasValue = variable.value !== undefined && variable.value !== "";
-  const displayValue = hasValue ? String(variable.value) : "(not set)";
-  const isSensitive =
-    variable.name.toLowerCase().includes("secret") ||
-    variable.name.toLowerCase().includes("password") ||
-    variable.name.toLowerCase().includes("key") ||
-    variable.name.toLowerCase().includes("token");
-
-  return (
-    <Flex direction="column" h="100%">
-      {/* Header */}
-      <Box
-        px="md"
-        py="sm"
-        style={{
-          borderBottom: `1px solid ${ui.colors.border}`,
-          backgroundColor: "#228be608",
-        }}
-      >
-        <Flex align="center" gap="sm">
-          <IconVariable size={18} opacity={0.7} />
-          <Text size="md" fw={600} ff="monospace">
-            {variable.name}
-          </Text>
-          <Badge size="xs" variant="outline" color="blue">
-            {variable.format || variable.type}
-          </Badge>
-        </Flex>
-      </Box>
-
-      <ScrollArea style={{ flex: 1 }} p="md">
-        <Stack gap="lg">
-          {/* Description */}
-          {variable.description && (
-            <Box>
-              <Text size="sm" fw={600} mb="xs">
-                Description
-              </Text>
-              <Text size="sm" c="dimmed">
-                {variable.description}
-              </Text>
-            </Box>
-          )}
-
-          {/* Current Value */}
-          <Box>
-            <Text size="sm" fw={600} mb="xs">
-              Current Value
-            </Text>
-            <Flex align="center" gap="sm">
-              <Code
-                block
-                style={{
-                  flex: 1,
-                  filter: isSensitive && hasValue ? "blur(4px)" : undefined,
-                  transition: "filter 0.2s",
-                }}
-                onMouseEnter={(e) => {
-                  if (isSensitive) e.currentTarget.style.filter = "none";
-                }}
-                onMouseLeave={(e) => {
-                  if (isSensitive && hasValue)
-                    e.currentTarget.style.filter = "blur(4px)";
-                }}
-              >
-                {displayValue}
-              </Code>
-              {hasValue && (
-                <CopyButton value={String(variable.value)}>
-                  {({ copied, copy }) => (
-                    <Tooltip label={copied ? "Copied!" : "Copy value"}>
-                      <Box
-                        onClick={copy}
-                        style={{ cursor: "pointer" }}
-                        c={copied ? "teal" : "dimmed"}
-                      >
-                        {copied ? (
-                          <IconCheck size={16} />
-                        ) : (
-                          <IconCopy size={16} />
-                        )}
-                      </Box>
-                    </Tooltip>
-                  )}
-                </CopyButton>
-              )}
-            </Flex>
-            {isSensitive && (
-              <Text size="xs" c="dimmed" mt="xs">
-                Hover to reveal sensitive value
-              </Text>
-            )}
-          </Box>
-
-          {/* Schema Info */}
-          <Box>
-            <Text size="sm" fw={600} mb="xs">
-              Schema
-            </Text>
-            <Table striped highlightOnHover withTableBorder>
-              <Table.Tbody>
-                <Table.Tr>
-                  <Table.Td w={120}>
-                    <Text size="sm" c="dimmed">
-                      Type
-                    </Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Text size="sm" ff="monospace">
-                      {variable.type}
-                    </Text>
-                  </Table.Td>
-                </Table.Tr>
-                {variable.format && (
-                  <Table.Tr>
-                    <Table.Td>
-                      <Text size="sm" c="dimmed">
-                        Format
-                      </Text>
-                    </Table.Td>
-                    <Table.Td>
-                      <Text size="sm" ff="monospace">
-                        {variable.format}
-                      </Text>
-                    </Table.Td>
-                  </Table.Tr>
-                )}
-              </Table.Tbody>
-            </Table>
-          </Box>
-
-          {/* Usage hint */}
-          <Box>
-            <Text size="sm" fw={600} mb="xs">
-              Usage
-            </Text>
-            <Code block>
-              {`# Set in .env file or environment
-${variable.name}=${hasValue ? variable.value : "<value>"}`}
-            </Code>
-          </Box>
-        </Stack>
-      </ScrollArea>
-    </Flex>
-  );
-};
-
-const EmptyState = () => (
-  <Flex align="center" justify="center" h="100%" c="dimmed">
-    <Stack align="center" gap="xs">
-      <IconVariable size={48} opacity={0.3} />
-      <Text size="sm">Select a variable to view details</Text>
-    </Stack>
-  </Flex>
-);
-
-const NoEnvsState = () => (
-  <Flex align="center" justify="center" h="100%" c="dimmed">
-    <Stack align="center" gap="xs">
-      <IconSettings size={48} opacity={0.3} />
-      <Text>No environment variables found</Text>
-      <Text size="sm" c="dimmed">
-        Use $env primitive to define expected environment variables
-      </Text>
-    </Stack>
-  </Flex>
-);
-
-const AllEnvsTable = ({ variables }: { variables: EnvVariable[] }) => {
-  return (
-    <ScrollArea h="100%" p="md">
-      <Stack gap="lg">
-        <Box>
-          <Flex align="center" gap="xs" mb="sm">
-            <IconKey size={18} opacity={0.7} />
-            <Text size="md" fw={600}>
-              All Environment Variables
-            </Text>
-            <Badge size="sm" variant="light">
-              {variables.length} variables
-            </Badge>
-          </Flex>
-          <Table striped highlightOnHover withTableBorder>
-            <Table.Thead>
-              <Table.Tr>
-                <Table.Th>Name</Table.Th>
-                <Table.Th>Type</Table.Th>
-                <Table.Th>Value</Table.Th>
-              </Table.Tr>
-            </Table.Thead>
-            <Table.Tbody>
-              {variables.map((v) => {
-                const hasValue = v.value !== undefined && v.value !== "";
-                const isSensitive =
-                  v.name.toLowerCase().includes("secret") ||
-                  v.name.toLowerCase().includes("password") ||
-                  v.name.toLowerCase().includes("key") ||
-                  v.name.toLowerCase().includes("token");
-                return (
-                  <Table.Tr key={v.name}>
-                    <Table.Td>
-                      <Text size="sm" ff="monospace" fw={500}>
-                        {v.name}
-                      </Text>
-                    </Table.Td>
-                    <Table.Td>
-                      <Badge size="xs" variant="outline" color="blue">
-                        {v.format || v.type}
-                      </Badge>
-                    </Table.Td>
-                    <Table.Td>
-                      {hasValue ? (
-                        <Text
-                          size="sm"
-                          ff="monospace"
-                          c="dimmed"
-                          style={{
-                            filter: isSensitive ? "blur(4px)" : undefined,
-                          }}
-                        >
-                          {String(v.value).slice(0, 30)}
-                          {String(v.value).length > 30 ? "..." : ""}
-                        </Text>
-                      ) : (
-                        <Text size="sm" c="dimmed" fs="italic">
-                          (not set)
-                        </Text>
-                      )}
-                    </Table.Td>
-                  </Table.Tr>
-                );
-              })}
-            </Table.Tbody>
-          </Table>
-        </Box>
-      </Stack>
-    </ScrollArea>
-  );
-};
-
-export const DevEnvExplorer = () => {
-  const http = useInject(HttpClient);
-  const [envs, setEnvs] = useState<DevEnvMetadata[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [selectedVar, setSelectedVar] = useState<EnvVariable | null>(null);
-  const [search, setSearch] = useState("");
-
-  useEffect(() => {
-    http
-      .fetch("/devtools/api/metadata", {
-        schema: { response: devMetadataSchema },
-      })
-      .then((res) => {
-        setEnvs(res.data.envs);
-        setLoading(false);
-      });
-  }, []);
-
-  const variables = useMemo(() => parseEnvVariables(envs), [envs]);
-
-  const filteredVariables = useMemo(() => {
-    if (!search) return variables;
-    const searchLower = search.toLowerCase();
-    return variables.filter((v) => v.name.toLowerCase().includes(searchLower));
-  }, [variables, search]);
-
-  if (loading) {
-    return (
-      <Flex align="center" justify="center" h="100%">
-        <Text c="dimmed">Loading...</Text>
-      </Flex>
-    );
-  }
-
-  if (variables.length === 0) {
-    return <NoEnvsState />;
-  }
-
-  return (
-    <Flex h="100%" style={{ overflow: "hidden" }}>
-      {/* Sidebar */}
-      <Box
-        w={280}
-        style={{
-          borderRight: `1px solid ${ui.colors.border}`,
-          backgroundColor: ui.colors.surface,
-        }}
-      >
-        <EnvSidebar
-          variables={filteredVariables}
-          selectedVar={selectedVar}
-          onSelectVar={setSelectedVar}
-          search={search}
-          onSearchChange={setSearch}
-        />
-      </Box>
-
-      {/* Main content */}
-      <Box style={{ flex: 1, overflow: "hidden" }}>
-        {selectedVar ? (
-          <EnvPanel variable={selectedVar} />
-        ) : (
-          <AllEnvsTable variables={variables} />
-        )}
-      </Box>
-    </Flex>
-  );
-};
-
-export default DevEnvExplorer;

package/src/ui/components/DevLogViewer.tsx

@@ -1,252 +0,0 @@
-import { ActionButton, DataTable, DialogService, Flex, Text } from "@alepha/ui";
-import { type Page, t } from "alepha";
-import { dayjs } from "alepha/datetime";
-import { type LogEntry, logEntrySchema } from "alepha/logger";
-import { useInject } from "alepha/react";
-import { useI18n } from "alepha/react/i18n";
-import { HttpClient } from "alepha/server";
-import { logs } from "../../api/entities/logs.ts";
-
-const DevLogViewer = () => {
-  const http = useInject(HttpClient);
-  const { l } = useI18n();
-
-  const renderLevel = (level: string) => {
-    switch (level.toLowerCase()) {
-      case "error":
-        return (
-          <Text ff={"monospace"} c="red">
-            {level.slice(0, 5)}
-          </Text>
-        );
-      case "warn":
-        return (
-          <Text ff={"monospace"} c="orange">
-            {level.slice(0, 5)}
-          </Text>
-        );
-      case "info":
-        return (
-          <Text ff={"monospace"} c="green">
-            {level.slice(0, 5)}
-          </Text>
-        );
-      case "debug":
-        return (
-          <Text ff={"monospace"} c="grape">
-            {level.slice(0, 5)}
-          </Text>
-        );
-      case "trace":
-        return (
-          <Text ff={"monospace"} c="dimmed">
-            {level.slice(0, 5)}
-          </Text>
-        );
-      default:
-        return <Text>{level}</Text>;
-    }
-  };
-
-  const filters = t.object({
-    search: t.optional(
-      t.string({
-        $control: {
-          query: t.omit(logs.schema, ["id"]),
-        },
-      }),
-    ),
-    level: t.optional(
-      t.array(
-        t.enum(["TRACE", "DEBUG", "INFO", "WARN", "ERROR"], {
-          $control: {},
-        }),
-      ),
-    ),
-  });
-
-  return (
-    <DataTable<LogEntry, typeof filters>
-      submitOnInit
-      infinityScroll
-      submitEvery={[10, "seconds"]}
-      defaultSize={20}
-      typeFormProps={{
-        skipSubmitButton: true,
-        columns: 2,
-      }}
-      tableProps={{
-        horizontalSpacing: "xs",
-        verticalSpacing: 0,
-      }}
-      onFilterChange={(key, value, form) => {
-        if (key === "search" || key === "level") {
-          return form.submit();
-        }
-      }}
-      filters={filters}
-      tableTrProps={(item) => {
-        if (item.level.toLowerCase() === "error") {
-          return {
-            bg: "rgba(255,0,0,0.1)",
-          };
-        }
-        if (item.level.toLowerCase() === "warn") {
-          return {
-            bg: "rgba(255,153,0,0.1)",
-          };
-        }
-        return {};
-      }}
-      items={async (filters, ctx) => {
-        if (filters.search) {
-          filters.search = filters.search.replace(
-            "now()",
-            new Date().toISOString(),
-          );
-        }
-
-        if (filters.page && filters.page > 0) {
-          const next = `timestamp < ${ctx.items[0].timestamp}`;
-          if (filters.search) {
-            filters.search += `& ${next}`;
-          } else {
-            filters.search = next;
-          }
-        }
-
-        if (filters.level) {
-          const levelFilter = filters.level
-            .map((it) => `level = ${it}`)
-            .join(" | ");
-
-          if (filters.search) {
-            filters.search += `& (${levelFilter})`;
-          } else {
-            filters.search = levelFilter;
-          }
-        }
-
-        const queryParams = new URLSearchParams(
-          filters as Record<string, any>,
-        ).toString();
-
-        const response = await http.fetch(`/devtools/api/logs?${queryParams}`, {
-          schema: {
-            response: t.page(logEntrySchema),
-          },
-        });
-
-        return response.data as Page<LogEntry>;
-      }}
-      columns={{
-        timestamp: {
-          label: "timestamp",
-          value: (item, { form }) => (
-            <ActionButton
-              intent={"none"}
-              variant={"transparent"}
-              h={20}
-              size={"xs"}
-              tooltip={l(item.timestamp, {
-                date: "DD MMM YYYY HH:mm:ss.SSS",
-              })}
-              onClick={() => {
-                const before = dayjs(item.timestamp).subtract(1, "minute");
-                const after = dayjs(item.timestamp).add(1, "minute");
-                form.input.search.set(
-                  `timestamp >= ${before.toISOString()} & timestamp <= ${after.toISOString()}`,
-                );
-              }}
-            >
-              {l(item.timestamp, {
-                date: "HH:mm:ss.SSS",
-              })}
-            </ActionButton>
-          ),
-        },
-        level: {
-          label: "level",
-          value: (item) => renderLevel(item.level),
-        },
-        app: {
-          label: "app",
-          value: (item) => item.app,
-        },
-        context: {
-          fit: true,
-          label: "context",
-          value: (item, { form }) =>
-            item.context && (
-              <ActionButton
-                intent={"none"}
-                variant={"transparent"}
-                h={20}
-                size={"xs"}
-                onClick={() => {
-                  form.input.search.set(`context = ${item.context}`);
-                }}
-              >
-                <Text ff={"monospace"} size={"xs"}>
-                  {item.context.replaceAll("-", "").slice(0, 10)}
-                </Text>
-              </ActionButton>
-            ),
-        },
-        service: {
-          fit: true,
-          label: "service",
-          value: (item) => (
-            <Flex align={"center"} justify={"end"}>
-              {item.module && (
-                <Text c="dimmed" size={"xs"}>
-                  {item.module}.
-                </Text>
-              )}
-              <Text size={"sm"}>{item.service}</Text>
-            </Flex>
-          ),
-        },
-        message: {
-          label: "message",
-          value: (item) => {
-            if (item.data?.ms && item.data.status) {
-              return `${item.message} - ${item.data.status} [${item.data.ms}ms]`;
-            }
-            if (item.data?.path && item.data.method) {
-              return `${item.message} - ${item.data.method} ${item.data.path}`;
-            }
-            return item.message;
-          },
-        },
-        data: {
-          label: "more",
-          value: (item, { alepha }) => {
-            if (!item.data) {
-              return;
-            }
-
-            if (Object.keys(item.data).length === 0) {
-              return;
-            }
-
-            return (
-              <ActionButton
-                opacity={0.5}
-                h={20}
-                px={4}
-                size={"xs"}
-                fw={"bold"}
-                onClick={() => alepha.inject(DialogService).json(item.data)}
-              >
-                {"{ ... }"}
-              </ActionButton>
-            );
-          },
-        },
-      }}
-    />
-  );
-};
-
-export default DevLogViewer;