<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>Skills Configuration</title>
<link rel="stylesheet" href="./mcp-app.css">
</head>
<body>
<div class="header">
<div>
<h1>Skills Directories</h1>
<div class="stats" id="stats">Loading...</div>
</div>
<button class="add-btn" id="add-btn">
<span>+</span> Add Directory
</button>
</div>
<div class="hint-banner">
<strong>Tip:</strong> Ask Claude to "show my skills" to view your skills list and manage invocation settings.
</div>
<div class="override-banner" id="override-banner">
<strong>Note:</strong> Directories are being set by <span id="override-source">CLI args</span>.
Changes to the config file won't take effect while this override is active.
</div>
<div id="directory-list" class="directory-list">
<div class="loading">Loading directories...</div>
</div>
<!-- GitHub Allowed Orgs Section -->
<div class="section-header">
<div>
<h2>GitHub Allowed Orgs</h2>
<div class="section-hint">Organizations allowed to sync skills from GitHub</div>
</div>
<button class="add-btn add-org-btn" id="add-org-btn">
<span>+</span> Add Org
</button>
</div>
<div id="allowed-orgs-list" class="allowed-list">
<div class="empty-state small">No allowed orgs configured. GitHub repos are blocked until an org/user is added.</div>
</div>
<!-- Settings Section -->
<div class="settings-section">
<h2>Settings</h2>
<div class="setting-item">
<div class="setting-info">
<label for="static-mode-toggle">Static Mode</label>
<div class="setting-hint">
Freeze skills list at startup. Disables file watching and dynamic updates.
<br><strong>Requires server restart to take effect.</strong>
</div>
</div>
<label class="toggle-switch">
<input type="checkbox" id="static-mode-toggle">
<span class="toggle-slider"></span>
</label>
</div>
</div>
<!-- Confirm Remove Org Modal -->
<div class="modal-overlay" id="confirm-remove-org-modal">
<div class="modal modal-small">
<div class="modal-header">
<h2>Remove Allowed Org</h2>
<button class="modal-close" id="confirm-remove-org-close">×</button>
</div>
<div class="modal-body">
<p>Remove this organization from the allowed list?</p>
<p class="confirm-path" id="confirm-remove-org-name"></p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="confirm-remove-org-cancel">Cancel</button>
<button class="btn btn-danger" id="confirm-remove-org-btn">Remove</button>
</div>
</div>
</div>
<!-- Add Org Modal -->
<div class="modal-overlay" id="add-org-modal">
<div class="modal">
<div class="modal-header">
<h2>Add Allowed GitHub Org</h2>
<button class="modal-close" data-modal="add-org-modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="org-name">Organization Name</label>
<input
type="text"
id="org-name"
placeholder="e.g., modelcontextprotocol"
>
<div class="form-hint">
GitHub organization or username to allow for skill repositories
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-modal="add-org-modal">Cancel</button>
<button class="btn btn-primary" id="add-org-submit-btn">Add Org</button>
</div>
</div>
</div>
<!-- Confirm Remove Modal -->
<div class="modal-overlay" id="confirm-remove-modal">
<div class="modal modal-small">
<div class="modal-header">
<h2>Remove Directory</h2>
<button class="modal-close" id="confirm-remove-close">×</button>
</div>
<div class="modal-body">
<p>Remove this directory from configuration?</p>
<p class="confirm-path" id="confirm-remove-path"></p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="confirm-remove-cancel">Cancel</button>
<button class="btn btn-danger" id="confirm-remove-btn">Remove</button>
</div>
</div>
</div>
<!-- Add Directory Modal -->
<div class="modal-overlay" id="add-modal">
<div class="modal">
<div class="modal-header">
<h2>Add Skills Source</h2>
<button class="modal-close">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="directory-path">Directory Path or GitHub URL</label>
<input
type="text"
id="directory-path"
placeholder="/path/to/skills or github.com/org/repo"
>
<div class="form-hint">
Local path or GitHub URL to a directory containing skill folders (each with a SKILL.md file).
<br>Examples: <code>C:\skills</code>, <code>github.com/org/repo</code>, <code>github.com/org/repo/subdir</code>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary">Cancel</button>
<button class="btn btn-primary" id="add-submit-btn">Add Directory</button>
</div>
</div>
</div>
<!-- Toast -->
<div class="toast" id="toast"></div>
<script type="module" src="./mcp-app.ts"></script>
</body>
</html>
