Skip to content

Instantly share code, notes, and snippets.

@jannismain

jannismain/dashboard.html

Created June 18, 2026 16:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jannismain/c6304d621f3ddbdb15ad4a8afd81e4aa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jannismain/c6304d621f3ddbdb15ad4a8afd81e4aa to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dashboard.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Agent Capabilities Dashboard - Jannis Mainczyk</title>
<!-- Premium Typography -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
/* Reset & Base Variables */
:root {
--bg-dark: #07080d;
--bg-card: rgba(16, 18, 30, 0.65);
--bg-card-hover: rgba(26, 29, 47, 0.85);
--border-color: rgba(255, 255, 255, 0.08);
--border-hover: rgba(255, 255, 255, 0.15);
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--glow-purple: hsl(265, 85%, 60%);
--glow-cyan: hsl(190, 95%, 50%);
--glow-green: hsl(150, 85%, 45%);
--glow-orange: hsl(25, 95%, 55%);
--glow-red: hsl(355, 85%, 55%);
--font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-dark);
background-image:
radial-gradient(circle at 10% 10%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 40%);
background-attachment: fixed;
color: var(--text-primary);
font-family: var(--font-sans);
min-height: 100vh;
line-height: 1.5;
padding: 2.5rem 2rem;
}
/* Scrollbars */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.2);
}
/* Container & Layout */
.dashboard-container {
max-width: 1400px;
margin: 0 auto;
}
/* Glow utilities */
.glow-text {
text-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}
/* Header Styling */
header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2.5rem;
border-bottom: 1px solid var(--border-color);
padding-bottom: 2rem;
}
.brand-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(6,182,212,0.2) 100%);
border: 1px solid rgba(99, 102, 241, 0.3);
padding: 0.35rem 0.85rem;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.05em;
color: #a5b4fc;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
h1 {
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, #ffffff 30%, #a5b4fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
}
.header-sub {
color: var(--text-secondary);
font-size: 1.05rem;
font-weight: 300;
}
.meta-card {
background: var(--bg-card);
backdrop-filter: blur(12px);
border: 1px solid var(--border-color);
padding: 1rem 1.5rem;
border-radius: 16px;
font-size: 0.9rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.meta-row {
display: flex;
gap: 1.5rem;
}
.meta-label {
color: var(--text-muted);
width: 80px;
font-weight: 500;
}
.meta-val {
color: var(--text-primary);
font-weight: 400;
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.stat-card {
background: var(--bg-card);
backdrop-filter: blur(12px);
border: 1px solid var(--border-color);
padding: 1.5rem;
border-radius: 20px;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card:hover {
transform: translateY(-4px);
border-color: var(--border-hover);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.stat-card::after {
content: '';
position: absolute;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
top: -75px;
right: -75px;
border-radius: 50%;
}
.stat-label {
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.stat-value {
font-size: 2.75rem;
font-weight: 800;
line-height: 1;
background: linear-gradient(135deg, #ffffff 40%, var(--text-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Active Agent Capsules */
.active-agents-section {
background: rgba(16, 18, 30, 0.35);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 1.5rem;
margin-bottom: 2.5rem;
}
.section-title {
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1rem;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.agents-flex {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.agent-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.1rem;
border-radius: 12px;
font-weight: 600;
font-size: 0.9rem;
border: 1px solid rgba(255,255,255,0.05);
transition: all 0.2s ease;
background: rgba(30, 41, 59, 0.4);
}
/* Custom Brand Colors for Agent Badges */
.pill-claude-code, .pill-claude-desktop {
background: rgba(217, 119, 6, 0.12);
border-color: rgba(217, 119, 6, 0.3);
color: #f59e0b;
}
.pill-continue {
background: rgba(16, 185, 129, 0.12);
border-color: rgba(16, 185, 129, 0.3);
color: #34d399;
}
.pill-cline, .pill-cursor-cline {
background: rgba(139, 92, 246, 0.12);
border-color: rgba(139, 92, 246, 0.3);
color: #a78bfa;
}
.pill-codex, .pill-opencode {
background: rgba(6, 182, 212, 0.12);
border-color: rgba(6, 182, 212, 0.3);
color: #22d3ee;
}
.pill-copilot-cli {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.3);
color: #60a5fa;
}
.pill-antigravity, .pill-gemini-cli {
background: rgba(236, 72, 153, 0.12);
border-color: rgba(236, 72, 153, 0.3);
color: #f472b6;
}
/* Filters & Tabs Navigation */
.controls-wrapper {
background: var(--bg-card);
backdrop-filter: blur(12px);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 1.25rem;
margin-bottom: 2rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
}
.tabs-nav {
display: flex;
gap: 0.5rem;
}
.tab-btn {
background: transparent;
border: none;
color: var(--text-secondary);
padding: 0.65rem 1.25rem;
border-radius: 12px;
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.tab-btn:hover {
color: var(--text-primary);
background: rgba(255,255,255,0.03);
}
.tab-btn.active {
color: #ffffff;
background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(139,92,246,0.2) 100%);
border: 1px solid rgba(99, 102, 241, 0.25);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
}
.filter-search-group {
display: flex;
gap: 1rem;
flex-grow: 1;
max-width: 600px;
}
.search-input {
flex-grow: 1;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
padding: 0.65rem 1rem;
border-radius: 12px;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 0.95rem;
transition: all 0.2s ease;
}
.search-input:focus {
outline: none;
border-color: rgba(99, 102, 241, 0.5);
box-shadow: 0 0 10px rgba(99, 102, 241, 0.15);
}
.select-input {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
padding: 0.65rem 1rem;
border-radius: 12px;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 0.95rem;
cursor: pointer;
min-width: 150px;
}
.select-input:focus {
outline: none;
border-color: rgba(99, 102, 241, 0.5);
}
/* Content Cards Grid */
.content-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 1.5rem;
}
.card {
background: var(--bg-card);
backdrop-filter: blur(12px);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 220px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
transform: translateY(-4px);
border-color: var(--border-hover);
background: var(--bg-card-hover);
box-shadow: 0 12px 30px -15px rgba(0, 0, 0, 0.6);
}
.card-top {
margin-bottom: 1.25rem;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.card-title {
font-size: 1.25rem;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.01em;
}
.type-badge {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
padding: 0.2rem 0.5rem;
border-radius: 6px;
letter-spacing: 0.05em;
}
.type-mcp_server {
background: rgba(99, 102, 241, 0.12);
color: #818cf8;
border: 1px solid rgba(99, 102, 241, 0.2);
}
.type-plugin {
background: rgba(6, 182, 212, 0.12);
color: #22d3ee;
border: 1px solid rgba(6, 182, 212, 0.2);
}
.type-skill {
background: rgba(236, 72, 153, 0.12);
color: #f472b6;
border: 1px solid rgba(236, 72, 153, 0.2);
}
.card-desc {
color: var(--text-secondary);
font-size: 0.92rem;
font-weight: 300;
line-height: 1.45;
}
.card-bottom {
display: flex;
flex-direction: column;
gap: 0.75rem;
border-top: 1px solid rgba(255,255,255,0.04);
padding-top: 0.75rem;
}
.card-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: var(--text-muted);
}
.card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.mini-pill {
font-size: 0.72rem;
font-weight: 500;
padding: 0.15rem 0.4rem;
border-radius: 4px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.05);
color: var(--text-secondary);
}
.badge-count {
background: rgba(99, 102, 241, 0.15);
color: #a5b4fc;
border: 1px solid rgba(99, 102, 241, 0.25);
padding: 0.1rem 0.45rem;
border-radius: 4px;
font-weight: 600;
}
/* Code & Instruction Expander Accordion */
.expandable-container {
margin-top: 0.5rem;
border-top: 1px dashed rgba(255,255,255,0.06);
padding-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.expand-trigger {
background: none;
border: none;
color: rgba(99, 102, 241, 0.8);
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.25rem;
width: fit-content;
font-family: var(--font-sans);
}
.expand-trigger:hover {
color: #a5b4fc;
text-decoration: underline;
}
.expand-content {
display: none;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
padding: 0.75rem;
font-family: var(--font-mono);
font-size: 0.75rem;
color: #cbd5e1;
max-height: 250px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-all;
}
/* Custom Instructions Table Layout */
.instruction-card {
min-height: 140px;
}
.bubble-quote {
background: rgba(30, 41, 59, 0.4);
border-left: 3px solid var(--glow-purple);
padding: 0.75rem 1rem;
border-radius: 0 12px 12px 12px;
font-size: 0.88rem;
color: var(--text-secondary);
font-style: italic;
line-height: 1.4;
margin-top: 0.5rem;
max-height: 120px;
overflow-y: auto;
}
/* Empty and Filter State Styling */
.no-results {
grid-column: 1 / -1;
background: var(--bg-card);
border: 1px dashed var(--border-color);
border-radius: 20px;
padding: 3.5rem 2rem;
text-align: center;
color: var(--text-secondary);
}
.no-results svg {
color: var(--text-muted);
margin-bottom: 1rem;
width: 48px;
height: 48px;
}
/* Overview Tab Extra Visualization */
.overview-layout {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 1024px) {
.overview-layout {
grid-template-columns: 2fr 1fr;
}
}
.overview-chart-panel {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 1.75rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.chart-y-axis {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-top: 1rem;
}
.chart-bar-row {
display: flex;
align-items: center;
gap: 1.25rem;
}
.chart-bar-label {
width: 130px;
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chart-bar-container {
flex-grow: 1;
height: 14px;
background: rgba(255,255,255,0.03);
border-radius: 50px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.05);
}
.chart-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--glow-purple) 0%, var(--glow-cyan) 100%);
border-radius: 50px;
width: 0%;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart-bar-val {
width: 30px;
text-align: right;
font-size: 0.85rem;
font-weight: 600;
font-family: var(--font-mono);
color: var(--text-primary);
}
/* Footer Styling */
footer {
margin-top: 4rem;
border-top: 1px solid var(--border-color);
padding-top: 1.5rem;
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
}
footer a {
color: var(--text-secondary);
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="dashboard-container">
<!-- HEADER -->
<header>
<div>
<div class="brand-badge">Discovery Engine v2.0.0</div>
<h1>AI Agent Capabilities Dashboard</h1>
<div class="header-sub">Corporate AI Tooling Footprints & Workspace Harness Profiles</div>
</div>
<div class="meta-card">
<div class="meta-row">
<span class="meta-label">Engineer:</span>
<span class="meta-val">Jannis Mainczyk</span>
</div>
<div class="meta-row">
<span class="meta-label">Email:</span>
<span class="meta-val">jmainczyk@gmail.com</span>
</div>
<div class="meta-row">
<span class="meta-label">Platform:</span>
<span class="meta-val">macOS</span>
</div>
</div>
</header>
<!-- STATS GRID -->
<section class="stats-grid">
<div class="stat-card">
<div class="stat-label">Discovered Agents</div>
<div class="stat-value" id="count-runners">0</div>
</div>
<div class="stat-card">
<div class="stat-label">MCP Servers</div>
<div class="stat-value" id="count-mcp">0</div>
</div>
<div class="stat-card">
<div class="stat-label">Extension Plugins</div>
<div class="stat-value" id="count-plugins">0</div>
</div>
<div class="stat-card">
<div class="stat-label">Skills</div>
<div class="stat-value" id="count-skills">0</div>
</div>
</section>
<!-- FOOTPRINTS SECTION -->
<section class="active-agents-section">
<div class="section-title">
<svg style="width:18px;height:18px;fill:currentColor;" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m-1-13h2v6h-2V7m0 8h2v2h-2v-2z"/></svg>
Detected Agent Ecosystem footprints
</div>
<div class="agents-flex" id="active-agents-pills">
<!-- Javascript renders pills -->
</div>
</section>
<!-- CONTROLS & FILTERING -->
<section class="controls-wrapper">
<nav class="tabs-nav">
<button class="tab-btn active" onclick="switchTab('overview')">Overview</button>
<button class="tab-btn" onclick="switchTab('mcp_servers')">MCP Servers</button>
<button class="tab-btn" onclick="switchTab('plugins')">Plugins</button>
<button class="tab-btn" onclick="switchTab('skills')">Skills</button>
<button class="tab-btn" onclick="switchTab('custom_instructions')">Custom Instructions</button>
</nav>
<div class="filter-search-group">
<input type="text" id="search-input" class="search-input" placeholder="Search capabilities..." oninput="handleSearch(this.value)">
<select id="agent-filter" class="select-input" onchange="handleAgentFilter(this.value)">
<option value="all">All Agents</option>
<!-- JavaScript renders options -->
</select>
</div>
</section>
<!-- TAB PANELS -->
<main>
<!-- OVERVIEW TAB PANEL -->
<div id="panel-overview" class="tab-panel">
<div class="overview-layout">
<!-- Chart panel -->
<div class="overview-chart-panel">
<div class="section-title">Capability Distribution by Agent</div>
<div class="chart-y-axis" id="distribution-chart">
<!-- JS builds charts -->
</div>
</div>
<!-- Summary list / Top list -->
<div class="overview-chart-panel" style="justify-content: flex-start; gap: 1rem;">
<div class="section-title">Telemetry Summary</div>
<div style="font-size: 0.95rem; color: var(--text-secondary); display:flex; flex-direction:column; gap:0.75rem;">
<p>📍 Total unique integrated capabilities: <strong style="color:white;" id="summary-unique-cap">0</strong></p>
<p>📊 High-usage capabilities tracked: <strong style="color:white;" id="summary-high-use">0</strong></p>
<p>🎛️ Configured harness instructions: <strong style="color:white;" id="summary-instructions">0</strong></p>
<p>📅 Scan timestamp: <span id="summary-timestamp" style="font-family:var(--font-mono); font-size:0.8rem;"></span></p>
<p style="margin-top:0.5rem; line-height: 1.4; font-size:0.85rem; color: var(--text-muted);">
* Standards are grouped and unified across environment runners to prevent duplication. Run-counts and active references represent merged client structures.
</p>
</div>
</div>
<!-- Combined Capabilities datatable or grid overview -->
<div style="grid-column: 1 / -1; margin-top: 1rem;">
<div class="section-title" style="margin-bottom:1.25rem;">All Scanned Capabilities</div>
<div class="content-grid" id="all-capabilities-overview-grid">
<!-- JS loads list -->
</div>
</div>
</div>
</div>
<!-- GENERIC LIST TAB PANELS (MCP, Plugins, Skills, Instructions) -->
<div id="panel-mcp_servers" class="tab-panel" style="display:none;">
<div class="content-grid" id="mcp-grid"></div>
</div>
<div id="panel-plugins" class="tab-panel" style="display:none;">
<div class="content-grid" id="plugins-grid"></div>
</div>
<div id="panel-skills" class="tab-panel" style="display:none;">
<div class="content-grid" id="skills-grid"></div>
</div>
<div id="panel-custom_instructions" class="tab-panel" style="display:none;">
<div class="content-grid" id="instructions-grid"></div>
</div>
</main>
<!-- FOOTER -->
<footer>
<p>CC Skills Discovery CLI v2.0.0. Technical blueprint is specified in <a href="SPEC.md">SPEC.md</a>.</p>
</footer>
</div>
<!-- EMBEDDED SCANNED TELEMETRY DATA -->
<script>
const DATA = {
"schema_version": "2.0.0",
"collected_at": "2026-06-18T16:18:11.971Z",
"employee": {
"username": "Jannis Mainczyk",
"email": "jmainczyk@gmail.com"
},
"environment": {
"os": "darwin",
"os_version": "24.6.0"
},
"active_agents": [
"claude-code",
"claude-desktop",
"codex",
"opencode",
"continue",
"cline",
"copilot-cli",
"gemini-cli",
"antigravity"
],
"capabilities": {
"mcp_servers": [
{
"name": "Read and Write Apple Notes",
"description": "Read, write, and manage notes in Apple Notes",
"agents": [
"claude-desktop"
],
"last_used_at": "2026-06-18T15:42:54.974Z",
"call_count": 8
},
{
"name": "node_repl",
"description": "MCP Server configured in Codex.",
"agents": [
"codex"
],
"last_used_at": null,
"call_count": 0
},
{
"name": "node_repl.env",
"description": "MCP Server configured in Codex.",
"agents": [
"codex"
],
"last_used_at": null,
"call_count": 0
}
],
"plugins": [
{
"name": "code-simplifier",
"description": "Official extension: code-simplifier@claude-plugins-official",
"agents": [
"claude-code"
],
"last_used_at": "2026-06-08T10:45:16.072Z",
"call_count": 0
},
{
"name": "code-review",
"description": "Official extension: code-review@claude-plugins-official",
"agents": [
"claude-code"
],
"last_used_at": "2026-06-08T10:45:16.072Z",
"call_count": 0
},
{
"name": "andrej-karpathy-skills",
"description": "Official extension: andrej-karpathy-skills@karpathy-skills",
"agents": [
"claude-code"
],
"last_used_at": "2026-06-08T10:45:16.072Z",
"call_count": 0
},
{
"name": "skill-creator",
"description": "Official extension: skill-creator@claude-plugins-official",
"agents": [
"claude-code"
],
"last_used_at": "2026-06-08T10:45:16.072Z",
"call_count": 0
},
{
"name": "plugin-dev",
"description": "Official extension: plugin-dev@claude-plugins-official",
"agents": [
"claude-code"
],
"last_used_at": "2026-06-08T10:45:16.072Z",
"call_count": 0
},
{
"name": "claude-code-setup",
"description": "Official extension: claude-code-setup@claude-plugins-official",
"agents": [
"claude-code"
],
"last_used_at": "2026-06-08T10:45:16.072Z",
"call_count": 0
},
{
"name": "last30days",
"description": "Official extension: last30days@last30days-skill",
"agents": [
"claude-code"
],
"last_used_at": "2026-06-18T16:16:19.034Z",
"call_count": 3419
},
{
"name": "pdf",
"description": "Active Codex plugin: pdf@openai-primary-runtime",
"agents": [
"codex"
],
"last_used_at": null,
"call_count": 0
},
{
"name": "browser",
"description": "Active Codex plugin: browser@openai-bundled",
"agents": [
"codex"
],
"last_used_at": null,
"call_count": 0
},
{
"name": "plugin",
"description": "Opencode extension plugin: @opencode-ai/plugin (v1.3.0)",
"agents": [
"opencode"
],
"last_used_at": null,
"call_count": 0
}
],
"skills": [
{
"name": "agent-browser",
"description": "Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to \"open a website\", \"fill out a form\", \"click a button\", \"take a screenshot\", \"scrape data from a page\", \"test this web app\", \"login to a site\", \"automate browser actions\", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.",
"agents": [
"claude-code",
"antigravity"
],
"is_custom": false,
"source_code_shared": false
},
{
"name": "find-skills",
"description": "Helps users discover and install agent skills when they ask questions like \"how do I do X\", \"find a skill for X\", \"is there a skill that can...\", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.",
"agents": [
"claude-code",
"antigravity"
],
"is_custom": false,
"source_code_shared": false
},
{
"name": "glab-cli",
"description": "Use when working with GitLab via CLI - creating MRs, CI pipelines, issues, or API calls. Prevents common mistakes like inventing nonexistent commands.",
"agents": [
"claude-code"
],
"is_custom": true,
"source_code_shared": true
},
{
"name": "peon-ping-config",
"description": "Update peon-ping configuration — volume, pack rotation, categories, active pack, and other settings. Use when user wants to change peon-ping settings like volume, enable round-robin, add packs to rotation, toggle sound categories, or adjust any config.",
"agents": [
"claude-code"
],
"is_custom": false,
"source_code_shared": false
},
{
"name": "peon-ping-log",
"description": "Log exercise reps for the Peon Trainer. Use when user says they did pushups, squats, or wants to log reps. Examples - \"/peon-ping-log 25 pushups\", \"/peon-ping-log 30 squats\", \"log 50 pushups\".",
"agents": [
"claude-code"
],
"is_custom": false,
"source_code_shared": false
},
{
"name": "peon-ping-toggle",
"description": "Toggle peon-ping sound notifications on/off. Use when user wants to mute, unmute, pause, or resume peon sounds during a Claude Code session. Also handles config changes like volume, pack rotation, categories — any peon-ping setting.",
"agents": [
"claude-code"
],
"is_custom": false,
"source_code_shared": false
},
{
"name": "peon-ping-use",
"description": "Set which voice pack (character voice) plays for the current chat session. Automatically enables session_override rotation mode if not already set. Use when user wants a specific character voice like GLaDOS, Peon, or Kerrigan for this conversation.",
"agents": [
"claude-code"
],
"is_custom": false,
"source_code_shared": false
},
{
"name": "visual-explainer",
"description": "Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.",
"agents": [
"claude-code"
],
"is_custom": false,
"source_code_shared": false
},
{
"name": "browser",
"description": "Codex Skill config",
"agents": [
"codex"
],
"is_custom": false,
"source_code_shared": false
},
{
"name": "codex-primary-runtime",
"description": "Custom Codex skill module under ~/.codex/skills/",
"agents": [
"codex"
],
"is_custom": false,
"source_code_shared": false
},
{
"name": "last30days",
"description": "Global skill imported from: https://github.com/sickn33/antigravity-awesome-skills.git",
"agents": [
"antigravity"
],
"is_custom": false,
"source_code_shared": false
}
],
"custom_instructions": [
{
"name": "test",
"agent": "continue",
"instruction_prompt": "{{{ input }}}\n\nWrite a comprehensive set of unit tests for the selected code. It should setup, run tests that check for correctness including important edge cases, and teardown. Ensure that the tests are complete and sophisticated. Give the tests just as chat output, don't edit any file.",
"description": "Write unit tests for highlighted code"
}
]
}
};
</script>
<!-- INTERACTIVE PRESENTATION LOGIC -->
<script>
let activeTab = 'overview';
let searchQuery = '';
let selectedAgent = 'all';
document.addEventListener('DOMContentLoaded', () => {
initializeDashboard();
});
function initializeDashboard() {
// 1. Populate top counters
document.getElementById('count-runners').innerText = DATA.active_agents.length;
document.getElementById('count-mcp').innerText = DATA.capabilities.mcp_servers.length;
document.getElementById('count-plugins').innerText = DATA.capabilities.plugins.length;
document.getElementById('count-skills').innerText = DATA.capabilities.skills.length;
// 2. Populate Overview stats
document.getElementById('summary-unique-cap').innerText =
DATA.capabilities.mcp_servers.length + DATA.capabilities.plugins.length + DATA.capabilities.skills.length;
const allCaps = [
...DATA.capabilities.mcp_servers,
...DATA.capabilities.plugins,
...DATA.capabilities.skills
];
const highUse = allCaps.filter(c => c.call_count > 0).length;
document.getElementById('summary-high-use').innerText = highUse;
document.getElementById('summary-instructions').innerText = DATA.capabilities.custom_instructions.length;
document.getElementById('summary-timestamp').innerText = new Date(DATA.collected_at).toLocaleString();
// 3. Render Agent Footprints pills
const agentsContainer = document.getElementById('active-agents-pills');
agentsContainer.innerHTML = '';
DATA.active_agents.forEach(agent => {
const pill = document.createElement('span');
pill.className = `agent-pill pill-${agent.toLowerCase()}`;
pill.innerHTML = `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;"></span> ${agent}`;
agentsContainer.appendChild(pill);
});
// 4. Fill agent dropdown filter options
const filterSelect = document.getElementById('agent-filter');
DATA.active_agents.forEach(agent => {
const opt = document.createElement('option');
opt.value = agent;
opt.innerText = agent;
filterSelect.appendChild(opt);
});
// 5. Generate Distribution Chart
renderDistributionChart();
// 6. Draw Content lists
renderContent();
}
function renderDistributionChart() {
const chartContainer = document.getElementById('distribution-chart');
chartContainer.innerHTML = '';
// Count occurrences per agent
const distribution = {};
DATA.active_agents.forEach(a => { distribution[a] = 0; });
// Add servers
DATA.capabilities.mcp_servers.forEach(s => {
s.agents.forEach(a => { if (distribution[a] !== undefined) distribution[a]++; });
});
// Add plugins
DATA.capabilities.plugins.forEach(p => {
p.agents.forEach(a => { if (distribution[a] !== undefined) distribution[a]++; });
});
// Add skills
DATA.capabilities.skills.forEach(sk => {
sk.agents.forEach(a => { if (distribution[a] !== undefined) distribution[a]++; });
});
// Add custom instructions
DATA.capabilities.custom_instructions.forEach(inst => {
const a = inst.agent;
if (distribution[a] !== undefined) {
distribution[a]++;
} else {
distribution[a] = 1;
}
});
const maxCount = Math.max(...Object.values(distribution), 1);
Object.entries(distribution).sort((a,b) => b[1] - a[1]).forEach(([agent, count]) => {
const pct = (count / maxCount) * 100;
const row = document.createElement('div');
row.className = 'chart-bar-row';
row.innerHTML = `
<div class="chart-bar-label">${agent}</div>
<div class="chart-bar-container">
<div class="chart-bar-fill" style="width: 0%;" id="bar-fill-${agent}"></div>
</div>
<div class="chart-bar-val">${count}</div>
`;
chartContainer.appendChild(row);
// Animate fill bar entry
setTimeout(() => {
const fill = document.getElementById(`bar-fill-${agent}`);
if (fill) fill.style.width = `${pct}%`;
}, 100);
});
}
function switchTab(tabId) {
activeTab = tabId;
// Update Active Navigation Class
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('active');
if (btn.innerText.toLowerCase().replace(' ', '_') === tabId) {
btn.classList.add('active');
} else if (tabId === 'overview' && btn.innerText.toLowerCase() === 'overview') {
btn.classList.add('active');
} else if (tabId === 'custom_instructions' && btn.innerText.toLowerCase() === 'custom instructions') {
btn.classList.add('active');
}
});
// Hide all panels, show active
document.querySelectorAll('.tab-panel').forEach(panel => {
panel.style.display = 'none';
});
if (tabId === 'overview') {
document.getElementById('panel-overview').style.display = 'block';
} else {
document.getElementById(`panel-${tabId}`).style.display = 'block';
}
renderContent();
}
function handleSearch(val) {
searchQuery = val.toLowerCase().trim();
renderContent();
}
function handleAgentFilter(val) {
selectedAgent = val;
renderContent();
}
function filterItem(item) {
// 1. Search Query filter
const matchesSearch = !searchQuery ||
item.name.toLowerCase().includes(searchQuery) ||
(item.description && item.description.toLowerCase().includes(searchQuery)) ||
(item.instruction_prompt && item.instruction_prompt.toLowerCase().includes(searchQuery));
// 2. Agent Filter
let matchesAgent = selectedAgent === 'all';
if (!matchesAgent) {
if (item.agents && item.agents.includes(selectedAgent)) {
matchesAgent = true;
} else if (item.agent && item.agent === selectedAgent) {
matchesAgent = true;
}
}
return matchesSearch && matchesAgent;
}
function renderContent() {
if (activeTab === 'overview') {
// Render mixed overview grid
const grid = document.getElementById('all-capabilities-overview-grid');
grid.innerHTML = '';
const mcpList = DATA.capabilities.mcp_servers.map(x => ({ ...x, _grid_type: 'mcp_server' }));
const pluginList = DATA.capabilities.plugins.map(x => ({ ...x, _grid_type: 'plugin' }));
const skillsList = DATA.capabilities.skills.map(x => ({ ...x, _grid_type: 'skill' }));
const combined = [...mcpList, ...pluginList, ...skillsList].filter(filterItem);
if (combined.length === 0) {
grid.innerHTML = getEmptyStateMarkup();
return;
}
combined.forEach(item => {
grid.appendChild(createCapabilityCard(item, item._grid_type));
});
} else if (activeTab === 'mcp_servers') {
const grid = document.getElementById('mcp-grid');
grid.innerHTML = '';
const list = DATA.capabilities.mcp_servers.filter(filterItem);
if (list.length === 0) { grid.innerHTML = getEmptyStateMarkup(); return; }
list.forEach(item => grid.appendChild(createCapabilityCard(item, 'mcp_server')));
} else if (activeTab === 'plugins') {
const grid = document.getElementById('plugins-grid');
grid.innerHTML = '';
const list = DATA.capabilities.plugins.filter(filterItem);
if (list.length === 0) { grid.innerHTML = getEmptyStateMarkup(); return; }
list.forEach(item => grid.appendChild(createCapabilityCard(item, 'plugin')));
} else if (activeTab === 'skills') {
const grid = document.getElementById('skills-grid');
grid.innerHTML = '';
const list = DATA.capabilities.skills.filter(filterItem);
if (list.length === 0) { grid.innerHTML = getEmptyStateMarkup(); return; }
list.forEach(item => grid.appendChild(createCapabilityCard(item, 'skill')));
} else if (activeTab === 'custom_instructions') {
const grid = document.getElementById('instructions-grid');
grid.innerHTML = '';
const list = DATA.capabilities.custom_instructions.filter(filterItem);
if (list.length === 0) { grid.innerHTML = getEmptyStateMarkup(); return; }
list.forEach(item => grid.appendChild(createInstructionCard(item)));
}
}
function createCapabilityCard(item, type) {
const card = document.createElement('div');
card.className = 'card';
const typeLabel = type === 'mcp_server' ? 'mcp server' : (type === 'plugin' ? 'plugin' : (item.is_custom ? 'private skill' : 'public skill'));
const agentsPills = item.agents.map(a => `<span class="mini-pill">${a}</span>`).join(' ');
let usageInfo = '';
if (item.call_count !== undefined) {
const hasUsage = item.call_count !== null;
const lastUsed = hasUsage ? (item.last_used_at ? new Date(item.last_used_at).toLocaleDateString() : 'Never') : 'unknown';
const usageCount = hasUsage ? item.call_count : '?';
usageInfo = `
<div class="card-meta-row" style="margin-top:0.25rem;">
<span>Last used: <strong>${lastUsed}</strong></span>
<span>Usage: <strong class="badge-count">${usageCount}</strong></span>
</div>
`;
}
let innerHtml = `
<div class="card-top">
<div class="card-header">
<span class="card-title">${item.name}</span>
<span class="type-badge type-${type}">${typeLabel}</span>
</div>
<div class="card-desc">${item.description || 'No description supplied.'}</div>
</div>
<div class="card-bottom">
<div class="card-meta-row">
<span style="font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; font-weight:600; letter-spacing:0.02em;">Enabled on:</span>
</div>
<div class="card-tags">${agentsPills}</div>
${usageInfo}
</div>
`;
// Skills expandable source code block
if (type === 'skill' && item.source_code_shared && item.source_code_preview) {
const id = 'skill-' + item.name.replace(/[^a-zA-Z0-9]/g, '-');
innerHtml += `
<div class="expandable-container">
<button class="expand-trigger" onclick="toggleExpand('${id}')">
<span id="trigger-icon-${id}">▶</span> View skill source
</button>
<pre class="expand-content" id="content-${id}">${escapeHtml(item.source_code_preview)}</pre>
</div>
`;
}
innerHtml += `</div>`;
card.innerHTML = innerHtml;
return card;
}
function createInstructionCard(item) {
const card = document.createElement('div');
card.className = 'card instruction-card';
const agentLabel = `<span class="mini-pill" style="border-color:rgba(139, 92, 246, 0.3); color:#a78bfa;">${item.agent}</span>`;
const id = 'inst-' + item.name.replace(/[^a-zA-Z0-9]/g, '-');
card.innerHTML = `
<div class="card-top" style="margin-bottom:0.75rem;">
<div class="card-header">
<span class="card-title" style="font-size:1.1rem;">${item.name}</span>
<span class="type-badge type-mcp_server" style="background:rgba(139, 92, 246, 0.12); color:#a78bfa; border-color:rgba(139, 92, 246, 0.2);">Prompt Set</span>
</div>
<div class="card-desc">${item.description || 'Custom global user guidelines.'}</div>
</div>
<div class="card-bottom">
<div class="card-meta-row">
<span style="font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; font-weight:600; letter-spacing:0.02em;">Target system:</span>
${agentLabel}
</div>
<div class="bubble-quote">${escapeHtml(item.instruction_prompt)}</div>
</div>
`;
return card;
}
function toggleExpand(id) {
const block = document.getElementById('content-' + id);
const icon = document.getElementById('trigger-icon-' + id);
if (block.style.display === 'block') {
block.style.display = 'none';
icon.innerText = '▶';
} else {
block.style.display = 'block';
icon.innerText = '▼';
}
}
function escapeHtml(str) {
return str
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
}
function getEmptyStateMarkup() {
return `
<div class="no-results">
<svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.604 10.604z"></path>
</svg>
<h3>No capabilities match your query</h3>
<p style="font-size:0.9rem; color:var(--text-muted); margin-top:0.25rem;">Try modifying your search or choosing a different agent filter.</p>
</div>
`;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment