@creezio/observability 0.22.0

package/ui/api-endpoints-client.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Braces, RefreshCw, Search } from "lucide-react";
+import { Badge } from "./primitives/badge";
+import { Button } from "./primitives/button";
+import { Card, CardContent, CardHeader, CardTitle } from "./primitives/card";
+import { Input } from "./primitives/input";
+
+type Endpoint = {
+  method: string;
+  path: string;
+  documented: boolean;
+  summary: string | null;
+  description: string | null;
+  tags: string[];
+};
+
+type RegistryResponse = {
+  generatedAt: string;
+  source: string;
+  openapiUrl: string;
+  endpoints: Endpoint[];
+  error?: string;
+};
+
+const METHOD_STYLE: Record<string, string> = {
+  GET: "bg-emerald-100 text-emerald-800",
+  POST: "bg-sky-100 text-sky-800",
+  PUT: "bg-amber-100 text-amber-800",
+  PATCH: "bg-violet-100 text-violet-800",
+  DELETE: "bg-red-100 text-red-800",
+  OPTIONS: "bg-slate-100 text-slate-700",
+  HEAD: "bg-slate-100 text-slate-700",
+};
+
+export function ApiEndpointsClient() {
+  const [registry, setRegistry] = useState<RegistryResponse | null>(null);
+  const [query, setQuery] = useState("");
+  const [method, setMethod] = useState("ALL");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const response = await fetch("/api/v1/admin/endpoints");
+      const body = (await response.json()) as RegistryResponse;
+      if (!response.ok) throw new Error(body.error || "Chargement impossible");
+      setRegistry(body);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Chargement impossible");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const methods = useMemo(
+    () =>
+      Array.from(
+        new Set(registry?.endpoints.map((endpoint) => endpoint.method) || []),
+      ).sort(),
+    [registry],
+  );
+
+  const endpoints = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    return (registry?.endpoints || []).filter((endpoint) => {
+      if (method !== "ALL" && endpoint.method !== method) return false;
+      if (!needle) return true;
+      return (
+        endpoint.path.toLowerCase().includes(needle) ||
+        endpoint.method.toLowerCase().includes(needle) ||
+        endpoint.summary?.toLowerCase().includes(needle) ||
+        endpoint.tags.some((tag) => tag.toLowerCase().includes(needle))
+      );
+    });
+  }, [method, query, registry]);
+
+  const documentedCount =
+    registry?.endpoints.filter((endpoint) => endpoint.documented).length || 0;
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-3 sm:grid-cols-3">
+        <Stat label="Routes runtime" value={registry?.endpoints.length || 0} />
+        <Stat label="Documentées OpenAPI" value={documentedCount} />
+        <Stat
+          label="Routes Hono seules"
+          value={(registry?.endpoints.length || 0) - documentedCount}
+        />
+      </div>
+
+      <Card>
+        <CardHeader className="gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <Braces className="h-4 w-4" />
+              Endpoints montés
+            </CardTitle>
+            <p className="mt-1 text-xs text-slate-500">
+              Registre Hono enrichi par{" "}
+              <a
+                href={registry?.openapiUrl || "/api/v1/openapi.json"}
+                target="_blank"
+                rel="noreferrer"
+                className="font-mono text-sky-700 hover:underline"
+              >
+                /api/v1/openapi.json
+              </a>
+            </p>
+          </div>
+          <Button size="sm" variant="outline" onClick={() => void refresh()} disabled={loading}>
+            <RefreshCw className={`mr-1 h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />
+            Actualiser
+          </Button>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-col gap-2 sm:flex-row">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
+              <Input
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder="Chemin, résumé ou tag…"
+                className="pl-9"
+              />
+            </div>
+            <select
+              value={method}
+              onChange={(event) => setMethod(event.target.value)}
+              className="h-10 rounded-md border border-slate-200 bg-white px-3 text-sm"
+            >
+              <option value="ALL">Toutes les méthodes</option>
+              {methods.map((item) => (
+                <option key={item} value={item}>
+                  {item}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {error ? (
+            <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+              {error}
+            </div>
+          ) : null}
+
+          <div className="overflow-x-auto rounded-lg border">
+            <table className="min-w-full text-left text-sm">
+              <thead className="border-b bg-slate-50 text-xs uppercase text-slate-500">
+                <tr>
+                  <th className="px-3 py-2">Méthode</th>
+                  <th className="px-3 py-2">Chemin</th>
+                  <th className="px-3 py-2">Description</th>
+                  <th className="px-3 py-2">Source</th>
+                </tr>
+              </thead>
+              <tbody>
+                {endpoints.map((endpoint) => (
+                  <tr
+                    key={`${endpoint.method}:${endpoint.path}`}
+                    className="border-b last:border-0 hover:bg-slate-50"
+                  >
+                    <td className="px-3 py-2">
+                      <span
+                        className={`inline-flex rounded px-2 py-0.5 font-mono text-[11px] font-bold ${
+                          METHOD_STYLE[endpoint.method] || METHOD_STYLE.OPTIONS
+                        }`}
+                      >
+                        {endpoint.method}
+                      </span>
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-2 font-mono text-xs text-slate-800">
+                      {endpoint.path}
+                    </td>
+                    <td className="min-w-[16rem] px-3 py-2 text-xs text-slate-600">
+                      {endpoint.summary || endpoint.description || "—"}
+                      {endpoint.tags.length ? (
+                        <div className="mt-1 flex flex-wrap gap-1">
+                          {endpoint.tags.map((tag) => (
+                            <Badge key={tag} variant="secondary" className="text-[10px]">
+                              {tag}
+                            </Badge>
+                          ))}
+                        </div>
+                      ) : null}
+                    </td>
+                    <td className="px-3 py-2 text-xs">
+                      {endpoint.documented ? (
+                        <span className="text-emerald-700">OpenAPI</span>
+                      ) : (
+                        <span className="text-slate-500">Runtime Hono</span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+                {!endpoints.length && !loading ? (
+                  <tr>
+                    <td colSpan={4} className="px-4 py-8 text-center text-slate-500">
+                      Aucun endpoint pour ce filtre.
+                    </td>
+                  </tr>
+                ) : null}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: number }) {
+  return (
+    <Card>
+      <CardContent className="p-4">
+        <div className="text-2xl font-semibold tabular-nums text-slate-900">{value}</div>
+        <div className="text-xs text-slate-500">{label}</div>
+      </CardContent>
+    </Card>
+  );
+}

package/ui/index.ts

@@ -0,0 +1,39 @@
+/**
+ * Observability Admin UI (usage analytics N6 + request-logs / api-endpoints O5).
+ * Consommer via `@creezio/observability/ui`.
+ */
+export { AnalyticsClient } from "./analytics-client";
+export {
+  AnalyticsProductivityPanel,
+  type ProductivityPayload,
+} from "./analytics-productivity-panel";
+export {
+  UsageAnalyticsProvider,
+  type UsageAnalyticsProviderSession,
+} from "./usage-analytics-provider";
+export { SessionUsageAnalyticsProvider } from "./session-usage-analytics-provider";
+
+export {
+  flushUsageAnalytics,
+  setUsageAnalyticsSession,
+  trackUsagePageView,
+  trackUsageEvent,
+  ensureUsageAnalyticsDom,
+} from "./usage-analytics-client";
+
+/** Tokens UI marque (aidAttr / fleet) — safe client via dist. */
+export {
+  configureUsageAnalyticsUiBrand,
+  getUsageAnalyticsUiBrand,
+  type UsageAnalyticsUiBrand,
+  type FleetActionPayload,
+} from "../dist/usage/ui-brand.js";
+
+/* ── O5 : request-logs / api-endpoints ── */
+export { RequestLogsClient } from "./request-logs-client";
+export { ApiEndpointsClient } from "./api-endpoints-client";
+export type {
+  RequestLogEntry,
+  RequestLogSource,
+  RequestLogDetail,
+} from "../dist/request-logs/request-logs.js";

package/ui/primitives/badge.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "./cn";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-slate-900 text-white",
+        secondary: "border-transparent bg-slate-100 text-slate-700",
+        outline: "border-slate-200 text-slate-700",
+        success: "border-transparent bg-emerald-100 text-emerald-800",
+        warning: "border-transparent bg-amber-100 text-amber-800",
+        danger: "border-transparent bg-red-100 text-red-800",
+        info: "border-transparent bg-sky-100 text-sky-800",
+        muted: "border-transparent bg-slate-50 text-slate-500",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+/**
+ * <span> et non <div> : un badge est utilisé DANS des <p>, <a> et <span>
+ * (fiche produit, dashboard, préférences…). Un <div> y est du HTML invalide :
+ * le parseur navigateur restructure le DOM (ferme le <p> avant le div) et
+ * l'hydratation React échoue (« Hydration failed » #418/#422, cascade
+ * possible en #310) — écran « Application error » dans l'app desktop.
+ */
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}

package/ui/primitives/button.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "./cn";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-slate-900 text-white hover:bg-slate-800",
+        secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200",
+        outline: "border border-slate-200 bg-white hover:bg-slate-50",
+        ghost: "hover:bg-slate-100",
+        destructive: "bg-red-600 text-white hover:bg-red-700",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/ui/primitives/card.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { cn } from "./cn";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-xl border border-slate-200 bg-white shadow-sm", className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-slate-500", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent };

package/ui/primitives/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/ui/primitives/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "./cn";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-slate-200 bg-white px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Input.displayName = "Input";
+
+export { Input };

package/ui/primitives/tabs.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "./cn";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-start gap-1 rounded-lg bg-slate-100 p-1 text-slate-600",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn("mt-4 focus-visible:outline-none", className)}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };