Architecture Explorer

The Architecture Explorer is a live map of every moving part in APEX — agents, subagents, skills, instructions, prompts, validators, CI workflows, and MCP servers — with the relationships between them.

The graph is regenerated from source files (.github/agents, .github/skills, .github/instructions, .vscode/mcp.json, package.json, and more) on every site build, so category counts always reflect the current repo state — never hard-coded.

Use this page when you want a system-wide map. For workflow behaviour and responsibilities, read the narrative docs first and use the explorer as a visual drill-down.

Press / to focus search, F to fit the graph, Tab to cycle nodes.

Open full screen ↗

What you can do

• Search any node by name or description (press / to focus the search box). Arrow keys navigate results, Enter selects.
• Filter by category from the left panel. Use All / None / Invert for bulk changes.
• View presets in the top bar narrow the graph to a concern:
  • Workflow — agents + subagents, left-to-right hand-off layout.
  • Skills — agents and the skills they use (primary + secondary tiers).
  • CI / Lint — validators and GitHub Actions workflows.
  • Instructions — agents and instruction files that auto-apply to them.
• Click a node to open the details drawer: description, model, path, connections, plus direct links to the source file on GitHub.
• Deep-link to any node by appending #node=<id> to the URL — e.g. architecture-explorer.html#node=agent:03-architect.
• Keyboard: Tab cycles nodes, Enter centres the selection, + / - zoom, F fits, Esc clears.

Node categories

Colours and shapes are set in the generated graph JSON — so the legend inside the explorer is always authoritative. The categories tracked are:

• Agent, Subagent, Skill, Instruction, Prompt, Validator, CI Workflow, MCP Server.

Edge semantics

Edge style	Meaning
Solid cyan, arrow	Workflow hand-off between agents (handoffs: frontmatter).
Dashed purple	Agent delegates to a subagent (agents: frontmatter).
Solid green	Agent uses a primary skill (always loaded).
Dotted grey	Agent uses a secondary skill (on-demand).
Solid pink, arrow	Prompt invokes an agent (name-matched).
Dashed amber	Instruction applies to an agent/skill/prompt type.
Solid teal, arrow	CI workflow runs a validator (npm run …).
Dotted red	Agent uses an MCP server (referenced in body).
Dotted green	Skill references another skill (e.g. routing/delegation).

Data source

The explorer consumes site/public/architecture-explorer-graph.json, generated by node tools/scripts/generate-explorer-graph.mjs (wired into the site prebuild hook) and validated by npm run validate:explorer-graph. If the data looks stale, run the generator locally and commit the result.

Next steps

• Agent Architecture for roles, handoffs, and subagents.
• Skills & Instructions for the knowledge and rule layers.
• Workflow for the end-to-end execution model.