agentic-flow 1.9.0 → 1.9.2

package/src/components/Hero.tsx

@@ -1,87 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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

@@ -1,178 +0,0 @@
-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;

package/src/index.css

@@ -1,87 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  /* Primary Colors - Purple/Blue Tech Gradient */
-  --primary: 262 83% 58%;
-  --primary-glow: 262 90% 70%;
-  --primary-dark: 262 83% 40%;
-  
-  /* Secondary - Orange/Amber Accent */
-  --secondary: 32 95% 59%;
-  --secondary-glow: 32 100% 70%;
-  
-  /* Background */
-  --background: 224 71% 4%;
-  --background-light: 224 50% 8%;
-  --background-lighter: 224 40% 12%;
-  
-  /* Foreground/Text */
-  --foreground: 213 31% 96%;
-  --muted-foreground: 215 20% 65%;
-  
-  /* Accents */
-  --accent: 216 87% 55%;
-  --accent-foreground: 213 31% 96%;
-  
-  /* Borders */
-  --border: 215 28% 17%;
-  --border-light: 215 20% 25%;
-  
-  /* Card */
-  --card: 224 50% 8%;
-  --card-foreground: 213 31% 96%;
-  
-  /* Gradients */
-  --gradient-primary: linear-gradient(135deg, hsl(262, 83%, 58%), hsl(216, 87%, 55%));
-  --gradient-secondary: linear-gradient(135deg, hsl(32, 95%, 59%), hsl(32, 100%, 70%));
-  --gradient-hero: linear-gradient(180deg, hsl(224, 71%, 4%) 0%, hsl(224, 50%, 8%) 100%);
-  
-  /* Shadows */
-  --shadow-primary: 0 10px 40px -10px hsl(262, 83%, 58% / 0.4);
-  --shadow-secondary: 0 10px 40px -10px hsl(32, 95%, 59% / 0.4);
-  --shadow-glow: 0 0 60px hsl(262, 90%, 70% / 0.3);
-  
-  /* Animations */
-  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background: hsl(var(--background));
-  color: hsl(var(--foreground));
-  line-height: 1.6;
-}
-
-code {
-  font-family: 'Fira Code', 'Courier New', monospace;
-}
-
-@layer utilities {
-  .text-gradient {
-    background: var(--gradient-primary);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-  
-  .shadow-glow {
-    box-shadow: var(--shadow-glow);
-  }
-  
-  .transition-smooth {
-    transition: var(--transition-smooth);
-  }
-}

package/src/main.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)

package/src/pages/LandingPage.tsx

@@ -1,23 +0,0 @@
-import Hero from '../components/Hero';
-import Features from '../components/Features';
-import CoreComponents from '../components/CoreComponents';
-import PerformanceMetrics from '../components/PerformanceMetrics';
-import QuickStart from '../components/QuickStart';
-import AgentTypes from '../components/AgentTypes';
-import Footer from '../components/Footer';
-
-const LandingPage = () => {
-  return (
-    <div className="min-h-screen bg-gradient-hero">
-      <Hero />
-      <Features />
-      <CoreComponents />
-      <PerformanceMetrics />
-      <QuickStart />
-      <AgentTypes />
-      <Footer />
-    </div>
-  );
-};
-
-export default LandingPage;