Clean fresh deployment

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,10 @@
+node_modules/
+.next/
+venv/
+__pycache__/
+*.pyc
+.env
+.env.local
+dist/
+build/
+*.log

Dockerfile

@@ -0,0 +1,19 @@
+FROM node:20-bullseye
+
+RUN apt-get update && apt-get install -y python3 python3-pip python3-venv
+
+WORKDIR /app
+
+COPY . .
+
+RUN pip3 install --no-cache-dir -r requirements.txt
+
+WORKDIR /app/frontend
+RUN npm install
+RUN npm run build
+
+WORKDIR /app
+
+EXPOSE 7860
+
+CMD sh -c "python3 -m uvicorn src.api.main:app --host 0.0.0.0 --port 8000 & cd frontend && npm run start -- --port 7860"

README.md

@@ -0,0 +1,12 @@
+---
+title: Systemforge Ai
+emoji: 🔥
+colorFrom: pink
+colorTo: gray
+sdk: docker
+pinned: false
+license: mit
+short_description: Multi-agent AI platform that transforms enterprise workflows
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

frontend/README.md

@@ -0,0 +1,73 @@
+# SystemForge AI — Frontend
+
+Premium Next.js frontend for the SystemForge AI multi-agent architecture engine.
+
+## Tech Stack
+
+| Tool | Purpose |
+|------|---------|
+| **Next.js 14** | App Router, SSR/SSG |
+| **TypeScript** | Full type safety |
+| **Ant Design 5** | UI component system |
+| **Framer Motion** | Animations & transitions |
+| **React Three Fiber** | 3D particle explosion background |
+| **Three.js** | 3D rendering engine |
+
+## Getting Started
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000)
+
+## Folder Structure
+
+```
+frontend/
+├── app/
+│   ├── layout.tsx          # Root layout with Ant Design theme
+│   └── page.tsx            # Main page orchestrator
+├── components/
+│   ├── agents/
+│   │   ├── AgentCard.tsx   # Individual agent output card
+│   │   └── AgentPipeline.tsx # 3-agent pipeline layout
+│   ├── animations/
+│   │   └── ParticleBackground.tsx  # 3D exploding Three.js scene
+│   ├── layout/
+│   │   └── Header.tsx      # Fixed top navigation
+│   └── ui/
+│       └── HeroSection.tsx # Hero + project input
+├── lib/
+│   ├── api.ts              # Backend API + mock mode
+│   └── types.ts            # Shared TypeScript types
+├── styles/
+│   └── globals.css         # CSS variables, fonts, base styles
+├── .env.local              # Environment config
+└── package.json
+```
+
+## Environment Variables
+
+```env
+NEXT_PUBLIC_BACKEND_URL=http://localhost:8000   # FastAPI backend
+NEXT_PUBLIC_MOCK_MODE=true                       # Enable mock responses
+```
+
+## Mock Mode
+
+The frontend works fully without AMD credits using mock mode.
+Realistic agent outputs are streamed with proper timing simulation.
+
+Set `NEXT_PUBLIC_MOCK_MODE=false` and ensure `NEXT_PUBLIC_BACKEND_URL` points to a live backend once AMD credits are activated.
+
+## Design System
+
+- **Primary**: AMD Red `#E30913`
+- **Accent**: Cyan `#00D4FF`, Gold `#FFB800`, Green `#00FF9C`
+- **Font Display**: Orbitron
+- **Font Body**: Rajdhani
+- **Font Mono**: JetBrains Mono
+- **Theme**: Dark — void black backgrounds with glowing accents

frontend/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next';
+import AntdProvider from '../components/providers/AntdProvider';
+import '../styles/globals.css';
+
+export const metadata: Metadata = {
+  title: 'SystemForge AI — AMD Architecture Engine',
+  description:
+    'Autonomous multi-agent engine that plans, validates, and self-corrects production-grade software architectures.',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=JetBrains+Mono:wght@300;400;500;700&family=Rajdhani:wght@300;400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body>
+        <AntdProvider>{children}</AntdProvider>
+      </body>
+    </html>
+  );
+}

frontend/app/page.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import Navbar from '../components/ui/Navbar';
+import WorkflowBuilder from '../components/workflow/WorkflowBuilder';
+import BeforeAfterWorkflow from '../components/workflow/BeforeAfterWorkflow';
+import WorkflowComparison from '../components/workflow/WorkflowComparison';
+import AgentDecisionPanel from '../components/agents/AgentDecisionPanel';
+import FinalArchitectureBlueprint from '../components/architecture/FinalArchitectureBlueprint';
+import ArchitectureSummary from '../components/architecture/ArchitectureSummary';
+import ParticleBackground from '../components/animations/ParticleBackground';
+import LiveAgentThinking from '../components/agents/LiveAgentThinking';
+import { EXAMPLE_WORKFLOWS } from '../lib/exampleWorkflows';
+import {
+  generateWorkflowRedesign,
+  downloadArchitectureReport,
+} from '../lib/api';
+
+import type { SystemForgeResponse } from '../lib/types';
+
+export default function HomePage() {
+  const [loading, setLoading] = useState(false);
+
+  const [systemData, setSystemData] =
+    useState<SystemForgeResponse | null>(null);
+
+  const [selectedWorkflow, setSelectedWorkflow] =
+    useState<typeof EXAMPLE_WORKFLOWS[0] | null>(null);
+
+  // generate LLM redesign
+  const handleGenerate = async (
+    workflowSteps: string[]
+  ) => {
+    try {
+      setLoading(true);
+      console.log("Sending steps:", workflowSteps);
+      const result =
+        await generateWorkflowRedesign(
+          workflowSteps
+        );
+      console.log("API Result:", result);
+      setSystemData(result);
+      console.log("Received result:", result);
+      setTimeout(() => {
+        document
+          .getElementById('results')
+          ?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+          });
+      }, 400);
+    } catch (error) {
+      console.error(error);
+      alert(
+        'Failed to generate workflow redesign'
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleWorkflowChange = () => {
+    setSystemData(null);
+  };
+
+  const workflowToRender =
+    systemData?.workflowTransformation
+      ? {
+        before: selectedWorkflow
+          ? selectedWorkflow.before.map(step => step.label)
+          : systemData.workflowTransformation.before,
+
+        after: selectedWorkflow
+          ? selectedWorkflow.after.map(step => step.label)
+          : systemData.workflowTransformation.after,
+      }
+      : null;
+
+  const handleWorkflowSelect = (
+    workflowId: string | null
+  ) => {
+    if (!workflowId) {
+      setSelectedWorkflow(null);
+      return;
+    }
+
+    const workflow =
+      EXAMPLE_WORKFLOWS.find(
+        (item) => item.id === workflowId
+      ) || null;
+
+    setSelectedWorkflow(workflow);
+  };
+
+  const handleDownloadReport = async () => {
+    if (!systemData) {
+      alert('Generate architecture first');
+      return;
+    }
+
+    try {
+      const workflowSteps =
+        systemData.workflowTransformation.before;
+
+      await downloadArchitectureReport(
+        workflowSteps
+      );
+    } catch (error) {
+      console.error(error);
+      alert(
+        'Failed to download architecture report'
+      );
+    }
+  };
+
+  return (
+    <main
+      style={{
+        minHeight: '100vh',
+        background: '#03040a',
+        position: 'relative',
+        overflowX: 'hidden',
+      }}
+    >
+      <ParticleBackground />
+      <Navbar />
+
+      <section
+        style={{
+          position: 'relative',
+          zIndex: 10,
+          paddingTop: '120px',
+          paddingBottom: '80px',
+        }}
+      >
+        <WorkflowBuilder
+          onGenerate={handleGenerate}
+          isRunning={loading}
+          onWorkflowSelect={handleWorkflowSelect}
+          onWorkflowChange={handleWorkflowChange}
+        />
+      </section>
+
+      {loading && (
+        <LiveAgentThinking />
+      )}
+
+      {systemData && !loading && (
+        <>
+          <section id="results">
+            {workflowToRender && (
+              <BeforeAfterWorkflow
+                data={workflowToRender}
+              />
+            )}
+
+            <WorkflowComparison
+              data={systemData}
+            />
+
+            <AgentDecisionPanel
+              architect={systemData.architect}
+              critic={systemData.critic}
+              refiner={systemData.refiner}
+            />
+
+            <FinalArchitectureBlueprint
+              layers={systemData.architectureLayers}
+            />
+
+            <ArchitectureSummary
+              metrics={systemData.finalMetrics}
+              onDownloadReport={handleDownloadReport}
+            />
+          </section>
+
+        </>
+      )}
+    </main>
+  );
+}

frontend/components/agents/AgentCard.tsx

@@ -0,0 +1,284 @@
+'use client';
+
+import React, { useEffect, useState, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import type { AgentOutput, AgentStatus } from '../../lib/types';
+
+interface AgentCardProps {
+  output: AgentOutput;
+  index: number;
+}
+
+const AGENT_CONFIG = {
+  architect: {
+    num: '01', title: 'ARCHITECT', subtitle: 'System Design Agent',
+    color: '#00D4FF', glow: 'rgba(0,212,255,0.3)', subtle: 'rgba(0,212,255,0.06)',
+    icon: '⬡', persona: 'Senior Solutions Architect',
+  },
+  critic: {
+    num: '02', title: 'CRITIC', subtitle: 'SRE Review Agent',
+    color: '#FFB800', glow: 'rgba(255,184,0,0.3)', subtle: 'rgba(255,184,0,0.06)',
+    icon: '◈', persona: 'Principal Site Reliability Engineer',
+  },
+  refiner: {
+    num: '03', title: 'REFINER', subtitle: 'Self-Correction Agent',
+    color: '#00FF9C', glow: 'rgba(0,255,156,0.3)', subtle: 'rgba(0,255,156,0.06)',
+    icon: '◆', persona: 'Staff Platform Engineer',
+  },
+};
+
+const STATUS_LABELS: Record<AgentStatus, string> = {
+  idle: 'STANDBY', thinking: 'PROCESSING', complete: 'COMPLETE', error: 'ERROR',
+};
+
+// ─── Inline markdown renderer ────────────────────────────────────────────────
+function renderInline(text: string, color: string): React.ReactNode {
+  const parts = text.split(/(\*\*[^*]+\*\*|`[^`]+`)/g);
+  return parts.map((part, i) => {
+    if (part.startsWith('**') && part.endsWith('**')) {
+      return <strong key={i} style={{ color: '#F0F0FF', fontWeight: 700 }}>{part.slice(2, -2)}</strong>;
+    }
+    if (part.startsWith('`') && part.endsWith('`')) {
+      return (
+        <code key={i} style={{ color, background: 'rgba(255,255,255,0.06)', padding: '1px 5px', borderRadius: 2, fontSize: '0.75rem' }}>
+          {part.slice(1, -1)}
+        </code>
+      );
+    }
+    return part;
+  });
+}
+
+function MarkdownDisplay({ content, color }: { content: string; color: string }) {
+  return (
+    <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.8rem', lineHeight: 1.7 }}>
+      {content.split('\n').map((line, i) => {
+        if (line.startsWith('# ')) {
+          return (
+            <div key={i} style={{ fontFamily: 'var(--font-display)', fontSize: '1rem', fontWeight: 700, color, marginBottom: '0.75rem', marginTop: i > 0 ? '1rem' : 0, letterSpacing: '0.05em' }}>
+              {line.replace(/^# /, '')}
+            </div>
+          );
+        }
+        if (line.startsWith('## ')) {
+          return (
+            <div key={i} style={{ fontFamily: 'var(--font-display)', fontSize: '0.8rem', fontWeight: 600, color: '#F0F0FF', marginTop: '1rem', marginBottom: '0.5rem', letterSpacing: '0.1em', borderBottom: '1px solid rgba(255,255,255,0.06)', paddingBottom: '4px' }}>
+              {line.replace(/^## /, '')}
+            </div>
+          );
+        }
+        if (line.startsWith('### ')) {
+          return (
+            <div key={i} style={{ fontSize: '0.75rem', fontWeight: 600, color: '#AAAACC', marginTop: '0.75rem', marginBottom: '0.25rem' }}>
+              {line.replace(/^### /, '')}
+            </div>
+          );
+        }
+        if (line.startsWith('- ') || line.startsWith('* ')) {
+          return (
+            <div key={i} style={{ display: 'flex', gap: '8px', marginBottom: '2px', paddingLeft: '8px' }}>
+              <span style={{ color, flexShrink: 0 }}>▸</span>
+              <span style={{ color: '#C0C0D8' }}>{renderInline(line.replace(/^[-*] /, ''), color)}</span>
+            </div>
+          );
+        }
+        if (line === '') return <div key={i} style={{ height: '0.4rem' }} />;
+        return <div key={i} style={{ color: '#B0B0C8', marginBottom: '1px' }}>{renderInline(line, color)}</div>;
+      })}
+    </div>
+  );
+}
+
+function ThinkingIndicator({ color }: { color: string }) {
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '4px', alignItems: 'center', marginBottom: '1rem' }}>
+        {[0, 1, 2, 3, 4].map((i) => (
+          <motion.div
+            key={i}
+            animate={{ scaleY: [0.4, 1.4, 0.4] }}
+            transition={{ duration: 0.8, repeat: Infinity, delay: i * 0.1 }}
+            style={{ width: 3, height: 18, borderRadius: 2, background: color, transformOrigin: 'center', opacity: 0.7 }}
+          />
+        ))}
+        <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.65rem', color: '#555577', marginLeft: '8px', letterSpacing: '0.1em' }}>
+          Agent reasoning...
+        </span>
+      </div>
+      {[70, 55, 85, 45, 65].map((w, i) => (
+        <motion.div
+          key={i}
+          animate={{ opacity: [0.15, 0.4, 0.15] }}
+          transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.2 }}
+          style={{ height: 8, width: `${w}%`, borderRadius: 2, background: 'rgba(255,255,255,0.05)', marginBottom: '8px' }}
+        />
+      ))}
+    </div>
+  );
+}
+
+// ─── Main component ───────────────────────��───────────────────────────────────
+export default function AgentCard({ output, index }: AgentCardProps) {
+  const config = AGENT_CONFIG[output.agent];
+  const [displayedContent, setDisplayedContent] = useState('');
+  const streamRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (output.status !== 'complete' || !output.content) {
+      setDisplayedContent('');
+      return;
+    }
+
+    // Reset and start streaming
+    setDisplayedContent('');
+    let char = 0;
+    const full = output.content;
+
+    streamRef.current = setInterval(() => {
+      char += 8;
+      setDisplayedContent(full.slice(0, char));
+      if (char >= full.length) {
+        setDisplayedContent(full);
+        if (streamRef.current) clearInterval(streamRef.current);
+      }
+    }, 10);
+
+    return () => { if (streamRef.current) clearInterval(streamRef.current); };
+  }, [output.status, output.content]);
+
+  const isThinking = output.status === 'thinking';
+  const isComplete = output.status === 'complete';
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, x: index % 2 === 0 ? -40 : 40, y: 20 }}
+      animate={{ opacity: 1, x: 0, y: 0 }}
+      transition={{ delay: index * 0.15, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+      style={{
+        position: 'relative',
+        border: `1px solid ${isComplete ? config.color + '40' : 'rgba(255,255,255,0.06)'}`,
+        borderRadius: 4,
+        overflow: 'hidden',
+        background: isComplete ? config.subtle : 'rgba(13,13,26,0.6)',
+        backdropFilter: 'blur(20px)',
+        transition: 'border 0.5s ease, background 0.5s ease, box-shadow 0.5s ease',
+        boxShadow: isComplete ? `0 0 40px ${config.glow}, 0 0 80px ${config.glow}22` : 'none',
+      }}
+    >
+      {/* Scan line when thinking */}
+      {isThinking && (
+        <motion.div
+          animate={{ top: ['0%', '100%'] }}
+          transition={{ duration: 1.5, repeat: Infinity, ease: 'linear' }}
+          style={{
+            position: 'absolute', left: 0, right: 0, height: '2px',
+            background: `linear-gradient(90deg, transparent, ${config.color}, transparent)`,
+            zIndex: 5,
+          }}
+        />
+      )}
+
+      {/* Header */}
+      <div
+        style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          padding: '1rem 1.25rem',
+          borderBottom: '1px solid rgba(255,255,255,0.04)',
+          background: 'rgba(0,0,0,0.2)',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <div
+            style={{
+              width: 40, height: 40,
+              border: `1px solid ${config.color}50`,
+              borderRadius: 4,
+              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+              background: `${config.color}10`,
+            }}
+          >
+            <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.55rem', color: config.color, letterSpacing: '0.1em' }}>{config.num}</span>
+            <span style={{ fontSize: '0.9rem', lineHeight: 1 }}>{config.icon}</span>
+          </div>
+          <div>
+            <div style={{ fontFamily: 'var(--font-display)', fontSize: '0.9rem', fontWeight: 700, color: config.color, letterSpacing: '0.15em' }}>
+              {config.title}
+            </div>
+            <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.6rem', color: '#8888AA', letterSpacing: '0.08em', marginTop: 1 }}>
+              {config.persona}
+            </div>
+          </div>
+        </div>
+
+        {/* Status badge */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          {output.duration && isComplete && (
+            <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.6rem', color: '#444466' }}>
+              {(output.duration / 1000).toFixed(1)}s
+            </span>
+          )}
+          <motion.div
+            animate={isThinking ? { opacity: [1, 0.3, 1] } : {}}
+            transition={{ duration: 0.8, repeat: Infinity }}
+            style={{
+              display: 'flex', alignItems: 'center', gap: '5px',
+              padding: '3px 8px', borderRadius: 2,
+              border: `1px solid ${isComplete ? config.color + '50' : isThinking ? 'rgba(255,255,255,0.15)' : 'rgba(255,255,255,0.06)'}`,
+              background: isComplete ? `${config.color}15` : 'transparent',
+            }}
+          >
+            <div
+              style={{
+                width: 5, height: 5, borderRadius: '50%',
+                background: isComplete ? config.color : isThinking ? '#FFB800' : '#444466',
+                boxShadow: isComplete ? `0 0 8px ${config.color}` : isThinking ? '0 0 8px #FFB800' : 'none',
+              }}
+            />
+            <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.55rem', letterSpacing: '0.15em', color: isComplete ? config.color : isThinking ? '#FFB800' : '#444466' }}>
+              {STATUS_LABELS[output.status]}
+            </span>
+          </motion.div>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div style={{ padding: '1.25rem', minHeight: '200px' }}>
+        <AnimatePresence mode="wait">
+          {isThinking && (
+            <motion.div key="thinking" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
+              <ThinkingIndicator color={config.color} />
+            </motion.div>
+          )}
+          {isComplete && (
+            <motion.div key="content" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.4 }}>
+              <MarkdownDisplay content={displayedContent} color={config.color} />
+            </motion.div>
+          )}
+          {output.status === 'idle' && (
+            <motion.div
+              key="idle"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '160px', flexDirection: 'column', gap: '12px' }}
+            >
+              <div style={{ width: 48, height: 48, border: `1px solid ${config.color}20`, borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.5rem', opacity: 0.3 }}>
+                {config.icon}
+              </div>
+              <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.65rem', color: '#333355', letterSpacing: '0.15em' }}>
+                AWAITING_ACTIVATION
+              </span>
+            </motion.div>
+          )}
+          {output.status === 'error' && (
+            <motion.div key="error" initial={{ opacity: 0 }} animate={{ opacity: 1 }}
+              style={{ padding: '1rem', background: 'rgba(227,9,19,0.08)', border: '1px solid rgba(227,9,19,0.2)', borderRadius: 4 }}
+            >
+              <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.75rem', color: '#E30913', marginBottom: '0.5rem' }}>ERROR</div>
+              <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', color: '#8888AA' }}>{output.content}</div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </motion.div>
+  );
+}

frontend/components/agents/AgentDecisionPanel.tsx

@@ -0,0 +1,280 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import type { AgentDecision } from '../../lib/types';
+
+interface AgentDecisionPanelProps {
+    architect: AgentDecision;
+    critic: AgentDecision;
+    refiner: AgentDecision;
+}
+
+interface AgentCardData {
+    id: string;
+    role: string;
+    color: string;
+    data: AgentDecision;
+}
+
+function DecisionCard({
+    item,
+    index,
+}: {
+    item: AgentCardData;
+    index: number;
+}) {
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+                delay: index * 0.12,
+                duration: 0.55,
+            }}
+            whileHover={{
+                y: -4,
+            }}
+            style={{
+                border: `1px solid ${item.color}20`,
+                background: `${item.color}05`,
+                borderRadius: 10,
+                padding: '2rem',
+                backdropFilter: 'blur(14px)',
+                boxShadow: `0 0 30px ${item.color}08`,
+            }}
+        >
+            {/* Header */}
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    justifyContent: 'space-between',
+                    gap: '1rem',
+                    marginBottom: '1.5rem',
+                }}
+            >
+                <div>
+                    <div
+                        style={{
+                            fontFamily: 'var(--font-mono)',
+                            fontSize: '0.72rem',
+                            color: item.color,
+                            letterSpacing: '0.22em',
+                            marginBottom: '0.45rem',
+                        }}
+                    >
+                        {item.id} · {item.role}
+                    </div>
+
+                    <div
+                        style={{
+                            fontFamily: 'var(--font-display)',
+                            fontSize: '1rem',
+                            color: '#F0F0FF',
+                            letterSpacing: '0.08em',
+                            marginBottom: '0.35rem',
+                        }}
+                    >
+                        {item.data.title}
+                    </div>
+
+                    <div
+                        style={{
+                            color: item.color,
+                            fontSize: '0.95rem',
+                            fontWeight: 500,
+                        }}
+                    >
+                        {item.data.subtitle}
+                    </div>
+                </div>
+
+                <div
+                    style={{
+                        minWidth: 56,
+                        height: 56,
+                        borderRadius: 8,
+                        border: `1px solid ${item.color}30`,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontFamily: 'var(--font-display)',
+                        fontSize: '1rem',
+                        color: item.color,
+                        background: `${item.color}08`,
+                    }}
+                >
+                    {item.id}
+                </div>
+            </div>
+
+            {/* Decisions */}
+            <div>
+                <div
+                    style={{
+                        fontFamily: 'var(--font-mono)',
+                        fontSize: '0.68rem',
+                        color: item.color,
+                        letterSpacing: '0.18em',
+                        marginBottom: '0.9rem',
+                    }}
+                >
+                    KEY DECISIONS
+                </div>
+
+                <div
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '0.8rem',
+                    }}
+                >
+                    {item.data.decisions.map((decision, i) => (
+                        <div
+                            key={i}
+                            style={{
+                                display: 'flex',
+                                gap: '0.8rem',
+                                alignItems: 'flex-start',
+                            }}
+                        >
+                            <span
+                                style={{
+                                    color: item.color,
+                                    fontSize: '0.8rem',
+                                    marginTop: '2px',
+                                }}
+                            >
+                                ●
+                            </span>
+
+                            <div
+                                style={{
+                                    color: '#F0F0FF',
+                                    fontSize: '0.92rem',
+                                    lineHeight: 1.6,
+                                }}
+                            >
+                                {decision}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </motion.div>
+    );
+}
+
+export default function AgentDecisionPanel({
+    architect,
+    critic,
+    refiner,
+}: AgentDecisionPanelProps) {
+    const agentCards: AgentCardData[] = [
+        {
+            id: '01',
+            role: 'ARCHITECT',
+            color: '#00D4FF',
+            data: architect,
+        },
+        {
+            id: '02',
+            role: 'CRITIC',
+            color: '#FFB800',
+            data: critic,
+        },
+        {
+            id: '03',
+            role: 'REFINER',
+            color: '#00FF9C',
+            data: refiner,
+        },
+    ];
+
+    return (
+        <section
+            id="agent-intelligence"
+            style={{
+                position: 'relative',
+                zIndex: 10,
+                width: '100%',
+                padding: '5rem 2rem',
+            }}
+        >
+            <div
+                style={{
+                    maxWidth: 1400,
+                    margin: '0 auto',
+                }}
+            >
+                {/* Section Header */}
+                <motion.div
+                    initial={{ opacity: 0, y: 18 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.55 }}
+                    style={{
+                        textAlign: 'center',
+                        marginBottom: '3.5rem',
+                    }}
+                >
+                    <div
+                        style={{
+                            fontFamily: 'var(--font-mono)',
+                            fontSize: '0.75rem',
+                            color: '#E30913',
+                            letterSpacing: '0.26em',
+                            marginBottom: '0.8rem',
+                        }}
+                    >
+                        MULTI-AGENT REASONING ENGINE
+                    </div>
+
+                    <h2
+                        style={{
+                            fontFamily: 'var(--font-display)',
+                            fontSize: 'clamp(2rem, 4vw, 3.8rem)',
+                            color: '#F0F0FF',
+                            marginBottom: '1rem',
+                        }}
+                    >
+                        Agent Decision Intelligence
+                    </h2>
+
+                    <p
+                        style={{
+                            maxWidth: 780,
+                            margin: '0 auto',
+                            color: '#8888AA',
+                            fontSize: '1rem',
+                            lineHeight: 1.75,
+                        }}
+                    >
+                        SystemForge separates architecture generation
+                        into specialized reasoning agents. Each agent
+                        performs focused analysis: system design,
+                        risk detection, and production hardening.
+                    </p>
+                </motion.div>
+
+                {/* Cards */}
+                <div
+                    style={{
+                        display: 'grid',
+                        gridTemplateColumns:
+                            'repeat(auto-fit, minmax(340px, 1fr))',
+                        gap: '1.6rem',
+                    }}
+                >
+                    {agentCards.map((item, index) => (
+                        <DecisionCard
+                            key={index}
+                            item={item}
+                            index={index}
+                        />
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}

frontend/components/agents/AgentPipeline.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import type { AgentOutput } from '../../lib/types';
+import AgentCard from './AgentCard';
+
+interface AgentPipelineProps {
+  outputs: AgentOutput[];
+  isRunning: boolean;
+}
+
+export default function AgentPipeline({ outputs, isRunning }: AgentPipelineProps) {
+  const hasOutput = outputs.some((o) => o.status !== 'idle');
+  const allComplete = outputs.every((o) => o.status === 'complete') && outputs.length === 3;
+
+  return (
+    <motion.section
+      initial={{ opacity: 0, y: 40 }}
+      animate={{ opacity: hasOutput ? 1 : 0, y: hasOutput ? 0 : 40 }}
+      transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
+      style={{
+        position: 'relative',
+        zIndex: 10,
+        padding: '0 2rem 6rem',
+        maxWidth: '1400px',
+        margin: '0 auto',
+      }}
+    >
+      {/* Section header */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '1rem',
+          marginBottom: '2.5rem',
+        }}
+      >
+        <div
+          style={{
+            flex: 1,
+            height: 1,
+            background: 'linear-gradient(90deg, transparent, rgba(227,9,19,0.3))',
+          }}
+        />
+        <div
+          style={{
+            fontFamily: 'var(--font-mono)',
+            fontSize: '0.65rem',
+            color: '#E30913',
+            letterSpacing: '0.3em',
+            whiteSpace: 'nowrap',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+          }}
+        >
+          {isRunning && (
+            <motion.div
+              animate={{ opacity: [1, 0.3, 1] }}
+              transition={{ duration: 0.6, repeat: Infinity }}
+              style={{
+                width: 6,
+                height: 6,
+                borderRadius: '50%',
+                background: '#E30913',
+                boxShadow: '0 0 10px rgba(227,9,19,0.8)',
+              }}
+            />
+          )}
+          SELF-CORRECTION PIPELINE
+        </div>
+        <div
+          style={{
+            flex: 1,
+            height: 1,
+            background: 'linear-gradient(90deg, rgba(227,9,19,0.3), transparent)',
+          }}
+        />
+      </div>
+
+      {/* Agent Cards Grid */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))',
+          gap: '1.5rem',
+        }}
+      >
+        {outputs.map((output, i) => (
+          <AgentCard key={output.agent} output={output} index={i} />
+        ))}
+      </div>
+
+      {/* Flow complete banner */}
+      {allComplete && (
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 0.3, duration: 0.6 }}
+          style={{
+            marginTop: '2rem',
+            padding: '1.25rem 2rem',
+            border: '1px solid rgba(0,255,156,0.25)',
+            borderRadius: 4,
+            background: 'rgba(0,255,156,0.04)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
+            gap: '1rem',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <motion.div
+              animate={{ scale: [1, 1.15, 1] }}
+              transition={{ duration: 1.5, repeat: Infinity }}
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: '50%',
+                background: '#00FF9C',
+                boxShadow: '0 0 15px rgba(0,255,156,0.6)',
+              }}
+            />
+            <span
+              style={{
+                fontFamily: 'var(--font-display)',
+                fontSize: '0.8rem',
+                color: '#00FF9C',
+                letterSpacing: '0.15em',
+              }}
+            >
+              ARCHITECTURE SELF-CORRECTION COMPLETE
+            </span>
+          </div>
+          <div
+            style={{
+              fontFamily: 'var(--font-mono)',
+              fontSize: '0.65rem',
+              color: '#8888AA',
+              letterSpacing: '0.1em',
+            }}
+          >
+            Powered by AMD ROCm + Qwen2.5 + vLLM
+          </div>
+        </motion.div>
+      )}
+    </motion.section>
+  );
+}

frontend/components/agents/LiveAgentThinking.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import React, {
+    useEffect,
+    useState,
+} from 'react';
+
+const AGENTS = [
+    {
+        icon: '⚡',
+        title: 'SYSTEMS ARCHITECT',
+        message:
+            'Designing production-grade architecture...',
+        color: '#00d4ff',
+    },
+    {
+        icon: '⚠',
+        title: 'INFRASTRUCTURE CRITIC',
+        message:
+            'Finding failure points and bottlenecks...',
+        color: '#f59e0b',
+    },
+    {
+        icon: '🛡',
+        title: 'PRODUCTION REFINER',
+        message:
+            'Hardening reliability and recovery paths...',
+        color: '#10b981',
+    },
+    {
+        icon: '📊',
+        title: 'EXECUTIVE SUMMARY',
+        message:
+            'Calculating ROI and deployment readiness...',
+        color: '#8b5cf6',
+    },
+];
+
+export default function LiveAgentThinking() {
+    const [activeIndex, setActiveIndex] =
+        useState(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setActiveIndex((prev) =>
+                prev < AGENTS.length - 1
+                    ? prev + 1
+                    : prev
+            );
+        }, 1800);
+
+        return () =>
+            clearInterval(interval);
+    }, []);
+
+    return (
+        <section
+            style={{
+                maxWidth: '1200px',
+                margin: '0 auto',
+                padding: '60px 20px',
+            }}
+        >
+            <h2
+                style={{
+                    fontSize: '42px',
+                    fontWeight: 800,
+                    textAlign: 'center',
+                    color: '#fff',
+                    marginBottom: '16px',
+                }}
+            >
+                AI Agents Are Thinking
+            </h2>
+
+            <p
+                style={{
+                    textAlign: 'center',
+                    color: '#94a3b8',
+                    fontSize: '18px',
+                    marginBottom: '50px',
+                }}
+            >
+                Multi-agent system redesigning
+                your workflow in real time
+            </p>
+
+            <div
+                style={{
+                    display: 'grid',
+                    gap: '20px',
+                }}
+            >
+                {AGENTS.map(
+                    (agent, index) => {
+                        const isActive =
+                            index <= activeIndex;
+
+                        return (
+                            <div
+                                key={
+                                    agent.title
+                                }
+                                style={{
+                                    padding:
+                                        '24px',
+                                    borderRadius:
+                                        '18px',
+                                    background:
+                                        'rgba(5,8,22,0.9)',
+                                    border: `1px solid ${isActive
+                                            ? agent.color
+                                            : 'rgba(255,255,255,0.06)'
+                                        }`,
+                                    boxShadow:
+                                        isActive
+                                            ? `0 0 30px ${agent.color}22`
+                                            : 'none',
+                                    opacity:
+                                        isActive
+                                            ? 1
+                                            : 0.45,
+                                    transition:
+                                        'all 0.4s ease',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        display:
+                                            'flex',
+                                        alignItems:
+                                            'center',
+                                        gap: '14px',
+                                        marginBottom:
+                                            '10px',
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            fontSize:
+                                                '28px',
+                                        }}
+                                    >
+                                        {
+                                            agent.icon
+                                        }
+                                    </div>
+
+                                    <div
+                                        style={{
+                                            fontSize:
+                                                '18px',
+                                            fontWeight: 700,
+                                            color:
+                                                '#fff',
+                                        }}
+                                    >
+                                        {
+                                            agent.title
+                                        }
+                                    </div>
+                                </div>
+
+                                <div
+                                    style={{
+                                        color:
+                                            '#cbd5e1',
+                                        fontSize:
+                                            '15px',
+                                        paddingLeft:
+                                            '42px',
+                                    }}
+                                >
+                                    {
+                                        agent.message
+                                    }
+                                </div>
+                            </div>
+                        );
+                    }
+                )}
+            </div>
+        </section>
+    );
+}

frontend/components/animations/ParticleBackground.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+export default function ParticleBackground() {
+  return (
+    <div className="cyber-background">
+      <div className="grid-overlay" />
+      <div className="glow glow-red" />
+      <div className="glow glow-blue" />
+      <div className="glow glow-green" />
+      <div className="scan-line" />
+    </div>
+  );
+}

frontend/components/animations/ParticleCanvas.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import { useRef, useMemo } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { Points, PointMaterial } from '@react-three/drei';
+import * as THREE from 'three';
+
+function ParticleField({ isActive }: { isActive: boolean }) {
+    const pointsRef = useRef<THREE.Points>(null);
+    const velocitiesRef = useRef<Float32Array | null>(null);
+    const originalPositionsRef = useRef<Float32Array | null>(null);
+
+    const count = 1800;
+
+    const { positions } = useMemo(() => {
+        const positions = new Float32Array(count * 3);
+        const velocities = new Float32Array(count * 3);
+
+        for (let i = 0; i < count; i++) {
+            const theta = Math.random() * Math.PI * 2;
+            const phi = Math.acos(2 * Math.random() - 1);
+            const r = 2 + Math.random() * 3;
+
+            positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
+            positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
+            positions[i * 3 + 2] = r * Math.cos(phi);
+
+            velocities[i * 3] = (Math.random() - 0.5) * 0.02;
+            velocities[i * 3 + 1] = (Math.random() - 0.5) * 0.02;
+            velocities[i * 3 + 2] = (Math.random() - 0.5) * 0.02;
+        }
+
+        velocitiesRef.current = velocities;
+        originalPositionsRef.current = positions.slice();
+
+        return { positions };
+    }, []);
+
+    useFrame((state) => {
+        if (!pointsRef.current) return;
+
+        const time = state.clock.elapsedTime;
+        const geometry = pointsRef.current.geometry;
+        const pos = geometry.attributes.position.array as Float32Array;
+
+        const original = originalPositionsRef.current!;
+        const velocity = velocitiesRef.current!;
+
+        for (let i = 0; i < count; i++) {
+            const index = i * 3;
+
+            if (isActive) {
+                pos[index] +=
+                    velocity[index] *
+                    (1 + Math.sin(time * 0.5 + i * 0.01) * 0.3);
+
+                pos[index + 1] +=
+                    velocity[index + 1] *
+                    (1 + Math.cos(time * 0.4 + i * 0.02) * 0.3);
+
+                pos[index + 2] +=
+                    velocity[index + 2] *
+                    (1 + Math.sin(time * 0.6 + i * 0.015) * 0.3);
+
+                const distance = Math.sqrt(
+                    pos[index] ** 2 +
+                    pos[index + 1] ** 2 +
+                    pos[index + 2] ** 2
+                );
+
+                if (distance > 12) {
+                    pos[index] *= 0.98;
+                    pos[index + 1] *= 0.98;
+                    pos[index + 2] *= 0.98;
+                }
+            } else {
+                pos[index] += (original[index] - pos[index]) * 0.03;
+                pos[index + 1] +=
+                    (original[index + 1] - pos[index + 1]) * 0.03;
+                pos[index + 2] +=
+                    (original[index + 2] - pos[index + 2]) * 0.03;
+            }
+        }
+
+        geometry.attributes.position.needsUpdate = true;
+
+        pointsRef.current.rotation.y = time * 0.04;
+        pointsRef.current.rotation.x = Math.sin(time * 0.02) * 0.1;
+    });
+
+    return (
+        <Points
+            ref={pointsRef}
+            positions={positions}
+            stride={3}
+            frustumCulled={false}
+        >
+            <PointMaterial
+                transparent
+                color="#00D4FF"
+                size={0.04}
+                sizeAttenuation
+                depthWrite={false}
+                blending={THREE.AdditiveBlending}
+            />
+        </Points>
+    );
+}
+
+function RingSystem({ isActive }: { isActive: boolean }) {
+    const groupRef = useRef<THREE.Group>(null);
+
+    useFrame(({ clock }) => {
+        if (!groupRef.current) return;
+
+        const time = clock.elapsedTime;
+
+        groupRef.current.rotation.x = time * 0.15;
+        groupRef.current.rotation.z = time * 0.08;
+
+        const scale = isActive
+            ? 1 + Math.sin(time * 2) * 0.08
+            : 1;
+
+        groupRef.current.scale.setScalar(scale);
+    });
+
+    return (
+        <group ref={groupRef}>
+            {[2.2, 3.1, 4.0].map((radius, index) => (
+                <mesh
+                    key={index}
+                    rotation={[
+                        Math.PI / 2 + index * 0.4,
+                        0,
+                        index * 0.6,
+                    ]}
+                >
+                    <torusGeometry args={[radius, 0.008, 16, 120]} />
+                    <meshBasicMaterial
+                        color={
+                            index === 0
+                                ? '#E30913'
+                                : index === 1
+                                    ? '#00D4FF'
+                                    : '#FFB800'
+                        }
+                        transparent
+                        opacity={isActive ? 0.7 : 0.25}
+                    />
+                </mesh>
+            ))}
+        </group>
+    );
+}
+
+export default function ParticleCanvas({
+    isActive,
+}: {
+    isActive: boolean;
+}) {
+    return (
+        <Canvas
+            camera={{
+                position: [0, 0, 8],
+                fov: 60,
+            }}
+            gl={{
+                antialias: true,
+                alpha: true,
+            }}
+            style={{
+                background: 'transparent',
+            }}
+        >
+            <ambientLight intensity={0.3} />
+
+            <ParticleField isActive={isActive} />
+
+            <RingSystem isActive={isActive} />
+        </Canvas>
+    );
+}

frontend/components/architecture/ArchitectureSummary.tsx

@@ -0,0 +1,293 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import type { FinalMetrics } from '../../lib/types';
+
+interface ArchitectureSummaryProps {
+    metrics: FinalMetrics;
+    onDownloadReport: () => void;
+}
+
+interface MetricCardData {
+    label: string;
+    value: string;
+    subtitle: string;
+    color: string;
+}
+
+function MetricCard({
+    item,
+    index,
+}: {
+    item: MetricCardData;
+    index: number;
+}) {
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 22 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+                delay: index * 0.08,
+                duration: 0.45,
+            }}
+            whileHover={{
+                y: -4,
+            }}
+            style={{
+                border: `1px solid ${item.color}18`,
+                background: `${item.color}05`,
+                borderRadius: 10,
+                padding: '1.8rem',
+                backdropFilter: 'blur(14px)',
+                boxShadow: `0 0 24px ${item.color}08`,
+            }}
+        >
+            <div
+                style={{
+                    fontFamily: 'var(--font-display)',
+                    fontSize: '2.2rem',
+                    color: item.color,
+                    marginBottom: '0.6rem',
+                    lineHeight: 1,
+                }}
+            >
+                {item.value}
+            </div>
+
+            <div
+                style={{
+                    fontFamily: 'var(--font-display)',
+                    fontSize: '0.95rem',
+                    color: '#F0F0FF',
+                    marginBottom: '0.45rem',
+                    letterSpacing: '0.04em',
+                }}
+            >
+                {item.label}
+            </div>
+
+            <div
+                style={{
+                    color: '#8888AA',
+                    fontSize: '0.9rem',
+                    lineHeight: 1.6,
+                }}
+            >
+                {item.subtitle}
+            </div>
+        </motion.div>
+    );
+}
+
+export default function ArchitectureSummary({
+    metrics,
+    onDownloadReport,
+}: ArchitectureSummaryProps) {
+    const metricCards: MetricCardData[] = [
+        {
+            label: 'Deployment Readiness',
+            value: metrics.deploymentReadiness,
+            subtitle: 'Production readiness score',
+            color: '#00FF9C',
+        },
+        {
+            label: 'Automation Potential',
+            value: metrics.automationPotential,
+            subtitle: 'Operational bottlenecks removed',
+            color: '#00D4FF',
+        },
+        {
+            label: 'Risk Score',
+            value: metrics.riskScore,
+            subtitle: 'System vulnerability evaluation',
+            color: '#FFB800',
+        },
+        {
+            label: 'Architecture Confidence',
+            value: metrics.architectureConfidence,
+            subtitle: 'Validated architecture confidence',
+            color: '#A020F0',
+        },
+    ];
+
+    return (
+        <section
+            id="amd-inference"
+            style={{
+                position: 'relative',
+                zIndex: 10,
+                width: '100%',
+                padding: '4rem 2rem 6rem',
+            }}
+        >
+            <div
+                style={{
+                    maxWidth: 1400,
+                    margin: '0 auto',
+                }}
+            >
+                {/* Header */}
+                <motion.div
+                    initial={{ opacity: 0, y: 18 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.55 }}
+                    style={{
+                        textAlign: 'center',
+                        marginBottom: '3rem',
+                    }}
+                >
+                    <div
+                        style={{
+                            fontFamily: 'var(--font-mono)',
+                            fontSize: '0.75rem',
+                            color: '#00D4FF',
+                            letterSpacing: '0.24em',
+                            marginBottom: '0.8rem',
+                        }}
+                    >
+                        ARCHITECTURE OUTCOME SUMMARY
+                    </div>
+
+                    <h2
+                        style={{
+                            fontFamily: 'var(--font-display)',
+                            fontSize: 'clamp(2rem, 4vw, 3.4rem)',
+                            color: '#F0F0FF',
+                            marginBottom: '1rem',
+                        }}
+                    >
+                        Final System Impact
+                    </h2>
+
+                    <p
+                        style={{
+                            maxWidth: 760,
+                            margin: '0 auto',
+                            color: '#8888AA',
+                            fontSize: '1rem',
+                            lineHeight: 1.75,
+                        }}
+                    >
+                        SystemForge evaluates architectural improvements
+                        beyond diagrams. The platform measures reliability,
+                        scalability, workflow efficiency, and deployment
+                        readiness to provide a complete engineering outcome.
+                    </p>
+                </motion.div>
+
+                {/* Metrics Grid */}
+                <div
+                    style={{
+                        display: 'grid',
+                        gridTemplateColumns:
+                            'repeat(auto-fit, minmax(260px, 1fr))',
+                        gap: '1.4rem',
+                        marginBottom: '3rem',
+                    }}
+                >
+                    {metricCards.map((item, index) => (
+                        <MetricCard
+                            key={index}
+                            item={item}
+                            index={index}
+                        />
+                    ))}
+                </div>
+
+                {/* Closing Block */}
+                <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{
+                        delay: 0.35,
+                        duration: 0.6,
+                    }}
+                    style={{
+                        border: '1px solid rgba(0,212,255,0.12)',
+                        background: 'rgba(0,212,255,0.03)',
+                        borderRadius: 10,
+                        padding: '2.5rem',
+                        textAlign: 'center',
+                    }}
+                >
+                    <div
+                        style={{
+                            fontFamily: 'var(--font-mono)',
+                            fontSize: '0.72rem',
+                            color: '#00D4FF',
+                            letterSpacing: '0.22em',
+                            marginBottom: '0.8rem',
+                        }}
+                    >
+                        SYSTEMFORGE RESULT
+                    </div>
+
+                    <div
+                        style={{
+                            fontFamily: 'var(--font-display)',
+                            fontSize: '1.1rem',
+                            color: '#F0F0FF',
+                            marginBottom: '0.8rem',
+                        }}
+                    >
+                        Workflow Redesign + Production Validation
+                        in One Engine
+                    </div>
+
+                    <p
+                        style={{
+                            maxWidth: 780,
+                            margin: '0 auto',
+                            color: '#8888AA',
+                            lineHeight: 1.7,
+                            fontSize: '0.95rem',
+                        }}
+                    >
+                        The final output is not just a workflow redesign.
+                        It is a production-grade system strategy with
+                        measurable business impact, operational clarity,
+                        and infrastructure confidence.
+                    </p>
+
+                    {/* Download Button INSIDE final card */}
+                    <div
+                        style={{
+                            marginTop: '32px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <button
+                            onClick={onDownloadReport}
+                            style={{
+                                background:
+                                    'linear-gradient(135deg, #2563eb, #1d4ed8)',
+                                color: '#fff',
+                                border: 'none',
+                                padding: '18px 42px',
+                                borderRadius: '14px',
+                                fontSize: '16px',
+                                fontWeight: 700,
+                                cursor: 'pointer',
+                                boxShadow:
+                                    '0 12px 32px rgba(37,99,235,0.25)',
+                                transition: 'all 0.3s ease',
+                            }}
+                            onMouseEnter={(e) => {
+                                e.currentTarget.style.transform =
+                                    'translateY(-2px)';
+                            }}
+                            onMouseLeave={(e) => {
+                                e.currentTarget.style.transform =
+                                    'translateY(0px)';
+                            }}
+                        >
+                            Download Architecture Report
+                        </button>
+                    </div>
+                </motion.div>
+            </div>
+        </section>
+    );
+}

frontend/components/architecture/FinalArchitectureBlueprint.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import type { ArchitectureLayer } from '../../lib/types';
+
+interface FinalArchitectureBlueprintProps {
+    layers: ArchitectureLayer[];
+}
+
+function LayerCard({
+    layer,
+    index,
+}: {
+    layer: ArchitectureLayer;
+    index: number;
+}) {
+    const colors = ['#00D4FF', '#FFB800', '#00FF9C', '#E30913'];
+    const color = colors[index % colors.length];
+
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+                delay: index * 0.12,
+                duration: 0.55,
+            }}
+            whileHover={{
+                y: -4,
+            }}
+            style={{
+                border: `1px solid ${color}20`,
+                background: `${color}05`,
+                borderRadius: 10,
+                padding: '2rem',
+                backdropFilter: 'blur(14px)',
+                boxShadow: `0 0 30px ${color}08`,
+            }}
+        >
+            {/* Header */}
+            <div
+                style={{
+                    marginBottom: '1.5rem',
+                }}
+            >
+                <div
+                    style={{
+                        fontFamily: 'var(--font-mono)',
+                        fontSize: '0.72rem',
+                        color,
+                        letterSpacing: '0.22em',
+                        marginBottom: '0.5rem',
+                    }}
+                >
+                    LAYER {String(index + 1).padStart(2, '0')}
+                </div>
+
+                <div
+                    style={{
+                        fontFamily: 'var(--font-display)',
+                        fontSize: '1rem',
+                        color: '#F0F0FF',
+                        letterSpacing: '0.06em',
+                        marginBottom: '0.5rem',
+                    }}
+                >
+                    {layer.title}
+                </div>
+
+                <div
+                    style={{
+                        color: '#8888AA',
+                        fontSize: '0.92rem',
+                        lineHeight: 1.6,
+                    }}
+                >
+                    {layer.description}
+                </div>
+            </div>
+
+            {/* Items */}
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '0.8rem',
+                }}
+            >
+                {layer.items.map((item, i) => (
+                    <div
+                        key={i}
+                        style={{
+                            display: 'flex',
+                            gap: '0.8rem',
+                            alignItems: 'flex-start',
+                        }}
+                    >
+                        <span
+                            style={{
+                                color,
+                                fontSize: '0.8rem',
+                                marginTop: '2px',
+                            }}
+                        >
+                            ●
+                        </span>
+
+                        <div
+                            style={{
+                                color: '#F0F0FF',
+                                fontSize: '0.92rem',
+                                lineHeight: 1.6,
+                            }}
+                        >
+                            {item}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </motion.div>
+    );
+}
+
+export default function FinalArchitectureBlueprint({
+    layers,
+}: FinalArchitectureBlueprintProps) {
+    return (
+        <section
+            id="architecture-blueprint"
+            style={{
+                position: 'relative',
+                zIndex: 10,
+                width: '100%',
+                padding: '5rem 2rem',
+            }}
+        >
+            <div
+                style={{
+                    maxWidth: 1400,
+                    margin: '0 auto',
+                }}
+            >
+                {/* Section Header */}
+                <motion.div
+                    initial={{ opacity: 0, y: 18 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.55 }}
+                    style={{
+                        textAlign: 'center',
+                        marginBottom: '3.5rem',
+                    }}
+                >
+                    <div
+                        style={{
+                            fontFamily: 'var(--font-mono)',
+                            fontSize: '0.75rem',
+                            color: '#E30913',
+                            letterSpacing: '0.26em',
+                            marginBottom: '0.8rem',
+                        }}
+                    >
+                        PRODUCTION SYSTEM BLUEPRINT
+                    </div>
+
+                    <h2
+                        style={{
+                            fontFamily: 'var(--font-display)',
+                            fontSize: 'clamp(2rem, 4vw, 3.8rem)',
+                            color: '#F0F0FF',
+                            marginBottom: '1rem',
+                        }}
+                    >
+                        Final Architecture Blueprint
+                    </h2>
+
+                    <p
+                        style={{
+                            maxWidth: 820,
+                            margin: '0 auto',
+                            color: '#8888AA',
+                            fontSize: '1rem',
+                            lineHeight: 1.75,
+                        }}
+                    >
+                        SystemForge produces a production-ready
+                        architecture blueprint covering orchestration,
+                        inference, infrastructure, observability,
+                        deployment, and operational reliability.
+                    </p>
+                </motion.div>
+
+                {/* Architecture Layers */}
+                <div
+                    style={{
+                        display: 'grid',
+                        gridTemplateColumns:
+                            'repeat(auto-fit, minmax(320px, 1fr))',
+                        gap: '1.6rem',
+                    }}
+                >
+                    {layers.map((layer, index) => (
+                        <LayerCard
+                            key={index}
+                            layer={layer}
+                            index={index}
+                        />
+                    ))}
+                </div>
+
+                {/* Bottom Summary */}
+                <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{
+                        delay: 0.4,
+                        duration: 0.6,
+                    }}
+                    style={{
+                        marginTop: '3rem',
+                        border: '1px solid rgba(227,9,19,0.16)',
+                        background: 'rgba(227,9,19,0.03)',
+                        borderRadius: 10,
+                        padding: '2rem',
+                        textAlign: 'center',
+                    }}
+                >
+                    <div
+                        style={{
+                            fontFamily: 'var(--font-mono)',
+                            fontSize: '0.72rem',
+                            color: '#E30913',
+                            letterSpacing: '0.22em',
+                            marginBottom: '0.8rem',
+                        }}
+                    >
+                        FINAL OUTCOME
+                    </div>
+
+                    <div
+                        style={{
+                            fontFamily: 'var(--font-display)',
+                            fontSize: '1.15rem',
+                            color: '#F0F0FF',
+                            marginBottom: '0.8rem',
+                        }}
+                    >
+                        From Manual Operations → Production-Ready AI System
+                    </div>
+
+                    <p
+                        style={{
+                            color: '#8888AA',
+                            maxWidth: 760,
+                            margin: '0 auto',
+                            lineHeight: 1.7,
+                            fontSize: '0.95rem',
+                        }}
+                    >
+                        Workflow redesign, architecture validation,
+                        AI inference, and deployment-ready system
+                        planning — all inside one engineering platform.
+                    </p>
+                </motion.div>
+            </div>
+        </section>
+    );
+}

frontend/components/layout/Header.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+export default function Header() {
+  return (
+    <motion.header
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6, ease: 'easeOut' }}
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 100,
+        borderBottom: '1px solid rgba(227,9,19,0.15)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
+        background: 'rgba(7,7,15,0.85)',
+        padding: '0 2rem',
+        height: '60px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      {/* Logo */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+        <motion.div
+          animate={{ rotate: 360 }}
+          transition={{ duration: 8, repeat: Infinity, ease: 'linear' }}
+          style={{
+            width: 28,
+            height: 28,
+            border: '2px solid #E30913',
+            borderRadius: 4,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <div
+            style={{
+              width: 10,
+              height: 10,
+              background: '#E30913',
+              borderRadius: 2,
+              boxShadow: '0 0 12px rgba(227,9,19,0.8)',
+            }}
+          />
+        </motion.div>
+        <div>
+          <div
+            style={{
+              fontFamily: 'var(--font-display)',
+              fontSize: '0.85rem',
+              fontWeight: 700,
+              color: '#F0F0FF',
+              letterSpacing: '0.12em',
+            }}
+          >
+            SYSTEM<span style={{ color: '#E30913' }}>FORGE</span>
+          </div>
+          <div
+            style={{
+              fontFamily: 'var(--font-mono)',
+              fontSize: '0.55rem',
+              color: '#8888AA',
+              letterSpacing: '0.2em',
+              marginTop: -2,
+            }}
+          >
+            AI ARCHITECTURE ENGINE
+          </div>
+        </div>
+      </div>
+
+      {/* Status pills */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1.5rem' }}>
+        <StatusPill label="AMD ROCm" color="#E30913" />
+        <StatusPill label="Qwen 2.5" color="#00D4FF" />
+        <StatusPill label="vLLM" color="#00FF9C" pulse />
+      </div>
+
+      {/* AMD Badge */}
+      <div
+        style={{
+          fontFamily: 'var(--font-display)',
+          fontSize: '0.6rem',
+          fontWeight: 700,
+          letterSpacing: '0.15em',
+          color: '#E30913',
+          border: '1px solid rgba(227,9,19,0.4)',
+          padding: '4px 10px',
+          borderRadius: 2,
+        }}
+      >
+        AMD HACKATHON · TRACK 1
+      </div>
+    </motion.header>
+  );
+}
+
+function StatusPill({ label, color, pulse }: { label: string; color: string; pulse?: boolean }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+      <motion.div
+        animate={pulse ? { opacity: [1, 0.3, 1] } : {}}
+        transition={{ duration: 1.5, repeat: Infinity }}
+        style={{
+          width: 6,
+          height: 6,
+          borderRadius: '50%',
+          background: color,
+          boxShadow: `0 0 8px ${color}`,
+        }}
+      />
+      <span
+        style={{
+          fontFamily: 'var(--font-mono)',
+          fontSize: '0.65rem',
+          color: '#8888AA',
+          letterSpacing: '0.08em',
+        }}
+      >
+        {label}
+      </span>
+    </div>
+  );
+}

frontend/components/providers/AntdProvider.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { ConfigProvider, theme } from 'antd';
+import React from 'react';
+
+const amdTheme = {
+  algorithm: theme.darkAlgorithm,
+  token: {
+    colorPrimary: '#E30913',
+    colorBgBase: '#07070F',
+    colorBgContainer: '#0D0D1A',
+    colorBgElevated: '#1A1A2E',
+    colorBorder: 'rgba(255,255,255,0.06)',
+    colorText: '#F0F0FF',
+    colorTextSecondary: '#8888AA',
+    fontFamily: "'Rajdhani', sans-serif",
+    borderRadius: 2,
+    wireframe: false,
+  },
+  components: {
+    Button: { colorPrimary: '#E30913', algorithm: true },
+    Input: {
+      colorBgContainer: '#0D0D1A',
+      activeBorderColor: '#E30913',
+      hoverBorderColor: 'rgba(227,9,19,0.5)',
+    },
+  },
+};
+
+export default function AntdProvider({ children }: { children: React.ReactNode }) {
+  return <ConfigProvider theme={amdTheme}>{children}</ConfigProvider>;
+}

frontend/components/ui/HeroSection.tsx

@@ -0,0 +1,369 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import WorkflowBuilder from '../workflow/WorkflowBuilder';
+
+interface HeroSectionProps {
+  onSubmit: (workflowText: string) => void;
+  isRunning: boolean;
+}
+
+const EXAMPLE_WORKFLOWS = [
+  {
+    title: 'E-commerce Operations Chaos',
+    flow:
+      'Orders come from Shopify → Team manually updates inventory in Excel → Slack message sent to warehouse → Warehouse updates delivery status manually → Customer support manually handles delays',
+  },
+  {
+    title: 'Hospital Approval Workflow',
+    flow:
+      'Patient fills intake form → Reception manually verifies insurance → Doctor manually reviews reports → Lab sends PDF reports by email → Admin manually updates billing',
+  },
+  {
+    title: 'Hiring Workflow Mess',
+    flow:
+      'Resume comes from LinkedIn → HR manually shortlists candidates → Interview scheduling via WhatsApp → Feedback collected in Google Sheets → Offer approval delayed manually',
+  },
+  {
+    title: 'Startup Support Workflow',
+    flow:
+      'Customer submits issue → Support team checks CRM manually → Engineering gets pinged in Slack → Fix status tracked in Notion → Customer gets manual update email',
+  },
+];
+
+const containerVariants = {
+  hidden: {},
+  visible: {
+    transition: {
+      staggerChildren: 0.14,
+    },
+  },
+};
+
+const fadeUp = {
+  hidden: {
+    opacity: 0,
+    y: 30,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.7,
+      ease: 'easeOut',
+    },
+  },
+};
+
+export default function HeroSection({
+  onSubmit,
+  isRunning,
+}: HeroSectionProps) {
+  return (
+    <section
+      style={{
+        position: 'relative',
+        zIndex: 10,
+        minHeight: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '120px 24px 80px',
+      }}
+    >
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        style={{
+          width: '100%',
+          maxWidth: '1200px',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        {/* EYEBROW */}
+        <motion.div
+          variants={fadeUp}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            marginBottom: '28px',
+          }}
+        >
+          <div
+            style={{
+              width: 60,
+              height: 1,
+              background:
+                'linear-gradient(90deg, transparent, rgba(227,9,19,0.7))',
+            }}
+          />
+
+          <span
+            style={{
+              fontFamily: 'var(--font-mono)',
+              fontSize: '0.72rem',
+              letterSpacing: '0.35em',
+              color: '#E30913',
+            }}
+          >
+            WORKFLOW REDESIGN ENGINE
+          </span>
+
+          <div
+            style={{
+              width: 60,
+              height: 1,
+              background:
+                'linear-gradient(90deg, rgba(227,9,19,0.7), transparent)',
+            }}
+          />
+        </motion.div>
+
+        {/* TITLE */}
+        <motion.div
+          variants={fadeUp}
+          style={{
+            textAlign: 'center',
+            marginBottom: '28px',
+          }}
+        >
+          <h1
+            style={{
+              fontFamily: 'var(--font-display)',
+              fontSize: 'clamp(4rem, 10vw, 8rem)',
+              lineHeight: 0.95,
+              fontWeight: 900,
+              letterSpacing: '-0.03em',
+              marginBottom: '16px',
+            }}
+          >
+            <span style={{ color: '#F0F0FF' }}>
+              SYSTEM
+            </span>
+
+            <span
+              style={{
+                color: '#E30913',
+                textShadow:
+                  '0 0 30px rgba(227,9,19,0.5), 0 0 80px rgba(227,9,19,0.25)',
+              }}
+            >
+              FORGE
+            </span>
+          </h1>
+
+          <div
+            style={{
+              fontFamily: 'var(--font-display)',
+              fontSize: 'clamp(1.5rem, 3vw, 2.6rem)',
+              color: '#8888AA',
+              letterSpacing: '0.08em',
+            }}
+          >
+            Messy Workflow → AI-Native Architecture
+          </div>
+        </motion.div>
+
+        {/* TAGLINE */}
+        <motion.p
+          variants={fadeUp}
+          style={{
+            maxWidth: '860px',
+            textAlign: 'center',
+            fontSize: 'clamp(1rem, 2vw, 1.25rem)',
+            lineHeight: 1.8,
+            color: '#8888AA',
+            marginBottom: '52px',
+          }}
+        >
+          Transform approvals, spreadsheets, manual handoffs, broken operations,
+          and disconnected systems into scalable production-grade AI workflows
+          powered by{' '}
+          <span
+            style={{
+              color: '#00D4FF',
+              textShadow:
+                '0 0 20px rgba(0,212,255,0.18)',
+            }}
+          >
+            AMD-accelerated Qwen models
+          </span>
+          .
+        </motion.p>
+
+        {/* AGENT FLOW */}
+        <motion.div
+          variants={fadeUp}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexWrap: 'wrap',
+            gap: '10px',
+            marginBottom: '56px',
+          }}
+        >
+          {[
+            {
+              num: '01',
+              title: 'ARCHITECT',
+              color: '#00D4FF',
+            },
+            {
+              num: '02',
+              title: 'CRITIC',
+              color: '#FFB800',
+            },
+            {
+              num: '03',
+              title: 'REFINER',
+              color: '#00FF9C',
+            },
+          ].map((item, index) => (
+            <React.Fragment key={item.title}>
+              <motion.div
+                whileHover={{
+                  scale: 1.03,
+                  y: -2,
+                }}
+                style={{
+                  padding: '14px 30px',
+                  border: `1px solid ${item.color}30`,
+                  background: `${item.color}08`,
+                  borderRadius: 4,
+                  minWidth: 190,
+                  textAlign: 'center',
+                }}
+              >
+                <div
+                  style={{
+                    fontFamily: 'var(--font-mono)',
+                    fontSize: '0.7rem',
+                    color: item.color,
+                    letterSpacing: '0.25em',
+                    marginBottom: 4,
+                  }}
+                >
+                  {item.num}
+                </div>
+
+                <div
+                  style={{
+                    fontFamily: 'var(--font-display)',
+                    fontSize: '0.95rem',
+                    color: item.color,
+                    letterSpacing: '0.18em',
+                  }}
+                >
+                  {item.title}
+                </div>
+              </motion.div>
+
+              {index < 2 && (
+                <div
+                  style={{
+                    color: '#444466',
+                    fontSize: '1.2rem',
+                  }}
+                >
+                  →
+                </div>
+              )}
+            </React.Fragment>
+          ))}
+        </motion.div>
+
+        {/* WORKFLOW BUILDER */}
+        <motion.div
+          variants={fadeUp}
+          style={{
+            width: '100%',
+            maxWidth: '980px',
+            marginBottom: '48px',
+          }}
+        >
+          <WorkflowBuilder
+            onGenerate={(steps: string[]) =>
+              onSubmit(steps.join(' → '))
+            }
+            isRunning={isRunning}
+            onWorkflowSelect={() => { }}
+            onWorkflowChange={() => { }}
+          />
+        </motion.div>
+
+        {/* EXAMPLE WORKFLOWS */}
+        <motion.div
+          variants={fadeUp}
+          style={{
+            width: '100%',
+            maxWidth: '980px',
+          }}
+        >
+          <div
+            style={{
+              fontFamily: 'var(--font-mono)',
+              fontSize: '0.7rem',
+              letterSpacing: '0.28em',
+              color: '#444466',
+              marginBottom: '18px',
+              textAlign: 'center',
+            }}
+          >
+            EXAMPLE_MESSY_WORKFLOWS
+          </div>
+
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '18px',
+            }}
+          >
+            {EXAMPLE_WORKFLOWS.map((item, index) => (
+              <motion.div
+                key={index}
+                whileHover={{
+                  y: -2,
+                }}
+                style={{
+                  background:
+                    'rgba(0,212,255,0.04)',
+                  border:
+                    '1px solid rgba(0,212,255,0.12)',
+                  borderRadius: 4,
+                  padding: '22px',
+                  cursor: 'pointer',
+                }}
+              >
+                <div
+                  style={{
+                    fontFamily: 'var(--font-display)',
+                    fontSize: '1.1rem',
+                    color: '#00D4FF',
+                    marginBottom: '12px',
+                  }}
+                >
+                  {item.title}
+                </div>
+
+                <div
+                  style={{
+                    fontFamily: 'var(--font-mono)',
+                    fontSize: '0.88rem',
+                    lineHeight: 1.8,
+                    color: '#8888AA',
+                  }}
+                >
+                  {item.flow}
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+}

frontend/components/ui/Navbar.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const navItems = [
+    {
+        label: 'Workflow Engine',
+        target: 'workflow-engine',
+    },
+    {
+        label: 'Agent Intelligence',
+        target: 'agent-intelligence',
+    },
+    {
+        label: 'Architecture Blueprint',
+        target: 'architecture-blueprint',
+    },
+    {
+        label: 'AMD Inference',
+        target: 'amd-inference',
+    },
+];
+
+export default function Navbar() {
+    const scrollToSection = (id: string) => {
+        const section = document.getElementById(id);
+
+        if (section) {
+            section.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+            });
+        }
+    };
+
+    return (
+        <header
+            style={{
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                zIndex: 100,
+                backdropFilter: 'blur(20px)',
+                background: 'rgba(3, 4, 10, 0.75)',
+                borderBottom:
+                    '1px solid rgba(255,255,255,0.04)',
+            }}
+        >
+            <div
+                style={{
+                    maxWidth: '1400px',
+                    margin: '0 auto',
+                    padding: '18px 28px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: '24px',
+                }}
+            >
+                {/* Logo */}
+                <div
+                    style={{
+                        fontFamily: 'var(--font-display)',
+                        fontSize: '1rem',
+                        color: '#F0F0FF',
+                        letterSpacing: '0.08em',
+                        cursor: 'pointer',
+                    }}
+                    onClick={() =>
+                        window.scrollTo({
+                            top: 0,
+                            behavior: 'smooth',
+                        })
+                    }
+                >
+                    SYSTEM
+                    <span
+                        style={{
+                            color: '#E30913',
+                        }}
+                    >
+                        FORGE
+                    </span>
+                </div>
+
+                {/* Nav Links */}
+                <div
+                    style={{
+                        display: 'flex',
+                        gap: '2rem',
+                        alignItems: 'center',
+                    }}
+                >
+                    {navItems.map((item, index) => (
+                        <motion.button
+                            key={index}
+                            whileHover={{
+                                y: -2,
+                            }}
+                            onClick={() =>
+                                scrollToSection(item.target)
+                            }
+                            style={{
+                                background: 'transparent',
+                                border: 'none',
+                                cursor: 'pointer',
+                                color: '#8888AA',
+                                fontFamily: 'var(--font-mono)',
+                                fontSize: '0.72rem',
+                                letterSpacing: '0.12em',
+                            }}
+                        >
+                            {item.label}
+                        </motion.button>
+                    ))}
+                </div>
+
+                {/* Status */}
+                <div
+                    style={{
+                        padding: '8px 14px',
+                        border:
+                            '1px solid rgba(0,255,156,0.15)',
+                        borderRadius: 6,
+                        background:
+                            'rgba(0,255,156,0.03)',
+                        fontFamily: 'var(--font-mono)',
+                        fontSize: '0.65rem',
+                        color: '#00FF9C',
+                        letterSpacing: '0.12em',
+                    }}
+                >
+                    AMD READY
+                </div>
+            </div>
+        </header>
+    );
+}

frontend/components/workflow/BeforeAfterWorkflow.tsx

@@ -0,0 +1,284 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import FlowchartNode from './FlowchartNode';
+import type { WorkflowTransformation } from '../../lib/types';
+
+interface BeforeAfterWorkflowProps {
+    data: WorkflowTransformation;
+}
+
+function detectNodeType(step: string) {
+    const text = step.toLowerCase();
+
+    if (
+        text.includes('approve') ||
+        text.includes('approval')
+    ) {
+        return 'approval';
+    }
+
+    if (
+        text.includes('decision') ||
+        text.includes('verify') ||
+        text.includes('check')
+    ) {
+        return 'decision';
+    }
+
+    if (
+        text.includes('api') ||
+        text.includes('service')
+    ) {
+        return 'api';
+    }
+
+    if (
+        text.includes('queue') ||
+        text.includes('kafka') ||
+        text.includes('async')
+    ) {
+        return 'queue';
+    }
+
+    if (
+        text.includes('llm') ||
+        text.includes('ai') ||
+        text.includes('parser')
+    ) {
+        return 'llm';
+    }
+
+    if (
+        text.includes('human') ||
+        text.includes('manual') ||
+        text.includes('review')
+    ) {
+        return 'human_review';
+    }
+
+    if (
+        text.includes('email') ||
+        text.includes('notify') ||
+        text.includes('notification')
+    ) {
+        return 'notification';
+    }
+
+    return 'task';
+}
+
+function mapWorkflowTypeToFlowchartType(type: string) {
+    switch (type) {
+        case 'input':
+            return 'input';
+
+        case 'task':
+            return 'task';
+
+        case 'decision':
+            return 'decision';
+
+        case 'automation':
+            return 'automation';
+
+        case 'approval':
+            return 'approval';
+
+        case 'output':
+            return 'output';
+
+        case 'api':
+            return 'api';
+
+        case 'queue':
+            return 'queue';
+
+        case 'llm':
+            return 'llm';
+
+        case 'human_review':
+            return 'human_review';
+
+        case 'notification':
+            return 'notification';
+
+        default:
+            return 'task';
+    }
+}
+
+export default function BeforeAfterWorkflow({
+    data,
+}: BeforeAfterWorkflowProps) {
+
+    if (!data) {
+        return null;
+    }
+
+    return (
+        <section
+            id="workflow-engine"
+            style={{
+                position: 'relative',
+                zIndex: 10,
+                width: '100%',
+                padding: '6rem 2rem',
+            }}
+        >
+            <div
+                style={{
+                    maxWidth: 1500,
+                    margin: '0 auto',
+                }}
+            >
+                {/* Header */}
+                <motion.div
+                    initial={{
+                        opacity: 0,
+                        y: 20,
+                    }}
+                    animate={{
+                        opacity: 1,
+                        y: 0,
+                    }}
+                    transition={{
+                        duration: 0.5,
+                    }}
+                    style={{
+                        textAlign: 'center',
+                        marginBottom: '5rem',
+                    }}
+                >
+                    <div
+                        style={{
+                            fontFamily: 'var(--font-mono)',
+                            fontSize: '0.75rem',
+                            color: '#E30913',
+                            letterSpacing: '0.28em',
+                            marginBottom: '1rem',
+                        }}
+                    >
+                        WORKFLOW REDESIGN ENGINE
+                    </div>
+
+                    <h2
+                        style={{
+                            fontFamily: 'var(--font-display)',
+                            fontSize:
+                                'clamp(2rem, 4vw, 4.5rem)',
+                            color: '#F0F0FF',
+                            marginBottom: '1rem',
+                        }}
+                    >
+                        Before → After Transformation
+                    </h2>
+
+                    <p
+                        style={{
+                            maxWidth: 800,
+                            margin: '0 auto',
+                            color: '#8888AA',
+                            fontSize: '1rem',
+                            lineHeight: 1.8,
+                        }}
+                    >
+                        Visualize how fragmented
+                        manual operations transform
+                        into production-grade,
+                        AI-native operational systems.
+                    </p>
+                </motion.div>
+
+                {/* Main Layout */}
+                <div
+                    style={{
+                        display: 'grid',
+                        gridTemplateColumns:
+                            '1fr 120px 1fr',
+                        gap: '2rem',
+                        alignItems: 'start',
+                    }}
+                >
+                    {/* BEFORE FLOW */}
+                    <div>
+                        <div
+                            style={{
+                                textAlign: 'center',
+                                marginBottom: '2rem',
+                                color: '#FFB800',
+                                fontFamily: 'var(--font-mono)',
+                                letterSpacing: '0.2em',
+                                fontSize: '0.8rem',
+                            }}
+                        >
+                            BEFORE — MANUAL WORKFLOW
+                        </div>
+
+                        {data.before.map((step, index) => (
+                            <FlowchartNode
+                                key={index}
+                                title={step}
+                                type={detectNodeType(step)}
+                                isLast={index === data.before.length - 1}
+                            />
+                        ))}
+                    </div>
+
+                    {/* CENTER TRANSFORMATION */}
+                    <div
+                        style={{
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            minHeight: 800,
+                        }}
+                    >
+                        <motion.div
+                            animate={{
+                                x: [0, 10, 0],
+                            }}
+                            transition={{
+                                repeat: Infinity,
+                                duration: 2,
+                            }}
+                            style={{
+                                fontSize: '4rem',
+                                color: '#E30913',
+                                fontWeight: 700,
+                            }}
+                        >
+                            →
+                        </motion.div>
+                    </div>
+
+                    {/* AFTER FLOW */}
+                    <div>
+                        <div
+                            style={{
+                                textAlign: 'center',
+                                marginBottom: '2rem',
+                                color: '#00FF9C',
+                                fontFamily: 'var(--font-mono)',
+                                letterSpacing: '0.2em',
+                                fontSize: '0.8rem',
+                            }}
+                        >
+                            AFTER — AI NATIVE SYSTEM
+                        </div>
+
+                        {data.after.map((step, index) => (
+                            <FlowchartNode
+                                key={index}
+                                title={step}
+                                type={detectNodeType(step)}
+                                isLast={index === data.after.length - 1}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

frontend/components/workflow/FlowchartNode.tsx

@@ -0,0 +1,249 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export type FlowchartNodeType =
+    | 'input'
+    | 'task'
+    | 'decision'
+    | 'automation'
+    | 'approval'
+    | 'output'
+    | 'api'
+    | 'queue'
+    | 'llm'
+    | 'human_review'
+    | 'notification';
+
+interface FlowchartNodeProps {
+    title: string;
+    type: FlowchartNodeType;
+    subtitle?: string;
+    isLast?: boolean;
+}
+
+function getNodeAccent(
+    type: FlowchartNodeType
+) {
+    switch (type) {
+        case 'input':
+            return '#06B6D4';
+
+        case 'automation':
+            return '#F97316';
+
+        case 'output':
+            return '#22C55E';
+
+        case 'decision':
+            return '#F59E0B';
+
+        case 'api':
+            return '#3B82F6';
+
+        case 'queue':
+            return '#8B5CF6';
+
+        case 'llm':
+            return '#EC4899';
+
+        case 'approval':
+            return '#22C55E';
+
+        case 'human_review':
+            return '#F97316';
+
+        case 'notification':
+            return '#06B6D4';
+
+        default:
+            return '#00D4FF';
+    }
+}
+
+function getNodeIcon(
+    type: FlowchartNodeType
+) {
+    switch (type) {
+        case 'input':
+            return '□';
+
+        case 'automation':
+            return '⚡';
+
+        case 'output':
+            return '✓';
+
+        case 'decision':
+            return '?';
+
+        case 'api':
+            return '⚡';
+
+        case 'queue':
+            return '⇄';
+
+        case 'llm':
+            return '🤖';
+
+        case 'approval':
+            return '✓';
+
+        case 'human_review':
+            return '🧑';
+
+        case 'notification':
+            return '📩';
+
+        default:
+            return '□';
+    }
+}
+
+export default function FlowchartNode({
+    title,
+    type,
+    subtitle,
+    isLast = false,
+}: FlowchartNodeProps) {
+    const accent = getNodeAccent(type);
+    const icon = getNodeIcon(type);
+
+    const isDecision =
+        type === 'decision';
+
+    return (
+        <motion.div
+            initial={{
+                opacity: 0,
+                y: 20,
+            }}
+            whileInView={{
+                opacity: 1,
+                y: 0,
+            }}
+            viewport={{
+                once: true,
+            }}
+            transition={{
+                duration: 0.45,
+            }}
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                marginBottom: isLast ? 0 : 30,
+            }}
+        >
+            {/* NODE */}
+            <div
+                style={{
+                    width: isDecision ? 220 : 360,
+                    minHeight: isDecision
+                        ? 220
+                        : 150,
+
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+
+                    border: `1px solid ${accent}35`,
+                    background: `${accent}08`,
+                    backdropFilter: 'blur(14px)',
+
+                    padding: isDecision
+                        ? '20px'
+                        : '28px',
+
+                    textAlign: 'center',
+
+                    borderRadius: isDecision
+                        ? '28px'
+                        : '22px',
+
+                    transform: isDecision
+                        ? 'rotate(45deg)'
+                        : 'none',
+
+                    boxShadow: `0 0 0 1px ${accent}08`,
+                }}
+            >
+                <div
+                    style={{
+                        width: '100%',
+                        maxWidth: isDecision
+                            ? '78%'
+                            : '100%',
+
+                        transform: isDecision
+                            ? 'rotate(-45deg)'
+                            : 'none',
+
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}
+                >
+                    {/* ICON ONLY */}
+                    <div
+                        style={{
+                            color: accent,
+                            fontSize: '24px',
+                            fontWeight: 700,
+                            marginBottom: '14px',
+                            lineHeight: 1,
+                        }}
+                    >
+                        {icon}
+                    </div>
+
+                    {/* TITLE ONLY */}
+                    <div
+                        style={{
+                            color: '#F0F0FF',
+                            fontSize: isDecision
+                                ? '15px'
+                                : '16px',
+                            fontWeight: 600,
+                            lineHeight: 1.8,
+                            letterSpacing: '0.01em',
+                            wordBreak: 'break-word',
+                            whiteSpace: 'normal',
+                        }}
+                    >
+                        {title}
+                    </div>
+
+                    {/* Optional subtitle */}
+                    {subtitle && (
+                        <div
+                            style={{
+                                marginTop: '10px',
+                                color: '#94A3B8',
+                                fontSize: '12px',
+                                lineHeight: 1.6,
+                            }}
+                        >
+                            {subtitle}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* CONNECTOR LINE */}
+            {!isLast && (
+                <div
+                    style={{
+                        width: '2px',
+                        height: '38px',
+                        marginTop: '14px',
+                        background:
+                            'rgba(255,255,255,0.08)',
+                    }}
+                />
+            )}
+        </motion.div>
+    );
+}

frontend/components/workflow/WorkflowBuilder.tsx

@@ -0,0 +1,550 @@
+'use client';
+
+import React, { useState } from 'react';
+import { EXAMPLE_WORKFLOWS } from '../../lib/exampleWorkflows';
+import { WorkflowNodeType, WorkflowStep } from './WorkflowTypes';
+
+interface WorkflowBuilderProps {
+    onGenerate: (workflowSteps: string[]) => void;
+    isRunning: boolean;
+    onWorkflowSelect: (workflowId: string | null) => void;
+    onWorkflowChange: () => void;
+}
+
+const STEP_TYPES = [
+    { value: 'input', label: 'Input', icon: '📥' },
+    { value: 'task', label: 'Task', icon: '⚙️' },
+    { value: 'decision', label: 'Decision', icon: '🔀' },
+    { value: 'automation', label: 'Automation', icon: '🤖' },
+    { value: 'approval', label: 'Approval', icon: '✅' },
+    { value: 'output', label: 'Output', icon: '📤' },
+    { value: 'api', label: 'API', icon: '🔌' },
+    { value: 'queue', label: 'Queue', icon: '📬' },
+    { value: 'llm', label: 'LLM', icon: '🧠' },
+    {
+        value: 'human_review',
+        label: 'Human Review',
+        icon: '👤',
+    },
+    {
+        value: 'notification',
+        label: 'Notification',
+        icon: '🔔',
+    },
+];
+
+const DEFAULT_STEPS: WorkflowStep[] = [
+    {
+        id: '1',
+        type: 'input',
+        label: '',
+    },
+    {
+        id: '2',
+        type: 'task',
+        label: '',
+    },
+    {
+        id: '3',
+        type: 'decision',
+        label: '',
+    },
+];
+
+export default function WorkflowBuilder({
+    onGenerate,
+    isRunning,
+    onWorkflowSelect,
+    onWorkflowChange,
+}: WorkflowBuilderProps) {
+    const [selectedExample, setSelectedExample] =
+        useState('');
+
+    const [workflowSteps, setWorkflowSteps] =
+        useState<WorkflowStep[]>(DEFAULT_STEPS);
+
+    const placeholders = [
+        'Step 1: What triggers your workflow?',
+        'Step 2: What happens next?',
+        'Step 3: Who approves or decides?',
+    ];
+
+    const handleExampleChange = (
+        e: React.ChangeEvent<HTMLSelectElement>
+    ) => {
+        const workflowId = e.target.value;
+
+        setSelectedExample(workflowId);
+
+        // reset old results
+        onWorkflowChange();
+
+        if (!workflowId) {
+            onWorkflowSelect(null);
+            setWorkflowSteps(DEFAULT_STEPS);
+            return;
+        }
+
+        onWorkflowSelect(workflowId);
+
+        const selectedWorkflow =
+            EXAMPLE_WORKFLOWS.find(
+                (workflow) =>
+                    workflow.id === workflowId
+            );
+
+        if (selectedWorkflow) {
+            setWorkflowSteps(
+                selectedWorkflow.before.map(
+                    (step) => ({
+                        id: step.id,
+                        type: step.type,
+                        label: step.label,
+                    })
+                )
+            );
+        }
+    };
+
+    const clearExampleWorkflow = () => {
+        setSelectedExample('');
+
+        // reset old results
+        onWorkflowChange();
+
+        onWorkflowSelect(null);
+        setWorkflowSteps(DEFAULT_STEPS);
+    };
+
+    const updateStepLabel = (
+        id: string,
+        value: string
+    ) => {
+        onWorkflowChange();
+
+        setWorkflowSteps((prev) =>
+            prev.map((step) =>
+                step.id === id
+                    ? {
+                        ...step,
+                        label: value,
+                    }
+                    : step
+            )
+        );
+    };
+
+    const updateStepType = (
+        id: string,
+        type: WorkflowNodeType
+    ) => {
+        onWorkflowChange();
+
+        setWorkflowSteps((prev) =>
+            prev.map((step) =>
+                step.id === id
+                    ? {
+                        ...step,
+                        type,
+                    }
+                    : step
+            )
+        );
+    };
+
+    const addWorkflowStep = () => {
+        onWorkflowChange();
+
+        setWorkflowSteps((prev) => [
+            ...prev,
+            {
+                id: Date.now().toString(),
+                type: 'task',
+                label: '',
+            },
+        ]);
+    };
+
+    const removeStep = (id: string) => {
+        if (workflowSteps.length <= 1) return;
+
+        onWorkflowChange();
+
+        setWorkflowSteps((prev) =>
+            prev.filter(
+                (step) => step.id !== id
+            )
+        );
+    };
+
+    const handleGenerate = () => {
+        const cleanedSteps = workflowSteps
+            .map((step) => step.label.trim())
+            .filter(Boolean);
+
+        if (cleanedSteps.length === 0) {
+            alert(
+                'Please add at least one workflow step'
+            );
+            return;
+        }
+
+        onGenerate(cleanedSteps);
+    };
+
+    return (
+        <section
+            style={{
+                maxWidth: '1400px',
+                margin: '0 auto',
+                padding: '40px',
+                border:
+                    '1px solid rgba(255,255,255,0.08)',
+                borderRadius: '24px',
+                background:
+                    'rgba(5, 8, 22, 0.85)',
+                backdropFilter: 'blur(10px)',
+            }}
+        >
+            <div
+                style={{
+                    fontSize: '56px',
+                    fontWeight: 800,
+                    marginBottom: '20px',
+                    color: '#f8fafc',
+                }}
+            >
+                Map Your Current Workflow
+            </div>
+
+            <p
+                style={{
+                    fontSize: '18px',
+                    lineHeight: 1.8,
+                    color: '#94a3b8',
+                    marginBottom: '40px',
+                    maxWidth: '1000px',
+                }}
+            >
+                Add your messy operational
+                process — approvals,
+                spreadsheets, manual
+                handoffs, broken workflows,
+                or disconnected systems.
+                SystemForge will redesign it
+                into a scalable
+                production-grade AI workflow.
+            </p>
+
+            {/* Example Workflow Dropdown */}
+            <div
+                style={{
+                    marginBottom: '28px',
+                }}
+            >
+                <select
+                    value={selectedExample}
+                    onChange={
+                        handleExampleChange
+                    }
+                    style={{
+                        width: '100%',
+                        padding: '20px',
+                        borderRadius: '14px',
+                        background: '#050816',
+                        color: '#fff',
+                        border:
+                            '1px solid rgba(255,255,255,0.08)',
+                        fontSize: '18px',
+                        outline: 'none',
+                    }}
+                >
+                    <option value="">
+                        Load Example Workflow
+                    </option>
+
+                    {EXAMPLE_WORKFLOWS.map(
+                        (workflow) => (
+                            <option
+                                key={
+                                    workflow.id
+                                }
+                                value={
+                                    workflow.id
+                                }
+                            >
+                                {
+                                    workflow.title
+                                }{' '}
+                                —{' '}
+                                {
+                                    workflow.industry
+                                }
+                            </option>
+                        )
+                    )}
+                </select>
+
+                {selectedExample && (
+                    <button
+                        onClick={
+                            clearExampleWorkflow
+                        }
+                        style={{
+                            marginTop: '14px',
+                            background:
+                                'transparent',
+                            border:
+                                '1px solid #ef4444',
+                            color:
+                                '#ef4444',
+                            padding:
+                                '10px 18px',
+                            borderRadius:
+                                '10px',
+                            cursor:
+                                'pointer',
+                            fontWeight: 600,
+                        }}
+                    >
+                        Clear Example
+                        Workflow
+                    </button>
+                )}
+            </div>
+
+            {/* Workflow Steps */}
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection:
+                        'column',
+                    gap: '22px',
+                }}
+            >
+                {workflowSteps.map(
+                    (step, index) => (
+                        <div
+                            key={step.id}
+                            style={{
+                                display:
+                                    'flex',
+                                gap: '14px',
+                                alignItems:
+                                    'center',
+                            }}
+                        >
+                            {/* Step Number */}
+                            <div
+                                style={{
+                                    minWidth:
+                                        '60px',
+                                    fontSize:
+                                        '28px',
+                                    fontWeight: 700,
+                                    color:
+                                        '#00d4ff',
+                                }}
+                            >
+                                {String(
+                                    index + 1
+                                ).padStart(
+                                    2,
+                                    '0'
+                                )}
+                            </div>
+
+                            {/* Step Type */}
+                            <select
+                                value={
+                                    step.type
+                                }
+                                onChange={(
+                                    e
+                                ) =>
+                                    updateStepType(
+                                        step.id,
+                                        e
+                                            .target
+                                            .value as WorkflowNodeType
+                                    )
+                                }
+                                style={{
+                                    width:
+                                        '220px',
+                                    padding:
+                                        '16px',
+                                    borderRadius:
+                                        '12px',
+                                    background:
+                                        '#050816',
+                                    color:
+                                        '#fff',
+                                    border:
+                                        '1px solid rgba(255,255,255,0.08)',
+                                    fontSize:
+                                        '15px',
+                                }}
+                            >
+                                {STEP_TYPES.map(
+                                    (
+                                        type
+                                    ) => (
+                                        <option
+                                            key={
+                                                type.value
+                                            }
+                                            value={
+                                                type.value
+                                            }
+                                        >
+                                            {
+                                                type.icon
+                                            }{' '}
+                                            {
+                                                type.label
+                                            }
+                                        </option>
+                                    )
+                                )}
+                            </select>
+
+                            {/* Step Input */}
+                            <input
+                                type="text"
+                                value={
+                                    step.label
+                                }
+                                onChange={(
+                                    e
+                                ) =>
+                                    updateStepLabel(
+                                        step.id,
+                                        e
+                                            .target
+                                            .value
+                                    )
+                                }
+                                placeholder={
+                                    placeholders[
+                                    index
+                                    ] ||
+                                    `Step ${index + 1}`
+                                }
+                                style={{
+                                    flex: 1,
+                                    padding:
+                                        '18px 20px',
+                                    borderRadius:
+                                        '12px',
+                                    background:
+                                        '#050816',
+                                    color:
+                                        '#fff',
+                                    border:
+                                        '1px solid rgba(255,255,255,0.08)',
+                                    fontSize:
+                                        '18px',
+                                    outline:
+                                        'none',
+                                }}
+                            />
+
+                            {/* Remove Button */}
+                            <button
+                                onClick={() =>
+                                    removeStep(
+                                        step.id
+                                    )
+                                }
+                                style={{
+                                    background:
+                                        'transparent',
+                                    border:
+                                        '1px solid #ef4444',
+                                    color:
+                                        '#ef4444',
+                                    padding:
+                                        '10px 18px',
+                                    borderRadius:
+                                        '10px',
+                                    cursor:
+                                        'pointer',
+                                    fontWeight: 700,
+                                }}
+                            >
+                                Remove
+                            </button>
+                        </div>
+                    )
+                )}
+            </div>
+
+            {/* Add Step */}
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent:
+                        'center',
+                    marginTop: '34px',
+                }}
+            >
+                <button
+                    onClick={addWorkflowStep}
+                    style={{
+                        background:
+                            'transparent',
+                        border:
+                            '1px solid #00d4ff',
+                        color: '#00d4ff',
+                        padding:
+                            '18px 32px',
+                        borderRadius:
+                            '14px',
+                        cursor:
+                            'pointer',
+                        fontWeight: 700,
+                        fontSize: '16px',
+                    }}
+                >
+                    + Add Workflow Step
+                </button>
+            </div>
+
+            {/* Generate Button */}
+            <button
+                onClick={handleGenerate}
+                disabled={isRunning}
+                style={{
+                    background:
+                        'linear-gradient(90deg, #dc2626, #ef4444)',
+                    color: '#fff',
+                    border: 'none',
+                    padding:
+                        '18px 32px',
+                    borderRadius:
+                        '14px',
+                    fontSize: '16px',
+                    fontWeight: 700,
+                    cursor:
+                        'pointer',
+                    width: 'fit-content',
+                    minWidth: '360px',
+                    margin:
+                        '42px auto 0',
+                    display: 'block',
+                    boxShadow:
+                        '0 10px 30px rgba(239,68,68,0.20)',
+                    opacity:
+                        isRunning
+                            ? 0.7
+                            : 1,
+                }}
+            >
+                {isRunning
+                    ? 'Generating...'
+                    : '⚡ Generate Production Architecture'}
+            </button>
+        </section>
+    );
+}

frontend/components/workflow/WorkflowComparison.tsx

@@ -0,0 +1,286 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import type { SystemForgeResponse } from '../../lib/types';
+
+interface WorkflowComparisonProps {
+    data: SystemForgeResponse;
+}
+
+interface ComparisonBlock {
+    title: string;
+    before: string;
+    after: string;
+    impact: string;
+}
+
+function buildComparisonBlocks(
+    before: string[],
+    after: string[]
+): ComparisonBlock[] {
+    const maxLength = Math.max(
+        before.length,
+        after.length
+    );
+
+    const smartFallbacks = [
+        'New automation layer introduced',
+        'System-orchestrated validation added',
+        'Human escalation path introduced',
+        'Production monitoring layer added',
+        'Reliability safeguard introduced',
+        'Audit + observability layer created',
+        'Approval workflow optimization added',
+        'Async event handling introduced',
+    ];
+
+    const impactOptions = [
+        'Reduced manual effort + faster execution',
+        'Improved reliability + production readiness',
+        'Lower operational bottlenecks + better scale',
+        'Higher audit visibility + safer approvals',
+    ];
+
+    const blocks: ComparisonBlock[] = [];
+
+    for (let i = 0; i < maxLength; i++) {
+        blocks.push({
+            title: `Workflow Step ${String(
+                i + 1
+            ).padStart(2, '0')}`,
+
+            before:
+                before[i] ||
+                smartFallbacks[
+                i % smartFallbacks.length
+                ],
+
+            after:
+                after[i] ||
+                'System optimized this step',
+
+            impact:
+                impactOptions[
+                i % impactOptions.length
+                ],
+        });
+    }
+
+    return blocks;
+}
+
+
+function ComparisonCard({
+    item,
+    index,
+}: {
+    item: ComparisonBlock;
+    index: number;
+}) {
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{
+                delay: index * 0.08,
+                duration: 0.45,
+            }}
+            style={{
+                border: '1px solid rgba(255,255,255,0.06)',
+                background: 'rgba(255,255,255,0.02)',
+                borderRadius: 10,
+                padding: '1.8rem',
+                backdropFilter: 'blur(14px)',
+            }}
+        >
+            {/* Title */}
+            <div
+                style={{
+                    fontFamily: 'var(--font-display)',
+                    fontSize: '1rem',
+                    color: '#F0F0FF',
+                    marginBottom: '1.4rem',
+                    letterSpacing: '0.05em',
+                }}
+            >
+                {item.title}
+            </div>
+
+            {/* Before */}
+            <div style={{ marginBottom: '1.2rem' }}>
+                <div
+                    style={{
+                        fontFamily: 'var(--font-mono)',
+                        fontSize: '0.72rem',
+                        color: '#FFB800',
+                        letterSpacing: '0.18em',
+                        marginBottom: '0.5rem',
+                    }}
+                >
+                    BEFORE
+                </div>
+
+                <div
+                    style={{
+                        color: '#8888AA',
+                        lineHeight: 1.7,
+                        fontSize: '0.95rem',
+                    }}
+                >
+                    {item.before}
+                </div>
+            </div>
+
+            {/* After */}
+            <div style={{ marginBottom: '1.2rem' }}>
+                <div
+                    style={{
+                        fontFamily: 'var(--font-mono)',
+                        fontSize: '0.72rem',
+                        color: '#00FF9C',
+                        letterSpacing: '0.18em',
+                        marginBottom: '0.5rem',
+                    }}
+                >
+                    AFTER
+                </div>
+
+                <div
+                    style={{
+                        color: '#F0F0FF',
+                        lineHeight: 1.7,
+                        fontSize: '0.95rem',
+                    }}
+                >
+                    {item.after}
+                </div>
+            </div>
+
+            {/* Impact */}
+            <div
+                style={{
+                    borderTop: '1px solid rgba(255,255,255,0.05)',
+                    paddingTop: '1rem',
+                }}
+            >
+                <div
+                    style={{
+                        fontFamily: 'var(--font-mono)',
+                        fontSize: '0.7rem',
+                        color: '#00D4FF',
+                        letterSpacing: '0.18em',
+                        marginBottom: '0.4rem',
+                    }}
+                >
+                    BUSINESS IMPACT
+                </div>
+
+                <div
+                    style={{
+                        color: '#00D4FF',
+                        fontSize: '0.92rem',
+                        lineHeight: 1.6,
+                    }}
+                >
+                    {item.impact}
+                </div>
+            </div>
+        </motion.div>
+    );
+}
+
+export default function WorkflowComparison({
+    data,
+}: WorkflowComparisonProps) {
+    const comparisonBlocks = buildComparisonBlocks(
+        data.workflowTransformation.before,
+        data.workflowTransformation.after
+    );
+
+    return (
+        <section
+            style={{
+                position: 'relative',
+                zIndex: 10,
+                width: '100%',
+                padding: '4rem 2rem',
+            }}
+        >
+            <div
+                style={{
+                    maxWidth: 1400,
+                    margin: '0 auto',
+                }}
+            >
+                {/* Header */}
+                <motion.div
+                    initial={{ opacity: 0, y: 18 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5 }}
+                    style={{
+                        textAlign: 'center',
+                        marginBottom: '3rem',
+                    }}
+                >
+                    <div
+                        style={{
+                            fontFamily: 'var(--font-mono)',
+                            fontSize: '0.75rem',
+                            color: '#00D4FF',
+                            letterSpacing: '0.24em',
+                            marginBottom: '0.8rem',
+                        }}
+                    >
+                        WORKFLOW INTELLIGENCE LAYER
+                    </div>
+
+                    <h2
+                        style={{
+                            fontFamily: 'var(--font-display)',
+                            fontSize: 'clamp(2rem, 4vw, 3.6rem)',
+                            color: '#F0F0FF',
+                            marginBottom: '1rem',
+                        }}
+                    >
+                        Operational Redesign Breakdown
+                    </h2>
+
+                    <p
+                        style={{
+                            maxWidth: 760,
+                            margin: '0 auto',
+                            color: '#8888AA',
+                            fontSize: '1rem',
+                            lineHeight: 1.75,
+                        }}
+                    >
+                        Every workflow redesign is broken into measurable
+                        improvements. SystemForge explains what changed,
+                        why it changed, and how the redesigned system
+                        improves execution speed, scalability, and
+                        operational reliability.
+                    </p>
+                </motion.div>
+
+                {/* Grid */}
+                <div
+                    style={{
+                        display: 'grid',
+                        gridTemplateColumns:
+                            'repeat(auto-fit, minmax(320px, 1fr))',
+                        gap: '1.5rem',
+                    }}
+                >
+                    {comparisonBlocks.map((item, index) => (
+                        <ComparisonCard
+                            key={index}
+                            item={item}
+                            index={index}
+                        />
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}

frontend/components/workflow/WorkflowNode.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import type {
+    WorkflowStep,
+    WorkflowNodeType,
+} from './WorkflowTypes';
+
+interface Props {
+    step: WorkflowStep;
+    index: number;
+    updateStep: (
+        id: string,
+        field: 'label' | 'type',
+        value: string
+    ) => void;
+    removeStep: (id: string) => void;
+}
+
+const NODE_OPTIONS: {
+    value: WorkflowNodeType;
+    label: string;
+    icon: string;
+}[] = [
+        { value: 'task', label: 'Task', icon: '□' },
+        { value: 'decision', label: 'Decision', icon: '◇' },
+        { value: 'approval', label: 'Approval', icon: '✓' },
+        { value: 'api', label: 'API', icon: '⚡' },
+        { value: 'queue', label: 'Queue', icon: '⇄' },
+        { value: 'llm', label: 'LLM', icon: '🤖' },
+        {
+            value: 'human_review',
+            label: 'Human Review',
+            icon: '🧑',
+        },
+        {
+            value: 'notification',
+            label: 'Notification',
+            icon: '📩',
+        },
+    ];
+
+function getAccent(type: WorkflowNodeType) {
+    switch (type) {
+        case 'decision':
+            return '#F59E0B';
+        case 'approval':
+            return '#22C55E';
+        case 'api':
+            return '#3B82F6';
+        case 'queue':
+            return '#8B5CF6';
+        case 'llm':
+            return '#EC4899';
+        case 'human_review':
+            return '#F97316';
+        case 'notification':
+            return '#06B6D4';
+        default:
+            return '#00D4FF';
+    }
+}
+
+export default function WorkflowNode({
+    step,
+    index,
+    updateStep,
+    removeStep,
+}: Props) {
+    const accent = getAccent(step.type);
+
+    const isDecision =
+        step.type === 'decision';
+
+    return (
+        <motion.div
+            initial={{
+                opacity: 0,
+                y: 20,
+            }}
+            animate={{
+                opacity: 1,
+                y: 0,
+            }}
+            style={{
+                marginBottom: '20px',
+            }}
+        >
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '16px',
+                }}
+            >
+                {/* Node Shape */}
+                <div
+                    style={{
+                        width: 58,
+                        height: 58,
+                        minWidth: 58,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        border: `1px solid ${accent}30`,
+                        background: `${accent}08`,
+                        color: accent,
+                        fontSize: '18px',
+                        fontWeight: 700,
+                        transform: isDecision
+                            ? 'rotate(45deg)'
+                            : 'none',
+                        borderRadius: isDecision
+                            ? '8px'
+                            : '14px',
+                    }}
+                >
+                    <span
+                        style={{
+                            transform: isDecision
+                                ? 'rotate(-45deg)'
+                                : 'none',
+                        }}
+                    >
+                        {isDecision
+                            ? '?'
+                            : String(index + 1).padStart(
+                                2,
+                                '0'
+                            )}
+                    </span>
+                </div>
+
+                {/* Main Card */}
+                <div
+                    style={{
+                        flex: 1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '14px',
+                        border:
+                            '1px solid rgba(255,255,255,0.08)',
+                        background:
+                            'rgba(255,255,255,0.02)',
+                        borderRadius: '18px',
+                        padding: '18px 20px',
+                        backdropFilter: 'blur(8px)',
+                    }}
+                >
+                    {/* Type */}
+                    <select
+                        value={step.type}
+                        onChange={(e) =>
+                            updateStep(
+                                step.id,
+                                'type',
+                                e.target.value
+                            )
+                        }
+                        style={{
+                            border: 'none',
+                            background: 'transparent',
+                            color: accent,
+                            fontWeight: 600,
+                            fontSize: '14px',
+                            outline: 'none',
+                            minWidth: 120,
+                        }}
+                    >
+                        {NODE_OPTIONS.map((item) => (
+                            <option
+                                key={item.value}
+                                value={item.value}
+                                style={{
+                                    background: '#111827',
+                                    color: '#ffffff',
+                                }}
+                            >
+                                {item.icon} {item.label}
+                            </option>
+                        ))}
+                    </select>
+
+                    {/* Input */}
+                    <input
+                        value={step.label}
+                        onChange={(e) =>
+                            updateStep(
+                                step.id,
+                                'label',
+                                e.target.value
+                            )
+                        }
+                        placeholder="Describe workflow step..."
+                        style={{
+                            flex: 1,
+                            border: 'none',
+                            background: 'transparent',
+                            color: '#F0F0FF',
+                            fontSize: '16px',
+                            outline: 'none',
+                        }}
+                    />
+
+                    {/* Remove */}
+                    <button
+                        onClick={() =>
+                            removeStep(step.id)
+                        }
+                        style={{
+                            border: 'none',
+                            background: 'transparent',
+                            color: '#EF4444',
+                            fontWeight: 600,
+                            cursor: 'pointer',
+                            fontSize: '14px',
+                        }}
+                    >
+                        Remove
+                    </button>
+                </div>
+            </div>
+        </motion.div>
+    );
+}

frontend/components/workflow/WorkflowTypes.ts

@@ -0,0 +1,27 @@
+export type WorkflowNodeType =
+    | 'input'
+    | 'task'
+    | 'decision'
+    | 'automation'
+    | 'approval'
+    | 'output'
+    | 'api'
+    | 'queue'
+    | 'llm'
+    | 'human_review'
+    | 'notification';
+
+export interface WorkflowStep {
+    id: string;
+    type: WorkflowNodeType;
+    label: string;
+}
+
+export interface ExampleWorkflow {
+    id: string;
+    title: string;
+    industry: string;
+    before: WorkflowStep[];
+    after: WorkflowStep[];
+    estimatedReduction: string;
+}

frontend/legacy/app.py

@@ -0,0 +1,81 @@
+import gradio as gr
+from src.workflows.crew import run_systemforge
+
+
+def execute_systemforge(project_idea: str):
+    if not project_idea.strip():
+        return (
+            "Please enter a project idea.",
+            "No review generated.",
+            "No refined architecture generated."
+        )
+
+    try:
+        final_result = run_systemforge(project_idea)
+
+        architect_output = f"""
+# Architect Agent Output
+
+Project Idea: {project_idea}
+
+The Architect Agent generated the initial production architecture plan.
+"""
+
+        critic_output = """
+# Critic Agent Output (Senior SRE Persona)
+
+The Critic Agent reviewed the architecture for:
+- scalability risks
+- observability gaps
+- fault tolerance
+- security concerns
+- production reliability
+"""
+
+        refiner_output = f"""
+# Refiner Agent Output
+
+{final_result}
+"""
+
+        return architect_output, critic_output, refiner_output
+
+    except Exception as e:
+        return (
+            "Architect Agent execution failed.",
+            "Critic Agent execution failed.",
+            f"System Error: {str(e)}"
+        )
+
+
+with gr.Blocks(title="SystemForge AI") as demo:
+    gr.Markdown("""
+# SystemForge AI
+### Autonomous Multi-Agent Architecture Engine
+
+Architect → Critic → Refiner
+
+Describe your startup or product idea and let the agents generate a production-grade system design.
+""")
+
+    project_input = gr.Textbox(
+        label="Describe Your Project Idea",
+        placeholder="Example: Build a scalable fintech SaaS platform for SMB lending",
+        lines=4,
+    )
+
+    run_button = gr.Button("Run SystemForge")
+
+    architect_box = gr.Markdown(label="Architect Output")
+    critic_box = gr.Markdown(label="Critic Output")
+    refiner_box = gr.Markdown(label="Refiner Output")
+
+    run_button.click(
+        fn=execute_systemforge,
+        inputs=[project_input],
+        outputs=[architect_box, critic_box, refiner_box],
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()

frontend/lib/api.ts

@@ -0,0 +1,100 @@
+import type { SystemForgeResponse } from "./types";
+
+export async function generateWorkflowRedesign(
+  workflowSteps: string[]
+): Promise<SystemForgeResponse> {
+  const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+  if (!API_URL) {
+    throw new Error(
+      "NEXT_PUBLIC_API_URL is missing in .env"
+    );
+  }
+
+  const response = await fetch(
+    `${API_URL}/run-systemforge`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        workflow: workflowSteps,
+      }),
+    }
+  );
+
+  const data = await response.json();
+
+  if (!response.ok) {
+    throw new Error(
+      data.detail ||
+      data.error ||
+      "Failed to generate architecture"
+    );
+  }
+
+  return data;
+}
+
+
+export async function downloadArchitectureReport(
+  workflowSteps: string[]
+): Promise<void> {
+  const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+  if (!API_URL) {
+    throw new Error(
+      "NEXT_PUBLIC_API_URL is missing in .env"
+    );
+  }
+
+  const response = await fetch(
+    `${API_URL}/download-report`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        workflow: workflowSteps,
+      }),
+    }
+  );
+
+  if (!response.ok) {
+    let errorMessage =
+      "Failed to download report";
+
+    try {
+      const errorData =
+        await response.json();
+
+      errorMessage =
+        errorData.detail ||
+        errorData.error ||
+        errorMessage;
+    } catch {
+      // fallback if response is not JSON
+    }
+
+    throw new Error(errorMessage);
+  }
+
+  const blob = await response.blob();
+  const url =
+    window.URL.createObjectURL(blob);
+
+  const link =
+    document.createElement("a");
+
+  link.href = url;
+  link.download =
+    "SystemForge_Architecture_Report.pdf";
+
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+
+  window.URL.revokeObjectURL(url);
+}

frontend/lib/exampleWorkflows.ts

@@ -0,0 +1,482 @@
+import { ExampleWorkflow } from '../components/workflow/WorkflowTypes';
+
+export const EXAMPLE_WORKFLOWS: ExampleWorkflow[] = [
+    {
+        id: 'insurance-claims',
+        title: 'Insurance Claims Processing',
+        industry: 'Insurance Operations',
+
+        before: [
+            {
+                id: 'b1',
+                type: 'input',
+                label: 'Customer emails a claim',
+            },
+            {
+                id: 'b2',
+                type: 'task',
+                label: 'Agent opens email manually in Outlook',
+            },
+            {
+                id: 'b3',
+                type: 'task',
+                label: 'Reads claim details manually',
+            },
+            {
+                id: 'b4',
+                type: 'task',
+                label: 'Logs into Policy Portal to search policy',
+            },
+            {
+                id: 'b5',
+                type: 'decision',
+                label: 'Checks claim history in Claims DB',
+            },
+            {
+                id: 'b6',
+                type: 'task',
+                label: 'Cross-verifies coverage limits manually',
+            },
+            {
+                id: 'b7',
+                type: 'task',
+                label: 'Creates summary in spreadsheet',
+            },
+            {
+                id: 'b8',
+                type: 'task',
+                label: 'Emails supervisor for approval',
+            },
+            {
+                id: 'b9',
+                type: 'decision',
+                label: 'Supervisor approves or rejects',
+            },
+            {
+                id: 'b10',
+                type: 'output',
+                label: 'Drafts approval or rejection email',
+            },
+        ],
+
+        after: [
+            {
+                id: 'a1',
+                type: 'automation',
+                label: 'Claim intake service captures email automatically',
+            },
+            {
+                id: 'a2',
+                type: 'automation',
+                label: 'Document parser extracts claim details + policy info',
+            },
+            {
+                id: 'a3',
+                type: 'decision',
+                label: 'Claims DB + Policy validation check',
+            },
+            {
+                id: 'a4',
+                type: 'automation',
+                label: 'Coverage validation engine verifies limits',
+            },
+            {
+                id: 'a5',
+                type: 'approval',
+                label: 'Auto decision: approve / reject / escalate',
+            },
+            {
+                id: 'a6',
+                type: 'output',
+                label: 'LLM drafts customer response + CRM updated',
+            },
+        ],
+
+        estimatedReduction: '45–60 min → 10–15 min',
+    },
+
+    {
+        id: 'recruitment-screening',
+        title: 'Recruitment Candidate Screening',
+        industry: 'Hiring Operations',
+
+        before: [
+            {
+                id: 'b1',
+                type: 'input',
+                label: 'Resumes arrive from LinkedIn',
+            },
+            {
+                id: 'b2',
+                type: 'task',
+                label: 'HR downloads resumes manually',
+            },
+            {
+                id: 'b3',
+                type: 'task',
+                label: 'Reviews candidate profile manually',
+            },
+            {
+                id: 'b4',
+                type: 'decision',
+                label: 'Checks job fit in spreadsheet',
+            },
+            {
+                id: 'b5',
+                type: 'task',
+                label: 'Compares against JD manually',
+            },
+            {
+                id: 'b6',
+                type: 'task',
+                label: 'Sends shortlist to hiring manager',
+            },
+            {
+                id: 'b7',
+                type: 'decision',
+                label: 'Manager approves interview round',
+            },
+            {
+                id: 'b8',
+                type: 'output',
+                label: 'Recruiter sends candidate response',
+            },
+        ],
+
+        after: [
+            {
+                id: 'a1',
+                type: 'automation',
+                label: 'Resume intake API ingests candidate profiles',
+            },
+            {
+                id: 'a2',
+                type: 'automation',
+                label: 'Resume parser extracts skills + experience',
+            },
+            {
+                id: 'a3',
+                type: 'automation',
+                label: 'Skill matching engine scores JD fit',
+            },
+            {
+                id: 'a4',
+                type: 'approval',
+                label: 'Auto shortlist / reject / escalate',
+            },
+            {
+                id: 'a5',
+                type: 'output',
+                label: 'LLM drafts recruiter email + ATS updated',
+            },
+        ],
+
+        estimatedReduction: '35–50 min → 5–8 min',
+    },
+
+    {
+        id: 'accounts-payable',
+        title: 'Accounts Payable Invoice Processing',
+        industry: 'Finance Operations',
+
+        before: [
+            {
+                id: 'b1',
+                type: 'input',
+                label: 'Vendor emails invoice PDF',
+            },
+            {
+                id: 'b2',
+                type: 'task',
+                label: 'Finance downloads invoice manually',
+            },
+            {
+                id: 'b3',
+                type: 'task',
+                label: 'Reads invoice details manually',
+            },
+            {
+                id: 'b4',
+                type: 'decision',
+                label: 'Checks PO and vendor details',
+            },
+            {
+                id: 'b5',
+                type: 'task',
+                label: 'Validates GST + payment terms',
+            },
+            {
+                id: 'b6',
+                type: 'task',
+                label: 'Creates approval note in spreadsheet',
+            },
+            {
+                id: 'b7',
+                type: 'approval',
+                label: 'Manager approves payment',
+            },
+            {
+                id: 'b8',
+                type: 'output',
+                label: 'Finance updates ERP manually',
+            },
+        ],
+
+        after: [
+            {
+                id: 'a1',
+                type: 'automation',
+                label: 'Invoice parser extracts PDF invoice data',
+            },
+            {
+                id: 'a2',
+                type: 'decision',
+                label: 'PO + Vendor validation layer checks match',
+            },
+            {
+                id: 'a3',
+                type: 'automation',
+                label: 'Tax validation engine verifies GST rules',
+            },
+            {
+                id: 'a4',
+                type: 'approval',
+                label: 'Auto approval routing based on invoice value',
+            },
+            {
+                id: 'a5',
+                type: 'output',
+                label: 'ERP updated + payment workflow triggered',
+            },
+        ],
+
+        estimatedReduction: '40–55 min → 7–10 min',
+    },
+
+    {
+        id: 'vendor-onboarding',
+        title: 'Vendor Onboarding',
+        industry: 'Procurement Operations',
+
+        before: [
+            {
+                id: 'b1',
+                type: 'input',
+                label: 'Vendor submits onboarding form',
+            },
+            {
+                id: 'b2',
+                type: 'task',
+                label: 'Ops team manually validates GST',
+            },
+            {
+                id: 'b3',
+                type: 'task',
+                label: 'Bank account verification done manually',
+            },
+            {
+                id: 'b4',
+                type: 'task',
+                label: 'PAN and compliance docs reviewed',
+            },
+            {
+                id: 'b5',
+                type: 'decision',
+                label: 'Checks duplicate vendor risk',
+            },
+            {
+                id: 'b6',
+                type: 'approval',
+                label: 'Procurement manager approves vendor',
+            },
+            {
+                id: 'b7',
+                type: 'output',
+                label: 'Vendor added to ERP manually',
+            },
+        ],
+
+        after: [
+            {
+                id: 'a1',
+                type: 'automation',
+                label: 'Vendor onboarding API receives form data',
+            },
+            {
+                id: 'a2',
+                type: 'automation',
+                label: 'GST + PAN verification services validate documents',
+            },
+            {
+                id: 'a3',
+                type: 'automation',
+                label: 'Bank verification service validates account',
+            },
+            {
+                id: 'a4',
+                type: 'decision',
+                label: 'Duplicate vendor risk engine check',
+            },
+            {
+                id: 'a5',
+                type: 'approval',
+                label: 'Approval workflow triggered automatically',
+            },
+            {
+                id: 'a6',
+                type: 'output',
+                label: 'Vendor master created in ERP',
+            },
+        ],
+
+        estimatedReduction: '60–90 min → 10–15 min',
+    },
+
+    {
+        id: 'expense-reimbursement',
+        title: 'Employee Expense Reimbursement',
+        industry: 'Internal Finance',
+
+        before: [
+            {
+                id: 'b1',
+                type: 'input',
+                label: 'Employee emails reimbursement request',
+            },
+            {
+                id: 'b2',
+                type: 'task',
+                label: 'Finance opens receipts manually',
+            },
+            {
+                id: 'b3',
+                type: 'task',
+                label: 'Reads expense details line by line',
+            },
+            {
+                id: 'b4',
+                type: 'decision',
+                label: 'Checks policy compliance manually',
+            },
+            {
+                id: 'b5',
+                type: 'task',
+                label: 'Creates approval note',
+            },
+            {
+                id: 'b6',
+                type: 'approval',
+                label: 'Manager approves reimbursement',
+            },
+            {
+                id: 'b7',
+                type: 'output',
+                label: 'Finance updates payroll manually',
+            },
+        ],
+
+        after: [
+            {
+                id: 'a1',
+                type: 'automation',
+                label: 'Receipt parser extracts expense details',
+            },
+            {
+                id: 'a2',
+                type: 'automation',
+                label: 'Policy compliance engine validates expenses',
+            },
+            {
+                id: 'a3',
+                type: 'decision',
+                label: 'Fraud + duplicate claim detection',
+            },
+            {
+                id: 'a4',
+                type: 'approval',
+                label: 'Smart approval routing to manager',
+            },
+            {
+                id: 'a5',
+                type: 'output',
+                label: 'Payroll updated + employee notified',
+            },
+        ],
+
+        estimatedReduction: '30–45 min → 5–7 min',
+    },
+
+    {
+        id: 'customer-support',
+        title: 'Customer Support Escalation',
+        industry: 'Support Operations',
+
+        before: [
+            {
+                id: 'b1',
+                type: 'input',
+                label: 'Customer raises support ticket',
+            },
+            {
+                id: 'b2',
+                type: 'task',
+                label: 'Agent reads ticket manually',
+            },
+            {
+                id: 'b3',
+                type: 'task',
+                label: 'Checks CRM for customer history',
+            },
+            {
+                id: 'b4',
+                type: 'decision',
+                label: 'Determines issue severity manually',
+            },
+            {
+                id: 'b5',
+                type: 'task',
+                label: 'Routes ticket to correct team',
+            },
+            {
+                id: 'b6',
+                type: 'approval',
+                label: 'Supervisor handles critical escalation',
+            },
+            {
+                id: 'b7',
+                type: 'output',
+                label: 'Customer receives final update',
+            },
+        ],
+
+        after: [
+            {
+                id: 'a1',
+                type: 'automation',
+                label: 'Ticket parser classifies issue automatically',
+            },
+            {
+                id: 'a2',
+                type: 'automation',
+                label: 'CRM lookup service fetches customer history',
+            },
+            {
+                id: 'a3',
+                type: 'decision',
+                label: 'Severity + SLA priority engine',
+            },
+            {
+                id: 'a4',
+                type: 'approval',
+                label: 'Critical cases escalated to human lead',
+            },
+            {
+                id: 'a5',
+                type: 'output',
+                label: 'Auto response + routing + CRM update',
+            },
+        ],
+
+        estimatedReduction: '25–40 min → 3–5 min',
+    },
+];

frontend/lib/types.ts

@@ -0,0 +1,47 @@
+export interface WorkflowTransformation {
+  before: string[];
+  after: string[];
+}
+
+export type AgentStatus = 'idle' | 'thinking' | 'complete' | 'error';
+
+export interface AgentOutput {
+  agent: 'architect' | 'critic' | 'refiner';
+  status: AgentStatus;
+  content: string;
+  duration?: number;
+}
+
+export interface AgentDecision {
+  title: string;
+  subtitle: string;
+  decisions: string[];
+}
+
+export interface ArchitectureLayer {
+  title: string;
+  description: string;
+  items: string[];
+}
+
+export interface FinalMetrics {
+  deploymentReadiness: string;
+  automationPotential: string;
+  architectureConfidence: string;
+  riskScore: string;
+  estimatedMonthlyInfraCost: string;
+}
+
+export interface SystemForgeResponse {
+  workflowTransformation: WorkflowTransformation;
+
+  architect: AgentDecision;
+  critic: AgentDecision;
+  refiner: AgentDecision;
+
+  architectureLayers: ArchitectureLayer[];
+
+  finalMetrics: FinalMetrics;
+  
+  executiveSummary: AgentDecision;
+}

frontend/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

frontend/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "systemforge-ai-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.3.7",
+    "@react-three/drei": "^9.122.0",
+    "@react-three/fiber": "^8.18.0",
+    "antd": "^5.19.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.18.2",
+    "leva": "^0.9.35",
+    "next": "^16.2.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "three": "^0.166.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/three": "^0.166.0",
+    "eslint": "^10.3.0",
+    "eslint-config-next": "^16.2.4",
+    "typescript": "^5"
+  }
+}

frontend/styles/globals.css

@@ -0,0 +1,159 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=JetBrains+Mono:wght@300;400;500;700&family=Rajdhani:wght@300;400;500;600;700&display=swap');
+
+:root {
+  --amd-red: #E30913;
+  --bg-void: #020204;
+  --text-primary: #F0F0FF;
+  --text-secondary: #8888AA;
+
+  --accent-cyan: #00D4FF;
+  --accent-gold: #FFB800;
+  --accent-green: #00FF9C;
+
+  --font-display: 'Orbitron', monospace;
+  --font-body: 'Rajdhani', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+/* RESET */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-body);
+  background: var(--bg-void);
+  color: var(--text-primary);
+  min-height: 100vh;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* SCROLLBAR */
+
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: #07070F;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--amd-red);
+  border-radius: 2px;
+}
+
+/* PREMIUM BACKGROUND */
+
+.cyber-background {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 20% 20%, rgba(227, 9, 19, 0.12), transparent 35%),
+    radial-gradient(circle at 80% 30%, rgba(0, 212, 255, 0.10), transparent 35%),
+    radial-gradient(circle at 50% 80%, rgba(0, 255, 153, 0.08), transparent 40%),
+    #03040a;
+}
+
+.grid-overlay {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: 80px 80px;
+  opacity: 0.35;
+  animation: gridMove 20s linear infinite;
+}
+
+.glow {
+  position: absolute;
+  width: 500px;
+  height: 500px;
+  border-radius: 50%;
+  filter: blur(120px);
+  opacity: 0.45;
+  animation: pulseGlow 8s ease-in-out infinite;
+}
+
+.glow-red {
+  background: rgba(227, 9, 19, 0.35);
+  top: 10%;
+  left: 10%;
+}
+
+.glow-blue {
+  background: rgba(0, 212, 255, 0.28);
+  top: 20%;
+  right: 10%;
+  animation-delay: 2s;
+}
+
+.glow-green {
+  background: rgba(0, 255, 153, 0.20);
+  bottom: 5%;
+  left: 35%;
+  animation-delay: 4s;
+}
+
+.scan-line {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg,
+      transparent,
+      rgba(255, 255, 255, 0.25),
+      transparent);
+  animation: scanMove 6s linear infinite;
+}
+
+/* ANIMATIONS */
+
+@keyframes gridMove {
+  from {
+    transform: translateY(0px);
+  }
+
+  to {
+    transform: translateY(80px);
+  }
+}
+
+@keyframes pulseGlow {
+
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.35;
+  }
+
+  50% {
+    transform: scale(1.12);
+    opacity: 0.55;
+  }
+}
+
+@keyframes scanMove {
+  from {
+    top: -10%;
+  }
+
+  to {
+    top: 110%;
+  }
+}

frontend/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

requirements.txt

@@ -0,0 +1,12 @@
+crewai
+pydantic
+python-dotenv
+fastapi
+uvicorn
+langchain
+langchain-openai
+langchain-groq
+gradio
+reportlab
+setuptools<70
+wheel

src/agents/architect.py

@@ -0,0 +1,226 @@
+from src.tools.llm import get_llm
+from src.tools.json_parser import safe_json_parse
+
+
+def architect_agent(workflow_steps, bottlenecks=None):
+    """
+    Systems Architect Agent
+    """
+
+    llm = get_llm()
+
+    prompt = f"""
+You are the SYSTEMS ARCHITECT Agent inside SystemForge.
+
+You are a Principal Staff Engineer responsible for designing
+production-grade enterprise AI systems.
+
+Your job is NOT to give generic automation advice.
+
+Your job is to design:
+REAL production architecture.
+
+You think like:
+- Principal Engineer
+- Staff Systems Architect
+- Platform Engineer
+- Distributed Systems Designer
+
+You optimize for:
+- scale
+- reliability
+- fault tolerance
+- human override
+- observability
+- retry safety
+- compliance
+- auditability
+- operational excellence
+
+You do NOT write like a consultant.
+
+You write like an engineer designing
+real production systems.
+
+-----------------------------------
+INPUT WORKFLOW
+-----------------------------------
+
+{workflow_steps}
+
+-----------------------------------
+KNOWN BOTTLENECKS
+-----------------------------------
+
+{bottlenecks}
+
+-----------------------------------
+YOUR TASK
+-----------------------------------
+
+Redesign this workflow into an AI-native production system.
+
+You MUST include:
+
+1. Async event-driven workflow where needed
+2. Queue-based processing where delays happen
+3. Validation services before critical actions
+4. Human-in-loop escalation for risky decisions
+5. Retry-safe workflows for failures
+6. Monitoring + audit logs
+7. Policy/approval engine if approvals exist
+8. Service boundaries between critical domains
+9. Failure recovery strategy
+10. Production-grade scalability design
+
+-----------------------------------
+VERY IMPORTANT
+-----------------------------------
+
+Return AFTER workflow steps as:
+
+- short operational labels
+- max 8–12 words
+- enterprise workflow naming style
+- production-grade system language
+- no long explanations
+- no paragraphs
+- no arrows
+- no consultant language
+- no generic text
+
+GOOD:
+Policy validation engine verifies coverage
+
+GOOD:
+Smart approval routing triggers manager review
+
+GOOD:
+CRM sync service updates customer records
+
+GOOD:
+Queue orchestration handles async claim processing
+
+BAD:
+The system automatically checks whether the policy
+is valid and then sends it for manager approval
+
+BAD:
+This improves operational efficiency significantly
+
+BAD:
+The workflow becomes scalable and production-ready
+
+BAD:
+Automate the process using AI
+
+Be specific like:
+
+GOOD:
+Introduce document validation service before approval queue
+
+GOOD:
+Approval workflow triggers human escalation for exceptions
+
+NOT:
+
+BAD:
+Automate process
+
+-----------------------------------
+DECISIONS FORMAT
+-----------------------------------
+
+Architecture decisions must be:
+
+- specific
+- technical
+- implementation-focused
+- production-grade
+
+GOOD:
+Separated validation from execution boundaries
+
+GOOD:
+Introduced retry-safe queue orchestration
+
+GOOD:
+Added policy engine for approval workflows
+
+BAD:
+Improved efficiency
+
+BAD:
+System is now better
+
+BAD:
+Automation helps operations
+
+-----------------------------------
+STRICT OUTPUT FORMAT
+-----------------------------------
+
+Return ONLY valid JSON.
+
+{{
+  "after_workflow": [
+    "specific transformed step 1",
+    "specific transformed step 2",
+    "specific transformed step 3",
+    "specific transformed step 4",
+    "specific transformed step 5"
+  ],
+
+  "decisions": [
+    "specific architecture decision 1",
+    "specific architecture decision 2",
+    "specific architecture decision 3",
+    "specific architecture decision 4",
+    "specific architecture decision 5"
+  ]
+}}
+
+No markdown.
+No explanations.
+No headings.
+No text outside JSON.
+"""
+
+    response = llm.invoke(prompt)
+
+    fallback = {
+        "after_workflow": [
+            "Input ingestion service captures workflow requests",
+            "Validation engine verifies critical business rules",
+            "Queue orchestration handles async task routing",
+            "Policy engine triggers approval escalations",
+            "Observability layer tracks failures and audits"
+        ],
+        "decisions": [
+            "Introduced queue-first architecture for reliability",
+            "Separated validation from execution boundaries",
+            "Added policy engine for approval workflows",
+            "Created human escalation path for exceptions",
+            "Improved monitoring with audit-safe observability"
+        ]
+    }
+
+    result = safe_json_parse(
+        response.content,
+        fallback=fallback
+    )
+
+    if (
+        not isinstance(result, dict)
+        or "after_workflow" not in result
+        or "decisions" not in result
+    ):
+        return fallback
+
+    if not isinstance(result["after_workflow"], list):
+        result["after_workflow"] = fallback["after_workflow"]
+
+    if not isinstance(result["decisions"], list):
+        result["decisions"] = fallback["decisions"]
+
+    return result

src/agents/critic.py

@@ -0,0 +1,171 @@
+from src.tools.llm import get_llm
+from src.tools.json_parser import safe_json_parse
+
+
+def infrastructure_critic_agent(workflow_steps, architecture):
+    """
+    Infrastructure Critic Agent
+
+    Goal:
+    Break the system before production does.
+    """
+
+    llm = get_llm()
+
+    prompt = f"""
+You are the INFRASTRUCTURE CRITIC Agent inside SystemForge.
+
+You are a Principal SRE + Production Incident Reviewer.
+
+Your job is NOT to improve the system.
+
+Your job is to find:
+how this architecture will fail in production.
+
+You think like:
+- Senior SRE
+- Reliability Engineer
+- Failure Investigator
+- Platform Engineer
+- Incident Commander
+
+You do NOT write like a consultant.
+
+You think like production failure already happened.
+
+You aggressively search for:
+
+1. Single Points of Failure
+2. Queue failure risks
+3. Missing retries / idempotency issues
+4. Human bottlenecks still hidden
+5. Missing observability
+6. No audit trail risks
+7. Security boundary failures
+8. Approval workflow deadlocks
+9. Scaling bottlenecks
+10. Failure recovery gaps
+11. Alerting blind spots
+12. Cost explosion risks
+13. Operational ownership ambiguity
+
+Do NOT redesign.
+
+Do NOT solve.
+
+Do NOT suggest improvements.
+
+Only identify:
+what will break.
+
+-----------------------------------
+ORIGINAL WORKFLOW
+-----------------------------------
+
+{workflow_steps}
+
+-----------------------------------
+GENERATED ARCHITECTURE
+-----------------------------------
+
+{architecture}
+
+-----------------------------------
+VERY IMPORTANT
+-----------------------------------
+
+Return risks as:
+
+- short technical findings
+- implementation-specific
+- production failure focused
+- operationally realistic
+- no vague statements
+- no generic warnings
+- no consultant language
+- no explanation paragraphs
+
+GOOD:
+Approval queue lacks dead-letter handling
+
+GOOD:
+Policy validation service has no retry safety
+
+GOOD:
+Manual escalation path creates approval bottleneck
+
+GOOD:
+CRM sync failure causes silent customer mismatch
+
+BAD:
+System may fail
+
+BAD:
+This could create issues in production
+
+BAD:
+Workflow may not scale properly
+
+BAD:
+This architecture may need improvement
+
+Every risk must feel like:
+an actual incident review finding.
+
+-----------------------------------
+STRICT OUTPUT FORMAT
+-----------------------------------
+
+Return ONLY valid JSON.
+
+{{
+  "risks": [
+    "specific production risk 1",
+    "specific production risk 2",
+    "specific production risk 3",
+    "specific production risk 4",
+    "specific production risk 5"
+  ]
+}}
+
+Bad example:
+"system may fail"
+
+Good example:
+"Approval queue has no dead-letter handling causing silent task loss"
+
+Good example:
+"Missing idempotency may trigger duplicate payment execution"
+
+No markdown.
+No explanations.
+No text outside JSON.
+"""
+
+    response = llm.invoke(prompt)
+
+    fallback = {
+        "risks": [
+            "Approval queue lacks dead-letter handling causing silent task loss",
+            "Manual escalation path creates approval bottleneck during peak load",
+            "Missing retry-safe execution may trigger duplicate business actions",
+            "No centralized audit trail creates compliance investigation risk",
+            "Missing service-level monitoring hides production degradation"
+        ]
+    }
+
+    result = safe_json_parse(
+        response.content,
+        fallback=fallback
+    )
+
+    if (
+        not isinstance(result, dict)
+        or "risks" not in result
+    ):
+        return fallback
+
+    if not isinstance(result["risks"], list):
+        result["risks"] = fallback["risks"]
+
+    return result

src/agents/executive_summary.py

@@ -0,0 +1,199 @@
+from src.tools.llm import get_llm
+from src.tools.json_parser import safe_json_parse
+
+
+def executive_summary_agent(workflow_steps, final_architecture):
+    """
+    Executive Summary Agent
+
+    Goal:
+    Convert technical architecture into business impact
+    + generate realistic deployment metrics.
+    """
+
+    llm = get_llm()
+
+    prompt = f"""
+You are the EXECUTIVE SUMMARY Agent inside SystemForge.
+
+You are a Principal Solutions Architect speaking to:
+
+- CTO
+- VP Engineering
+- Head of Operations
+- Enterprise Leadership
+
+Your job is to translate technical architecture into:
+
+1. deployment readiness score
+2. automation potential
+3. operational risk score
+4. architecture confidence score
+5. business impact summary
+
+You do NOT write technical implementation details.
+
+You do NOT write like a consultant.
+
+You explain:
+why this architecture matters to the business.
+
+You focus on:
+
+- operational efficiency
+- execution speed
+- approval reduction
+- production reliability
+- enterprise scalability
+- compliance confidence
+- deployment readiness
+
+NOT:
+
+- technical implementation details
+- infrastructure cost anxiety
+- generic transformation language
+
+-----------------------------------
+INPUT WORKFLOW
+-----------------------------------
+
+{workflow_steps}
+
+-----------------------------------
+FINAL ARCHITECTURE
+-----------------------------------
+
+{final_architecture}
+
+-----------------------------------
+YOUR TASK
+-----------------------------------
+
+Generate realistic executive-level metrics.
+
+Avoid fake-looking values.
+
+Bad:
+100%
+99%
+Perfect
+
+Good:
+87%
+72%
+Low to Moderate Risk
+91%
+
+VERY IMPORTANT:
+
+Business impact must be:
+
+- short executive statements
+- business outcome focused
+- operationally measurable
+- enterprise language
+- no technical implementation detail
+- no long explanations
+- no consultant paragraphs
+
+GOOD:
+Reduced manual approvals through policy-driven automation
+
+GOOD:
+Improved workflow speed using async approval routing
+
+GOOD:
+Lowered operational failure risk with retry-safe execution
+
+GOOD:
+Improved compliance visibility through centralized audit logs
+
+BAD:
+The system architecture uses better monitoring and queues
+
+BAD:
+This architecture improves scalability and reliability significantly
+
+BAD:
+AI improves business performance
+
+Do NOT over-focus on infrastructure cost.
+
+Prioritize:
+
+time reduction,
+manual effort reduction,
+deployment readiness,
+operational confidence
+
+over:
+
+monthly cloud cost discussion.
+
+-----------------------------------
+STRICT OUTPUT FORMAT
+-----------------------------------
+
+Return ONLY valid JSON.
+
+{{
+  "deployment_readiness": "87%",
+  "automation_potential": "74%",
+  "risk_score": "Low Risk",
+  "confidence_score": "91%",
+
+  "business_impact": [
+    "impact 1",
+    "impact 2",
+    "impact 3",
+    "impact 4",
+    "impact 5"
+  ]
+}}
+
+No markdown.
+No explanations.
+No text outside JSON.
+"""
+
+    response = llm.invoke(prompt)
+
+    fallback = {
+        "deployment_readiness": "88%",
+        "automation_potential": "76%",
+        "risk_score": "Low to Moderate Risk",
+        "confidence_score": "90%",
+        "business_impact": [
+            "Reduced manual approvals through policy-driven automation",
+            "Improved workflow speed using async approval routing",
+            "Lowered production failure risk with retry-safe execution",
+            "Improved compliance visibility through centralized audit logging",
+            "Enabled scale readiness for high-volume enterprise workflows"
+        ]
+    }
+
+    result = safe_json_parse(
+        response.content,
+        fallback=fallback
+    )
+
+    required_keys = [
+        "deployment_readiness",
+        "automation_potential",
+        "risk_score",
+        "confidence_score",
+        "business_impact"
+    ]
+
+    if not isinstance(result, dict):
+        return fallback
+
+    for key in required_keys:
+        if key not in result:
+            result[key] = fallback[key]
+
+    if not isinstance(result["business_impact"], list):
+        result["business_impact"] = fallback["business_impact"]
+
+    return result

src/agents/refiner.py

@@ -0,0 +1,275 @@
+from src.tools.llm import get_llm
+from src.tools.json_parser import safe_json_parse
+
+
+def refiner_agent(workflow_steps, architecture, critic_feedback):
+    """
+    Production Refiner Agent
+
+    Goal:
+    Convert architecture into deployment-ready production design.
+    """
+
+    llm = get_llm()
+
+    prompt = f"""
+You are the PRODUCTION REFINER Agent inside SystemForge.
+
+You are a Staff+ Engineer responsible for final
+production readiness.
+
+Your job is to transform architecture into something
+that can survive real-world enterprise deployment.
+
+You think like:
+- Staff Engineer
+- Principal Platform Engineer
+- Production Reliability Engineer
+- Distributed Systems Designer
+
+You do NOT write like a consultant.
+
+You write like the engineer who must deploy
+this system to production tomorrow.
+
+You optimize for:
+- operational excellence
+- failure recovery
+- auditability
+- deployment safety
+- observability
+- rollback readiness
+- compliance
+- scale readiness
+
+-----------------------------------
+INPUTS
+-----------------------------------
+
+ORIGINAL WORKFLOW:
+{workflow_steps}
+
+ARCHITECT OUTPUT:
+{architecture}
+
+CRITIC FEEDBACK:
+{critic_feedback}
+
+-----------------------------------
+YOUR TASK
+-----------------------------------
+
+Resolve the critic risks by adding:
+
+1. Dead Letter Queues (DLQ)
+2. Retry-safe execution paths
+3. Idempotent workflows
+4. Audit logging
+5. Distributed tracing
+6. Monitoring + alerting
+7. Human override paths
+8. Rollback safety
+9. Confidence scoring
+10. Failure isolation boundaries
+11. Circuit breaker protection
+12. Deployment readiness strategy
+
+You MUST also create final architecture layers.
+
+-----------------------------------
+VERY IMPORTANT
+-----------------------------------
+
+Return improvements as:
+
+- short technical improvements
+- production deployment focused
+- implementation-specific
+- enterprise operational language
+- no generic explanations
+- no consultant language
+- no vague statements
+- no paragraphs
+
+GOOD:
+Added dead-letter queue for approval failures
+
+GOOD:
+Introduced idempotent retry-safe payment execution
+
+GOOD:
+Enabled audit-safe approval decision logging
+
+GOOD:
+Added rollback workflow for failed ERP sync
+
+BAD:
+Improved monitoring
+
+BAD:
+System is now more reliable
+
+BAD:
+Added better observability for production
+
+BAD:
+Improved deployment quality
+
+Each improvement must feel like:
+a real production deployment change.
+
+-----------------------------------
+ARCHITECTURE LAYERS RULES
+-----------------------------------
+
+Architecture layers must be:
+
+- production-grade
+- short + clear
+- system boundary focused
+- implementation-ready
+- enterprise architecture naming style
+
+GOOD:
+Workflow Orchestration Layer
+
+GOOD:
+Decision + Validation Layer
+
+GOOD:
+Production Reliability Layer
+
+BAD:
+AI Smart Layer
+
+BAD:
+Automation System Layer
+
+BAD:
+Technology Improvement Layer
+
+Descriptions must be concise and technical.
+
+Items must be:
+
+- real services
+- real components
+- real infrastructure boundaries
+
+GOOD:
+Approval Orchestration Engine
+
+GOOD:
+Dead Letter Queue + Retry Engine
+
+GOOD:
+Observability + Audit Logging
+
+BAD:
+AI Automation Tool
+
+BAD:
+Smart Process System
+
+-----------------------------------
+STRICT OUTPUT FORMAT
+-----------------------------------
+
+Return ONLY valid JSON.
+
+{{
+  "improvements": [
+    "specific improvement 1",
+    "specific improvement 2",
+    "specific improvement 3",
+    "specific improvement 4",
+    "specific improvement 5"
+  ],
+
+  "architecture_layers": [
+    {{
+      "title": "Layer Name",
+      "description": "Production-grade explanation",
+      "items": [
+        "specific item 1",
+        "specific item 2",
+        "specific item 3"
+      ]
+    }}
+  ]
+}}
+
+No markdown.
+No explanations.
+No text outside JSON.
+"""
+
+    response = llm.invoke(prompt)
+
+    fallback = {
+        "improvements": [
+            "Added dead-letter queue for failed approval events",
+            "Introduced idempotent retry-safe execution for approvals",
+            "Enabled centralized audit logs and distributed tracing",
+            "Added circuit breaker protection and service isolation boundaries",
+            "Improved monitoring with rollback readiness and human override"
+        ],
+        "architecture_layers": [
+            {
+                "title": "Workflow Orchestration Layer",
+                "description": "Captures workflow inputs and manages approval lifecycle safely",
+                "items": [
+                    "Workflow Intake Service",
+                    "Approval Orchestration Engine",
+                    "Human Escalation Manager"
+                ]
+            },
+            {
+                "title": "Decision + Validation Layer",
+                "description": "Validates business rules and executes policy decisions",
+                "items": [
+                    "Validation Engine",
+                    "Policy Decision Service",
+                    "Approval Routing Engine"
+                ]
+            },
+            {
+                "title": "Inference + Compute Layer",
+                "description": "Handles production LLM inference using GPU-backed serving",
+                "items": [
+                    "Qwen 2.5 Inference",
+                    "vLLM OpenAI-Compatible Serving",
+                    "AMD MI300X ROCm Runtime"
+                ]
+            },
+            {
+                "title": "Production Reliability Layer",
+                "description": "Provides retries, observability, compliance, and failure recovery",
+                "items": [
+                    "Dead Letter Queue + Retry Engine",
+                    "PostgreSQL + Redis",
+                    "Observability + Audit Logging"
+                ]
+            }
+        ]
+    }
+
+    result = safe_json_parse(
+        response.content,
+        fallback=fallback
+    )
+
+    if (
+        not isinstance(result, dict)
+        or "improvements" not in result
+        or "architecture_layers" not in result
+    ):
+        return fallback
+
+    if not isinstance(result["improvements"], list):
+        result["improvements"] = fallback["improvements"]
+
+    if not isinstance(result["architecture_layers"], list):
+        result["architecture_layers"] = fallback["architecture_layers"]
+
+    return result

src/api/main.py

@@ -0,0 +1,109 @@
+from fastapi import FastAPI, HTTPException
+from pydantic import BaseModel
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+
+from src.workflows.crew import run_systemforge
+from src.api.pdf_generator import generate_architecture_pdf
+
+
+app = FastAPI(
+    title="SystemForge API"
+)
+
+
+# CORS for Next.js frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=[
+        "http://localhost:3000",
+    ],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+class WorkflowRequest(BaseModel):
+    workflow: list[str]
+
+
+@app.get("/")
+def root():
+    return {
+        "message": "SystemForge API Running"
+    }
+
+
+@app.post("/run-systemforge")
+def generate_architecture(
+    request: WorkflowRequest
+):
+    try:
+        if not request.workflow:
+            raise HTTPException(
+                status_code=400,
+                detail="Workflow steps cannot be empty"
+            )
+
+        result = run_systemforge(
+            request.workflow
+        )
+
+        return result
+
+    except HTTPException:
+        raise
+
+    except Exception as e:
+        print(f"SystemForge Error: {str(e)}")
+
+        raise HTTPException(
+            status_code=500,
+            detail="Failed to generate architecture"
+        )
+
+
+@app.post("/download-report")
+def download_report(
+    request: WorkflowRequest
+):
+    """
+    Generates PDF architecture report
+    and returns downloadable file
+    """
+
+    try:
+        if not request.workflow:
+            raise HTTPException(
+                status_code=400,
+                detail="Workflow steps cannot be empty"
+            )
+
+        # Generate architecture first
+        result = run_systemforge(
+            request.workflow
+        )
+
+        # Create PDF
+        file_path = generate_architecture_pdf(
+            data=result,
+            filename="architecture_report.pdf"
+        )
+
+        return FileResponse(
+            path=file_path,
+            filename="SystemForge_Architecture_Report.pdf",
+            media_type="application/pdf"
+        )
+
+    except HTTPException:
+        raise
+
+    except Exception as e:
+        print(f"PDF Generation Error: {str(e)}")
+
+        raise HTTPException(
+            status_code=500,
+            detail="Failed to generate report"
+        )

src/api/pdf_generator.py

@@ -0,0 +1,444 @@
+from datetime import datetime
+
+from reportlab.platypus import (
+    SimpleDocTemplate,
+    Paragraph,
+    Spacer,
+    Table,
+    TableStyle,
+)
+
+from reportlab.lib.styles import (
+    getSampleStyleSheet,
+    ParagraphStyle,
+)
+
+from reportlab.lib.pagesizes import A4
+from reportlab.lib.enums import TA_CENTER
+from reportlab.lib import colors
+from reportlab.lib.units import inch
+
+
+def generate_architecture_pdf(
+    data,
+    filename="architecture_report.pdf"
+):
+    """
+    Premium Executive PDF
+    Compact + Professional + CTO Ready
+
+    Includes:
+    - Cover
+    - Before / After Workflow
+    - Metrics Dashboard
+    - Architecture Blueprint
+    - Executive Summary
+    """
+
+    # =====================================================
+    # COLORS
+    # =====================================================
+
+    PRIMARY = colors.HexColor("#2563EB")
+    SUCCESS = colors.HexColor("#16A34A")
+    WARNING = colors.HexColor("#D97706")
+    PURPLE = colors.HexColor("#7C3AED")
+
+    TEXT = colors.HexColor("#0F172A")
+    MUTED = colors.HexColor("#64748B")
+
+    BORDER = colors.HexColor("#E2E8F0")
+
+    LIGHT_BLUE = colors.HexColor("#EFF6FF")
+    LIGHT_RED = colors.HexColor("#FEF2F2")
+    LIGHT_BG = colors.HexColor("#F8FAFC")
+    EXEC_BG = colors.HexColor("#FAF5FF")
+
+    # =====================================================
+    # DOCUMENT
+    # =====================================================
+
+    doc = SimpleDocTemplate(
+        filename,
+        pagesize=A4,
+        leftMargin=32,
+        rightMargin=32,
+        topMargin=32,
+        bottomMargin=32,
+    )
+
+    styles = getSampleStyleSheet()
+
+    # =====================================================
+    # TYPOGRAPHY
+    # =====================================================
+
+    title_style = ParagraphStyle(
+        "Title",
+        parent=styles["Title"],
+        fontName="Helvetica-Bold",
+        fontSize=22,
+        leading=28,
+        alignment=TA_CENTER,
+        textColor=TEXT,
+        spaceAfter=8,
+    )
+
+    subtitle_style = ParagraphStyle(
+        "Subtitle",
+        parent=styles["Normal"],
+        fontSize=10,
+        leading=14,
+        alignment=TA_CENTER,
+        textColor=MUTED,
+        spaceAfter=6,
+    )
+
+    section_style = ParagraphStyle(
+        "Section",
+        parent=styles["Heading2"],
+        fontName="Helvetica-Bold",
+        fontSize=13,
+        leading=18,
+        textColor=PRIMARY,
+        spaceBefore=10,
+        spaceAfter=8,
+    )
+
+    body_style = ParagraphStyle(
+        "Body",
+        parent=styles["BodyText"],
+        fontSize=10,
+        leading=14,
+        textColor=TEXT,
+        spaceAfter=4,
+    )
+
+    metric_value_style = ParagraphStyle(
+        "MetricValue",
+        parent=styles["BodyText"],
+        fontName="Helvetica-Bold",
+        fontSize=14,
+        alignment=TA_CENTER,
+        textColor=TEXT,
+    )
+
+    metric_label_style = ParagraphStyle(
+        "MetricLabel",
+        parent=styles["BodyText"],
+        fontSize=8,
+        alignment=TA_CENTER,
+        textColor=MUTED,
+    )
+
+    content = []
+
+    # =====================================================
+    # COVER SECTION
+    # =====================================================
+
+    content.append(
+        Paragraph(
+            "SYSTEMFORGE AI",
+            title_style
+        )
+    )
+
+    content.append(
+        Paragraph(
+            "Production Architecture Blueprint",
+            subtitle_style
+        )
+    )
+
+    content.append(
+        Paragraph(
+            f"Generated on: {datetime.now().strftime('%d %B %Y')}",
+            subtitle_style
+        )
+    )
+
+    content.append(
+        Paragraph(
+            "Confidential — Internal Architecture Review",
+            subtitle_style
+        )
+    )
+
+    content.append(Spacer(1, 0.15 * inch))
+
+    hero = Table(
+        [[
+            Paragraph(
+                "Workflow Redesign + Production Validation Engine",
+                body_style
+            )
+        ]],
+        colWidths=[500]
+    )
+
+    hero.setStyle(
+        TableStyle([
+            ("BACKGROUND", (0, 0), (-1, -1), LIGHT_BG),
+            ("BOX", (0, 0), (-1, -1), 1, PRIMARY),
+            ("LEFTPADDING", (0, 0), (-1, -1), 14),
+            ("TOPPADDING", (0, 0), (-1, -1), 12),
+            ("BOTTOMPADDING", (0, 0), (-1, -1), 12),
+        ])
+    )
+
+    content.append(hero)
+    content.append(Spacer(1, 0.20 * inch))
+
+    # =====================================================
+    # BEFORE / AFTER WORKFLOW
+    # =====================================================
+
+    before = data.get(
+        "workflowTransformation",
+        {}
+    ).get("before", [])
+
+    after = data.get(
+        "workflowTransformation",
+        {}
+    ).get("after", [])
+
+    before_html = "<br/>".join(
+        [f"• {step}" for step in before]
+    )
+
+    after_html = "<br/>".join(
+        [f"• {step}" for step in after]
+    )
+
+    content.append(
+        Paragraph(
+            "Before → After Workflow Transformation",
+            section_style
+        )
+    )
+
+    before_after = Table(
+        [[
+            Paragraph(
+                f"<b>BEFORE — MANUAL WORKFLOW</b><br/><br/>{before_html}",
+                body_style
+            ),
+            Paragraph(
+                f"<b>AFTER — AI NATIVE SYSTEM</b><br/><br/>{after_html}",
+                body_style
+            )
+        ]],
+        colWidths=[250, 250]
+    )
+
+    before_after.setStyle(
+        TableStyle([
+            ("BACKGROUND", (0, 0), (0, 0), LIGHT_RED),
+            ("BACKGROUND", (1, 0), (1, 0), LIGHT_BLUE),
+            ("BOX", (0, 0), (-1, -1), 1, BORDER),
+            ("INNERGRID", (0, 0), (-1, -1), 0.5, BORDER),
+            ("VALIGN", (0, 0), (-1, -1), "TOP"),
+            ("LEFTPADDING", (0, 0), (-1, -1), 12),
+            ("TOPPADDING", (0, 0), (-1, -1), 12),
+            ("BOTTOMPADDING", (0, 0), (-1, -1), 12),
+        ])
+    )
+
+    content.append(before_after)
+    content.append(Spacer(1, 0.20 * inch))
+
+    # =====================================================
+    # METRICS DASHBOARD
+    # =====================================================
+
+    content.append(
+        Paragraph(
+            "Final System Metrics",
+            section_style
+        )
+    )
+
+    metrics = data.get(
+        "finalMetrics",
+        {}
+    )
+
+    metric_items = [
+        (
+            metrics.get(
+                "deploymentReadiness",
+                "—"
+            ),
+            "Deployment Readiness",
+            SUCCESS,
+        ),
+        (
+            metrics.get(
+                "automationPotential",
+                "—"
+            ),
+            "Automation Potential",
+            PRIMARY,
+        ),
+        (
+            metrics.get(
+                "riskScore",
+                "—"
+            ),
+            "Risk Score",
+            WARNING,
+        ),
+    ]
+
+    cards = []
+
+    for value, label, color in metric_items:
+        card = Table(
+            [[
+                Paragraph(
+                    str(value),
+                    metric_value_style
+                )
+            ],
+            [
+                Paragraph(
+                    label,
+                    metric_label_style
+                )
+            ]],
+            colWidths=[155]
+        )
+
+        card.setStyle(
+            TableStyle([
+                ("BOX", (0, 0), (-1, -1), 1, color),
+                ("TOPPADDING", (0, 0), (-1, -1), 10),
+                ("BOTTOMPADDING", (0, 0), (-1, -1), 10),
+            ])
+        )
+
+        cards.append(card)
+
+    content.append(
+        Table([cards])
+    )
+
+    content.append(Spacer(1, 0.20 * inch))
+
+    # =====================================================
+    # ARCHITECTURE BLUEPRINT
+    # =====================================================
+
+    content.append(
+        Paragraph(
+            "Final Architecture Blueprint",
+            section_style
+        )
+    )
+
+    layers = data.get(
+        "architectureLayers",
+        []
+    )
+
+    for layer in layers:
+        layer_card = Table(
+            [[
+                Paragraph(
+                    f"<b>{layer.get('title')}</b><br/><br/>{layer.get('description')}",
+                    body_style
+                )
+            ]],
+            colWidths=[500]
+        )
+
+        layer_card.setStyle(
+            TableStyle([
+                ("BOX", (0, 0), (-1, -1), 1, BORDER),
+                ("LEFTPADDING", (0, 0), (-1, -1), 12),
+                ("TOPPADDING", (0, 0), (-1, -1), 10),
+                ("BOTTOMPADDING", (0, 0), (-1, -1), 10),
+            ])
+        )
+
+        content.append(layer_card)
+        content.append(
+            Spacer(1, 0.10 * inch)
+        )
+
+    # =====================================================
+    # EXECUTIVE SUMMARY
+    # =====================================================
+
+    executive = data.get(
+        "executiveSummary",
+        {}
+    )
+
+    executive_points = executive.get(
+        "decisions",
+        []
+    )
+
+    if executive_points:
+        content.append(
+            Spacer(1, 0.15 * inch)
+        )
+
+        content.append(
+            Paragraph(
+                "Executive Summary",
+                section_style
+            )
+        )
+
+        executive_html = "<br/>".join(
+            [f"• {point}" for point in executive_points]
+        )
+
+        executive_card = Table(
+            [[
+                Paragraph(
+                    f"<b>Business Impact + ROI</b><br/><br/>{executive_html}",
+                    body_style
+                )
+            ]],
+            colWidths=[500]
+        )
+
+        executive_card.setStyle(
+            TableStyle([
+                ("BACKGROUND", (0, 0), (-1, -1), EXEC_BG),
+                ("BOX", (0, 0), (-1, -1), 1, PURPLE),
+                ("LEFTPADDING", (0, 0), (-1, -1), 14),
+                ("TOPPADDING", (0, 0), (-1, -1), 12),
+                ("BOTTOMPADDING", (0, 0), (-1, -1), 12),
+            ])
+        )
+
+        content.append(executive_card)
+
+    # =====================================================
+    # FOOTER
+    # =====================================================
+
+    content.append(
+        Spacer(1, 0.20 * inch)
+    )
+
+    content.append(
+        Paragraph(
+            "Generated by SystemForge AI — Enterprise Workflow Redesign Engine",
+            subtitle_style
+        )
+    )
+
+    # =====================================================
+    # BUILD
+    # =====================================================
+
+    doc.build(content)
+
+    return filename

src/config/agents.yaml

@@ -0,0 +1,13 @@
+'''
+architect:
+  role: Principal Software Architect
+  goal: Design production-grade architecture plans
+
+critic:
+  role: Senior Site Reliability Engineer
+  goal: Detect scalability and reliability risks
+
+refiner:
+  role: Autonomous Recovery Engine
+  goal: Improve weak architecture decisions automatically
+'''

src/config/tasks.yaml

@@ -0,0 +1,10 @@
+'''
+draft_task:
+  description: "Create architecture blueprint from project idea"
+
+review_task:
+  description: "Identify SPOFs, bottlenecks, and observability gaps"
+
+finalize_task:
+  description: "Apply improvements and produce refined architecture"
+'''

src/prompts/workflow_prompt.py

@@ -0,0 +1,158 @@
+WORKFLOW_TRANSFORMATION_PROMPT = """
+You are SystemForge AI — an elite production systems architect.
+
+Your job is to redesign messy manual business workflows into
+production-grade AI-native operational systems.
+
+You do NOT explain like a consultant.
+
+You think like:
+
+- Principal Systems Architect
+- Staff Platform Engineer
+- Enterprise Workflow Designer
+- Production AI Operator
+
+Your output must be:
+
+- structured
+- operational
+- production-ready
+- implementation-focused
+- enterprise-grade
+
+--------------------------------------------------
+TASK
+--------------------------------------------------
+
+Given a manual workflow, redesign it into a scalable,
+AI-native production workflow.
+
+You must transform:
+
+BEFORE → AFTER
+
+from:
+
+manual operations,
+spreadsheets,
+email approvals,
+human bottlenecks,
+copy-paste processes
+
+into:
+
+automation layers,
+validation services,
+decision engines,
+approval routing,
+queue-based systems,
+human fallback paths,
+CRM / ERP sync,
+production architecture patterns
+
+--------------------------------------------------
+VERY IMPORTANT
+--------------------------------------------------
+
+Return AFTER workflow steps as:
+
+- short operational labels
+- max 8–12 words
+- enterprise workflow naming style
+- production-grade system language
+- no long explanations
+- no paragraphs
+- no arrows
+- no consultant language
+- no generic text
+
+GOOD:
+Policy validation engine verifies coverage
+
+GOOD:
+Smart approval routing triggers manager review
+
+GOOD:
+CRM sync service updates customer records
+
+BAD:
+The system automatically checks whether the policy
+is valid and then sends it for manager approval
+
+BAD:
+This process improves efficiency and reduces manual effort
+
+BAD:
+The workflow becomes faster and more scalable
+
+--------------------------------------------------
+RULES
+--------------------------------------------------
+
+1. Keep BEFORE workflow realistic and messy
+
+Examples:
+
+- Agent opens email manually
+- HR reviews resumes manually
+- Finance validates invoice manually
+
+2. AFTER workflow must be production-grade
+
+Examples:
+
+- Resume intake API ingests candidate profiles
+- Skill matching engine scores JD fit
+- Auto shortlist / reject / escalate
+
+3. Include human review only where truly necessary
+
+4. Prefer:
+
+validation engine,
+routing service,
+approval workflow,
+decision engine,
+notification service,
+CRM update,
+ERP sync,
+queue processing,
+human escalation,
+audit trail
+
+5. Do NOT generate generic AI buzzwords
+
+Avoid:
+
+- AI powered solution
+- smart automation platform
+- intelligent system
+- scalable transformation
+
+Use real execution systems instead.
+
+--------------------------------------------------
+OUTPUT FORMAT
+--------------------------------------------------
+
+Return JSON only.
+
+{
+  "before": [
+    "step 1",
+    "step 2",
+    "step 3"
+  ],
+  "after": [
+    "step 1",
+    "step 2",
+    "step 3"
+  ]
+}
+
+No markdown.
+No explanation.
+No commentary.
+JSON only.
+"""

src/state/state.py

@@ -0,0 +1,24 @@
+from pydantic import BaseModel, Field
+from typing import List, Dict, Any
+
+
+class SystemState(BaseModel):
+    project_idea: str
+    workflow_steps: List[str] = Field(default_factory=list)
+    architecture_plan: Dict[str, Any] = Field(default_factory=dict)
+    critic_flags: List[str] = Field(default_factory=list)
+    refined_solution: Dict[str, Any] = Field(default_factory=dict)
+    critic_feedback: Dict[str, Any] = Field(default_factory=dict)
+    executive_summary: Dict[str, Any] = Field(default_factory=dict)
+
+
+# Simple global in-memory state
+system_state: SystemState = SystemState(
+    project_idea="",
+    workflow_steps=[],
+    architecture_plan={},
+    critic_flags=[],
+    refined_solution={},
+    critic_feedback={},
+    executive_summary={}
+)

src/tools/json_parser.py

@@ -0,0 +1,48 @@
+import json
+import re
+
+
+def safe_json_parse(raw_text, fallback):
+    """
+    Safely parse LLM JSON output.
+
+    Handles:
+    - markdown code blocks
+    - extra explanation text
+    - malformed formatting
+    - greedy JSON extraction issues
+    - invalid output fallback
+    """
+
+    try:
+        if not raw_text:
+            return fallback
+
+        cleaned = raw_text.strip()
+
+        # Remove markdown code fences
+        cleaned = re.sub(
+            r"```json|```python|```",
+            "",
+            cleaned
+        ).strip()
+
+        # Normalize smart quotes
+        cleaned = cleaned.replace("“", '"')
+        cleaned = cleaned.replace("”", '"')
+        cleaned = cleaned.replace("’", "'")
+
+        # Extract first valid JSON object only (non-greedy)
+        match = re.search(
+            r"\{[\s\S]*?\}",
+            cleaned
+        )
+
+        if match:
+            cleaned = match.group()
+
+        return json.loads(cleaned)
+
+    except Exception as e:
+        print(f"JSON Parse Failed: {str(e)}")
+        return fallback

src/tools/llm.py

@@ -0,0 +1,54 @@
+import os
+from dotenv import load_dotenv
+
+from langchain_groq import ChatGroq
+from langchain_openai import ChatOpenAI
+
+load_dotenv()
+
+
+def get_llm():
+    """
+    Dynamic LLM Provider
+
+    DEV MODE:
+        Groq API
+
+    PROD MODE:
+        AMD MI300X + vLLM + Qwen2.5-7B-Instruct
+    """
+
+    provider = os.getenv(
+        "LLM_PROVIDER",
+        "groq"
+    ).lower()
+
+    # =========================
+    # AMD GPU Inference (PROD)
+    # =========================
+    if provider == "amd":
+        return ChatOpenAI(
+            api_key="dummy",
+            base_url=os.getenv(
+                "AMD_BASE_URL",
+                "http://129.212.182.205:8000/v1"
+            ),
+            model=os.getenv(
+                "AMD_MODEL",
+                "Qwen/Qwen2.5-7B-Instruct"
+            ),
+            temperature=0.1,
+            max_tokens=1200,
+        )
+
+    # =========================
+    # GROQ (DEV)
+    # =========================
+    return ChatGroq(
+        groq_api_key=os.getenv(
+            "GROQ_API_KEY"
+        ),
+        model_name="llama-3.1-8b-instant",
+        temperature=0.1,
+        max_tokens=1200,
+    )

src/workflows/crew.py

@@ -0,0 +1,186 @@
+from src.agents.architect import architect_agent
+from src.agents.critic import infrastructure_critic_agent
+from src.agents.refiner import refiner_agent
+from src.agents.executive_summary import executive_summary_agent
+
+
+def run_systemforge(workflow_steps):
+    """
+    workflow_steps:
+    [
+        "Resume comes from LinkedIn",
+        "HR manually shortlists candidates",
+        ...
+    ]
+    """
+
+    # -----------------------------------
+    # STEP 1 — Architecture Generation
+    # -----------------------------------
+
+    architect_output = architect_agent(
+        workflow_steps=workflow_steps,
+        bottlenecks=None
+    )
+
+    # Safety fallback
+    after_workflow = architect_output.get(
+        "after_workflow",
+        [
+            "Workflow intake service captures requests",
+            "Validation engine verifies business rules",
+            "Queue orchestration handles async processing",
+            "Approval workflow triggers escalation routing",
+            "Observability layer tracks failures and audits"
+        ]
+    )
+
+    architect_decisions = architect_output.get(
+        "decisions",
+        [
+            "Introduced queue-first workflow architecture",
+            "Separated validation from execution boundaries",
+            "Added policy engine for approval workflows",
+            "Created human escalation path for exceptions",
+            "Improved monitoring with audit-safe observability"
+        ]
+    )
+
+    # -----------------------------------
+    # STEP 2 — Infrastructure Critic
+    # -----------------------------------
+
+    critic_output = infrastructure_critic_agent(
+        workflow_steps=workflow_steps,
+        architecture=architect_output
+    )
+
+    critic_risks = critic_output.get(
+        "risks",
+        [
+            "Approval queue lacks dead-letter handling",
+            "Missing retry-safe execution may duplicate actions",
+            "Manual escalation path creates bottlenecks",
+            "No centralized audit trail creates compliance risk",
+            "Missing monitoring hides production degradation"
+        ]
+    )
+
+    # -----------------------------------
+    # STEP 3 — Production Refinement
+    # -----------------------------------
+
+    refiner_output = refiner_agent(
+        workflow_steps=workflow_steps,
+        architecture=architect_output,
+        critic_feedback=critic_output
+    )
+
+    refiner_improvements = refiner_output.get(
+        "improvements",
+        [
+            "Added dead-letter queue for failed approvals",
+            "Introduced idempotent retry-safe execution",
+            "Enabled audit-safe decision logging",
+            "Added rollback workflow for critical failures",
+            "Improved monitoring with human override paths"
+        ]
+    )
+
+    architecture_layers = refiner_output.get(
+        "architecture_layers",
+        []
+    )
+
+    # -----------------------------------
+    # STEP 4 — Executive Summary
+    # -----------------------------------
+
+    summary_output = executive_summary_agent(
+        workflow_steps=workflow_steps,
+        final_architecture=refiner_output
+    )
+
+    # -----------------------------------
+    # FINAL RESPONSE
+    # -----------------------------------
+
+    final_response = {
+        "workflowTransformation": {
+            "before": workflow_steps,
+
+            # VERY IMPORTANT:
+            # keep AFTER workflow short, clean,
+            # production-grade labels only
+            "after": after_workflow
+        },
+
+        "architect": {
+            "title": "SYSTEMS ARCHITECT",
+            "subtitle": "Production Architecture Design",
+            "decisions": architect_decisions
+        },
+
+        "critic": {
+            "title": "INFRASTRUCTURE CRITIC",
+            "subtitle": "Failure Points + Risk Detection",
+            "decisions": critic_risks
+        },
+
+        "refiner": {
+            "title": "PRODUCTION REFINER",
+            "subtitle": "Optimization + Reliability Improvements",
+            "decisions": refiner_improvements
+        },
+
+        "architectureLayers": architecture_layers,
+
+        # IMPORTANT:
+        # remove cost anxiety focus
+        # prioritize operational value
+        "finalMetrics": {
+            "deploymentReadiness":
+                summary_output.get(
+                    "deployment_readiness",
+                    "92%"
+                ),
+
+            "automationPotential":
+                summary_output.get(
+                    "automation_potential",
+                    "88%"
+                ),
+
+            "riskScore":
+                summary_output.get(
+                    "risk_score",
+                    "Low"
+                ),
+
+            # Better than infra-cost obsession
+            "timeReduction":
+                "45–60 min → 10–15 min",
+
+            "architectureConfidence":
+                summary_output.get(
+                    "confidence_score",
+                    "High"
+                )
+        },
+
+        "executiveSummary": {
+            "title": "EXECUTIVE IMPACT",
+            "subtitle": "Business Outcome + ROI",
+            "decisions":
+                summary_output.get(
+                    "business_impact",
+                    [
+                        "Reduced manual approvals significantly",
+                        "Improved operational speed and reliability",
+                        "Enabled production-grade deployment path"
+                    ]
+                )
+        }
+    }
+
+    return final_response