The toolbox is built upon Electron, using Vue and ElementUI for the user interface. If you are interested mostly in creating a new UI module, see How Modules Work.
The first screen upon launch is the AgentList screen. The main vue component for this window is src/render/components/AgentList.vue. This window is focused on connecting to configured agents. Agents can also be added and removed.
Each agent receives it's own window upon opening, allowing easy interaction with multiple agents at a time for demonstration or administrative purposes.
This screen serves as an interface to each connected agent. The main component is src\renderer\components\AgentBase.vue and is responsible for the top title and left menu.
The menu is created at runtime based on the modules present in src/renderer/components and the protocols supported by the connected agent. Supported protocols are discovered through the Discover Features Protocol.
The dynamic menu allows for the toolbox to support a very wide variety of protocols, and only show the user the modules that can be used with a particular connected agent. This prevents user confusion while allowing the widest possible array of supported protocols and modules.
The message_bus.js is included in each module, and provides a singleton vue component used to route messages between vue components. Inbound messages are passed through the message bus as well as a few internal notification messages.
The share.js is also included in each module, and is where the real magic happens. This vue component is used as a shared place to manage state, manages the listeners of each module, and provides the plumbing that allows each module component to be coded up in a simple way.