@contractspec/lib.example-shared-ui 1.10.1 → 1.12.0

package/dist/node/EvolutionSidebar.js

@@ -0,0 +1,531 @@
+// 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 { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { Button } 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 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-b border-violet-500/20 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: "text-sm font-semibold",
+                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: "text-muted-foreground hover:text-foreground p-1",
+                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: "text-muted-foreground py-4 text-center 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 text-xs font-semibold text-violet-400 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: "text-muted-foreground mt-1 truncate",
+                      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 text-xs font-semibold text-violet-400 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-muted-foreground text-center 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: "text-muted-foreground py-4 text-center text-xs",
+            children: "No issues detected. Keep coding!"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      onOpenEvolution && /* @__PURE__ */ jsxDEV("div", {
+        className: "border-t border-violet-500/20 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 text-xs font-medium",
+              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-xs text-red-400 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-xs text-violet-400 hover:bg-violet-500/30",
+            type: "button",
+            children: "Approve"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  EvolutionSidebar
+};

package/dist/node/LocalDataIndicator.js

@@ -0,0 +1,62 @@
+// src/lib/runtime-context.tsx
+import { createContext, useContext } from "react";
+"use client";
+var TemplateRuntimeContext = createContext(null);
+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: "border-border bg-muted/40 text-muted-foreground inline-flex items-center gap-2 rounded-full border px-3 py-1 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: "text-foreground font-semibold",
+            children: template.name
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("button", {
+        type: "button",
+        className: "border-border text-muted-foreground hover:text-foreground inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-semibold",
+        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
+};