@alepha/devtools 0.16.1 → 0.19.1

package/src/ui/components/explorer/panels/DevPanelQueue.tsx

@@ -0,0 +1,51 @@
+import { Flex, JsonViewer, ui } from "@alepha/ui";
+import { Badge, Card, Text } from "@mantine/core";
+
+export const DevPanelQueue = ({ queue }: { queue: any }) => {
+  return (
+    <Flex direction="column" gap="md">
+      <div>
+        <Text fz="lg" fw={600} mb="xs">
+          {queue.name}
+        </Text>
+        {queue.description && (
+          <Text fz="sm" c="dimmed">
+            {queue.description}
+          </Text>
+        )}
+      </div>
+
+      <Flex gap="xs">
+        <Badge size="xs" variant="light" color="orange">
+          Queue
+        </Badge>
+        {queue.provider && (
+          <Badge size="xs" variant="outline" color="gray">
+            {queue.provider}
+          </Badge>
+        )}
+      </Flex>
+
+      {queue.schema && (
+        <div>
+          <Text fz="xs" c="dimmed" mb="xs" tt="uppercase" fw={600}>
+            Job Schema
+          </Text>
+          <Card
+            padding="sm"
+            style={{
+              background: ui.colors.surface,
+              border: `1px solid ${ui.colors.border}`,
+            }}
+          >
+            <JsonViewer
+              data={queue.schema}
+              defaultExpandedDepth={2}
+              size="xs"
+            />
+          </Card>
+        </div>
+      )}
+    </Flex>
+  );
+};

package/src/ui/components/explorer/panels/DevPanelTopic.tsx

@@ -0,0 +1,56 @@
+import { Flex, JsonViewer, ui } from "@alepha/ui";
+import { Badge, Card, Text } from "@mantine/core";
+
+export const DevPanelTopic = ({ topic }: { topic: any }) => {
+  return (
+    <Flex direction="column" gap="md">
+      <div>
+        <Text fz="lg" fw={600} mb="xs">
+          {topic.name}
+        </Text>
+        {topic.description && (
+          <Text fz="sm" c="dimmed">
+            {topic.description}
+          </Text>
+        )}
+      </div>
+
+      <Flex gap="xs">
+        <Badge size="xs" variant="light" color="pink">
+          Topic
+        </Badge>
+        {topic.provider && (
+          <Badge size="xs" variant="outline" color="gray">
+            {topic.provider}
+          </Badge>
+        )}
+        {topic.subscribers > 0 && (
+          <Badge size="xs" variant="light" color="gray">
+            {topic.subscribers} subscriber{topic.subscribers !== 1 ? "s" : ""}
+          </Badge>
+        )}
+      </Flex>
+
+      {topic.schema && (
+        <div>
+          <Text fz="xs" c="dimmed" mb="xs" tt="uppercase" fw={600}>
+            Message Schema
+          </Text>
+          <Card
+            padding="sm"
+            style={{
+              background: ui.colors.surface,
+              border: `1px solid ${ui.colors.border}`,
+            }}
+          >
+            <JsonViewer
+              data={topic.schema}
+              defaultExpandedDepth={2}
+              size="xs"
+            />
+          </Card>
+        </div>
+      )}
+    </Flex>
+  );
+};

package/src/ui/components/explorer/panels/index.ts

@@ -0,0 +1,5 @@
+export { DevPanelAction } from "./DevPanelAction.tsx";
+export { DevPanelCache } from "./DevPanelCache.tsx";
+export { DevPanelPage } from "./DevPanelPage.tsx";
+export { DevPanelQueue } from "./DevPanelQueue.tsx";
+export { DevPanelTopic } from "./DevPanelTopic.tsx";

package/src/ui/components/graph/DevDependencyGraph.tsx

@@ -1,15 +1,5 @@
-import { ui, useDialog } from "@alepha/ui";
-import {
-  ActionIcon,
-  Alert,
-  Badge,
-  Flex,
-  Group,
-  Loader,
-  Stack,
-  Text,
-  Tooltip,
-} from "@mantine/core";
+import { ActionButton, Flex, ui, useDialog } from "@alepha/ui";
+import { Alert, Badge, Loader, Text } from "@mantine/core";
 import {
   IconAlertTriangle,
   IconFocusCentered,
@@ -17,7 +7,6 @@ import {
   IconLockOpen,
   IconMinus,
   IconPlus,
-  IconTopologyRing,
 } from "@tabler/icons-react";
 import {
   Background,
@@ -31,9 +20,9 @@ import {
 } from "@xyflow/react";
 import { useAction, useInject } from "alepha/react";
 import "@xyflow/react/dist/style.css";
+import { devMetadataSchema } from "@alepha/devtools";
 import { HttpClient } from "alepha/server";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { devMetadataSchema } from "../../../api/schemas/DevMetadata.ts";
 import { getModuleColor } from "./constants.ts";
 import { GraphControls } from "./GraphControls.tsx";
 import {
@@ -76,7 +65,7 @@ export const DevDependencyGraph = () => {
     {
       runOnInit: true,
       handler: () =>
-        http.fetch("/devtools/api/metadata", {
+        http.fetch("/__devtools/api/metadata", {
           schema: { response: devMetadataSchema },
         }),
     },
@@ -218,21 +207,6 @@ export const DevDependencyGraph = () => {
 
   return (
     <Flex p="xl" direction="column" gap="md" w="100%" h="100%" flex={1} mih={0}>
-      <Group justify="space-between" wrap="nowrap">
-        <Group gap="sm">
-          <Flex
-            bdrs={"sm"}
-            h={"20px"}
-            w={"4px"}
-            bg={"var(--mantine-primary-color-filled)"}
-          />
-          <IconTopologyRing size={24} opacity={0.7} />
-          <Text size="lg" fw={500}>
-            Dependency Graph
-          </Text>
-        </Group>
-      </Group>
-
       <GraphControls
         filters={filters}
         onFiltersChange={setFilters}
@@ -331,7 +305,8 @@ const FlowControls = () => {
   const [isLocked, setIsLocked] = useState(false);
 
   return (
-    <Stack
+    <Flex
+      direction="column"
       gap={4}
       style={{
         position: "absolute",
@@ -344,34 +319,34 @@ const FlowControls = () => {
         padding: 4,
       }}
     >
-      <Tooltip label="Zoom in" position="right">
-        <ActionIcon size="sm" variant="subtle" onClick={() => zoomIn()}>
-          <IconPlus size={14} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label="Zoom out" position="right">
-        <ActionIcon size="sm" variant="subtle" onClick={() => zoomOut()}>
-          <IconMinus size={14} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label="Fit view" position="right">
-        <ActionIcon
-          size="sm"
-          variant="subtle"
-          onClick={() => fitView({ padding: 0.2 })}
-        >
-          <IconFocusCentered size={14} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={isLocked ? "Unlock" : "Lock"} position="right">
-        <ActionIcon
-          size="sm"
-          variant="subtle"
-          onClick={() => setIsLocked(!isLocked)}
-        >
-          {isLocked ? <IconLock size={14} /> : <IconLockOpen size={14} />}
-        </ActionIcon>
-      </Tooltip>
-    </Stack>
+      <ActionButton
+        size="sm"
+        variant="subtle"
+        tooltip="Zoom in"
+        onClick={() => zoomIn()}
+        icon={<IconPlus size={14} />}
+      />
+      <ActionButton
+        size="sm"
+        variant="subtle"
+        tooltip="Zoom out"
+        onClick={() => zoomOut()}
+        icon={<IconMinus size={14} />}
+      />
+      <ActionButton
+        size="sm"
+        variant="subtle"
+        tooltip="Fit view"
+        onClick={() => fitView({ padding: 0.2 })}
+        icon={<IconFocusCentered size={14} />}
+      />
+      <ActionButton
+        size="sm"
+        variant="subtle"
+        tooltip={isLocked ? "Unlock" : "Lock"}
+        onClick={() => setIsLocked(!isLocked)}
+        icon={isLocked ? <IconLock size={14} /> : <IconLockOpen size={14} />}
+      />
+    </Flex>
   );
 };

package/src/ui/components/graph/GraphControls.tsx

@@ -1,10 +1,7 @@
-import { ui } from "@alepha/ui";
+import { ActionButton, Flex, ui } from "@alepha/ui";
 import {
-  ActionIcon,
   Badge,
   Checkbox,
-  Flex,
-  Group,
   SegmentedControl,
   Select,
   TextInput,
@@ -149,20 +146,22 @@ export const GraphControls = ({
         ]}
       />
 
-      <Group gap={4}>
+      <Flex gap={4}>
         <Badge size="xs" variant="light" color="gray">
           {nodeCount} {isModuleView ? "modules" : "services"}
         </Badge>
         <Badge size="xs" variant="light" color="gray">
           {edgeCount} edges
         </Badge>
-      </Group>
+      </Flex>
 
-      <Tooltip label="Export as PNG">
-        <ActionIcon size="sm" variant="subtle" onClick={onExport}>
-          <IconDownload size={14} />
-        </ActionIcon>
-      </Tooltip>
+      <ActionButton
+        size="sm"
+        variant="subtle"
+        tooltip="Export as PNG"
+        onClick={onExport}
+        icon={<IconDownload size={14} />}
+      />
     </Flex>
   );
 };

package/src/ui/components/graph/NodeDetails.tsx

@@ -1,15 +1,5 @@
-import { ui } from "@alepha/ui";
-import {
-  ActionIcon,
-  Badge,
-  Box,
-  Divider,
-  Flex,
-  Paper,
-  ScrollArea,
-  Stack,
-  Text,
-} from "@mantine/core";
+import { ActionButton, Flex, ui } from "@alepha/ui";
+import { Badge, Divider, Paper, ScrollArea, Text } from "@mantine/core";
 import {
   IconArrowDown,
   IconArrowUp,
@@ -51,7 +41,7 @@ export const NodeDetails = ({
       }}
     >
       <Flex justify="space-between" align="start" mb="sm">
-        <Box style={{ flex: 1 }}>
+        <Flex style={{ flex: 1 }}>
           <Text size="sm" fw={600} style={{ wordBreak: "break-word" }}>
             {data.label}
           </Text>
@@ -73,10 +63,13 @@ export const NodeDetails = ({
               {data.providerCount} services
             </Text>
           )}
-        </Box>
-        <ActionIcon size="sm" variant="subtle" onClick={onClose}>
-          <IconX size={14} />
-        </ActionIcon>
+        </Flex>
+        <ActionButton
+          size="sm"
+          variant="subtle"
+          onClick={onClose}
+          icon={<IconX size={14} />}
+        />
       </Flex>
 
       {!isModule && data.aliases && data.aliases.length > 0 && (
@@ -105,13 +98,13 @@ export const NodeDetails = ({
             </Text>
           </Flex>
           <ScrollArea h={100}>
-            <Stack gap={2}>
+            <Flex direction="column" gap={2}>
               {data.providers.map((provider) => (
                 <Text key={provider} size="xs">
                   {provider.split(".").pop()}
                 </Text>
               ))}
-            </Stack>
+            </Flex>
           </ScrollArea>
         </>
       )}
@@ -119,9 +112,9 @@ export const NodeDetails = ({
       <Divider my="xs" />
 
       <ScrollArea h={isModule ? 120 : 200}>
-        <Stack gap="xs">
+        <Flex direction="column" gap="xs">
           {data.dependencies.length > 0 && (
-            <Box>
+            <Flex>
               <Flex align="center" gap={4} mb={4}>
                 <IconArrowDown size={12} opacity={0.5} />
                 <Text size="xs" c="dimmed">
@@ -129,7 +122,7 @@ export const NodeDetails = ({
                   {data.dependencies.length})
                 </Text>
               </Flex>
-              <Stack gap={2}>
+              <Flex direction="column" gap={2}>
                 {data.dependencies.map((dep) => (
                   <Text
                     key={dep}
@@ -141,19 +134,19 @@ export const NodeDetails = ({
                     {dep}
                   </Text>
                 ))}
-              </Stack>
-            </Box>
+              </Flex>
+            </Flex>
           )}
 
           {data.dependents.length > 0 && (
-            <Box>
+            <Flex>
               <Flex align="center" gap={4} mb={4}>
                 <IconArrowUp size={12} opacity={0.5} />
                 <Text size="xs" c="dimmed">
                   Used by ({data.dependents.length})
                 </Text>
               </Flex>
-              <Stack gap={2}>
+              <Flex direction="column" gap={2}>
                 {data.dependents.map((dep) => (
                   <Text
                     key={dep}
@@ -165,8 +158,8 @@ export const NodeDetails = ({
                     {dep}
                   </Text>
                 ))}
-              </Stack>
-            </Box>
+              </Flex>
+            </Flex>
           )}
 
           {data.dependencies.length === 0 && data.dependents.length === 0 && (
@@ -174,7 +167,7 @@ export const NodeDetails = ({
               No dependencies
             </Text>
           )}
-        </Stack>
+        </Flex>
       </ScrollArea>
     </Paper>
   );

package/src/ui/components/graph/ProviderNode.tsx

@@ -1,5 +1,5 @@
-import { ui } from "@alepha/ui";
-import { Badge, Box, Flex, Text } from "@mantine/core";
+import { Flex, ui } from "@alepha/ui";
+import { Badge, Text } from "@mantine/core";
 import { Handle, Position } from "@xyflow/react";
 import { getModuleColor } from "./constants.ts";
 import type { ProviderNodeData } from "./types.ts";
@@ -15,7 +15,7 @@ export const ProviderNode = ({ data, selected }: ProviderNodeProps) => {
   const isModule = data.isModule;
 
   return (
-    <Box
+    <Flex
       p="xs"
       style={{
         borderRadius: isModule ? 12 : 8,
@@ -92,6 +92,6 @@ export const ProviderNode = ({ data, selected }: ProviderNodeProps) => {
           border: "none",
         }}
       />
-    </Box>
+    </Flex>
   );
 };

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

@@ -1,4 +1,4 @@
-import type { DevProviderMetadata } from "../../../api/schemas/DevProviderMetadata.ts";
+import type { DevProviderMetadata } from "@alepha/devtools";
 import type {
   GraphFilters,
   LayoutType,