Good idea, use the severity if set, else default to INFO.

Probably best to use a more subtle colouring so these message "bubbles" don't become too distracting (job status is more important so should be more prominent).

For message sorting, I think the order they are received in is the best approach as these are log messages received from a user-defined program. This should be how it currently works.

At present only the tree view displays task outputs like this, however, other views will start to display outputs in the near future (namely the task metadata view) so I'd suggest implementing a "message" component and adding the colour functionality there.

<div v-for="[level, message] in messages">
  <message :level="level" :message="message" />
</div>

A component test would be a great way to test this.

For development, and to see how messages at different levels appear to the UI, here's a simple workflow:

[scheduling]
  [[graph]]
    R1 = foo
[runtime]
  [[foo]]
    script = """
      # task messages are user-defined messages which convey information about a task
      # they are typically used to convey warnings
      cylc message -p DEBUG -- this is a debug message
      cylc message -p INFO -- this is a info message
      cylc message -p WARNING -- this is a warning message
      cylc message -p ERROR -- this is an error message
      cylc message -p CRITICAL -- this is a critical message

      # custom task outputs are task messages which have been registered as outputs
      # in the [runtime] section, these can be used in the graph for triggering purposes
      cylc message -- 'this message corresponds to an output'
    """
    [[[outputs]]]
      my-custom-output = this message corresponds to an output

Note there is an existing test for message functionality in the tree view here:

Unfortunately the severity level is not included in the GraphQL schema, so this requires a cylc-flow change as well.

Currently the only information is the message

   [[foo5]]
       script = cylc message 'WARNING:Hello world'

query {
  jobs {
    id
    messages
  }
}

{
  "data": {
    "jobs": [
      {
        "id": "~rdutta/JOB//1/foo5/01",
        "messages": [
          "started",
          "Hello world"
        ]
      }
    ]
  }
}