@alepha/devtools 0.13.6 → 0.13.8

package/src/ui/components/actions/ActionGroup.tsx

@@ -0,0 +1,37 @@
+import { ui } from "@alepha/ui";
+import { Accordion, Badge, Box, Group, Text } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import type { DevActionMetadata } from "../../../api/schemas/DevActionMetadata.ts";
+import { ActionItem } from "./ActionItem.tsx";
+
+interface ActionGroupProps {
+  group: string;
+  actions: DevActionMetadata[];
+}
+
+export const ActionGroup = ({ group, actions }: ActionGroupProps) => (
+  <Box>
+    <Group gap="xs" mb="xs">
+      <IconChevronRight size={14} opacity={0.5} />
+      <Text size="xs" fw={600} tt="uppercase" c="dimmed">
+        {group}
+      </Text>
+      <Badge variant="light" color="gray" size="xs">
+        {actions.length}
+      </Badge>
+    </Group>
+    <Accordion
+      variant="separated"
+      styles={{
+        item: {
+          backgroundColor: ui.colors.surface,
+          border: `1px solid ${ui.colors.border}`,
+        },
+      }}
+    >
+      {actions.map((action) => (
+        <ActionItem key={action.fullPath} action={action} />
+      ))}
+    </Accordion>
+  </Box>
+);

package/src/ui/components/actions/ActionItem.tsx

@@ -0,0 +1,138 @@
+import {
+  Accordion,
+  ActionIcon,
+  Badge,
+  Box,
+  Code,
+  CopyButton,
+  Group,
+  Stack,
+  Tabs,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import {
+  IconCheck,
+  IconCopy,
+  IconLock,
+  IconTerminal,
+} from "@tabler/icons-react";
+import { useMemo } from "react";
+import type { DevActionMetadata } from "../../../api/schemas/DevActionMetadata.ts";
+import { generateCurl } from "./helpers.ts";
+import { MethodBadge } from "./MethodBadge.tsx";
+import { SchemaViewer } from "./SchemaViewer.tsx";
+import { TryItPanel } from "./TryItPanel.tsx";
+
+interface ActionItemProps {
+  action: DevActionMetadata;
+}
+
+export const ActionItem = ({ action }: ActionItemProps) => {
+  const curl = useMemo(() => generateCurl(action), [action]);
+
+  return (
+    <Accordion.Item value={action.fullPath} opacity={action.disabled ? 0.5 : 1}>
+      <Accordion.Control>
+        <Group gap="sm" wrap="nowrap">
+          <MethodBadge method={action.method} />
+          <Text size="sm" ff="monospace" style={{ wordBreak: "break-all" }}>
+            {action.fullPath}
+          </Text>
+          {action.secure && (
+            <Tooltip label="Requires authentication">
+              <IconLock size={14} opacity={0.5} />
+            </Tooltip>
+          )}
+          {action.disabled && (
+            <Badge size="xs" variant="light" color="gray">
+              disabled
+            </Badge>
+          )}
+        </Group>
+      </Accordion.Control>
+      <Accordion.Panel>
+        <Stack gap="md">
+          {(action.description || action.summary) && (
+            <Text size="sm" c="dimmed">
+              {action.description || action.summary}
+            </Text>
+          )}
+
+          <Tabs defaultValue="schema" variant="outline">
+            <Tabs.List>
+              <Tabs.Tab value="schema" size="xs">
+                Schema
+              </Tabs.Tab>
+              <Tabs.Tab value="try" size="xs">
+                Try It
+              </Tabs.Tab>
+              <Tabs.Tab
+                value="curl"
+                size="xs"
+                leftSection={<IconTerminal size={12} />}
+              >
+                cURL
+              </Tabs.Tab>
+            </Tabs.List>
+
+            <Tabs.Panel value="schema" pt="md">
+              <Stack gap="md">
+                <Group gap="xl" align="flex-start">
+                  <SchemaViewer
+                    schema={action.params}
+                    label="Path Parameters"
+                  />
+                  <SchemaViewer
+                    schema={action.query}
+                    label="Query Parameters"
+                  />
+                </Group>
+                <SchemaViewer schema={action.body} label="Request Body" />
+                <SchemaViewer schema={action.response} label="Response" />
+                {!action.params &&
+                  !action.query &&
+                  !action.body &&
+                  !action.response && (
+                    <Text size="sm" c="dimmed">
+                      No schema defined
+                    </Text>
+                  )}
+              </Stack>
+            </Tabs.Panel>
+
+            <Tabs.Panel value="try" pt="md">
+              <TryItPanel action={action} />
+            </Tabs.Panel>
+
+            <Tabs.Panel value="curl" pt="md">
+              <Box pos="relative">
+                <CopyButton value={curl}>
+                  {({ copied, copy }) => (
+                    <ActionIcon
+                      size="sm"
+                      variant="subtle"
+                      onClick={copy}
+                      pos="absolute"
+                      top={8}
+                      right={8}
+                    >
+                      {copied ? (
+                        <IconCheck size={14} />
+                      ) : (
+                        <IconCopy size={14} />
+                      )}
+                    </ActionIcon>
+                  )}
+                </CopyButton>
+                <Code block style={{ fontSize: 11 }}>
+                  {curl}
+                </Code>
+              </Box>
+            </Tabs.Panel>
+          </Tabs>
+        </Stack>
+      </Accordion.Panel>
+    </Accordion.Item>
+  );
+};

package/src/ui/components/actions/DevActionsExplorer.tsx

@@ -0,0 +1,132 @@
+import { useInject } from "@alepha/react";
+import {
+  Badge,
+  Flex,
+  Group,
+  Loader,
+  ScrollArea,
+  SegmentedControl,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconApi, IconSearch } from "@tabler/icons-react";
+import { HttpClient } from "alepha/server";
+import { useEffect, useMemo, useState } from "react";
+import type { DevActionMetadata } from "../../../api/schemas/DevActionMetadata.ts";
+import { devMetadataSchema } from "../../../api/schemas/DevMetadata.ts";
+import { ActionGroup } from "./ActionGroup.tsx";
+
+export const DevActionsExplorer = () => {
+  const http = useInject(HttpClient);
+  const [actions, setActions] = useState<DevActionMetadata[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState("");
+  const [methodFilter, setMethodFilter] = useState("all");
+
+  useEffect(() => {
+    http
+      .fetch("/devtools/api/metadata", {
+        schema: { response: devMetadataSchema },
+      })
+      .then((res) => {
+        setActions(res.data.actions);
+        setLoading(false);
+      });
+  }, []);
+
+  const filteredActions = useMemo(() => {
+    return actions.filter((action) => {
+      if (action.hide) return false;
+      if (
+        methodFilter !== "all" &&
+        action.method.toUpperCase() !== methodFilter
+      ) {
+        return false;
+      }
+      if (search) {
+        const searchLower = search.toLowerCase();
+        return (
+          action.fullPath.toLowerCase().includes(searchLower) ||
+          action.name.toLowerCase().includes(searchLower) ||
+          action.group.toLowerCase().includes(searchLower) ||
+          action.description?.toLowerCase().includes(searchLower)
+        );
+      }
+      return true;
+    });
+  }, [actions, search, methodFilter]);
+
+  const groupedActions = useMemo(() => {
+    const groups: Record<string, DevActionMetadata[]> = {};
+    for (const action of filteredActions) {
+      const group = action.group || "Other";
+      if (!groups[group]) groups[group] = [];
+      groups[group].push(action);
+    }
+    return Object.entries(groups).sort(([a], [b]) => a.localeCompare(b));
+  }, [filteredActions]);
+
+  if (loading) {
+    return (
+      <Flex align="center" justify="center" h="100%">
+        <Loader size="sm" />
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex direction="column" gap="md" w="100%" h="100%" p={"xl"}>
+      <Group justify="space-between" wrap="nowrap">
+        <Group gap="sm">
+          <IconApi size={24} opacity={0.7} />
+          <Text size="lg" fw={500}>
+            Actions
+          </Text>
+          <Badge variant="light" color="gray" size="sm">
+            {filteredActions.length}
+          </Badge>
+        </Group>
+      </Group>
+
+      <Group gap="sm">
+        <TextInput
+          placeholder="Search actions..."
+          leftSection={<IconSearch size={14} />}
+          value={search}
+          onChange={(e) => setSearch(e.currentTarget.value)}
+          style={{ flex: 1 }}
+          size="sm"
+        />
+        <SegmentedControl
+          size="xs"
+          value={methodFilter}
+          onChange={setMethodFilter}
+          data={[
+            { label: "All", value: "all" },
+            { label: "GET", value: "GET" },
+            { label: "POST", value: "POST" },
+            { label: "PUT", value: "PUT" },
+            { label: "DELETE", value: "DELETE" },
+          ]}
+        />
+      </Group>
+
+      <ScrollArea flex={1} offsetScrollbars>
+        {groupedActions.length === 0 ? (
+          <Flex align="center" justify="center" h={200}>
+            <Text c="dimmed">No actions found</Text>
+          </Flex>
+        ) : (
+          <Stack gap="md">
+            {groupedActions.map(([group, groupActions]) => (
+              <ActionGroup key={group} group={group} actions={groupActions} />
+            ))}
+          </Stack>
+        )}
+      </ScrollArea>
+    </Flex>
+  );
+};
+
+export default DevActionsExplorer;

package/src/ui/components/actions/MethodBadge.tsx

@@ -0,0 +1,18 @@
+import { Badge } from "@mantine/core";
+import { METHOD_COLORS } from "./constants.ts";
+
+interface MethodBadgeProps {
+  method: string;
+}
+
+export const MethodBadge = ({ method }: MethodBadgeProps) => (
+  <Badge
+    variant="light"
+    color={METHOD_COLORS[method.toUpperCase()] || "gray"}
+    size="sm"
+    radius="sm"
+    w={60}
+  >
+    {method.toUpperCase()}
+  </Badge>
+);

package/src/ui/components/actions/SchemaViewer.tsx

@@ -0,0 +1,21 @@
+import { Box, Code, Text } from "@mantine/core";
+
+interface SchemaViewerProps {
+  schema: unknown;
+  label: string;
+}
+
+export const SchemaViewer = ({ schema, label }: SchemaViewerProps) => {
+  if (!schema) return null;
+
+  return (
+    <Box>
+      <Text size="xs" fw={500} c="dimmed" mb={4}>
+        {label}
+      </Text>
+      <Code block style={{ fontSize: 11, maxHeight: 200, overflow: "auto" }}>
+        {JSON.stringify(schema, null, 2)}
+      </Code>
+    </Box>
+  );
+};

package/src/ui/components/actions/TryItPanel.tsx

@@ -0,0 +1,140 @@
+import { useInject } from "@alepha/react";
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Code,
+  CopyButton,
+  Group,
+  JsonInput,
+  Loader,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { IconCheck, IconCopy, IconPlayerPlay } from "@tabler/icons-react";
+import { HttpClient } from "alepha/server";
+import { useCallback, useState } from "react";
+import type { DevActionMetadata } from "../../../api/schemas/DevActionMetadata.ts";
+
+interface TryItPanelProps {
+  action: DevActionMetadata;
+}
+
+export const TryItPanel = ({ action }: TryItPanelProps) => {
+  const http = useInject(HttpClient);
+  const [body, setBody] = useState("{}");
+  const [response, setResponse] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [timing, setTiming] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const execute = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    setResponse(null);
+
+    const start = performance.now();
+
+    try {
+      let parsedBody: unknown;
+      if (action.body && body) {
+        try {
+          parsedBody = JSON.parse(body);
+        } catch {
+          setError("Invalid JSON body");
+          setLoading(false);
+          return;
+        }
+      }
+
+      const res = await http.fetch(action.fullPath, {
+        method: action.method.toUpperCase() as
+          | "GET"
+          | "POST"
+          | "PUT"
+          | "DELETE"
+          | "PATCH",
+        body: parsedBody ? JSON.stringify(parsedBody) : undefined,
+        headers: parsedBody
+          ? { "Content-Type": "application/json" }
+          : undefined,
+      });
+
+      setTiming(Math.round(performance.now() - start));
+      setResponse(JSON.stringify(res.data, null, 2));
+    } catch (err) {
+      setTiming(Math.round(performance.now() - start));
+      setError(err instanceof Error ? err.message : "Request failed");
+    } finally {
+      setLoading(false);
+    }
+  }, [http, action, body]);
+
+  return (
+    <Stack gap="md">
+      {action.body && (
+        <JsonInput
+          label="Request Body"
+          placeholder='{"key": "value"}'
+          value={body}
+          onChange={setBody}
+          minRows={4}
+          maxRows={10}
+          autosize
+          formatOnBlur
+          validationError="Invalid JSON"
+        />
+      )}
+
+      <Group>
+        <Button
+          leftSection={
+            loading ? <Loader size={14} /> : <IconPlayerPlay size={14} />
+          }
+          onClick={execute}
+          disabled={loading}
+          size="sm"
+        >
+          Execute
+        </Button>
+        {timing !== null && (
+          <Text size="xs" c="dimmed">
+            {timing}ms
+          </Text>
+        )}
+      </Group>
+
+      {error && (
+        <Paper p="sm" bg="var(--mantine-color-red-light)">
+          <Text size="sm" c="red">
+            {error}
+          </Text>
+        </Paper>
+      )}
+
+      {response && (
+        <Box>
+          <Group justify="space-between" mb={4}>
+            <Text size="xs" fw={500} c="dimmed">
+              Response
+            </Text>
+            <CopyButton value={response}>
+              {({ copied, copy }) => (
+                <ActionIcon size="xs" variant="subtle" onClick={copy}>
+                  {copied ? <IconCheck size={12} /> : <IconCopy size={12} />}
+                </ActionIcon>
+              )}
+            </CopyButton>
+          </Group>
+          <ScrollArea h={200}>
+            <Code block style={{ fontSize: 11 }}>
+              {response}
+            </Code>
+          </ScrollArea>
+        </Box>
+      )}
+    </Stack>
+  );
+};

package/src/ui/components/actions/constants.ts

@@ -0,0 +1,7 @@
+export const METHOD_COLORS: Record<string, string> = {
+  GET: "teal",
+  POST: "blue",
+  PUT: "orange",
+  PATCH: "yellow",
+  DELETE: "red",
+};

package/src/ui/components/actions/helpers.ts

@@ -0,0 +1,18 @@
+import type { DevActionMetadata } from "../../../api/schemas/DevActionMetadata.ts";
+
+export const generateCurl = (
+  action: DevActionMetadata,
+  body?: string,
+): string => {
+  const parts = [`curl -X ${action.method.toUpperCase()}`];
+  parts.push(`  '${window.location.origin}${action.fullPath}'`);
+
+  if (action.body && body) {
+    parts.push(
+      `  -H 'Content-Type: ${action.bodyContentType || "application/json"}'`,
+    );
+    parts.push(`  -d '${body}'`);
+  }
+
+  return parts.join(" \\\n");
+};

package/src/ui/components/actions/index.ts

@@ -0,0 +1,8 @@
+export { ActionGroup } from "./ActionGroup.tsx";
+export { ActionItem } from "./ActionItem.tsx";
+export { METHOD_COLORS } from "./constants.ts";
+export { DevActionsExplorer } from "./DevActionsExplorer.tsx";
+export { generateCurl } from "./helpers.ts";
+export { MethodBadge } from "./MethodBadge.tsx";
+export { SchemaViewer } from "./SchemaViewer.tsx";
+export { TryItPanel } from "./TryItPanel.tsx";

package/src/ui/components/db/ColumnBadge.tsx

@@ -0,0 +1,55 @@
+import { Badge, Tooltip } from "@mantine/core";
+import type { DevEntityColumn } from "./types.ts";
+
+interface ColumnBadgeProps {
+  column: DevEntityColumn;
+  size?: "xs" | "sm";
+}
+
+export const ColumnBadge = ({ column, size = "xs" }: ColumnBadgeProps) => {
+  const badges: Array<{ label: string; tooltip: string }> = [];
+
+  if (column.primaryKey) {
+    badges.push({ label: "PK", tooltip: "Primary Key" });
+  }
+  if (column.identity) {
+    badges.push({ label: "ID", tooltip: "Auto-increment Identity" });
+  }
+  if (column.ref) {
+    badges.push({
+      label: "FK",
+      tooltip: `Foreign Key → ${column.ref.entity}.${column.ref.column}`,
+    });
+  }
+  if (column.createdAt) {
+    badges.push({ label: "C", tooltip: "Created At (auto-set on insert)" });
+  }
+  if (column.updatedAt) {
+    badges.push({ label: "U", tooltip: "Updated At (auto-set on update)" });
+  }
+  if (column.deletedAt) {
+    badges.push({ label: "D", tooltip: "Deleted At (soft delete)" });
+  }
+  if (column.version) {
+    badges.push({ label: "V", tooltip: "Version (optimistic locking)" });
+  }
+
+  return (
+    <>
+      {badges.map((b) => (
+        <Tooltip key={b.label} label={b.tooltip}>
+          <Badge size={size} variant="light" color="blue">
+            {b.label}
+          </Badge>
+        </Tooltip>
+      ))}
+      {column.nullable && (
+        <Tooltip label="Nullable">
+          <Badge size={size} variant="outline" color="gray">
+            ?
+          </Badge>
+        </Tooltip>
+      )}
+    </>
+  );
+};