// src/components/docs/libraries/LibrariesObservabilityPage.tsx
import { CodeBlock, InstallCommand } from "@contractspec/lib.design-system";
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function LibrariesObservabilityPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "Observability Library"
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground text-lg",
            children: [
              "The ",
              /* @__PURE__ */ jsx("code", {
                children: "@contractspec/lib.observability"
              }),
              " library provides a thin wrapper around OpenTelemetry to simplify instrumentation."
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Installation"
          }),
          /* @__PURE__ */ jsx(InstallCommand, {
            package: "@contractspec/lib.observability"
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Tracing"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            code: `import { traceAsync, traceSync } from '@contractspec/lib.observability/tracing';

await traceAsync('process_order', async (span) => {
  span.setAttribute('order_id', order.id);
  await db.save(order);
});`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Metrics"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            code: `import { createCounter, createHistogram } from '@contractspec/lib.observability/metrics';

const ordersCounter = createCounter('orders_total');
const latencyHistogram = createHistogram('request_duration_seconds');

ordersCounter.add(1, { status: 'success' });
latencyHistogram.record(0.123);`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Middleware"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Automatically instrument your HTTP handlers:"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            code: `import { createTracingMiddleware } from '@contractspec/lib.observability/tracing/middleware';

app.use(createTracingMiddleware());`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Anomaly Detection"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground text-sm",
            children: "Includes baseline calculation and anomaly detection helpers for auto-rollback without writing custom math."
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            language: "typescript",
            code: `import { AnomalyDetector, RootCauseAnalyzer, AlertManager } from '@contractspec/lib.observability';

const detector = new AnomalyDetector({ errorRateDelta: 0.4 });
const analyzer = new RootCauseAnalyzer();
const alertManager = new AlertManager({ transport: sendOpsAlert });

const signals = detector.evaluate(point);
signals.forEach((signal) => {
  const analysis = analyzer.analyze(signal, recentDeployments);
  alertManager.notify(signal, analysis);
});`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/libraries",
            className: "btn-ghost",
            children: "Back to Libraries"
          }),
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/libraries/slo",
            className: "btn-primary",
            children: [
              "Next: SLO ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  LibrariesObservabilityPage
};
