GitHub Integration
Relevant source files
The following files were used as context for generating this wiki page:
The GitHub Integration in ATMOS provides a centralized interface for managing repository-related workflows directly within the development environment. It bridges the gap between local code development and remote repository management by surfacing Pull Requests, GitHub Actions, and repository metadata.
The primary goal of this integration is to reduce context switching by allowing developers to view, interact with, and monitor CI/CD pipelines and code review processes without leaving the ATMOS workspace. It leverages a backend engine written in Rust to communicate with GitHub APIs and a React-based frontend for rendering interactive panels.
Architecture and Components
The integration follows a client-server model where the frontend requests GitHub data through a WebSocket-based API, which is then processed by the core-engine backend.
System Flow
The following diagram illustrates how a request for GitHub data flows through the system:
Key Data Structures
The backend utilizes strongly-typed structures to represent GitHub entities. These structures are serialized to JSON for transmission to the frontend.
| Structure | Description | Source |
|---|---|---|
PullRequest | Represents a GitHub PR with title, status, and author info. | crates/core-engine/src/github/mod.rs |
WorkflowRun | Represents a single execution of a GitHub Action. | crates/core-engine/src/github/mod.rs |
GithubRepo | Contains metadata about the connected repository. | crates/core-engine/src/github/mod.rs |
Frontend Integration Panels
The frontend provides specialized panels for different GitHub features, located in the apps/web/src/components/github/ directory.
Pull Requests Panel
The PRPanel.tsx component is responsible for displaying the list of active and closed pull requests. It provides status indicators and links to the GitHub web interface for detailed reviews.
- Logic: It fetches PR data on component mount and provides filtering capabilities based on PR state (open, closed, merged).
- Key Components:
PRItem,PRStatusBadge.
Sources: apps/web/src/components/github/PRPanel.tsx
GitHub Actions Panel
The ActionsPanel.tsx component surfaces CI/CD workflow information. It displays recent workflow runs, their current status (success, failure, in-progress), and execution time.
Backend Implementation Details
The core-engine handles authentication and data retrieval logic. It abstracts the complexities of the GitHub REST and GraphQL APIs.
GitHub Module (crates/core-engine/src/github/mod.rs)
This module contains the core logic for:
- Authentication: Managing personal access tokens or OAuth credentials.
- API Clients: Initializing HTTP clients with appropriate headers.
- Data Fetching: Methods like
get_pull_requests(repo)andget_workflow_runs(repo).
WebSocket Handling
The ws_message.rs file in core-service routes incoming frontend messages to the appropriate GitHub engine functions.
Product Requirements and Scope
According to the PRD, the GitHub integration is designed to support specific developer workflows.
| Feature | Requirement | Priority |
|---|---|---|
| PR Visibility | View list of open PRs for current repo. | High |
| Action Monitoring | See real-time status of GitHub Actions. | High |
| Quick Navigation | Clickable links to GitHub entities. | Medium |
| Authentication | Secure storage of GitHub tokens. | High |
Sources: specs/prd/features/atmos-github-integration-prd.md
Conclusion
The GitHub Integration serves as a critical bridge between the ATMOS local environment and the broader development lifecycle on GitHub. By combining a robust Rust backend for API interaction with specialized React panels, it provides developers with immediate visibility into pull requests and CI/CD status, directly impacting productivity and reducing context-switching overhead.