From ffceb2efc2e115fa6ddc334822167ab1443ee356 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 15 Feb 2026 18:29:15 -0600
Subject: [PATCH] feat: Add configuration management UI for /agents page

- Add 6-tab horizontal bar: Files, Tools, MCPs, Plugins, Hooks, Skills
- Backend: permission parser, config/known-tools/skills/plugins/mcp-json endpoints
- Backend: POST endpoints for permissions, hooks, and MCP config
- Store: tool entries with 3-state toggle, MCP servers, hooks CRUD, skills/plugins fetch
- ToolsManager: search, grouped cards (base/MCP), ask/allow/deny cycle, parameterized rules
- McpManager: server cards with enable/disable, add/edit/delete modal
- PluginsManager: read-only global plugin cards from ~/.claude/plugins/
- HooksManager: accordion by event type, inline edit with matcher/command/timeout
- SkillsManager: two-column layout with SKILL.md preview and references
---
 .../src/components/agents/HooksManager.vue    | 505 +++++++++++++++
 frontend/src/components/agents/McpManager.vue | 560 ++++++++++++++++
 .../src/components/agents/PluginsManager.vue  | 212 +++++++
 .../src/components/agents/SkillsManager.vue   | 316 +++++++++
 .../src/components/agents/ToolsManager.vue    | 484 ++++++++++++++
 frontend/src/pages/AgentsPage.vue             | 322 +++++++---
 frontend/src/stores/agents.ts                 | 600 +++++++++++++++++-
 server/routes/agents.ts                       | 354 ++++++++++-
 8 files changed, 3235 insertions(+), 118 deletions(-)
 create mode 100644 frontend/src/components/agents/HooksManager.vue
 create mode 100644 frontend/src/components/agents/McpManager.vue
 create mode 100644 frontend/src/components/agents/PluginsManager.vue
 create mode 100644 frontend/src/components/agents/SkillsManager.vue
 create mode 100644 frontend/src/components/agents/ToolsManager.vue

diff --git a/frontend/src/components/agents/HooksManager.vue b/frontend/src/components/agents/HooksManager.vue
new file mode 100644
index 0000000..51022f2
--- /dev/null
+++ b/frontend/src/components/agents/HooksManager.vue
@@ -0,0 +1,505 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAgentsStore, HOOK_EVENT_TYPES } from '../../stores/agents'
+import type { HookEntry, HookCommand } from '../../stores/agents'
+
+const store = useAgentsStore()
+const editingHook = ref<{ eventType: string; index: number } | null>(null)
+const editMatcher = ref('')
+const editCommand = ref('')
+const editTimeout = ref(5000)
+
+function hookCount(eventType: string): number {
+  return store.hooksConfig[eventType]?.length || 0
+}
+
+function totalHookCount(): number {
+  return Object.values(store.hooksConfig).reduce((sum, arr) => sum + (arr?.length || 0), 0)
+}
+
+function startEdit(eventType: string, index: number) {
+  const entry = store.hooksConfig[eventType]?.[index]
+  if (!entry) return
+  editingHook.value = { eventType, index }
+  editMatcher.value = entry.matcher || ''
+  editCommand.value = entry.hooks?.[0]?.command || ''
+  editTimeout.value = entry.hooks?.[0]?.timeout || 5000
+}
+
+function saveEdit() {
+  if (!editingHook.value) return
+  const { eventType, index } = editingHook.value
+
+  const entry: HookEntry = {
+    matcher: editMatcher.value.trim() || null,
+    hooks: [{
+      type: 'command',
+      command: editCommand.value.trim(),
+      timeout: editTimeout.value
+    }]
+  }
+
+  store.updateHook(eventType, index, entry)
+  editingHook.value = null
+}
+
+function cancelEdit() {
+  editingHook.value = null
+}
+
+function truncateCommand(cmd: string, max = 60): string {
+  return cmd.length > max ? cmd.slice(0, max) + '...' : cmd
+}
+
+const eventTypeLabels: Record<string, string> = {
+  'UserPromptSubmit': 'User Prompt Submit',
+  'PreToolUse': 'Pre Tool Use',
+  'PostToolUse': 'Post Tool Use',
+  'SessionStart': 'Session Start',
+  'Stop': 'Stop',
+  'Notification': 'Notification',
+  'PermissionRequest': 'Permission Request'
+}
+
+const eventTypeColors: Record<string, string> = {
+  'UserPromptSubmit': '#3b82f6',
+  'PreToolUse': '#f59e0b',
+  'PostToolUse': '#22c55e',
+  'SessionStart': '#6366f1',
+  'Stop': '#ef4444',
+  'Notification': '#8b5cf6',
+  'PermissionRequest': '#06b6d4'
+}
+</script>
+
+<template>
+  <div class="hooks-manager">
+    <!-- Header -->
+    <div class="hooks-header">
+      <div class="hooks-header-left">
+        <h3>Hooks</h3>
+        <span class="hooks-count">{{ totalHookCount() }} hooks</span>
+        <span v-if="store.configFile" class="hooks-path">{{ store.configFile }}</span>
+      </div>
+      <div class="hooks-header-right">
+        <button
+          class="btn btn-primary"
+          :disabled="store.saving"
+          @click="store.saveHooks()"
+        >{{ store.saving ? 'Saving...' : 'Save Hooks' }}</button>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="store.hooksLoading" class="hooks-loading">Loading hooks...</div>
+
+    <!-- Error -->
+    <div v-if="store.error" class="hooks-error">{{ store.error }}</div>
+
+    <!-- Hook sections by event type -->
+    <div v-if="!store.hooksLoading" class="hooks-scroll">
+      <div v-for="eventType in HOOK_EVENT_TYPES" :key="eventType" class="hook-section">
+        <button
+          class="hook-section-header"
+          @click="store.toggleHookType(eventType)"
+        >
+          <span class="hook-dot" :style="{ background: eventTypeColors[eventType] }"></span>
+          <span class="hook-type-label">{{ eventTypeLabels[eventType] || eventType }}</span>
+          <span
+            v-if="hookCount(eventType)"
+            class="hook-type-count"
+            :style="{ background: eventTypeColors[eventType] + '18', color: eventTypeColors[eventType] }"
+          >{{ hookCount(eventType) }}</span>
+          <svg
+            class="hook-chevron"
+            :class="{ expanded: store.expandedHookTypes.has(eventType) }"
+            xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
+            fill="none" stroke="currentColor" stroke-width="2"
+          >
+            <polyline points="6 9 12 15 18 9"/>
+          </svg>
+        </button>
+
+        <div v-if="store.expandedHookTypes.has(eventType)" class="hook-section-body">
+          <!-- Hook entries -->
+          <div
+            v-for="(entry, idx) in (store.hooksConfig[eventType] || [])"
+            :key="idx"
+            class="hook-entry"
+          >
+            <!-- View mode -->
+            <template v-if="!editingHook || editingHook.eventType !== eventType || editingHook.index !== idx">
+              <div class="hook-entry-info">
+                <div v-if="entry.matcher" class="hook-matcher">
+                  <span class="entry-label">Matcher</span>
+                  <code>{{ entry.matcher }}</code>
+                </div>
+                <div v-for="(hook, hIdx) in entry.hooks" :key="hIdx" class="hook-command-row">
+                  <span class="entry-label">Command</span>
+                  <code :title="hook.command">{{ truncateCommand(hook.command) }}</code>
+                  <span v-if="hook.timeout" class="hook-timeout">{{ hook.timeout }}ms</span>
+                </div>
+              </div>
+              <div class="hook-entry-actions">
+                <button class="btn-link" @click="startEdit(eventType, idx)">Edit</button>
+                <button class="btn-link danger" @click="store.removeHook(eventType, idx)">Remove</button>
+              </div>
+            </template>
+
+            <!-- Edit mode -->
+            <template v-else>
+              <div class="hook-edit-form">
+                <div class="form-row">
+                  <label>Matcher</label>
+                  <input type="text" v-model="editMatcher" placeholder=".*  (regex or empty)" />
+                </div>
+                <div class="form-row">
+                  <label>Command</label>
+                  <textarea v-model="editCommand" rows="2" placeholder="bash script.sh"></textarea>
+                </div>
+                <div class="form-row">
+                  <label>Timeout (ms)</label>
+                  <input type="number" v-model.number="editTimeout" />
+                </div>
+                <div class="form-row-actions">
+                  <button class="btn btn-secondary btn-xs" @click="cancelEdit">Cancel</button>
+                  <button class="btn btn-primary btn-xs" @click="saveEdit">Save</button>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <!-- Empty state for this type -->
+          <div v-if="!hookCount(eventType)" class="hook-empty">No hooks configured</div>
+
+          <!-- Add button -->
+          <button class="hook-add-btn" @click="store.addHook(eventType)">
+            + Add hook
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hooks-manager {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.hooks-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  gap: 1rem;
+  flex-shrink: 0;
+}
+
+.hooks-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.hooks-header-left h3 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.hooks-count {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  padding: 0.125rem 0.5rem;
+  background: var(--bg-hover);
+  border-radius: 999px;
+}
+
+.hooks-path {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  font-family: 'Consolas', monospace;
+}
+
+.hooks-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.hooks-loading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+}
+
+.hooks-error {
+  padding: 0.625rem 1.25rem;
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  font-size: 0.8125rem;
+  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.hooks-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.75rem 1.25rem;
+}
+
+/* Hook sections */
+.hook-section {
+  margin-bottom: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.hook-section-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  background: var(--bg-secondary);
+  border: none;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.hook-section-header:hover {
+  background: var(--bg-hover);
+}
+
+.hook-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.hook-type-label {
+  flex: 1;
+  text-align: left;
+}
+
+.hook-type-count {
+  font-size: 0.625rem;
+  font-weight: 600;
+  padding: 0.0625rem 0.4375rem;
+  border-radius: 999px;
+}
+
+.hook-chevron {
+  color: var(--text-muted);
+  transition: transform 0.2s;
+  flex-shrink: 0;
+  transform: rotate(-90deg);
+}
+
+.hook-chevron.expanded {
+  transform: rotate(0deg);
+}
+
+.hook-section-body {
+  border-top: 1px solid var(--border-color);
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-primary);
+}
+
+/* Hook entries */
+.hook-entry {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  gap: 0.5rem;
+}
+
+.hook-entry + .hook-entry {
+  border-top: 1px solid var(--border-color);
+}
+
+.hook-entry-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.hook-matcher,
+.hook-command-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  padding: 0.125rem 0;
+}
+
+.entry-label {
+  font-size: 0.5625rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  min-width: 55px;
+  flex-shrink: 0;
+}
+
+.hook-entry code {
+  font-size: 0.6875rem;
+  color: var(--text-secondary);
+  font-family: 'Consolas', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hook-timeout {
+  font-size: 0.625rem;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.hook-entry-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  padding-top: 0.125rem;
+}
+
+.btn-link {
+  background: none;
+  border: none;
+  color: #6366f1;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 0;
+}
+
+.btn-link:hover {
+  text-decoration: underline;
+}
+
+.btn-link.danger {
+  color: #ef4444;
+}
+
+/* Edit form */
+.hook-edit-form {
+  width: 100%;
+  padding: 0.5rem 0;
+}
+
+.form-row {
+  margin-bottom: 0.5rem;
+}
+
+.form-row label {
+  display: block;
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: 0.1875rem;
+  text-transform: uppercase;
+}
+
+.form-row input,
+.form-row textarea {
+  width: 100%;
+  padding: 0.3125rem 0.5rem;
+  font-size: 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  outline: none;
+  font-family: 'Consolas', monospace;
+  box-sizing: border-box;
+}
+
+.form-row input:focus,
+.form-row textarea:focus {
+  border-color: #6366f1;
+}
+
+.form-row-actions {
+  display: flex;
+  gap: 0.375rem;
+  justify-content: flex-end;
+}
+
+.hook-empty {
+  padding: 0.5rem 0;
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.hook-add-btn {
+  background: none;
+  border: none;
+  color: #6366f1;
+  font-size: 0.6875rem;
+  cursor: pointer;
+  padding: 0.375rem 0;
+  width: 100%;
+  text-align: center;
+}
+
+.hook-add-btn:hover {
+  text-decoration: underline;
+}
+
+/* Buttons */
+.btn {
+  padding: 0.3125rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn-xs {
+  padding: 0.1875rem 0.5rem;
+  font-size: 0.6875rem;
+}
+
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.btn-primary {
+  background: #6366f1;
+  color: white;
+  border-color: #6366f1;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #4f46e5;
+  border-color: #4f46e5;
+}
+</style>
diff --git a/frontend/src/components/agents/McpManager.vue b/frontend/src/components/agents/McpManager.vue
new file mode 100644
index 0000000..ecd57bb
--- /dev/null
+++ b/frontend/src/components/agents/McpManager.vue
@@ -0,0 +1,560 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAgentsStore } from '../../stores/agents'
+import type { McpServerEntry } from '../../stores/agents'
+
+const store = useAgentsStore()
+const showAddModal = ref(false)
+const editingServer = ref<string | null>(null)
+
+const newServer = ref<McpServerEntry>({
+  name: '',
+  type: 'stdio',
+  command: '',
+  args: [],
+  url: '',
+  env: {},
+  enabled: true
+})
+
+const argsText = ref('')
+const envText = ref('')
+
+function resetForm() {
+  newServer.value = { name: '', type: 'stdio', command: '', args: [], url: '', env: {}, enabled: true }
+  argsText.value = ''
+  envText.value = ''
+  editingServer.value = null
+}
+
+function openAddModal() {
+  resetForm()
+  showAddModal.value = true
+}
+
+function openEditModal(server: McpServerEntry) {
+  newServer.value = { ...server, args: [...(server.args || [])], env: { ...(server.env || {}) } }
+  argsText.value = (server.args || []).join('\n')
+  envText.value = Object.entries(server.env || {}).map(([k, v]) => `${k}=${v}`).join('\n')
+  editingServer.value = server.name
+  showAddModal.value = true
+}
+
+function saveServer() {
+  if (!newServer.value.name.trim()) return
+
+  // Parse args from text
+  newServer.value.args = argsText.value.split('\n').map(s => s.trim()).filter(Boolean)
+
+  // Parse env from text
+  const env: Record<string, string> = {}
+  for (const line of envText.value.split('\n')) {
+    const eq = line.indexOf('=')
+    if (eq > 0) {
+      env[line.slice(0, eq).trim()] = line.slice(eq + 1).trim()
+    }
+  }
+  newServer.value.env = env
+
+  if (editingServer.value) {
+    // Update existing
+    const idx = store.mcpServers.findIndex(s => s.name === editingServer.value)
+    if (idx >= 0) {
+      store.mcpServers[idx] = { ...newServer.value }
+    }
+  } else {
+    store.addMcpServer({ ...newServer.value })
+  }
+
+  showAddModal.value = false
+  resetForm()
+}
+
+function deleteServer(name: string) {
+  store.removeMcpServer(name)
+}
+</script>
+
+<template>
+  <div class="mcp-manager">
+    <!-- Header -->
+    <div class="mcp-header">
+      <div class="mcp-header-left">
+        <h3>MCP Servers</h3>
+        <span class="mcp-count">{{ store.mcpServers.length }} servers</span>
+        <span class="mcp-path">.mcp.json</span>
+      </div>
+      <div class="mcp-header-right">
+        <button class="btn btn-secondary" @click="openAddModal">+ Add Server</button>
+        <button
+          class="btn btn-primary"
+          :disabled="store.saving"
+          @click="store.saveMcpServers()"
+        >{{ store.saving ? 'Saving...' : 'Save' }}</button>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="store.mcpsLoading" class="mcp-loading">Loading MCP servers...</div>
+
+    <!-- Error -->
+    <div v-if="store.error" class="mcp-error">{{ store.error }}</div>
+
+    <!-- Server cards -->
+    <div v-if="!store.mcpsLoading" class="mcp-scroll">
+      <div class="server-grid">
+        <div v-for="server in store.mcpServers" :key="server.name" class="server-card">
+          <div class="server-card-header">
+            <div class="server-info">
+              <span class="server-name">{{ server.name }}</span>
+              <span class="server-type-badge" :class="server.type">{{ server.type }}</span>
+            </div>
+            <div class="server-actions">
+              <button
+                class="toggle-btn"
+                :class="{ enabled: server.enabled }"
+                @click="store.toggleMcpServer(server.name)"
+                :title="server.enabled ? 'Disable' : 'Enable'"
+              >
+                <span class="toggle-dot"></span>
+              </button>
+            </div>
+          </div>
+
+          <div class="server-card-body">
+            <div v-if="server.command" class="server-detail">
+              <span class="detail-label">Command</span>
+              <code>{{ server.command }}</code>
+            </div>
+            <div v-if="server.args?.length" class="server-detail">
+              <span class="detail-label">Args</span>
+              <code>{{ server.args.join(' ') }}</code>
+            </div>
+            <div v-if="server.url" class="server-detail">
+              <span class="detail-label">URL</span>
+              <code>{{ server.url }}</code>
+            </div>
+            <div v-if="server.env && Object.keys(server.env).length" class="server-detail">
+              <span class="detail-label">Env</span>
+              <span class="env-count">{{ Object.keys(server.env).length }} vars</span>
+            </div>
+          </div>
+
+          <div class="server-card-footer">
+            <button class="btn-link" @click="openEditModal(server)">Edit</button>
+            <button class="btn-link danger" @click="deleteServer(server.name)">Delete</button>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="!store.mcpServers.length" class="mcp-empty">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
+        <p>No MCP servers configured</p>
+        <span>Add a server to get started</span>
+      </div>
+    </div>
+
+    <!-- Add/Edit Modal -->
+    <div v-if="showAddModal" class="modal-overlay" @click.self="showAddModal = false">
+      <div class="modal">
+        <div class="modal-header">
+          <h4>{{ editingServer ? 'Edit Server' : 'Add MCP Server' }}</h4>
+          <button class="modal-close" @click="showAddModal = false">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div class="form-group">
+            <label>Name</label>
+            <input type="text" v-model="newServer.name" placeholder="my-server" :disabled="!!editingServer" />
+          </div>
+          <div class="form-group">
+            <label>Type</label>
+            <select v-model="newServer.type">
+              <option value="stdio">stdio</option>
+              <option value="sse">sse</option>
+              <option value="streamable-http">streamable-http</option>
+            </select>
+          </div>
+          <div v-if="newServer.type === 'stdio'" class="form-group">
+            <label>Command</label>
+            <input type="text" v-model="newServer.command" placeholder="npx" />
+          </div>
+          <div v-if="newServer.type === 'stdio'" class="form-group">
+            <label>Args (one per line)</label>
+            <textarea v-model="argsText" placeholder="arg1&#10;arg2" rows="3"></textarea>
+          </div>
+          <div v-if="newServer.type !== 'stdio'" class="form-group">
+            <label>URL</label>
+            <input type="text" v-model="newServer.url" placeholder="http://localhost:3000" />
+          </div>
+          <div class="form-group">
+            <label>Environment (KEY=value, one per line)</label>
+            <textarea v-model="envText" placeholder="API_KEY=xxx" rows="2"></textarea>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="showAddModal = false">Cancel</button>
+          <button class="btn btn-primary" @click="saveServer">{{ editingServer ? 'Update' : 'Add' }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mcp-manager {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.mcp-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  gap: 1rem;
+  flex-shrink: 0;
+}
+
+.mcp-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.mcp-header-left h3 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.mcp-count {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  padding: 0.125rem 0.5rem;
+  background: var(--bg-hover);
+  border-radius: 999px;
+}
+
+.mcp-path {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  font-family: 'Consolas', monospace;
+}
+
+.mcp-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.mcp-loading,
+.mcp-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+}
+
+.mcp-empty span {
+  font-size: 0.6875rem;
+  opacity: 0.6;
+}
+
+.mcp-error {
+  padding: 0.625rem 1.25rem;
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  font-size: 0.8125rem;
+  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.mcp-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 1.25rem;
+}
+
+/* Server grid */
+.server-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 0.75rem;
+}
+
+.server-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.server-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.server-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.server-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.server-type-badge {
+  font-size: 0.5625rem;
+  font-weight: 600;
+  padding: 0.0625rem 0.375rem;
+  border-radius: 999px;
+  text-transform: uppercase;
+}
+
+.server-type-badge.stdio { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
+.server-type-badge.sse { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
+.server-type-badge.streamable-http { background: rgba(16, 185, 129, 0.12); color: #10b981; }
+
+.server-actions {
+  display: flex;
+  gap: 0.375rem;
+}
+
+.toggle-btn {
+  width: 36px;
+  height: 20px;
+  border-radius: 10px;
+  border: none;
+  background: var(--bg-hover);
+  cursor: pointer;
+  position: relative;
+  transition: background 0.2s;
+}
+
+.toggle-btn.enabled {
+  background: #22c55e;
+}
+
+.toggle-dot {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: white;
+  transition: transform 0.2s;
+}
+
+.toggle-btn.enabled .toggle-dot {
+  transform: translateX(16px);
+}
+
+.server-card-body {
+  padding: 0.625rem 0.75rem;
+}
+
+.server-detail {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  padding: 0.1875rem 0;
+}
+
+.detail-label {
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  min-width: 60px;
+  flex-shrink: 0;
+}
+
+.server-detail code {
+  font-size: 0.6875rem;
+  color: var(--text-secondary);
+  font-family: 'Consolas', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.env-count {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+
+.server-card-footer {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.btn-link {
+  background: none;
+  border: none;
+  color: #6366f1;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 0;
+}
+
+.btn-link:hover {
+  text-decoration: underline;
+}
+
+.btn-link.danger {
+  color: #ef4444;
+}
+
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.modal {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  width: 480px;
+  max-height: 80vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.modal-header h4 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding: 0 0.25rem;
+  line-height: 1;
+}
+
+.modal-body {
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.form-group {
+  margin-bottom: 0.75rem;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 0.25rem;
+  text-transform: uppercase;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.8125rem;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  outline: none;
+  font-family: 'Consolas', monospace;
+  box-sizing: border-box;
+}
+
+.form-group textarea {
+  resize: vertical;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  border-color: #6366f1;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--border-color);
+}
+
+/* Buttons */
+.btn {
+  padding: 0.3125rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.btn-primary {
+  background: #6366f1;
+  color: white;
+  border-color: #6366f1;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #4f46e5;
+  border-color: #4f46e5;
+}
+</style>
diff --git a/frontend/src/components/agents/PluginsManager.vue b/frontend/src/components/agents/PluginsManager.vue
new file mode 100644
index 0000000..c311f19
--- /dev/null
+++ b/frontend/src/components/agents/PluginsManager.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { useAgentsStore } from '../../stores/agents'
+
+const store = useAgentsStore()
+</script>
+
+<template>
+  <div class="plugins-manager">
+    <!-- Header -->
+    <div class="plugins-header">
+      <div class="plugins-header-left">
+        <h3>Global Plugins</h3>
+        <span class="plugins-count">{{ store.plugins.length }} plugins</span>
+        <span class="plugins-path">~/.claude/plugins/marketplaces/</span>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="store.pluginsLoading" class="plugins-loading">Loading plugins...</div>
+
+    <!-- Error -->
+    <div v-if="store.error" class="plugins-error">{{ store.error }}</div>
+
+    <!-- Plugin cards -->
+    <div v-if="!store.pluginsLoading" class="plugins-scroll">
+      <div class="plugin-grid">
+        <div v-for="plugin in store.plugins" :key="plugin.name" class="plugin-card">
+          <div class="plugin-card-header">
+            <div class="plugin-info">
+              <span class="plugin-name">{{ plugin.name }}</span>
+              <span class="plugin-installed" v-if="plugin.installed">Installed</span>
+            </div>
+          </div>
+          <div class="plugin-card-body">
+            <p v-if="plugin.description" class="plugin-desc">{{ plugin.description }}</p>
+            <div v-if="plugin.author" class="plugin-meta">
+              <span class="meta-label">Author</span>
+              <span class="meta-value">{{ plugin.author }}</span>
+            </div>
+            <div v-if="plugin.mcpConfig" class="plugin-meta">
+              <span class="meta-label">MCP</span>
+              <span class="meta-value">{{ typeof plugin.mcpConfig === 'object' ? JSON.stringify(plugin.mcpConfig).slice(0, 80) : plugin.mcpConfig }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="!store.plugins.length" class="plugins-empty">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
+        </svg>
+        <p>No plugins installed</p>
+        <span>Plugins from ~/.claude/plugins/marketplaces/ will appear here</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.plugins-manager {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.plugins-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.plugins-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.plugins-header-left h3 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.plugins-count {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  padding: 0.125rem 0.5rem;
+  background: var(--bg-hover);
+  border-radius: 999px;
+}
+
+.plugins-path {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  font-family: 'Consolas', monospace;
+}
+
+.plugins-loading,
+.plugins-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+}
+
+.plugins-empty span {
+  font-size: 0.6875rem;
+  opacity: 0.6;
+}
+
+.plugins-error {
+  padding: 0.625rem 1.25rem;
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  font-size: 0.8125rem;
+  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.plugins-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 1.25rem;
+}
+
+.plugin-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 0.75rem;
+}
+
+.plugin-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.plugin-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.plugin-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.plugin-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.plugin-installed {
+  font-size: 0.5625rem;
+  font-weight: 600;
+  padding: 0.0625rem 0.375rem;
+  border-radius: 999px;
+  background: rgba(34, 197, 94, 0.12);
+  color: #22c55e;
+  text-transform: uppercase;
+}
+
+.plugin-card-body {
+  padding: 0.625rem 0.75rem;
+}
+
+.plugin-desc {
+  margin: 0 0 0.5rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
+.plugin-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  padding: 0.125rem 0;
+}
+
+.meta-label {
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  min-width: 50px;
+  flex-shrink: 0;
+}
+
+.meta-value {
+  font-size: 0.6875rem;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/frontend/src/components/agents/SkillsManager.vue b/frontend/src/components/agents/SkillsManager.vue
new file mode 100644
index 0000000..e45a3f9
--- /dev/null
+++ b/frontend/src/components/agents/SkillsManager.vue
@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import { useAgentsStore } from '../../stores/agents'
+import type { SkillEntry } from '../../stores/agents'
+
+const store = useAgentsStore()
+
+function selectSkill(skill: SkillEntry) {
+  store.selectedSkill = skill
+}
+</script>
+
+<template>
+  <div class="skills-manager">
+    <!-- Header -->
+    <div class="skills-header">
+      <h3>Skills</h3>
+      <span class="skills-count">{{ store.skills.length }} skills</span>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="store.skillsLoading" class="skills-loading">Loading skills...</div>
+
+    <!-- Error -->
+    <div v-if="store.error" class="skills-error">{{ store.error }}</div>
+
+    <!-- Two-column layout -->
+    <div v-if="!store.skillsLoading" class="skills-layout">
+      <!-- Left: skills list -->
+      <aside class="skills-list">
+        <button
+          v-for="skill in store.skills"
+          :key="skill.name"
+          class="skill-item"
+          :class="{ active: store.selectedSkill?.name === skill.name }"
+          @click="selectSkill(skill)"
+        >
+          <div class="skill-item-main">
+            <span class="skill-name">{{ skill.name }}</span>
+            <span v-if="skill.references.length" class="skill-refs">{{ skill.references.length }} files</span>
+          </div>
+          <p v-if="skill.description" class="skill-desc">{{ skill.description }}</p>
+        </button>
+
+        <div v-if="!store.skills.length" class="skills-empty-list">
+          <p>No skills found</p>
+          <span>Add a SKILL.md to .claude/skills/*/</span>
+        </div>
+      </aside>
+
+      <!-- Right: skill detail -->
+      <main class="skill-detail">
+        <template v-if="store.selectedSkill">
+          <div class="skill-detail-header">
+            <h4>{{ store.selectedSkill.name }}</h4>
+            <span class="skill-detail-path" :title="store.selectedSkill.path">{{ store.selectedSkill.path }}</span>
+          </div>
+
+          <!-- SKILL.md content -->
+          <div class="skill-md-content">
+            <pre>{{ store.selectedSkill.skillMdContent }}</pre>
+          </div>
+
+          <!-- References -->
+          <div v-if="store.selectedSkill.references.length" class="skill-references">
+            <h5>Referenced Files</h5>
+            <div class="ref-list">
+              <div v-for="ref in store.selectedSkill.references" :key="ref.name" class="ref-item">
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
+                </svg>
+                <span>{{ ref.name }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <div v-else class="skill-detail-empty">
+          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
+          </svg>
+          <p>Select a skill to view details</p>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.skills-manager {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.skills-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.skills-header h3 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.skills-count {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  padding: 0.125rem 0.5rem;
+  background: var(--bg-hover);
+  border-radius: 999px;
+}
+
+.skills-loading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+}
+
+.skills-error {
+  padding: 0.625rem 1.25rem;
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  font-size: 0.8125rem;
+  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+/* Two-column layout */
+.skills-layout {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.skills-list {
+  width: 280px;
+  min-width: 280px;
+  border-right: 1px solid var(--border-color);
+  overflow-y: auto;
+  background: var(--bg-secondary);
+}
+
+.skill-item {
+  width: 100%;
+  display: block;
+  padding: 0.625rem 0.875rem;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+.skill-item:hover {
+  background: var(--bg-hover);
+}
+
+.skill-item.active {
+  background: rgba(99, 102, 241, 0.08);
+}
+
+.skill-item-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.skill-name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.skill-refs {
+  font-size: 0.625rem;
+  color: var(--text-muted);
+  padding: 0.0625rem 0.375rem;
+  background: var(--bg-hover);
+  border-radius: 999px;
+  flex-shrink: 0;
+}
+
+.skill-desc {
+  margin: 0.25rem 0 0;
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.skills-empty-list {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.skills-empty-list p {
+  margin: 0 0 0.25rem;
+  font-size: 0.8125rem;
+}
+
+.skills-empty-list span {
+  font-size: 0.6875rem;
+  opacity: 0.6;
+}
+
+/* Skill detail */
+.skill-detail {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-primary);
+}
+
+.skill-detail-header {
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+}
+
+.skill-detail-header h4 {
+  margin: 0 0 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.skill-detail-path {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  font-family: 'Consolas', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+
+.skill-md-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 1.25rem;
+}
+
+.skill-md-content pre {
+  margin: 0;
+  font-size: 0.8125rem;
+  font-family: 'Consolas', 'Monaco', monospace;
+  color: var(--text-primary);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.skill-references {
+  border-top: 1px solid var(--border-color);
+  padding: 0.75rem 1.25rem;
+  background: var(--bg-secondary);
+}
+
+.skill-references h5 {
+  margin: 0 0 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+}
+
+.ref-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.ref-item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.ref-item svg {
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.skill-detail-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  color: var(--text-muted);
+}
+
+.skill-detail-empty p {
+  font-size: 0.875rem;
+  margin: 0;
+}
+</style>
diff --git a/frontend/src/components/agents/ToolsManager.vue b/frontend/src/components/agents/ToolsManager.vue
new file mode 100644
index 0000000..28dad9e
--- /dev/null
+++ b/frontend/src/components/agents/ToolsManager.vue
@@ -0,0 +1,484 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAgentsStore } from '../../stores/agents'
+import type { ToolEntry } from '../../stores/agents'
+
+const store = useAgentsStore()
+const newRuleFor = ref<string | null>(null)
+const newRuleValue = ref('')
+
+function statusColor(status: string): string {
+  if (status === 'allow') return '#22c55e'
+  if (status === 'deny') return '#ef4444'
+  return 'var(--text-muted)'
+}
+
+function statusLabel(status: string): string {
+  if (status === 'allow') return 'Allow'
+  if (status === 'deny') return 'Deny'
+  return 'Ask'
+}
+
+function submitRule(toolKey: string) {
+  if (newRuleValue.value.trim()) {
+    store.addToolRule(toolKey, newRuleValue.value.trim())
+    newRuleValue.value = ''
+    newRuleFor.value = null
+  }
+}
+
+function isParameterizable(name: string): boolean {
+  return ['Bash', 'WebFetch', 'Skill', 'WebSearch'].includes(name)
+}
+</script>
+
+<template>
+  <div class="tools-manager">
+    <!-- Header -->
+    <div class="tools-header">
+      <div class="tools-header-left">
+        <h3>Tool Permissions</h3>
+        <span class="tools-count">{{ store.filteredTools.length }} tools</span>
+        <span v-if="store.configFile" class="config-path">{{ store.configFile }}</span>
+      </div>
+      <div class="tools-header-right">
+        <input
+          type="text"
+          class="tools-search"
+          placeholder="Filter tools..."
+          v-model="store.toolsFilter"
+        />
+        <button
+          class="btn btn-primary"
+          :disabled="!store.configDirty || store.saving"
+          @click="store.savePermissions()"
+        >{{ store.saving ? 'Saving...' : 'Save Permissions' }}</button>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="store.toolsLoading" class="tools-loading">Loading tools...</div>
+
+    <!-- Error -->
+    <div v-if="store.error" class="tools-error">{{ store.error }}</div>
+
+    <!-- Tools list -->
+    <div v-if="!store.toolsLoading" class="tools-scroll">
+      <!-- Base tools -->
+      <div v-if="store.toolsByCategory.base.length" class="tool-group">
+        <div class="tool-group-header">
+          <span class="tool-group-label">Base Tools</span>
+          <span class="tool-group-count">{{ store.toolsByCategory.base.length }}</span>
+        </div>
+
+        <div class="tool-cards">
+          <div v-for="tool in store.toolsByCategory.base" :key="tool.fullKey" class="tool-card">
+            <div class="tool-card-main">
+              <div class="tool-info">
+                <span class="tool-name">{{ tool.name }}</span>
+                <span class="tool-badge base">base</span>
+              </div>
+              <button
+                class="status-toggle"
+                :style="{ '--status-color': statusColor(tool.status) }"
+                @click="store.cycleToolStatus(tool.fullKey)"
+                :title="`Click to cycle: ${tool.status}`"
+              >
+                <span class="status-dot" :class="tool.status"></span>
+                <span class="status-text">{{ statusLabel(tool.status) }}</span>
+              </button>
+            </div>
+
+            <!-- Rules for parameterizable tools -->
+            <div v-if="isParameterizable(tool.name) && tool.status !== 'ask'" class="tool-rules">
+              <div v-for="(rule, idx) in tool.rules" :key="idx" class="rule-item">
+                <code>{{ tool.name }}({{ rule }})</code>
+                <button class="rule-remove" @click="store.removeToolRule(tool.fullKey, rule)">&times;</button>
+              </div>
+              <div v-if="newRuleFor === tool.fullKey" class="rule-add-form">
+                <input
+                  type="text"
+                  class="rule-input"
+                  v-model="newRuleValue"
+                  placeholder="e.g. git:* or domain:example.com"
+                  @keydown.enter="submitRule(tool.fullKey)"
+                  @keydown.escape="newRuleFor = null"
+                />
+                <button class="btn-sm" @click="submitRule(tool.fullKey)">Add</button>
+              </div>
+              <button v-else class="rule-add-btn" @click="newRuleFor = tool.fullKey; newRuleValue = ''">
+                + Add rule
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- MCP tools grouped by server -->
+      <div
+        v-for="(tools, server) in store.toolsByCategory.mcpGroups"
+        :key="server"
+        class="tool-group"
+      >
+        <div class="tool-group-header">
+          <span class="tool-group-label">MCP: {{ server }}</span>
+          <span class="tool-group-count">{{ tools.length }}</span>
+        </div>
+
+        <div class="tool-cards">
+          <div v-for="tool in tools" :key="tool.fullKey" class="tool-card">
+            <div class="tool-card-main">
+              <div class="tool-info">
+                <span class="tool-name">{{ tool.name }}</span>
+                <span class="tool-badge mcp">mcp</span>
+                <span v-if="tool.host" class="tool-host">{{ tool.host }}</span>
+              </div>
+              <button
+                class="status-toggle"
+                :style="{ '--status-color': statusColor(tool.status) }"
+                @click="store.cycleToolStatus(tool.fullKey)"
+                :title="`Click to cycle: ${tool.status}`"
+              >
+                <span class="status-dot" :class="tool.status"></span>
+                <span class="status-text">{{ statusLabel(tool.status) }}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Empty state -->
+      <div v-if="!store.toolsByCategory.base.length && !Object.keys(store.toolsByCategory.mcpGroups).length" class="tools-empty">
+        <p>No tools found</p>
+        <span>Tool permissions will appear here when configured</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tools-manager {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.tools-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  gap: 1rem;
+  flex-shrink: 0;
+}
+
+.tools-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.tools-header-left h3 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.tools-count {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  padding: 0.125rem 0.5rem;
+  background: var(--bg-hover);
+  border-radius: 999px;
+}
+
+.config-path {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  font-family: 'Consolas', monospace;
+}
+
+.tools-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tools-search {
+  padding: 0.3125rem 0.75rem;
+  font-size: 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  outline: none;
+  width: 200px;
+}
+
+.tools-search:focus {
+  border-color: #6366f1;
+}
+
+.tools-loading,
+.tools-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+}
+
+.tools-empty span {
+  font-size: 0.6875rem;
+  opacity: 0.6;
+}
+
+.tools-error {
+  padding: 0.625rem 1.25rem;
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+  font-size: 0.8125rem;
+  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.tools-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 1.25rem;
+}
+
+/* Tool groups */
+.tool-group {
+  margin-bottom: 1.5rem;
+}
+
+.tool-group-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.tool-group-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-secondary);
+}
+
+.tool-group-count {
+  font-size: 0.625rem;
+  padding: 0.0625rem 0.375rem;
+  background: var(--bg-hover);
+  border-radius: 999px;
+  color: var(--text-muted);
+}
+
+/* Tool cards */
+.tool-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.tool-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.tool-card-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  gap: 0.5rem;
+}
+
+.tool-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.tool-name {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  font-family: 'Consolas', monospace;
+}
+
+.tool-badge {
+  font-size: 0.5625rem;
+  font-weight: 600;
+  padding: 0.0625rem 0.375rem;
+  border-radius: 999px;
+  text-transform: uppercase;
+}
+
+.tool-badge.base {
+  background: rgba(99, 102, 241, 0.12);
+  color: #6366f1;
+}
+
+.tool-badge.mcp {
+  background: rgba(139, 92, 246, 0.12);
+  color: #8b5cf6;
+}
+
+.tool-host {
+  font-size: 0.625rem;
+  color: var(--text-muted);
+  font-family: 'Consolas', monospace;
+}
+
+/* Status toggle */
+.status-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  background: transparent;
+  border: 1px solid var(--border-color);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+
+.status-toggle:hover {
+  background: var(--bg-hover);
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  transition: background 0.15s;
+}
+
+.status-dot.allow { background: #22c55e; }
+.status-dot.deny { background: #ef4444; }
+.status-dot.ask { background: var(--text-muted); }
+
+.status-text {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+/* Rules */
+.tool-rules {
+  padding: 0.375rem 0.75rem 0.5rem;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-primary);
+}
+
+.rule-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.1875rem 0;
+}
+
+.rule-item code {
+  font-size: 0.6875rem;
+  color: var(--text-secondary);
+  font-family: 'Consolas', monospace;
+}
+
+.rule-remove {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.875rem;
+  padding: 0 0.25rem;
+  line-height: 1;
+}
+
+.rule-remove:hover {
+  color: #ef4444;
+}
+
+.rule-add-form {
+  display: flex;
+  gap: 0.375rem;
+  margin-top: 0.25rem;
+}
+
+.rule-input {
+  flex: 1;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.6875rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  outline: none;
+  font-family: 'Consolas', monospace;
+}
+
+.rule-input:focus {
+  border-color: #6366f1;
+}
+
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.6875rem;
+  background: #6366f1;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.rule-add-btn {
+  background: none;
+  border: none;
+  color: #6366f1;
+  font-size: 0.6875rem;
+  cursor: pointer;
+  padding: 0.25rem 0;
+}
+
+.rule-add-btn:hover {
+  text-decoration: underline;
+}
+
+.btn {
+  padding: 0.3125rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: #6366f1;
+  color: white;
+  border-color: #6366f1;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #4f46e5;
+  border-color: #4f46e5;
+}
+</style>
diff --git a/frontend/src/pages/AgentsPage.vue b/frontend/src/pages/AgentsPage.vue
index a7d14ad..9efd16c 100644
--- a/frontend/src/pages/AgentsPage.vue
+++ b/frontend/src/pages/AgentsPage.vue
@@ -1,18 +1,42 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, watch } from 'vue'
 import { useAgentsStore, CATEGORY_META, formatSize } from '../stores/agents'
+import type { AgentTab } from '../stores/agents'
+import ToolsManager from '../components/agents/ToolsManager.vue'
+import McpManager from '../components/agents/McpManager.vue'
+import PluginsManager from '../components/agents/PluginsManager.vue'
+import HooksManager from '../components/agents/HooksManager.vue'
+import SkillsManager from '../components/agents/SkillsManager.vue'
 
 const store = useAgentsStore()
 
+const tabs: { key: AgentTab; label: string; icon: string }[] = [
+  { key: 'files', label: 'Files', icon: 'M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z|M14 2v6h6' },
+  { key: 'tools', label: 'Tools', icon: 'M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z' },
+  { key: 'mcps', label: 'MCPs', icon: 'M22 12h-4l-3 9L9 3l-3 9H2' },
+  { key: 'plugins', label: 'Plugins', icon: 'M12 2L2 7l10 5 10-5-10-5z|M2 17l10 5 10-5|M2 12l10 5 10-5' },
+  { key: 'hooks', label: 'Hooks', icon: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71|M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' },
+  { key: 'skills', label: 'Skills', icon: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z|M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z' }
+]
+
 function handleKeydown(e: KeyboardEvent) {
   if ((e.ctrlKey || e.metaKey) && e.key === 's') {
     e.preventDefault()
-    if (store.isDirty) store.saveFile()
+    if (store.activeTab === 'files' && store.isDirty) store.saveFile()
+    else if (store.activeTab === 'tools' && store.configDirty) store.savePermissions()
+    else if (store.activeTab === 'hooks') store.saveHooks()
+    else if (store.activeTab === 'mcps') store.saveMcpServers()
+  }
+}
+
+function switchTab(tab: AgentTab) {
+  store.activeTab = tab
+  if (tab !== 'files') {
+    store.loadTabData()
   }
 }
 
 function shortPath(path: string): string {
-  // Remove the agent directory prefix to show just the meaningful part
   const parts = path.split('/')
   if (parts.length <= 2) return parts[parts.length - 1]
   return parts.slice(1).join('/')
@@ -30,9 +54,8 @@ onUnmounted(() => {
 
 <template>
   <div class="agents-page">
-    <!-- Sidebar -->
-    <aside class="agents-sidebar">
-      <!-- Agent tabs -->
+    <!-- Top bar: agent selector + main tabs -->
+    <div class="agents-topbar">
       <div class="agent-tabs">
         <button
           v-for="agent in store.agents"
@@ -46,124 +69,154 @@ onUnmounted(() => {
         </button>
       </div>
 
-      <!-- Loading -->
-      <div v-if="store.loading" class="sidebar-loading">Loading agents...</div>
+      <nav class="main-tabs">
+        <button
+          v-for="tab in tabs"
+          :key="tab.key"
+          class="main-tab"
+          :class="{ active: store.activeTab === tab.key }"
+          @click="switchTab(tab.key)"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
+            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          >
+            <path v-for="(d, i) in tab.icon.split('|')" :key="i" :d="d"/>
+          </svg>
+          <span>{{ tab.label }}</span>
+        </button>
+      </nav>
+    </div>
 
-      <!-- Category groups -->
-      <div v-else-if="store.selectedAgent" class="category-list">
-        <div v-for="cat in store.groupedFiles" :key="cat.key" class="category-group">
-          <button class="category-header" @click="store.toggleCategory(cat.key)">
-            <svg
-              class="category-icon"
-              xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
-              fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-              :style="{ color: cat.color }"
-            >
-              <path v-for="(d, i) in cat.icon.split('|')" :key="i" :d="d"/>
-            </svg>
-            <span class="category-label">{{ cat.label }}</span>
-            <span class="category-count" :style="{ background: cat.color + '18', color: cat.color }">{{ cat.files.length }}</span>
-            <svg
-              class="category-chevron"
-              :class="{ collapsed: store.collapsedCategories.has(cat.key) }"
-              xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
-              fill="none" stroke="currentColor" stroke-width="2"
-            >
-              <polyline points="6 9 12 15 18 9"/>
-            </svg>
-          </button>
+    <!-- Files tab: sidebar + editor -->
+    <div v-if="store.activeTab === 'files'" class="files-layout">
+      <aside class="agents-sidebar">
+        <!-- Loading -->
+        <div v-if="store.loading" class="sidebar-loading">Loading agents...</div>
 
-          <div v-if="!store.collapsedCategories.has(cat.key)" class="category-files">
-            <button
-              v-for="file in cat.files"
-              :key="file.path"
-              class="file-row"
-              :class="{ active: store.openFile?.path === file.path }"
-              @click="store.loadFile(store.selectedAgentId!, file)"
-              :title="file.path"
-            >
-              <span class="file-type-dot" :style="{ background: cat.color }"></span>
-              <span class="file-label">{{ shortPath(file.path) }}</span>
-              <span class="file-size">{{ formatSize(file.size) }}</span>
-              <span v-if="store.openFile?.path === file.path && store.isDirty" class="unsaved-dot"></span>
+        <!-- Category groups -->
+        <div v-else-if="store.selectedAgent" class="category-list">
+          <div v-for="cat in store.groupedFiles" :key="cat.key" class="category-group">
+            <button class="category-header" @click="store.toggleCategory(cat.key)">
+              <svg
+                class="category-icon"
+                xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                :style="{ color: cat.color }"
+              >
+                <path v-for="(d, i) in cat.icon.split('|')" :key="i" :d="d"/>
+              </svg>
+              <span class="category-label">{{ cat.label }}</span>
+              <span class="category-count" :style="{ background: cat.color + '18', color: cat.color }">{{ cat.files.length }}</span>
+              <svg
+                class="category-chevron"
+                :class="{ collapsed: store.collapsedCategories.has(cat.key) }"
+                xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
+                fill="none" stroke="currentColor" stroke-width="2"
+              >
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
             </button>
+
+            <div v-if="!store.collapsedCategories.has(cat.key)" class="category-files">
+              <button
+                v-for="file in cat.files"
+                :key="file.path"
+                class="file-row"
+                :class="{ active: store.openFile?.path === file.path }"
+                @click="store.loadFile(store.selectedAgentId!, file)"
+                :title="file.path"
+              >
+                <span class="file-type-dot" :style="{ background: cat.color }"></span>
+                <span class="file-label">{{ shortPath(file.path) }}</span>
+                <span class="file-size">{{ formatSize(file.size) }}</span>
+                <span v-if="store.openFile?.path === file.path && store.isDirty" class="unsaved-dot"></span>
+              </button>
+            </div>
           </div>
+
+          <div v-if="!store.groupedFiles.length" class="sidebar-empty">No files found</div>
         </div>
+      </aside>
 
-        <div v-if="!store.groupedFiles.length" class="sidebar-empty">No files found</div>
-      </div>
-    </aside>
+      <main class="editor-panel">
+        <template v-if="store.openFile">
+          <div class="editor-header">
+            <div class="editor-title">
+              <span
+                class="editor-cat-dot"
+                :style="{ background: CATEGORY_META[store.openFile.category]?.color }"
+              ></span>
+              <span class="editor-path">{{ store.openFile.path }}</span>
+              <span v-if="store.isDirty" class="unsaved-badge">Unsaved</span>
+            </div>
+            <div class="editor-actions">
+              <button
+                class="btn btn-secondary"
+                :disabled="!store.isDirty"
+                @click="store.revertFile()"
+              >Revert</button>
+              <button
+                class="btn btn-primary"
+                :disabled="!store.isDirty || store.saving"
+                @click="store.saveFile()"
+              >{{ store.saving ? 'Saving...' : 'Save' }}</button>
+            </div>
+          </div>
 
-    <!-- Editor -->
-    <main class="editor-panel">
-      <template v-if="store.openFile">
-        <div class="editor-header">
-          <div class="editor-title">
-            <span
-              class="editor-cat-dot"
-              :style="{ background: CATEGORY_META[store.openFile.category]?.color }"
-            ></span>
-            <span class="editor-path">{{ store.openFile.path }}</span>
-            <span v-if="store.isDirty" class="unsaved-badge">Unsaved</span>
-          </div>
-          <div class="editor-actions">
-            <button
-              class="btn btn-secondary"
-              :disabled="!store.isDirty"
-              @click="store.revertFile()"
-            >Revert</button>
-            <button
-              class="btn btn-primary"
-              :disabled="!store.isDirty || store.saving"
-              @click="store.saveFile()"
-            >{{ store.saving ? 'Saving...' : 'Save' }}</button>
-          </div>
+          <div v-if="store.error" class="editor-error">{{ store.error }}</div>
+
+          <textarea
+            class="editor-textarea"
+            v-model="store.openFile.content"
+            spellcheck="false"
+          ></textarea>
+        </template>
+
+        <div v-else class="editor-empty">
+          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
+            <polyline points="14 2 14 8 20 8"/>
+          </svg>
+          <p>Select a file to view or edit</p>
+          <span class="editor-hint">Ctrl+S to save</span>
         </div>
+      </main>
+    </div>
 
-        <div v-if="store.error" class="editor-error">{{ store.error }}</div>
-
-        <textarea
-          class="editor-textarea"
-          v-model="store.openFile.content"
-          spellcheck="false"
-        ></textarea>
-      </template>
-
-      <div v-else class="editor-empty">
-        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
-          <polyline points="14 2 14 8 20 8"/>
-        </svg>
-        <p>Select a file to view or edit</p>
-        <span class="editor-hint">Ctrl+S to save</span>
-      </div>
-    </main>
+    <!-- Other tabs: full-width components -->
+    <div v-if="store.activeTab !== 'files'" class="tab-content">
+      <ToolsManager v-if="store.activeTab === 'tools'" />
+      <McpManager v-if="store.activeTab === 'mcps'" />
+      <PluginsManager v-if="store.activeTab === 'plugins'" />
+      <HooksManager v-if="store.activeTab === 'hooks'" />
+      <SkillsManager v-if="store.activeTab === 'skills'" />
+    </div>
   </div>
 </template>
 
 <style scoped>
 .agents-page {
   display: flex;
+  flex-direction: column;
   flex: 1;
   overflow: hidden;
 }
 
-/* ── Sidebar ── */
-.agents-sidebar {
-  width: 320px;
-  min-width: 320px;
-  background: var(--bg-secondary);
-  border-right: 1px solid var(--border-color);
+/* ── Top bar ── */
+.agents-topbar {
   display: flex;
-  flex-direction: column;
-  overflow: hidden;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
 }
 
-/* Agent tabs */
 .agent-tabs {
   display: flex;
   gap: 2px;
-  padding: 0.75rem 0.75rem 0;
   overflow-x: auto;
   flex-shrink: 0;
 }
@@ -172,11 +225,10 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   gap: 0.375rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.625rem;
   background: transparent;
   border: 1px solid transparent;
-  border-bottom: none;
-  border-radius: 8px 8px 0 0;
+  border-radius: 6px;
   color: var(--text-muted);
   font-size: 0.75rem;
   font-weight: 500;
@@ -216,12 +268,69 @@ onUnmounted(() => {
   color: #6366f1;
 }
 
+/* Main tabs */
+.main-tabs {
+  display: flex;
+  gap: 2px;
+  margin-left: auto;
+  border-left: 1px solid var(--border-color);
+  padding-left: 0.75rem;
+}
+
+.main-tab {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.625rem;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--text-muted);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s;
+}
+
+.main-tab:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.main-tab.active {
+  color: #6366f1;
+  background: rgba(99, 102, 241, 0.08);
+  border-color: rgba(99, 102, 241, 0.2);
+  font-weight: 600;
+}
+
+.main-tab svg {
+  flex-shrink: 0;
+}
+
+/* ── Files layout ── */
+.files-layout {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.agents-sidebar {
+  width: 320px;
+  min-width: 320px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 /* Category list */
 .category-list {
   flex: 1;
   overflow-y: auto;
   padding: 0.5rem 0;
-  border-top: 1px solid var(--border-color);
 }
 
 .category-group {
@@ -485,4 +594,11 @@ onUnmounted(() => {
   font-size: 0.6875rem;
   opacity: 0.5;
 }
+
+/* ── Tab content ── */
+.tab-content {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+}
 </style>
diff --git a/frontend/src/stores/agents.ts b/frontend/src/stores/agents.ts
index ed9962c..b51acc9 100644
--- a/frontend/src/stores/agents.ts
+++ b/frontend/src/stores/agents.ts
@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 
+// ── Existing types ──
+
 type FileCategory = 'config' | 'instructions' | 'plugins' | 'history' | 'debug' | 'cache' | 'sessions' | 'backups' | 'other'
 
 interface AgentFile {
@@ -31,11 +33,80 @@ interface OpenFile {
 export interface CategoryInfo {
   key: FileCategory
   label: string
-  icon: string    // SVG path
+  icon: string
   color: string
   files: AgentFile[]
 }
 
+// ── New types for config management ──
+
+type PermissionStatus = 'allow' | 'deny' | 'ask'
+type AgentTab = 'files' | 'tools' | 'mcps' | 'plugins' | 'hooks' | 'skills'
+type HookEventType = 'UserPromptSubmit' | 'PreToolUse' | 'PostToolUse' | 'SessionStart' | 'Stop' | 'Notification' | 'PermissionRequest'
+
+interface ParsedPermission {
+  raw: string
+  tool: string
+  params: string | null
+  category: 'base' | 'mcp'
+  server?: string
+  host?: string
+}
+
+interface ToolEntry {
+  name: string
+  fullKey: string
+  category: 'base' | 'mcp'
+  server?: string
+  host?: string
+  status: PermissionStatus
+  rules: string[]
+}
+
+interface McpServerEntry {
+  name: string
+  type: string
+  command?: string
+  args?: string[]
+  url?: string
+  env?: Record<string, string>
+  enabled: boolean
+}
+
+interface HookCommand {
+  type: string
+  command: string
+  timeout?: number
+}
+
+interface HookEntry {
+  matcher: string | null
+  hooks: HookCommand[]
+}
+
+interface SkillEntry {
+  name: string
+  description: string
+  path: string
+  skillMdContent: string
+  references: { name: string; path: string }[]
+}
+
+interface PluginEntry {
+  name: string
+  description: string
+  author: string
+  mcpConfig: any
+  installed: boolean
+}
+
+// ── Constants ──
+
+const HOOK_EVENT_TYPES: HookEventType[] = [
+  'UserPromptSubmit', 'PreToolUse', 'PostToolUse',
+  'SessionStart', 'Stop', 'Notification', 'PermissionRequest'
+]
+
 const CATEGORY_META: Record<FileCategory, { label: string; icon: string; color: string; order: number }> = {
   config:       { label: 'Configuration',   icon: 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z|M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0-6 0', color: '#6366f1', order: 0 },
   instructions: { label: 'Instructions',    icon: 'M4 19.5A2.5 2.5 0 0 1 6.5 17H20|M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z', color: '#3b82f6', order: 1 },
@@ -48,8 +119,8 @@ const CATEGORY_META: Record<FileCategory, { label: string; icon: string; color:
   other:        { label: 'Other files',     icon: 'M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z|M14 2v6h6', color: '#78716c', order: 8 }
 }
 
-export { CATEGORY_META }
-export type { FileCategory, AgentFile, Agent }
+export { CATEGORY_META, HOOK_EVENT_TYPES }
+export type { FileCategory, AgentFile, Agent, AgentTab, HookEventType, ToolEntry, McpServerEntry, HookEntry, HookCommand, SkillEntry, PluginEntry, ParsedPermission, PermissionStatus }
 
 function formatSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`
@@ -60,6 +131,7 @@ function formatSize(bytes: number): string {
 export { formatSize }
 
 export const useAgentsStore = defineStore('agents', () => {
+  // ── Existing state ──
   const agents = ref<Agent[]>([])
   const selectedAgentId = ref<string | null>(null)
   const openFile = ref<OpenFile | null>(null)
@@ -68,6 +140,39 @@ export const useAgentsStore = defineStore('agents', () => {
   const error = ref<string | null>(null)
   const collapsedCategories = ref<Set<string>>(new Set())
 
+  // ── New state: tab ──
+  const activeTab = ref<AgentTab>('files')
+
+  // ── New state: tools ──
+  const toolEntries = ref<ToolEntry[]>([])
+  const toolsFilter = ref('')
+  const toolsLoading = ref(false)
+
+  // ── New state: MCP servers ──
+  const mcpServers = ref<McpServerEntry[]>([])
+  const mcpsLoading = ref(false)
+  const enableAllProjectMcpServers = ref(false)
+  const enabledMcpjsonServers = ref<string[]>([])
+
+  // ── New state: hooks ──
+  const hooksConfig = ref<Record<string, HookEntry[]>>({})
+  const hooksLoading = ref(false)
+  const expandedHookTypes = ref<Set<string>>(new Set())
+
+  // ── New state: skills ──
+  const skills = ref<SkillEntry[]>([])
+  const skillsLoading = ref(false)
+  const selectedSkill = ref<SkillEntry | null>(null)
+
+  // ── New state: plugins ──
+  const plugins = ref<PluginEntry[]>([])
+  const pluginsLoading = ref(false)
+
+  // ── New state: config metadata ──
+  const configFile = ref('')
+  const configDirty = ref(false)
+
+  // ── Existing computed ──
   const isDirty = computed(() => {
     if (!openFile.value) return false
     return openFile.value.content !== openFile.value.originalContent
@@ -100,6 +205,35 @@ export const useAgentsStore = defineStore('agents', () => {
       .sort((a, b) => CATEGORY_META[a.key].order - CATEGORY_META[b.key].order)
   })
 
+  // ── New computed ──
+  const filteredTools = computed(() => {
+    if (!toolsFilter.value) return toolEntries.value
+    const q = toolsFilter.value.toLowerCase()
+    return toolEntries.value.filter(t =>
+      t.name.toLowerCase().includes(q) ||
+      t.fullKey.toLowerCase().includes(q) ||
+      (t.server && t.server.toLowerCase().includes(q))
+    )
+  })
+
+  const toolsByCategory = computed(() => {
+    const base: ToolEntry[] = []
+    const mcpGroups: Record<string, ToolEntry[]> = {}
+
+    for (const tool of filteredTools.value) {
+      if (tool.category === 'base') {
+        base.push(tool)
+      } else {
+        const key = tool.server || 'unknown'
+        if (!mcpGroups[key]) mcpGroups[key] = []
+        mcpGroups[key].push(tool)
+      }
+    }
+
+    return { base, mcpGroups }
+  })
+
+  // ── Existing actions ──
   async function fetchAgents() {
     loading.value = true
     error.value = null
@@ -120,6 +254,10 @@ export const useAgentsStore = defineStore('agents', () => {
   function selectAgent(id: string) {
     selectedAgentId.value = id
     openFile.value = null
+    // Reload config for new agent when on config tabs
+    if (activeTab.value !== 'files') {
+      loadTabData()
+    }
   }
 
   async function loadFile(agentId: string, file: AgentFile) {
@@ -183,7 +321,408 @@ export const useAgentsStore = defineStore('agents', () => {
     }
   }
 
+  // ── New actions: tab data loading ──
+
+  async function loadTabData() {
+    const tab = activeTab.value
+    if (tab === 'tools') await fetchConfig()
+    else if (tab === 'mcps') await fetchMcpJson()
+    else if (tab === 'hooks') await fetchConfig()
+    else if (tab === 'skills') await fetchSkills()
+    else if (tab === 'plugins') await fetchPlugins()
+  }
+
+  async function fetchConfig() {
+    toolsLoading.value = true
+    hooksLoading.value = true
+    error.value = null
+    try {
+      const agentId = selectedAgentId.value || 'main'
+      const [configRes, knownRes] = await Promise.all([
+        fetch(`/api/agents/config?agentId=${encodeURIComponent(agentId)}`),
+        fetch('/api/agents/known-tools')
+      ])
+
+      if (!configRes.ok) throw new Error('Failed to fetch config')
+      if (!knownRes.ok) throw new Error('Failed to fetch known tools')
+
+      const config = await configRes.json()
+      const known = await knownRes.json()
+
+      configFile.value = config.configFile
+      enableAllProjectMcpServers.value = config.enableAllProjectMcpServers
+      enabledMcpjsonServers.value = config.enabledMcpjsonServers
+
+      // Build tool entries from known tools + permissions
+      buildToolEntries(config, known)
+
+      // Build hooks config
+      hooksConfig.value = config.hooks || {}
+    } catch (e: any) {
+      error.value = e.message
+    } finally {
+      toolsLoading.value = false
+      hooksLoading.value = false
+    }
+  }
+
+  function buildToolEntries(config: any, known: any) {
+    const entries: ToolEntry[] = []
+    const allowMap = new Map<string, ParsedPermission>()
+    const denyMap = new Map<string, ParsedPermission>()
+
+    // Index permissions by tool name
+    for (const p of config.permissions.allow) {
+      allowMap.set(p.raw, p)
+    }
+    for (const p of config.permissions.deny) {
+      denyMap.set(p.raw, p)
+    }
+
+    // Base tools
+    for (const toolName of known.baseTools) {
+      // Find all allow/deny entries for this base tool
+      const allowRules: string[] = []
+      const denyRules: string[] = []
+      let hasSimpleAllow = false
+      let hasSimpleDeny = false
+
+      for (const [raw, p] of allowMap) {
+        if (p.tool === toolName) {
+          if (p.params) allowRules.push(p.params)
+          else hasSimpleAllow = true
+        }
+      }
+      for (const [raw, p] of denyMap) {
+        if (p.tool === toolName) {
+          if (p.params) denyRules.push(p.params)
+          else hasSimpleDeny = true
+        }
+      }
+
+      let status: PermissionStatus = 'ask'
+      if (hasSimpleAllow || allowRules.length > 0) status = 'allow'
+      if (hasSimpleDeny || denyRules.length > 0) status = 'deny'
+      // If both exist, allow takes precedence (list first)
+      if (hasSimpleAllow) status = 'allow'
+
+      entries.push({
+        name: toolName,
+        fullKey: toolName,
+        category: 'base',
+        status,
+        rules: allowRules.length ? allowRules : denyRules
+      })
+    }
+
+    // MCP tools from known discovery
+    for (const [server, hosts] of Object.entries(known.mcpTools as Record<string, Record<string, string[]>>)) {
+      for (const [host, tools] of Object.entries(hosts)) {
+        for (const toolName of tools) {
+          const fullKey = `mcp__${server.replace(/-/g, '_')}__${host}-${toolName}`
+          const isAllowed = allowMap.has(fullKey)
+          const isDenied = denyMap.has(fullKey)
+
+          entries.push({
+            name: toolName,
+            fullKey,
+            category: 'mcp',
+            server: server.replace(/_/g, '-'),
+            host,
+            status: isAllowed ? 'allow' : isDenied ? 'deny' : 'ask',
+            rules: []
+          })
+        }
+      }
+    }
+
+    // Also add any permission entries that weren't in known tools
+    const allKnownKeys = new Set(entries.map(e => e.fullKey))
+    for (const [raw, p] of allowMap) {
+      if (!allKnownKeys.has(raw) && !p.params) {
+        entries.push({
+          name: p.tool,
+          fullKey: raw,
+          category: p.category,
+          server: p.server,
+          host: p.host,
+          status: 'allow',
+          rules: []
+        })
+      }
+    }
+    for (const [raw, p] of denyMap) {
+      if (!allKnownKeys.has(raw) && !p.params) {
+        entries.push({
+          name: p.tool,
+          fullKey: raw,
+          category: p.category,
+          server: p.server,
+          host: p.host,
+          status: 'deny',
+          rules: []
+        })
+      }
+    }
+
+    toolEntries.value = entries
+    configDirty.value = false
+  }
+
+  // ── Tool actions ──
+
+  function setToolStatus(toolName: string, status: PermissionStatus) {
+    const tool = toolEntries.value.find(t => t.fullKey === toolName || t.name === toolName)
+    if (tool) {
+      tool.status = status
+      if (status === 'ask') tool.rules = []
+      configDirty.value = true
+    }
+  }
+
+  function cycleToolStatus(toolName: string) {
+    const tool = toolEntries.value.find(t => t.fullKey === toolName || t.name === toolName)
+    if (!tool) return
+    const cycle: PermissionStatus[] = ['ask', 'allow', 'deny']
+    const idx = cycle.indexOf(tool.status)
+    tool.status = cycle[(idx + 1) % 3]
+    if (tool.status === 'ask') tool.rules = []
+    configDirty.value = true
+  }
+
+  function addToolRule(toolName: string, rule: string) {
+    const tool = toolEntries.value.find(t => t.fullKey === toolName || t.name === toolName)
+    if (tool && !tool.rules.includes(rule)) {
+      tool.rules.push(rule)
+      configDirty.value = true
+    }
+  }
+
+  function removeToolRule(toolName: string, rule: string) {
+    const tool = toolEntries.value.find(t => t.fullKey === toolName || t.name === toolName)
+    if (tool) {
+      tool.rules = tool.rules.filter(r => r !== rule)
+      configDirty.value = true
+    }
+  }
+
+  async function savePermissions() {
+    saving.value = true
+    error.value = null
+    try {
+      const allow: string[] = []
+      const deny: string[] = []
+
+      for (const tool of toolEntries.value) {
+        if (tool.status === 'allow') {
+          if (tool.rules.length > 0) {
+            for (const rule of tool.rules) {
+              allow.push(`${tool.name}(${rule})`)
+            }
+          } else {
+            allow.push(tool.category === 'mcp' ? tool.fullKey : tool.name)
+          }
+        } else if (tool.status === 'deny') {
+          if (tool.rules.length > 0) {
+            for (const rule of tool.rules) {
+              deny.push(`${tool.name}(${rule})`)
+            }
+          } else {
+            deny.push(tool.category === 'mcp' ? tool.fullKey : tool.name)
+          }
+        }
+      }
+
+      const res = await fetch('/api/agents/config/permissions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          agentId: selectedAgentId.value || 'main',
+          permissions: { allow, deny }
+        })
+      })
+
+      if (!res.ok) throw new Error('Failed to save permissions')
+      configDirty.value = false
+    } catch (e: any) {
+      error.value = e.message
+    } finally {
+      saving.value = false
+    }
+  }
+
+  // ── MCP actions ──
+
+  async function fetchMcpJson() {
+    mcpsLoading.value = true
+    error.value = null
+    try {
+      const [mcpRes, configRes] = await Promise.all([
+        fetch('/api/agents/mcp-json'),
+        fetch(`/api/agents/config?agentId=${encodeURIComponent(selectedAgentId.value || 'main')}`)
+      ])
+      if (!mcpRes.ok) throw new Error('Failed to fetch MCP config')
+
+      const mcpData = await mcpRes.json()
+      const configData = configRes.ok ? await configRes.json() : {}
+
+      enableAllProjectMcpServers.value = configData.enableAllProjectMcpServers ?? false
+      enabledMcpjsonServers.value = configData.enabledMcpjsonServers || []
+
+      const servers: McpServerEntry[] = []
+      const mcpServersObj = mcpData.mcpServers || {}
+      for (const [name, config] of Object.entries(mcpServersObj as Record<string, any>)) {
+        servers.push({
+          name,
+          type: config.type || 'stdio',
+          command: config.command,
+          args: config.args,
+          url: config.url,
+          env: config.env,
+          enabled: enableAllProjectMcpServers.value || enabledMcpjsonServers.value.includes(name)
+        })
+      }
+      mcpServers.value = servers
+    } catch (e: any) {
+      error.value = e.message
+    } finally {
+      mcpsLoading.value = false
+    }
+  }
+
+  async function saveMcpServers() {
+    saving.value = true
+    error.value = null
+    try {
+      const mcpServersObj: Record<string, any> = {}
+      for (const s of mcpServers.value) {
+        const entry: any = { type: s.type }
+        if (s.command) entry.command = s.command
+        if (s.args?.length) entry.args = s.args
+        if (s.url) entry.url = s.url
+        if (s.env && Object.keys(s.env).length) entry.env = s.env
+        mcpServersObj[s.name] = entry
+      }
+
+      const res = await fetch('/api/agents/config/mcp', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ mcpServers: mcpServersObj })
+      })
+      if (!res.ok) throw new Error('Failed to save MCP config')
+    } catch (e: any) {
+      error.value = e.message
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function addMcpServer(server: McpServerEntry) {
+    mcpServers.value.push(server)
+  }
+
+  function removeMcpServer(name: string) {
+    mcpServers.value = mcpServers.value.filter(s => s.name !== name)
+  }
+
+  function toggleMcpServer(name: string) {
+    const server = mcpServers.value.find(s => s.name === name)
+    if (server) server.enabled = !server.enabled
+  }
+
+  // ── Hooks actions ──
+
+  async function saveHooks() {
+    saving.value = true
+    error.value = null
+    try {
+      const res = await fetch('/api/agents/config/hooks', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          agentId: selectedAgentId.value || 'main',
+          hooks: hooksConfig.value
+        })
+      })
+      if (!res.ok) throw new Error('Failed to save hooks')
+    } catch (e: any) {
+      error.value = e.message
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function addHook(eventType: string) {
+    if (!hooksConfig.value[eventType]) {
+      hooksConfig.value[eventType] = []
+    }
+    hooksConfig.value[eventType].push({
+      matcher: null,
+      hooks: [{ type: 'command', command: '', timeout: 5000 }]
+    })
+  }
+
+  function removeHook(eventType: string, index: number) {
+    if (hooksConfig.value[eventType]) {
+      hooksConfig.value[eventType].splice(index, 1)
+      if (hooksConfig.value[eventType].length === 0) {
+        delete hooksConfig.value[eventType]
+      }
+    }
+  }
+
+  function updateHook(eventType: string, index: number, entry: HookEntry) {
+    if (hooksConfig.value[eventType]?.[index]) {
+      hooksConfig.value[eventType][index] = entry
+    }
+  }
+
+  function toggleHookType(eventType: string) {
+    if (expandedHookTypes.value.has(eventType)) {
+      expandedHookTypes.value.delete(eventType)
+    } else {
+      expandedHookTypes.value.add(eventType)
+    }
+  }
+
+  // ── Skills actions ──
+
+  async function fetchSkills() {
+    skillsLoading.value = true
+    error.value = null
+    try {
+      const agentId = selectedAgentId.value || 'main'
+      const res = await fetch(`/api/agents/skills?agentId=${encodeURIComponent(agentId)}`)
+      if (!res.ok) throw new Error('Failed to fetch skills')
+      skills.value = await res.json()
+      if (skills.value.length && !selectedSkill.value) {
+        selectedSkill.value = skills.value[0]
+      }
+    } catch (e: any) {
+      error.value = e.message
+    } finally {
+      skillsLoading.value = false
+    }
+  }
+
+  // ── Plugins actions ──
+
+  async function fetchPlugins() {
+    pluginsLoading.value = true
+    error.value = null
+    try {
+      const res = await fetch('/api/agents/plugins')
+      if (!res.ok) throw new Error('Failed to fetch plugins')
+      plugins.value = await res.json()
+    } catch (e: any) {
+      error.value = e.message
+    } finally {
+      pluginsLoading.value = false
+    }
+  }
+
   return {
+    // Existing
     agents,
     selectedAgentId,
     selectedAgent,
@@ -199,6 +738,59 @@ export const useAgentsStore = defineStore('agents', () => {
     loadFile,
     saveFile,
     revertFile,
-    toggleCategory
+    toggleCategory,
+
+    // New: tab
+    activeTab,
+
+    // New: tools
+    toolEntries,
+    toolsFilter,
+    toolsLoading,
+    filteredTools,
+    toolsByCategory,
+    setToolStatus,
+    cycleToolStatus,
+    addToolRule,
+    removeToolRule,
+    savePermissions,
+
+    // New: MCP
+    mcpServers,
+    mcpsLoading,
+    enableAllProjectMcpServers,
+    enabledMcpjsonServers,
+    fetchMcpJson,
+    saveMcpServers,
+    addMcpServer,
+    removeMcpServer,
+    toggleMcpServer,
+
+    // New: hooks
+    hooksConfig,
+    hooksLoading,
+    expandedHookTypes,
+    saveHooks,
+    addHook,
+    removeHook,
+    updateHook,
+    toggleHookType,
+
+    // New: skills
+    skills,
+    skillsLoading,
+    selectedSkill,
+    fetchSkills,
+
+    // New: plugins
+    plugins,
+    pluginsLoading,
+    fetchPlugins,
+
+    // New: config metadata
+    configFile,
+    configDirty,
+    fetchConfig,
+    loadTabData
   }
 })
diff --git a/server/routes/agents.ts b/server/routes/agents.ts
index 43ebf7a..1b3c030 100644
--- a/server/routes/agents.ts
+++ b/server/routes/agents.ts
@@ -1,6 +1,7 @@
 import { jsonResponse, errorResponse } from '../utils/cors'
-import { existsSync, readdirSync, readFileSync, statSync } from 'fs'
+import { existsSync, readdirSync, readFileSync, statSync, mkdirSync, writeFileSync } from 'fs'
 import { join, resolve, basename } from 'path'
+import { homedir } from 'os'
 
 const PROJECT_ROOT = resolve(import.meta.dir, '../..')
 
@@ -18,6 +19,22 @@ const SKIP_DIRS = ['.git']
 // Sensitive files blocked from read/write via API
 const BLOCKED_FILES = ['.credentials.json']
 
+// Base tool names known to Claude Code
+const BASE_TOOLS = [
+  'Read', 'Edit', 'Write', 'Bash', 'Grep', 'Glob',
+  'WebFetch', 'WebSearch', 'Task', 'NotebookEdit',
+  'Skill', 'EnterPlanMode', 'ExitPlanMode', 'AskUserQuestion',
+  'TodoRead', 'TodoWrite'
+]
+
+// Hook event types
+type HookEventType = 'UserPromptSubmit' | 'PreToolUse' | 'PostToolUse' | 'SessionStart' | 'Stop' | 'Notification' | 'PermissionRequest'
+
+const HOOK_EVENT_TYPES: HookEventType[] = [
+  'UserPromptSubmit', 'PreToolUse', 'PostToolUse',
+  'SessionStart', 'Stop', 'Notification', 'PermissionRequest'
+]
+
 type FileCategory = 'config' | 'instructions' | 'plugins' | 'history' | 'debug' | 'cache' | 'sessions' | 'backups' | 'other'
 
 interface AgentFile {
@@ -46,6 +63,53 @@ interface Agent {
   uiConfig: UiConfig | null
 }
 
+interface ParsedPermission {
+  raw: string
+  tool: string
+  params: string | null
+  category: 'base' | 'mcp'
+  server?: string
+  host?: string
+}
+
+// ── Permission string parser ──
+
+function parsePermission(raw: string): ParsedPermission {
+  // MCP tools: mcp__<server>__<host>-<toolName>
+  const mcpMatch = raw.match(/^mcp__([^_]+(?:_[^_]+)?)__([^-]+)-(.+)$/)
+  if (mcpMatch) {
+    return {
+      raw,
+      tool: mcpMatch[3],
+      params: null,
+      category: 'mcp',
+      server: mcpMatch[1].replace(/_/g, '-'),
+      host: mcpMatch[2]
+    }
+  }
+
+  // Parameterized: Tool(params)
+  const paramMatch = raw.match(/^(\w+)\((.+)\)$/)
+  if (paramMatch) {
+    return {
+      raw,
+      tool: paramMatch[1],
+      params: paramMatch[2],
+      category: BASE_TOOLS.includes(paramMatch[1]) ? 'base' : 'mcp'
+    }
+  }
+
+  // Simple: ToolName
+  return {
+    raw,
+    tool: raw,
+    params: null,
+    category: BASE_TOOLS.includes(raw) ? 'base' : 'mcp'
+  }
+}
+
+// ── File utilities ──
+
 function getFileType(filename: string): AgentFile['type'] {
   if (filename.endsWith('.jsonl')) return 'jsonl'
   if (filename.endsWith('.json')) return 'json'
@@ -54,21 +118,15 @@ function getFileType(filename: string): AgentFile['type'] {
 }
 
 function categorizeFile(relPath: string, filename: string): FileCategory {
-  // Backups first (most specific)
   if (filename.includes('.backup')) return 'backups'
-
-  // By directory
   if (relPath.includes('/plugins/')) return 'plugins'
   if (relPath.includes('/debug/')) return 'debug'
   if (relPath.includes('/cache/')) return 'cache'
   if (relPath.includes('/session-env/') || relPath.includes('/shell-snapshots/') || relPath.includes('/todos/') || relPath.includes('/projects/')) return 'sessions'
-
-  // By filename
   if (filename === 'history.jsonl') return 'history'
   if (filename.endsWith('.md')) return 'instructions'
   if (filename === 'settings.json' || filename === '.claude.json' || filename === '.mcp.json') return 'config'
   if (filename.endsWith('.json')) return 'config'
-
   return 'other'
 }
 
@@ -134,10 +192,46 @@ function readUiConfig(agentDir: string): UiConfig | null {
   }
 }
 
+function readJsonFile(path: string): any {
+  try {
+    if (!existsSync(path)) return null
+    return JSON.parse(readFileSync(path, 'utf-8'))
+  } catch {
+    return null
+  }
+}
+
+function writeJsonFile(path: string, data: any): void {
+  const dir = resolve(path, '..')
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true })
+  writeFileSync(path, JSON.stringify(data, null, 2) + '\n', 'utf-8')
+}
+
+// ── Config file targeting ──
+
+function getSettingsPath(agentId: string): string {
+  if (agentId === 'main') {
+    return join(PROJECT_ROOT, '.claude', 'settings.local.json')
+  }
+  return join(PROJECT_ROOT, `.claude-${agentId}`, 'settings.json')
+}
+
+function getSkillsDir(agentId: string): string {
+  if (agentId === 'main') {
+    return join(PROJECT_ROOT, '.claude', 'skills')
+  }
+  return join(PROJECT_ROOT, `.claude-${agentId}`, 'skills')
+}
+
+function getMcpJsonPath(): string {
+  return join(PROJECT_ROOT, '.mcp.json')
+}
+
+// ── Agent discovery ──
+
 function discoverAgents(): Agent[] {
   const agents: Agent[] = []
 
-  // Main agent (.claude/ + root files)
   const claudeDir = join(PROJECT_ROOT, '.claude')
   if (existsSync(claudeDir)) {
     const mainAgent: Agent = {
@@ -148,7 +242,6 @@ function discoverAgents(): Agent[] {
       uiConfig: readUiConfig(claudeDir)
     }
 
-    // Root CLAUDE.md
     const claudeMd = join(PROJECT_ROOT, 'CLAUDE.md')
     if (existsSync(claudeMd)) {
       const stat = statSync(claudeMd)
@@ -158,7 +251,6 @@ function discoverAgents(): Agent[] {
       })
     }
 
-    // Root .mcp.json
     const mcpJson = join(PROJECT_ROOT, '.mcp.json')
     if (existsSync(mcpJson)) {
       const stat = statSync(mcpJson)
@@ -171,7 +263,6 @@ function discoverAgents(): Agent[] {
     agents.push(mainAgent)
   }
 
-  // Other agents (.claude-*/)
   try {
     const rootEntries = readdirSync(PROJECT_ROOT)
     for (const entry of rootEntries) {
@@ -193,6 +284,147 @@ function discoverAgents(): Agent[] {
   return agents
 }
 
+// ── Skill discovery ──
+
+function discoverSkills(agentId: string): any[] {
+  const skills: any[] = []
+  const skillsDir = getSkillsDir(agentId)
+
+  if (!existsSync(skillsDir)) {
+    // Fallback for sub-agents: try main agent's skills dir
+    if (agentId !== 'main') {
+      const mainSkillsDir = getSkillsDir('main')
+      if (existsSync(mainSkillsDir)) {
+        return discoverSkillsFromDir(mainSkillsDir)
+      }
+    }
+    return skills
+  }
+
+  return discoverSkillsFromDir(skillsDir)
+}
+
+function discoverSkillsFromDir(dir: string): any[] {
+  const skills: any[] = []
+  if (!existsSync(dir)) return skills
+
+  try {
+    const entries = readdirSync(dir)
+    for (const entry of entries) {
+      const entryPath = join(dir, entry)
+      let stat
+      try { stat = statSync(entryPath) } catch { continue }
+
+      if (stat.isDirectory()) {
+        const skillMdPath = join(entryPath, 'SKILL.md')
+        if (existsSync(skillMdPath)) {
+          const content = readFileSync(skillMdPath, 'utf-8')
+          const nameMatch = content.match(/^#\s+(.+)/m)
+          const descMatch = content.match(/^(?:#+\s+.+\n+)(.+)/m)
+
+          // Find referenced files
+          const references: { name: string; path: string }[] = []
+          try {
+            const skillEntries = readdirSync(entryPath)
+            for (const se of skillEntries) {
+              if (se !== 'SKILL.md') {
+                references.push({ name: se, path: join(entryPath, se) })
+              }
+            }
+          } catch { /* ignore */ }
+
+          skills.push({
+            name: nameMatch ? nameMatch[1].trim() : entry,
+            description: descMatch ? descMatch[1].trim() : '',
+            path: entryPath,
+            skillMdContent: content,
+            references
+          })
+        }
+      }
+    }
+  } catch { /* ignore */ }
+
+  return skills
+}
+
+// ── Plugin discovery ──
+
+function discoverPlugins(): any[] {
+  const plugins: any[] = []
+  const pluginsDir = join(homedir(), '.claude', 'plugins', 'marketplaces')
+
+  if (!existsSync(pluginsDir)) return plugins
+
+  try {
+    const entries = readdirSync(pluginsDir)
+    for (const entry of entries) {
+      const entryPath = join(pluginsDir, entry)
+      let stat
+      try { stat = statSync(entryPath) } catch { continue }
+
+      if (stat.isDirectory()) {
+        // Look for plugin manifest (package.json or plugin.json)
+        const pkgPath = join(entryPath, 'package.json')
+        const pluginJsonPath = join(entryPath, 'plugin.json')
+
+        let manifest: any = readJsonFile(pkgPath) || readJsonFile(pluginJsonPath)
+        if (manifest) {
+          plugins.push({
+            name: manifest.name || entry,
+            description: manifest.description || '',
+            author: manifest.author || '',
+            mcpConfig: manifest.mcpConfig || manifest.mcp || null,
+            installed: true
+          })
+        } else {
+          plugins.push({
+            name: entry,
+            description: '',
+            author: '',
+            mcpConfig: null,
+            installed: true
+          })
+        }
+      }
+    }
+  } catch { /* ignore */ }
+
+  return plugins
+}
+
+// ── Known tools discovery ──
+
+function discoverKnownTools(): { baseTools: string[]; mcpTools: Record<string, Record<string, string[]>> } {
+  const mcpTools: Record<string, Record<string, string[]>> = {}
+  const agents = discoverAgents()
+
+  for (const agent of agents) {
+    const settings = readJsonFile(getSettingsPath(agent.id))
+    if (!settings?.permissions) continue
+
+    const allPerms = [
+      ...(settings.permissions.allow || []),
+      ...(settings.permissions.deny || [])
+    ]
+
+    for (const raw of allPerms) {
+      const parsed = parsePermission(raw)
+      if (parsed.category === 'mcp' && parsed.server && parsed.host) {
+        if (!mcpTools[parsed.server]) mcpTools[parsed.server] = {}
+        if (!mcpTools[parsed.server][parsed.host]) mcpTools[parsed.server][parsed.host] = []
+        if (!mcpTools[parsed.server][parsed.host].includes(parsed.tool)) {
+          mcpTools[parsed.server][parsed.host].push(parsed.tool)
+        }
+      }
+    }
+  }
+
+  return { baseTools: BASE_TOOLS, mcpTools }
+}
+
+// ── Handlers ──
+
 export async function handleAgents(req: Request): Promise<Response | null> {
   if (req.method !== 'GET') return null
   return jsonResponse(discoverAgents())
@@ -237,3 +469,103 @@ export async function handleAgentsFile(req: Request, url: URL): Promise<Response
 
   return null
 }
+
+export async function handleAgentsConfig(req: Request, url: URL): Promise<Response | null> {
+  if (req.method !== 'GET') return null
+
+  const agentId = url.searchParams.get('agentId') || 'main'
+  const settingsPath = getSettingsPath(agentId)
+  const settings = readJsonFile(settingsPath) || {}
+
+  const allowRaw: string[] = settings.permissions?.allow || []
+  const denyRaw: string[] = settings.permissions?.deny || []
+
+  return jsonResponse({
+    agentId,
+    configFile: settingsPath.replace(PROJECT_ROOT + '/', '').replace(PROJECT_ROOT + '\\', ''),
+    permissions: {
+      allow: allowRaw.map(parsePermission),
+      deny: denyRaw.map(parsePermission)
+    },
+    hooks: settings.hooks || {},
+    env: settings.env || {},
+    enableAllProjectMcpServers: settings.enableAllProjectMcpServers ?? false,
+    enabledMcpjsonServers: settings.enabledMcpjsonServers || []
+  })
+}
+
+export async function handleAgentsKnownTools(req: Request): Promise<Response | null> {
+  if (req.method !== 'GET') return null
+  return jsonResponse(discoverKnownTools())
+}
+
+export async function handleAgentsSkills(req: Request, url: URL): Promise<Response | null> {
+  if (req.method !== 'GET') return null
+  const agentId = url.searchParams.get('agentId') || 'main'
+  return jsonResponse(discoverSkills(agentId))
+}
+
+export async function handleAgentsPlugins(req: Request): Promise<Response | null> {
+  if (req.method !== 'GET') return null
+  return jsonResponse(discoverPlugins())
+}
+
+export async function handleAgentsMcpJson(req: Request): Promise<Response | null> {
+  if (req.method !== 'GET') return null
+  const mcpPath = getMcpJsonPath()
+  const data = readJsonFile(mcpPath)
+  return jsonResponse(data || { mcpServers: {} })
+}
+
+export async function handleAgentsConfigPermissions(req: Request): Promise<Response | null> {
+  if (req.method !== 'POST') return null
+
+  try {
+    const body = await req.json()
+    const agentId = body.agentId || 'main'
+    const settingsPath = getSettingsPath(agentId)
+    const settings = readJsonFile(settingsPath) || {}
+
+    settings.permissions = {
+      allow: body.permissions?.allow || [],
+      deny: body.permissions?.deny || []
+    }
+
+    writeJsonFile(settingsPath, settings)
+    return jsonResponse({ success: true })
+  } catch (e: any) {
+    return errorResponse(`Failed to save permissions: ${e.message}`, 500)
+  }
+}
+
+export async function handleAgentsConfigHooks(req: Request): Promise<Response | null> {
+  if (req.method !== 'POST') return null
+
+  try {
+    const body = await req.json()
+    const agentId = body.agentId || 'main'
+    const settingsPath = getSettingsPath(agentId)
+    const settings = readJsonFile(settingsPath) || {}
+
+    settings.hooks = body.hooks || {}
+
+    writeJsonFile(settingsPath, settings)
+    return jsonResponse({ success: true })
+  } catch (e: any) {
+    return errorResponse(`Failed to save hooks: ${e.message}`, 500)
+  }
+}
+
+export async function handleAgentsConfigMcp(req: Request): Promise<Response | null> {
+  if (req.method !== 'POST') return null
+
+  try {
+    const body = await req.json()
+    const mcpPath = getMcpJsonPath()
+
+    writeJsonFile(mcpPath, { mcpServers: body.mcpServers || {} })
+    return jsonResponse({ success: true })
+  } catch (e: any) {
+    return errorResponse(`Failed to save MCP config: ${e.message}`, 500)
+  }
+}