Agent legion

The AgentLegion component driven entirely by A2UI: a roster of agent cards and a pipeline data-flow view, with one shared selection. Click a card or a flow node and it highlights in both — selection is bound to /selectedId, so the two views stay in sync with no extra wiring.

[  {    "createSurface": {      "surfaceId": "main",      "catalogId": "urn:flab-ui:a2ui:catalog:v1"    },    "version": "v1.0"  },  {    "updateComponents": {      "surfaceId": "main",      "components": [        {          "id": "root",          "component": "Column",          "children": [            "title",            "legion"          ],          "gap": "md"        },        {          "id": "title",          "component": "Text",          "text": "Agent legion",          "variant": "title"        },        {          "id": "legion",          "component": "AgentLegion",          "agents": {            "path": "/agents"          },          "flow": {            "path": "/flow"          },          "selectedId": {            "path": "/selectedId"          },          "defaultView": "flow"        }      ]    },    "version": "v1.0"  },  {    "updateDataModel": {      "surfaceId": "main",      "value": {        "selectedId": "coder",        "agents": [          {            "id": "planner",            "name": "Planner",            "model": "Opus",            "task": "Decompose the goal",            "status": "done",            "activity": "Wrote the task list",            "progress": 100,            "steps": {              "done": 4,              "total": 4            },            "elapsed": "18s",            "tokens": 3200          },          {            "id": "researcher",            "name": "Researcher",            "model": "Sonnet",            "task": "Gather context",            "status": "done",            "activity": "Read 12 docs",            "progress": 100,            "steps": {              "done": 6,              "total": 6            },            "elapsed": "42s",            "tokens": 18400          },          {            "id": "coder",            "name": "Coder",            "model": "Opus",            "task": "Implement the change",            "status": "running",            "activity": "Editing src/flow.tsx",            "steps": {              "done": 3,              "total": 7            },            "elapsed": "1m 5s",            "tokens": 26100,            "branch": "feat/agent-legion"          },          {            "id": "reviewer",            "name": "Reviewer",            "model": "Sonnet",            "task": "Check and verify",            "status": "queued"          }        ],        "flow": {          "ariaLabel": "Agent pipeline",          "height": 320,          "nodes": [            {              "id": "goal",              "title": "Goal",              "subtitle": "User request",              "column": 0,              "row": 1,              "tone": "neutral",              "status": "Trigger"            },            {              "id": "planner",              "title": "Planner",              "subtitle": "Opus",              "column": 1,              "row": 0,              "tone": "success",              "status": "Done"            },            {              "id": "researcher",              "title": "Researcher",              "subtitle": "Sonnet",              "column": 1,              "row": 2,              "tone": "success",              "status": "Done"            },            {              "id": "coder",              "title": "Coder",              "subtitle": "Opus",              "column": 2,              "row": 1,              "tone": "info",              "status": "Running"            },            {              "id": "reviewer",              "title": "Reviewer",              "subtitle": "Sonnet",              "column": 3,              "row": 1,              "tone": "neutral",              "status": "Queued"            }          ],          "edges": [            {              "from": "goal",              "to": "planner",              "label": "plan"            },            {              "from": "goal",              "to": "researcher",              "label": "research"            },            {              "from": "planner",              "to": "coder",              "tone": "info"            },            {              "from": "researcher",              "to": "coder",              "tone": "info"            },            {              "from": "coder",              "to": "reviewer",              "label": "PR",              "variant": "dashed"            }          ]        }      }    },    "version": "v1.0"  }]

[
  {
    "createSurface": {
      "surfaceId": "main",
      "catalogId": "urn:flab-ui:a2ui:catalog:v1"
    },
    "version": "v1.0"
  },
  {
    "updateComponents": {
      "surfaceId": "main",
      "components": [
        {
          "id": "root",
          "component": "Column",
          "children": [
            "title",
            "legion"
          ],
          "gap": "md"
        },
        {
          "id": "title",
          "component": "Text",
          "text": "Agent legion",
          "variant": "title"
        },
        {
          "id": "legion",
          "component": "AgentLegion",
          "agents": {
            "path": "/agents"
          },
          "flow": {
            "path": "/flow"
          },
          "selectedId": {
            "path": "/selectedId"
          },
          "defaultView": "flow"
        }
      ]
    },
    "version": "v1.0"
  },
  {
    "updateDataModel": {
      "surfaceId": "main",
      "value": {
        "selectedId": "coder",
        "agents": [
          {
            "id": "planner",
            "name": "Planner",
            "model": "Opus",
            "task": "Decompose the goal",
            "status": "done",
            "activity": "Wrote the task list",
            "progress": 100,
            "steps": {
              "done": 4,
              "total": 4
            },
            "elapsed": "18s",
            "tokens": 3200
          },
          {
            "id": "researcher",
            "name": "Researcher",
            "model": "Sonnet",
            "task": "Gather context",
            "status": "done",
            "activity": "Read 12 docs",
            "progress": 100,
            "steps": {
              "done": 6,
              "total": 6
            },
            "elapsed": "42s",
            "tokens": 18400
          },
          {
            "id": "coder",
            "name": "Coder",
            "model": "Opus",
            "task": "Implement the change",
            "status": "running",
            "activity": "Editing src/flow.tsx",
            "steps": {
              "done": 3,
              "total": 7
            },
            "elapsed": "1m 5s",
            "tokens": 26100,
            "branch": "feat/agent-legion"
          },
          {
            "id": "reviewer",
            "name": "Reviewer",
            "model": "Sonnet",
            "task": "Check and verify",
            "status": "queued"
          }
        ],
        "flow": {
          "ariaLabel": "Agent pipeline",
          "height": 320,
          "nodes": [
            {
              "id": "goal",
              "title": "Goal",
              "subtitle": "User request",
              "column": 0,
              "row": 1,
              "tone": "neutral",
              "status": "Trigger"
            },
            {
              "id": "planner",
              "title": "Planner",
              "subtitle": "Opus",
              "column": 1,
              "row": 0,
              "tone": "success",
              "status": "Done"
            },
            {
              "id": "researcher",
              "title": "Researcher",
              "subtitle": "Sonnet",
              "column": 1,
              "row": 2,
              "tone": "success",
              "status": "Done"
            },
            {
              "id": "coder",
              "title": "Coder",
              "subtitle": "Opus",
              "column": 2,
              "row": 1,
              "tone": "info",
              "status": "Running"
            },
            {
              "id": "reviewer",
              "title": "Reviewer",
              "subtitle": "Sonnet",
              "column": 3,
              "row": 1,
              "tone": "neutral",
              "status": "Queued"
            }
          ],
          "edges": [
            {
              "from": "goal",
              "to": "planner",
              "label": "plan"
            },
            {
              "from": "goal",
              "to": "researcher",
              "label": "research"
            },
            {
              "from": "planner",
              "to": "coder",
              "tone": "info"
            },
            {
              "from": "researcher",
              "to": "coder",
              "tone": "info"
            },
            {
              "from": "coder",
              "to": "reviewer",
              "label": "PR",
              "variant": "dashed"
            }
          ]
        }
      }
    },
    "version": "v1.0"
  }
]

Rendered with Flab components

Agent legion

Goal

User request

Planner

Opus

Researcher

Sonnet

Coder

Opus

Reviewer

Sonnet

100%