agentic-flow 1.8.15 → 1.9.0

package/src/components/Features.tsx

@@ -0,0 +1,102 @@
+import { Zap, Brain, DollarSign, TrendingUp, Shield, Layers } from 'lucide-react';
+
+const features = [
+  {
+    icon: Zap,
+    title: 'Agent Booster',
+    description: '352x faster code operations via Rust/WASM. Transform code at blazing speed with zero cost.',
+    metric: '352ms → 1ms',
+    color: 'secondary',
+  },
+  {
+    icon: Brain,
+    title: 'ReasoningBank',
+    description: 'Persistent learning memory system. Agents remember patterns and improve with every task.',
+    metric: '46% faster execution',
+    color: 'primary',
+  },
+  {
+    icon: Layers,
+    title: 'AgentDB',
+    description: 'State-of-the-art memory with causal reasoning, reflexion, and skill learning.',
+    metric: 'p95 < 50ms',
+    color: 'accent',
+  },
+  {
+    icon: DollarSign,
+    title: 'Multi-Model Router',
+    description: 'Intelligent cost optimization across 100+ LLMs. Auto-select optimal models.',
+    metric: '85-99% cost savings',
+    color: 'secondary',
+  },
+  {
+    icon: TrendingUp,
+    title: 'QUIC Transport',
+    description: 'Ultra-low latency agent communication via Rust/WASM QUIC protocol.',
+    metric: '50-70% faster',
+    color: 'primary',
+  },
+  {
+    icon: Shield,
+    title: 'Production Ready',
+    description: 'Docker deployment, Kubernetes support, and comprehensive monitoring built-in.',
+    metric: '100% reliable',
+    color: 'accent',
+  },
+];
+
+const colorClasses = {
+  primary: 'text-primary border-primary/30 bg-primary/5',
+  secondary: 'text-secondary border-secondary/30 bg-secondary/5',
+  accent: 'text-accent border-accent/30 bg-accent/5',
+};
+
+const Features = () => {
+  return (
+    <section className="py-24 px-6 relative">
+      <div className="container mx-auto max-w-7xl">
+        <div className="text-center mb-16 animate-fade-in">
+          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+            <span className="text-gradient">Core Features</span>
+          </h2>
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+            Built with cutting-edge technology to deliver unmatched performance and intelligence
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {features.map((feature, index) => {
+            const Icon = feature.icon;
+            const colorClass = colorClasses[feature.color as keyof typeof colorClasses];
+            
+            return (
+              <div
+                key={index}
+                className="bg-card border border-border rounded-2xl p-8 hover:shadow-glow transition-smooth hover:scale-105 animate-fade-in"
+                style={{ animationDelay: `${index * 100}ms` }}
+              >
+                <div className={`w-14 h-14 rounded-xl flex items-center justify-center mb-6 ${colorClass} border`}>
+                  <Icon className="w-7 h-7" />
+                </div>
+                
+                <h3 className="text-2xl font-bold mb-3 text-foreground">
+                  {feature.title}
+                </h3>
+                
+                <p className="text-muted-foreground mb-4 leading-relaxed">
+                  {feature.description}
+                </p>
+                
+                <div className={`inline-block px-4 py-2 rounded-full text-sm font-semibold ${colorClass} border`}>
+                  {feature.metric}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Features;

package/src/components/Footer.tsx

@@ -0,0 +1,159 @@
+import { Github, Book, Package, Twitter, ExternalLink } from 'lucide-react';
+
+const links = {
+  documentation: [
+    { name: 'Getting Started', url: '#' },
+    { name: 'API Reference', url: '#' },
+    { name: 'Agent Guide', url: '#' },
+    { name: 'Examples', url: '#' },
+  ],
+  resources: [
+    { name: 'GitHub', url: 'https://github.com/ruvnet/agentic-flow', icon: Github },
+    { name: 'npm Package', url: 'https://www.npmjs.com/package/agentic-flow', icon: Package },
+    { name: 'Documentation', url: 'https://github.com/ruvnet/agentic-flow/tree/main/docs', icon: Book },
+  ],
+  components: [
+    { name: 'Agent Booster', url: '#' },
+    { name: 'AgentDB', url: '#' },
+    { name: 'ReasoningBank', url: '#' },
+    { name: 'Multi-Model Router', url: '#' },
+  ],
+};
+
+const stats = [
+  { label: 'npm Downloads', value: '10K+' },
+  { label: 'GitHub Stars', value: '1.2K+' },
+  { label: 'Agents Available', value: '150+' },
+  { label: 'MCP Tools', value: '213' },
+];
+
+const Footer = () => {
+  return (
+    <footer className="bg-background-light border-t border-border py-16 px-6">
+      <div className="container mx-auto max-w-7xl">
+        {/* Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16">
+          {stats.map((stat, index) => (
+            <div
+              key={index}
+              className="text-center p-6 bg-card rounded-xl border border-border"
+            >
+              <div className="text-3xl font-bold text-gradient mb-2">
+                {stat.value}
+              </div>
+              <div className="text-sm text-muted-foreground">
+                {stat.label}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Links */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-16">
+          <div>
+            <h4 className="text-lg font-bold mb-6 text-foreground">
+              Documentation
+            </h4>
+            <ul className="space-y-3">
+              {links.documentation.map((link, index) => (
+                <li key={index}>
+                  <a
+                    href={link.url}
+                    className="text-muted-foreground hover:text-primary transition-smooth flex items-center gap-2"
+                  >
+                    {link.name}
+                    <ExternalLink className="w-3 h-3" />
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="text-lg font-bold mb-6 text-foreground">
+              Resources
+            </h4>
+            <ul className="space-y-3">
+              {links.resources.map((link, index) => {
+                const Icon = link.icon;
+                return (
+                  <li key={index}>
+                    <a
+                      href={link.url}
+                      className="text-muted-foreground hover:text-primary transition-smooth flex items-center gap-2"
+                    >
+                      <Icon className="w-4 h-4" />
+                      {link.name}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="text-lg font-bold mb-6 text-foreground">
+              Components
+            </h4>
+            <ul className="space-y-3">
+              {links.components.map((link, index) => (
+                <li key={index}>
+                  <a
+                    href={link.url}
+                    className="text-muted-foreground hover:text-primary transition-smooth"
+                  >
+                    {link.name}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="border-t border-border pt-8">
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+            <div className="text-center md:text-left">
+              <div className="text-2xl font-bold text-gradient mb-2">
+                Agentic Flow
+              </div>
+              <p className="text-sm text-muted-foreground">
+                The First AI Agent Framework That Gets Smarter AND Faster
+              </p>
+            </div>
+
+            <div className="flex items-center gap-6">
+              <a
+                href="https://github.com/ruvnet/agentic-flow"
+                className="text-muted-foreground hover:text-primary transition-smooth"
+              >
+                <Github className="w-6 h-6" />
+              </a>
+              <a
+                href="https://www.npmjs.com/package/agentic-flow"
+                className="text-muted-foreground hover:text-primary transition-smooth"
+              >
+                <Package className="w-6 h-6" />
+              </a>
+            </div>
+          </div>
+
+          <div className="mt-8 text-center text-sm text-muted-foreground">
+            <p>
+              MIT License © 2025 rUv |{' '}
+              <a href="#" className="hover:text-primary transition-smooth">
+                Terms
+              </a>{' '}
+              |{' '}
+              <a href="#" className="hover:text-primary transition-smooth">
+                Privacy
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

package/src/components/Hero.tsx

@@ -0,0 +1,87 @@
+import { Zap, Brain, Rocket } from 'lucide-react';
+
+const Hero = () => {
+  return (
+    <section className="relative min-h-screen flex items-center justify-center px-6 py-20 overflow-hidden">
+      {/* Animated Background */}
+      <div className="absolute inset-0 z-0">
+        <div className="absolute top-20 left-10 w-72 h-72 bg-primary/20 rounded-full blur-3xl animate-pulse-glow" />
+        <div className="absolute bottom-20 right-10 w-96 h-96 bg-secondary/20 rounded-full blur-3xl animate-pulse-glow animation-delay-1000" />
+      </div>
+
+      <div className="container mx-auto max-w-7xl relative z-10">
+        <div className="text-center space-y-8 animate-fade-in">
+          {/* Badges */}
+          <div className="flex flex-wrap items-center justify-center gap-3">
+            <span className="px-4 py-2 bg-primary/10 border border-primary/30 rounded-full text-sm font-medium">
+              v1.7.1
+            </span>
+            <span className="px-4 py-2 bg-secondary/10 border border-secondary/30 rounded-full text-sm font-medium">
+              MIT License
+            </span>
+            <span className="px-4 py-2 bg-accent/10 border border-accent/30 rounded-full text-sm font-medium">
+              Node.js 18+
+            </span>
+          </div>
+
+          {/* Main Title */}
+          <h1 className="text-5xl md:text-7xl font-bold leading-tight">
+            <span className="text-gradient">Agentic Flow</span>
+            <br />
+            <span className="text-foreground/90 text-3xl md:text-5xl">
+              AI Agents That Learn & Evolve
+            </span>
+          </h1>
+
+          {/* Subtitle */}
+          <p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto">
+            The first AI agent framework that gets{' '}
+            <span className="text-primary font-semibold">smarter</span> AND{' '}
+            <span className="text-secondary font-semibold">faster</span> every time it runs
+          </p>
+
+          {/* Key Stats */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto pt-8">
+            <div className="bg-card/50 backdrop-blur-sm border border-border rounded-2xl p-6 hover:shadow-glow transition-smooth hover:scale-105">
+              <Zap className="w-12 h-12 text-secondary mx-auto mb-3" />
+              <div className="text-4xl font-bold text-gradient">352x</div>
+              <div className="text-sm text-muted-foreground mt-2">Faster Code Operations</div>
+            </div>
+            <div className="bg-card/50 backdrop-blur-sm border border-border rounded-2xl p-6 hover:shadow-glow transition-smooth hover:scale-105">
+              <Brain className="w-12 h-12 text-primary mx-auto mb-3" />
+              <div className="text-4xl font-bold text-gradient">90%+</div>
+              <div className="text-sm text-muted-foreground mt-2">Success Rate After Learning</div>
+            </div>
+            <div className="bg-card/50 backdrop-blur-sm border border-border rounded-2xl p-6 hover:shadow-glow transition-smooth hover:scale-105">
+              <Rocket className="w-12 h-12 text-accent mx-auto mb-3" />
+              <div className="text-4xl font-bold text-gradient">$0</div>
+              <div className="text-sm text-muted-foreground mt-2">Cost Per Edit</div>
+            </div>
+          </div>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-8">
+            <button className="px-8 py-4 bg-gradient-primary text-foreground font-semibold rounded-xl hover:shadow-primary transition-smooth hover:scale-105 w-full sm:w-auto">
+              Get Started
+            </button>
+            <button className="px-8 py-4 bg-card border border-border text-foreground font-semibold rounded-xl hover:shadow-glow transition-smooth hover:scale-105 w-full sm:w-auto">
+              View on GitHub
+            </button>
+            <button className="px-8 py-4 bg-card border border-border text-foreground font-semibold rounded-xl hover:shadow-glow transition-smooth hover:scale-105 w-full sm:w-auto">
+              npm Package
+            </button>
+          </div>
+
+          {/* Installation Command */}
+          <div className="bg-background-light border border-border rounded-xl p-6 max-w-2xl mx-auto mt-8">
+            <code className="text-sm md:text-base text-primary font-mono">
+              npm install -g agentic-flow
+            </code>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;

package/src/components/PerformanceMetrics.tsx

@@ -0,0 +1,125 @@
+import { BarChart3, TrendingDown, Clock, DollarSign } from 'lucide-react';
+
+const metrics = [
+  {
+    icon: Clock,
+    title: 'Code Review (100/day)',
+    traditional: { latency: '35s', cost: '$240/mo', accuracy: '70%' },
+    agenticFlow: { latency: '0.1s', cost: '$0/mo', accuracy: '90%' },
+    improvement: '352x faster, 100% free',
+  },
+  {
+    icon: BarChart3,
+    title: 'Migration (1000 files)',
+    traditional: { time: '5.87 min', cost: '$10' },
+    agenticFlow: { time: '1 sec', cost: '$0' },
+    improvement: '350x faster, $10 saved',
+  },
+  {
+    icon: TrendingDown,
+    title: 'Refactoring Pipeline',
+    traditional: { success: '70%', supervision: 'Required' },
+    agenticFlow: { success: '90%', supervision: 'Zero' },
+    improvement: '+46% execution speed',
+  },
+  {
+    icon: DollarSign,
+    title: 'Cost Optimization',
+    traditional: { model: 'Claude Sonnet 4.5', cost: '$240/mo' },
+    agenticFlow: { model: 'DeepSeek R1', cost: '$36/mo' },
+    improvement: '85% cost reduction',
+  },
+];
+
+const PerformanceMetrics = () => {
+  return (
+    <section className="py-24 px-6">
+      <div className="container mx-auto max-w-7xl">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+            <span className="text-gradient">Real-World Performance</span>
+          </h2>
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+            See how Agentic Flow transforms traditional workflows with measurable results
+          </p>
+        </div>
+
+        <div className="space-y-8">
+          {metrics.map((metric, index) => {
+            const Icon = metric.icon;
+            
+            return (
+              <div
+                key={index}
+                className="bg-card border border-border rounded-2xl p-8 hover:shadow-glow transition-smooth animate-fade-in"
+                style={{ animationDelay: `${index * 100}ms` }}
+              >
+                <div className="flex items-center gap-4 mb-6">
+                  <div className="w-12 h-12 bg-gradient-primary rounded-xl flex items-center justify-center">
+                    <Icon className="w-6 h-6 text-foreground" />
+                  </div>
+                  <h3 className="text-2xl font-bold text-foreground">{metric.title}</h3>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                  {/* Traditional */}
+                  <div className="bg-background-light/50 rounded-xl p-6 border border-border-light">
+                    <div className="text-sm text-muted-foreground mb-4 font-semibold">
+                      Traditional Agent
+                    </div>
+                    <div className="space-y-2">
+                      {Object.entries(metric.traditional).map(([key, value]) => (
+                        <div key={key} className="flex justify-between text-sm">
+                          <span className="text-muted-foreground capitalize">{key}:</span>
+                          <span className="text-foreground font-mono">{value}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Agentic Flow */}
+                  <div className="bg-primary/10 rounded-xl p-6 border border-primary/30">
+                    <div className="text-sm text-primary mb-4 font-semibold">
+                      Agentic Flow
+                    </div>
+                    <div className="space-y-2">
+                      {Object.entries(metric.agenticFlow).map(([key, value]) => (
+                        <div key={key} className="flex justify-between text-sm">
+                          <span className="text-muted-foreground capitalize">{key}:</span>
+                          <span className="text-foreground font-mono font-semibold">{value}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Improvement */}
+                  <div className="flex items-center justify-center">
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-gradient mb-2">
+                        {metric.improvement.split(',')[0]}
+                      </div>
+                      {metric.improvement.split(',')[1] && (
+                        <div className="text-lg font-semibold text-secondary">
+                          {metric.improvement.split(',')[1]}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Summary Card */}
+        <div className="mt-12 bg-gradient-primary rounded-2xl p-8 text-center">
+          <p className="text-2xl md:text-3xl font-bold text-foreground">
+            The only agent framework that gets faster AND smarter the more you use it
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default PerformanceMetrics;

package/src/components/QuickStart.tsx

@@ -0,0 +1,178 @@
+import { Terminal, Rocket, Package, GitBranch } from 'lucide-react';
+
+const installSteps = [
+  {
+    icon: Package,
+    title: 'Install Package',
+    command: 'npm install -g agentic-flow',
+    description: 'Global installation for CLI access',
+  },
+  {
+    icon: Terminal,
+    title: 'Set API Key',
+    command: 'export ANTHROPIC_API_KEY=sk-ant-...',
+    description: 'Configure your Claude API credentials',
+  },
+  {
+    icon: Rocket,
+    title: 'Run Your First Agent',
+    command: 'npx agentic-flow --agent researcher --task "Analyze trends"',
+    description: 'Execute agents with full MCP tool access',
+  },
+  {
+    icon: GitBranch,
+    title: 'Or Use npx',
+    command: 'npx agentic-flow --help',
+    description: 'No installation required, run directly',
+  },
+];
+
+const examples = [
+  {
+    title: 'Cost-Optimized Coding',
+    code: `npx agentic-flow \\
+  --agent coder \\
+  --task "Build REST API" \\
+  --optimize --priority cost`,
+    description: 'Auto-select cheapest model for simple tasks',
+  },
+  {
+    title: 'Quality-First Review',
+    code: `npx agentic-flow \\
+  --agent reviewer \\
+  --task "Security audit" \\
+  --optimize --priority quality`,
+    description: 'Use flagship models for critical reviews',
+  },
+  {
+    title: 'AgentDB Memory',
+    code: `npx agentdb reflexion store \\
+  "session-1" "implement_auth" \\
+  0.95 true "Success!"`,
+    description: 'Store agent learning experiences',
+  },
+];
+
+const QuickStart = () => {
+  return (
+    <section className="py-24 px-6 bg-background-light/50">
+      <div className="container mx-auto max-w-7xl">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+            <span className="text-gradient">Quick Start</span>
+          </h2>
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+            Get up and running in minutes with our simple installation process
+          </p>
+        </div>
+
+        {/* Installation Steps */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
+          {installSteps.map((step, index) => {
+            const Icon = step.icon;
+            
+            return (
+              <div
+                key={index}
+                className="bg-card border border-border rounded-2xl p-6 hover:shadow-glow transition-smooth hover:scale-105 animate-fade-in"
+                style={{ animationDelay: `${index * 100}ms` }}
+              >
+                <div className="w-12 h-12 bg-gradient-primary rounded-xl flex items-center justify-center mb-4">
+                  <Icon className="w-6 h-6 text-foreground" />
+                </div>
+                
+                <div className="text-sm text-primary font-semibold mb-2">
+                  Step {index + 1}
+                </div>
+                
+                <h3 className="text-lg font-bold mb-3 text-foreground">
+                  {step.title}
+                </h3>
+                
+                <code className="block bg-background rounded-lg p-3 text-xs text-primary font-mono mb-3 break-all">
+                  {step.command}
+                </code>
+                
+                <p className="text-sm text-muted-foreground">
+                  {step.description}
+                </p>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Code Examples */}
+        <div className="space-y-8">
+          <h3 className="text-3xl font-bold text-center mb-8 text-foreground">
+            Common Use Cases
+          </h3>
+          
+          {examples.map((example, index) => (
+            <div
+              key={index}
+              className="bg-card border border-border rounded-2xl p-8 hover:shadow-glow transition-smooth animate-fade-in"
+              style={{ animationDelay: `${index * 100}ms` }}
+            >
+              <div className="flex flex-col lg:flex-row gap-6">
+                <div className="lg:w-1/3">
+                  <h4 className="text-xl font-bold mb-3 text-foreground">
+                    {example.title}
+                  </h4>
+                  <p className="text-muted-foreground">
+                    {example.description}
+                  </p>
+                </div>
+                
+                <div className="lg:w-2/3">
+                  <pre className="bg-background rounded-xl p-6 overflow-x-auto border border-border-light">
+                    <code className="text-sm text-primary font-mono">
+                      {example.code}
+                    </code>
+                  </pre>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Programmatic API */}
+        <div className="mt-16 bg-gradient-primary rounded-2xl p-8">
+          <h3 className="text-2xl font-bold mb-6 text-center text-foreground">
+            Programmatic API
+          </h3>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="bg-background/10 rounded-xl p-6 backdrop-blur-sm">
+              <div className="text-sm font-semibold mb-3 text-foreground/80">
+                Import Components
+              </div>
+              <pre className="bg-background/20 rounded-lg p-4 overflow-x-auto">
+                <code className="text-sm text-foreground font-mono">
+{`import { ReflexionMemory } from 'agentic-flow/agentdb';
+import { ModelRouter } from 'agentic-flow/router';
+import * as reasoningbank from 'agentic-flow/reasoningbank';`}
+                </code>
+              </pre>
+            </div>
+            
+            <div className="bg-background/10 rounded-xl p-6 backdrop-blur-sm">
+              <div className="text-sm font-semibold mb-3 text-foreground/80">
+                Use in Code
+              </div>
+              <pre className="bg-background/20 rounded-lg p-4 overflow-x-auto">
+                <code className="text-sm text-foreground font-mono">
+{`const router = new ModelRouter();
+const response = await router.chat({
+  model: 'auto', priority: 'cost'
+});`}
+                </code>
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default QuickStart;