Visual Architecture Diagrams

Snippbot’s architecture is layered, event-driven, wrapped in a seven-layer security envelope, and threaded through a unified intent-dispatcher routing spine. The diagrams below let you explore that structure interactively — hover layers to see subcomponents, click components for details, toggle between simple and detailed views.

Each diagram is a standalone interactive page. Click the card to open it in a new tab.

System Architecture

The full layered architecture — seven layers inside the Security Envelope, the Unified Intent Dispatcher routing spine, plus the Singularity Marketplace Portal. The dispatcher is drawn as a cyan vertical band touching every layer it routes between. Hover any layer to expand subcomponents; hover each subcomponent for a detail popover.

Open architecture diagram →

Process Flow

How a request moves through the system — User → Interaction → Intent Dispatcher → Agent Cognitive → Tool Execution → Models → Reply, with Memory, Data, Orchestration (workflows, scheduler, loops), and Marketplace branches. The Dispatcher is the central routing node between every producer and every executor. Toggle between Simple and Detailed views.

Open process flow →

Singularity Marketplace

The marketplace treated as its own system — Portal, Discovery, Vetting, Registry, Identity, Transactions, Governance, and Delivery layers. Each layer expands to show subcomponents.

Open marketplace architecture →

Walkthrough Teleprompter

The recording teleprompter used to produce the Snippbot walkthrough video — narration script chapter by chapter, with reference screenshots, timers, and keyboard navigation.

Open teleprompter →

How to use these diagrams

• Click a layer header to expand and reveal its internal components.
• Hover a component to read a short description and the key implementation details.
• Click the × button to collapse a layer manually.
• In the process-flow diagram, use the Simple / Detailed toggle at the top to switch density — press s or d on the keyboard as a shortcut.
• Find the dispatcher — it’s the cyan vertical band in the System Architecture diagram and the central routing node in the Process Flow diagram. The mode switcher on the System diagram has a Dispatcher filter that dims everything except the spine.

Source

These diagrams are hand-authored HTML + CSS with Mermaid 11 + ELK powering the process-flow layout. The full source lives in docs/promos/walkthrough/ in the monorepo.

Related architecture reference in this documentation:

• Architecture Overview — high-level system components
• Intent Dispatcher — routing spine across every producer and executor
• Packages — monorepo structure
• Database — persistence layer
• Events — event bus (and how it differs from the Intent Dispatcher)
• Auth — authentication + permissions
• Execution Flow — how requests flow through the system
• Run a Loop — goal-seeking loops in the Orchestration layer