Web Dashboard

vcpkg-harbor includes a built-in web dashboard for monitoring and browsing the cache.

Accessing the Dashboard

Open your browser to http://localhost:15151/ (or your configured host/port).

Dashboard Pages

Home

The main dashboard shows:

Hit rate: The share of vcpkg lookups answered from the cache, with the hit and miss counts drawn on a gauge
Key figures: Cached binaries, storage used, requests served and the average response time
Recent Packages: Recently cached packages
Quick Start Guide: How to configure vcpkg

Packages

Browse all cached packages:

Search by package name
View package versions
See package sizes
Navigate to package details

Package Details

For each package:

All cached versions
SHA hashes
File sizes
Cache timestamps

Statistics

Detailed statistics including:

Cache hit/miss rates
Upload/download counts
Request breakdown (HEAD/GET/PUT)
Largest packages
Storage backend info

Configuration

Enable/Disable Dashboard

VCPKG_DASHBOARD_ENABLED=true  # or false

Change Base Path

VCPKG_DASHBOARD_PATH=/dashboard

Serve Under a Sub-Path

Behind a reverse proxy that mounts vcpkg-harbor below the domain root, tell the application about the prefix. Every link, image and background request is then generated with it:

VCPKG_PROXY_ROOT_PATH=/harbor

See Configuration for the matching nginx snippets.

Embedding the Dashboard

The dashboard uses no root-absolute URLs, so it can be embedded in another page:

<iframe src="https://example.com/harbor/" title="vcpkg-harbor dashboard"></iframe>

Two things make this work in a locked-down environment:

Tailwind CSS, HTMX and the web fonts are served from /static by default (VCPKG_DASHBOARD_ASSETS=local), and no markup carries inline scripts or styles, so a strict Content-Security-Policy does not break the page. The fonts are always served locally, also with VCPKG_DASHBOARD_ASSETS=cdn.
Nothing restricts framing unless you ask for it. To limit who may embed the dashboard, set a frame-ancestors policy:
Terminal window
```
VCPKG_PROXY_FRAME_ANCESTORS="'self' https://portal.example.com"
```

HTMX Live Updates

The dashboard uses HTMX for automatic updates:

Statistics refresh every 30 seconds
No page reloads required
Minimal bandwidth usage
If a refresh fails, the last figures stay on screen and a notice explains that the server could not be reached

Light and Dark Mode

The dashboard follows the operating system’s colour scheme. The button next to the GitHub link in the header cycles between matching the system, light and dark; the choice is remembered in the browser’s local storage.

Customization

Design tokens (colours for both themes, type scale, spacing, radii) live in src/vcpkg_harbor/static/css/style.css. Component classes live in src/vcpkg_harbor/static/src/tailwind.css, which maps the tokens onto Tailwind utilities. After editing the component classes - or the utility classes used in the templates - rebuild the vendored stylesheet:

./scripts/build-dashboard-assets.sh

Templates are in:

src/vcpkg_harbor/dashboard/templates/
├── base.html
├── index.html
├── packages.html
├── package_detail.html
├── stats.html
├── 404.html
├── _macros.html
└── partials/
    ├── stats_summary.html
    ├── recent_packages.html
    └── package_table.html

Links inside templates go through the url_path() helper rather than being written out as /packages, so they keep working under a sub-path:

<a href="{{ url_path('packages_list') }}">Packages</a>
<img src="{{ url_path('static', path='logo.svg') }}" alt="">
<div hx-get="{{ url_path('stats_summary_partial') }}"></div>