@contractspec/lib.example-shared-ui 6.0.16 → 6.0.18

package/dist/EvolutionDashboard.js

@@ -1,804 +1,2 @@
 // @bun
-// src/hooks/useEvolution.ts
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-"use client";
-var EVOLUTION_STORAGE_KEY = "contractspec-evolution-data";
-function useEvolution(templateId) {
-  const [usageStats, setUsageStats] = useState([]);
-  const [anomalies, setAnomalies] = useState([]);
-  const [suggestions, setSuggestions] = useState([]);
-  const [hints, setHints] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const metricsRef = useRef([]);
-  const [operationCount, setOperationCount] = useState(0);
-  useEffect(() => {
-    try {
-      const stored = localStorage.getItem(`${EVOLUTION_STORAGE_KEY}-${templateId}`);
-      if (stored) {
-        const data = JSON.parse(stored);
-        setSuggestions(data.suggestions.map((s) => ({
-          ...s,
-          createdAt: new Date(s.createdAt)
-        })));
-      }
-    } catch {}
-  }, [templateId]);
-  useEffect(() => {
-    try {
-      localStorage.setItem(`${EVOLUTION_STORAGE_KEY}-${templateId}`, JSON.stringify({ suggestions }));
-    } catch {}
-  }, [suggestions, templateId]);
-  const trackOperation = useCallback((operationName, durationMs, success, errorCode) => {
-    const sample = {
-      operation: {
-        name: operationName,
-        version: "1.0.0",
-        tenantId: "sandbox"
-      },
-      durationMs,
-      success,
-      timestamp: new Date,
-      errorCode
-    };
-    metricsRef.current.push(sample);
-    setOperationCount((prev) => prev + 1);
-  }, []);
-  const analyzeUsage = useCallback(() => {
-    const samples = metricsRef.current;
-    if (samples.length < 5)
-      return;
-    const groups = new Map;
-    for (const sample of samples) {
-      const key = `${sample.operation.name}.v${sample.operation.version}`;
-      const arr = groups.get(key) ?? [];
-      arr.push(sample);
-      groups.set(key, arr);
-    }
-    const stats = [];
-    const detectedAnomalies = [];
-    groups.forEach((opSamples) => {
-      if (opSamples.length < 3)
-        return;
-      const durations = opSamples.map((s) => s.durationMs).sort((a, b) => a - b);
-      const errors = opSamples.filter((s) => !s.success);
-      const totalCalls = opSamples.length;
-      const errorRate = errors.length / totalCalls;
-      const averageLatencyMs = durations.reduce((sum, value) => sum + value, 0) / totalCalls;
-      const timestamps = opSamples.map((s) => s.timestamp.getTime());
-      const firstSample = opSamples[0];
-      if (!firstSample)
-        return;
-      const stat = {
-        operation: firstSample.operation,
-        totalCalls,
-        successRate: 1 - errorRate,
-        errorRate,
-        averageLatencyMs,
-        p95LatencyMs: percentile(durations, 0.95),
-        p99LatencyMs: percentile(durations, 0.99),
-        maxLatencyMs: Math.max(...durations),
-        lastSeenAt: new Date(Math.max(...timestamps)),
-        windowStart: new Date(Math.min(...timestamps)),
-        windowEnd: new Date(Math.max(...timestamps)),
-        topErrors: errors.reduce((acc, s) => {
-          if (s.errorCode) {
-            acc[s.errorCode] = (acc[s.errorCode] ?? 0) + 1;
-          }
-          return acc;
-        }, {})
-      };
-      stats.push(stat);
-      if (errorRate > 0.1) {
-        detectedAnomalies.push({
-          operation: stat.operation,
-          severity: errorRate > 0.3 ? "high" : errorRate > 0.2 ? "medium" : "low",
-          metric: "error-rate",
-          description: `Error rate ${(errorRate * 100).toFixed(1)}% exceeds threshold`,
-          detectedAt: new Date,
-          threshold: 0.1,
-          observedValue: errorRate
-        });
-      }
-      if (stat.p99LatencyMs > 500) {
-        detectedAnomalies.push({
-          operation: stat.operation,
-          severity: stat.p99LatencyMs > 1000 ? "high" : stat.p99LatencyMs > 750 ? "medium" : "low",
-          metric: "latency",
-          description: `P99 latency ${stat.p99LatencyMs.toFixed(0)}ms exceeds threshold`,
-          detectedAt: new Date,
-          threshold: 500,
-          observedValue: stat.p99LatencyMs
-        });
-      }
-    });
-    setUsageStats(stats);
-    setAnomalies(detectedAnomalies);
-    const newHints = detectedAnomalies.map((anomaly) => ({
-      operation: anomaly.operation,
-      category: anomaly.metric === "latency" ? "performance" : "error-handling",
-      summary: anomaly.metric === "latency" ? "Latency regression detected" : "Error spike detected",
-      justification: anomaly.description,
-      recommendedActions: anomaly.metric === "latency" ? [
-        "Add caching layer",
-        "Optimize database queries",
-        "Consider pagination"
-      ] : [
-        "Add retry logic",
-        "Improve error handling",
-        "Add circuit breaker"
-      ]
-    }));
-    setHints(newHints);
-  }, []);
-  const generateSuggestions = useCallback(async () => {
-    if (anomalies.length === 0)
-      return;
-    setLoading(true);
-    await new Promise((resolve) => setTimeout(resolve, 800));
-    const newSuggestions = anomalies.map((anomaly) => ({
-      id: `suggestion-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
-      intent: {
-        id: `intent-${anomaly.operation.name}`,
-        type: anomaly.metric === "latency" ? "latency-regression" : anomaly.metric === "error-rate" ? "error-spike" : "throughput-drop",
-        description: anomaly.description,
-        operation: anomaly.operation,
-        confidence: {
-          score: anomaly.severity === "high" ? 0.9 : anomaly.severity === "medium" ? 0.7 : 0.5,
-          sampleSize: usageStats.find((s) => s.operation.name === anomaly.operation.name)?.totalCalls ?? 0
-        }
-      },
-      target: anomaly.operation,
-      proposal: {
-        summary: generateSuggestionSummary(anomaly),
-        rationale: generateSuggestionRationale(anomaly),
-        changeType: anomaly.metric === "error-rate" ? "policy-update" : "revision",
-        recommendedActions: generateRecommendedActions(anomaly)
-      },
-      confidence: anomaly.severity === "high" ? 0.85 : anomaly.severity === "medium" ? 0.7 : 0.55,
-      createdAt: new Date,
-      createdBy: "ai-evolution-agent",
-      status: "pending",
-      priority: anomaly.severity
-    }));
-    setSuggestions((prev) => [...prev, ...newSuggestions]);
-    setLoading(false);
-  }, [anomalies, usageStats]);
-  const approveSuggestion = useCallback((id, _notes) => {
-    setSuggestions((prev) => prev.map((s) => s.id === id ? { ...s, status: "approved" } : s));
-  }, []);
-  const rejectSuggestion = useCallback((id, _notes) => {
-    setSuggestions((prev) => prev.map((s) => s.id === id ? { ...s, status: "rejected" } : s));
-  }, []);
-  const clear = useCallback(() => {
-    metricsRef.current = [];
-    setOperationCount(0);
-    setUsageStats([]);
-    setAnomalies([]);
-    setSuggestions([]);
-    setHints([]);
-    localStorage.removeItem(`${EVOLUTION_STORAGE_KEY}-${templateId}`);
-  }, [templateId]);
-  return useMemo(() => ({
-    usageStats,
-    anomalies,
-    suggestions,
-    hints,
-    loading,
-    trackOperation,
-    analyzeUsage,
-    generateSuggestions,
-    approveSuggestion,
-    rejectSuggestion,
-    clear,
-    operationCount
-  }), [
-    usageStats,
-    anomalies,
-    suggestions,
-    hints,
-    loading,
-    trackOperation,
-    analyzeUsage,
-    generateSuggestions,
-    approveSuggestion,
-    rejectSuggestion,
-    clear,
-    operationCount
-  ]);
-}
-function percentile(values, p) {
-  if (!values.length)
-    return 0;
-  if (values.length === 1)
-    return values[0] ?? 0;
-  const idx = Math.min(values.length - 1, Math.floor(p * values.length));
-  return values[idx] ?? 0;
-}
-function generateSuggestionSummary(anomaly) {
-  if (anomaly.metric === "latency") {
-    return `Add caching and pagination to ${anomaly.operation.name} to reduce latency`;
-  }
-  if (anomaly.metric === "error-rate") {
-    return `Add retry policy and circuit breaker to ${anomaly.operation.name}`;
-  }
-  return `Optimize ${anomaly.operation.name} for improved throughput`;
-}
-function generateSuggestionRationale(anomaly) {
-  if (anomaly.metric === "latency") {
-    return `The operation ${anomaly.operation.name} is experiencing P99 latency of ${anomaly.observedValue?.toFixed(0)}ms, which is above the recommended threshold of ${anomaly.threshold}ms. This can impact user experience and downstream operations.`;
-  }
-  if (anomaly.metric === "error-rate") {
-    return `The error rate for ${anomaly.operation.name} is ${((anomaly.observedValue ?? 0) * 100).toFixed(1)}%, indicating potential issues with input validation, external dependencies, or resource limits.`;
-  }
-  return `Throughput for ${anomaly.operation.name} has dropped significantly, suggesting potential bottlenecks or reduced demand that should be investigated.`;
-}
-function generateRecommendedActions(anomaly) {
-  if (anomaly.metric === "latency") {
-    return [
-      "Add response caching for frequently accessed data",
-      "Implement pagination for large result sets",
-      "Optimize database queries with proper indexing",
-      "Consider adding a GraphQL DataLoader for batching"
-    ];
-  }
-  if (anomaly.metric === "error-rate") {
-    return [
-      "Add input validation at the contract level",
-      "Implement retry policy with exponential backoff",
-      "Add circuit breaker for external dependencies",
-      "Enhance error logging for better debugging"
-    ];
-  }
-  return [
-    "Review resource allocation and scaling policies",
-    "Check for upstream routing or load balancer issues",
-    "Validate feature flag configurations",
-    "Monitor dependency health metrics"
-  ];
-}
-
-// src/EvolutionDashboard.tsx
-import { Button, LoaderBlock } from "@contractspec/lib.design-system";
-import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
-import { Card } from "@contractspec/lib.ui-kit-web/ui/card";
-import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
-import { jsxDEV } from "react/jsx-dev-runtime";
-"use client";
-function EvolutionDashboard({
-  templateId,
-  onLog
-}) {
-  const {
-    usageStats,
-    anomalies,
-    suggestions,
-    hints,
-    loading,
-    trackOperation,
-    analyzeUsage,
-    generateSuggestions,
-    approveSuggestion,
-    rejectSuggestion,
-    clear,
-    operationCount
-  } = useEvolution(templateId);
-  const handleSimulateOperations = useCallback2(() => {
-    const operations = [
-      { name: `${templateId}.list`, duration: 150, success: true },
-      { name: `${templateId}.list`, duration: 180, success: true },
-      { name: `${templateId}.create`, duration: 350, success: true },
-      {
-        name: `${templateId}.create`,
-        duration: 420,
-        success: false,
-        error: "VALIDATION_ERROR"
-      },
-      { name: `${templateId}.list`, duration: 200, success: true },
-      { name: `${templateId}.get`, duration: 80, success: true },
-      { name: `${templateId}.update`, duration: 280, success: true },
-      { name: `${templateId}.list`, duration: 950, success: true },
-      {
-        name: `${templateId}.delete`,
-        duration: 150,
-        success: false,
-        error: "NOT_FOUND"
-      },
-      { name: `${templateId}.create`, duration: 380, success: true }
-    ];
-    for (const op of operations) {
-      trackOperation(op.name, op.duration, op.success, op.error);
-    }
-    onLog?.(`Simulated ${operations.length} operations`);
-    setTimeout(() => {
-      analyzeUsage();
-      onLog?.("Analysis complete");
-    }, 100);
-  }, [templateId, trackOperation, analyzeUsage, onLog]);
-  const handleGenerateSuggestions = useCallback2(async () => {
-    await generateSuggestions();
-    onLog?.("AI suggestions generated");
-  }, [generateSuggestions, onLog]);
-  const handleApproveSuggestion = useCallback2((id) => {
-    approveSuggestion(id);
-    onLog?.(`Suggestion ${id.slice(0, 8)} approved`);
-  }, [approveSuggestion, onLog]);
-  const handleRejectSuggestion = useCallback2((id) => {
-    rejectSuggestion(id);
-    onLog?.(`Suggestion ${id.slice(0, 8)} rejected`);
-  }, [rejectSuggestion, onLog]);
-  const handleClear = useCallback2(() => {
-    clear();
-    onLog?.("Evolution data cleared");
-  }, [clear, onLog]);
-  const pendingSuggestions = useMemo2(() => suggestions.filter((s) => s.status === "pending"), [suggestions]);
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "flex items-center justify-between",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            children: [
-              /* @__PURE__ */ jsxDEV("h2", {
-                className: "font-semibold text-xl",
-                children: "AI Evolution Engine"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("p", {
-                className: "text-muted-foreground text-sm",
-                children: "Analyze usage patterns and get AI-powered suggestions"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "flex items-center gap-2",
-            children: [
-              /* @__PURE__ */ jsxDEV(Badge, {
-                variant: "secondary",
-                children: [
-                  operationCount,
-                  " ops tracked"
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV(Button, {
-                variant: "ghost",
-                size: "sm",
-                onPress: handleClear,
-                children: "Clear"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV(Card, {
-        className: "p-4",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "flex flex-wrap items-center gap-3",
-            children: [
-              /* @__PURE__ */ jsxDEV(Button, {
-                variant: "default",
-                size: "sm",
-                onPress: handleSimulateOperations,
-                children: "Simulate Operations"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV(Button, {
-                variant: "outline",
-                size: "sm",
-                onPress: analyzeUsage,
-                disabled: operationCount < 5,
-                children: "Analyze Usage"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV(Button, {
-                variant: "outline",
-                size: "sm",
-                onPress: handleGenerateSuggestions,
-                disabled: anomalies.length === 0 || loading,
-                children: loading ? "Generating..." : "Generate AI Suggestions"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
-            className: "mt-2 text-muted-foreground text-xs",
-            children: "Simulate sandbox operations, analyze patterns, and generate AI improvement suggestions."
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      loading && /* @__PURE__ */ jsxDEV(LoaderBlock, {
-        label: "Generating AI suggestions..."
-      }, undefined, false, undefined, this),
-      usageStats.length > 0 && /* @__PURE__ */ jsxDEV(Card, {
-        className: "p-4",
-        children: [
-          /* @__PURE__ */ jsxDEV("h3", {
-            className: "mb-3 font-semibold",
-            children: "Usage Statistics"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "grid gap-3 md:grid-cols-2 lg:grid-cols-3",
-            children: usageStats.map((stat) => /* @__PURE__ */ jsxDEV(UsageStatCard, {
-              stat
-            }, stat.operation.name, false, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      anomalies.length > 0 && /* @__PURE__ */ jsxDEV(Card, {
-        className: "p-4",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "mb-3 flex items-center justify-between",
-            children: [
-              /* @__PURE__ */ jsxDEV("h3", {
-                className: "font-semibold",
-                children: "Detected Anomalies"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV(Badge, {
-                variant: "secondary",
-                className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
-                children: [
-                  anomalies.length,
-                  " issues"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "space-y-2",
-            children: anomalies.map((anomaly, index) => /* @__PURE__ */ jsxDEV(AnomalyCard, {
-              anomaly
-            }, `${anomaly.operation.name}-${index}`, false, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      suggestions.length > 0 && /* @__PURE__ */ jsxDEV(Card, {
-        className: "p-4",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "mb-3 flex items-center justify-between",
-            children: [
-              /* @__PURE__ */ jsxDEV("h3", {
-                className: "font-semibold",
-                children: "AI Suggestions"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "flex items-center gap-2",
-                children: pendingSuggestions.length > 0 && /* @__PURE__ */ jsxDEV(Badge, {
-                  variant: "secondary",
-                  className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
-                  children: [
-                    pendingSuggestions.length,
-                    " pending"
-                  ]
-                }, undefined, true, undefined, this)
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "space-y-3",
-            children: suggestions.map((suggestion) => /* @__PURE__ */ jsxDEV(SuggestionCard, {
-              suggestion,
-              onApprove: handleApproveSuggestion,
-              onReject: handleRejectSuggestion
-            }, suggestion.id, false, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      hints.length > 0 && /* @__PURE__ */ jsxDEV(Card, {
-        className: "p-4",
-        children: [
-          /* @__PURE__ */ jsxDEV("h3", {
-            className: "mb-3 font-semibold",
-            children: "Optimization Hints"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "space-y-2",
-            children: hints.map((hint, index) => /* @__PURE__ */ jsxDEV(HintCard, {
-              hint
-            }, `${hint.operation.name}-${index}`, false, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      usageStats.length === 0 && anomalies.length === 0 && suggestions.length === 0 && /* @__PURE__ */ jsxDEV(Card, {
-        className: "p-8 text-center",
-        children: /* @__PURE__ */ jsxDEV("p", {
-          className: "text-muted-foreground",
-          children: 'Click "Simulate Operations" to generate sample data for analysis.'
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-function UsageStatCard({ stat }) {
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "rounded-lg border border-violet-500/20 bg-violet-500/5 p-3",
-    children: [
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "mb-2 flex items-center justify-between",
-        children: [
-          /* @__PURE__ */ jsxDEV("span", {
-            className: "font-medium font-mono text-sm",
-            children: stat.operation.name
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV(Badge, {
-            variant: stat.errorRate > 0.1 ? "destructive" : "default",
-            className: stat.errorRate > 0.1 ? "" : "border-green-500/30 bg-green-500/20 text-green-400",
-            children: [
-              ((1 - stat.errorRate) * 100).toFixed(0),
-              "% success"
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "grid grid-cols-2 gap-2 text-xs",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            children: [
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "text-muted-foreground",
-                children: "Total Calls:"
-              }, undefined, false, undefined, this),
-              " ",
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "font-medium",
-                children: stat.totalCalls
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            children: [
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "text-muted-foreground",
-                children: "Avg Latency:"
-              }, undefined, false, undefined, this),
-              " ",
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "font-medium",
-                children: [
-                  stat.averageLatencyMs.toFixed(0),
-                  "ms"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            children: [
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "text-muted-foreground",
-                children: "P95:"
-              }, undefined, false, undefined, this),
-              " ",
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "font-medium",
-                children: [
-                  stat.p95LatencyMs.toFixed(0),
-                  "ms"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            children: [
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "text-muted-foreground",
-                children: "P99:"
-              }, undefined, false, undefined, this),
-              " ",
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "font-medium",
-                children: [
-                  stat.p99LatencyMs.toFixed(0),
-                  "ms"
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-function AnomalyCard({ anomaly }) {
-  const severityColors = {
-    low: "text-amber-400",
-    medium: "text-orange-400",
-    high: "text-red-400"
-  };
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "flex items-center justify-between rounded-lg border border-amber-500/30 bg-amber-500/5 p-3",
-    children: [
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "flex items-center gap-3",
-        children: [
-          /* @__PURE__ */ jsxDEV("span", {
-            className: `text-lg ${severityColors[anomaly.severity]}`,
-            title: `${anomaly.severity} severity`,
-            children: anomaly.severity === "high" ? "\uD83D\uDD34" : anomaly.severity === "medium" ? "\uD83D\uDFE0" : "\uD83D\uDFE1"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            children: [
-              /* @__PURE__ */ jsxDEV("p", {
-                className: "font-medium text-sm",
-                children: anomaly.description
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("p", {
-                className: "text-muted-foreground text-xs",
-                children: [
-                  anomaly.operation.name,
-                  " \u2022 ",
-                  anomaly.metric
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV(Badge, {
-        variant: anomaly.severity === "high" ? "destructive" : "secondary",
-        className: anomaly.severity === "medium" ? "border-amber-500/30 bg-amber-500/20 text-amber-400" : "",
-        children: anomaly.severity
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-function SuggestionCard({
-  suggestion,
-  onApprove,
-  onReject
-}) {
-  const getStatusStyles = (status) => {
-    switch (status) {
-      case "pending":
-        return {
-          variant: "secondary",
-          className: "bg-amber-500/20 text-amber-400 border-amber-500/30"
-        };
-      case "approved":
-        return {
-          variant: "default",
-          className: "bg-green-500/20 text-green-400 border-green-500/30"
-        };
-      case "rejected":
-        return { variant: "destructive", className: "" };
-      default:
-        return { variant: "secondary", className: "" };
-    }
-  };
-  const statusStyle = getStatusStyles(suggestion.status);
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "rounded-lg border border-violet-500/30 bg-violet-500/5 p-4",
-    children: [
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "mb-2 flex items-start justify-between",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "flex-1",
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "flex items-center gap-2",
-                children: [
-                  /* @__PURE__ */ jsxDEV("span", {
-                    className: "text-lg",
-                    children: suggestion.intent.type === "latency-regression" ? "\u26A1" : suggestion.intent.type === "error-spike" ? "\uD83D\uDD25" : "\uD83D\uDCC9"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV("h4", {
-                    className: "font-medium",
-                    children: suggestion.proposal.summary
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("p", {
-                className: "mt-1 text-muted-foreground text-sm",
-                children: suggestion.proposal.rationale
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV(Badge, {
-            variant: statusStyle.variant,
-            className: statusStyle.className,
-            children: suggestion.status
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      suggestion.proposal.recommendedActions && suggestion.proposal.recommendedActions.length > 0 && /* @__PURE__ */ jsxDEV("div", {
-        className: "mt-3",
-        children: [
-          /* @__PURE__ */ jsxDEV("p", {
-            className: "mb-1 font-semibold text-violet-400 text-xs uppercase",
-            children: "Recommended Actions"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("ul", {
-            className: "list-inside list-disc space-y-1 text-xs",
-            children: suggestion.proposal.recommendedActions.slice(0, 3).map((action, i) => /* @__PURE__ */ jsxDEV("li", {
-              children: action
-            }, i, false, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "mt-3 flex items-center justify-between",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "flex items-center gap-2 text-xs",
-            children: [
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "text-muted-foreground",
-                children: [
-                  "Confidence: ",
-                  (suggestion.confidence * 100).toFixed(0),
-                  "%"
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "text-muted-foreground",
-                children: "\u2022"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV(Badge, {
-                variant: "secondary",
-                children: suggestion.priority
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          suggestion.status === "pending" && /* @__PURE__ */ jsxDEV("div", {
-            className: "flex items-center gap-2",
-            children: [
-              /* @__PURE__ */ jsxDEV(Button, {
-                variant: "outline",
-                size: "sm",
-                onPress: () => onReject(suggestion.id),
-                children: "Reject"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV(Button, {
-                variant: "default",
-                size: "sm",
-                onPress: () => onApprove(suggestion.id),
-                children: "Approve"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-function HintCard({ hint }) {
-  const categoryIcons = {
-    schema: "\uD83D\uDCD0",
-    policy: "\uD83D\uDD12",
-    performance: "\u26A1",
-    "error-handling": "\uD83D\uDEE1\uFE0F"
-  };
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "rounded-lg border border-blue-500/20 bg-blue-500/5 p-3",
-    children: /* @__PURE__ */ jsxDEV("div", {
-      className: "flex items-start gap-3",
-      children: [
-        /* @__PURE__ */ jsxDEV("span", {
-          className: "text-lg",
-          children: categoryIcons[hint.category]
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV("div", {
-          className: "flex-1",
-          children: [
-            /* @__PURE__ */ jsxDEV("p", {
-              className: "font-medium",
-              children: hint.summary
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV("p", {
-              className: "mt-1 text-muted-foreground text-xs",
-              children: hint.justification
-            }, undefined, false, undefined, this),
-            hint.recommendedActions.length > 0 && /* @__PURE__ */ jsxDEV("ul", {
-              className: "mt-2 list-inside list-disc text-xs",
-              children: hint.recommendedActions.slice(0, 2).map((action, i) => /* @__PURE__ */ jsxDEV("li", {
-                children: action
-              }, i, false, undefined, this))
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
-export {
-  EvolutionDashboard
-};
+import{useCallback as U,useEffect as i,useMemo as n,useRef as o,useState as E}from"react";var r="contractspec-evolution-data";function g(q){let[Q,K]=E([]),[X,V]=E([]),[Y,G]=E([]),[A,_]=E([]),[O,R]=E(!1),f=o([]),[k,h]=E(0);i(()=>{try{let P=localStorage.getItem(`${r}-${q}`);if(P){let J=JSON.parse(P);G(J.suggestions.map(($)=>({...$,createdAt:new Date($.createdAt)})))}}catch{}},[q]),i(()=>{try{localStorage.setItem(`${r}-${q}`,JSON.stringify({suggestions:Y}))}catch{}},[Y,q]);let I=U((P,J,$,Z)=>{let d={operation:{name:P,version:"1.0.0",tenantId:"sandbox"},durationMs:J,success:$,timestamp:new Date,errorCode:Z};f.current.push(d),h((W)=>W+1)},[]),S=U(()=>{let P=f.current;if(P.length<5)return;let J=new Map;for(let W of P){let z=`${W.operation.name}.v${W.operation.version}`,C=J.get(z)??[];C.push(W),J.set(z,C)}let $=[],Z=[];J.forEach((W)=>{if(W.length<3)return;let z=W.map((w)=>w.durationMs).sort((w,N)=>w-N),C=W.filter((w)=>!w.success),y=W.length,M=C.length/y,l=z.reduce((w,N)=>w+N,0)/y,p=W.map((w)=>w.timestamp.getTime()),u=W[0];if(!u)return;let H={operation:u.operation,totalCalls:y,successRate:1-M,errorRate:M,averageLatencyMs:l,p95LatencyMs:m(z,0.95),p99LatencyMs:m(z,0.99),maxLatencyMs:Math.max(...z),lastSeenAt:new Date(Math.max(...p)),windowStart:new Date(Math.min(...p)),windowEnd:new Date(Math.max(...p)),topErrors:C.reduce((w,N)=>{if(N.errorCode)w[N.errorCode]=(w[N.errorCode]??0)+1;return w},{})};if($.push(H),M>0.1)Z.push({operation:H.operation,severity:M>0.3?"high":M>0.2?"medium":"low",metric:"error-rate",description:`Error rate ${(M*100).toFixed(1)}% exceeds threshold`,detectedAt:new Date,threshold:0.1,observedValue:M});if(H.p99LatencyMs>500)Z.push({operation:H.operation,severity:H.p99LatencyMs>1000?"high":H.p99LatencyMs>750?"medium":"low",metric:"latency",description:`P99 latency ${H.p99LatencyMs.toFixed(0)}ms exceeds threshold`,detectedAt:new Date,threshold:500,observedValue:H.p99LatencyMs})}),K($),V(Z);let d=Z.map((W)=>({operation:W.operation,category:W.metric==="latency"?"performance":"error-handling",summary:W.metric==="latency"?"Latency regression detected":"Error spike detected",justification:W.description,recommendedActions:W.metric==="latency"?["Add caching layer","Optimize database queries","Consider pagination"]:["Add retry logic","Improve error handling","Add circuit breaker"]}));_(d)},[]),c=U(async()=>{if(X.length===0)return;R(!0),await new Promise((J)=>setTimeout(J,800));let P=X.map((J)=>({id:`suggestion-${Date.now()}-${Math.random().toString(36).slice(2,9)}`,intent:{id:`intent-${J.operation.name}`,type:J.metric==="latency"?"latency-regression":J.metric==="error-rate"?"error-spike":"throughput-drop",description:J.description,operation:J.operation,confidence:{score:J.severity==="high"?0.9:J.severity==="medium"?0.7:0.5,sampleSize:Q.find(($)=>$.operation.name===J.operation.name)?.totalCalls??0}},target:J.operation,proposal:{summary:t(J),rationale:e(J),changeType:J.metric==="error-rate"?"policy-update":"revision",recommendedActions:s(J)},confidence:J.severity==="high"?0.85:J.severity==="medium"?0.7:0.55,createdAt:new Date,createdBy:"ai-evolution-agent",status:"pending",priority:J.severity}));G((J)=>[...J,...P]),R(!1)},[X,Q]),x=U((P,J)=>{G(($)=>$.map((Z)=>Z.id===P?{...Z,status:"approved"}:Z))},[]),j=U((P,J)=>{G(($)=>$.map((Z)=>Z.id===P?{...Z,status:"rejected"}:Z))},[]),L=U(()=>{f.current=[],h(0),K([]),V([]),G([]),_([]),localStorage.removeItem(`${r}-${q}`)},[q]);return n(()=>({usageStats:Q,anomalies:X,suggestions:Y,hints:A,loading:O,trackOperation:I,analyzeUsage:S,generateSuggestions:c,approveSuggestion:x,rejectSuggestion:j,clear:L,operationCount:k}),[Q,X,Y,A,O,I,S,c,x,j,L,k])}function m(q,Q){if(!q.length)return 0;if(q.length===1)return q[0]??0;let K=Math.min(q.length-1,Math.floor(Q*q.length));return q[K]??0}function t(q){if(q.metric==="latency")return`Add caching and pagination to ${q.operation.name} to reduce latency`;if(q.metric==="error-rate")return`Add retry policy and circuit breaker to ${q.operation.name}`;return`Optimize ${q.operation.name} for improved throughput`}function e(q){if(q.metric==="latency")return`The operation ${q.operation.name} is experiencing P99 latency of ${q.observedValue?.toFixed(0)}ms, which is above the recommended threshold of ${q.threshold}ms. This can impact user experience and downstream operations.`;if(q.metric==="error-rate")return`The error rate for ${q.operation.name} is ${((q.observedValue??0)*100).toFixed(1)}%, indicating potential issues with input validation, external dependencies, or resource limits.`;return`Throughput for ${q.operation.name} has dropped significantly, suggesting potential bottlenecks or reduced demand that should be investigated.`}function s(q){if(q.metric==="latency")return["Add response caching for frequently accessed data","Implement pagination for large result sets","Optimize database queries with proper indexing","Consider adding a GraphQL DataLoader for batching"];if(q.metric==="error-rate")return["Add input validation at the contract level","Implement retry policy with exponential backoff","Add circuit breaker for external dependencies","Enhance error logging for better debugging"];return["Review resource allocation and scaling policies","Check for upstream routing or load balancer issues","Validate feature flag configurations","Monitor dependency health metrics"]}import{Button as b,LoaderBlock as a}from"@contractspec/lib.design-system";import{Badge as T}from"@contractspec/lib.ui-kit-web/ui/badge";import{Card as B}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as v,useMemo as qq}from"react";import{jsx as D,jsxs as F}from"react/jsx-runtime";function Vq({templateId:q,onLog:Q}){let{usageStats:K,anomalies:X,suggestions:V,hints:Y,loading:G,trackOperation:A,analyzeUsage:_,generateSuggestions:O,approveSuggestion:R,rejectSuggestion:f,clear:k,operationCount:h}=g(q),I=v(()=>{let P=[{name:`${q}.list`,duration:150,success:!0},{name:`${q}.list`,duration:180,success:!0},{name:`${q}.create`,duration:350,success:!0},{name:`${q}.create`,duration:420,success:!1,error:"VALIDATION_ERROR"},{name:`${q}.list`,duration:200,success:!0},{name:`${q}.get`,duration:80,success:!0},{name:`${q}.update`,duration:280,success:!0},{name:`${q}.list`,duration:950,success:!0},{name:`${q}.delete`,duration:150,success:!1,error:"NOT_FOUND"},{name:`${q}.create`,duration:380,success:!0}];for(let J of P)A(J.name,J.duration,J.success,J.error);Q?.(`Simulated ${P.length} operations`),setTimeout(()=>{_(),Q?.("Analysis complete")},100)},[q,A,_,Q]),S=v(async()=>{await O(),Q?.("AI suggestions generated")},[O,Q]),c=v((P)=>{R(P),Q?.(`Suggestion ${P.slice(0,8)} approved`)},[R,Q]),x=v((P)=>{f(P),Q?.(`Suggestion ${P.slice(0,8)} rejected`)},[f,Q]),j=v(()=>{k(),Q?.("Evolution data cleared")},[k,Q]),L=qq(()=>V.filter((P)=>P.status==="pending"),[V]);return F("div",{className:"space-y-6",children:[F("div",{className:"flex items-center justify-between",children:[F("div",{children:[D("h2",{className:"font-semibold text-xl",children:"AI Evolution Engine"}),D("p",{className:"text-muted-foreground text-sm",children:"Analyze usage patterns and get AI-powered suggestions"})]}),F("div",{className:"flex items-center gap-2",children:[F(T,{variant:"secondary",children:[h," ops tracked"]}),D(b,{variant:"ghost",size:"sm",onPress:j,children:"Clear"})]})]}),F(B,{className:"p-4",children:[F("div",{className:"flex flex-wrap items-center gap-3",children:[D(b,{variant:"default",size:"sm",onPress:I,children:"Simulate Operations"}),D(b,{variant:"outline",size:"sm",onPress:_,disabled:h<5,children:"Analyze Usage"}),D(b,{variant:"outline",size:"sm",onPress:S,disabled:X.length===0||G,children:G?"Generating...":"Generate AI Suggestions"})]}),D("p",{className:"mt-2 text-muted-foreground text-xs",children:"Simulate sandbox operations, analyze patterns, and generate AI improvement suggestions."})]}),G&&D(a,{label:"Generating AI suggestions..."}),K.length>0&&F(B,{className:"p-4",children:[D("h3",{className:"mb-3 font-semibold",children:"Usage Statistics"}),D("div",{className:"grid gap-3 md:grid-cols-2 lg:grid-cols-3",children:K.map((P)=>D(Dq,{stat:P},P.operation.name))})]}),X.length>0&&F(B,{className:"p-4",children:[F("div",{className:"mb-3 flex items-center justify-between",children:[D("h3",{className:"font-semibold",children:"Detected Anomalies"}),F(T,{variant:"secondary",className:"border-amber-500/30 bg-amber-500/20 text-amber-400",children:[X.length," issues"]})]}),D("div",{className:"space-y-2",children:X.map((P,J)=>D(Fq,{anomaly:P},`${P.operation.name}-${J}`))})]}),V.length>0&&F(B,{className:"p-4",children:[F("div",{className:"mb-3 flex items-center justify-between",children:[D("h3",{className:"font-semibold",children:"AI Suggestions"}),D("div",{className:"flex items-center gap-2",children:L.length>0&&F(T,{variant:"secondary",className:"border-amber-500/30 bg-amber-500/20 text-amber-400",children:[L.length," pending"]})})]}),D("div",{className:"space-y-3",children:V.map((P)=>D(Jq,{suggestion:P,onApprove:c,onReject:x},P.id))})]}),Y.length>0&&F(B,{className:"p-4",children:[D("h3",{className:"mb-3 font-semibold",children:"Optimization Hints"}),D("div",{className:"space-y-2",children:Y.map((P,J)=>D(Pq,{hint:P},`${P.operation.name}-${J}`))})]}),K.length===0&&X.length===0&&V.length===0&&D(B,{className:"p-8 text-center",children:D("p",{className:"text-muted-foreground",children:'Click "Simulate Operations" to generate sample data for analysis.'})})]})}function Dq({stat:q}){return F("div",{className:"rounded-lg border border-violet-500/20 bg-violet-500/5 p-3",children:[F("div",{className:"mb-2 flex items-center justify-between",children:[D("span",{className:"font-medium font-mono text-sm",children:q.operation.name}),F(T,{variant:q.errorRate>0.1?"destructive":"default",className:q.errorRate>0.1?"":"border-green-500/30 bg-green-500/20 text-green-400",children:[((1-q.errorRate)*100).toFixed(0),"% success"]})]}),F("div",{className:"grid grid-cols-2 gap-2 text-xs",children:[F("div",{children:[D("span",{className:"text-muted-foreground",children:"Total Calls:"})," ",D("span",{className:"font-medium",children:q.totalCalls})]}),F("div",{children:[D("span",{className:"text-muted-foreground",children:"Avg Latency:"})," ",F("span",{className:"font-medium",children:[q.averageLatencyMs.toFixed(0),"ms"]})]}),F("div",{children:[D("span",{className:"text-muted-foreground",children:"P95:"})," ",F("span",{className:"font-medium",children:[q.p95LatencyMs.toFixed(0),"ms"]})]}),F("div",{children:[D("span",{className:"text-muted-foreground",children:"P99:"})," ",F("span",{className:"font-medium",children:[q.p99LatencyMs.toFixed(0),"ms"]})]})]})]})}function Fq({anomaly:q}){return F("div",{className:"flex items-center justify-between rounded-lg border border-amber-500/30 bg-amber-500/5 p-3",children:[F("div",{className:"flex items-center gap-3",children:[D("span",{className:`text-lg ${{low:"text-amber-400",medium:"text-orange-400",high:"text-red-400"}[q.severity]}`,title:`${q.severity} severity`,children:q.severity==="high"?"\uD83D\uDD34":q.severity==="medium"?"\uD83D\uDFE0":"\uD83D\uDFE1"}),F("div",{children:[D("p",{className:"font-medium text-sm",children:q.description}),F("p",{className:"text-muted-foreground text-xs",children:[q.operation.name," \u2022 ",q.metric]})]})]}),D(T,{variant:q.severity==="high"?"destructive":"secondary",className:q.severity==="medium"?"border-amber-500/30 bg-amber-500/20 text-amber-400":"",children:q.severity})]})}function Jq({suggestion:q,onApprove:Q,onReject:K}){let V=((Y)=>{switch(Y){case"pending":return{variant:"secondary",className:"bg-amber-500/20 text-amber-400 border-amber-500/30"};case"approved":return{variant:"default",className:"bg-green-500/20 text-green-400 border-green-500/30"};case"rejected":return{variant:"destructive",className:""};default:return{variant:"secondary",className:""}}})(q.status);return F("div",{className:"rounded-lg border border-violet-500/30 bg-violet-500/5 p-4",children:[F("div",{className:"mb-2 flex items-start justify-between",children:[F("div",{className:"flex-1",children:[F("div",{className:"flex items-center gap-2",children:[D("span",{className:"text-lg",children:q.intent.type==="latency-regression"?"\u26A1":q.intent.type==="error-spike"?"\uD83D\uDD25":"\uD83D\uDCC9"}),D("h4",{className:"font-medium",children:q.proposal.summary})]}),D("p",{className:"mt-1 text-muted-foreground text-sm",children:q.proposal.rationale})]}),D(T,{variant:V.variant,className:V.className,children:q.status})]}),q.proposal.recommendedActions&&q.proposal.recommendedActions.length>0&&F("div",{className:"mt-3",children:[D("p",{className:"mb-1 font-semibold text-violet-400 text-xs uppercase",children:"Recommended Actions"}),D("ul",{className:"list-inside list-disc space-y-1 text-xs",children:q.proposal.recommendedActions.slice(0,3).map((Y,G)=>D("li",{children:Y},G))})]}),F("div",{className:"mt-3 flex items-center justify-between",children:[F("div",{className:"flex items-center gap-2 text-xs",children:[F("span",{className:"text-muted-foreground",children:["Confidence: ",(q.confidence*100).toFixed(0),"%"]}),D("span",{className:"text-muted-foreground",children:"\u2022"}),D(T,{variant:"secondary",children:q.priority})]}),q.status==="pending"&&F("div",{className:"flex items-center gap-2",children:[D(b,{variant:"outline",size:"sm",onPress:()=>K(q.id),children:"Reject"}),D(b,{variant:"default",size:"sm",onPress:()=>Q(q.id),children:"Approve"})]})]})]})}function Pq({hint:q}){return D("div",{className:"rounded-lg border border-blue-500/20 bg-blue-500/5 p-3",children:F("div",{className:"flex items-start gap-3",children:[D("span",{className:"text-lg",children:{schema:"\uD83D\uDCD0",policy:"\uD83D\uDD12",performance:"\u26A1","error-handling":"\uD83D\uDEE1\uFE0F"}[q.category]}),F("div",{className:"flex-1",children:[D("p",{className:"font-medium",children:q.summary}),D("p",{className:"mt-1 text-muted-foreground text-xs",children:q.justification}),q.recommendedActions.length>0&&D("ul",{className:"mt-2 list-inside list-disc text-xs",children:q.recommendedActions.slice(0,2).map((K,X)=>D("li",{children:K},X))})]})]})})}export{Vq as EvolutionDashboard};