@paradiselabs/mco-protocol
Version:
MCO (Model Configuration Orchestration) MCP Server & Configuration Tool
463 lines (402 loc) • 15.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCO Progressive Revelation Animation</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
.container {
max-width: 900px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 20px;
position: relative;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.animation-container {
position: relative;
height: 500px;
border: 1px solid #ddd;
border-radius: 6px;
overflow: hidden;
margin-bottom: 20px;
}
.agent {
position: absolute;
width: 80px;
height: 80px;
background-color: #3498db;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
font-size: 18px;
z-index: 10;
transition: left 1.5s ease-in-out, top 1.5s ease-in-out;
left: 50px;
top: 210px;
}
.step {
position: absolute;
width: 120px;
height: 60px;
background-color: #2ecc71;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
z-index: 5;
}
.step-1 {
left: 150px;
top: 220px;
}
.step-2 {
left: 300px;
top: 220px;
}
.step-3 {
left: 450px;
top: 220px;
}
.step-4 {
left: 600px;
top: 220px;
}
.step-5 {
left: 750px;
top: 220px;
}
.context-container {
position: absolute;
width: 100%;
height: 180px;
top: 20px;
display: flex;
justify-content: center;
gap: 20px;
}
.context-box {
width: 180px;
height: 160px;
border-radius: 8px;
padding: 15px;
box-sizing: border-box;
color: white;
font-size: 14px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.core {
background-color: #e74c3c;
}
.sc {
background-color: #9b59b6;
}
.features {
background-color: #f39c12;
}
.styles {
background-color: #16a085;
}
.injection-container {
position: absolute;
width: 100%;
height: 180px;
bottom: 20px;
display: flex;
justify-content: center;
gap: 20px;
}
.injection {
width: 180px;
height: 160px;
border-radius: 8px;
padding: 15px;
box-sizing: border-box;
color: white;
font-size: 14px;
opacity: 0;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
transform: translateY(50px);
}
.injection.active {
opacity: 1;
transform: translateY(0);
}
.arrow {
position: absolute;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 20px solid #f39c12;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.arrow-features {
left: 50%;
bottom: 200px;
transform: translateX(-100px);
}
.arrow-styles {
left: 50%;
bottom: 200px;
transform: translateX(70px);
border-bottom-color: #16a085;
}
.controls {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
.status {
text-align: center;
margin-top: 20px;
font-size: 18px;
color: #555;
}
.legend {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.legend-item {
display: flex;
align-items: center;
gap: 5px;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>MCO Progressive Revelation Workflow</h1>
<div class="animation-container">
<div class="context-container">
<div class="context-box core" id="core-box">
<strong>mco.core</strong><br>
Workflow definition<br>
Data variables<br>
Agent steps<br>
<small>Always in persistent memory</small>
</div>
<div class="context-box sc" id="sc-box">
<strong>mco.sc</strong><br>
Goal<br>
Success criteria<br>
Target audience<br>
<small>Always in persistent memory</small>
</div>
<div class="context-box features" id="features-box">
<strong>mco.features</strong><br>
Implementation details<br>
Additional functionality<br>
<small>Injected during implementation steps</small>
</div>
<div class="context-box styles" id="styles-box">
<strong>mco.styles</strong><br>
Formatting preferences<br>
Presentation guidelines<br>
<small>Injected during formatting steps</small>
</div>
</div>
<div class="step step-1">Research</div>
<div class="step step-2">Analyze</div>
<div class="step step-3">Implement</div>
<div class="step step-4">Format</div>
<div class="step step-5">Finalize</div>
<div class="agent" id="agent">Agent</div>
<div class="injection-container">
<div class="injection features" id="features-injection">
<strong>Features Injection</strong><br>
- Data visualizations<br>
- Executive summary<br>
- Comparative analysis<br>
<small>Injected at step 3</small>
</div>
<div class="injection styles" id="styles-injection">
<strong>Styles Injection</strong><br>
- Professional tone<br>
- Clear headings<br>
- Consistent formatting<br>
<small>Injected at step 4</small>
</div>
</div>
<div class="arrow arrow-features" id="arrow-features"></div>
<div class="arrow arrow-styles" id="arrow-styles"></div>
</div>
<div class="legend">
<div class="legend-item">
<div class="legend-color" style="background-color: #e74c3c;"></div>
<span>mco.core</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #9b59b6;"></div>
<span>mco.sc</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #f39c12;"></div>
<span>mco.features</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #16a085;"></div>
<span>mco.styles</span>
</div>
</div>
<div class="status" id="status">Workflow starting...</div>
<div class="controls">
<button id="play-btn">Play Animation</button>
<button id="reset-btn">Reset</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const agent = document.getElementById('agent');
const coreBox = document.getElementById('core-box');
const scBox = document.getElementById('sc-box');
const featuresBox = document.getElementById('features-box');
const stylesBox = document.getElementById('styles-box');
const featuresInjection = document.getElementById('features-injection');
const stylesInjection = document.getElementById('styles-injection');
const arrowFeatures = document.getElementById('arrow-features');
const arrowStyles = document.getElementById('arrow-styles');
const statusText = document.getElementById('status');
const playBtn = document.getElementById('play-btn');
const resetBtn = document.getElementById('reset-btn');
let animationRunning = false;
let animationTimeout;
// Step positions
const steps = [
{ left: 150, top: 210 }, // Research
{ left: 300, top: 210 }, // Analyze
{ left: 450, top: 210 }, // Implement
{ left: 600, top: 210 }, // Format
{ left: 750, top: 210 } // Finalize
];
// Status messages
const statusMessages = [
"Starting workflow with persistent context...",
"Step 1: Researching with core and sc in context",
"Step 2: Analyzing findings with persistent context",
"Step 3: Implementing with features injected",
"Step 4: Formatting with styles injected",
"Step 5: Finalizing with complete context"
];
function resetAnimation() {
clearTimeout(animationTimeout);
animationRunning = false;
// Reset agent position
agent.style.left = '50px';
agent.style.top = '210px';
// Reset context boxes
coreBox.style.opacity = '0';
scBox.style.opacity = '0';
featuresBox.style.opacity = '0';
stylesBox.style.opacity = '0';
// Reset injections
featuresInjection.classList.remove('active');
stylesInjection.classList.remove('active');
// Reset arrows
arrowFeatures.style.opacity = '0';
arrowStyles.style.opacity = '0';
// Reset status
statusText.textContent = "Workflow starting...";
// Reset button
playBtn.textContent = "Play Animation";
}
function runAnimation() {
if (animationRunning) {
resetAnimation();
return;
}
animationRunning = true;
playBtn.textContent = "Stop Animation";
// Start animation sequence
// Show persistent context
setTimeout(() => {
coreBox.style.opacity = '1';
scBox.style.opacity = '1';
statusText.textContent = statusMessages[0];
}, 500);
// Step 1: Research
animationTimeout = setTimeout(() => {
agent.style.left = steps[0].left + 'px';
statusText.textContent = statusMessages[1];
}, 2000);
// Step 2: Analyze
animationTimeout = setTimeout(() => {
agent.style.left = steps[1].left + 'px';
statusText.textContent = statusMessages[2];
}, 4000);
// Step 3: Implement with features injection
animationTimeout = setTimeout(() => {
agent.style.left = steps[2].left + 'px';
featuresBox.style.opacity = '1';
arrowFeatures.style.opacity = '1';
featuresInjection.classList.add('active');
statusText.textContent = statusMessages[3];
}, 6000);
// Step 4: Format with styles injection
animationTimeout = setTimeout(() => {
agent.style.left = steps[3].left + 'px';
stylesBox.style.opacity = '1';
arrowStyles.style.opacity = '1';
stylesInjection.classList.add('active');
statusText.textContent = statusMessages[4];
}, 8000);
// Step 5: Finalize
animationTimeout = setTimeout(() => {
agent.style.left = steps[4].left + 'px';
statusText.textContent = statusMessages[5];
}, 10000);
// Reset after complete animation
animationTimeout = setTimeout(() => {
resetAnimation();
}, 12000);
}
// Event listeners
playBtn.addEventListener('click', runAnimation);
resetBtn.addEventListener('click', resetAnimation);
// Initial reset
resetAnimation();
});
</script>
</body>
</html>