CommitScope Svelte Themes

Commitscope

CommitScope turns GitHub commit streams into a realtime visual workspace with graph, timeline, filters, and webhook-powered live updates.

#ably#analytics#commits#dashboard#data-visualization#developer-tools#git#github#graph#open-source
Demo Download

CommitScope

Realtime GitHub commit observability for repositories and organizations.

CommitScope turns raw commit traffic into a live visual workspace: graph topology, timeline intelligence, filters, exports, and webhook-driven realtime updates.

Why CommitScope

Most commit dashboards are either static or noisy. CommitScope is built for signal:

  • Live stream of push events, not delayed polling snapshots.
  • Visual topology from repo -> commit -> author, with optional file detail.
  • Fast exploration by author, keyword, and time range.
  • One-click export (PNG/SVG) and shareable filtered views.

Feature Matrix

Capability What you get
History Loader Load repository or organization commit history from GitHub REST API
Realtime Feed Webhook -> serverless -> Ably channel -> live UI updates
Graph View Force-directed graph with tuned readability and focus controls
Timeline View Month buckets + expandable commit groups
Filters Author, keyword, date range, and view mode switching
Export + Share PNG/SVG snapshots and URL state sharing
Security Controls Signature checks, rate limits, origin allowlist, delivery replay guard

Architecture

flowchart LR
  GH["GitHub Push Event"] --> WH["/api/github-hook"]
  WH --> AB[("Ably Channel")]
  FE["Svelte Frontend"] -->|load history| GHA["GitHub REST API"]
  FE -->|subscribe| AB
  FE -->|token auth| TK["/api/ably-token"]

  subgraph Hardening
    H1[Signature verification]
    H2[Rate limiting]
    H3[Origin allowlist]
    H4[Replay protection]
  end

  WH -.-> H1
  WH -.-> H2
  TK -.-> H2
  TK -.-> H3
  WH -.-> H4

Quick Start

  1. Install dependencies
npm install
  1. Create local environment file
cp .env.example .env
  1. Start app
npm run dev
  1. Optional full-stack local mode (Netlify redirects + functions)
npm run dev:netlify

Environment Reference

See .env.example for the exact template.

Server Variables

Variable Required Purpose
ABLY_API_KEY Yes Publish/issue Ably tokens
ABLY_CHANNEL No Channel name (default: github-commits)
GITHUB_WEBHOOK_SECRET Yes Validate webhook signatures
GITHUB_TOKEN No Enrich commit details (stats/files) server-side
GITHUB_BRANCH_FILTER No Accept only one branch (example: main)
GITHUB_REPOSITORY_ALLOWLIST No Comma-separated owner/repo allowlist
ALLOWED_ORIGINS No Comma-separated allowed origins for /api/ably-token
ABLY_TOKEN_RATE_LIMIT No Requests per IP per minute for token endpoint
ABLY_TOKEN_TTL_MS No Token lifetime in milliseconds
WEBHOOK_RATE_LIMIT No Requests per IP per minute for webhook endpoint
WEBHOOK_MAX_BODY_BYTES No Max webhook payload bytes (default: 1048576)

Frontend Variables

Variable Required Purpose
VITE_ABLY_AUTH_URL No Token URL (default: /api/ably-token)
VITE_ABLY_CHANNEL No Frontend channel name (match server channel)
VITE_ABLY_PUBLIC_KEY No Optional direct browser key (prototype only)

Webhook Setup

In GitHub repository settings:

  1. Go to Settings -> Webhooks -> Add webhook.
  2. Payload URL: https://<your-domain>/api/github-hook.
  3. Content type: application/json.
  4. Secret: same as GITHUB_WEBHOOK_SECRET.
  5. Event scope: Just the push event.

Deployment

Netlify

  1. Connect repository.
  2. Build command: npm run build.
  3. Publish directory: dist.
  4. Functions directory: netlify/functions.
  5. Add all environment variables in dashboard.

netlify.toml already rewrites /api/* to Netlify Functions.

Vercel

API routes included:

  • api/ably-token.js
  • api/github-hook.js

Set environment variables in Project Settings, then redeploy.

Minimum recommended set:

  • ABLY_API_KEY
  • GITHUB_WEBHOOK_SECRET
  • VITE_ABLY_AUTH_URL=/api/ably-token
  • VITE_ABLY_CHANNEL and ABLY_CHANNEL with the same value

Security Posture

Built-in controls:

  • GitHub signature verification for webhook authenticity.
  • Per-IP rate limits for token and webhook endpoints.
  • Payload size caps to reduce abuse surface.
  • Optional origin allowlist for token endpoint.
  • Optional repository allowlist for webhook input.
  • Delivery replay guard using x-github-delivery cache window.

Operational recommendations:

  • Rotate credentials immediately if ever exposed.
  • Keep secrets server-side only (never in VITE_* private tokens).
  • Configure ALLOWED_ORIGINS and GITHUB_REPOSITORY_ALLOWLIST in production.

Troubleshooting

Realtime disabled

Check the following in order:

  1. /api/ably-token exists and returns a token request.
  2. ABLY_API_KEY is present on deployed environment.
  3. VITE_ABLY_CHANNEL matches server channel.
  4. ALLOWED_ORIGINS includes your exact site origin.

Last event: No live commits yet

This value appears only after at least one webhook push event is accepted and published to the subscribed channel. If history loads but last event is empty, webhook delivery is not reaching publish stage yet.

Scripts

  • npm run dev: Vite dev server (with local /api/ably-token middleware)
  • npm run dev:netlify: Netlify dev mode
  • npm run check: Svelte + TypeScript diagnostics
  • npm run build: Production build

Roadmap

  • Playback mode for commit evolution over time.
  • Alternate graph modes (author-centric, repo-centric).
  • Multi-repository compare dashboard.
  • CI expansion with smoke/e2e coverage.

Contributing

Contributions are welcome. See CONTRIBUTING.md.

Support

If CommitScope helps you, please star the project and share it.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes