@wipal/agent-team 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipal/agent-team",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "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,32 @@
 
         <!-- 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">
+                                <span class="variant-tag" x-text="key + ': ' + value"></span>
+                            </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>
 
@@ -118,9 +142,11 @@
         function agentApp() {
             return {
                 showAddModal: false,
+                loadingAgents: true,
                 loadingRoles: false,
                 loadingSkills: false,
                 creating: false,
+                agents: [],
                 roles: [],
                 variantCategories: {},
                 previewSkills: [],
@@ -130,6 +156,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 : '';
@@ -224,7 +282,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();

package/src/ui/css/styles.css

@@ -497,6 +497,77 @@ 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);
+}
+
 /* 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>