@wipal/agent-team 1.0.0

package/src/server/api/roles.js

@@ -0,0 +1,97 @@
+/**
+ * Roles API Routes
+ */
+
+import { Router } from 'express';
+import fs from 'fs-extra';
+import path from 'path';
+import yaml from 'js-yaml';
+import { getPackageRoot, getClaudeDir } from '../../utils/file-utils.js';
+
+const router = Router();
+
+/**
+ * Get roles configuration
+ */
+router.get('/', async (req, res) => {
+  try {
+    const projectRoot = req.app.get('projectRoot');
+
+    // Load default config
+    const defaultPath = path.join(getPackageRoot(), 'config', 'roles.yaml');
+    const defaultConfig = await fs.exists(defaultPath)
+      ? yaml.load(await fs.readFile(defaultPath, 'utf-8'))
+      : { roles: {} };
+
+    // Load project override
+    const projectPath = path.join(getClaudeDir(projectRoot), 'roles.yaml');
+    const projectConfig = await fs.exists(projectPath)
+      ? yaml.load(await fs.readFile(projectPath, 'utf-8'))
+      : { roles: {} };
+
+    // Merge
+    const merged = {
+      ...defaultConfig,
+      roles: {
+        ...defaultConfig.roles,
+        ...projectConfig.roles
+      }
+    };
+
+    res.json(merged);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+/**
+ * Update roles configuration (project-level only)
+ */
+router.put('/', async (req, res) => {
+  try {
+    const projectRoot = req.app.get('projectRoot');
+    const configPath = path.join(getClaudeDir(projectRoot), 'roles.yaml');
+
+    // Validate YAML
+    const content = yaml.dump(req.body);
+
+    await fs.ensureDir(path.dirname(configPath));
+    await fs.writeFile(configPath, content, 'utf-8');
+
+    res.json({ success: true, message: 'Configuration saved' });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+/**
+ * Get role details
+ */
+router.get('/:name', async (req, res) => {
+  try {
+    const { name } = req.params;
+    const projectRoot = req.app.get('projectRoot');
+
+    // Load configs
+    const defaultPath = path.join(getPackageRoot(), 'config', 'roles.yaml');
+    const defaultConfig = yaml.load(await fs.readFile(defaultPath, 'utf-8'));
+
+    const projectPath = path.join(getClaudeDir(projectRoot), 'roles.yaml');
+    const projectConfig = await fs.exists(projectPath)
+      ? yaml.load(await fs.readFile(projectPath, 'utf-8'))
+      : { roles: {} };
+
+    // Get role (project override takes precedence)
+    const role = projectConfig.roles?.[name] || defaultConfig.roles?.[name];
+
+    if (!role) {
+      return res.status(404).json({ error: 'Role not found' });
+    }
+
+    res.json({ name, ...role });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+export default router;

package/src/server/api/skills.js

@@ -0,0 +1,79 @@
+/**
+ * Skills API Routes
+ */
+
+import { Router } from 'express';
+import { getSkills, getCategories } from '../../utils/skill-scanner.js';
+import { getPackageRoot } from '../../utils/file-utils.js';
+import path from 'path';
+import fs from 'fs-extra';
+
+const router = Router();
+
+/**
+ * List all available skills
+ */
+router.get('/', async (req, res) => {
+  try {
+    const skills = await getSkills();
+    res.json(skills);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+/**
+ * Get all categories
+ */
+router.get('/categories', async (req, res) => {
+  try {
+    const skills = await getSkills();
+    const categories = getCategories(skills);
+    res.json(categories);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+/**
+ * Get skill by name
+ */
+router.get('/:name', async (req, res) => {
+  try {
+    const { name } = req.params;
+    const skills = await getSkills();
+    const skill = skills.find(s => s.name === name);
+
+    if (!skill) {
+      return res.status(404).json({ error: 'Skill not found' });
+    }
+
+    res.json(skill);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+/**
+ * Get skill content (SKILL.md)
+ */
+router.get('/:name/content', async (req, res) => {
+  try {
+    const { name } = req.params;
+    const skills = await getSkills();
+    const skill = skills.find(s => s.name === name);
+
+    if (!skill) {
+      return res.status(404).json({ error: 'Skill not found' });
+    }
+
+    const skillPath = path.join(skill.path, 'SKILL.md');
+    const content = await fs.readFile(skillPath, 'utf-8');
+
+    res.type('text/markdown').send(content);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+export default router;

package/src/server/index.js

@@ -0,0 +1,78 @@
+/**
+ * Express Server for Agent Team UI Dashboard
+ * Lightweight server with HTMX-based UI
+ */
+
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import open from 'open';
+import agentsRouter from './api/agents.js';
+import rolesRouter from './api/roles.js';
+import skillsRouter from './api/skills.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const DEFAULT_PORT = 3456;
+
+/**
+ * Create Express app
+ */
+export function createApp(projectRoot = process.cwd()) {
+  const app = express();
+
+  // Store project root for use in routes
+  app.set('projectRoot', projectRoot);
+
+  // Middleware
+  app.use(express.json());
+  app.use(express.urlencoded({ extended: true }));
+
+  // Static files
+  const uiDir = path.join(__dirname, '..', 'ui');
+  app.use('/ui', express.static(uiDir));
+
+  // API Routes
+  app.use('/api/agents', agentsRouter);
+  app.use('/api/roles', rolesRouter);
+  app.use('/api/skills', skillsRouter);
+
+  // Main page redirect
+  app.get('/', (req, res) => {
+    res.redirect('/ui/');
+  });
+
+  return app;
+}
+
+/**
+ * Start server
+ */
+export async function startServer(options = {}) {
+  const { port = DEFAULT_PORT, open: openBrowser = true, projectRoot = process.cwd() } = options;
+
+  const app = createApp(projectRoot);
+
+  return new Promise((resolve) => {
+    const server = app.listen(port, () => {
+      const url = `http://localhost:${port}`;
+      console.log('');
+      console.log(`🚀 Agent Team UI running at: ${url}`);
+      console.log('');
+
+      if (openBrowser) {
+        open(url).catch(() => {
+          console.log(`Please open ${url} in your browser`);
+        });
+      }
+
+      resolve({ server, url });
+    });
+  });
+}
+
+// Run if called directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+  startServer();
+}

package/src/ui/agents.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Agents - Agent Team Dashboard</title>
+    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+    <link rel="stylesheet" href="/ui/css/styles.css">
+</head>
+<body>
+    <div class="container" x-data="agentApp()">
+        <!-- Header -->
+        <header class="header">
+            <h1>🤖 Agent Management</h1>
+            <p class="subtitle">Create and manage AI agents</p>
+        </header>
+
+        <!-- Navigation -->
+        <nav class="nav">
+            <a href="/ui/" class="nav-link">Dashboard</a>
+            <a href="/ui/agents.html" class="nav-link active">Agents</a>
+            <a href="/ui/skills.html" class="nav-link">Skills</a>
+            <a href="/ui/roles.html" class="nav-link">Roles</a>
+        </nav>
+
+        <!-- Add Agent Button -->
+        <div class="actions-bar">
+            <button class="btn btn-primary" @click="showAddModal = true">
+                ➕ Add New Agent
+            </button>
+        </div>
+
+        <!-- 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>
+        </section>
+
+        <!-- Add Agent Modal -->
+        <div class="modal-overlay" x-show="showAddModal" x-cloak
+             @click.self="showAddModal = false"
+             @keydown.escape.window="showAddModal = false">
+            <div class="modal">
+                <div class="modal-header">
+                    <h2>Add New Agent</h2>
+                    <button class="modal-close" @click="showAddModal = false">&times;</button>
+                </div>
+
+                <div class="modal-body">
+                    <!-- Step 1: Basic Info -->
+                    <div class="form-group">
+                        <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 -->
+                    <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>
+                    </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>
+                    </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>
+                    </div>
+                </div>
+
+                <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
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function agentApp() {
+            return {
+                showAddModal: false,
+                newAgent: {
+                    name: '',
+                    role: '',
+                    variants: {}
+                },
+
+                selectRole(role) {
+                    this.newAgent.role = role;
+                    // Trigger variant loading
+                    htmx.trigger(document.body, 'roleSelected', { role });
+                },
+
+                toggleVariant(category, value) {
+                    if (this.newAgent.variants[category] === value) {
+                        delete this.newAgent.variants[category];
+                    } else {
+                        this.newAgent.variants[category] = value;
+                    }
+                },
+
+                async createAgent() {
+                    try {
+                        const response = await fetch('/api/agents', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(this.newAgent)
+                        });
+
+                        if (response.ok) {
+                            this.showAddModal = false;
+                            this.resetForm();
+                            htmx.trigger(document.body, 'refreshAgents');
+                            alert('Agent created successfully!');
+                        } else {
+                            const error = await response.json();
+                            alert('Error: ' + error.error);
+                        }
+                    } catch (error) {
+                        alert('Error creating agent: ' + error.message);
+                    }
+                },
+
+                resetForm() {
+                    this.newAgent = { name: '', role: '', variants: {} };
+                }
+            }
+        }
+
+        // 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>