@nextsparkjs/core 0.1.0-beta.8 → 0.1.0-beta.82

package/dist/components/devtools/TestCoverageDashboard.js

@@ -0,0 +1,234 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card.js";
+import { Badge } from "../ui/badge.js";
+import { Progress } from "../ui/progress.js";
+import {
+  BarChart3,
+  FileText,
+  Tags,
+  Workflow,
+  AlertTriangle,
+  CheckCircle2,
+  Loader2
+} from "lucide-react";
+import { sel } from "../../lib/test/index.js";
+function StatCard({ icon, label, value, percentage, dataCy, subtext }) {
+  return /* @__PURE__ */ jsx(Card, { "data-cy": dataCy, children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-2 rounded-lg bg-violet-100 dark:bg-violet-900/30", children: icon }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate", children: label }),
+        /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold", children: value }),
+        subtext && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subtext })
+      ] })
+    ] }),
+    percentage !== void 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
+      /* @__PURE__ */ jsx(Progress, { value: percentage, className: "h-2" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-1 text-right", children: [
+        percentage,
+        "%"
+      ] })
+    ] })
+  ] }) });
+}
+const TAG_CATEGORY_MAP = {
+  layers: "Layers",
+  priorities: "Priorities",
+  features: "Features",
+  flows: "Flows",
+  blocks: "Blocks",
+  roles: "Roles",
+  operations: "Operations",
+  other: "Other"
+};
+function TestCoverageDashboard() {
+  const t = useTranslations("devtools.tests.dashboard");
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    async function fetchCoverage() {
+      try {
+        const response = await fetch("/api/v1/devtools/testing");
+        const json = await response.json();
+        if (!response.ok) throw new Error(json.error || "Failed to load coverage data");
+        setData(json);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to load");
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchCoverage();
+  }, []);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", "data-cy": sel("devtools.tests.dashboard"), children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-violet-600 dark:text-violet-400" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center", "data-cy": sel("devtools.tests.dashboard"), children: [
+      /* @__PURE__ */ jsx(AlertTriangle, { className: "h-12 w-12 text-amber-500 mb-4" }),
+      /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-amber-600 dark:text-amber-400", children: error })
+    ] });
+  }
+  if (!(data == null ? void 0 : data.data)) return null;
+  const { summary, features = [], flows = [] } = data.data;
+  const featureCoverage = summary.features.total > 0 ? Math.round(summary.features.withTests / summary.features.total * 100) : 0;
+  const flowCoverage = summary.flows.total > 0 ? Math.round(summary.flows.withTests / summary.flows.total * 100) : 0;
+  const uncoveredFeatures = features.filter((f) => !f.testing.hasTests);
+  const uncoveredFlows = flows.filter((f) => !f.testing.hasTests);
+  const criticalUncoveredFlows = uncoveredFlows.filter((f) => f.criticalPath);
+  const hasGaps = uncoveredFeatures.length > 0 || uncoveredFlows.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6 h-full overflow-y-auto", "data-cy": sel("devtools.tests.dashboard"), children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-violet-600 dark:text-violet-400", children: t("title") }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "grid grid-cols-2 lg:grid-cols-4 gap-4",
+        "data-cy": sel("devtools.tests.dashboardStats"),
+        children: [
+          /* @__PURE__ */ jsx(
+            StatCard,
+            {
+              icon: /* @__PURE__ */ jsx(BarChart3, { className: "h-5 w-5 text-violet-600 dark:text-violet-400" }),
+              label: t("features"),
+              value: `${summary.features.withTests}/${summary.features.total}`,
+              percentage: featureCoverage,
+              dataCy: sel("devtools.tests.dashboardStatFeatures"),
+              subtext: `${summary.features.withTests} ${t("withTests")}`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StatCard,
+            {
+              icon: /* @__PURE__ */ jsx(Workflow, { className: "h-5 w-5 text-violet-600 dark:text-violet-400" }),
+              label: t("flows"),
+              value: `${summary.flows.withTests}/${summary.flows.total}`,
+              percentage: flowCoverage,
+              dataCy: sel("devtools.tests.dashboardStatFlows"),
+              subtext: `${summary.flows.withTests} ${t("withTests")}`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StatCard,
+            {
+              icon: /* @__PURE__ */ jsx(FileText, { className: "h-5 w-5 text-violet-600 dark:text-violet-400" }),
+              label: t("testFiles"),
+              value: String(summary.testFiles),
+              dataCy: sel("devtools.tests.dashboardStatFiles")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StatCard,
+            {
+              icon: /* @__PURE__ */ jsx(Tags, { className: "h-5 w-5 text-violet-600 dark:text-violet-400" }),
+              label: t("tags"),
+              value: String(summary.totalTags),
+              dataCy: sel("devtools.tests.dashboardStatTags")
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Card, { "data-cy": sel("devtools.tests.dashboardGaps"), children: [
+      /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle, { className: "text-lg flex items-center gap-2", children: [
+        hasGaps ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-amber-500" }) : /* @__PURE__ */ jsx(CheckCircle2, { className: "h-5 w-5 text-green-500" }),
+        t("gaps")
+      ] }) }),
+      /* @__PURE__ */ jsx(CardContent, { children: !hasGaps ? /* @__PURE__ */ jsxs("div", { className: "text-center py-4 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(CheckCircle2, { className: "h-8 w-8 text-green-500 mx-auto mb-2" }),
+        /* @__PURE__ */ jsx("p", { children: t("noGaps") })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        criticalUncoveredFlows.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium text-red-600 dark:text-red-400 mb-2 flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" }),
+            t("criticalPath"),
+            " (",
+            criticalUncoveredFlows.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: criticalUncoveredFlows.map((flow) => /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: "destructive",
+              "data-cy": sel("devtools.tests.dashboardGapItem", { slug: flow.slug }),
+              children: flow.title
+            },
+            flow.slug
+          )) })
+        ] }),
+        uncoveredFeatures.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium text-amber-600 dark:text-amber-400 mb-2", children: [
+            t("features"),
+            " ",
+            t("withoutTests"),
+            " (",
+            uncoveredFeatures.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            uncoveredFeatures.slice(0, 10).map((feature) => /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "outline",
+                className: "border-amber-500 text-amber-600 dark:text-amber-400",
+                "data-cy": sel("devtools.tests.dashboardGapItem", { slug: feature.slug }),
+                children: feature.title
+              },
+              feature.slug
+            )),
+            uncoveredFeatures.length > 10 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
+              "+",
+              uncoveredFeatures.length - 10
+            ] })
+          ] })
+        ] }),
+        uncoveredFlows.filter((f) => !f.criticalPath).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium text-amber-600 dark:text-amber-400 mb-2", children: [
+            t("flows"),
+            " ",
+            t("withoutTests"),
+            " (",
+            uncoveredFlows.filter((f) => !f.criticalPath).length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            uncoveredFlows.filter((f) => !f.criticalPath).slice(0, 10).map((flow) => /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "outline",
+                className: "border-amber-500 text-amber-600 dark:text-amber-400",
+                "data-cy": sel("devtools.tests.dashboardGapItem", { slug: flow.slug }),
+                children: flow.title
+              },
+              flow.slug
+            )),
+            uncoveredFlows.filter((f) => !f.criticalPath).length > 10 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
+              "+",
+              uncoveredFlows.filter((f) => !f.criticalPath).length - 10
+            ] })
+          ] })
+        ] })
+      ] }) })
+    ] }),
+    summary.byCategory && Object.keys(summary.byCategory).length > 0 && /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: t("coverage") }) }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-4", children: Object.entries(summary.byCategory).map(([category, count]) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "text-center p-3 rounded-lg bg-muted/50",
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-violet-600 dark:text-violet-400", children: count }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground capitalize", children: TAG_CATEGORY_MAP[category] || category })
+          ]
+        },
+        category
+      )) }) })
+    ] })
+  ] });
+}
+export {
+  TestCoverageDashboard
+};

package/dist/components/devtools/api-explorer/ApiDocsModal.d.ts

@@ -0,0 +1,9 @@
+interface ApiDocsModalProps {
+    /** File path to the documentation markdown */
+    docPath: string | null;
+    /** Title to show in the modal header */
+    title: string;
+}
+export declare function ApiDocsModal({ docPath, title }: ApiDocsModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ApiDocsModal.d.ts.map

package/dist/components/devtools/api-explorer/ApiDocsModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiDocsModal.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/ApiDocsModal.tsx"],"names":[],"mappings":"AAeA,UAAU,iBAAiB;IACzB,8CAA8C;IAC9C,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,iBAAiB,2CAwEjE"}

package/dist/components/devtools/api-explorer/ApiDocsModal.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { BookOpen, Loader2 } from "lucide-react";
+import { Button } from "../../ui/button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "../../ui/dialog.js";
+import { ScrollArea } from "../../ui/scroll-area.js";
+import { sel } from "../../../lib/test/index.js";
+function ApiDocsModal({ docPath, title }) {
+  const [content, setContent] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+  useEffect(() => {
+    if (isOpen && docPath && !content) {
+      setIsLoading(true);
+      setError(null);
+      fetch(`/api/v1/devtools/docs?path=${encodeURIComponent(docPath)}`).then((res) => {
+        if (!res.ok) throw new Error("Failed to load documentation");
+        return res.json();
+      }).then((data) => {
+        setContent(data.content);
+        setIsLoading(false);
+      }).catch((err) => {
+        setError(err.message || "Error loading documentation");
+        setIsLoading(false);
+      });
+    }
+  }, [isOpen, docPath, content]);
+  useEffect(() => {
+    setContent(null);
+    setError(null);
+  }, [docPath]);
+  if (!docPath) return null;
+  return /* @__PURE__ */ jsxs(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        "data-cy": sel("devtools.apiExplorer.docsBtn"),
+        children: [
+          /* @__PURE__ */ jsx(BookOpen, { className: "h-4 w-4 mr-2" }),
+          "Docs"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-3xl max-h-[80vh] overflow-hidden flex flex-col", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(DialogTitle, { children: title }) }),
+      /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsx("div", { className: "pr-4", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }) : error ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-destructive", children: /* @__PURE__ */ jsx("p", { children: error }) }) : content ? /* @__PURE__ */ jsx(MarkdownRenderer, { content }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground p-4", children: "No documentation available" }) }) })
+    ] })
+  ] });
+}
+function MarkdownRenderer({ content }) {
+  const renderMarkdown = (md) => {
+    let html = md.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/^### (.+)$/gm, '<h3 class="text-lg font-semibold mt-6 mb-2">$1</h3>').replace(/^## (.+)$/gm, '<h2 class="text-xl font-semibold mt-8 mb-3">$1</h2>').replace(/^# (.+)$/gm, '<h1 class="text-2xl font-bold mt-8 mb-4">$1</h1>').replace(/```(\w*)\n([\s\S]*?)```/g, (_match, _lang, code) => {
+      return `<pre class="bg-muted p-4 rounded-lg overflow-x-auto my-4 text-sm"><code>${code.trim()}</code></pre>`;
+    }).replace(/`([^`]+)`/g, '<code class="bg-muted px-1.5 py-0.5 rounded text-sm font-mono">$1</code>').replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-primary underline" target="_blank" rel="noopener">$1</a>').replace(/^- (.+)$/gm, '<li class="ml-4">$1</li>').replace(/\n\n/g, '</p><p class="my-3">').replace(/\n/g, "<br />");
+    html = `<p class="my-3">${html}</p>`;
+    html = html.replace(/(<li[^>]*>.*?<\/li>)+/g, '<ul class="list-disc my-3">$&</ul>');
+    return html;
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "prose prose-sm dark:prose-invert max-w-none",
+      dangerouslySetInnerHTML: { __html: renderMarkdown(content) }
+    }
+  );
+}
+export {
+  ApiDocsModal
+};

package/dist/components/devtools/api-explorer/ApiEndpointsSidebar.d.ts

@@ -0,0 +1,16 @@
+import type { ApiRouteEntry, RouteCategory } from '../../../lib/services/api-routes.service';
+import type { HttpMethod } from '../api-tester/types';
+interface SelectedEndpoint {
+    path: string;
+    method: HttpMethod;
+}
+interface ApiEndpointsSidebarProps {
+    routes: Record<RouteCategory, ApiRouteEntry[]>;
+    selectedEndpoint: SelectedEndpoint | null;
+    onSelectEndpoint: (path: string, method: HttpMethod, route: ApiRouteEntry) => void;
+    isCollapsed: boolean;
+    onToggleCollapse: () => void;
+}
+export declare function ApiEndpointsSidebar({ routes, selectedEndpoint, onSelectEndpoint, isCollapsed, onToggleCollapse, }: ApiEndpointsSidebarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ApiEndpointsSidebar.d.ts.map

package/dist/components/devtools/api-explorer/ApiEndpointsSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiEndpointsSidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/ApiEndpointsSidebar.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAA;AAC5F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AA4CrD,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,UAAU,CAAA;CACnB;AAED,UAAU,wBAAwB;IAChC,MAAM,EAAE,MAAM,CAAC,aAAa,EAAE,aAAa,EAAE,CAAC,CAAA;IAC9C,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAClF,WAAW,EAAE,OAAO,CAAA;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAA;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,GACjB,EAAE,wBAAwB,2CAoP1B"}

package/dist/components/devtools/api-explorer/ApiEndpointsSidebar.js

@@ -0,0 +1,275 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { Search, ChevronRight, ChevronDown, Code, Database, Layers, Puzzle, PanelLeftClose, PanelLeft, Folder, FolderOpen } from "lucide-react";
+import { Input } from "../../ui/input.js";
+import { Badge } from "../../ui/badge.js";
+import { Button } from "../../ui/button.js";
+import { ScrollArea } from "../../ui/scroll-area.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../ui/collapsible.js";
+import { cn } from "../../../lib/utils/index.js";
+import { sel } from "../../../lib/test/index.js";
+const methodColors = {
+  GET: "bg-emerald-500/20 text-emerald-600 dark:text-emerald-400",
+  POST: "bg-blue-500/20 text-blue-600 dark:text-blue-400",
+  PATCH: "bg-amber-500/20 text-amber-600 dark:text-amber-400",
+  PUT: "bg-orange-500/20 text-orange-600 dark:text-orange-400",
+  DELETE: "bg-red-500/20 text-red-600 dark:text-red-400",
+  OPTIONS: "bg-gray-500/20 text-gray-600 dark:text-gray-400"
+};
+const categoryConfig = {
+  core: { icon: Code, label: "Core", color: "text-violet-600 dark:text-violet-400" },
+  entity: { icon: Database, label: "Entities", color: "text-blue-600 dark:text-blue-400" },
+  theme: { icon: Layers, label: "Theme", color: "text-pink-600 dark:text-pink-400" },
+  plugin: { icon: Puzzle, label: "Plugins", color: "text-green-600 dark:text-green-400" }
+};
+function groupByPathPrefix(routes) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const route of routes) {
+    const pathWithoutBase = route.path.replace(/^\/api\/v1\//, "");
+    const firstSegment = pathWithoutBase.split("/")[0] || "root";
+    if (!groups.has(firstSegment)) {
+      groups.set(firstSegment, []);
+    }
+    groups.get(firstSegment).push(route);
+  }
+  return Array.from(groups.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([prefix, routes2]) => ({ prefix, routes: routes2 }));
+}
+function ApiEndpointsSidebar({
+  routes,
+  selectedEndpoint,
+  onSelectEndpoint,
+  isCollapsed,
+  onToggleCollapse
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [expandedCategories, setExpandedCategories] = useState(
+    /* @__PURE__ */ new Set(["core", "entity", "theme", "plugin"])
+  );
+  const [expandedPrefixes, setExpandedPrefixes] = useState(/* @__PURE__ */ new Set());
+  const filteredRoutes = useMemo(() => {
+    if (!searchQuery.trim()) return routes;
+    const query = searchQuery.toLowerCase();
+    const result = {
+      core: [],
+      entity: [],
+      theme: [],
+      plugin: []
+    };
+    for (const category of Object.keys(routes)) {
+      result[category] = routes[category].filter(
+        (route) => {
+          var _a;
+          return route.path.toLowerCase().includes(query) || ((_a = route.source) == null ? void 0 : _a.toLowerCase().includes(query)) || route.methods.some((m) => m.toLowerCase().includes(query));
+        }
+      );
+    }
+    return result;
+  }, [routes, searchQuery]);
+  const toggleCategory = (category) => {
+    setExpandedCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      return next;
+    });
+  };
+  const togglePrefix = (category, prefix) => {
+    const key = `${category}:${prefix}`;
+    setExpandedPrefixes((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+  const totalRoutes = Object.values(filteredRoutes).reduce((sum, arr) => sum + arr.length, 0);
+  if (isCollapsed) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full w-14 border-r bg-card", "data-cy": sel("devtools.apiExplorer.sidebar.collapsed"), children: [
+      /* @__PURE__ */ jsx("div", { className: "p-2 border-b", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: onToggleCollapse,
+          className: "w-full",
+          "data-cy": sel("devtools.apiExplorer.sidebar.expand"),
+          children: /* @__PURE__ */ jsx(PanelLeft, { className: "h-4 w-4" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col items-center gap-2 p-2", children: Object.keys(categoryConfig).map((category) => {
+        const config = categoryConfig[category];
+        const Icon = config.icon;
+        const count = filteredRoutes[category].length;
+        return /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: cn("relative", config.color),
+            title: `${config.label} (${count})`,
+            onClick: () => {
+              onToggleCollapse();
+              setExpandedCategories(/* @__PURE__ */ new Set([category]));
+            },
+            children: [
+              /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+              count > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 text-[10px] bg-muted rounded-full px-1", children: count })
+            ]
+          },
+          category
+        );
+      }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full w-72 shrink-0 border-r bg-card", "data-cy": sel("devtools.apiExplorer.sidebar.container"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "p-3 border-b space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h2", { className: "font-semibold text-sm", children: "Endpoints" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: totalRoutes }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-7 w-7",
+              onClick: onToggleCollapse,
+              "data-cy": sel("devtools.apiExplorer.sidebar.collapse"),
+              children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "Search endpoints...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "pl-8 h-8 text-sm",
+            "data-cy": sel("devtools.apiExplorer.sidebar.search")
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-2 space-y-1", children: Object.keys(categoryConfig).map((category) => {
+      const config = categoryConfig[category];
+      const Icon = config.icon;
+      const categoryRoutes = filteredRoutes[category];
+      const isExpanded = expandedCategories.has(category);
+      if (categoryRoutes.length === 0 && searchQuery) return null;
+      return /* @__PURE__ */ jsxs(
+        Collapsible,
+        {
+          open: isExpanded,
+          onOpenChange: () => toggleCategory(category),
+          children: [
+            /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: cn(
+                  "flex items-center gap-2 w-full px-2 py-1.5 rounded-md text-sm font-medium",
+                  "hover:bg-muted/50 transition-colors",
+                  config.color
+                ),
+                "data-cy": sel("devtools.apiExplorer.sidebar.category", { category }),
+                children: [
+                  isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0" }),
+                  /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: config.label }),
+                  /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: categoryRoutes.length })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ml-2 mt-1 space-y-0.5", children: categoryRoutes.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground px-2 py-2", children: "No endpoints in this category" }) : groupByPathPrefix(categoryRoutes).map((group) => {
+              const prefixKey = `${category}:${group.prefix}`;
+              const isPrefixExpanded = expandedPrefixes.has(prefixKey);
+              return /* @__PURE__ */ jsxs(
+                Collapsible,
+                {
+                  open: isPrefixExpanded,
+                  onOpenChange: () => togglePrefix(category, group.prefix),
+                  children: [
+                    /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        className: cn(
+                          "flex items-center gap-1.5 w-full px-2 py-1 rounded-md text-xs",
+                          "hover:bg-muted/50 transition-colors text-muted-foreground"
+                        ),
+                        "data-cy": sel("devtools.apiExplorer.sidebar.prefix", { category, prefix: group.prefix }),
+                        children: [
+                          isPrefixExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 shrink-0" }),
+                          isPrefixExpanded ? /* @__PURE__ */ jsx(FolderOpen, { className: "h-3 w-3 shrink-0" }) : /* @__PURE__ */ jsx(Folder, { className: "h-3 w-3 shrink-0" }),
+                          /* @__PURE__ */ jsx("span", { className: "flex-1 text-left font-medium", children: group.prefix }),
+                          /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[10px] px-1 py-0 h-4", children: group.routes.length })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ml-4 mt-0.5 space-y-0.5", children: group.routes.map((route, idx) => /* @__PURE__ */ jsx(
+                      EndpointItem,
+                      {
+                        route,
+                        prefix: group.prefix,
+                        selectedEndpoint,
+                        onSelect: onSelectEndpoint
+                      },
+                      `${route.path}-${idx}`
+                    )) }) })
+                  ]
+                },
+                prefixKey
+              );
+            }) }) })
+          ]
+        },
+        category
+      );
+    }) }) })
+  ] });
+}
+function EndpointItem({ route, prefix, selectedEndpoint, onSelect }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: route.methods.map((method) => {
+    const isSelected = (selectedEndpoint == null ? void 0 : selectedEndpoint.path) === route.path && (selectedEndpoint == null ? void 0 : selectedEndpoint.method) === method;
+    const shortPath = route.path.replace(/^\/api\/v1\//, "").replace(new RegExp(`^${prefix}/?`), "");
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => onSelect(route.path, method, route),
+        className: cn(
+          "flex items-center gap-2 w-full px-2 py-1 rounded-md text-xs",
+          "hover:bg-muted/50 transition-colors text-left",
+          isSelected && "bg-primary/10 ring-1 ring-primary/20"
+        ),
+        "data-cy": sel("devtools.apiExplorer.sidebar.endpoint", { method: method.toLowerCase(), path: route.path.replace(/\//g, "-") }),
+        children: [
+          /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: "secondary",
+              className: cn("font-mono text-[10px] px-1.5 py-0 shrink-0", methodColors[method]),
+              children: method
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "font-mono truncate text-muted-foreground", children: [
+            "/",
+            shortPath || ""
+          ] })
+        ]
+      },
+      `${route.path}-${method}`
+    );
+  }) });
+}
+export {
+  ApiEndpointsSidebar
+};

package/dist/components/devtools/api-explorer/ApiExplorer.d.ts

@@ -0,0 +1,11 @@
+import type { ApiRouteEntry, RouteCategory } from '../../../lib/services/api-routes.service';
+interface ApiExplorerProps {
+    routes: Record<RouteCategory, ApiRouteEntry[]>;
+    initialEndpoint?: {
+        method: string;
+        path: string;
+    } | null;
+}
+export declare function ApiExplorer({ routes, initialEndpoint }: ApiExplorerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ApiExplorer.d.ts.map

package/dist/components/devtools/api-explorer/ApiExplorer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiExplorer.d.ts","sourceRoot":"","sources":["../../../../src/components/devtools/api-explorer/ApiExplorer.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAA;AAY5F,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC,aAAa,EAAE,aAAa,EAAE,CAAC,CAAA;IAC9C,eAAe,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;CAC1D;AAwBD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,gBAAgB,2CAwXxE"}