Workflow Metrics

An open-source dashboard for GitHub Actions metrics with AI-powered optimization suggestions.

Features

• GitHub OAuth login — Sign in with GitHub using repo and read:org scopes to access your workflows
• Repository overview dashboard — Total runs, success rate, average duration, active workflows, and 7→30 day progressive loading
• DORA metrics — Deployment Frequency, Lead Time for Changes, Change Failure Rate, and Mean Time to Recovery over the last 30 days
• Run history + workflow-change markers — Visual breakdown of success/failure/cancelled runs plus commit markers when workflow files changed
• Duration by workflow — Bar chart comparing average duration across all workflows
• Build minutes + billable minutes — Raw build minutes with billable estimate using GitHub-hosted runner multipliers (Linux ×1, Windows ×2, macOS ×10)
• Minutes analytics — Minutes by workflow, daily build-minutes trend, per-workflow minutes by job, and daily workflow minutes trend
• Efficiency insights — Wasted minutes on failures, most expensive workflow, costliest branch, and frequency × duration table
• Skip analytics — Global skip rate, per-workflow skip rate, and top skipped workflows table
• Recent runs table — Filterable list of the latest runs with status, branch, actor, and duration
• Workflow list — All workflows with live success rate and quick navigation
• Workflow detail dashboard — Deep dive into a single workflow: P50/P95 duration, build minutes, billable minutes, skip rate, and cost efficiency
• Workflow structure flow chart — Interactive workflow graph (trigger + job dependency DAG) with runner labels and step counts
• Job + step breakdowns — Per-job timing analysis (avg/min/max) and slowest-job step-level breakdown from recent completed runs
• AI optimization with Mistral — Click "Optimize with AI" on any workflow to get streaming, actionable suggestions (caching, parallelization, runner optimization, cost, etc.)
• Settings page — Manage GitHub connections, tracked repositories, Mistral API key, and theme
• Dark / light mode — Dark by default, persisted per user preference

Workflow Flow Chart

Workflow detail pages include an interactive flow chart that visualizes trigger-to-job execution order and needs dependencies.

flowchart LR
    T([Trigger])
    L[lint]
    U[unit-tests]
    B[build]
    D[deploy]

    T --> L
    T --> U
    L --> B
    U --> B
    B --> D

Loading

Tech Stack

• Framework: Svelte 5 + SvelteKit 2
• Styling: TailwindCSS 4 + @tailwindcss/vite
• Auth & Database: Supabase (GitHub OAuth + PostgreSQL)
• GitHub API: @octokit/rest
• AI: Vercel AI SDK + @ai-sdk/mistral (streaming)
• Deployment: Cloudflare Pages via @sveltejs/adapter-cloudflare
• Package manager: PNPM

Design

The UI design and color system are inspired by the free template "Dark Admin Dashboard" by Malik Ali.
Figma template: Dark Admin Dashboards.

Setup

1. Clone and install

git clone https://github.com/your-org/workflow-metrics.git
cd workflow-metrics
pnpm install

2. Create a Supabase project

1. Create a new project at supabase.com
2. Run migrations (choose one):
   • With Supabase CLI: supabase link --project-ref YOUR_PROJECT_REF (ref is in the dashboard URL: https://supabase.com/dashboard/project/YOUR_PROJECT_REF), then supabase db push
   • Without CLI: In Supabase Dashboard → SQL Editor, run each file in supabase/migrations/ in order: 001_initial.sql, 002_workflow_runs_cache.sql, 003_workflow_runs_cache_cleanup.sql, 004_workflow_detail_runs_cache.sql
3. GitHub OAuth (use an OAuth App, not a GitHub App):

• Create a GitHub OAuth App at GitHub → Settings → Developer settings → OAuth Apps → New OAuth App
• Set Authorization callback URL to your Supabase callback: https://<your-project-ref>.supabase.co/auth/v1/callback (find your project ref in Supabase Dashboard → Settings → API)
• Copy the Client ID and Client secret, then in Supabase → Authentication → Providers → GitHub paste them and enable GitHub
• In Supabase → Authentication → URL Configuration, add your app’s callback to Redirect URLs: http://localhost:5173/auth/callback (local) and https://your-domain.com/auth/callback (production)

3. Configure environment variables

Copy .env.example to .env and fill in:

PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=your-anon-key

4. Run locally

pnpm dev

Open http://localhost:5173.

Deployment (Cloudflare Pages)

1. Deploy to Cloudflare Pages

Connect your GitHub repository to Cloudflare Pages with these build settings:

• Build command: pnpm run build
• Build output directory: .svelte-kit/cloudflare
• Node.js version: 20+

2. Set environment variables

In the Cloudflare Pages dashboard → Settings → Environment Variables:

Variable	Description
PUBLIC_SUPABASE_URL	Your Supabase project URL
PUBLIC_SUPABASE_ANON_KEY	Your Supabase anon key (publishable key)
PUBLIC_APP_URL	Production only. Your app URL, e.g. https://your-project.pages.dev (no trailing slash). When running on localhost, the app uses the request origin automatically so you can test OAuth locally.

3. Update Supabase OAuth redirect URLs

Add the allowed redirect URLs in Supabase (Authentication → URL Configuration → Redirect URLs). For local dev and production:

http://localhost:5173/auth/callback
https://your-project.pages.dev/auth/callback
https://your-custom-domain.com/auth/callback

AI Optimization (Optional)

The "Optimize with AI" feature requires a Mistral AI API key:

1. Get a key at console.mistral.ai
2. Add it in the app Settings page
3. Click "Optimize with AI" on any workflow detail page

The key is stored encrypted in Supabase and is only used server-side.

Database Schema

See supabase/migrations/001_initial.sql for the full schema with RLS policies.

Tables:

• github_connections — GitHub OAuth tokens per user
• repositories — Tracked repositories per user
• user_settings — Mistral API key, theme, default repo

Contributing

Contributions welcome! Please open an issue or PR.

License

MIT