bmad-studio 0.1.0

package/packages/client/src/features/agents/AgentsPage.tsx

@@ -0,0 +1,114 @@
+import { useState, useMemo } from 'react'
+import { Users } from 'lucide-react'
+
+import { useAgents } from './use-agents.js'
+import { AgentCard } from './AgentCard.js'
+import { EmptyState } from '../../shared/EmptyState.js'
+import { EntityPageHeader } from '../../shared/EntityPageHeader.js'
+import { SkeletonCard } from '../../shared/Skeleton.js'
+
+export function AgentsPage() {
+  const { data: agents, isLoading, error } = useAgents()
+  const [activeModule, setActiveModule] = useState<string>('all')
+  const [search, setSearch] = useState('')
+
+  const modules = useMemo(() => {
+    if (!agents) return []
+    const moduleSet = new Set<string>()
+    for (const a of agents) {
+      if (a.module) moduleSet.add(a.module)
+    }
+    return Array.from(moduleSet).sort()
+  }, [agents])
+
+  const moduleCounts = useMemo(() => {
+    if (!agents) return {}
+    const counts: Record<string, number> = {}
+    for (const a of agents) {
+      if (a.module) counts[a.module] = (counts[a.module] ?? 0) + 1
+    }
+    return counts
+  }, [agents])
+
+  const filtered = useMemo(() => {
+    if (!agents) return []
+
+    let result = agents
+
+    if (activeModule !== 'all') {
+      result = result.filter((a) => a.module === activeModule)
+    }
+
+    if (search) {
+      const q = search.toLowerCase()
+      result = result.filter(
+        (a) =>
+          a.name.toLowerCase().includes(q) ||
+          a.title.toLowerCase().includes(q) ||
+          a.role.toLowerCase().includes(q),
+      )
+    }
+
+    return result
+  }, [agents, activeModule, search])
+
+  if (isLoading) {
+    return (
+      <div>
+        <h1 className="text-2xl font-extrabold mb-8">Agents</h1>
+        <SkeletonCard count={4} />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div>
+        <h1 className="text-2xl font-extrabold mb-8">Agents</h1>
+        <p className="text-[var(--color-error)]">Failed to load agents: {error.message}</p>
+      </div>
+    )
+  }
+
+  if (!agents || agents.length === 0) {
+    return (
+      <div>
+        <h1 className="text-2xl font-extrabold mb-8">Agents</h1>
+        <EmptyState
+          icon={Users}
+          title="No agents found"
+          description="This project doesn't have any agents yet. Load a module or create a custom agent to get started."
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <EntityPageHeader
+        title="Agents"
+        count={agents.length}
+        modules={modules}
+        moduleCounts={moduleCounts}
+        activeModule={activeModule}
+        onModuleChange={setActiveModule}
+        search={search}
+        onSearchChange={setSearch}
+        filteredCount={activeModule !== 'all' || search ? filtered.length : undefined}
+      />
+
+      {/* Card grid */}
+      <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {filtered.map((agent) => (
+          <AgentCard key={agent.id} agent={agent} />
+        ))}
+      </div>
+
+      {filtered.length === 0 && (
+        <p className="text-center text-sm text-[var(--color-muted)] py-8">
+          No agents match the current filter
+        </p>
+      )}
+    </div>
+  )
+}

package/packages/client/src/features/agents/EditAgentDialog.tsx

@@ -0,0 +1,260 @@
+import { useState, useEffect } from 'react'
+import { X, Save, Search } from 'lucide-react'
+import { useQueryClient } from '@tanstack/react-query'
+
+import type { Agent, SkillListItem } from '@bmad-studio/shared'
+
+type EditAgentDialogProps = {
+  agent: Agent
+  onClose: () => void
+  onSaved: () => void
+}
+
+export function EditAgentDialog({ agent, onClose, onSaved }: EditAgentDialogProps) {
+  const queryClient = useQueryClient()
+
+  // Determine if this is a built-in agent (override-only editing)
+  const isBuiltIn = agent.module === 'bmm' || agent.module === 'core'
+
+  // Form state — pre-populated from agent
+  const [title, setTitle] = useState(agent.title || '')
+  const [role, setRole] = useState(agent.role || '')
+  const [icon, setIcon] = useState(agent.icon || '')
+  const [_description, _setDescription] = useState(agent.role || '')
+  const [discussion, setDiscussion] = useState(agent.discussion)
+
+  // Skills
+  const [skills, setSkills] = useState<Set<string>>(new Set(agent.skills))
+  const [availableSkills, setAvailableSkills] = useState<SkillListItem[]>([])
+  const [skillSearch, setSkillSearch] = useState('')
+
+  const [error, setError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  useEffect(() => {
+    fetch('/api/skills')
+      .then((r) => r.json())
+      .then((data) => setAvailableSkills(data as SkillListItem[]))
+      .catch(() => {})
+  }, [])
+
+  const filteredSkills = availableSkills.filter((s) => {
+    if (!skillSearch) return true
+    const q = skillSearch.toLowerCase()
+    return s.name.toLowerCase().includes(q) || s.description.toLowerCase().includes(q)
+  })
+
+  const toggleSkill = (skillId: string) => {
+    setSkills((prev) => {
+      const next = new Set(prev)
+      if (next.has(skillId)) next.delete(skillId)
+      else next.add(skillId)
+      return next
+    })
+  }
+
+  const handleSave = async () => {
+    setSubmitting(true)
+    setError(null)
+    try {
+      // Update skills if changed
+      const newSkills = Array.from(skills)
+      const skillsChanged =
+        newSkills.length !== agent.skills.length ||
+        newSkills.some((s) => !agent.skills.includes(s))
+
+      if (skillsChanged) {
+        const skillResp = await fetch(`/api/agents/${encodeURIComponent(agent.id)}/skills`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ skills: newSkills }),
+        })
+        if (!skillResp.ok) {
+          const data = (await skillResp.json()) as { error?: { message?: string } }
+          throw new Error(data.error?.message ?? 'Failed to update skills')
+        }
+      }
+
+      // For built-in agents, write override content
+      if (isBuiltIn) {
+        const overrideContent = [
+          '# Agent Override',
+          '',
+          `title: "${title}"`,
+          `role: "${role}"`,
+          icon ? `icon: "${icon}"` : '',
+          `discussion: ${discussion}`,
+          '',
+        ]
+          .filter(Boolean)
+          .join('\n')
+
+        const resp = await fetch(`/api/agents/${encodeURIComponent(agent.id)}/override`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ content: overrideContent }),
+        })
+        if (!resp.ok) {
+          const data = (await resp.json()) as { error?: { message?: string } }
+          throw new Error(data.error?.message ?? 'Failed to save override')
+        }
+      }
+
+      await queryClient.invalidateQueries({ queryKey: ['agents'] })
+      await queryClient.invalidateQueries({ queryKey: ['agent', agent.id] })
+      onSaved()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save agent')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+      <div className="relative bg-[var(--color-bg)] border border-[var(--color-border-subtle)] rounded-lg shadow-xl w-full max-w-2xl p-6 max-h-[85vh] flex flex-col">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h2 className="text-lg font-bold">Edit Agent</h2>
+            {isBuiltIn && (
+              <p className="text-xs text-[var(--color-warning)] mt-1">
+                Override mode — base file will not be modified
+              </p>
+            )}
+          </div>
+          <button
+            onClick={onClose}
+            className="text-[var(--color-muted)] hover:text-[var(--color-text)]"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="space-y-4 overflow-y-auto flex-1 pr-1">
+          {/* Title */}
+          <div>
+            <label className="block text-sm font-bold mb-1">Title</label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="e.g. Project Manager"
+              className="w-full px-3 py-2 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none"
+            />
+          </div>
+
+          {/* Role */}
+          <div>
+            <label className="block text-sm font-bold mb-1">Role</label>
+            <textarea
+              value={role}
+              onChange={(e) => setRole(e.target.value)}
+              rows={2}
+              placeholder="Describe the agent's role..."
+              className="w-full px-3 py-2 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none resize-none"
+            />
+          </div>
+
+          {/* Icon */}
+          <div>
+            <label className="block text-sm font-bold mb-1">Icon</label>
+            <input
+              type="text"
+              value={icon}
+              onChange={(e) => setIcon(e.target.value)}
+              placeholder="e.g. a single emoji"
+              className="w-full px-3 py-2 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none"
+            />
+          </div>
+
+          {/* Discussion mode */}
+          <div className="flex items-center gap-3">
+            <label className="text-sm font-bold">Discussion mode</label>
+            <button
+              onClick={() => setDiscussion(!discussion)}
+              className={`relative w-10 h-5 rounded-full transition-colors ${
+                discussion ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)]'
+              }`}
+            >
+              <span
+                className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-transform ${
+                  discussion ? 'translate-x-5' : 'translate-x-0.5'
+                }`}
+              />
+            </button>
+          </div>
+
+          {/* Skills */}
+          <div>
+            <label className="block text-sm font-bold mb-1">
+              Skills ({skills.size} assigned)
+            </label>
+            <div className="relative mb-2">
+              <Search
+                size={14}
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-muted)]"
+              />
+              <input
+                type="text"
+                value={skillSearch}
+                onChange={(e) => setSkillSearch(e.target.value)}
+                placeholder="Search skills..."
+                className="w-full pl-9 pr-3 py-2 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none"
+              />
+            </div>
+            <div className="max-h-48 overflow-y-auto border border-[var(--color-border-subtle)] rounded-md">
+              {filteredSkills.length === 0 ? (
+                <p className="text-xs text-[var(--color-muted)] p-3 text-center">No skills found</p>
+              ) : (
+                filteredSkills.map((skill) => (
+                  <label
+                    key={skill.id}
+                    className="flex items-center gap-3 px-3 py-2 hover:bg-[var(--color-surface-raised)] cursor-pointer text-sm"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={skills.has(skill.id)}
+                      onChange={() => toggleSkill(skill.id)}
+                      className="accent-[var(--color-accent)]"
+                    />
+                    <span className="truncate font-bold">{skill.name}</span>
+                    <span className="text-xs text-[var(--color-muted)] truncate ml-auto">
+                      {skill.description}
+                    </span>
+                  </label>
+                ))
+              )}
+            </div>
+          </div>
+
+          {/* Agent ID and module (read-only info) */}
+          <div className="text-xs text-[var(--color-muted)] space-y-1 pt-2 border-t border-[var(--color-border-subtle)]">
+            <p>ID: <code className="font-[var(--font-mono)]">{agent.id}</code></p>
+            <p>Module: <code className="font-[var(--font-mono)]">{agent.module ?? 'custom'}</code></p>
+            <p>File: <code className="font-[var(--font-mono)] break-all">{agent.filePath}</code></p>
+          </div>
+
+          {error && <p className="text-sm text-[var(--color-error)]">{error}</p>}
+        </div>
+
+        <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm rounded-md border border-[var(--color-border-subtle)] hover:bg-[var(--color-surface-raised)] transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={submitting}
+            className="px-4 py-2 text-sm font-bold rounded-md bg-[var(--color-accent)] text-white hover:bg-[var(--color-accent-hover)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+          >
+            <Save size={14} />
+            {submitting ? 'Saving...' : 'Save Changes'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/client/src/features/agents/SkillAssignment.tsx

@@ -0,0 +1,153 @@
+import { useState, useMemo } from 'react'
+import { X, Plus, Minus, Search } from 'lucide-react'
+
+import { useSkills } from '../skills/use-skills.js'
+import { DiffViewer } from '../../shared/diff-viewer/DiffViewer.js'
+
+type SkillAssignmentProps = {
+  agentName: string
+  currentSkills: string[]
+  onSave: (skills: string[]) => void
+  onClose: () => void
+}
+
+export function SkillAssignment({ agentName, currentSkills, onSave, onClose }: SkillAssignmentProps) {
+  const { data: allSkills } = useSkills()
+  const [assignedSkills, setAssignedSkills] = useState<string[]>(currentSkills)
+  const [search, setSearch] = useState('')
+  const [showDiff, setShowDiff] = useState(false)
+
+  const availableSkills = useMemo(() => {
+    if (!allSkills) return []
+    const assigned = new Set(assignedSkills)
+    let available = allSkills.filter((s) => !assigned.has(s.id) && !assigned.has(s.name))
+    if (search) {
+      const q = search.toLowerCase()
+      available = available.filter(
+        (s) => s.name.toLowerCase().includes(q) || s.description.toLowerCase().includes(q),
+      )
+    }
+    return available
+  }, [allSkills, assignedSkills, search])
+
+  function addSkill(skillName: string) {
+    setAssignedSkills((prev) => [...prev, skillName])
+  }
+
+  function removeSkill(skillName: string) {
+    setAssignedSkills((prev) => prev.filter((s) => s !== skillName))
+  }
+
+  if (showDiff) {
+    const original = currentSkills.join('\n')
+    const modified = assignedSkills.join('\n')
+    return (
+      <div className="h-full flex flex-col">
+        <div className="px-6 py-4 border-b border-[var(--color-border-subtle)]">
+          <h2 className="text-lg font-bold">Review Skill Changes: {agentName}</h2>
+        </div>
+        <div className="flex-1 overflow-hidden">
+          <DiffViewer
+            original={original}
+            modified={modified}
+            onConfirm={() => onSave(assignedSkills)}
+            onCancel={() => setShowDiff(false)}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="px-6 py-4 border-b border-[var(--color-border-subtle)] flex items-center justify-between">
+        <h2 className="text-lg font-bold">Assign Skills: {agentName}</h2>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setShowDiff(true)}
+            disabled={JSON.stringify(assignedSkills) === JSON.stringify(currentSkills)}
+            className="px-3 py-1.5 text-sm font-bold rounded-md bg-[var(--color-accent)] text-white hover:bg-[var(--color-accent-hover)] transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            Review Changes
+          </button>
+          <button
+            onClick={onClose}
+            className="text-[var(--color-muted)] hover:text-[var(--color-text)]"
+          >
+            <X size={18} />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 flex overflow-hidden">
+        {/* Available skills pool */}
+        <div className="w-1/2 border-r border-[var(--color-border-subtle)] flex flex-col">
+          <div className="p-4 border-b border-[var(--color-border-subtle)]">
+            <h3 className="text-sm font-bold mb-2">Available Skills</h3>
+            <div className="relative">
+              <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[var(--color-muted)]" />
+              <input
+                type="text"
+                placeholder="Search skills..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] text-[var(--color-text)] placeholder:text-[var(--color-muted)] outline-none focus:border-[var(--color-accent)]"
+              />
+            </div>
+          </div>
+          <div className="flex-1 overflow-y-auto p-2">
+            {availableSkills.map((skill) => (
+              <button
+                key={skill.id}
+                onClick={() => addSkill(skill.name)}
+                className="w-full flex items-center gap-2 px-3 py-2 text-left rounded-md hover:bg-[var(--color-surface-raised)] transition-colors group"
+              >
+                <Plus size={14} className="text-[var(--color-success)] shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
+                <div className="min-w-0">
+                  <p className="text-sm font-bold truncate">{skill.name}</p>
+                  <p className="text-xs text-[var(--color-muted)] truncate">{skill.description}</p>
+                </div>
+              </button>
+            ))}
+            {availableSkills.length === 0 && (
+              <p className="text-sm text-[var(--color-muted)] text-center py-4">
+                {search ? 'No matching skills' : 'All skills assigned'}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Assigned skills */}
+        <div className="w-1/2 flex flex-col">
+          <div className="p-4 border-b border-[var(--color-border-subtle)]">
+            <h3 className="text-sm font-bold">
+              Assigned Skills ({assignedSkills.length})
+            </h3>
+          </div>
+          <div className="flex-1 overflow-y-auto p-2">
+            {assignedSkills.map((skill) => (
+              <div
+                key={skill}
+                className="flex items-center justify-between px-3 py-2 rounded-md hover:bg-[var(--color-surface-raised)] transition-colors group"
+              >
+                <span className="text-sm">{skill}</span>
+                <button
+                  onClick={() => removeSkill(skill)}
+                  className="text-[var(--color-error)] opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  <Minus size={14} />
+                </button>
+              </div>
+            ))}
+            {assignedSkills.length === 0 && (
+              <p className="text-sm text-[var(--color-muted)] text-center py-4">
+                No skills assigned
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/client/src/features/agents/use-agent-detail.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query'
+
+import type { AgentDetail } from '@bmad-studio/shared'
+
+async function fetchAgent(id: string): Promise<AgentDetail> {
+  const response = await fetch(`/api/agents/${id}`)
+  if (!response.ok) throw new Error(`Failed to fetch agent ${id}`)
+  return response.json() as Promise<AgentDetail>
+}
+
+export function useAgentDetail(id: string) {
+  return useQuery({
+    queryKey: ['agents', { id }],
+    queryFn: () => fetchAgent(id),
+    enabled: !!id,
+  })
+}

package/packages/client/src/features/agents/use-agent-mutations.ts

@@ -0,0 +1,47 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+export function useAgentOverrideMutation() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ id, content }: { id: string; content: string }) => {
+      const resp = await fetch(`/api/agents/${id}/override`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content }),
+      })
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({ error: { message: 'Unknown error' } }))
+        throw new Error((err as { error: { message: string } }).error.message)
+      }
+      return resp.json()
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['agents', { id: variables.id }] })
+      queryClient.invalidateQueries({ queryKey: ['agents'] })
+    },
+  })
+}
+
+export function useAgentSkillsMutation() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ id, skills }: { id: string; skills: string[] }) => {
+      const resp = await fetch(`/api/agents/${id}/skills`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ skills }),
+      })
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({ error: { message: 'Unknown error' } }))
+        throw new Error((err as { error: { message: string } }).error.message)
+      }
+      return resp.json()
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['agents', { id: variables.id }] })
+      queryClient.invalidateQueries({ queryKey: ['agents'] })
+    },
+  })
+}

package/packages/client/src/features/agents/use-agents.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query'
+
+import type { AgentListItem } from '@bmad-studio/shared'
+
+async function fetchAgents(): Promise<AgentListItem[]> {
+  const response = await fetch('/api/agents')
+  if (!response.ok) throw new Error('Failed to fetch agents')
+  return response.json() as Promise<AgentListItem[]>
+}
+
+export function useAgents() {
+  return useQuery({
+    queryKey: ['agents'],
+    queryFn: fetchAgents,
+    staleTime: 30_000,
+  })
+}