Felipe Cardoso 5b1e2852ea feat(frontend): implement main dashboard page (#48)
Implement the main dashboard / projects list page for Syndarix as the landing
page after login. The implementation includes:

Dashboard Components:
- QuickStats: Overview cards showing active projects, agents, issues, approvals
- ProjectsSection: Grid/list view with filtering and sorting controls
- ProjectCardGrid: Rich project cards for grid view
- ProjectRowList: Compact rows for list view
- ActivityFeed: Real-time activity sidebar with connection status
- PerformanceCard: Performance metrics display
- EmptyState: Call-to-action for new users
- ProjectStatusBadge: Status indicator with icons
- ComplexityIndicator: Visual complexity dots
- ProgressBar: Accessible progress bar component

Features:
- Projects grid/list view with view mode toggle
- Filter by status (all, active, paused, completed, archived)
- Sort by recent, name, progress, or issues
- Quick stats overview with counts
- Real-time activity feed sidebar with live/reconnecting status
- Performance metrics card
- Create project button linking to wizard
- Responsive layout for mobile/desktop
- Loading skeleton states
- Empty state for new users

API Integration:
- useProjects hook for fetching projects (mock data until backend ready)
- useDashboardStats hook for statistics
- TanStack Query for caching and data fetching

Testing:
- 37 unit tests covering all dashboard components
- E2E test suite for dashboard functionality
- Accessibility tests (keyboard nav, aria attributes, heading hierarchy)

Technical:
- TypeScript strict mode compliance
- ESLint passing
- WCAG AA accessibility compliance
- Mobile-first responsive design
- Dark mode support via semantic tokens
- Follows design system guidelines

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-30 23:46:50 +01:00
2025-11-27 18:55:29 +01:00
2025-11-27 18:55:29 +01:00

Syndarix

Your AI-Powered Software Consulting Agency

An autonomous platform that orchestrates specialized AI agents to deliver complete software solutions with minimal human intervention.

Built on PragmaStack License: MIT


Vision

Syndarix transforms the software development lifecycle by providing a virtual consulting team of AI agents that collaboratively plan, design, implement, test, and deliver complete software solutions.

The Problem: Even with AI coding assistants, developers spend as much time managing AI as doing the work themselves. Context switching, babysitting, and knowledge fragmentation limit productivity.

The Solution: A structured, autonomous agency where specialized AI agents handle different roles (Product Owner, Architect, Engineers, QA, etc.) with proper workflows, reviews, and quality gates.


Key Features

Multi-Agent Orchestration

  • Configurable agent types with base model, failover, expertise, and personality
  • Spawn multiple instances from the same type (e.g., Dave, Ellis, Kate as Software Developers)
  • Agent-to-agent communication and collaboration
  • Per-instance customization with domain-specific knowledge

Complete SDLC Support

  • Requirements DiscoveryArchitecture SpikeImplementation Planning
  • Sprint Management with automated ceremonies
  • Issue Tracking with Epic/Story/Task hierarchy
  • Git Integration with proper branch/PR workflows
  • CI/CD Pipelines with automated testing

Configurable Autonomy

  • From FULL_CONTROL (approve everything) to AUTONOMOUS (only major milestones)
  • Client can intervene at any point
  • Transparent progress visibility

MCP-First Architecture

  • All integrations via Model Context Protocol (MCP) servers
  • Unified Knowledge Base with project/agent scoping
  • Git providers (Gitea, GitHub, GitLab) via MCP
  • Extensible through custom MCP tools

Project Complexity Wizard

  • Script → Minimal process, no repo needed
  • Simple → Single sprint, basic backlog
  • Medium/Complex → Full AGILE workflow with multiple sprints

Technology Stack

Built on PragmaStack:

Component Technology
Backend FastAPI 0.115+ (Python 3.11+)
Frontend Next.js 16 (React 19)
Database PostgreSQL 15+ with pgvector
ORM SQLAlchemy 2.0
State Management Zustand + TanStack Query
UI shadcn/ui + Tailwind 4
Auth JWT dual-token + OAuth 2.0
Testing pytest + Jest + Playwright

Syndarix Extensions

Component Technology
Task Queue Celery + Redis
Real-time FastAPI WebSocket / SSE
Vector DB pgvector (PostgreSQL extension)
MCP SDK Anthropic MCP SDK

Project Status

Phase: Architecture & Planning

See docs/requirements/ for the comprehensive requirements document.

Current Milestones

  • Fork PragmaStack as foundation
  • Create requirements document
  • Execute architecture spikes
  • Create ADRs for key decisions
  • Begin MVP implementation

Documentation


Getting Started

Prerequisites

  • Docker & Docker Compose
  • Node.js 20+
  • Python 3.11+
  • PostgreSQL 15+ (or use Docker)

Quick Start

# Clone the repository
git clone https://gitea.pragmazest.com/cardosofelipe/syndarix.git
cd syndarix

# Copy environment template
cp .env.template .env

# Start development environment
docker-compose -f docker-compose.dev.yml up -d

# Run database migrations
make migrate

# Start the development servers
make dev

Architecture Overview

+====================================================================+
|                         SYNDARIX CORE                               |
+====================================================================+
|  +------------------+  +------------------+  +------------------+   |
|  | Agent Orchestrator|  | Project Manager |  | Workflow Engine  |   |
|  +------------------+  +------------------+  +------------------+   |
+====================================================================+
                              |
                              v
+====================================================================+
|                    MCP ORCHESTRATION LAYER                          |
|  All integrations via unified MCP servers with project scoping      |
+====================================================================+
                              |
     +------------------------+------------------------+
     |                        |                        |
+----v----+  +----v----+  +----v----+  +----v----+  +----v----+
|   LLM   |  |   Git   |  |Knowledge|  |  File   |  |  Code   |
| Providers|  |   MCP   |  |Base MCP |  |Sys. MCP |  |Analysis |
+---------+  +---------+  +---------+  +---------+  +---------+

Contributing

See CONTRIBUTING.md for guidelines.


License

MIT License - see LICENSE for details.


Acknowledgments

  • Built on PragmaStack
  • Powered by Claude and the Anthropic API
Description
FastNext Stack is a modern full-stack template combining FastAPI, Next.js, and PostgreSQL in a Docker-ready environment. It provides a production-grade foundation for building scalable web applications with TypeScript frontend and Python backend.
Readme MIT 7.3 MiB
Languages
TypeScript 53.5%
Python 44.4%
JavaScript 1.3%
Makefile 0.3%
CSS 0.2%
Other 0.2%