@contractspec/lib.example-shared-ui 6.0.17 → 6.0.19

package/dist/node/EvolutionSidebar.js

@@ -1,531 +1 @@
-// 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/EvolutionSidebar.tsx
-import { Button } 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 EvolutionSidebar({
-  templateId,
-  expanded = false,
-  onToggle,
-  onLog,
-  onOpenEvolution
-}) {
-  const {
-    anomalies,
-    suggestions,
-    loading,
-    approveSuggestion,
-    rejectSuggestion,
-    operationCount
-  } = useEvolution(templateId);
-  const pendingSuggestions = useMemo2(() => suggestions.filter((s) => s.status === "pending"), [suggestions]);
-  const topAnomalies = useMemo2(() => anomalies.sort((a, b) => {
-    const severityOrder = { high: 0, medium: 1, low: 2 };
-    return severityOrder[a.severity] - severityOrder[b.severity];
-  }).slice(0, 3), [anomalies]);
-  const handleApprove = useCallback2((id) => {
-    approveSuggestion(id);
-    onLog?.(`Approved suggestion ${id.slice(0, 8)}`);
-  }, [approveSuggestion, onLog]);
-  const handleReject = useCallback2((id) => {
-    rejectSuggestion(id);
-    onLog?.(`Rejected suggestion ${id.slice(0, 8)}`);
-  }, [rejectSuggestion, onLog]);
-  if (!expanded) {
-    return /* @__PURE__ */ jsxDEV("button", {
-      onClick: onToggle,
-      className: "flex items-center gap-2 rounded-lg border border-violet-500/30 bg-violet-500/10 px-3 py-2 text-sm transition hover:bg-violet-500/20",
-      type: "button",
-      children: [
-        /* @__PURE__ */ jsxDEV("span", {
-          children: "\uD83E\uDD16"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV("span", {
-          children: "Evolution"
-        }, undefined, false, undefined, this),
-        pendingSuggestions.length > 0 && /* @__PURE__ */ jsxDEV(Badge, {
-          variant: "secondary",
-          className: "border-amber-500/30 bg-amber-500/20 text-amber-400",
-          children: pendingSuggestions.length
-        }, undefined, false, undefined, this),
-        anomalies.length > 0 && pendingSuggestions.length === 0 && /* @__PURE__ */ jsxDEV(Badge, {
-          variant: "destructive",
-          children: anomalies.length
-        }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV(Card, {
-    className: "w-80 overflow-hidden",
-    children: [
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "flex items-center justify-between border-violet-500/20 border-b bg-violet-500/5 px-3 py-2",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "flex items-center gap-2",
-            children: [
-              /* @__PURE__ */ jsxDEV("span", {
-                children: "\uD83E\uDD16"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "font-semibold text-sm",
-                children: "Evolution"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "flex items-center gap-1",
-            children: [
-              onOpenEvolution && /* @__PURE__ */ jsxDEV(Button, {
-                variant: "ghost",
-                size: "sm",
-                onPress: onOpenEvolution,
-                children: "Expand"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("button", {
-                onClick: onToggle,
-                className: "p-1 text-muted-foreground hover:text-foreground",
-                type: "button",
-                title: "Collapse",
-                children: "✕"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "max-h-96 overflow-y-auto p-3",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "mb-3 flex items-center justify-between text-xs",
-            children: [
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "text-muted-foreground",
-                children: [
-                  operationCount,
-                  " ops tracked"
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "flex items-center gap-2",
-                children: [
-                  anomalies.length > 0 && /* @__PURE__ */ jsxDEV(Badge, {
-                    variant: "destructive",
-                    children: [
-                      anomalies.length,
-                      " anomalies"
-                    ]
-                  }, undefined, true, undefined, this),
-                  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, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          loading && /* @__PURE__ */ jsxDEV("div", {
-            className: "py-4 text-center text-muted-foreground text-sm",
-            children: "Generating suggestions..."
-          }, undefined, false, undefined, this),
-          topAnomalies.length > 0 && /* @__PURE__ */ jsxDEV("div", {
-            className: "mb-4",
-            children: [
-              /* @__PURE__ */ jsxDEV("p", {
-                className: "mb-2 font-semibold text-violet-400 text-xs uppercase",
-                children: "Top Issues"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "space-y-2",
-                children: topAnomalies.map((anomaly, index) => /* @__PURE__ */ jsxDEV("div", {
-                  className: "rounded border border-amber-500/20 bg-amber-500/5 p-2 text-xs",
-                  children: [
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "flex items-center gap-2",
-                      children: [
-                        /* @__PURE__ */ jsxDEV("span", {
-                          children: anomaly.severity === "high" ? "\uD83D\uDD34" : anomaly.severity === "medium" ? "\uD83D\uDFE0" : "\uD83D\uDFE1"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV("span", {
-                          className: "truncate font-medium",
-                          children: anomaly.operation.name
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this),
-                    /* @__PURE__ */ jsxDEV("p", {
-                      className: "mt-1 truncate text-muted-foreground",
-                      children: anomaly.description
-                    }, undefined, false, undefined, this)
-                  ]
-                }, `${anomaly.operation.name}-${index}`, true, undefined, this))
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          pendingSuggestions.length > 0 && /* @__PURE__ */ jsxDEV("div", {
-            children: [
-              /* @__PURE__ */ jsxDEV("p", {
-                className: "mb-2 font-semibold text-violet-400 text-xs uppercase",
-                children: "Pending Suggestions"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "space-y-2",
-                children: [
-                  pendingSuggestions.slice(0, 3).map((suggestion) => /* @__PURE__ */ jsxDEV(CompactSuggestionCard, {
-                    suggestion,
-                    onApprove: handleApprove,
-                    onReject: handleReject
-                  }, suggestion.id, false, undefined, this)),
-                  pendingSuggestions.length > 3 && /* @__PURE__ */ jsxDEV("p", {
-                    className: "text-center text-muted-foreground text-xs",
-                    children: [
-                      "+",
-                      pendingSuggestions.length - 3,
-                      " more suggestions"
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          anomalies.length === 0 && pendingSuggestions.length === 0 && !loading && /* @__PURE__ */ jsxDEV("div", {
-            className: "py-4 text-center text-muted-foreground text-xs",
-            children: "No issues detected. Keep coding!"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      onOpenEvolution && /* @__PURE__ */ jsxDEV("div", {
-        className: "border-violet-500/20 border-t p-2",
-        children: /* @__PURE__ */ jsxDEV(Button, {
-          variant: "ghost",
-          size: "sm",
-          className: "w-full",
-          onPress: onOpenEvolution,
-          children: "Open Evolution Dashboard →"
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-function CompactSuggestionCard({
-  suggestion,
-  onApprove,
-  onReject
-}) {
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "rounded border border-violet-500/20 bg-violet-500/5 p-2",
-    children: [
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "flex items-start justify-between gap-2",
-        children: /* @__PURE__ */ jsxDEV("div", {
-          className: "min-w-0 flex-1",
-          children: [
-            /* @__PURE__ */ jsxDEV("p", {
-              className: "truncate font-medium text-xs",
-              children: suggestion.proposal.summary
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV("div", {
-              className: "mt-1 flex items-center gap-2 text-xs",
-              children: [
-                /* @__PURE__ */ jsxDEV(Badge, {
-                  variant: "secondary",
-                  children: suggestion.priority
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV("span", {
-                  className: "text-muted-foreground",
-                  children: [
-                    (suggestion.confidence * 100).toFixed(0),
-                    "%"
-                  ]
-                }, undefined, true, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
-        className: "mt-2 flex justify-end gap-1",
-        children: [
-          /* @__PURE__ */ jsxDEV("button", {
-            onClick: () => onReject(suggestion.id),
-            className: "rounded px-2 py-0.5 text-red-400 text-xs hover:bg-red-400/10",
-            type: "button",
-            children: "Reject"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("button", {
-            onClick: () => onApprove(suggestion.id),
-            className: "rounded bg-violet-500/20 px-2 py-0.5 text-violet-400 text-xs hover:bg-violet-500/30",
-            type: "button",
-            children: "Approve"
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-export {
-  EvolutionSidebar
-};
+import{useCallback as U,useEffect as p,useMemo as t,useRef as n,useState as T}from"react";var S="contractspec-evolution-data";function u(q){let[G,K]=T([]),[H,h]=T([]),[w,V]=T([]),[f,b]=T([]),[L,C]=T(!1),W=n([]),[k,E]=T(0);p(()=>{try{let Z=localStorage.getItem(`${S}-${q}`);if(Z){let D=JSON.parse(Z);V(D.suggestions.map(($)=>({...$,createdAt:new Date($.createdAt)})))}}catch{}},[q]),p(()=>{try{localStorage.setItem(`${S}-${q}`,JSON.stringify({suggestions:w}))}catch{}},[w,q]);let O=U((Z,D,$,X)=>{let v={operation:{name:Z,version:"1.0.0",tenantId:"sandbox"},durationMs:D,success:$,timestamp:new Date,errorCode:X};W.current.push(v),E((Q)=>Q+1)},[]),P=U(()=>{let Z=W.current;if(Z.length<5)return;let D=new Map;for(let Q of Z){let N=`${Q.operation.name}.v${Q.operation.version}`,I=D.get(N)??[];I.push(Q),D.set(N,I)}let $=[],X=[];D.forEach((Q)=>{if(Q.length<3)return;let N=Q.map((z)=>z.durationMs).sort((z,_)=>z-_),I=Q.filter((z)=>!z.success),x=Q.length,M=I.length/x,l=N.reduce((z,_)=>z+_,0)/x,j=Q.map((z)=>z.timestamp.getTime()),y=Q[0];if(!y)return;let Y={operation:y.operation,totalCalls:x,successRate:1-M,errorRate:M,averageLatencyMs:l,p95LatencyMs:r(N,0.95),p99LatencyMs:r(N,0.99),maxLatencyMs:Math.max(...N),lastSeenAt:new Date(Math.max(...j)),windowStart:new Date(Math.min(...j)),windowEnd:new Date(Math.max(...j)),topErrors:I.reduce((z,_)=>{if(_.errorCode)z[_.errorCode]=(z[_.errorCode]??0)+1;return z},{})};if($.push(Y),M>0.1)X.push({operation:Y.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(Y.p99LatencyMs>500)X.push({operation:Y.operation,severity:Y.p99LatencyMs>1000?"high":Y.p99LatencyMs>750?"medium":"low",metric:"latency",description:`P99 latency ${Y.p99LatencyMs.toFixed(0)}ms exceeds threshold`,detectedAt:new Date,threshold:500,observedValue:Y.p99LatencyMs})}),K($),h(X);let v=X.map((Q)=>({operation:Q.operation,category:Q.metric==="latency"?"performance":"error-handling",summary:Q.metric==="latency"?"Latency regression detected":"Error spike detected",justification:Q.description,recommendedActions:Q.metric==="latency"?["Add caching layer","Optimize database queries","Consider pagination"]:["Add retry logic","Improve error handling","Add circuit breaker"]}));b(v)},[]),B=U(async()=>{if(H.length===0)return;C(!0),await new Promise((D)=>setTimeout(D,800));let Z=H.map((D)=>({id:`suggestion-${Date.now()}-${Math.random().toString(36).slice(2,9)}`,intent:{id:`intent-${D.operation.name}`,type:D.metric==="latency"?"latency-regression":D.metric==="error-rate"?"error-spike":"throughput-drop",description:D.description,operation:D.operation,confidence:{score:D.severity==="high"?0.9:D.severity==="medium"?0.7:0.5,sampleSize:G.find(($)=>$.operation.name===D.operation.name)?.totalCalls??0}},target:D.operation,proposal:{summary:o(D),rationale:s(D),changeType:D.metric==="error-rate"?"policy-update":"revision",recommendedActions:e(D)},confidence:D.severity==="high"?0.85:D.severity==="medium"?0.7:0.55,createdAt:new Date,createdBy:"ai-evolution-agent",status:"pending",priority:D.severity}));V((D)=>[...D,...Z]),C(!1)},[H,G]),A=U((Z,D)=>{V(($)=>$.map((X)=>X.id===Z?{...X,status:"approved"}:X))},[]),c=U((Z,D)=>{V(($)=>$.map((X)=>X.id===Z?{...X,status:"rejected"}:X))},[]),d=U(()=>{W.current=[],E(0),K([]),h([]),V([]),b([]),localStorage.removeItem(`${S}-${q}`)},[q]);return t(()=>({usageStats:G,anomalies:H,suggestions:w,hints:f,loading:L,trackOperation:O,analyzeUsage:P,generateSuggestions:B,approveSuggestion:A,rejectSuggestion:c,clear:d,operationCount:k}),[G,H,w,f,L,O,P,B,A,c,d,k])}function r(q,G){if(!q.length)return 0;if(q.length===1)return q[0]??0;let K=Math.min(q.length-1,Math.floor(G*q.length));return q[K]??0}function o(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 s(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 e(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 i}from"@contractspec/lib.design-system";import{Badge as R}from"@contractspec/lib.ui-kit-web/ui/badge";import{Card as a}from"@contractspec/lib.ui-kit-web/ui/card";import{useCallback as g,useMemo as m}from"react";import{jsx as F,jsxs as J}from"react/jsx-runtime";function Zq({templateId:q,expanded:G=!1,onToggle:K,onLog:H,onOpenEvolution:h}){let{anomalies:w,suggestions:V,loading:f,approveSuggestion:b,rejectSuggestion:L,operationCount:C}=u(q),W=m(()=>V.filter((P)=>P.status==="pending"),[V]),k=m(()=>w.sort((P,B)=>{let A={high:0,medium:1,low:2};return A[P.severity]-A[B.severity]}).slice(0,3),[w]),E=g((P)=>{b(P),H?.(`Approved suggestion ${P.slice(0,8)}`)},[b,H]),O=g((P)=>{L(P),H?.(`Rejected suggestion ${P.slice(0,8)}`)},[L,H]);if(!G)return J("button",{onClick:K,className:"flex items-center gap-2 rounded-lg border border-violet-500/30 bg-violet-500/10 px-3 py-2 text-sm transition hover:bg-violet-500/20",type:"button",children:[F("span",{children:"\uD83E\uDD16"}),F("span",{children:"Evolution"}),W.length>0&&F(R,{variant:"secondary",className:"border-amber-500/30 bg-amber-500/20 text-amber-400",children:W.length}),w.length>0&&W.length===0&&F(R,{variant:"destructive",children:w.length})]});return J(a,{className:"w-80 overflow-hidden",children:[J("div",{className:"flex items-center justify-between border-violet-500/20 border-b bg-violet-500/5 px-3 py-2",children:[J("div",{className:"flex items-center gap-2",children:[F("span",{children:"\uD83E\uDD16"}),F("span",{className:"font-semibold text-sm",children:"Evolution"})]}),J("div",{className:"flex items-center gap-1",children:[h&&F(i,{variant:"ghost",size:"sm",onPress:h,children:"Expand"}),F("button",{onClick:K,className:"p-1 text-muted-foreground hover:text-foreground",type:"button",title:"Collapse",children:"✕"})]})]}),J("div",{className:"max-h-96 overflow-y-auto p-3",children:[J("div",{className:"mb-3 flex items-center justify-between text-xs",children:[J("span",{className:"text-muted-foreground",children:[C," ops tracked"]}),J("div",{className:"flex items-center gap-2",children:[w.length>0&&J(R,{variant:"destructive",children:[w.length," anomalies"]}),W.length>0&&J(R,{variant:"secondary",className:"border-amber-500/30 bg-amber-500/20 text-amber-400",children:[W.length," pending"]})]})]}),f&&F("div",{className:"py-4 text-center text-muted-foreground text-sm",children:"Generating suggestions..."}),k.length>0&&J("div",{className:"mb-4",children:[F("p",{className:"mb-2 font-semibold text-violet-400 text-xs uppercase",children:"Top Issues"}),F("div",{className:"space-y-2",children:k.map((P,B)=>J("div",{className:"rounded border border-amber-500/20 bg-amber-500/5 p-2 text-xs",children:[J("div",{className:"flex items-center gap-2",children:[F("span",{children:P.severity==="high"?"\uD83D\uDD34":P.severity==="medium"?"\uD83D\uDFE0":"\uD83D\uDFE1"}),F("span",{className:"truncate font-medium",children:P.operation.name})]}),F("p",{className:"mt-1 truncate text-muted-foreground",children:P.description})]},`${P.operation.name}-${B}`))})]}),W.length>0&&J("div",{children:[F("p",{className:"mb-2 font-semibold text-violet-400 text-xs uppercase",children:"Pending Suggestions"}),J("div",{className:"space-y-2",children:[W.slice(0,3).map((P)=>F(qq,{suggestion:P,onApprove:E,onReject:O},P.id)),W.length>3&&J("p",{className:"text-center text-muted-foreground text-xs",children:["+",W.length-3," more suggestions"]})]})]}),w.length===0&&W.length===0&&!f&&F("div",{className:"py-4 text-center text-muted-foreground text-xs",children:"No issues detected. Keep coding!"})]}),h&&F("div",{className:"border-violet-500/20 border-t p-2",children:F(i,{variant:"ghost",size:"sm",className:"w-full",onPress:h,children:"Open Evolution Dashboard →"})})]})}function qq({suggestion:q,onApprove:G,onReject:K}){return J("div",{className:"rounded border border-violet-500/20 bg-violet-500/5 p-2",children:[F("div",{className:"flex items-start justify-between gap-2",children:J("div",{className:"min-w-0 flex-1",children:[F("p",{className:"truncate font-medium text-xs",children:q.proposal.summary}),J("div",{className:"mt-1 flex items-center gap-2 text-xs",children:[F(R,{variant:"secondary",children:q.priority}),J("span",{className:"text-muted-foreground",children:[(q.confidence*100).toFixed(0),"%"]})]})]})}),J("div",{className:"mt-2 flex justify-end gap-1",children:[F("button",{onClick:()=>K(q.id),className:"rounded px-2 py-0.5 text-red-400 text-xs hover:bg-red-400/10",type:"button",children:"Reject"}),F("button",{onClick:()=>G(q.id),className:"rounded bg-violet-500/20 px-2 py-0.5 text-violet-400 text-xs hover:bg-violet-500/30",type:"button",children:"Approve"})]})]})}export{Zq as EvolutionSidebar};

package/dist/node/LocalDataIndicator.js

@@ -1,68 +1 @@
-// src/lib/runtime-context.tsx
-import { createContext, useContext } from "react";
-"use client";
-var TEMPLATE_RUNTIME_CONTEXT_KEY = Symbol.for("@contractspec/lib.example-shared-ui/template-runtime-context");
-function getTemplateRuntimeContextSingleton() {
-  const store = globalThis;
-  store[TEMPLATE_RUNTIME_CONTEXT_KEY] ??= createContext(null);
-  return store[TEMPLATE_RUNTIME_CONTEXT_KEY];
-}
-var TemplateRuntimeContext = getTemplateRuntimeContextSingleton();
-function useTemplateRuntime() {
-  const context = useContext(TemplateRuntimeContext);
-  if (!context) {
-    throw new Error("useTemplateRuntime must be used within a TemplateRuntimeProvider");
-  }
-  return context;
-}
-
-// src/LocalDataIndicator.tsx
-import { RefreshCw, Shield } from "lucide-react";
-import { useState } from "react";
-import { jsxDEV } from "react/jsx-dev-runtime";
-"use client";
-function LocalDataIndicator() {
-  const { projectId, templateId, template, installer } = useTemplateRuntime();
-  const [isResetting, setIsResetting] = useState(false);
-  const handleReset = async () => {
-    setIsResetting(true);
-    try {
-      await installer.install(templateId, { projectId });
-    } finally {
-      setIsResetting(false);
-    }
-  };
-  return /* @__PURE__ */ jsxDEV("div", {
-    className: "inline-flex items-center gap-2 rounded-full border border-border bg-muted/40 px-3 py-1 text-muted-foreground text-xs",
-    children: [
-      /* @__PURE__ */ jsxDEV(Shield, {
-        className: "h-3.5 w-3.5 text-violet-400"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("span", {
-        children: [
-          "Local runtime ·",
-          " ",
-          /* @__PURE__ */ jsxDEV("span", {
-            className: "font-semibold text-foreground",
-            children: template.name
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("button", {
-        type: "button",
-        className: "inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 font-semibold text-[11px] text-muted-foreground hover:text-foreground",
-        onClick: handleReset,
-        disabled: isResetting,
-        children: [
-          /* @__PURE__ */ jsxDEV(RefreshCw, {
-            className: "h-3 w-3"
-          }, undefined, false, undefined, this),
-          isResetting ? "Resetting…" : "Reset data"
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-export {
-  LocalDataIndicator
-};
+import{createContext as u,useContext as f}from"react";var n=Symbol.for("@contractspec/lib.example-shared-ui/template-runtime-context");function p(){let e=globalThis;return e[n]??=u(null),e[n]}var c=p();function l(){let e=f(c);if(!e)throw Error("useTemplateRuntime must be used within a TemplateRuntimeProvider");return e}import{RefreshCw as b,Shield as g}from"lucide-react";import{useState as h}from"react";import{jsx as t,jsxs as r}from"react/jsx-runtime";function I(){let{projectId:e,templateId:d,template:s,installer:i}=l(),[a,o]=h(!1),m=async()=>{o(!0);try{await i.install(d,{projectId:e})}finally{o(!1)}};return r("div",{className:"inline-flex items-center gap-2 rounded-full border border-border bg-muted/40 px-3 py-1 text-muted-foreground text-xs",children:[t(g,{className:"h-3.5 w-3.5 text-violet-400"}),r("span",{children:["Local runtime ·"," ",t("span",{className:"font-semibold text-foreground",children:s.name})]}),r("button",{type:"button",className:"inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 font-semibold text-[11px] text-muted-foreground hover:text-foreground",onClick:m,disabled:a,children:[t(b,{className:"h-3 w-3"}),a?"Resetting…":"Reset data"]})]})}export{I as LocalDataIndicator};