bmad-studio 0.1.0 → 0.2.0

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

@@ -1,549 +0,0 @@
-import { useState, useMemo, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import {
-  X,
-  AlertTriangle,
-  FileText,
-  ChevronDown,
-  ChevronRight,
-  Pencil,
-  Trash2,
-  Save,
-  Search,
-} from 'lucide-react'
-import { useQueryClient } from '@tanstack/react-query'
-
-import type { AgentListItem } from '@bmad-studio/shared'
-
-import { useTeamDetail, useTeamParty } from './use-teams.js'
-import { CsvViewer } from '../../shared/CsvViewer.js'
-import { useNotifications } from '../../layout/NotificationProvider.js'
-
-type TeamDetailPanelProps = {
-  teamId: string
-  onClose: () => void
-  onTeamUpdated?: () => void
-}
-
-function DeleteTeamDialog({
-  teamId,
-  teamName,
-  onClose,
-  onDeleted,
-}: {
-  teamId: string
-  teamName: string
-  onClose: () => void
-  onDeleted: () => void
-}) {
-  const [confirmName, setConfirmName] = useState('')
-  const [error, setError] = useState<string | null>(null)
-  const [submitting, setSubmitting] = useState(false)
-
-  const confirmed = confirmName === teamName
-
-  const handleDelete = async () => {
-    if (!confirmed) return
-    setSubmitting(true)
-    setError(null)
-    try {
-      const resp = await fetch(`/api/teams/${teamId}`, { method: 'DELETE' })
-      if (!resp.ok) {
-        const data = (await resp.json()) as { error?: { message?: string } }
-        throw new Error(data.error?.message ?? 'Failed to delete team')
-      }
-      onDeleted()
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to delete team')
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  return (
-    <div className="fixed inset-0 z-[60] 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-md p-6">
-        <div className="flex items-center gap-2 mb-4">
-          <AlertTriangle size={20} className="text-[var(--color-error)]" />
-          <h2 className="text-lg font-bold">Delete Team</h2>
-        </div>
-
-        <div className="space-y-4">
-          <p className="text-sm">
-            This will permanently delete the <strong>{teamName}</strong> team YAML file. The party
-            CSV will be preserved.
-          </p>
-
-          <div>
-            <label className="block text-sm mb-1">
-              Type <strong>{teamName}</strong> to confirm:
-            </label>
-            <input
-              type="text"
-              value={confirmName}
-              onChange={(e) => setConfirmName(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-error)] focus:outline-none"
-            />
-          </div>
-
-          {error && <p className="text-sm text-[var(--color-error)]">{error}</p>}
-        </div>
-
-        <div className="flex justify-end gap-3 mt-6">
-          <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={handleDelete}
-            disabled={!confirmed || submitting}
-            className="px-4 py-2 text-sm font-bold rounded-md bg-[var(--color-error)] text-white hover:opacity-90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
-          >
-            <Trash2 size={14} />
-            {submitting ? 'Deleting...' : 'Delete Team'}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function TeamDetailPanel({ teamId, onClose, onTeamUpdated }: TeamDetailPanelProps) {
-  const navigate = useNavigate()
-  const queryClient = useQueryClient()
-  const { notify } = useNotifications()
-  const { data: team, isLoading } = useTeamDetail(teamId)
-  const { data: partyData } = useTeamParty(teamId)
-  const [showParty, setShowParty] = useState(false)
-  const [showDelete, setShowDelete] = useState(false)
-
-  // Edit mode state
-  const [editing, setEditing] = useState(false)
-  const [editName, setEditName] = useState('')
-  const [editIcon, setEditIcon] = useState('')
-  const [editDescription, setEditDescription] = useState('')
-  const [editAgentIds, setEditAgentIds] = useState<Set<string>>(new Set())
-  const [agentSearch, setAgentSearch] = useState('')
-  const [allAgents, setAllAgents] = useState<AgentListItem[]>([])
-  const [saving, setSaving] = useState(false)
-
-  // Party CSV edit mode
-  const [editingParty, setEditingParty] = useState(false)
-  const [partyCsvContent, setPartyCsvContent] = useState('')
-
-  // Populate edit fields when entering edit mode
-  useEffect(() => {
-    if (editing && team) {
-      setEditName(team.name)
-      setEditIcon(team.icon)
-      setEditDescription(team.description)
-      setEditAgentIds(new Set(team.agentIds))
-      // Fetch all agents for the selection list
-      fetch('/api/agents')
-        .then((r) => r.json())
-        .then((data) => setAllAgents(data as AgentListItem[]))
-        .catch(() => {})
-    }
-  }, [editing, team])
-
-  const unresolved = useMemo(() => {
-    if (!team) return []
-    const resolvedIds = new Set(team.members.map((m) => m.agentId))
-    return team.agentIds.filter((id) => !resolvedIds.has(id))
-  }, [team])
-
-  const filteredAgents = allAgents.filter((a) => {
-    if (!agentSearch) return true
-    const q = agentSearch.toLowerCase()
-    return (
-      a.name.toLowerCase().includes(q) ||
-      a.title.toLowerCase().includes(q) ||
-      (a.role && a.role.toLowerCase().includes(q))
-    )
-  })
-
-  const toggleAgent = (agentId: string) => {
-    setEditAgentIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(agentId)) {
-        next.delete(agentId)
-      } else {
-        next.add(agentId)
-      }
-      return next
-    })
-  }
-
-  const handleSave = async () => {
-    if (!team) return
-    setSaving(true)
-    try {
-      const resp = await fetch(`/api/teams/${teamId}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          name: editName.trim(),
-          icon: editIcon.trim(),
-          description: editDescription.trim(),
-          agentIds: Array.from(editAgentIds),
-        }),
-      })
-      if (!resp.ok) {
-        const data = (await resp.json()) as { error?: { message?: string } }
-        throw new Error(data.error?.message ?? 'Failed to update team')
-      }
-      notify('success', `Team "${editName}" updated`)
-      setEditing(false)
-      await queryClient.invalidateQueries({ queryKey: ['teams'] })
-      onTeamUpdated?.()
-    } catch (err) {
-      notify('error', err instanceof Error ? err.message : 'Failed to update team')
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const handleSaveParty = async () => {
-    if (!team) return
-    try {
-      const resp = await fetch(`/api/teams/${teamId}/party`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ content: partyCsvContent }),
-      })
-      if (!resp.ok) {
-        const data = (await resp.json()) as { error?: { message?: string } }
-        throw new Error(data.error?.message ?? 'Failed to save party CSV')
-      }
-      notify('success', 'Party CSV updated')
-      setEditingParty(false)
-      await queryClient.invalidateQueries({ queryKey: ['teams'] })
-    } catch (err) {
-      notify('error', err instanceof Error ? err.message : 'Failed to save party CSV')
-    }
-  }
-
-  const handleDeleted = async () => {
-    setShowDelete(false)
-    await queryClient.invalidateQueries({ queryKey: ['teams'] })
-    onTeamUpdated?.()
-    onClose()
-  }
-
-  return (
-    <div
-      className="slide-over-backdrop"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose()
-      }}
-    >
-      <div className="slide-over-bg" onClick={onClose} />
-      <aside className="slide-over-panel" style={{ width: 'max(400px, 40vw)' }}>
-        <div className="px-6 py-4 border-b border-[var(--color-border-subtle)] flex items-center justify-between">
-          <div className="flex items-center gap-3 min-w-0">
-            {team?.icon && <span className="text-xl leading-none">{team.icon}</span>}
-            <h2 className="text-lg font-bold truncate">{team?.name ?? 'Loading...'}</h2>
-          </div>
-          <div className="flex items-center gap-2 shrink-0 ml-2">
-            {team && !editing && (
-              <>
-                <button
-                  onClick={() => setEditing(true)}
-                  className="text-[var(--color-muted)] hover:text-[var(--color-accent)] transition-colors"
-                  title="Edit Team"
-                >
-                  <Pencil size={16} />
-                </button>
-                <button
-                  onClick={() => setShowDelete(true)}
-                  className="text-[var(--color-muted)] hover:text-[var(--color-error)] transition-colors"
-                  title="Delete Team"
-                >
-                  <Trash2 size={16} />
-                </button>
-              </>
-            )}
-            <button
-              onClick={onClose}
-              className="text-[var(--color-muted)] hover:text-[var(--color-text)]"
-            >
-              <X size={18} />
-            </button>
-          </div>
-        </div>
-
-        {isLoading && (
-          <div className="p-6 space-y-3">
-            <div className="h-4 w-3/4 rounded bg-[var(--color-surface-raised)] animate-pulse" />
-            <div className="h-32 rounded bg-[var(--color-surface-raised)] animate-pulse" />
-          </div>
-        )}
-
-        {team && !editing && (
-          <div
-            className="p-6 space-y-6 overflow-y-auto"
-            style={{ maxHeight: 'calc(100vh - 65px)' }}
-          >
-            {/* Meta */}
-            <div>
-              <p className="text-sm text-[var(--color-muted)]">{team.description}</p>
-              {team.module && (
-                <span className="inline-block mt-2 text-xs px-2 py-0.5 rounded-full bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)]">
-                  {team.module}
-                </span>
-              )}
-            </div>
-
-            {/* Members */}
-            <div>
-              <h3 className="text-sm font-bold mb-3">Members ({team.members.length})</h3>
-              <div className="space-y-2">
-                {team.members.map((member) => (
-                  <button
-                    key={member.agentId}
-                    onClick={() => navigate(`/agents/${member.agentId}`)}
-                    className="w-full flex items-start gap-3 p-3 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] hover:border-[var(--color-accent)] transition-colors cursor-pointer text-left"
-                  >
-                    <span className="text-lg leading-none mt-0.5">{member.icon}</span>
-                    <div className="min-w-0 flex-1">
-                      <div className="flex items-center gap-2">
-                        <span className="text-sm font-bold">{member.displayName}</span>
-                        <span className="text-xs text-[var(--color-muted)]">{member.title}</span>
-                      </div>
-                      {member.communicationStyle && (
-                        <p className="text-xs text-[var(--color-muted)] mt-1 line-clamp-2">
-                          {member.communicationStyle}
-                        </p>
-                      )}
-                    </div>
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* Unresolved agents */}
-            {unresolved.length > 0 && (
-              <div>
-                <h3 className="text-sm font-bold mb-2 flex items-center gap-1.5">
-                  <AlertTriangle size={14} className="text-[var(--color-warning)]" />
-                  Unresolved Agents ({unresolved.length})
-                </h3>
-                <div className="space-y-1">
-                  {unresolved.map((id) => (
-                    <div
-                      key={id}
-                      className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-warning)]/30"
-                    >
-                      <AlertTriangle size={12} className="text-[var(--color-warning)]" />
-                      <span className="text-sm font-[var(--font-mono)]">{id}</span>
-                      <span className="text-xs text-[var(--color-muted)]">
-                        — not found in party CSV
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Party Mode section */}
-            <div>
-              <h3 className="text-sm font-bold mb-2">Party Mode</h3>
-              <div className="p-3 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)]">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <FileText size={14} className="text-[var(--color-muted)]" />
-                    <span className="text-sm">{team.partyFile || 'No party CSV'}</span>
-                  </div>
-                  <span className="text-xs text-[var(--color-muted)]">
-                    {team.members.length} personas
-                  </span>
-                </div>
-                {team.partyFile && (
-                  <div className="flex items-center gap-3 mt-2">
-                    <button
-                      onClick={() => setShowParty(!showParty)}
-                      className="flex items-center gap-1.5 text-xs text-[var(--color-accent)] hover:text-[var(--color-accent-hover)] transition-colors"
-                    >
-                      {showParty ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-                      {showParty ? 'Hide' : 'View'} Party Personas
-                    </button>
-                    {showParty && partyData?.content && !editingParty && (
-                      <button
-                        onClick={() => {
-                          setPartyCsvContent(partyData.content)
-                          setEditingParty(true)
-                        }}
-                        className="flex items-center gap-1.5 text-xs text-[var(--color-accent)] hover:text-[var(--color-accent-hover)] transition-colors"
-                      >
-                        <Pencil size={10} />
-                        Edit Party Personas
-                      </button>
-                    )}
-                  </div>
-                )}
-              </div>
-
-              {showParty && partyData?.content && !editingParty && (
-                <div className="mt-2 rounded-lg border border-[var(--color-border-subtle)] overflow-hidden h-64">
-                  <CsvViewer content={partyData.content} />
-                </div>
-              )}
-
-              {showParty && editingParty && (
-                <div className="mt-2 space-y-2">
-                  <textarea
-                    value={partyCsvContent}
-                    onChange={(e) => setPartyCsvContent(e.target.value)}
-                    className="w-full h-64 px-3 py-2 text-xs font-[var(--font-mono)] rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none resize-none"
-                  />
-                  <div className="flex items-center gap-2">
-                    <button
-                      onClick={handleSaveParty}
-                      className="px-3 py-1.5 text-xs font-bold rounded-md bg-[var(--color-accent)] text-white hover:bg-[var(--color-accent-hover)] transition-colors flex items-center gap-1.5"
-                    >
-                      <Save size={12} />
-                      Save Party CSV
-                    </button>
-                    <button
-                      onClick={() => setEditingParty(false)}
-                      className="px-3 py-1.5 text-xs rounded-md border border-[var(--color-border-subtle)] hover:bg-[var(--color-surface-raised)] transition-colors"
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      disabled
-                      className="px-3 py-1.5 text-xs rounded-md border border-[var(--color-border-subtle)] text-[var(--color-muted)] opacity-50 cursor-not-allowed"
-                      title="Coming soon"
-                    >
-                      Generate from Agents
-                    </button>
-                    <button
-                      disabled
-                      className="px-3 py-1.5 text-xs rounded-md border border-[var(--color-border-subtle)] text-[var(--color-muted)] opacity-50 cursor-not-allowed"
-                      title="Coming soon"
-                    >
-                      Sync
-                    </button>
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Edit mode */}
-        {team && editing && (
-          <div
-            className="p-6 space-y-4 overflow-y-auto"
-            style={{ maxHeight: 'calc(100vh - 65px)' }}
-          >
-            <div>
-              <label className="block text-sm font-bold mb-1">Name</label>
-              <input
-                type="text"
-                value={editName}
-                onChange={(e) => setEditName(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"
-              />
-            </div>
-
-            <div>
-              <label className="block text-sm font-bold mb-1">Icon</label>
-              <input
-                type="text"
-                value={editIcon}
-                onChange={(e) => setEditIcon(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"
-              />
-            </div>
-
-            <div>
-              <label className="block text-sm font-bold mb-1">Description</label>
-              <textarea
-                value={editDescription}
-                onChange={(e) => setEditDescription(e.target.value)}
-                rows={3}
-                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>
-
-            <div>
-              <label className="block text-sm font-bold mb-1">
-                Agents ({editAgentIds.size} selected)
-              </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={agentSearch}
-                  onChange={(e) => setAgentSearch(e.target.value)}
-                  placeholder="Search agents..."
-                  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">
-                {filteredAgents.length === 0 ? (
-                  <p className="text-xs text-[var(--color-muted)] p-3 text-center">
-                    No agents found
-                  </p>
-                ) : (
-                  filteredAgents.map((agent) => (
-                    <label
-                      key={agent.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={editAgentIds.has(agent.id)}
-                        onChange={() => toggleAgent(agent.id)}
-                        className="accent-[var(--color-accent)]"
-                      />
-                      <span className="flex items-center gap-2 min-w-0">
-                        {agent.icon && (
-                          <span className="text-sm leading-none">{agent.icon}</span>
-                        )}
-                        <span className="truncate font-bold">{agent.title || agent.name}</span>
-                      </span>
-                    </label>
-                  ))
-                )}
-              </div>
-            </div>
-
-            <div className="flex items-center gap-3 pt-2">
-              <button
-                onClick={handleSave}
-                disabled={saving || !editName.trim()}
-                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} />
-                {saving ? 'Saving...' : 'Save Changes'}
-              </button>
-              <button
-                onClick={() => setEditing(false)}
-                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>
-            </div>
-          </div>
-        )}
-      </aside>
-
-      {showDelete && team && (
-        <DeleteTeamDialog
-          teamId={teamId}
-          teamName={team.name}
-          onClose={() => setShowDelete(false)}
-          onDeleted={handleDeleted}
-        />
-      )}
-    </div>
-  )
-}