LiNkIeZ'Pipeline Viewer

December 13, 2025 · View on GitHub

Visual Studio Code extension that monitors GitHub Actions from open workspace repositories and displays pipeline status in real-time.

🚀 Features

✅ Status Bar - Quick view of aggregated status for all pipelines
📊 Tree View - Hierarchical list of repositories, workflows, and runs
🎯 Overview Widget - Visual graph showing pipeline progress at a glance
🎨 Webview Panel - Detailed pipeline visualization with job timelines
🔄 Auto-refresh - Automatic updates with intelligent polling
🔔 Smart Notifications - Alerts for status changes with rate limiting
🔍 Auto-detection - Automatically detects workspace repositories via git remotes
🔐 Secure Authentication - Secure storage of GitHub Personal Access Token
⚡ ETag Caching - Optimized API usage with ~50% reduction in requests
📊 Rate Limit Management - Automatic monitoring and pause when approaching limits
🎯 Loading Indicators - Visual feedback during data refresh

📦 Installation

Via VSIX (Development)

Clone the repository:

git clone https://github.com/your-username/GithubActionPipelineView.git
cd GithubActionPipelineView

Install dependencies:

npm install

Compile the project:

npm run compile

Press F5 in VS Code to start the extension in development mode

Via Marketplace (Coming Soon)

Search for "GitHub Actions Pipeline View" in the VS Code Marketplace.

🔧 Configuration

1. GitHub Authentication

On first run, you will be prompted to configure a GitHub Personal Access Token.

To create a token:

Go to GitHub → Settings → Developer settings → Personal access tokens
Click "Generate new token (classic)"
Select required scopes:
- ✅ repo - Access to private repositories
- ✅ workflow - Manage workflows
Copy the generated token
Run the command GitHub Actions: Set GitHub Token in VS Code
Paste the token when prompted

2. Available Settings

Go to Preferences > Settings and search for "GitHub Actions":

{
  // List of repositories to monitor manually (format: owner/repo)
  "githubActions.repositories": [
    "microsoft/vscode",
    "facebook/react"
  ],

  // Refresh interval in seconds (minimum: 10)
  "githubActions.refreshInterval": 60,

  // Show notifications for status changes
  "githubActions.showNotifications": true,

  // Automatically detect repositories from workspace
  "githubActions.autoDetectRepositories": true,

  // Notify when workflows complete successfully
  "githubActions.notifyOnSuccess": false,

  // Notify when workflows fail
  "githubActions.notifyOnFailure": true
}

📖 Usage

Status Bar

At the bottom of the VS Code window, you will see an icon with the aggregated status of pipelines:

✓ Pipelines: 3/5 passing - Some repositories with success
✗ Pipelines: 2 failing - Workflows failing
⟳ Pipelines: building... - Workflows in progress
⊘ No pipelines - No data available

Click the status bar to focus on the tree view.

Tree View

The LiNkIeZ'Github Actions section in Explorer sidebar shows:

📁 Repository (owner/repo)
  └── 📋 Workflow Run #123
      ├── Branch: main
      ├── Commit: abc1234
      └── Status: ✅ success

Actions (right-click):

🔄 Refresh - Reload pipeline data
🌐 Open in GitHub - View in browser
👁️ Show Details - Open webview panel
🔁 Re-run Workflow - Re-execute failed workflow
📋 Copy Run URL - Copy URL to clipboard

Webview Panel

Right-click a workflow run and select "Show Details" to open a detailed view with:

📊 Job Timeline - Visual representation of job execution
🎨 Progress Bars - Real-time progress for running jobs
🎯 Status Colors - Green (success), Red (failure), Yellow (in progress)
⚙️ Action Buttons - Re-run, Cancel, Open in GitHub
📝 Job Details - Steps, runner info, execution times

Available Actions:

Re-run failed jobs - Retry only failed jobs
Re-run all jobs - Re-execute entire workflow
Cancel workflow - Stop running workflow
Open in GitHub - View full details in browser
⟳ Pipelines: running - Workflows in progress
⊘ Pipelines: no data - No data available

Click the status bar to force refresh.

Visual graph showing pipeline progress at a glance:

█ - Successful pipelines (green)
▓ - Failed pipelines (red)
▒ - In-progress pipelines (yellow)
░ - Queued/empty segments (gray)

The 5-segment graph provides instant visual feedback about overall pipeline health. Hover over it for detailed stats and repository breakdown.

Tree View

In the Explorer sidebar, you will see the "GitHub Actions" view with:

📁 GitHub Actions
  ├─ 🟢 repository-name
  │   ├─ ✓ Build and Test • main • #123 • success
  │   ├─ ⟳ Deploy • develop • #122 • running...
  │   └─ ✗ CI • feature/x • #121 • failure
  └─ 🟡 another-repo
      └─ ⟳ Tests • main • #45 • running...

Available actions:

Click a run to view details (coming soon)
Right-click → "Open in GitHub" - Opens in browser
Right-click → "Re-run" - Re-runs failed workflow

Commands

Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) and type:

GitHub Actions: Refresh Pipelines - Manually refreshes all pipelines
GitHub Actions: Set GitHub Token - Configures/updates authentication token
GitHub Actions: Open in GitHub - Opens selected workflow in browser
GitHub Actions: Re-run Workflow - Re-runs failed workflow

🏗️ Architecture

src/
├── extension.ts           # Entry point - activation/deactivation
├── types.ts               # TypeScript interfaces and types
├── githubApi.ts          # GitHub REST API client (Octokit)
├── statusBar.ts          # Status bar item management
├── treeView.ts           # TreeDataProvider for sidebar
├── pipelineMonitor.ts    # Polling and monitoring system
└── webviewPanel.ts       # Detailed visualization (in development)

🔄 Monitoring

The extension uses adaptive polling:

High frequency (30s): when there are workflows running
Low frequency (configurable): when all workflows are idle
On-demand: manual refresh via command

The system respects GitHub API rate limits (5,000 requests/hour for authenticated users).

🚧 Roadmap

Current Phase: MVP (Sprint 1-5) ✅

Next Phases

Phase 7: Advanced Features (Sprint 7)

Phase 8: Polish (Sprint 8)

🤝 Contributing

Contributions are welcome! Please:

Fork the project
Create a branch for your feature (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'feat: add amazing feature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Local Development

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Compile in watch mode
npm run watch

# Run tests
npm test

# Lint
npm run lint

📝 Commit Conventions

We follow the Conventional Commits standard:

feat: - New feature
fix: - Bug fix
docs: - Documentation only
style: - Formatting, semicolons, etc.
refactor: - Code refactoring
test: - Add or fix tests
chore: - Build, CI changes, etc.

� Releases

This project uses semantic-release for automated versioning and package publishing.

How Releases Work

Automatic Versioning: Version bumps are determined by commit messages
- feat: commits trigger minor releases (0.x.0)
- fix: commits trigger patch releases (0.0.x)
- BREAKING CHANGE: in commit body triggers major releases (x.0.0)
GitHub Releases: Automatically created with changelog
VSIX Packages: Built and attached to releases
Changelog: Auto-generated from commit messages

Download Extension

Download the latest .vsix file from Releases and install via:

code --install-extension github-actions-pipeline-view-*.vsix

📄 License

This project is licensed under the MIT License. See the LICENSE file for more details.

🙏 Acknowledgments

📞 Support

Found a bug or have a suggestion?

🐛 Open an issue
💬 Discussions

Version: 0.1.0 Status: In active development Author: linkiez