Files

2.0 KiB

Capabilities Portal Page

A live dashboard at /capabilities.html showing all agent capabilities — skills, MCP servers, API integrations, cron jobs, infrastructure.

Tech Stack

  • Static HTML with Tailwind CSS (CDN)
  • Dark tooltips via CSS [data-tip] attribute (pure CSS, no JavaScript)
  • No backend — static snapshot updated when infrastructure changes
  • Served via Tailscale Serve at https://vaultwarden.tailc2f3b0.ts.net/capabilities.html
  • Also accessible directly at http://152.53.192.33:8081/capabilities.html

Tooltip system (CSS-only)

[data-tip] { position:relative; cursor:help; }
[data-tip]:before {
  content:attr(data-tip); position:absolute;
  bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%) scale(0.9);
  background:#1e293b; color:#f1f5f9; font-size:12px;
  border-radius:6px; white-space:nowrap;
  opacity:0; transition:all 0.15s ease;
  max-width:300px; white-space:normal; text-align:center;
}
[data-tip]:hover:before { opacity:1; transform:translateX(-50%) scale(1); }

Usage: <span data-tip="Tooltip text">Label</span>

Tip appears centered above the element on hover. Right-side variant available with [data-tip-right].

Sections

  1. Status card — aggregate counts (skills, MCPs, cron, APIs, servers, providers)
  2. Model card — primary model, subagent model, provider info
  3. Quick links — cross-links to other portal pages
  4. API Integrations — connected services with status badges and tooltip descriptions
  5. MCP Servers — table with name, transport, tools, status
  6. Skills by Category — organized by DevOps, Agents, Email, Security, Creative
  7. Infrastructure — server table with IPs, roles, specs, status
  8. Scheduled Tasks — all cron jobs with frequency and tooltip descriptions

When to update

  • Add new cron jobs
  • Deploy new MCP servers
  • Add API integrations
  • Add/modify infrastructure servers
  • Remove or pause services

The page should reflect the current state of the agent's capabilities. Stale entries mislead the user.