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:

Cache Statistics: Total packages, storage used, hit rate
Request Metrics: Total requests, response times
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 and HTMX 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.
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

Customization

Design tokens and component classes live in src/vcpkg_harbor/static/src/tailwind.css. After editing them - 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>