agent-ui/frontend/src/components/agents/PluginsManager.vue

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