bmad-studio 0.1.0 → 0.2.0

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

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

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

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

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

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

package/packages/client/src/features/connections/ConnectionsPage.tsx

@@ -1,165 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Plug, CheckCircle, Monitor, Settings } from 'lucide-react'
-
-import { EmptyState } from '../../shared/EmptyState.js'
-import { SlideOver } from '../../shared/SlideOver.js'
-import { SkeletonCard } from '../../shared/Skeleton.js'
-
-type OverviewData = {
-  detected: boolean
-  sections: {
-    ideConfigs?: { ides: string[]; count: number }
-  }
-}
-
-export function ConnectionsPage() {
-  const [data, setData] = useState<OverviewData | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [selectedIde, setSelectedIde] = useState<string | null>(null)
-  const [configContent, setConfigContent] = useState<string | null>(null)
-  const [configLoading, setConfigLoading] = useState(false)
-
-  useEffect(() => {
-    fetch('/api/overview')
-      .then((r) => r.json())
-      .then((d) => {
-        setData(d as OverviewData)
-        setLoading(false)
-      })
-      .catch(() => setLoading(false))
-  }, [])
-
-  async function handleSelectIde(ide: string) {
-    if (selectedIde === ide) {
-      setSelectedIde(null)
-      setConfigContent(null)
-      return
-    }
-    setSelectedIde(ide)
-    setConfigLoading(true)
-    try {
-      // Try to load the IDE config file
-      const resp = await fetch(`/api/files/_config/ides/${ide}.yaml`)
-      if (resp.ok) {
-        const data = (await resp.json()) as { content: string }
-        setConfigContent(data.content)
-      } else {
-        setConfigContent(null)
-      }
-    } catch {
-      setConfigContent(null)
-    } finally {
-      setConfigLoading(false)
-    }
-  }
-
-  if (loading) {
-    return (
-      <div>
-        <h1 className="text-2xl font-extrabold mb-8">Connections</h1>
-        <SkeletonCard count={3} />
-      </div>
-    )
-  }
-
-  const ides = data?.sections?.ideConfigs?.ides ?? []
-
-  if (ides.length === 0) {
-    return (
-      <div>
-        <h1 className="text-2xl font-extrabold mb-8">Connections</h1>
-        <EmptyState
-          icon={Plug}
-          title="No connections configured"
-          description="IDE configurations will appear here when detected in your BMAD project's _config/ides/ directory."
-        />
-      </div>
-    )
-  }
-
-  return (
-    <div>
-      <div>
-        <h1 className="text-2xl font-extrabold mb-8">
-          Connections ({ides.length})
-        </h1>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {ides.map((ide) => (
-            <button
-              key={ide}
-              onClick={() => handleSelectIde(ide)}
-              className={`p-4 rounded-lg border text-left transition-all cursor-pointer hover:-translate-y-0.5 hover:shadow-md ${
-                selectedIde === ide
-                  ? '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-3 mb-3">
-                <div className="w-8 h-8 rounded-md bg-[var(--color-bg)] border border-[var(--color-border-subtle)] flex items-center justify-center">
-                  <Monitor size={16} className="text-[var(--color-accent)]" />
-                </div>
-                <span className="font-bold text-sm">{ide}</span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <span className="w-2 h-2 rounded-full bg-[var(--color-success)]" />
-                <span className="text-xs text-[var(--color-success)]">Configured</span>
-              </div>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {selectedIde && (
-        <SlideOver
-          open
-          title={selectedIde}
-          onClose={() => { setSelectedIde(null); setConfigContent(null) }}
-        >
-            <div>
-              <h3 className="text-sm font-bold mb-2">Status</h3>
-              <div className="flex items-center gap-2 p-3 rounded-lg bg-[var(--color-surface-raised)]">
-                <CheckCircle size={16} className="text-[var(--color-success)]" />
-                <span className="text-sm">Connected and active</span>
-              </div>
-            </div>
-
-            <div>
-              <h3 className="text-sm font-bold mb-2">Integration</h3>
-              <div className="space-y-2">
-                <div className="flex items-center gap-2 p-2 rounded bg-[var(--color-surface-raised)] text-sm">
-                  <Settings size={14} className="text-[var(--color-muted)]" />
-                  <span>Agent commands</span>
-                </div>
-                <div className="flex items-center gap-2 p-2 rounded bg-[var(--color-surface-raised)] text-sm">
-                  <Settings size={14} className="text-[var(--color-muted)]" />
-                  <span>Skill shortcuts</span>
-                </div>
-                <div className="flex items-center gap-2 p-2 rounded bg-[var(--color-surface-raised)] text-sm">
-                  <Settings size={14} className="text-[var(--color-muted)]" />
-                  <span>Workflow triggers</span>
-                </div>
-              </div>
-            </div>
-
-            {configLoading && (
-              <div className="h-32 rounded-lg bg-[var(--color-surface-raised)] animate-pulse" />
-            )}
-
-            {configContent && !configLoading && (
-              <div>
-                <h3 className="text-sm font-bold mb-2">Configuration</h3>
-                <pre className="p-3 text-xs font-[var(--font-mono)] bg-[var(--color-surface-raised)] rounded-lg overflow-x-auto whitespace-pre-wrap max-h-64 overflow-y-auto">
-                  {configContent}
-                </pre>
-              </div>
-            )}
-
-            <div className="text-xs text-[var(--color-muted)]">
-              <p>Config file: <code className="font-[var(--font-mono)]">_bmad/_config/ides/{selectedIde}.yaml</code></p>
-            </div>
-        </SlideOver>
-      )}
-    </div>
-  )
-}