claude-flow
Version:
Enterprise-grade AI agent orchestration with ruv-swarm integration (Alpha Release)
521 lines (462 loc) • 17.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claude Flow - Advanced Workflow Designer</title>
<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Workflow Designer CSS -->
<link rel="stylesheet" href="styles/workflow-designer.css">
<style>
/* Demo-specific styles */
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f5f5f5;
}
.demo-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.demo-header h1 {
margin: 0;
font-size: 32px;
font-weight: 700;
}
.demo-header p {
margin: 8px 0 0 0;
font-size: 16px;
opacity: 0.9;
}
.demo-features {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 15px;
}
.demo-feature {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
background: rgba(255,255,255,0.1);
padding: 8px 16px;
border-radius: 20px;
}
.demo-controls {
background: white;
padding: 15px 20px;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.demo-info {
display: flex;
align-items: center;
gap: 20px;
color: #666;
}
.demo-info span {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
}
.demo-actions {
display: flex;
gap: 12px;
}
.demo-btn {
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.demo-btn-primary {
background: #2196f3;
color: white;
}
.demo-btn-primary:hover {
background: #1976d2;
transform: translateY(-1px);
}
.demo-btn-secondary {
background: #f5f5f5;
color: #666;
border: 1px solid #ddd;
}
.demo-btn-secondary:hover {
background: #e9ecef;
border-color: #bbb;
}
.quick-start {
position: fixed;
bottom: 20px;
right: 20px;
background: white;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
max-width: 300px;
z-index: 1000;
}
.quick-start h3 {
margin: 0 0 12px 0;
font-size: 16px;
color: #333;
}
.quick-start ul {
margin: 0;
padding-left: 20px;
font-size: 14px;
color: #666;
}
.quick-start li {
margin-bottom: 6px;
}
.quick-start-close {
position: absolute;
top: 8px;
right: 8px;
background: none;
border: none;
font-size: 16px;
cursor: pointer;
color: #999;
}
.status-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
}
.status-ready {
background: #4caf50;
}
.status-loading {
background: #ff9800;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
@media (max-width: 768px) {
.demo-features {
flex-direction: column;
gap: 10px;
}
.demo-controls {
flex-direction: column;
gap: 15px;
}
.demo-info {
flex-direction: column;
gap: 10px;
}
.quick-start {
bottom: 10px;
right: 10px;
left: 10px;
max-width: none;
}
}
</style>
</head>
<body>
<div class="demo-header">
<h1><i class="fas fa-sitemap"></i> Claude Flow Workflow Designer</h1>
<p>Advanced Visual Workflow Builder with AI Integration</p>
<div class="demo-features">
<div class="demo-feature">
<i class="fas fa-mouse-pointer"></i>
<span>Drag & Drop</span>
</div>
<div class="demo-feature">
<i class="fas fa-brain"></i>
<span>AI Operations</span>
</div>
<div class="demo-feature">
<i class="fas fa-play"></i>
<span>Real-time Execution</span>
</div>
<div class="demo-feature">
<i class="fas fa-check-circle"></i>
<span>Validation</span>
</div>
</div>
</div>
<div class="demo-controls">
<div class="demo-info">
<span>
<span class="status-indicator status-ready"></span>
Designer Ready
</span>
<span>
<i class="fas fa-info-circle"></i>
Drag components from the palette to build workflows
</span>
<span>
<i class="fas fa-keyboard"></i>
Use templates to get started quickly
</span>
</div>
<div class="demo-actions">
<button class="demo-btn demo-btn-primary" onclick="loadSampleWorkflow()">
<i class="fas fa-download"></i>
Load Sample
</button>
<button class="demo-btn demo-btn-secondary" onclick="showHelp()">
<i class="fas fa-question-circle"></i>
Help
</button>
</div>
</div>
<!-- Main Workflow Designer Container -->
<div id="workflowDesigner"></div>
<!-- Quick Start Guide -->
<div class="quick-start" id="quickStart">
<button class="quick-start-close" onclick="closeQuickStart()">×</button>
<h3><i class="fas fa-rocket"></i> Quick Start</h3>
<ul>
<li><strong>Drag</strong> components from the left palette</li>
<li><strong>Drop</strong> them onto the canvas</li>
<li><strong>Connect</strong> nodes by dragging between ports</li>
<li><strong>Configure</strong> properties in the right panel</li>
<li><strong>Validate</strong> your workflow</li>
<li><strong>Execute</strong> to see results</li>
</ul>
</div>
<!-- Workflow Designer JavaScript -->
<script src="js/workflow-designer.js"></script>
<!-- Demo-specific JavaScript -->
<script>
// Initialize the workflow designer
let designer;
document.addEventListener('DOMContentLoaded', function() {
designer = new WorkflowDesigner('workflowDesigner');
// Auto-close quick start after 10 seconds
setTimeout(() => {
const quickStart = document.getElementById('quickStart');
if (quickStart) {
quickStart.style.display = 'none';
}
}, 10000);
});
// Demo functions
function loadSampleWorkflow() {
if (!designer) return;
// Clear existing workflow
designer.clearCanvas();
// Create a sample AI content processing workflow
const fileInput = designer.createNode('file-input', 100, 150);
const aiAnalyze = designer.createNode('ai-analyze', 300, 150);
const condition = designer.createNode('condition', 500, 150);
const aiGenerate = designer.createNode('ai-generate', 700, 100);
const aiSummarize = designer.createNode('ai-summarize', 700, 200);
const display = designer.createNode('display', 900, 150);
// Configure properties
fileInput.properties.path = '/path/to/input.txt';
aiAnalyze.properties.model = 'gpt-4';
aiAnalyze.properties.temperature = 0.7;
condition.properties.expression = 'data.confidence > 0.8';
aiGenerate.properties.model = 'gpt-4';
aiGenerate.properties.prompt = 'Generate detailed analysis based on: {{data}}';
aiSummarize.properties.model = 'gpt-4';
aiSummarize.properties.length = 'short';
display.properties.format = 'json';
display.properties.title = 'AI Analysis Results';
// Create connections
designer.createConnection(
{ node: fileInput, type: 'output', index: 0 },
{ node: aiAnalyze, type: 'input', index: 0 }
);
designer.createConnection(
{ node: aiAnalyze, type: 'output', index: 0 },
{ node: condition, type: 'input', index: 1 }
);
designer.createConnection(
{ node: condition, type: 'output', index: 0 },
{ node: aiGenerate, type: 'input', index: 0 }
);
designer.createConnection(
{ node: condition, type: 'output', index: 1 },
{ node: aiSummarize, type: 'input', index: 0 }
);
designer.createConnection(
{ node: aiGenerate, type: 'output', index: 0 },
{ node: display, type: 'input', index: 0 }
);
designer.createConnection(
{ node: aiSummarize, type: 'output', index: 0 },
{ node: display, type: 'input', index: 0 }
);
// Update display
designer.draw();
// Show notification
showNotification('Sample AI workflow loaded successfully!', 'success');
}
function showHelp() {
const helpContent = `
<h3>Workflow Designer Help</h3>
<h4>Components:</h4>
<ul>
<li><strong>Input:</strong> File Input, Text Input, URL Input, API Input</li>
<li><strong>Processing:</strong> Transform, Filter, Aggregate, Sort</li>
<li><strong>Output:</strong> File Output, Display, API Output, Notification</li>
<li><strong>Control:</strong> Condition, Loop, Delay, Parallel</li>
<li><strong>AI:</strong> AI Analyze, AI Generate, AI Classify, AI Summarize</li>
</ul>
<h4>Actions:</h4>
<ul>
<li><strong>Add Node:</strong> Drag from palette to canvas</li>
<li><strong>Connect Nodes:</strong> Drag from output port to input port</li>
<li><strong>Configure:</strong> Select node to edit properties</li>
<li><strong>Validate:</strong> Check workflow for errors</li>
<li><strong>Execute:</strong> Run the workflow</li>
</ul>
<h4>Keyboard Shortcuts:</h4>
<ul>
<li><strong>Delete:</strong> Remove selected node</li>
<li><strong>Ctrl+S:</strong> Save workflow</li>
<li><strong>Ctrl+Z:</strong> Undo last action</li>
<li><strong>Space:</strong> Pan canvas</li>
</ul>
`;
showModal('Help', helpContent);
}
function closeQuickStart() {
document.getElementById('quickStart').style.display = 'none';
}
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.className = `notification notification-${type}`;
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: ${type === 'success' ? '#4caf50' : type === 'error' ? '#f44336' : '#2196f3'};
color: white;
padding: 12px 16px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 10000;
opacity: 0;
transform: translateX(100%);
transition: all 0.3s ease;
`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.opacity = '1';
notification.style.transform = 'translateX(0)';
}, 100);
setTimeout(() => {
notification.style.opacity = '0';
notification.style.transform = 'translateX(100%)';
setTimeout(() => document.body.removeChild(notification), 300);
}, 3000);
}
function showModal(title, content) {
const modal = document.createElement('div');
modal.style.cssText = `
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
`;
const modalContent = document.createElement('div');
modalContent.style.cssText = `
background: white;
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
border-radius: 8px;
padding: 24px;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
`;
modalContent.innerHTML = `
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
<h2 style="margin: 0; color: #333;">${title}</h2>
<button onclick="this.closest('.modal').remove()" style="background: none; border: none; font-size: 24px; cursor: pointer; color: #666;">×</button>
</div>
<div style="color: #666; line-height: 1.6;">${content}</div>
`;
modal.className = 'modal';
modal.appendChild(modalContent);
document.body.appendChild(modal);
// Close on background click
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.remove();
}
});
}
// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.key === 's') {
e.preventDefault();
if (designer) {
designer.saveWorkflow();
}
} else if (e.key === 'Delete') {
if (designer && designer.selectedNode) {
designer.deleteNode(designer.selectedNode);
}
} else if (e.key === 'F1') {
e.preventDefault();
showHelp();
}
});
// Auto-save to localStorage every 30 seconds
setInterval(() => {
if (designer && designer.nodes.size > 0) {
const workflow = {
nodes: Array.from(designer.nodes.values()),
connections: Array.from(designer.connections.values()),
metadata: {
autoSaved: new Date().toISOString()
}
};
localStorage.setItem('claudeflow_autosave', JSON.stringify(workflow));
}
}, 30000);
// Load auto-saved workflow on page load
window.addEventListener('load', () => {
const autosaved = localStorage.getItem('claudeflow_autosave');
if (autosaved && confirm('Auto-saved workflow found. Load it?')) {
try {
const workflow = JSON.parse(autosaved);
designer.loadWorkflowData(workflow);
showNotification('Auto-saved workflow loaded', 'success');
} catch (e) {
console.error('Error loading auto-saved workflow:', e);
}
}
});
</script>
</body>
</html>