Skip to content

UI Screens & User Flows

This document outlines the key user interface screens and core user flows for the Meta Agent Platform.

1. User Roles & Perspectives

The UI should cater to different user needs:

  • Administrator: Manages users, system settings, monitors overall platform health, manages shared resources (e.g., global agents, connections).
  • Developer/Workflow Designer: Builds, tests, deploys, and monitors workflows and agents. Needs detailed debugging tools and access to agent development resources.
  • Business User/Operator: Monitors workflow execution, handles Human-in-the-Loop (HITL) tasks, views results, may trigger pre-defined workflows.

2. Core User Flows

  • Creating a New Workflow:
    1. Navigate to Workflow List.
    2. Click "Create New Workflow".
    3. Enter Workflow Name/Description.
    4. Use Workflow Builder: Drag nodes (Triggers, Agents, Logic, HITL, API Calls) onto canvas.
    5. Configure node properties (select agents, map inputs/outputs, set parameters).
    6. Connect nodes to define execution flow.
    7. Save/Validate Workflow.
  • Running & Monitoring a Workflow:
    1. Select a workflow from the Workflow List.
    2. Trigger a run (manually or based on a trigger event).
    3. Navigate to Workflow Run Details view.
    4. Observe real-time node status (Pending, Running, Success, Failed).
    5. Inspect logs and outputs for specific nodes.
    6. View overall run history and metrics.
  • Handling a HITL Task:
    1. User receives a notification (UI/Email).
    2. Navigate to HITL Task Inbox.
    3. Select a task.
    4. Review task context, inputs, and agent-provided information.
    5. Take action (e.g., Approve, Reject, Provide Input, Re-assign).
    6. Task status updates, workflow resumes or terminates based on action.
  • Registering/Managing an Agent:
    1. Navigate to Agent Registry.
    2. Click "Register New Agent".
    3. Provide Agent details (Name, Description, Endpoint/Code reference, Input/Output Schema).
    4. Configure access control/sharing.
    5. View list of registered agents, edit, or delete.

3. Key Screens (Detailed)

Screen Key Components & Interactions User Roles
Login/Register - Email/Password fields
- SSO/SAML options (e.g., "Login with Google/Okta")
- Forgot Password link
- Registration form (if applicable)		 All
Dashboard - Customizable widgets
- Workflow Status Summary (Running, Failed, Completed)
- Recent Workflow Runs list
- Assigned HITL Tasks queue
- Agent Health/Status overview
- Quick Actions (Create Workflow, View Logs)		 All (customized)
Workflow Builder - Node Palette: Draggable list of available nodes (Triggers, Agents, Logic Gates, HITL, API Calls, Sub-Workflows)
- Canvas: Visual graph area (using React Flow or similar)
- Properties Panel: Context-aware panel to configure selected node (inputs, outputs, agent selection, parameters, conditions)
- Toolbar: Save, Validate, Run (Test), Zoom, Layout controls
- Version History/Management		 Developer
Workflow List/Details - Searchable/Filterable list of workflows
- Columns: Name, Status, Last Run, Created By
- Actions: Run, Edit, Delete, Clone, View History
- Details View: Metadata, Description, Trigger configuration, Version history, Run history list		 All (permissions)
Workflow Run Details - Visual representation of the workflow graph with real-time node status overlay
- Run Information: Trigger time, Duration, Status, Triggered By
- Logs Panel: Filterable logs per node and overall run
- Node Inspector: View inputs, outputs, errors, duration for a selected node
- Actions: Cancel Run, Retry Failed Nodes (if applicable)		 Developer, Operator
HITL Task Inbox - Filterable/Sortable list of tasks (Assigned to Me, Unassigned, Completed)
- Columns: Task Name, Workflow, Due Date, Status
- Task Details View: Contextual data, Inputs from workflow, Instructions, Action buttons (Approve, Reject, etc.), Comment field		 Operator, Developer
Agent Registry/Marketplace - Grid/List view of available agents
- Search, Filter by tags/capabilities
- Agent Details: Description, Version, Author, Input/Output schema, Usage examples, Rating/Reviews (if marketplace)
- Actions: Register New Agent, Edit, Delete (owned), Use in Workflow		 Developer, Admin
Settings/Profile - User Profile: Name, Email, Password change
- API Key Management: Generate, Revoke API keys for external access
- Notification Preferences: Configure email/UI alerts
- System Settings (Admin): User Management, SSO Config, Global Variables, Resource Limits		 All (Admin specific)
Observability - Embedded dashboards or links to external tools (Grafana, Prometheus, Loki)
- Logs View: Centralized, searchable logs across workflows and agents
- Metrics View: Platform performance, resource usage, workflow execution times
- Tracing View: Visualize request flow across services/agents		 Admin, Developer

4. UI Principles

  • Clarity: Easy to understand workflow status and agent interactions.
  • Efficiency: Minimize clicks for common tasks (building, running, monitoring).
  • Consistency: Uniform design language across all screens.
  • Feedback: Provide clear visual cues for actions, loading states, and errors.
  • Flexibility: Allow customization where appropriate (e.g., Dashboard).

5. Component Library

  • Leverage a standard component library (e.g., Material UI, Ant Design) for consistency.
  • Develop custom components for specialized needs (e.g., Node representations in the builder).

6. Accessibility

  • Adhere to WCAG guidelines (keyboard navigation, screen reader compatibility, color contrast).

This document should be updated as UI designs are refined and implemented.