bmad-studio 0.1.0 → 0.2.0

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

@@ -1,196 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,395 +0,0 @@
-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>
-  )
-}