bmad-studio 0.1.0

package/packages/client/src/features/teams/TeamsPage.tsx

@@ -0,0 +1,196 @@
+import { useState, useMemo } from 'react'
+import { Users, Plus } from 'lucide-react'
+
+import type { TeamListItem } from '@bmad-studio/shared'
+
+import { useTeams } from './use-teams.js'
+import { TeamDetailPanel } from './TeamDetailPanel.js'
+import { CreateTeamDialog } from './CreateTeamDialog.js'
+import { EmptyState } from '../../shared/EmptyState.js'
+import { EntityPageHeader } from '../../shared/EntityPageHeader.js'
+import { SkeletonCard } from '../../shared/Skeleton.js'
+import { useDetailParam } from '../../hooks/use-detail-param.js'
+
+function TeamCard({
+  team,
+  isSelected,
+  onClick,
+}: {
+  team: TeamListItem
+  isSelected: boolean
+  onClick: () => void
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`p-4 rounded-lg border text-left transition-all cursor-pointer hover:-translate-y-0.5 hover:shadow-md ${
+        isSelected
+          ? 'bg-[var(--color-surface-raised)] border-[var(--color-accent)]'
+          : 'bg-[var(--color-surface-raised)] border-[var(--color-border-subtle)] hover:border-[var(--color-accent)]'
+      }`}
+    >
+      <div className="flex items-center gap-2 mb-2">
+        {team.icon && <span className="text-lg leading-none">{team.icon}</span>}
+        <span className="font-bold text-sm truncate">{team.name}</span>
+        {team.module && (
+          <span className="text-xs px-1.5 py-0.5 rounded-full bg-[var(--color-bg)] border border-[var(--color-border-subtle)] text-[var(--color-muted)] shrink-0">
+            {team.module}
+          </span>
+        )}
+      </div>
+      {team.description && (
+        <p className="text-xs text-[var(--color-muted)] line-clamp-2 mb-2">{team.description}</p>
+      )}
+      <div className="flex items-center justify-between">
+        <span className="text-xs text-[var(--color-muted)]">
+          <Users size={10} className="inline mr-1" />
+          {team.memberCount} members
+        </span>
+      </div>
+    </button>
+  )
+}
+
+export function TeamsPage() {
+  const { data: teams, isLoading, refetch } = useTeams()
+  const [selectedId, setSelectedId] = useDetailParam('detail')
+  const [activeModule, setActiveModule] = useState<string>('all')
+  const [search, setSearch] = useState('')
+  const [showCreate, setShowCreate] = useState(false)
+
+  const modules = useMemo(() => {
+    if (!teams) return []
+    const set = new Set<string>()
+    for (const t of teams) {
+      if (t.module) set.add(t.module)
+    }
+    return Array.from(set).sort()
+  }, [teams])
+
+  const filtered = useMemo(() => {
+    if (!teams) return []
+    let result = teams
+
+    if (activeModule !== 'all') {
+      result = result.filter((t) => t.module === activeModule)
+    }
+
+    if (search) {
+      const q = search.toLowerCase()
+      result = result.filter(
+        (t) => t.name.toLowerCase().includes(q) || t.description.toLowerCase().includes(q),
+      )
+    }
+
+    return result
+  }, [teams, activeModule, search])
+
+  const moduleCounts = useMemo(() => {
+    if (!teams) return {}
+    const counts: Record<string, number> = {}
+    for (const t of teams) {
+      if (t.module) counts[t.module] = (counts[t.module] ?? 0) + 1
+    }
+    return counts
+  }, [teams])
+
+  if (isLoading) {
+    return (
+      <div>
+        <h1 className="text-2xl font-extrabold mb-8">Teams</h1>
+        <SkeletonCard count={3} />
+      </div>
+    )
+  }
+
+  if (!teams || teams.length === 0) {
+    return (
+      <div>
+        <h1 className="text-2xl font-extrabold mb-8">Teams</h1>
+        <EmptyState
+          icon={Users}
+          title="No teams found"
+          description="Teams group agents for collaborative workflows and Party Mode. Create a team to get started."
+          actions={
+            <button
+              onClick={() => setShowCreate(true)}
+              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 flex items-center gap-1.5"
+            >
+              <Plus size={14} />
+              Create Team
+            </button>
+          }
+        />
+        {showCreate && (
+          <CreateTeamDialog
+            onClose={() => setShowCreate(false)}
+            onCreated={() => {
+              setShowCreate(false)
+              refetch()
+            }}
+          />
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <EntityPageHeader
+        title="Teams"
+        count={teams.length}
+        modules={modules}
+        moduleCounts={moduleCounts}
+        activeModule={activeModule}
+        onModuleChange={setActiveModule}
+        search={search}
+        onSearchChange={setSearch}
+        actions={
+          <button
+            onClick={() => setShowCreate(true)}
+            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 flex items-center gap-1.5"
+          >
+            <Plus size={14} />
+            Create Team
+          </button>
+        }
+      />
+
+      {/* Card grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {filtered.map((team) => (
+          <TeamCard
+            key={team.id}
+            team={team}
+            isSelected={selectedId === team.id}
+            onClick={() => setSelectedId(selectedId === team.id ? null : team.id)}
+          />
+        ))}
+      </div>
+
+      {filtered.length === 0 && teams.length > 0 && (
+        <p className="text-sm text-[var(--color-muted)] text-center py-8">
+          No teams match your search.
+        </p>
+      )}
+
+      {selectedId && (
+        <TeamDetailPanel
+          teamId={selectedId}
+          onClose={() => setSelectedId(null)}
+          onTeamUpdated={() => refetch()}
+        />
+      )}
+
+      {showCreate && (
+        <CreateTeamDialog
+          onClose={() => setShowCreate(false)}
+          onCreated={() => {
+            setShowCreate(false)
+            refetch()
+          }}
+        />
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,39 @@
+import { useQuery } from '@tanstack/react-query'
+
+import type { TeamListItem, Team } from '@bmad-studio/shared'
+
+export function useTeams() {
+  return useQuery({
+    queryKey: ['teams'],
+    queryFn: async () => {
+      const response = await fetch('/api/teams')
+      if (!response.ok) throw new Error('Failed to fetch teams')
+      return response.json() as Promise<TeamListItem[]>
+    },
+    staleTime: 30_000,
+  })
+}
+
+export function useTeamDetail(id: string) {
+  return useQuery({
+    queryKey: ['teams', { id }],
+    queryFn: async () => {
+      const response = await fetch(`/api/teams/${id}`)
+      if (!response.ok) throw new Error(`Failed to fetch team ${id}`)
+      return response.json() as Promise<Team>
+    },
+    enabled: !!id,
+  })
+}
+
+export function useTeamParty(id: string) {
+  return useQuery({
+    queryKey: ['teams', { id, include: 'party' }],
+    queryFn: async () => {
+      const response = await fetch(`/api/teams/${id}/party`)
+      if (!response.ok) throw new Error(`Failed to fetch party CSV for ${id}`)
+      return response.json() as Promise<{ content: string; path: string }>
+    },
+    enabled: !!id,
+  })
+}

package/packages/client/src/features/workflows/CreateWorkflowDialog.tsx

@@ -0,0 +1,395 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Plus, X, Trash2, Upload } from 'lucide-react'
+import { useQueryClient } from '@tanstack/react-query'
+
+type CreateWorkflowDialogProps = {
+  onClose: () => void
+  onCreated: () => void
+}
+
+type StepEntry = { title: string; agent: string }
+type ModuleOption = { name: string }
+
+const KEBAB_RE = /^[a-z][a-z0-9-]*$/
+
+function toKebab(s: string): string {
+  return s
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+export function CreateWorkflowDialog({ onClose, onCreated }: CreateWorkflowDialogProps) {
+  const queryClient = useQueryClient()
+
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [type, setType] = useState<'step-based' | 'agent-based' | 'composite'>('step-based')
+  const [phase, setPhase] = useState('')
+  const [customPhase, setCustomPhase] = useState('')
+  const [moduleName, setModuleName] = useState('')
+  const [steps, setSteps] = useState<StepEntry[]>([])
+  const [nameBlurred, setNameBlurred] = useState(false)
+  const [showPreview, setShowPreview] = useState(false)
+  const [tab, setTab] = useState<'create' | 'import'>('create')
+
+  const [modules, setModules] = useState<ModuleOption[]>([])
+  const [phases, setPhases] = useState<string[]>([])
+  const [agents, setAgents] = useState<Array<{ id: string; name: string; title: string }>>([])
+  const [error, setError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  useEffect(() => {
+    fetch('/api/modules')
+      .then((r) => r.json())
+      .then((data) => {
+        const mods = data as Array<{ name: string }>
+        setModules(mods.map((m) => ({ name: m.name })))
+        if (mods.length === 1) setModuleName(mods[0].name)
+      })
+      .catch(() => {})
+
+    fetch('/api/workflows')
+      .then((r) => r.json())
+      .then((data) => {
+        const wfs = data as Array<{ phase?: string }>
+        const phaseSet = new Set<string>()
+        for (const wf of wfs) {
+          if (wf.phase) phaseSet.add(wf.phase)
+        }
+        setPhases(Array.from(phaseSet).sort())
+      })
+      .catch(() => {})
+
+    fetch('/api/agents')
+      .then((r) => r.json())
+      .then((data) => setAgents(data as Array<{ id: string; name: string; title: string }>))
+      .catch(() => {})
+  }, [])
+
+  const nameValid = name.length === 0 || KEBAB_RE.test(name)
+  const selectedPhase = phase === '__custom' ? customPhase.trim() : phase
+  const canSubmit = name.trim().length > 0 && KEBAB_RE.test(name) && moduleName.length > 0
+
+  const handleFileImport = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    const reader = new FileReader()
+    reader.onload = () => {
+      const text = reader.result as string
+      const fmMatch = text.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/)
+      if (fmMatch) {
+        const fm = fmMatch[1]
+        const nameMatch = fm.match(/^name:\s*(.+)$/m)
+        const descMatch = fm.match(/^description:\s*"?(.+?)"?$/m)
+        const typeMatch = fm.match(/^type:\s*(.+)$/m)
+        if (nameMatch) setName(nameMatch[1].trim())
+        if (descMatch) setDescription(descMatch[1].trim())
+        if (typeMatch) {
+          const t = typeMatch[1].trim()
+          if (t === 'step-based' || t === 'agent-based' || t === 'composite') setType(t)
+        }
+      } else {
+        // No frontmatter — use filename as name
+        const fname = file.name.replace(/\.md$/i, '')
+        setName(toKebab(fname))
+      }
+      setTab('create')
+    }
+    reader.readAsText(file)
+  }, [])
+
+  const addStep = () => setSteps([...steps, { title: '', agent: '' }])
+  const removeStep = (i: number) => setSteps(steps.filter((_, idx) => idx !== i))
+  const updateStep = (i: number, field: keyof StepEntry, value: string) => {
+    setSteps(steps.map((s, idx) => (idx === i ? { ...s, [field]: value } : s)))
+  }
+
+  // Build preview tree
+  const previewLines: string[] = []
+  if (canSubmit) {
+    const dir = selectedPhase
+      ? `_bmad/${moduleName}/workflows/${selectedPhase}/${name}/`
+      : `_bmad/${moduleName}/workflows/${name}/`
+    previewLines.push(dir)
+    previewLines.push('├── workflow.md')
+    if (type === 'step-based' && steps.length > 0) {
+      previewLines.push('├── steps/')
+      steps.forEach((s, i) => {
+        const num = String(i + 1).padStart(2, '0')
+        const slug = toKebab(s.title || 'untitled')
+        const prefix = i === steps.length - 1 ? '│   └──' : '│   ├──'
+        previewLines.push(`${prefix} step-${num}-${slug}.md`)
+      })
+    }
+  }
+
+  const handleCreate = async () => {
+    if (!canSubmit) return
+    setSubmitting(true)
+    setError(null)
+    try {
+      const resp = await fetch('/api/workflows', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: name.trim(),
+          description: description.trim(),
+          type,
+          phase: selectedPhase || undefined,
+          module: moduleName,
+          steps: type === 'step-based' ? steps.filter((s) => s.title.trim()) : undefined,
+        }),
+      })
+      if (!resp.ok) {
+        const data = (await resp.json()) as { error?: { message?: string } }
+        throw new Error(data.error?.message ?? 'Failed to create workflow')
+      }
+      await queryClient.invalidateQueries({ queryKey: ['workflows'] })
+      onCreated()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create workflow')
+    } 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">
+          <h2 className="text-lg font-bold">New Workflow</h2>
+          <button onClick={onClose} className="text-[var(--color-muted)] hover:text-[var(--color-text)]">
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex gap-1 mb-4 bg-[var(--color-surface-raised)] rounded-md p-0.5 self-start">
+          <button
+            onClick={() => setTab('create')}
+            className={`px-3 py-1.5 text-sm rounded min-h-[32px] transition-colors ${
+              tab === 'create'
+                ? 'bg-[var(--color-bg)] text-[var(--color-text)] font-bold shadow-sm'
+                : 'text-[var(--color-muted)] hover:text-[var(--color-text)]'
+            }`}
+          >
+            Create
+          </button>
+          <button
+            onClick={() => setTab('import')}
+            className={`px-3 py-1.5 text-sm rounded min-h-[32px] transition-colors ${
+              tab === 'import'
+                ? 'bg-[var(--color-bg)] text-[var(--color-text)] font-bold shadow-sm'
+                : 'text-[var(--color-muted)] hover:text-[var(--color-text)]'
+            }`}
+          >
+            Import
+          </button>
+        </div>
+
+        <div className="space-y-4 overflow-y-auto flex-1 pr-1">
+          {tab === 'import' ? (
+            <>
+              <div>
+                <label className="block text-sm font-bold mb-1">Upload workflow file</label>
+                <label className="flex items-center justify-center gap-2 w-full px-4 py-6 border-2 border-dashed border-[var(--color-border-subtle)] rounded-lg cursor-pointer hover:border-[var(--color-accent)] transition-colors">
+                  <Upload size={16} className="text-[var(--color-muted)]" />
+                  <span className="text-sm text-[var(--color-muted)]">Click to upload a .md workflow file</span>
+                  <input type="file" accept=".md" onChange={handleFileImport} className="hidden" />
+                </label>
+              </div>
+              <p className="text-xs text-[var(--color-muted)]">
+                Uploading will parse the file and switch to the Create tab with fields pre-populated. The workflow type is auto-detected from frontmatter.
+              </p>
+            </>
+          ) : !showPreview ? (
+            <>
+              {/* Name */}
+              <div>
+                <label className="block text-sm font-bold mb-1">Name</label>
+                <input
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  onBlur={() => setNameBlurred(true)}
+                  placeholder="e.g. create-product-brief"
+                  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"
+                />
+                {nameBlurred && !nameValid && (
+                  <p className="text-xs text-[var(--color-error)] mt-1">Name must be kebab-case</p>
+                )}
+              </div>
+
+              {/* Description */}
+              <div>
+                <label className="block text-sm font-bold mb-1">Description</label>
+                <textarea
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder="What does this workflow do?"
+                  rows={2}
+                  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>
+
+              {/* Workflow type */}
+              <div>
+                <label className="block text-sm font-bold mb-1">Type</label>
+                <div className="flex gap-3">
+                  {(['step-based', 'agent-based', 'composite'] as const).map((t) => (
+                    <label key={t} className="flex items-center gap-2 text-sm cursor-pointer">
+                      <input
+                        type="radio"
+                        name="workflow-type"
+                        checked={type === t}
+                        onChange={() => setType(t)}
+                        className="accent-[var(--color-accent)]"
+                      />
+                      {t === 'step-based' ? 'Step-based' : t === 'agent-based' ? 'Agent-based' : 'Composite'}
+                    </label>
+                  ))}
+                </div>
+              </div>
+
+              {/* Phase */}
+              <div>
+                <label className="block text-sm font-bold mb-1">Phase (optional)</label>
+                <select
+                  value={phase}
+                  onChange={(e) => setPhase(e.target.value)}
+                  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"
+                >
+                  <option value="">No phase grouping</option>
+                  {phases.map((p) => (
+                    <option key={p} value={p}>{p}</option>
+                  ))}
+                  <option value="__custom">Custom...</option>
+                </select>
+                {phase === '__custom' && (
+                  <input
+                    type="text"
+                    value={customPhase}
+                    onChange={(e) => setCustomPhase(e.target.value)}
+                    placeholder="e.g. 5-deployment"
+                    className="w-full mt-2 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>
+
+              {/* Module */}
+              <div>
+                <label className="block text-sm font-bold mb-1">Module</label>
+                <select
+                  value={moduleName}
+                  onChange={(e) => setModuleName(e.target.value)}
+                  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"
+                >
+                  <option value="">Select a module...</option>
+                  {modules.map((m) => (
+                    <option key={m.name} value={m.name}>{m.name}</option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Steps (step-based only) */}
+              {type === 'step-based' && (
+                <div>
+                  <label className="block text-sm font-bold mb-1">
+                    Initial Steps ({steps.length})
+                  </label>
+                  <div className="space-y-2">
+                    {steps.map((step, i) => (
+                      <div key={i} className="flex items-center gap-2">
+                        <span className="text-xs text-[var(--color-muted)] w-6 text-right shrink-0">
+                          {String(i + 1).padStart(2, '0')}
+                        </span>
+                        <input
+                          type="text"
+                          value={step.title}
+                          onChange={(e) => updateStep(i, 'title', e.target.value)}
+                          placeholder="Step title..."
+                          className="flex-1 px-3 py-1.5 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none"
+                        />
+                        <select
+                          value={step.agent}
+                          onChange={(e) => updateStep(i, 'agent', e.target.value)}
+                          className="w-36 px-2 py-1.5 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none"
+                        >
+                          <option value="">Agent...</option>
+                          {agents.map((a) => (
+                            <option key={a.id} value={a.name}>{a.title || a.name}</option>
+                          ))}
+                        </select>
+                        <button
+                          onClick={() => removeStep(i)}
+                          className="text-[var(--color-muted)] hover:text-[var(--color-error)] shrink-0"
+                        >
+                          <Trash2 size={14} />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                  <button
+                    onClick={addStep}
+                    className="mt-2 flex items-center gap-1.5 text-sm text-[var(--color-accent)] hover:text-[var(--color-accent-hover)]"
+                  >
+                    <Plus size={14} /> Add step
+                  </button>
+                </div>
+              )}
+            </>
+          ) : (
+            /* Preview */
+            <div>
+              <h3 className="text-sm font-bold mb-2">Directory Structure Preview</h3>
+              <pre className="p-4 text-xs font-[var(--font-mono)] bg-[var(--color-surface-raised)] rounded-lg overflow-x-auto whitespace-pre">
+                {previewLines.join('\n')}
+              </pre>
+            </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)]">
+          {showPreview ? (
+            <>
+              <button
+                onClick={() => setShowPreview(false)}
+                className="px-4 py-2 text-sm rounded-md border border-[var(--color-border-subtle)] hover:bg-[var(--color-surface-raised)] transition-colors"
+              >
+                Back
+              </button>
+              <button
+                onClick={handleCreate}
+                disabled={!canSubmit || 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"
+              >
+                <Plus size={14} />
+                {submitting ? 'Creating...' : 'Create Workflow'}
+              </button>
+            </>
+          ) : (
+            <>
+              <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={() => setShowPreview(true)}
+                disabled={!canSubmit}
+                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"
+              >
+                Preview &amp; Create
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}