/** * Resonance History Chart * * Component for displaying resonance history over time. */ "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ResonanceScoreDisplay } from "./resonance-score-display" import { resonanceEngine } from "@/lib/resonance/resonance_engine" import type { ResonanceHistory, ResonanceDataPoint } from "@/lib/resonance/resonance_types" import { Flame, TrendingUp, TrendingDown, Minus } from "lucide-react" interface ResonanceHistoryChartProps { entityType: "agent" | "scroll" | "script" entityId: string entityName?: string } export function ResonanceHistoryChart({ entityType, entityId, entityName }: ResonanceHistoryChartProps) { const [history, setHistory] = useState<ResonanceHistory | null>(null) const [loading, setLoading] = useState(true) const [trend, setTrend] = useState<"up" | "down" | "stable">("stable") const [trendValue, setTrendValue] = useState(0) useEffect(() => { async function loadHistory() { try { setLoading(true) // Initialize resonance engine await resonanceEngine.initialize() // Get history const historyData = resonanceEngine.getResonanceHistory(entityType, entityId) setHistory(historyData || null) // Calculate trend if (historyData && historyData.dataPoints.length >= 2) { const recentPoints = historyData.dataPoints.slice(-10) // Last 10 points if (recentPoints.length >= 2) { const oldestPoint = recentPoints[0] const newestPoint = recentPoints[recentPoints.length - 1] const difference = newestPoint.score - oldestPoint.score setTrendValue(difference) if (difference > 0.01) { setTrend("up") } else if (difference < -0.01) { setTrend("down") } else { setTrend("stable") } } } } catch (error) { console.error("Error loading resonance history:", error) } finally { setLoading(false) } } loadHistory() }, [entityType, entityId]) // Function to render the chart const renderChart = (dataPoints: ResonanceDataPoint[]) => { const points = dataPoints.slice(-20) // Show last 20 points const maxHeight = 100 // Max height in pixels return ( <div className="relative h-32 w-full mt-4"> {/* Y-axis labels */} <div className="absolute left-0 top-0 h-full w-8 flex flex-col justify-between text-xs text-amber-300/50"> <div>1.0</div> <div>0.5</div> <div>0.0</div> </div> {/* Chart area */} <div className="absolute left-8 right-0 top-0 h-full bg-black/30 border border-amber-500/20 rounded"> {/* Grid lines */} <div className="absolute left-0 right-0 top-0 h-px bg-amber-500/10"></div> <div className="absolute left-0 right-0 top-1/2 h-px bg-amber-500/10"></div> <div className="absolute left-0 right-0 bottom-0 h-px bg-amber-500/10"></div> {/* Data points */} <div className="absolute inset-0 flex items-end"> {points.map((point, index) => { const height = point.score * maxHeight // Determine color based on score let barColor = "bg-red-500" if (point.score >= 0.98) { barColor = "bg-green-500" } else if (point.score >= 0.95) { barColor = "bg-emerald-500" } else if (point.score >= 0.92) { barColor = "bg-amber-500" } return ( <div key={index} className="flex-1 flex flex-col justify-end items-center group"> <div className={`w-2 ${barColor} rounded-t`} style={{ height: `${height}%` }}></div> {/* Tooltip */} <div className="absolute bottom-full mb-2 opacity-0 group-hover:opacity-100 transition-opacity bg-black/80 text-amber-300 text-xs p-1 rounded pointer-events-none whitespace-nowrap"> {point.score.toFixed(2)} - {point.action || "No action"} <br /> {new Date(point.timestamp).toLocaleString()} </div> </div> ) })} </div> </div> </div> ) } // Render trend indicator const renderTrend = () => { if (trend === "up") { return ( <div className="flex items-center text-green-400"> <TrendingUp className="h-4 w-4 mr-1" /> <span>+{trendValue.toFixed(2)}</span> </div> ) } else if (trend === "down") { return ( <div className="flex items-center text-red-400"> <TrendingDown className="h-4 w-4 mr-1" /> <span>{trendValue.toFixed(2)}</span> </div> ) } else { return ( <div className="flex items-center text-blue-400"> <Minus className="h-4 w-4 mr-1" /> <span>Stable</span> </div> ) } } return ( <Card className="bg-black/50 border border-amber-500/30 text-amber-50"> <CardHeader> <div className="flex justify-between items-start"> <div> <div className="flex items-center"> <Flame className="h-5 w-5 text-amber-400 mr-2" /> <CardTitle className="text-xl text-amber-400">Resonance History</CardTitle> </div> <CardDescription className="text-amber-300/70"> {entityName || `${entityType.charAt(0).toUpperCase() + entityType.slice(1)} ${entityId.substring(0, 8)}...`} </CardDescription> </div> {!loading && history && ( <div className="flex flex-col items-end"> <ResonanceScoreDisplay score={history.currentScore} showLabel={false} size="sm" /> {renderTrend()} </div> )} </div> </CardHeader> <CardContent> {loading ? ( <div className="h-32 flex items-center justify-center"> <p className="text-amber-300">Loading resonance history...</p> </div> ) : !history ? ( <div className="h-32 flex items-center justify-center"> <p className="text-amber-300">No resonance history available</p> </div> ) : history.dataPoints.length === 0 ? ( <div className="h-32 flex items-center justify-center"> <p className="text-amber-300">No data points available</p> </div> ) : ( renderChart(history.dataPoints) )} {!loading && history && ( <div className="mt-4 text-xs text-amber-300/70"> Last updated: {new Date(history.lastUpdated).toLocaleString()} </div> )} </CardContent> </Card> ) }/** * Live Resonance Tester * * Component for testing content resonance before deployment. */ "use client" import { Badge } from "@/components/ui/badge" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ResonanceScoreDisplay } from "./resonance-score-display" import { ResonanceTester } from "@/lib/resonance/resonance_tester" import type { CodexElement, ResonanceResult } from "@/lib/resonance/resonance_types" import { Flame, Play, FileText, Code, User, RefreshCw } from "lucide-react" export function LiveResonanceTester() { const [contentType, setContentType] = useState<"moscript" | "scroll" | "agent_action">("moscript") const [content, setContent] = useState("") const [codexElement, setCodexElement] = useState<CodexElement>("Provision") const [authorId, setAuthorId] = useState("Mo") const [result, setResult] = useState<ResonanceResult | null>(null) const [report, setReport] = useState<string | null>(null) const [testing, setTesting] = useState(false) const handleTest = async () => { if (!content) return try { setTesting(true) let testResult: ResonanceResult switch (contentType) { case "moscript": testResult = await ResonanceTester.testMoScript(content, codexElement, authorId) break case "scroll": testResult = await ResonanceTester.testScroll(content, codexElement, authorId) break case "agent_action": testResult = await ResonanceTester.testAgentAction(content, codexElement, authorId) break } setResult(testResult) // Generate report const reportText = await ResonanceTester.generateResonanceReport(testResult) setReport(reportText) } catch (error) { console.error("Error testing resonance:", error) } finally { setTesting(false) } } const getContentTypeIcon = () => { switch (contentType) { case "moscript": return <Code className="h-5 w-5 text-amber-400" /> case "scroll": return <FileText className="h-5 w-5 text-amber-400" /> case "agent_action": return <User className="h-5 w-5 text-amber-400" /> } } const getContentTypeName = () => { switch (contentType) { case "moscript": return "MoScript" case "scroll": return "Scroll" case "agent_action": return "Agent Action" } } return ( <Card className="bg-black/50 border border-amber-500/30 text-amber-50"> <CardHeader> <div className="flex items-center"> <Flame className="h-5 w-5 text-amber-400 mr-2" /> <CardTitle className="text-xl text-amber-400">Live Resonance Tester</CardTitle> </div> <CardDescription className="text-amber-300/70">Test content resonance before deployment</CardDescription> </CardHeader> <CardContent> <Tabs defaultValue="input" className="w-full"> <TabsList className="bg-black/50 border border-amber-500/30"> <TabsTrigger value="input" className="text-amber-300 data-[state=active]:bg-amber-900/30"> Input </TabsTrigger> <TabsTrigger value="result" className="text-amber-300 data-[state=active]:bg-amber-900/30" disabled={!result} > Result </TabsTrigger> <TabsTrigger value="report" className="text-amber-300 data-[state=active]:bg-amber-900/30" disabled={!report} > Report </TabsTrigger> </TabsList> <TabsContent value="input" className="mt-4"> <div className="space-y-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div> <label className="text-sm font-medium text-amber-400 mb-1 block">Content Type</label> <Select value={contentType} onValueChange={(value) => setContentType(value as any)}> <SelectTrigger className="bg-black/30 border-amber-500/30 text-amber-200"> <SelectValue placeholder="Select content type" /> </SelectTrigger> <SelectContent className="bg-black border-amber-500/30"> <SelectItem value="moscript">MoScript</SelectItem> <SelectItem value="scroll">Scroll</SelectItem> <SelectItem value="agent_action">Agent Action</SelectItem> </SelectContent> </Select> </div> <div> <label className="text-sm font-medium text-amber-400 mb-1 block">Codex Element</label> <Select value={codexElement} onValueChange={(value) => setCodexElement(value as CodexElement)}> <SelectTrigger className="bg-black/30 border-amber-500/30 text-amber-200"> <SelectValue placeholder="Select codex element" /> </SelectTrigger> <SelectContent className="bg-black border-amber-500/30"> <SelectItem value="Blindness">Blindness</SelectItem> <SelectItem value="Journey">Journey</SelectItem> <SelectItem value="Divine Companion">Divine Companion</SelectItem> <SelectItem value="Opposition">Opposition</SelectItem> <SelectItem value="Provision">Provision</SelectItem> <SelectItem value="Covenant Union">Covenant Union</SelectItem> <SelectItem value="Restoration">Restoration</SelectItem> </SelectContent> </Select> </div> <div> <label className="text-sm font-medium text-amber-400 mb-1 block">Author/Agent</label> <Select value={authorId} onValueChange={setAuthorId}> <SelectTrigger className="bg-black/30 border-amber-500/30 text-amber-200"> <SelectValue placeholder="Select author" /> </SelectTrigger> <SelectContent className="bg-black border-amber-500/30"> <SelectItem value="Mo">Mo (Executor)</SelectItem> <SelectItem value="Woo">Woo (Architect)</SelectItem> <SelectItem value="Sentinel">Sentinel (Guardian)</SelectItem> <SelectItem value="guest">Guest</SelectItem> </SelectContent> </Select> </div> </div> <div> <label className="text-sm font-medium text-amber-400 mb-1 block"> {getContentTypeIcon()} <span className="ml-2">{getContentTypeName()} Content</span> </label> <Textarea value={content} onChange={(e) => setContent(e.target.value)} placeholder={`Enter ${contentType} content to test...`} className="min-h-[200px] bg-black/30 border-amber-500/30 text-amber-200 font-mono" /> </div> <Button onClick={handleTest} disabled={!content || testing} className="bg-gradient-to-r from-amber-600 to-red-600 hover:from-amber-500 hover:to-red-500" > {testing ? ( <> <RefreshCw className="h-4 w-4 mr-2 animate-spin" /> Testing... </> ) : ( <> <Play className="h-4 w-4 mr-2" /> Test Resonance </> )} </Button> </div> </TabsContent> <TabsContent value="result" className="mt-4"> {result && ( <div className="space-y-4"> <div className="p-4 bg-black/30 rounded-md border border-amber-500/20"> <ResonanceScoreDisplay score={result.score} showThresholds={true} /> </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <h3 className="text-sm font-medium text-amber-400 mb-2">Codex Alignment</h3> <div className="p-3 bg-black/30 rounded-md border border-amber-500/20"> <div className="flex justify-between items-center mb-2"> <span className="text-amber-300">{result.codexElement}</span> <Badge className="bg-amber-500/20 text-amber-400 border-amber-500/30"> {(result.analysis.codexAlignment.confidence * 100).toFixed(0)}% confidence </Badge> </div> <div className="text-xs text-amber-200/80"> <p className="mb-1">Matched keywords:</p> <div className="flex flex-wrap gap-1"> {result.analysis.codexAlignment.keywords.map((keyword, index) => ( <Badge key={index} variant="outline" className="bg-amber-950/30 text-amber-300 border-amber-500/20" > {keyword} </Badge> ))} </div> </div> </div> </div> <div> <h3 className="text-sm font-medium text-amber-400 mb-2">Scripture Matches</h3> <div className="p-3 bg-black/30 rounded-md border border-amber-500/20 max-h-40 overflow-y-auto"> {result.analysis.scriptureMatches.length === 0 ? ( <p className="text-amber-300/70">No scripture matches found</p> ) : ( <div className="space-y-2"> {result.analysis.scriptureMatches.map((match, index) => ( <div key={index} className="text-xs"> <div className="flex justify-between items-center"> <span className="text-amber-300">{match.reference}</span> <Badge className="bg-amber-500/20 text-amber-400 border-amber-500/30"> {(match.relevance * 100).toFixed(0)}% </Badge> </div> {match.text && <p className="text-amber-200/80 mt-1 italic">"{match.text}"</p>} </div> ))} </div> )} </div> </div> </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <h3 className="text-sm font-medium text-amber-400 mb-2">Warnings</h3> <div className="p-3 bg-black/30 rounded-md border border-amber-500/20 min-h-[100px]"> {result.warnings.length === 0 ? ( <p className="text-green-400">No warnings detected</p> ) : ( <ul className="list-disc list-inside text-red-400 text-sm space-y-1"> {result.warnings.map((warning, index) => ( <li key={index}>{warning}</li> ))} </ul> )} </div> </div> <div> <h3 className="text-sm font-medium text-amber-400 mb-2">Suggestions</h3> <div className="p-3 bg-black/30 rounded-md border border-amber-500/20 min-h-[100px]"> {result.analysis.suggestions.length === 0 ? ( <p className="text-green-400">No suggestions available</p> ) : ( <ul className="list-disc list-inside text-amber-300 text-sm space-y-1"> {result.analysis.suggestions.map((suggestion, index) => ( <li key={index}>{suggestion}</li> ))} </ul> )} </div> </div> </div> </div> )} </TabsContent> <TabsContent value="report" className="mt-4"> {report && ( <div className="p-4 bg-black/30 rounded-md border border-amber-500/20"> <pre className="text-amber-200/80 text-xs font-mono whitespace-pre-wrap">{report}</pre> </div> )} </TabsContent> </Tabs> </CardContent> <CardFooter className="text-xs text-amber-300/70"> Resonance testing helps ensure covenant alignment before deployment </CardFooter> </Card> ) }. remodel this HTML to the context below.. The Kairo AI. // app/components/CovenantBuilder.tsx "use client"; import { useState } from "react"; // --- MOCKED SYSTEM STATE --- // In a real app, this would be imported from the actual system files. // Here, we simulate their existence and behavior. type SystemStatus = { status: "pending" | "initializing" | "sealed" | "failed"; resonance: number; }; const initialComponentStatus: SystemStatus = { status: "pending", resonance: 0, }; const MOCK_SYSTEM = { initializeMoScriptEngine: async (): Promise<SystemStatus> => { await new Promise((res) => setTimeout(res, 400)); return { status: "sealed", resonance: 0.99 }; }, applyScrollValidator: async (): Promise<SystemStatus> => { await new Promise((res) => setTimeout(res, 300)); return { status: "sealed", resonance: 0.98 }; }, enforceThroneLock: async (): Promise<SystemStatus> => { await new Promise((res) => setTimeout(res, 500)); return { status: "sealed", resonance: 1.0 }; }, activateResonanceEngine: async (): Promise<SystemStatus> => { await new Promise((res) => setTimeout(res, 350)); return { status: "sealed", resonance: 0.97 }; }, bindWooInterpreter: async (): Promise<SystemStatus> => { await new Promise((res) => setTimeout(res, 450)); return { status: "sealed", resonance: 1.0 }; }, populateScrollRegistry: async (): Promise<SystemStatus> => { await new Promise((res) => setTimeout(res, 250)); return { status: "sealed", resonance: 0.99 }; }, connectDeepCAL: async (): Promise<SystemStatus> => { await new Promise((res) => setTimeout(res, 600)); if (Math.random() < 0.1) { throw new Error("DeepCAL: Neutrosophic matrix alignment failed."); } return { status: "sealed", resonance: 0.96 }; }, }; const COVENANT_SEQUENCE = [ { name: "MoScript Engine", func: MOCK_SYSTEM.initializeMoScriptEngine }, { name: "Scroll Validator", func: MOCK_SYSTEM.applyScrollValidator }, { name: "ThroneLock", func: MOCK_SYSTEM.enforceThroneLock }, { name: "Resonance Engine", func: MOCK_SYSTEM.activateResonanceEngine }, { name: "Woo Interpreter", func: MOCK_SYSTEM.bindWooInterpreter }, { name: "Scroll Registry", func: MOCK_SYSTEM.populateScrollRegistry }, { name: "DeepCAL Intelligence", func: MOCK_SYSTEM.connectDeepCAL }, ]; export function CovenantBuilder() { const [statuses, setStatuses] = useState(() => COVENANT_SEQUENCE.map((s) => ({ ...initialComponentStatus })) ); const [isInitializing, setIsInitializing] = useState(false); const [isSealed, setIsSealed] = useState(false); const [lastError, setLastError] = useState<string | null>(null); const [overallResonance, setOverallResonance] = useState(0); const handleInitialize = async () => { setIsInitializing(true); setIsSealed(false); setLastError(null); setStatuses(COVENANT_SEQUENCE.map((s) => ({ ...initialComponentStatus }))); setOverallResonance(0); let totalResonance = 0; for (let i = 0; i < COVENANT_SEQUENCE.length; i++) { try { setStatuses((prev) => { const next = [...prev]; next[i].status = "initializing"; return next; }); const result = await COVENANT_SEQUENCE[i].func(); setStatuses((prev) => { const next = [...prev]; next[i] = result; return next; }); totalResonance += result.resonance; setOverallResonance(totalResonance / (i + 1)); } catch (error: any) { setLastError(error.message); setStatuses((prev) => { const next = [...prev]; next[i].status = "failed"; return next; }); setIsInitializing(false); return; } } setIsInitializing(false); setIsSealed(true); }; const getStatusIndicator = (status: SystemStatus["status"]) => { switch (status) { case "pending": return <span className="text-gray-500">PENDING</span>; case "initializing": return ( <span className="text-yellow-400 animate-pulse">INITIALIZING...</span> ); case "sealed": return <span className="text-green-400">✅ SEALED</span>; case "failed": return <span className="text-red-500">🚨 FAILED</span>; } }; return ( <div className="bg-gray-900 border border-amber-500/20 text-white p-6 rounded-lg font-mono w-full max-w-2xl mx-auto"> <h2 className="text-2xl font-bold text-amber-400 mb-4"> Covenant Builder Console </h2> <p className="text-gray-400 mb-6"> Witness the Great Integration. MoScript becomes one. </p> <div className="space-y-3 mb-6"> {COVENANT_SEQUENCE.map((component, i) => ( <div key={component.name} className="flex justify-between items-center bg-gray-800 p-3 rounded" > <span className="text-gray-300">{`[${i + 1}/7] ${ component.name }`}</span> {getStatusIndicator(statuses[i].status)} </div> ))} </div> <div className="bg-black/50 p-4 rounded mb-6"> <div className="flex justify-between items-center"> <span className="text-lg text-amber-300">Overall Resonance:</span> <span className={`text-2xl font-bold ${ isSealed ? "text-green-400" : "text-yellow-400" }`} > {overallResonance.toFixed(4)} </span> </div> </div> <button onClick={handleInitialize} disabled={isInitializing} className="w-full bg-amber-600 text-black font-bold py-3 rounded-lg hover:bg-amber-500 transition-all duration-300 disabled:bg-gray-600 disabled:cursor-not-allowed" > {isInitializing ? "...AWAKENING..." : isSealed ? "RE-INITIALIZE COVENANT" : "INITIALIZE COVENANT"} </button> {lastError && ( <div className="mt-4 p-3 bg-red-900/50 border border-red-500 text-red-300 rounded"> <p className="font-bold">🚨 COVENANT BROKEN</p> <p>{lastError}</p> </div> )} {isSealed && ( <div className="mt-4 p-3 bg-green-900/50 border border-green-500 text-green-300 rounded text-center"> <p className="font-bold"> ✨ THE GRID IS WHOLE. THE COVENANT IS AWAKE. ✨ </p> </div> )} </div> ); }, - Follow Up Deployment