@wipal/agent-team 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipal/agent-team",
-  "version": "1.2.2",
+  "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

@@ -45,8 +45,14 @@
                             <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">
-                                <span class="variant-tag" x-text="key + ': ' + value"></span>
+                            <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">
@@ -93,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>
@@ -236,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();
                 },
@@ -299,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

@@ -568,6 +568,60 @@ body {
     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/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);
+              }
+            }
           }
         }
       }