# 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)

```css
[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.