systemArchi.wsd

@startuml FinTrack System Architecture

title FinTrack - Multi-Agent AI Expense Tracker System Architecture

skinparam backgroundColor #FEFEFE
skinparam componentStyle uml2
skinparam linetype ortho
skinparam nodesep 60
skinparam ranksep 80
skinparam minlen 8
skinparam packageTitleAlignment left

' Layout direction for better organization
top to bottom direction

' Top Layer - User Interaction
together {
' External Actors
actor "User" as User #BBDEFB

' Application Layer
package "Frontend Layer (Next.js)" as Frontend #E3F2FD {
    component [Dashboard] as Dashboard
    component [Upload] as Upload
    component [Analytics] as Analytics
    component [Suggestions] as Suggestions
    component [Security] as Security
    component [Settings] as Settings
    component [Workflow] as Workflow
}
}

' Backend Layer
package "Backend Layer (FastAPI)" as Backend #E8F5E8 {
    component [FastAPI Server] as API
    component [LangGraph Server] as LangGraphServer
    component [API Routes] as Routes
}

' Data Processing Layer
package "Data Processing Layer" as DataProcessing #FFFDE7 {
    together {
        component [Data Preprocessor] as Preprocessor
        component [File Parser\n(CSV/Excel)] as FileParser
    }
    together {
        component [NL Processor\n(Text extraction)] as NLProcessor
        component [Validation Engine] as Validator
    }
}

' AI Agent Pipeline (6 Agents)
package "AI Agent Pipeline" as AIAgents #FFF3E0 {
    together {
        component [Ingestion\nAgent] as IngestionAgent
        component [NER Merchant\nAgent] as NERAgent
    }
    together {
        component [Classifier\nAgent] as ClassifierAgent
        component [Pattern Analyzer\nAgent] as PatternAgent
    }
    together {
        component [Suggestion\nAgent] as SuggestionAgent
        component [Safety Guard\nAgent] as SafetyAgent
    }
}

' AI/ML Infrastructure
package "AI/ML Infrastructure" as AIML #FFEBEE {
    together {
        component [LangChain Framework] as LangChain
        component [LangGraph Orchestrator] as Orchestrator
    }
    together {
        component [Groq/OpenAI LLMs] as LLMs
        component [LangSmith Tracing] as Tracing
    }
}

' Cloud/Infrastructure Layer
cloud "Cloud Platform (Supabase)" as Cloud #F3E5F5 {
    rectangle "PostgreSQL Database" as DB #C8E6C9
    storage "Object Storage\n(Models/Logs)" as ObjectStore #E0E0E0
    component [Authentication] as Auth
    component [Real-time\nSubscriptions] as Realtime
}

' Main Flow
User --> Frontend : Interact with UI
Frontend --> API : HTTP API calls
API --> LangGraphServer : Workflow requests

' Processing Pipeline
Orchestrator --> IngestionAgent : Start pipeline
IngestionAgent --> Preprocessor : Data preprocessing

' Data Processing Flow
Preprocessor --> FileParser : Structured data
Preprocessor --> NLProcessor : Natural language
Preprocessor --> Validator : Data validation

' AI Agent Pipeline Flow (6 Agents)
IngestionAgent --> NERAgent : Merchant extraction
NERAgent --> ClassifierAgent : Transaction classification
ClassifierAgent --> PatternAgent : Pattern analysis
PatternAgent --> SuggestionAgent : Generate recommendations
SuggestionAgent --> SafetyAgent : Security validation

' AI Infrastructure connections
IngestionAgent -[#FF6B6B]-> LangChain : LLM integration
NERAgent -[#4ECDC4]-> LangChain : AI processing
ClassifierAgent -[#45B7D1]-> LangChain : AI processing
PatternAgent -[#FFA07A]-> LangChain : AI processing
SuggestionAgent -[#98D8C8]-> LangChain : AI processing
SafetyAgent -[#F7DC6F]-> LangChain : AI processing

' LangChain to services
LangChain --> LLMs : API calls (Groq/OpenAI)
LangChain --> Tracing : Workflow logging
LangChain --> Orchestrator : Workflow coordination

' Data persistence
SafetyAgent -[#95E1D3]-> DB : Store processed transactions
API -[#F38BA8]-> DB : CRUD operations
Analytics -[#A8E6CF]-> DB : Query analytics data
Auth -[#D7BDE2]-> DB : User management

' Real-time features
DB --> Realtime : Live data updates
Realtime --> Frontend : Real-time notifications

' Cloud storage
Tracing --> ObjectStore : Store logs/traces
LLMs --> ObjectStore : Model artifacts

' Authentication flow
User --> Auth : Login/Register
Auth --> Frontend : Session tokens
Frontend --> API : Authenticated requests

' Legend
legend bottom right
    |= Component |= Technology |
    | Frontend | Next.js + TypeScript + Tailwind |
    | Backend API | FastAPI + Python |
    | Agent Orchestration | LangGraph + LangChain |
    | Database | Supabase PostgreSQL |
    | AI Models | Groq/OpenAI LLMs |
    | Real-time | Supabase Subscriptions |
    | Authentication | Supabase Auth |
endlegend

' System capabilities
note as OrchestratorNote
    **LangGraph Workflow Modes:**
    - Full Pipeline (6 agents)
    - Quick Classification
    - Ingestion Only
    - Background Processing
    - Validation Only
end note

note as DBNote
    **Database Features:**
    - Row Level Security (RLS)
    - Real-time subscriptions
    - Automatic API generation
    - Built-in authentication
    - Serverless scaling
end note

note as LLMsNote
    **AI Capabilities:**
    - Multi-model support (Groq/OpenAI)
    - Streaming responses
    - Model versioning
    - Cost optimization
    - Fallback mechanisms
end note

' Responsible AI considerations
note as ResponsibleAI
    **Responsible AI Features:**
    - Confidence scoring on all agent decisions
    - Bias detection in pattern analysis
    - Data privacy with Supabase RLS
    - Explainable AI outputs with LangSmith
    - Security validation pipeline
    - User consent and data control
end note

' Position notes to avoid overlaps
OrchestratorNote .. Orchestrator
DBNote .. DB
LLMsNote .. LLMs
ResponsibleAI .. Tracing
ResponsibleAI .. SafetyAgent
ResponsibleAI .. Auth

@enduml