@wipal/agent-team 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipal/agent-team",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "CLI tool to add AI agent teams to existing projects with specialized roles, skills, and workflows (v2.1 with OpenFang patterns)",
   "type": "module",
   "bin": {

package/src/ui/agents.html

@@ -33,8 +33,38 @@
 
         <!-- Agents List -->
         <section class="section">
-            <div id="agents-grid" hx-get="/api/agents" hx-trigger="load, refreshAgents from:body">
-                <div class="loading">Loading agents...</div>
+            <div id="agents-grid">
+                <div x-show="loadingAgents" class="loading">Loading agents...</div>
+                <div x-show="!loadingAgents && agents.length === 0" class="empty-state">
+                    <p>No agents yet. <a href="#" @click.prevent="openAddModal()">Add your first agent</a></p>
+                </div>
+                <template x-for="agent in agents" :key="agent.name">
+                    <div class="agent-card">
+                        <div class="agent-header">
+                            <span class="agent-name" x-text="agent.name"></span>
+                            <span class="agent-role" x-text="agent.variants?.base_role || 'unknown'"></span>
+                        </div>
+                        <div class="agent-variants">
+                            <template x-for="(value, key) in agent.variants" :key="key + 'variant-' + key">
+                                <template x-if="Array.isArray(value)">
+                                    <template x-for="v in value" :key="v">
+                                        <span class="variant-tag" x-text="key + ': ' + v"></span>
+                                    </template>
+                                <template x-else>
+                                    <span class="variant-tag" x-text="key + ': ' + value"></span>
+                                </template>
+                            </template>
+                        </div>
+                        <div class="agent-skills" x-show="agent.skills?.length">
+                            <template x-for="skill in agent.skills" :key="skill">
+                                <span class="skill-tag" x-text="skill"></span>
+                            </template>
+                        </div>
+                        <div class="agent-actions">
+                            <button class="btn btn-danger" @click="deleteAgent(agent.name)">Delete</button>
+                        </div>
+                    </div>
+                </template>
             </div>
         </section>
 
@@ -69,20 +99,39 @@
                         <small class="hint" x-show="selectedRoleDescription" x-text="selectedRoleDescription"></small>
                     </div>
 
-                    <!-- Step 3: Select Variants (Dropdowns) -->
+                    <!-- Step 3: Select Variants (Dropdowns or Checkboxes) -->
                     <div x-show="newAgent.role && Object.keys(variantCategories).length > 0" x-cloak class="variants-section">
                         <h3>Select Variants (Optional)</h3>
                         <template x-for="(category, key) in variantCategories" :key="key">
                             <div class="form-group">
                                 <label x-text="category.label"></label>
-                                <select class="input" @change="selectVariant(key, $event.target.value)">
-                                    <option value="">-- Select --</option>
-                                    <template x-for="option in category.options" :key="option.value">
-                                        <option :value="option.value"
-                                                :selected="newAgent.variants[key] === option.value"
-                                                x-text="option.label"></option>
-                                    </template>
-                                </select>
+
+                                <!-- Multi-select (checkbox type) -->
+                                <template x-if="category.type === 'checkbox'">
+                                    <div class="checkbox-group">
+                                        <template x-for="option in category.options" :key="option.value">
+                                            <label class="checkbox-label">
+                                                <input type="checkbox"
+                                                       :value="option.value"
+                                                       @change="selectVariant(key, option.value, true)"
+                                                       :checked="isVariantSelected(key, option.value)">
+                                                <span x-text="option.label"></span>
+                                            </label>
+                                        </template>
+                                    </div>
+                                </template>
+
+                                <!-- Single-select (select type) -->
+                                <template x-if="category.type !== 'checkbox'">
+                                    <select class="input" @change="selectVariant(key, $event.target.value, false)">
+                                        <option value="">-- Select --</option>
+                                        <template x-for="option in category.options" :key="option.value">
+                                            <option :value="option.value"
+                                                    :selected="newAgent.variants[key] === option.value"
+                                                    x-text="option.label"></option>
+                                        </template>
+                                    </select>
+                                </template>
                             </div>
                         </template>
                     </div>
@@ -118,9 +167,11 @@
         function agentApp() {
             return {
                 showAddModal: false,
+                loadingAgents: true,
                 loadingRoles: false,
                 loadingSkills: false,
                 creating: false,
+                agents: [],
                 roles: [],
                 variantCategories: {},
                 previewSkills: [],
@@ -130,6 +181,38 @@
                     variants: {}
                 },
 
+                async init() {
+                    await this.loadAgents();
+                },
+
+                async loadAgents() {
+                    this.loadingAgents = true;
+                    try {
+                        const response = await fetch('/api/agents');
+                        const data = await response.json();
+                        this.agents = data.agents || [];
+                    } catch (error) {
+                        console.error('Failed to load agents:', error);
+                    } finally {
+                        this.loadingAgents = false;
+                    }
+                },
+
+                async deleteAgent(name) {
+                    if (!confirm(`Delete agent "${name}"?`)) return;
+                    try {
+                        const response = await fetch(`/api/agents/${name}`, { method: 'DELETE' });
+                        if (response.ok) {
+                            await this.loadAgents();
+                        } else {
+                            const error = await response.json();
+                            alert('Failed to delete: ' + error.error);
+                        }
+                    } catch (error) {
+                        alert('Failed to delete agent: ' + error.message);
+                    }
+                },
+
                 get selectedRoleDescription() {
                     const role = this.roles.find(r => r.name === this.newAgent.role);
                     return role ? role.description : '';
@@ -178,12 +261,41 @@
                     }
                 },
 
-                async selectVariant(category, value) {
-                    if (value) {
-                        this.newAgent.variants[category] = value;
+                isVariantSelected(category, value) {
+                    const selected = this.newAgent.variants[category];
+                    if (Array.isArray(selected)) {
+                        return selected.includes(value);
+                    }
+                    return selected === value;
+                },
+
+                async selectVariant(category, value, isMulti = false) {
+                    if (isMulti) {
+                        // Multi-select: toggle value in array
+                        if (!this.newAgent.variants[category]) {
+                            this.newAgent.variants[category] = [];
+                        }
+
+                        const index = this.newAgent.variants[category].indexOf(value);
+                        if (index > -1) {
+                            // Remove if already selected
+                            this.newAgent.variants[category].splice(index, 1);
+                            if (this.newAgent.variants[category].length === 0) {
+                                delete this.newAgent.variants[category];
+                            }
+                        } else {
+                            // Add if not selected
+                            this.newAgent.variants[category].push(value);
+                        }
                     } else {
-                        delete this.newAgent.variants[category];
+                        // Single select: replace value
+                        if (value) {
+                            this.newAgent.variants[category] = value
+                        } else {
+                            delete this.newAgent.variants[category];
+                        }
                     }
+
                     // Update skills preview
                     await this.loadSkillsPreview();
                 },
@@ -224,7 +336,7 @@
                         if (response.ok) {
                             this.showAddModal = false;
                             this.resetForm();
-                            htmx.trigger(document.body, 'refreshAgents');
+                            await this.loadAgents();
                             alert('Agent created successfully!');
                         } else {
                             const error = await response.json();
@@ -241,7 +353,9 @@
                     this.newAgent = { name: '', role: '', variants: {} };
                     this.variantCategories = {};
                     this.previewSkills = [];
-                }
+                    // Force Alpine to re-render by reassigning
+                    this.$forceUpdate();
+                },
             }
         }
     </script>

package/src/ui/css/styles.css

@@ -497,6 +497,131 @@ body {
 /* Utility */
 [x-cloak] { display: none !important; }
 
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-muted);
+}
+
+.empty-state a {
+    color: var(--primary);
+}
+
+/* Compact agent card for dashboard */
+.agent-card-compact {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    background: var(--bg);
+    border-radius: 0.375rem;
+    margin-bottom: 0.5rem;
+}
+
+.agent-card-compact .agent-name {
+    font-weight: 500;
+}
+
+.agent-card-compact .agent-role {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+/* Roles preview grid */
+.roles-grid-preview {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 0.75rem;
+}
+
+.role-chip {
+    padding: 0.75rem 1rem;
+    background: var(--bg);
+    border-radius: 0.375rem;
+    border: 1px solid var(--border);
+}
+
+.role-chip strong {
+    display: block;
+    margin-bottom: 0.25rem;
+}
+
+.role-chip span {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+/* Agent variants in card */
+.agent-variants {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin: 0.5rem 0;
+}
+
+.variant-tag {
+    background: var(--bg);
+    padding: 0.125rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.7rem;
+    color: var(--text-muted);
+}
+
+/* Checkbox group for multi-select variants */
+.checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 0.375rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: all 0.2s;
+    user-select: none;
+}
+
+.checkbox-label:hover {
+    border-color: var(--primary);
+    background: rgba(59, 130, 246, 0.05);
+}
+
+.checkbox-label.checked {
+    background: var(--primary);
+    border-color: var(--primary);
+    color: white;
+}
+
+.checkbox-label input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+}
+
+/* Variant type badge */
+.variant-type-badge {
+    font-size: 0.65rem;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    background: var(--border);
+    color: var(--text-muted);
+    margin-left: 0.5rem;
+}
+
+.variant-type-badge.multi {
+    background: var(--success);
+    color: white;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
     .container {

package/src/ui/index.html

@@ -41,9 +41,18 @@
         </nav>
 
         <!-- Stats Cards -->
-        <div class="stats-grid" hx-get="/api/agents" hx-trigger="load, projectChanged from:body" hx-swap="innerHTML">
-            <!-- Loaded via HTMX -->
-            <div class="loading">Loading...</div>
+        <div class="stats-grid" x-data="statsCards()">
+            <template x-if="loading">
+                <div class="stat-card"><div class="loading">Loading...</div></div>
+            </template>
+            <template x-if="!loading">
+                <template x-for="stat in stats" :key="stat.label">
+                    <div class="stat-card">
+                        <div class="stat-value" x-text="stat.value"></div>
+                        <div class="stat-label" x-text="stat.label"></div>
+                    </div>
+                </template>
+            </template>
         </div>
 
         <!-- Quick Actions -->
@@ -65,16 +74,36 @@
         <!-- Recent Agents -->
         <section class="section">
             <h2>Your Agents</h2>
-            <div id="agents-list" hx-get="/api/agents" hx-trigger="load, projectChanged from:body">
-                <div class="loading">Loading agents...</div>
+            <div id="agents-list" x-data="dashboardAgents()">
+                <div x-show="loading" class="loading">Loading agents...</div>
+                <div x-show="!loading && agents.length === 0" class="empty-state">
+                    <p>No agents configured yet. <a href="/ui/agents.html?action=add">Add your first agent</a></p>
+                </div>
+                <template x-for="agent in agents" :key="agent.name">
+                    <div class="agent-card-compact">
+                        <span class="agent-name" x-text="agent.name"></span>
+                        <span class="agent-role" x-text="agent.variants?.base_role || 'unknown'"></span>
+                    </div>
+                </template>
+                <div x-show="!loading && agents.length > 0" style="margin-top: 1rem;">
+                    <a href="/ui/agents.html" class="btn btn-secondary">Manage Agents</a>
+                </div>
             </div>
         </section>
 
         <!-- Available Roles -->
         <section class="section">
             <h2>Available Roles</h2>
-            <div id="roles-list" hx-get="/api/agents/meta/roles" hx-trigger="load">
-                <div class="loading">Loading roles...</div>
+            <div id="roles-list" x-data="rolesPreview()">
+                <div x-show="loading" class="loading">Loading roles...</div>
+                <div class="roles-grid-preview">
+                    <template x-for="role in roles" :key="role.name">
+                        <div class="role-chip">
+                            <strong x-text="role.name"></strong>
+                            <span x-text="role.description"></span>
+                        </div>
+                    </template>
+                </div>
             </div>
         </section>
     </div>
@@ -141,44 +170,85 @@
             }
         }
 
-        // Transform stats response
-        document.body.addEventListener('htmx:beforeSwap', function(evt) {
-            if (evt.detail.pathInfo.requestPath === '/api/agents') {
-                // First load - render as stats
-                if (evt.detail.target.matches('.stats-grid')) {
+        // Dashboard Agents Alpine Component
+        function dashboardAgents() {
+            return {
+                agents: [],
+                loading: true,
+
+                async init() {
+                    await this.loadAgents();
+                    // Listen for project changes
+                    document.body.addEventListener('projectChanged', () => this.loadAgents());
+                },
+
+                async loadAgents() {
+                    this.loading = true;
                     try {
-                        const data = JSON.parse(evt.detail.xhr.response);
-                        const agents = data.agents || [];
-                        const statsHtml = renderStats(agents);
-                        evt.detail.swap = 'innerHTML';
-                        evt.detail.xhr.response = statsHtml;
-                    } catch (e) {}
+                        const response = await fetch('/api/agents');
+                        const data = await response.json();
+                        this.agents = data.agents || [];
+                    } catch (error) {
+                        console.error('Failed to load agents:', error);
+                    } finally {
+                        this.loading = false;
+                    }
                 }
             }
-        });
+        }
 
-        function renderStats(agents) {
-            const total = agents.length;
-            const roles = [...new Set(agents.map(a => a.variants?.base_role).filter(Boolean))];
+        // Roles Preview Alpine Component
+        function rolesPreview() {
+            return {
+                roles: [],
+                loading: true,
 
-            return `
-                <div class="stat-card">
-                    <div class="stat-value">${total}</div>
-                    <div class="stat-label">Total Agents</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value">${roles.length}</div>
-                    <div class="stat-label">Roles Used</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value">50</div>
-                    <div class="stat-label">Skills Available</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value">9</div>
-                    <div class="stat-label">Roles Available</div>
-                </div>
-            `;
+                async init() {
+                    try {
+                        const response = await fetch('/api/agents/meta/roles');
+                        this.roles = await response.json();
+                    } catch (error) {
+                        console.error('Failed to load roles:', error);
+                    } finally {
+                        this.loading = false;
+                    }
+                }
+            }
+        }
+
+        // Stats Cards Alpine Component
+        function statsCards() {
+            return {
+                stats: [],
+                loading: true,
+
+                async init() {
+                    await this.loadStats();
+                    // Listen for project changes
+                    document.body.addEventListener('projectChanged', () => this.loadStats());
+                },
+
+                async loadStats() {
+                    this.loading = true;
+                    try {
+                        const response = await fetch('/api/agents');
+                        const data = await response.json();
+                        const agents = data.agents || [];
+                        const roles = [...new Set(agents.map(a => a.variants?.base_role).filter(Boolean))];
+
+                        this.stats = [
+                            { value: agents.length, label: 'Total Agents' },
+                            { value: roles.length, label: 'Roles Used' },
+                            { value: 50, label: 'Skills Available' },
+                            { value: 9, label: 'Roles Available' }
+                        ];
+                    } catch (error) {
+                        console.error('Failed to load stats:', error);
+                    } finally {
+                        this.loading = false;
+                    }
+                }
+            }
         }
     </script>
 </body>

package/src/utils/skill-resolver.js

@@ -542,14 +542,21 @@ export function resolveSkills(role, variants = {}) {
     result.role = [...ROLE_SKILL_MAP[role]];
   }
 
-  // Add variant-specific skills
+  // Add variant-specific skills (supports both single values and arrays for multi-select)
   for (const [category, value] of Object.entries(variants)) {
     if (value) {
-      const key = `${category}:${value}`;
-      if (VARIANT_SKILL_MAP[key]) {
-        for (const skill of VARIANT_SKILL_MAP[key]) {
-          if (!result.variants.includes(skill) && !result.role.includes(skill)) {
-            result.variants.push(skill);
+      // Handle both single value and array of values
+      const values = Array.isArray(value) ? value : [value];
+
+      for (const v of values) {
+        if (v) {
+          const key = `${category}:${v}`;
+          if (VARIANT_SKILL_MAP[key]) {
+            for (const skill of VARIANT_SKILL_MAP[key]) {
+              if (!result.variants.includes(skill) && !result.role.includes(skill)) {
+                result.variants.push(skill);
+              }
+            }
           }
         }
       }