@contractspec/lib.example-shared-ui 1.11.0 → 1.13.0

package/dist/browser/EvolutionDashboard.js

@@ -0,0 +1,803 @@
+// 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 { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { Button, LoaderBlock } from "@contractspec/lib.design-system";
+import { Card } from "@contractspec/lib.ui-kit-web/ui/card";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+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: "text-xl font-semibold",
+                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: "text-muted-foreground mt-2 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-mono text-sm font-medium",
+            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: "text-sm font-medium",
+                children: anomaly.description
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground text-xs",
+                children: [
+                  anomaly.operation.name,
+                  " • ",
+                  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" ? "⚡" : 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: "text-muted-foreground mt-1 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 text-xs font-semibold text-violet-400 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: "•"
+              }, 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: "⚡",
+    "error-handling": "\uD83D\uDEE1️"
+  };
+  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: "text-muted-foreground mt-1 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
+};