Skip to content

Demo UI Specification

1. Introduction

This document provides a comprehensive specification for building a demo frontend for the Meta Agent Platform using Svelte 5, shadcn-svelte, and Svelte Flow. The demo will showcase the core functionality of the platform using mock data, allowing stakeholders to visualize and interact with the platform's key features before full implementation.

1.1 Purpose

The purpose of this demo is to: - Visualize the core user interfaces and workflows of the Meta Agent Platform - Provide a tangible representation of the platform's capabilities - Gather feedback on the UI/UX design before full implementation - Serve as a reference for the development team

1.2 Technology Stack

The demo will be built using: - Framework: Svelte 5 with SvelteKit - UI Components: shadcn-svelte - Visual Builder: Svelte Flow - Styling: Tailwind CSS - State Management: Svelte Runes ($state, $derived, $effect) - Mock Data: JSON files stored locally

2. Overall UI Structure

2.1 Layout

The demo will follow a standard application layout with:

  • Sidebar Navigation: Primary navigation menu on the left side
  • Top Bar: Contains user profile, notifications, and global actions
  • Main Content Area: Displays the active screen/component
  • Context Panel: Optional right panel for additional information and actions

2.2 Navigation Structure

The sidebar navigation will include the following sections:

  1. Dashboard: Overview and summary information
  2. Workflows: List and management of workflows
  3. Workflow List
  4. Workflow Builder
  5. Workflow Monitoring
  6. Agents: Agent management and configuration
  7. Agent List
  8. Agent Details
  9. Agent Marketplace
  10. HITL Tasks: Human-in-the-loop task management
  11. Task Queue
  12. Task Details
  13. Settings: System configuration and user preferences
  14. User Profile
  15. System Settings
  16. API Keys

2.3 Theme and Styling

The demo will implement a modern, clean design with: - Light and dark mode support - Primary color palette based on the Meta Agent Platform brand - Consistent spacing and typography - Responsive design for different screen sizes

3. Key Screens and Components

3.1 Dashboard

Purpose: Provide an overview of the system status and quick access to common actions.

Components: - Workflow Status Summary: Visual representation of workflow statuses (Running, Failed, Completed) - Recent Workflow Runs: List of recently executed workflows with status and duration - HITL Task Queue: Quick view of pending tasks requiring human intervention - Agent Health Overview: Status of active agents in the system - Quick Action Cards: Create Workflow, View Logs, etc.

Mock Data Required: - Workflow status counts - Recent workflow execution records - Pending HITL tasks - Agent status records

3.2 Workflow List

Purpose: Display and manage all workflows in the system.

Components: - Search and Filter: Find workflows by name, status, or tags - Workflow List Table: Display workflows with columns for Name, Status, Last Run, Created By - Action Buttons: Run, Edit, Delete, Clone - Create Workflow Button: Prominent button to create a new workflow

Mock Data Required: - List of workflows with metadata - Workflow status information - User information for "Created By"

3.3 Workflow Builder

Purpose: Visual interface for creating and editing workflows.

Components: - Node Palette: Draggable list of available nodes categorized by type - Triggers (Schedule, Event, API, etc.) - Agents (Text, Vision, Audio, etc.) - Logic Gates (If/Else, Switch, Loop, etc.) - HITL Steps (Approval, Input, Review, etc.) - API Calls (REST, GraphQL, etc.) - Sub-Workflows - Canvas: Visual graph area using Svelte Flow - Nodes with visual distinction between types - Connection lines showing workflow progression - Group containers for organizing related nodes - Properties Panel: Context-aware panel for configuring the selected node - Input/output mapping - Agent selection - Parameter configuration - Condition settings - Toolbar: Actions for the workflow - Save - Validate - Run (Test) - Zoom controls - Layout options

Mock Data Required: - Node type definitions - Agent definitions - Sample workflow configurations - Validation rules

3.4 Workflow Monitoring

Purpose: Track and debug workflow execution.

Components: - Workflow Graph: Visual representation of the workflow with real-time status overlay - Run Information: Metadata about the current run (Trigger time, Duration, Status) - Logs Panel: Filterable logs for the entire run and individual nodes - Node Inspector: Detailed view of a selected node - Input data - Output data - Execution time - Error information - Timeline: Chronological view of node execution

Mock Data Required: - Workflow execution data - Node execution status and timing - Log entries - Input/output data samples

3.5 Agent List

Purpose: Manage and configure agents available in the system.

Components: - Search and Filter: Find agents by name, type, or status - Agent List Table: Display agents with columns for Name, Type, Status, Last Used - Action Buttons: Configure, Disable, Delete - Create Agent Button: Add a new agent to the system

Mock Data Required: - List of agents with metadata - Agent type information - Usage statistics

3.6 Agent Details

Purpose: Configure and test individual agents.

Components: - Agent Information: Name, description, type, version - Configuration Form: Agent-specific configuration options - Test Interface: Input form and output display for testing the agent - Usage Statistics: Graphs showing usage over time - Integration Examples: Code snippets for integrating the agent

Mock Data Required: - Agent configuration schema - Sample test inputs and outputs - Usage metrics - Integration code examples

3.7 Agent Marketplace

Purpose: Discover and install new agents.

Components: - Search and Browse: Find agents by category, popularity, or keyword - Agent Cards: Visual representation of available agents - Name and icon - Short description - Rating and review count - Publisher information - Agent Detail Modal: Comprehensive information about a selected agent - Full description - Screenshots - Pricing information - Reviews and ratings - Installation Button: Add the agent to the system

Mock Data Required: - Marketplace agent listings - Category definitions - Rating and review data - Publisher information

3.8 HITL Task Queue

Purpose: Manage tasks requiring human intervention.

Components: - Task List: Display pending tasks with priority, type, and age - Filter Options: Filter by workflow, priority, or status - Sort Options: Sort by age, priority, or workflow - Claim Button: Assign a task to yourself

Mock Data Required: - List of HITL tasks with metadata - Task priority definitions - Task type information

3.9 HITL Task Details

Purpose: Review and respond to a human-in-the-loop task.

Components: - Task Information: Title, description, workflow context - Data Display: Relevant data for making a decision - Text content - Images or visualizations - Previous steps in the workflow - Decision Interface: UI for submitting a response - Approval buttons - Form inputs - Comments field - History: Previous interactions with this task

Mock Data Required: - Detailed task information - Context data for decision-making - Response options - Task history

3.10 Settings

Purpose: Configure user preferences and system settings.

Components: - User Profile: Personal information and preferences - Theme Settings: UI theme configuration - Notification Preferences: Configure email and in-app notifications - API Keys: Generate and manage API keys - System Settings (Admin only): Global configuration options

Mock Data Required: - User profile information - Theme options - Notification settings - API key records

4. User Flows

4.1 Creating a New Workflow

  1. Navigate to Workflow List
  2. Click "Create New Workflow"
  3. Enter Workflow Name and Description
  4. Use Workflow Builder:
  5. Drag nodes from palette to canvas
  6. Configure node properties
  7. Connect nodes to define execution flow
  8. Validate the workflow
  9. Save the workflow

4.2 Running and Monitoring a Workflow

  1. Navigate to Workflow List
  2. Find the desired workflow
  3. Click "Run" button
  4. Navigate to Workflow Monitoring
  5. Observe real-time node status
  6. Inspect logs and outputs for specific nodes
  7. View overall run metrics

4.3 Handling a HITL Task

  1. Receive notification of pending task
  2. Navigate to HITL Task Queue
  3. Select the task from the list
  4. Review task details and context
  5. Make a decision or provide input
  6. Submit response
  7. Task is removed from queue and workflow continues

4.4 Discovering and Installing an Agent

  1. Navigate to Agent Marketplace
  2. Browse or search for desired agent
  3. Select agent to view details
  4. Review capabilities, pricing, and reviews
  5. Click "Install" button
  6. Configure agent settings
  7. Agent becomes available in the Workflow Builder

4.5 Testing an Agent

  1. Navigate to Agent List
  2. Select an agent to view details
  3. Go to Test Interface
  4. Enter test input
  5. Click "Test" button
  6. View agent output and performance metrics

5. Mock Data Structure

5.1 Workflows

{
  "workflows": [
    {
      "id": "wf-001",
      "name": "Customer Onboarding",
      "description": "Process new customer applications",
      "status": "active",
      "created_by": "user-001",
      "created_at": "2023-04-15T10:30:00Z",
      "last_run": "2023-04-18T14:22:00Z",
      "tags": ["customer", "onboarding", "automation"],
      "nodes": [
        {
          "id": "node-001",
          "type": "trigger",
          "subtype": "api",
          "position": { "x": 100, "y": 100 },
          "data": {
            "name": "API Trigger",
            "endpoint": "/api/customers/new"
          }
        },
        {
          "id": "node-002",
          "type": "agent",
          "subtype": "text",
          "position": { "x": 300, "y": 100 },
          "data": {
            "name": "Validate Customer Data",
            "agent_id": "agent-001",
            "parameters": {
              "validation_level": "strict"
            }
          }
        },
        {
          "id": "node-003",
          "type": "logic",
          "subtype": "if_else",
          "position": { "x": 500, "y": 100 },
          "data": {
            "name": "Check Validation Result",
            "condition": "result.valid === true"
          }
        },
        {
          "id": "node-004",
          "type": "hitl",
          "subtype": "approval",
          "position": { "x": 700, "y": 50 },
          "data": {
            "name": "Manager Approval",
            "instructions": "Please review and approve this customer application."
          }
        },
        {
          "id": "node-005",
          "type": "agent",
          "subtype": "text",
          "position": { "x": 700, "y": 150 },
          "data": {
            "name": "Send Rejection Email",
            "agent_id": "agent-002",
            "parameters": {
              "template": "rejection_email"
            }
          }
        }
      ],
      "edges": [
        {
          "id": "edge-001",
          "source": "node-001",
          "target": "node-002"
        },
        {
          "id": "edge-002",
          "source": "node-002",
          "target": "node-003"
        },
        {
          "id": "edge-003",
          "source": "node-003",
          "target": "node-004",
          "label": "Valid"
        },
        {
          "id": "edge-004",
          "source": "node-003",
          "target": "node-005",
          "label": "Invalid"
        }
      ]
    }
  ]
}

5.2 Workflow Runs

{
  "workflow_runs": [
    {
      "id": "run-001",
      "workflow_id": "wf-001",
      "status": "completed",
      "started_at": "2023-04-18T14:22:00Z",
      "completed_at": "2023-04-18T14:23:30Z",
      "triggered_by": "user-001",
      "trigger_type": "manual",
      "node_runs": [
        {
          "node_id": "node-001",
          "status": "completed",
          "started_at": "2023-04-18T14:22:00Z",
          "completed_at": "2023-04-18T14:22:01Z",
          "input": {},
          "output": {
            "customer_data": {
              "name": "John Doe",
              "email": "john@example.com",
              "company": "Acme Inc."
            }
          }
        },
        {
          "node_id": "node-002",
          "status": "completed",
          "started_at": "2023-04-18T14:22:01Z",
          "completed_at": "2023-04-18T14:22:05Z",
          "input": {
            "customer_data": {
              "name": "John Doe",
              "email": "john@example.com",
              "company": "Acme Inc."
            }
          },
          "output": {
            "valid": true,
            "validation_results": {
              "name": "valid",
              "email": "valid",
              "company": "valid"
            }
          }
        },
        {
          "node_id": "node-003",
          "status": "completed",
          "started_at": "2023-04-18T14:22:05Z",
          "completed_at": "2023-04-18T14:22:06Z",
          "input": {
            "valid": true,
            "validation_results": {
              "name": "valid",
              "email": "valid",
              "company": "valid"
            }
          },
          "output": {
            "path": "valid"
          }
        },
        {
          "node_id": "node-004",
          "status": "completed",
          "started_at": "2023-04-18T14:22:06Z",
          "completed_at": "2023-04-18T14:23:30Z",
          "input": {
            "customer_data": {
              "name": "John Doe",
              "email": "john@example.com",
              "company": "Acme Inc."
            },
            "validation_results": {
              "name": "valid",
              "email": "valid",
              "company": "valid"
            }
          },
          "output": {
            "approved": true,
            "comments": "Customer information looks good."
          }
        }
      ],
      "logs": [
        {
          "timestamp": "2023-04-18T14:22:00Z",
          "level": "info",
          "node_id": "node-001",
          "message": "Workflow triggered manually by user-001"
        },
        {
          "timestamp": "2023-04-18T14:22:01Z",
          "level": "info",
          "node_id": "node-001",
          "message": "Received customer data for John Doe"
        },
        {
          "timestamp": "2023-04-18T14:22:01Z",
          "level": "info",
          "node_id": "node-002",
          "message": "Starting validation of customer data"
        },
        {
          "timestamp": "2023-04-18T14:22:05Z",
          "level": "info",
          "node_id": "node-002",
          "message": "Customer data validation completed successfully"
        },
        {
          "timestamp": "2023-04-18T14:22:06Z",
          "level": "info",
          "node_id": "node-003",
          "message": "Condition evaluated to true, taking 'Valid' path"
        },
        {
          "timestamp": "2023-04-18T14:22:06Z",
          "level": "info",
          "node_id": "node-004",
          "message": "Created HITL task for manager approval"
        },
        {
          "timestamp": "2023-04-18T14:23:25Z",
          "level": "info",
          "node_id": "node-004",
          "message": "HITL task completed by user-002"
        },
        {
          "timestamp": "2023-04-18T14:23:30Z",
          "level": "info",
          "node_id": null,
          "message": "Workflow completed successfully"
        }
      ]
    }
  ]
}

5.3 Agents

{
  "agents": [
    {
      "id": "agent-001",
      "name": "Data Validator",
      "description": "Validates customer data against business rules",
      "type": "text",
      "status": "active",
      "version": "1.2.0",
      "created_at": "2023-03-10T09:15:00Z",
      "last_used": "2023-04-18T14:22:01Z",
      "configuration": {
        "validation_rules": {
          "name": "required|string|min:2",
          "email": "required|email",
          "company": "required|string"
        },
        "api_key": "sk_validator_123456"
      },
      "capabilities": [
        "data_validation",
        "schema_enforcement",
        "format_correction"
      ],
      "input_schema": {
        "type": "object",
        "properties": {
          "customer_data": {
            "type": "object",
            "properties": {
              "name": { "type": "string" },
              "email": { "type": "string" },
              "company": { "type": "string" }
            },
            "required": ["name", "email"]
          },
          "validation_level": {
            "type": "string",
            "enum": ["strict", "moderate", "lenient"],
            "default": "moderate"
          }
        },
        "required": ["customer_data"]
      },
      "output_schema": {
        "type": "object",
        "properties": {
          "valid": { "type": "boolean" },
          "validation_results": {
            "type": "object",
            "additionalProperties": { "type": "string" }
          },
          "corrected_data": {
            "type": "object",
            "additionalProperties": true
          }
        },
        "required": ["valid", "validation_results"]
      }
    }
  ]
}

5.4 HITL Tasks

{
  "hitl_tasks": [
    {
      "id": "task-001",
      "workflow_id": "wf-001",
      "workflow_run_id": "run-001",
      "node_id": "node-004",
      "title": "Manager Approval: Customer Onboarding",
      "description": "Please review and approve this customer application.",
      "status": "pending",
      "priority": "medium",
      "created_at": "2023-04-18T14:22:06Z",
      "assigned_to": null,
      "data": {
        "customer_data": {
          "name": "John Doe",
          "email": "john@example.com",
          "company": "Acme Inc."
        },
        "validation_results": {
          "name": "valid",
          "email": "valid",
          "company": "valid"
        }
      },
      "response_options": [
        {
          "id": "approve",
          "label": "Approve",
          "value": true
        },
        {
          "id": "reject",
          "label": "Reject",
          "value": false
        }
      ],
      "additional_fields": [
        {
          "id": "comments",
          "label": "Comments",
          "type": "textarea",
          "required": false
        }
      ]
    }
  ]
}

5.5 Marketplace Agents

{
  "marketplace_agents": [
    {
      "id": "marketplace-001",
      "name": "Email Composer",
      "description": "Generates personalized email content based on templates and customer data",
      "type": "text",
      "category": "communication",
      "publisher": {
        "id": "pub-001",
        "name": "AI Communication Tools",
        "verified": true
      },
      "version": "2.1.0",
      "pricing": {
        "model": "freemium",
        "free_tier": {
          "requests_per_day": 50
        },
        "paid_tier": {
          "price_per_month": 19.99,
          "requests_per_day": "unlimited"
        }
      },
      "rating": {
        "average": 4.7,
        "count": 128
      },
      "tags": ["email", "templates", "personalization"],
      "screenshots": [
        "https://example.com/screenshots/email-composer-1.png",
        "https://example.com/screenshots/email-composer-2.png"
      ],
      "capabilities": [
        "template_based_generation",
        "personalization",
        "multilingual",
        "tone_adjustment"
      ]
    }
  ]
}

5.6 Users

{
  "users": [
    {
      "id": "user-001",
      "name": "Admin User",
      "email": "admin@example.com",
      "role": "admin",
      "created_at": "2023-01-01T00:00:00Z",
      "last_login": "2023-04-18T09:30:00Z",
      "preferences": {
        "theme": "dark",
        "notifications": {
          "email": true,
          "in_app": true
        }
      }
    },
    {
      "id": "user-002",
      "name": "Manager User",
      "email": "manager@example.com",
      "role": "manager",
      "created_at": "2023-01-15T00:00:00Z",
      "last_login": "2023-04-18T14:23:00Z",
      "preferences": {
        "theme": "light",
        "notifications": {
          "email": true,
          "in_app": true
        }
      }
    }
  ]
}

6. Implementation Recommendations

6.1 Project Structure

demo/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── ui/
│   │   │   │   ├── button.svelte
│   │   │   │   ├── input.svelte
│   │   │   │   ├── sidebar.svelte
│   │   │   │   └── ...
│   │   │   ├── dashboard/
│   │   │   │   ├── status-summary.svelte
│   │   │   │   ├── recent-runs.svelte
│   │   │   │   └── ...
│   │   │   ├── workflow/
│   │   │   │   ├── workflow-list.svelte
│   │   │   │   ├── workflow-builder.svelte
│   │   │   │   ├── workflow-monitor.svelte
│   │   │   │   └── ...
│   │   │   ├── agent/
│   │   │   │   ├── agent-list.svelte
│   │   │   │   ├── agent-details.svelte
│   │   │   │   ├── marketplace.svelte
│   │   │   │   └── ...
│   │   │   ├── hitl/
│   │   │   │   ├── task-queue.svelte
│   │   │   │   ├── task-details.svelte
│   │   │   │   └── ...
│   │   │   └── settings/
│   │   │       ├── profile.svelte
│   │   │       ├── api-keys.svelte
│   │   │       └── ...
│   │   ├── stores/
│   │   │   ├── workflow-store.js
│   │   │   ├── agent-store.js
│   │   │   ├── hitl-store.js
│   │   │   └── ...
│   │   ├── data/
│   │   │   ├── workflows.json
│   │   │   ├── workflow-runs.json
│   │   │   ├── agents.json
│   │   │   ├── hitl-tasks.json
│   │   │   ├── marketplace.json
│   │   │   └── users.json
│   │   └── utils/
│   │       ├── api.js
│   │       ├── date-formatter.js
│   │       └── ...
│   ├── routes/
│   │   ├── +layout.svelte
│   │   ├── +page.svelte
│   │   ├── workflows/
│   │   │   ├── +page.svelte
│   │   │   ├── [id]/
│   │   │   │   ├── +page.svelte
│   │   │   │   └── monitor/+page.svelte
│   │   │   └── builder/+page.svelte
│   │   ├── agents/
│   │   │   ├── +page.svelte
│   │   │   ├── [id]/+page.svelte
│   │   │   └── marketplace/+page.svelte
│   │   ├── hitl/
│   │   │   ├── +page.svelte
│   │   │   └── [id]/+page.svelte
│   │   └── settings/
│   │       ├── +page.svelte
│   │       ├── profile/+page.svelte
│   │       └── api-keys/+page.svelte
│   └── app.html
├── static/
│   ├── favicon.png
│   ├── images/
│   │   ├── logo.svg
│   │   └── ...
│   └── ...
├── svelte.config.js
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts

6.2 Component Implementation Strategy

  1. Start with UI Components: Implement the basic UI components from shadcn-svelte first
  2. Build Layout Components: Create the layout structure with sidebar and top bar
  3. Implement Data Stores: Set up stores for managing mock data
  4. Develop Screen Components: Build the main screen components
  5. Implement Workflow Builder: Focus on the Svelte Flow integration for the workflow builder
  6. Add Interactivity: Implement user interactions and state management
  7. Polish and Refine: Add animations, transitions, and polish the UI

For this demo, the following shadcn-svelte components are recommended:

  1. Layout and Structure:
  2. Card
  3. Sheet
  4. Tabs
  5. Accordion

  6. Separator

  7. Navigation:

  8. Sidebar (custom component)
  9. Breadcrumb
  10. Navigation Menu

  11. Command (for search)

  12. Data Display:

  13. Table
  14. Data Table
  15. Calendar

  16. Avatar

  17. Inputs and Forms:

  18. Button
  19. Input
  20. Textarea
  21. Select
  22. Checkbox
  23. Radio Group
  24. Switch
  25. Slider

  26. Form

  27. Feedback and Alerts:

  28. Alert
  29. Toast
  30. Progress

  31. Skeleton

  32. Overlays:

  33. Dialog
  34. Drawer
  35. Popover
  36. Tooltip

6.4 Svelte Flow Implementation

For the Workflow Builder, implement Svelte Flow with:

  1. Custom Node Types:
  2. Trigger nodes
  3. Agent nodes
  4. Logic nodes
  5. HITL nodes

  6. API nodes

  7. Node Styling:

  8. Distinct visual appearance for each node type
  9. Status indicators for execution state

  10. Input/output ports with clear visual distinction

  11. Interaction Handlers:

  12. Node selection
  13. Connection creation
  14. Node configuration

  15. Canvas panning and zooming

  16. Validation:

  17. Connection validation
  18. Node configuration validation
  19. Workflow validation

6.5 Responsive Design Considerations

  1. Mobile View:
  2. Collapsible sidebar
  3. Simplified workflow view
  4. Touch-friendly controls

  5. Prioritized content for smaller screens

  6. Tablet View:

  7. Hybrid layout with some desktop features
  8. Adapted workflow builder with touch controls

  9. Optimized property panels

  10. Desktop View:

  11. Full-featured interface
  12. Multi-panel layout
  13. Advanced workflow builder capabilities

6.6 Accessibility Considerations

  1. Keyboard Navigation:
  2. Ensure all interactive elements are keyboard accessible
  3. Implement logical tab order

  4. Provide keyboard shortcuts for common actions

  5. Screen Reader Support:

  6. Add appropriate ARIA attributes
  7. Ensure all UI elements have descriptive labels

  8. Test with screen readers

  9. Color and Contrast:

  10. Ensure sufficient color contrast
  11. Don't rely solely on color for conveying information
  12. Support high contrast mode

7. Next Steps

  1. Set up the basic SvelteKit project structure
  2. Install and configure shadcn-svelte components
  3. Create the mock data files
  4. Implement the layout and navigation structure
  5. Build the dashboard components
  6. Develop the workflow list and details screens
  7. Implement the workflow builder with Svelte Flow
  8. Add the agent management screens
  9. Build the HITL task interface
  10. Implement settings and user preferences
  11. Polish the UI and add final touches
  12. Test across different devices and screen sizes