workflow.coditect.ai - Technical Analysis & Architecture

Date: November 24, 2025 Status: ✅ 90% Complete, Production Deployed URL: https://workflow.coditect.ai Purpose: Deep-dive analysis of AgentFlow platform for design system and architecture reference

---

Executive Summary

workflow.coditect.ai (AgentFlow) is a subscription SaaS platform for discovering and analyzing where agentic workflows can be applied across organizations to determine optimal ROI for automation opportunities. Built with React 18 + FastAPI, deployed on GKE with PostgreSQL 15 and Redis.

Key Metrics:

• Status: 90% complete, production deployed (Oct 29, 2025)
• GCP Project: agentflow-prod-2025
• Pods: 4 total (2 backend + 2 frontend)
• URL: https://workflow.coditect.ai
• Backend: FastAPI + Python 3.11 + Direct Anthropic SDK
• Frontend: React 18 + TypeScript + Next.js/Vite + Tailwind CSS
• Database: PostgreSQL 15 (Cloud SQL) + Redis 7.x

---

Architecture Overview

Deployment Topology

Internet
    │
    ├─ DNS: workflow.coditect.ai (34.54.33.106)
    │
    └─▶ GCP HTTP(S) Load Balancer
         │
         ├─ SSL Certificate (Auto-managed, Valid Until: 2026-01-26)
         │
         ├─▶ /api/v1/* → agentflow-backend:8000 (2 pods)
         │                    │
         │                    ├─▶ PostgreSQL (35.238.30.60:5432)
         │                    └─▶ Redis 7.x
         │
         ├─▶ /health → agentflow-backend:8000
         │
         └─▶ /* → agentflow-frontend:80 (2 pods)

GKE Cluster: agentflow-cluster
├─ Location: us-central1-a
├─ Nodes: 3 nodes (n1-standard-2)
├─ Backend Deployment (2 replicas)
│   ├─ Image: gcr.io/agentflow-prod-2025/agentflow-backend:latest
│   ├─ Resources: 250m CPU, 512Mi RAM (request)
│   ├─ Limits: 1000m CPU, 2Gi RAM
│   └─ Health: /health endpoint (200 OK)
│
├─ Frontend Deployment (2 replicas)
│   ├─ Image: gcr.io/agentflow-prod-2025/agentflow-frontend:latest
│   ├─ NGINX serving React build
│   └─ Resources: 100m CPU, 256Mi RAM
│
├─ Cloud SQL: agentflow-db
│   ├─ Database: PostgreSQL 15
│   ├─ Tier: db-f1-micro (10GB storage)
│   ├─ Status: RUNNABLE
│   └─ Public IP: 35.238.30.60
│
└─ Redis: agentflow-redis
    ├─ Version: 7.x
    └─ Purpose: Session management, caching

Technology Stack

Frontend:

{
  "react": "^18.3.1",
  "typescript": "^5.3.3",
  "next": "^14.0.0",  // or Vite 5.x
  "tailwindcss": "^3.4.0",
  "zustand": "^4.5.0",
  "@tanstack/react-query": "^5.18.0",
  "@tanstack/react-router": "^1.15.0"
}

Backend (FastAPI):

# requirements.txt
fastapi==0.104.1
uvicorn[standard]==0.24.0
pydantic==2.5.0
sqlalchemy==2.0.23
asyncpg==0.29.0
redis==5.0.1
anthropic==0.7.8  # Direct SDK (no LangChain)
python-multipart==0.0.6
python-jose[cryptography]==3.3.0

Infrastructure:

• GKE (Google Kubernetes Engine)
• Cloud SQL PostgreSQL 15
• Redis 7.x (session management)
• Google-managed SSL certificates
• Cloud Build for CI/CD

---

Multi-Agent System

8 Specialized Agents (Current)

All agents use Direct Anthropic SDK (claude-sonnet-4):

from anthropic import Anthropic

class BaseAgent:
    def __init__(self, agent_id: str, anthropic_config: Dict):
        self.client = Anthropic(api_key=anthropic_config['api_key'])
        self.model = 'claude-sonnet-4-20250514'
        self.max_tokens = 8000
        self.temperature = 0.3

Current Agents

1. Workflow Analyzer (workflow_analyzer.py)

   • High-level workflow understanding
   • Domain identification
   • Initial categorization

2. Task Decomposer (task_decomposer.py)

   • Break workflows into atomic tasks
   • Identify dependencies
   • Create task DAG (directed acyclic graph)

3. Actor Identifier (actor_identifier.py)

   • Discover human actors
   • Identify system actors
   • Map external actors

4. Automation Assessor (automation_assessor.py)

   • Evaluate automation potential (0-100%)
   • ROI assessment
   • Priority recommendations

5. Requirements Extractor (requirements_extractor.py)

   • Extract technical requirements
   • Identify integration needs
   • Data requirements

6. Process Designer (process_designer.py)

   • Design optimal execution flow
   • Handle decision points
   • Error handling strategies

7. Quality Analyzer (quality_analyzer.py)

   • Quality metrics
   • Risk assessment
   • Bottleneck identification

8. Technical Analyzer (technical_analyzer.py)

   • Technical feasibility
   • Tech stack recommendations
   • Architecture suggestions

10 Proposed Agents (Priority 0-2)

P0 - Immediate Priority (Business Critical):

• Cost & ROI Analyzer
• Risk & Mitigation Analyzer
• Security & Compliance Analyzer
• Optimization Advisor

P1 - Next Phase (Technical Excellence):

• Metrics & KPI Designer
• Performance Analyzer
• Integration Analyzer
• Data Flow Analyzer

P2 - Future (User Enablement):

• Training & Documentation Generator
• Change Management Analyzer

---

Design System (SOURCE FOR LICENSE PLATFORM)

Color Palette

Primary Blue Scale (Tailwind CSS):

// tailwind.config.js
export default {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',  // PRIMARY BRAND COLOR
          600: '#0284c7',  // Hover state
          700: '#0369a1',  // Active state
          800: '#075985',
          900: '#0c4a6e',
        },
      },
    },
  },
  plugins: [],
}

Usage:

// Primary button
<button className="bg-primary-500 hover:bg-primary-600 active:bg-primary-700">
  Analyze Workflow
</button>

// Link
<a className="text-primary-600 hover:text-primary-700">
  Learn more
</a>

// Badge
<span className="bg-primary-50 text-primary-700 px-2 py-1 rounded-full">
  Active
</span>

Typography

System Font Stack:

/* index.css */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
               'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
               'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Font Sizes (Tailwind):

<h1 className="text-3xl font-bold">Workflow Analysis</h1>
<h2 className="text-2xl font-semibold">Task Breakdown</h2>
<h3 className="text-xl font-medium">Actor Identification</h3>
<p className="text-base">Body text content</p>
<span className="text-sm text-gray-600">Helper text</span>

Dark Mode Implementation

CSS Class-Based Strategy:

// tailwind.config.js
export default {
  darkMode: 'class',  // Toggle via <html class="dark">
  // ...
}

React Implementation:

import { useState, useEffect } from 'react'

export function useDarkMode() {
  const [isDark, setIsDark] = useState(false)

  useEffect(() => {
    const stored = localStorage.getItem('theme')
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    setIsDark(stored === 'dark' || (!stored && prefersDark))
  }, [])

  useEffect(() => {
    document.documentElement.classList.toggle('dark', isDark)
    localStorage.setItem('theme', isDark ? 'dark' : 'light')
  }, [isDark])

  return [isDark, setIsDark] as const
}

Component Usage:

<div className="bg-white dark:bg-gray-900">
  <p className="text-gray-900 dark:text-gray-100">
    Content that adapts to theme
  </p>
</div>

---

Backend Architecture

FastAPI Service Structure

# src/main.py
from fastapi import FastAPI, Depends
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI(
    title="AgentFlow API",
    version="1.0.0",
    docs_url="/docs",
    redoc_url="/redoc"
)

# CORS Configuration
app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        "https://workflow.coditect.ai",
        "http://workflow.coditect.ai",
        "http://localhost:3000"
    ],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Routes
@app.get("/health")
async def health_check():
    return {"status": "healthy", "version": "1.0.0"}

@app.post("/api/v1/workflows/analyze")
async def analyze_workflow(
    workflow_input: WorkflowInput,
    orchestrator: Orchestrator = Depends(get_orchestrator)
):
    result = await orchestrator.analyze_workflow(workflow_input)
    return result

Agent Orchestration

# src/services/orchestrator.py
from anthropic import Anthropic

class Orchestrator:
    def __init__(self):
        self.agents = {
            'workflow_analyzer': WorkflowAnalyzer('workflow-analyzer', config),
            'task_decomposer': TaskDecomposer('task-decomposer', config),
            'actor_identifier': ActorIdentifier('actor-identifier', config),
            # ... 8 agents total
        }

    async def analyze_workflow(self, workflow_input: str) -> Dict:
        # Phase 1: Initial analysis
        workflow_data = await self.agents['workflow_analyzer'].analyze({
            'input': workflow_input
        })

        # Phase 2: Task decomposition
        tasks = await self.agents['task_decomposer'].analyze({
            'workflow': workflow_data
        })

        # Phase 3: Actor identification
        actors = await self.agents['actor_identifier'].analyze({
            'workflow': workflow_data,
            'tasks': tasks
        })

        # Phase 4: Automation assessment
        assessment = await self.agents['automation_assessor'].analyze({
            'workflow': workflow_data,
            'tasks': tasks,
            'actors': actors
        })

        # ... continue with remaining agents

        return {
            'workflow': workflow_data,
            'tasks': tasks,
            'actors': actors,
            'assessment': assessment,
            # ... full analysis
        }

PostgreSQL Schema

-- Workflows table
CREATE TABLE workflows (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id),
    name VARCHAR(255) NOT NULL,
    description TEXT,
    domain VARCHAR(100),
    status VARCHAR(50),
    created_at TIMESTAMP DEFAULT NOW(),
    updated_at TIMESTAMP DEFAULT NOW()
);

-- Tasks table
CREATE TABLE tasks (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    workflow_id UUID NOT NULL REFERENCES workflows(id),
    name VARCHAR(255) NOT NULL,
    description TEXT,
    dependencies JSONB DEFAULT '[]',
    automation_score INTEGER,
    created_at TIMESTAMP DEFAULT NOW()
);

-- Actors table
CREATE TABLE actors (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    workflow_id UUID NOT NULL REFERENCES workflows(id),
    name VARCHAR(255) NOT NULL,
    type VARCHAR(50),  -- 'human', 'system', 'external'
    role TEXT,
    created_at TIMESTAMP DEFAULT NOW()
);

-- Analysis results table
CREATE TABLE analysis_results (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    workflow_id UUID NOT NULL REFERENCES workflows(id),
    agent_type VARCHAR(100) NOT NULL,
    result JSONB NOT NULL,
    created_at TIMESTAMP DEFAULT NOW()
);

-- Indexes
CREATE INDEX idx_workflows_user_id ON workflows(user_id);
CREATE INDEX idx_tasks_workflow_id ON tasks(workflow_id);
CREATE INDEX idx_actors_workflow_id ON actors(workflow_id);
CREATE INDEX idx_analysis_workflow_id ON analysis_results(workflow_id);

---

Multi-Format Diagram Export

9 Export Formats

Vector Formats (Scalable):

• SVG (web embedding)
• PDF (print, documentation)
• LaTeX/TikZ (academic papers)

Raster Formats (PNG):

• 480p (640×480) - Thumbnails
• 720p (1280×720) - Web previews
• 1080p (1920×1080) - Standard presentations
• 2K (2560×1440) - High-quality displays
• 4K (3840×2160) - Professional presentations
• 5K (5120×2880) - iMac 5K displays
• 6K (6144×3456) - Pro Display XDR
• 8K (7680×4320) - Future-proofing

Source Formats (Editable):

• Mermaid (.mmd) - Text-based diagrams
• PlantUML (.puml) - UML diagrams

Diagram Types

1. Flowchart: Task execution flow with decision points
2. Dependency Graph: Task dependencies and relationships
3. Actor Interaction: Communication patterns between actors
4. Gantt Timeline: Task scheduling and duration
5. Sequence Diagram: Detailed time-ordered interactions
6. State Machine: Workflow states and transitions

Export Engine

# src/services/diagram_export_engine.py
from pathlib import Path
import subprocess

class DiagramExportEngine:
    async def export_diagram(
        self,
        diagram_type: str,
        content: Dict,
        formats: List[str],
        profile: str,
        output_dir: Path
    ) -> List[ExportResult]:
        results = []

        # Generate Mermaid source
        mermaid_source = self.generate_mermaid(diagram_type, content)

        for format in formats:
            if format == 'svg':
                result = await self.export_svg(mermaid_source, output_dir)
            elif format == 'pdf':
                result = await self.export_pdf(mermaid_source, output_dir)
            elif format.startswith('png_'):
                resolution = format.split('_')[1]  # e.g., '1080p'
                result = await self.export_png(mermaid_source, resolution, output_dir)
            # ... handle other formats

            results.append(result)

        return results

---

Deployment Process

Cloud Build Configuration

cloudbuild.yaml:

steps:
  # Build backend
  - name: 'gcr.io/cloud-builders/docker'
    args:
      - 'build'
      - '-t'
      - 'gcr.io/$PROJECT_ID/agentflow-backend:$SHORT_SHA'
      - '-f'
      - 'backend/Dockerfile'
      - './backend'

  # Build frontend
  - name: 'node:18'
    entrypoint: 'bash'
    args:
      - '-c'
      - |
        cd frontend
        npm install
        npm run build

  - name: 'gcr.io/cloud-builders/docker'
    args:
      - 'build'
      - '-t'
      - 'gcr.io/$PROJECT_ID/agentflow-frontend:$SHORT_SHA'
      - '-f'
      - 'frontend/Dockerfile'
      - './frontend'

  # Push images
  - name: 'gcr.io/cloud-builders/docker'
    args: ['push', 'gcr.io/$PROJECT_ID/agentflow-backend:$SHORT_SHA']

  - name: 'gcr.io/cloud-builders/docker'
    args: ['push', 'gcr.io/$PROJECT_ID/agentflow-frontend:$SHORT_SHA']

  # Deploy to GKE
  - name: 'gcr.io/cloud-builders/kubectl'
    args:
      - 'set'
      - 'image'
      - 'deployment/agentflow-backend'
      - 'backend=gcr.io/$PROJECT_ID/agentflow-backend:$SHORT_SHA'
    env:
      - 'CLOUDSDK_COMPUTE_REGION=us-central1'
      - 'CLOUDSDK_CONTAINER_CLUSTER=agentflow-cluster'

  - name: 'gcr.io/cloud-builders/kubectl'
    args:
      - 'set'
      - 'image'
      - 'deployment/agentflow-frontend'
      - 'frontend=gcr.io/$PROJECT_ID/agentflow-frontend:$SHORT_SHA'
    env:
      - 'CLOUDSDK_COMPUTE_REGION=us-central1'
      - 'CLOUDSDK_CONTAINER_CLUSTER=agentflow-cluster'

Kubernetes Manifests

k8s/backend-deployment.yaml:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: agentflow-backend
spec:
  replicas: 2
  selector:
    matchLabels:
      app: agentflow
      component: backend
  template:
    metadata:
      labels:
        app: agentflow
        component: backend
    spec:
      containers:
        - name: backend
          image: gcr.io/agentflow-prod-2025/agentflow-backend:latest
          ports:
            - containerPort: 8000
          env:
            - name: DATABASE_URL
              value: "postgresql://agentflow:password@35.238.30.60:5432/agentflow_db"
            - name: REDIS_URL
              value: "redis://agentflow-redis:6379/0"
            - name: CORS_ORIGINS
              value: '["https://workflow.coditect.ai","http://workflow.coditect.ai"]'
          resources:
            requests:
              cpu: 250m
              memory: 512Mi
            limits:
              cpu: 1000m
              memory: 2Gi
          livenessProbe:
            httpGet:
              path: /health
              port: 8000
            initialDelaySeconds: 10
            periodSeconds: 10
          readinessProbe:
            httpGet:
              path: /health
              port: 8000
            initialDelaySeconds: 5
            periodSeconds: 5

k8s/ingress.yaml:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: agentflow-ingress
  annotations:
    kubernetes.io/ingress.global-static-ip-name: "agentflow-ip"
    networking.gke.io/managed-certificates: "agentflow-cert"
spec:
  rules:
    - host: workflow.coditect.ai
      http:
        paths:
          - path: /api/v1/*
            pathType: ImplementationSpecific
            backend:
              service:
                name: agentflow-backend
                port:
                  number: 8000
          - path: /health
            pathType: ImplementationSpecific
            backend:
              service:
                name: agentflow-backend
                port:
                  number: 8000
          - path: /*
            pathType: ImplementationSpecific
            backend:
              service:
                name: agentflow-frontend
                port:
                  number: 80

---

Performance & Cost

Current Performance

Metric	Target	Actual
Page Load (Frontend)	< 3s	~2.1s
API Response (Workflow Analysis)	< 5s	~3.8s
Multi-Agent Orchestration	< 30s	~22s (8 agents)
Database Query (p95)	< 100ms	~65ms

Monthly Cost Breakdown

Infrastructure:

• GKE Cluster: ~$150/month (3 nodes, n1-standard-2)
• Cloud SQL: ~$50/month (db-f1-micro, 10GB)
• Load Balancer: ~$20/month
• Cloud Storage: ~$5/month
• Static IP: $3/month

AI/LLM:

• Anthropic API: ~$200-500/month (varies by usage)
• Per workflow: ~$0.50-1.50 (8 agents × ~$0.10 per call)

Total: ~$428-728/month

---

Key Takeaways for License Management Platform

What to Adopt from workflow.coditect.ai

1. Design System (PRIMARY SOURCE):

   • ✅ Primary blue #0ea5e9 and full scale
   • ✅ System font stack
   • ✅ Dark mode via CSS class (darkMode: 'class')
   • ✅ Tailwind CSS configuration
   • ✅ Component patterns

2. Deployment Strategy:

   • ✅ GKE cluster with multiple replicas
   • ✅ Google-managed SSL certificates
   • ✅ Cloud Build for CI/CD
   • ✅ Health checks and readiness probes

3. Security:

   • ✅ CORS configuration
   • ✅ JWT authentication
   • ✅ Environment-based secrets

What NOT to Adopt

1. FastAPI Backend:

   • License platform uses Django (better for admin + multi-tenancy)
   • FastAPI is better for pure API services

2. Multi-Agent Orchestration:

   • Not needed for license management
   • License platform has simpler requirements

3. Diagram Export Engine:

   • Not applicable to license management
   • Remove this complexity

Design System Files to Reference

PRIMARY SOURCES:

1. /frontend/tailwind.config.js - Color palette, dark mode config
2. /frontend/src/index.css - Font stack, global styles
3. /frontend/src/components/ - Component implementations

---

Conclusion

workflow.coditect.ai demonstrates:

• ✅ Modern design system (Tailwind CSS, primary blue #0ea5e9)
• ✅ Professional frontend (React 18 + TypeScript)
• ✅ Scalable backend (FastAPI + multi-agent orchestration)
• ✅ Production deployment (GKE + Cloud SQL)

This is the PRIMARY SOURCE for License Management Platform UI design system.

All colors, typography, dark mode implementation, and component patterns should match workflow.coditect.ai to maintain consistency across the CODITECT ecosystem.

---

Document Version: 1.0 Last Updated: November 24, 2025 Status: APPROVED ✅ Maintained By: CODITECT Infrastructure Team