GitHub Actions Timeline Visualizer

This skill helps you work with the actions-timeline GitHub Action, which visualizes GitHub Actions workflow execution timelines using Mermaid gantt charts.

What This Skill Does

The actions-timeline project creates visual timeline diagrams of GitHub Actions workflow runs, displaying job execution times and dependencies in a Mermaid gantt chart format. This helps developers understand workflow performance, identify bottlenecks, and debug timing issues.

Architecture Overview

The project uses a **post-processing architecture** where the actual work happens after the workflow completes:

Development Workflow

When working with this codebase, follow these steps:

1. Making Code Changes

2. Building and Committing

After making changes to source files:

1. **Bundle the code**: Run `deno task bundle` to compile TypeScript to JavaScript in `dist/` folder

2. **Commit everything**: Use `deno task bundle:commit` to bundle and commit in one step

3. **Important**: Always commit both source (`src/`) and bundled (`dist/`) files together

3. Testing Locally

To test the CLI version:

```bash

deno run --allow-net --allow-write --allow-env=GITHUB_API_URL cli.ts

```

Required permissions:

Key Files and Their Purpose

| File | Purpose |

|------|---------|

| `action.yml` | GitHub Action metadata and configuration |

| `src/main.ts` | Empty main phase (required by GitHub Actions) |

| `src/post.ts` | Core logic that runs after workflow completion |

| `src/workflow_gantt.ts` | Mermaid gantt chart generation |

| `src/github.ts` | GitHub API client implementation |

| `cli.ts` | Standalone CLI tool entry point |

| `dist/` | Bundled JavaScript for node20 runtime |

Important Implementation Details

Post-Processing Architecture

This Action uses GitHub Actions' post-processing feature to run after the workflow completes. This is why:

API Timing Considerations

The code includes a **1-second delay** when fetching data from GitHub API. This ensures API results are stable and complete after workflow execution.

Bundle Requirements

Common Tasks

Adding New Features

1. Identify which component needs changes (API client, chart generation, post-processing)

2. Modify TypeScript source in `src/`

3. Add or update tests in `tests/`

4. Run `deno test` to verify

5. Run `deno task bundle:commit` to build and commit

Debugging Timeline Issues

1. Check `src/post.ts` for workflow data fetching logic

2. Examine `src/workflow_gantt.ts` for chart generation rules

3. Use CLI tool to test locally with specific workflow runs

4. Review test fixtures in `tests/` for expected data structures

Updating Dependencies

1. Modify import statements in source files

2. Run tests to ensure compatibility

3. Bundle and commit changes

Best Practices

Constraints