# One-cell catalog sprites with rounded SVG beam tracks, selective messages, and explicit activity changes.

# One-cell catalog sprites; labels and arrows explain this illustrative workflow.
header:
  version: "1.0"
  name: provider-retrieval-and-tool-routing
  assetBaseUrl: ./assets/software-architecture
  assets:
    - id: agentic-agents-sprites
      type: sprite-sheet
      path: agentic/agents-sprites.png
      sheetSize: [ 1774, 887 ]
      sprites:
        ai-orchestrator:
          rect: [ 443, 0, 444, 431 ]
          anchor: [ 0.5, 0.7633 ]
        ai-tool-runner:
          rect: [ 0, 443, 443, 444 ]
          anchor: [ 0.4289, 0.8378 ]
    - id: agentic-ai-capabilities-sprites
      type: sprite-sheet
      path: agentic/ai-capabilities-sprites.png
      sheetSize: [ 1774, 887 ]
      sprites:
        ai-rag:
          rect: [ 0, 0, 443, 443 ]
          anchor: [ 0.4628, 0.8713 ]
        ai-guardrail:
          rect: [ 887, 443, 443, 444 ]
          anchor: [ 0.4876, 0.7748 ]
        ai-model-router:
          rect: [ 1330, 437, 444, 450 ]
          anchor: [ 0.5068, 0.7022 ]
    - id: agentic-humans-sprites
      type: sprite-sheet
      path: agentic/humans-sprites.png
      sheetSize: [ 1774, 887 ]
      sprites:
        human-approver:
          rect: [ 887, 0, 443, 435 ]
          anchor: [ 0.4989, 0.9011 ]
    - id: agentic-infrastructure-sprites
      type: sprite-sheet
      path: agentic/infrastructure-sprites.png
      sheetSize: [ 1774, 887 ]
      sprites:
        infra-redis-cache:
          rect: [ 0, 0, 450, 414 ]
          anchor: [ 0.5, 0.9493 ]
        infra-redis-stream:
          rect: [ 450, 0, 445, 414 ]
          anchor: [ 0.5169, 0.8551 ]
        infra-vector-database:
          rect: [ 1335, 0, 439, 414 ]
          anchor: [ 0.4897, 0.9589 ]
        infra-api-tool:
          rect: [ 895, 414, 440, 473 ]
          anchor: [ 0.475, 0.8605 ]
    - id: agentic-lifecycle-sprites
      type: sprite-sheet
      path: agentic/lifecycle-sprites.png
      sheetSize: [ 1774, 887 ]
      sprites:
        agent-complete:
          rect: [ 1365, 430, 409, 457 ]
          anchor: [ 0.5061, 0.9103 ]
    - id: agentic-providers-sprites
      type: sprite-sheet
      path: agentic/providers-sprites.png
      sheetSize: [ 1774, 887 ]
      sprites:
        provider-azure-foundry:
          rect: [ 0, 0, 443, 443 ]
          anchor: [ 0.5011, 0.8668 ]
        provider-aws-bedrock:
          rect: [ 443, 0, 444, 443 ]
          anchor: [ 0.4887, 0.8804 ]
        provider-google-vertex:
          rect: [ 0, 443, 443, 444 ]
          anchor: [ 0.5056, 0.8131 ]
  grid:
    cellSize: 96
  floor:
    visible: false
  layers:
    - name: ground
    - name: connections
    - name: structures
    - name: labels
scenes:
  - id: select-provider
    camera:
      target:
        area:
          at: [ 0, 0 ]
          size: [ 9, 9 ]
      padding: 48
      duration: 0
    elements:
      - id: orchestrator
        asset: ai-orchestrator
        at: [ 1, 4 ]
        size: 1
        enter: fade-in
        activity: { state: processing, color: "#0f9f83" }
      - id: orchestrator-label
        asset: text
        layer: labels
        at: [ 1, 4 ]
        text: { value: "Orchestrator", placement: caption, fontSize: 10, fill: var(--iso-label) }
      - id: router
        asset: ai-model-router
        at: [ 4, 4 ]
        size: 1
        enter: fade-in
        activity: { state: processing, color: "#0f9f83" }
      - id: router-label
        asset: text
        layer: labels
        at: [ 4, 4 ]
        text: { value: "Choose provider", placement: caption, fontSize: 10, fill: var(--iso-label) }
      - id: foundry
        asset: provider-azure-foundry
        at: [ 7, 1 ]
        size: 1
        enter: fade-in
      - id: foundry-label
        asset: text
        layer: labels
        at: [ 7, 1 ]
        text: { value: "Microsoft Foundry", placement: caption, fontSize: 10, fill: var(--iso-label) }
      - id: bedrock
        asset: provider-aws-bedrock
        at: [ 7, 4 ]
        size: 1
        enter: fade-in
      - id: bedrock-label
        asset: text
        layer: labels
        at: [ 7, 4 ]
        text: { value: "Amazon Bedrock", placement: caption, fontSize: 10, fill: var(--iso-label) }
      - id: vertex
        asset: provider-google-vertex
        at: [ 7, 7 ]
        size: 1
        enter: fade-in
      - id: vertex-label
        asset: text
        layer: labels
        at: [ 7, 7 ]
        text: { value: "Vertex AI", placement: caption, fontSize: 10, fill: var(--iso-label) }
    connections:
      - id: agent-router
        layer: connections
        from: { element: orchestrator, side: auto }
        to: { element: router, side: auto }
        routing: { mode: orthogonal, avoid: objects }
        style: { variant: beam, pattern: solid, stroke: "#0f9f83", strokeWidth: 5, outline: "#496d62", outlineWidth: 1, cornerRadius: 12, glow: "#0f9f83", glowWidth: 9 }
        end: arrow
        message: { kind: packet, color: "#0f9f83", size: 10, duration: 2200, count: 1 }
      - id: route-foundry
        layer: connections
        from: { element: router, side: auto }
        to: { element: foundry, side: auto }
        routing: { mode: orthogonal, avoid: objects }
        style: { variant: beam, pattern: solid, stroke: "#9bb5aa", strokeWidth: 5, outline: "#496d62", outlineWidth: 1, cornerRadius: 12 }
        end: arrow
      - id: route-bedrock
        layer: connections
        from: { element: router, side: auto }
        to: { element: bedrock, side: auto }
        routing: { mode: orthogonal, avoid: objects }
        style: { variant: beam, pattern: solid, stroke: "#0f9f83", strokeWidth: 5, outline: "#496d62", outlineWidth: 1, cornerRadius: 12, glow: "#0f9f83", glowWidth: 9 }
        end: arrow
        message: { kind: orb, color: "#0f9f83", size: 10, duration: 2200, count: 1 }
      - id: route-vertex
        layer: connections
        from: { element: router, side: auto }
        to: { element: vertex, side: auto }
        routing: { mode: orthogonal, avoid: objects }
        style: { variant: beam, pattern: solid, stroke: "#9bb5aa", strokeWidth: 5, outline: "#496d62", outlineWidth: 1, cornerRadius: 12 }
        end: arrow
  - id: retrieve-context
    camera:
      target:
        area:
          at: [ 0, 0 ]
          size: [ 9, 9 ]
      padding: 48
      duration: 0
    remove:
      elements:
        - id: foundry
        - id: foundry-label
        - id: vertex
        - id: vertex-label
      connections:
        - id: route-foundry
        - id: route-vertex
    add:
      elements:
        - id: rag
          asset: ai-rag
          at: [ 4, 1 ]
          size: 1
          enter: fade-in
          activity: { state: processing, color: "#0f9f83" }
        - id: rag-label
          asset: text
          layer: labels
          at: [ 4, 1 ]
          text: { value: "Retrieve context", placement: caption, fontSize: 10, fill: var(--iso-label) }
        - id: vector
          asset: infra-vector-database
          at: [ 7, 1 ]
          size: 1
          enter: fade-in
          activity: { state: processing, color: "#0f9f83" }
        - id: vector-label
          asset: text
          layer: labels
          at: [ 7, 1 ]
          text: { value: "Vector store", placement: caption, fontSize: 10, fill: var(--iso-label) }
        - id: cache
          asset: infra-redis-cache
          at: [ 1, 1 ]
          size: 1
          enter: fade-in
        - id: cache-label
          asset: text
          layer: labels
          at: [ 1, 1 ]
          text: { value: "Redis cache", placement: caption, fontSize: 10, fill: var(--iso-label) }
      connections:
        - id: agent-rag
          layer: connections
          from: { element: orchestrator, side: auto }
          to: { element: rag, side: auto }
          routing: { mode: orthogonal, avoid: objects }
          style: { variant: beam, pattern: solid, stroke: "#9bb5aa", strokeWidth: 5, outline: "#496d62", outlineWidth: 1, cornerRadius: 12 }
          end: arrow
        - id: rag-vector
          layer: connections
          from: { element: rag, side: auto }
          to: { element: vector, side: auto }
          routing: { mode: orthogonal, avoid: objects }
          style: { variant: beam, pattern: solid, stroke: "#0f9f83", strokeWidth: 5, outline: "#496d62", outlineWidth: 1, cornerRadius: 12, glow: "#0f9f83", glowWidth: 9 }
          end: arrow
          message: { kind: orb, color: "#0f9f83", size: 10, duration: 2200, count: 1 }
        - id: agent-cache
          layer: connections
          from: { element: orchestrator, side: auto }
          to: { element: cache, side: auto }
          routing: { mode: orthogonal, avoid: objects }
          style: { variant: beam, pattern: solid, stroke: "#0f9f83", strokeWidth: 5, outline: "#496d62", outlineWidth: 1, cornerRadius: 12, glow: "#0f9f83", glowWidth: 9 }
          end: arrow
          message: { kind: packet, color: "#0f9f83", size: 10, duration: 2200, count: 1 }
    update:
      elements:
        - id: orchestrator
          activity: { state: idle, color: "#90a19b" }
        - id: router
          activity: { state: complete, color: "#418653" }
        - id: bedrock
          activity: { state: processing, color: "#0f9f83" }
      connections:
        - id: agent-router
          message: { enabled: false }
          style: { stroke: "#a5b9b1", glow: "#d6e3dc", glowWidth: 3 }
        - id: route-bedrock
          message: { enabled: false }
          style: { stroke: "#a5b9b1", glow: "#d6e3dc", glowWidth: 3 }
  - id: execute-tools
    camera:
      target:
        area:
          at: [ 0, 0 ]
          size: [ 9, 12 ]
      padding: 48
      duration: 0
    add:
      elements:
        - id: runner
          asset: ai-tool-runner
          at: [ 1, 7 ]
          size: 1
          enter: fade-in
          activity: { state: processing, color: "#0f9f83" }
        - id: runner-label
          asset: text
          layer: labels
          at: [ 1, 7 ]
          text: { value: "Tool runner", placement: caption, fontSize: 10, fill: var(--iso-label) }
        - id: api
          asset: infra-api-tool
          at: [ 4, 7 ]
          size: 1
          enter: fade-in
          activity: { state: processing, color: "#0f9f83" }
        - id: api-label
          asset: text
          layer: labels
          at: [ 4, 7 ]
          text: { value: "API tool", placement: caption, fontSize: 10, fill: var(--iso-label) }
        - id: stream
          asset: infra-redis-stream
          at: [ 7, 7 ]
          size: 1
          enter: fade-in
        - id: stream-label
          asset: text
          layer: labels
          at: [ 7, 7 ]
          text: { value: "Redis Stream", placement: caption, fontSize: 10, fill: var(--iso-label) }
        - id: guardrail
          asset: ai-guardrail
          at: [ 4, 10 ]
          size: 1
          enter: fade-in
          activity: { state: waiting, color: "#c68927" }
        - id: guardrail-label
          asset: text
          layer: labels
          at: [ 4, 10 ]
          text: { value: "Validate result", placement: caption, fontSize: 10, fill: var(--iso-label) }
      connections:
        - id: agent-runner
          layer: connections
          from: { element: orchestrator, side: auto }
          to: { element: runner, side: auto }
          routing: { mode: orthogonal, avoid: objects }
          style: { variant: beam, pattern: solid, stroke: "#9bb5aa", strokeWidth: 5, outline: "#496d62", outlineWidth: 1, cornerRadius: 12 }
          end: arrow
        - id: runner-api
          layer: connections
          from: { element: runner, side: auto }
          to: { element: api, side: auto }
          routing: { mode: orthogonal, avoid: objects }
          style: { variant: beam, pattern: solid, stroke: "#0f9f83", strokeWidth: 5, outline: "#496d62", outlineWidth: 1, cornerRadius: 12, glow: "#0f9f83", glowWidth: 9 }
          end: arrow
          message: { kind: packet, color: "#0f9f83", size: 10, duration: 2200, count: 1 }
        - id: api-stream
          layer: connections
          from: { element: api, side: auto }
          to: { element: stream, side: auto }
          routing: { mode: orthogonal, avoid: objects }
          style: { variant: beam, pattern: solid, stroke: "#0f9f83", strokeWidth: 5, outline: "#496d62", outlineWidth: 1, cornerRadius: 12, glow: "#0f9f83", glowWidth: 9 }
          end: arrow
          message: { kind: envelope, color: "#0f9f83", size: 10, duration: 2200, count: 1 }
        - id: api-guardrail
          layer: connections
          from: { element: api, side: auto }
          to: { element: guardrail, side: auto }
          routing: { mode: orthogonal, avoid: objects }
          style: { variant: beam, pattern: solid, stroke: "#9bb5aa", strokeWidth: 5, outline: "#496d62", outlineWidth: 1, cornerRadius: 12 }
          end: arrow
    update:
      elements:
        - id: bedrock
          activity: { state: idle, color: "#90a19b" }
        - id: rag
          activity: { state: idle, color: "#90a19b" }
        - id: vector
          activity: { state: idle, color: "#90a19b" }
      connections:
        - id: rag-vector
          message: { enabled: false }
          style: { stroke: "#a5b9b1", glow: "#d6e3dc", glowWidth: 3 }
        - id: agent-cache
          message: { enabled: false }
          style: { stroke: "#a5b9b1", glow: "#d6e3dc", glowWidth: 3 }
  - id: review-and-complete
    camera:
      target:
        area:
          at: [ 0, 0 ]
          size: [ 9, 12 ]
      padding: 48
      duration: 0
    update:
      elements:
        - id: router-label
          text: { value: "Bedrock selected" }
        - id: runner
          activity: { state: complete, color: "#418653" }
          asset: agent-complete
        - id: api
          activity: { state: complete, color: "#418653" }
        - id: guardrail
          activity: { state: complete, color: "#418653" }
        - id: runner-label
          text: { value: Tool work complete }
      connections:
        - id: runner-api
          message: { enabled: false }
          style: { stroke: "#a5b9b1", glow: "#d6e3dc", glowWidth: 3 }
        - id: api-stream
          message: { enabled: false }
          style: { stroke: "#a5b9b1", glow: "#d6e3dc", glowWidth: 3 }
    add:
      elements:
        - id: reviewer
          asset: human-approver
          at: [ 1, 10 ]
          size: 1
          enter: fade-in
          activity: { state: complete, color: "#418653" }
        - id: reviewer-label
          asset: text
          layer: labels
          at: [ 1, 10 ]
          text: { value: "Human review", placement: caption, fontSize: 10, fill: var(--iso-label) }
        - id: complete
          asset: agent-complete
          at: [ 7, 10 ]
          size: 1
          enter: fade-in
          activity: { state: complete, color: "#418653" }
        - id: complete-label
          asset: text
          layer: labels
          at: [ 7, 10 ]
          text: { value: "Approved output", placement: caption, fontSize: 10, fill: var(--iso-label) }
      connections:
        - id: guardrail-review
          layer: connections
          from: { element: guardrail, side: auto }
          to: { element: reviewer, side: auto }
          routing: { mode: orthogonal, avoid: objects }
          style: { variant: beam, pattern: solid, stroke: "#9bb5aa", strokeWidth: 5, outline: "#496d62", outlineWidth: 1, cornerRadius: 12 }
          end: arrow
        - id: review-complete
          layer: connections
          from: { element: reviewer, side: auto }
          to: { element: complete, side: auto }
          routing: { mode: orthogonal, avoid: objects }
          style: { variant: beam, pattern: solid, stroke: "#418653", strokeWidth: 5, outline: "#496d62", outlineWidth: 1, cornerRadius: 12, glow: "#418653", glowWidth: 9 }
          end: arrow
          message: { kind: envelope, color: "#418653", size: 10, duration: 2200, count: 1 }