@wipal/agent-team 1.1.3 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipal/agent-team",
-  "version": "1.1.3",
+  "version": "1.2.1",
   "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/server/api/projects.js

@@ -0,0 +1,71 @@
+/**
+ * Projects API Routes
+ */
+
+import { Router } from 'express';
+import { listValidProjects, getProject, updateProjectAccess } from '../../utils/global-registry.js';
+
+const router = Router();
+
+/**
+ * List all registered projects
+ */
+router.get('/', async (req, res) => {
+  try {
+    const projects = await listValidProjects();
+    res.json({ projects });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+/**
+ * Get current project
+ */
+router.get('/current', async (req, res) => {
+  try {
+    const projectRoot = req.app.get('projectRoot');
+    const project = await getProject(projectRoot);
+
+    res.json({
+      path: projectRoot,
+      ...project
+    });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+/**
+ * Switch to a different project
+ */
+router.post('/switch', async (req, res) => {
+  try {
+    const { path: projectPath } = req.body;
+
+    if (!projectPath) {
+      return res.status(400).json({ error: 'Project path is required' });
+    }
+
+    const project = await getProject(projectPath);
+    if (!project) {
+      return res.status(404).json({ error: 'Project not found in registry' });
+    }
+
+    // Update app's project root
+    req.app.set('projectRoot', projectPath);
+    await updateProjectAccess(projectPath);
+
+    res.json({
+      success: true,
+      project: {
+        path: projectPath,
+        ...project
+      }
+    });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+export default router;

package/src/server/index.js

@@ -10,6 +10,7 @@ import open from 'open';
 import agentsRouter from './api/agents.js';
 import rolesRouter from './api/roles.js';
 import skillsRouter from './api/skills.js';
+import projectsRouter from './api/projects.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -37,6 +38,7 @@ export function createApp(projectRoot = process.cwd()) {
   app.use('/api/agents', agentsRouter);
   app.use('/api/roles', rolesRouter);
   app.use('/api/skills', skillsRouter);
+  app.use('/api/projects', projectsRouter);
 
   // Main page redirect
   app.get('/', (req, res) => {

package/src/ui/agents.html

@@ -26,7 +26,7 @@
 
         <!-- Add Agent Button -->
         <div class="actions-bar">
-            <button class="btn btn-primary" @click="showAddModal = true">
+            <button class="btn btn-primary" @click="openAddModal()">
                 ➕ Add New Agent
             </button>
         </div>
@@ -49,42 +49,55 @@
                 </div>
 
                 <div class="modal-body">
-                    <!-- Step 1: Basic Info -->
+                    <!-- Step 1: Agent Name -->
                     <div class="form-group">
-                        <label>Agent Name</label>
+                        <label>Agent Name *</label>
                         <input type="text" x-model="newAgent.name" placeholder="my-agent"
                                class="input" pattern="[a-z0-9-]+">
                         <small class="hint">Use lowercase letters, numbers, and hyphens</small>
                     </div>
 
-                    <!-- Step 2: Select Role -->
+                    <!-- Step 2: Select Role (Dropdown) -->
                     <div class="form-group">
-                        <label>Role</label>
-                        <div class="role-selector" hx-get="/api/agents/meta/roles" hx-trigger="load">
-                            <div class="loading">Loading roles...</div>
-                        </div>
+                        <label>Role *</label>
+                        <select x-model="newAgent.role" class="input" @change="onRoleChange()" :disabled="loadingRoles">
+                            <option value="">-- Select Role --</option>
+                            <template x-for="role in roles" :key="role.name">
+                                <option :value="role.name" x-text="role.name"></option>
+                            </template>
+                        </select>
+                        <small class="hint" x-show="selectedRoleDescription" x-text="selectedRoleDescription"></small>
                     </div>
 
-                    <!-- Step 3: Select Variants (shown when role selected) -->
-                    <div x-show="newAgent.role" x-cloak class="variants-section">
-                        <h3>Select Variants</h3>
-                        <div id="variants-container"
-                             hx-get="/api/agents/meta/variants/"
-                             :hx-get="'/api/agents/meta/variants/' + newAgent.role"
-                             hx-trigger="roleSelected from:body">
-                            <div class="loading">Loading variants...</div>
-                        </div>
+                    <!-- Step 3: Select Variants (Dropdowns) -->
+                    <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>
+                            </div>
+                        </template>
                     </div>
 
                     <!-- Step 4: Preview Skills -->
                     <div x-show="newAgent.role" x-cloak class="skills-preview">
                         <h3>Skills Preview</h3>
-                        <div id="skills-preview"
-                             hx-post="/api/agents/preview-skills"
-                             hx-include="[name='variants']"
-                             hx-vals='{"role": newAgent.role}'
-                             hx-trigger="load, change from:.variant-checkbox">
-                            <div class="loading">Calculating skills...</div>
+                        <div x-show="loadingSkills" class="loading">Calculating skills...</div>
+                        <div x-show="!loadingSkills && previewSkills.length > 0" class="skills-list">
+                            <template x-for="skill in previewSkills" :key="skill">
+                                <span class="skill-tag" x-text="skill"></span>
+                            </template>
+                        </div>
+                        <div x-show="!loadingSkills && previewSkills.length === 0" class="hint">
+                            Select variants to see included skills
                         </div>
                     </div>
                 </div>
@@ -92,8 +105,9 @@
                 <div class="modal-footer">
                     <button class="btn btn-secondary" @click="showAddModal = false">Cancel</button>
                     <button class="btn btn-primary" @click="createAgent()"
-                            :disabled="!newAgent.name || !newAgent.role">
-                        Create Agent
+                            :disabled="!newAgent.name || !newAgent.role || creating">
+                        <span x-show="!creating">Create Agent</span>
+                        <span x-show="creating">Creating...</span>
                     </button>
                 </div>
             </div>
@@ -104,27 +118,102 @@
         function agentApp() {
             return {
                 showAddModal: false,
+                loadingRoles: false,
+                loadingSkills: false,
+                creating: false,
+                roles: [],
+                variantCategories: {},
+                previewSkills: [],
                 newAgent: {
                     name: '',
                     role: '',
                     variants: {}
                 },
 
-                selectRole(role) {
-                    this.newAgent.role = role;
-                    // Trigger variant loading
-                    htmx.trigger(document.body, 'roleSelected', { role });
+                get selectedRoleDescription() {
+                    const role = this.roles.find(r => r.name === this.newAgent.role);
+                    return role ? role.description : '';
                 },
 
-                toggleVariant(category, value) {
-                    if (this.newAgent.variants[category] === value) {
-                        delete this.newAgent.variants[category];
-                    } else {
+                async openAddModal() {
+                    this.showAddModal = true;
+                    await this.loadRoles();
+                },
+
+                async loadRoles() {
+                    if (this.roles.length > 0) return; // Already loaded
+
+                    this.loadingRoles = true;
+                    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.loadingRoles = false;
+                    }
+                },
+
+                async onRoleChange() {
+                    // Reset variants and skills
+                    this.newAgent.variants = {};
+                    this.previewSkills = [];
+                    this.variantCategories = {};
+
+                    if (!this.newAgent.role) return;
+
+                    // Load variants for selected role
+                    await this.loadVariants(this.newAgent.role);
+                    // Load skills preview
+                    await this.loadSkillsPreview();
+                },
+
+                async loadVariants(role) {
+                    try {
+                        const response = await fetch(`/api/agents/meta/variants/${role}`);
+                        const data = await response.json();
+                        this.variantCategories = data.categories || data;
+                    } catch (error) {
+                        console.error('Failed to load variants:', error);
+                    }
+                },
+
+                async selectVariant(category, value) {
+                    if (value) {
                         this.newAgent.variants[category] = value;
+                    } else {
+                        delete this.newAgent.variants[category];
+                    }
+                    // Update skills preview
+                    await this.loadSkillsPreview();
+                },
+
+                async loadSkillsPreview() {
+                    if (!this.newAgent.role) return;
+
+                    this.loadingSkills = true;
+                    try {
+                        const response = await fetch('/api/agents/preview-skills', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                role: this.newAgent.role,
+                                variants: this.newAgent.variants
+                            })
+                        });
+                        const data = await response.json();
+                        this.previewSkills = data.skills || data.core?.concat(data.role || []) || [];
+                    } catch (error) {
+                        console.error('Failed to load skills preview:', error);
+                    } finally {
+                        this.loadingSkills = false;
                     }
                 },
 
                 async createAgent() {
+                    if (!this.newAgent.name || !this.newAgent.role) return;
+
+                    this.creating = true;
                     try {
                         const response = await fetch('/api/agents', {
                             method: 'POST',
@@ -143,32 +232,18 @@
                         }
                     } catch (error) {
                         alert('Error creating agent: ' + error.message);
+                    } finally {
+                        this.creating = false;
                     }
                 },
 
                 resetForm() {
                     this.newAgent = { name: '', role: '', variants: {} };
+                    this.variantCategories = {};
+                    this.previewSkills = [];
                 }
             }
         }
-
-        // Transform role list to radio buttons
-        document.body.addEventListener('htmx:beforeSwap', function(evt) {
-            if (evt.detail.pathInfo.requestPath.includes('/meta/roles')) {
-                try {
-                    const roles = JSON.parse(evt.detail.xhr.response);
-                    evt.detail.xhr.response = roles.map(r => `
-                        <label class="role-option" :class="{'selected': newAgent.role === '${r.name}'}">
-                            <input type="radio" name="role" value="${r.name}" @click="selectRole('${r.name}')">
-                            <div class="role-info">
-                                <strong>${r.name}</strong>
-                                <p>${r.description}</p>
-                            </div>
-                        </label>
-                    `).join('');
-                } catch (e) {}
-            }
-        });
     </script>
 </body>
 </html>

package/src/ui/css/styles.css

@@ -36,15 +36,63 @@ body {
 
 /* Header */
 .header {
-    text-align: center;
     margin-bottom: 2rem;
 }
 
+.header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.header-row > div:first-child {
+    text-align: left;
+}
+
 .header h1 {
     font-size: 2rem;
     margin-bottom: 0.5rem;
 }
 
+/* Project Selector */
+.project-selector {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background: var(--bg-card);
+    border-radius: 0.5rem;
+    box-shadow: var(--shadow);
+}
+
+.project-selector label {
+    font-weight: 500;
+    color: var(--text-muted);
+    font-size: 0.875rem;
+}
+
+.project-selector select {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    min-width: 200px;
+    cursor: pointer;
+}
+
+.project-selector select:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
+.loading-indicator {
+    font-size: 0.75rem;
+    color: var(--primary);
+    font-style: italic;
+}
+
 .subtitle {
     color: var(--text-muted);
 }

package/src/ui/index.html

@@ -10,10 +10,26 @@
 </head>
 <body>
     <div class="container">
-        <!-- Header -->
+        <!-- Header with Project Selector -->
         <header class="header">
-            <h1>🤖 Agent Team Dashboard</h1>
-            <p class="subtitle">Manage AI agents for your project</p>
+            <div class="header-row">
+                <div>
+                    <h1>🤖 Agent Team Dashboard</h1>
+                    <p class="subtitle">Manage AI agents for your project</p>
+                </div>
+                <!-- Project Selector -->
+                <div class="project-selector" x-data="projectSelector()">
+                    <label>Project:</label>
+                    <select @change="switchProject($event)" x-model="currentProject" :disabled="loading">
+                        <template x-for="project in projects" :key="project.path">
+                            <option :value="project.path" :selected="project.path === currentProject">
+                                <span x-text="project.name"></span>
+                            </option>
+                        </template>
+                    </select>
+                    <span x-show="loading" class="loading-indicator">Switching...</span>
+                </div>
+            </div>
         </header>
 
         <!-- Navigation -->
@@ -25,7 +41,7 @@
         </nav>
 
         <!-- Stats Cards -->
-        <div class="stats-grid" hx-get="/api/agents" hx-trigger="load" hx-swap="innerHTML">
+        <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>
@@ -49,7 +65,7 @@
         <!-- Recent Agents -->
         <section class="section">
             <h2>Your Agents</h2>
-            <div id="agents-list" hx-get="/api/agents" hx-trigger="load">
+            <div id="agents-list" hx-get="/api/agents" hx-trigger="load, projectChanged from:body">
                 <div class="loading">Loading agents...</div>
             </div>
         </section>
@@ -64,13 +80,75 @@
     </div>
 
     <script>
+        // Project Selector Alpine Component
+        function projectSelector() {
+            return {
+                projects: [],
+                currentProject: '',
+                loading: false,
+
+                async init() {
+                    await this.loadProjects();
+                    await this.loadCurrentProject();
+                },
+
+                async loadProjects() {
+                    try {
+                        const response = await fetch('/api/projects');
+                        const data = await response.json();
+                        this.projects = data.projects.filter(p => p.valid);
+                    } catch (error) {
+                        console.error('Failed to load projects:', error);
+                    }
+                },
+
+                async loadCurrentProject() {
+                    try {
+                        const response = await fetch('/api/projects/current');
+                        const project = await response.json();
+                        this.currentProject = project.path;
+                    } catch (error) {
+                        console.error('Failed to load current project:', error);
+                    }
+                },
+
+                async switchProject(event) {
+                    const newPath = event.target.value;
+                    if (newPath === this.currentProject) return;
+
+                    this.loading = true;
+                    try {
+                        const response = await fetch('/api/projects/switch', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ path: newPath })
+                        });
+
+                        if (response.ok) {
+                            this.currentProject = newPath;
+                            // Trigger HTMX refresh
+                            document.body.dispatchEvent(new CustomEvent('projectChanged'));
+                        } else {
+                            const error = await response.json();
+                            alert('Failed to switch project: ' + error.error);
+                        }
+                    } catch (error) {
+                        alert('Failed to switch project: ' + error.message);
+                    } finally {
+                        this.loading = false;
+                    }
+                }
+            }
+        }
+
         // 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')) {
                     try {
-                        const agents = JSON.parse(evt.detail.xhr.response);
+                        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;
@@ -93,11 +171,11 @@
                     <div class="stat-label">Roles Used</div>
                 </div>
                 <div class="stat-card">
-                    <div class="stat-value">37</div>
+                    <div class="stat-value">50</div>
                     <div class="stat-label">Skills Available</div>
                 </div>
                 <div class="stat-card">
-                    <div class="stat-value">7</div>
+                    <div class="stat-value">9</div>
                     <div class="stat-label">Roles Available</div>
                 </div>
             `;