Dynamic Layout System

A Nuxt 4 application implementing a dynamic report layout system designed for AI-driven content generation. The system enables AI agents to create richly formatted reports by defining layouts with slots that get progressively filled with various content types.

✨ Features

• Layout-First Architecture - Define layout structure first, then fill content progressively
• Flexible Layout System - Support for Grid and Flex containers with nested structures
• Multiple Content Types - Markdown, Mermaid diagrams, Chart.js charts, Infographics, Code blocks, and more
• Real-time Preview - Portrait and Landscape preview modes for report visualization
• AI Agent Integration - Designed for Manager/Sub-agent collaboration workflow
• PDF Export - Export reports to PDF format (sync or async based on size)
• Optimistic Locking - Version control for concurrent content updates

🚀 Quick Start

Prerequisites

• Node.js 18+
• PostgreSQL database
• pnpm (recommended) or npm

Installation

# Clone the repository
git clone <repository-url>
cd dynamic-layout-sys

# Install dependencies
pnpm install

# Setup environment variables
cp .env.example .env
# Edit .env and set DATABASE_URL

# Push database schema
pnpm db:push

# Start development server
pnpm dev

The application will be available at http://localhost:3000

📖 API Documentation

Interactive Documentation

• Scalar UI: http://localhost:3000/_scalar
• Swagger UI: http://localhost:3000/_swagger
• OpenAPI Spec: http://localhost:3000/_openapi.json
• Custom Spec: http://localhost:3000/openapi.yaml

Core Endpoints

Method	Endpoint	Description
POST	/api/v1/reports	Create a new report with layout
GET	/api/v1/reports/:id	Get report details
PATCH	/api/v1/reports/:id	Update slot content
PUT	/api/v1/reports/:id/layout	Update report layout
POST	/api/v1/reports/:id/export	Export report to PDF
GET	/api/v1/capabilities	Query system capabilities

🏗️ Architecture

Core Concepts

Layout System - Tree structure of nodes:

• ContainerNode: Grid or Flex containers
• SlotNode: Leaf nodes for content placeholders
• Maximum nesting depth: 2 levels

ID Formats - ULID-based with prefixes:

• Reports: rpt_{ULID}
• Slots: slot_{ULID}
• Agents: agt_{ULID}
• Exports: exp_{ULID}

Supported Content Types:

• Text: text_h1, text_h2, text_h3
• Markdown: markdown, markdown_long
• Diagrams: mermaid, chart_js, infographic
• Media: image_url, image_base64
• Data: table, code_block

Project Structure

├── app/
│   ├── components/       # Vue components for rendering
│   │   ├── LayoutRenderer.vue
│   │   ├── SlotRenderer.vue
│   │   └── renderers/    # Content type renderers
│   └── pages/            # Application pages
│       ├── reports/      # Report management pages
│       ├── preview-portrait/   # Portrait preview
│       └── preview-landscape/  # Landscape preview
├── server/
│   ├── api/v1/           # API endpoints
│   ├── database/         # Drizzle ORM schema
│   ├── services/         # Business logic
│   └── utils/            # Validators and utilities
├── shared/
│   ├── types/            # Shared TypeScript types
│   └── utils/            # Shared validators (Zod)
└── docs/                 # Documentation

🎨 Preview Modes

The system provides two preview modes for visualizing reports:

• Portrait Preview (/preview-portrait/:id) - A4 portrait width (210mm)
• Landscape Preview (/preview-landscape/:id) - Wider landscape layout

🤖 AI Agent Workflow

Manager Agent

1. Call GET /capabilities to understand system limits
2. Design layout structure with containers and slots
3. Create report via POST /reports
4. Assign slots to Sub-agents
5. Monitor completion and trigger export

Sub-agent

1. Receive assigned slot_id from Manager
2. Generate content according to slot component type
3. Update content via PATCH /reports/:id
4. Report success or failure status

🛠️ Development

Commands

pnpm dev          # Start development server
pnpm build        # Build for production
pnpm preview      # Preview production build
pnpm generate     # Generate static site

Database Commands

pnpm db:push      # Push schema changes (development)
pnpm db:generate  # Generate migration files
pnpm db:migrate   # Run migrations
pnpm db:studio    # Open Drizzle Studio GUI

📚 Documentation

• API Specification - Detailed API documentation
• Skill Documentation - AI agent skill definitions
• Layout Reference - Layout patterns and examples
• Components Reference - Content component details
• Infographic Reference - Infographic templates

📄 License

Private - All rights reserved

🙏 Acknowledgments

• Nuxt - The Intuitive Vue Framework
• Drizzle ORM - TypeScript ORM
• Chart.js - JavaScript charting library
• Mermaid - Diagramming and charting tool
• AntV Infographic - Infographic rendering engine