bmad-studio 0.1.0 → 0.2.0

package/packages/client/src/features/files/FilesPage.tsx

@@ -1,177 +0,0 @@
-import { useEffect, useState, useCallback } from 'react'
-import { FolderTree, File, Folder } from 'lucide-react'
-
-import type { FileNode } from '@bmad-studio/shared'
-
-import { EmptyState } from '../../shared/EmptyState.js'
-import { CsvViewer } from '../../shared/CsvViewer.js'
-import { SlideOver } from '../../shared/SlideOver.js'
-import { MarkdownEditor } from '../../shared/markdown-editor/MarkdownEditor.js'
-import { useDetailParam } from '../../hooks/use-detail-param.js'
-
-function TreeNode({
-  node,
-  depth = 0,
-  selectedPath,
-  onSelect,
-}: {
-  node: FileNode
-  depth?: number
-  selectedPath: string | null
-  onSelect: (path: string) => void
-}) {
-  const [expanded, setExpanded] = useState(depth < 2)
-
-  const handleClick = () => {
-    if (node.type === 'directory') {
-      setExpanded(!expanded)
-    } else {
-      onSelect(node.path)
-    }
-  }
-
-  const isSelected = node.type === 'file' && selectedPath === node.path
-
-  return (
-    <div>
-      <button
-        onClick={handleClick}
-        className={`w-full text-left flex items-center gap-2 px-2 py-1.5 text-sm rounded transition-colors ${
-          isSelected
-            ? 'bg-[var(--color-surface-raised)] text-[var(--color-accent)] font-bold'
-            : 'hover:bg-[var(--color-surface-raised)]'
-        } ${node.type === 'directory' || node.type === 'file' ? 'cursor-pointer' : ''}`}
-        style={{ paddingLeft: `${depth * 16 + 8}px` }}
-      >
-        {node.type === 'directory' ? (
-          <Folder size={14} className={expanded ? 'text-[var(--color-accent)]' : 'text-[var(--color-muted)]'} />
-        ) : (
-          <File size={14} className={isSelected ? 'text-[var(--color-accent)]' : 'text-[var(--color-muted)]'} />
-        )}
-        <span className="truncate">{node.name}</span>
-        {node.type === 'file' && node.size !== undefined && (
-          <span className="ml-auto text-xs text-[var(--color-muted)] shrink-0">
-            {node.size > 1024 ? `${(node.size / 1024).toFixed(1)}K` : `${node.size}B`}
-          </span>
-        )}
-      </button>
-      {expanded &&
-        node.children?.map((child) => (
-          <TreeNode
-            key={child.path}
-            node={child}
-            depth={depth + 1}
-            selectedPath={selectedPath}
-            onSelect={onSelect}
-          />
-        ))}
-    </div>
-  )
-}
-
-export function FilesPage() {
-  const [tree, setTree] = useState<FileNode[]>([])
-  const [loading, setLoading] = useState(true)
-  const [selectedFile, setSelectedFile] = useDetailParam('path')
-  const [fileContent, setFileContent] = useState('')
-  const [contentLoading, setContentLoading] = useState(false)
-
-  useEffect(() => {
-    fetch('/api/files')
-      .then((r) => r.json())
-      .then((d) => {
-        setTree(d as FileNode[])
-        setLoading(false)
-      })
-      .catch(() => setLoading(false))
-  }, [])
-
-  const handleSelectFile = useCallback(
-    async (fullPath: string) => {
-      if (selectedFile === fullPath) {
-        setSelectedFile(null)
-        return
-      }
-      setSelectedFile(fullPath)
-      setContentLoading(true)
-
-      // Extract relative path from full path (strip everything up to and including _bmad/)
-      const bmadIndex = fullPath.indexOf('_bmad/')
-      const relativePath = bmadIndex >= 0 ? fullPath.slice(bmadIndex + 6) : fullPath
-
-      try {
-        const resp = await fetch(`/api/files/${relativePath}`)
-        if (resp.ok) {
-          const data = (await resp.json()) as { content: string; path: string }
-          setFileContent(data.content)
-        } else {
-          setFileContent('Failed to load file.')
-        }
-      } catch {
-        setFileContent('Failed to load file content.')
-      } finally {
-        setContentLoading(false)
-      }
-    },
-    [selectedFile],
-  )
-
-  if (loading)
-    return (
-      <div>
-        <h1 className="text-2xl font-extrabold mb-8">Files</h1>
-        <div className="h-64 rounded-lg bg-[var(--color-surface-raised)] animate-pulse" />
-      </div>
-    )
-
-  if (tree.length === 0)
-    return (
-      <div>
-        <h1 className="text-2xl font-extrabold mb-8">Files</h1>
-        <EmptyState
-          icon={FolderTree}
-          title="No BMAD files"
-          description="No _bmad/ directory detected."
-        />
-      </div>
-    )
-
-  return (
-    <div>
-      <h1 className="text-2xl font-extrabold mb-8">Files</h1>
-      <div className="border border-[var(--color-border-subtle)] rounded-lg overflow-hidden overflow-y-auto" style={{ maxHeight: 'calc(100vh - 10rem)' }}>
-        <div className="py-1">
-          {tree.map((node) => (
-            <TreeNode
-              key={node.path}
-              node={node}
-              selectedPath={selectedFile}
-              onSelect={handleSelectFile}
-            />
-          ))}
-        </div>
-      </div>
-
-      <SlideOver
-        open={!!selectedFile}
-        title={selectedFile ?? ''}
-        onClose={() => setSelectedFile(null)}
-      >
-        {contentLoading ? (
-          <div className="h-64 rounded bg-[var(--color-surface-raised)] animate-pulse" />
-        ) : selectedFile?.endsWith('.csv') ? (
-          <CsvViewer content={fileContent} />
-        ) : (
-          <div className="h-96 rounded-lg overflow-hidden border border-[var(--color-border-subtle)]">
-            <MarkdownEditor
-              content={fileContent}
-              filePath={selectedFile ?? ''}
-              onChange={() => {}}
-              readOnly
-            />
-          </div>
-        )}
-      </SlideOver>
-    </div>
-  )
-}

package/packages/client/src/features/outputs/OutputsPage.tsx

@@ -1,190 +0,0 @@
-import { useEffect, useState, useCallback, useMemo } from 'react'
-import { FileOutput, Folder, ChevronDown, ChevronRight } from 'lucide-react'
-
-import { EmptyState } from '../../shared/EmptyState.js'
-import { SlideOver } from '../../shared/SlideOver.js'
-import { MarkdownEditor } from '../../shared/markdown-editor/MarkdownEditor.js'
-import { CsvViewer } from '../../shared/CsvViewer.js'
-import { useDetailParam } from '../../hooks/use-detail-param.js'
-
-type OutputFile = { path: string; name: string; type: string; size: number; modifiedAt: string }
-
-type GroupedOutputs = {
-  [folder: string]: OutputFile[]
-}
-
-function groupByFolder(outputs: OutputFile[]): GroupedOutputs {
-  const groups: GroupedOutputs = {}
-  for (const file of outputs) {
-    // Skip dotfiles
-    if (file.name.startsWith('.')) continue
-    const parts = file.path.split('/')
-    const folder = parts.length > 1 ? parts.slice(0, -1).join('/') : 'root'
-    if (!groups[folder]) groups[folder] = []
-    groups[folder].push(file)
-  }
-  return groups
-}
-
-function FolderGroup({
-  folder,
-  files,
-  selectedPath,
-  onSelect,
-}: {
-  folder: string
-  files: OutputFile[]
-  selectedPath: string | null
-  onSelect: (path: string) => void
-}) {
-  const [expanded, setExpanded] = useState(true)
-  const displayName = folder === 'root' ? 'Root' : folder.split('/').pop() ?? folder
-
-  return (
-    <div>
-      <button
-        onClick={() => setExpanded(!expanded)}
-        className="flex items-center gap-2 px-3 py-2 w-full text-left hover:bg-[var(--color-surface-raised)] rounded-md transition-colors"
-      >
-        {expanded ? (
-          <ChevronDown size={14} className="text-[var(--color-muted)]" />
-        ) : (
-          <ChevronRight size={14} className="text-[var(--color-muted)]" />
-        )}
-        <Folder size={14} className="text-[var(--color-accent)]" />
-        <span className="text-sm font-bold">{displayName}</span>
-        <span className="text-xs text-[var(--color-muted)]">({files.length})</span>
-      </button>
-      {expanded && (
-        <div className="ml-4 space-y-0.5">
-          {files.map((f) => (
-            <button
-              key={f.path}
-              onClick={() => onSelect(f.path)}
-              className={`w-full flex items-center justify-between px-3 py-2 rounded-md transition-colors cursor-pointer text-left ${
-                selectedPath === f.path
-                  ? 'bg-[var(--color-surface-raised)] text-[var(--color-accent)]'
-                  : 'hover:bg-[var(--color-surface-raised)]'
-              }`}
-            >
-              <div className="flex items-center gap-2">
-                <FileOutput size={14} className="text-[var(--color-muted)]" />
-                <span className="text-sm">{f.name}</span>
-              </div>
-              <span className="text-xs text-[var(--color-muted)]">
-                {new Date(f.modifiedAt).toLocaleDateString()}
-              </span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export function OutputsPage() {
-  const [outputs, setOutputs] = useState<OutputFile[]>([])
-  const [loading, setLoading] = useState(true)
-  const [selectedPath, setSelectedPath] = useDetailParam('path')
-  const [selectedContent, setSelectedContent] = useState('')
-  const [contentLoading, setContentLoading] = useState(false)
-
-  useEffect(() => {
-    fetch('/api/outputs')
-      .then((r) => r.json())
-      .then((d) => {
-        setOutputs(d as OutputFile[])
-        setLoading(false)
-      })
-      .catch(() => setLoading(false))
-  }, [])
-
-  const grouped = useMemo(() => groupByFolder(outputs), [outputs])
-  const visibleCount = useMemo(
-    () => Object.values(grouped).reduce((sum, files) => sum + files.length, 0),
-    [grouped],
-  )
-
-  const handleSelect = useCallback(
-    async (filePath: string) => {
-      if (selectedPath === filePath) {
-        setSelectedPath(null)
-        return
-      }
-      setSelectedPath(filePath)
-      setContentLoading(true)
-      try {
-        const resp = await fetch(`/api/outputs/${filePath}`)
-        if (resp.ok) {
-          const data = (await resp.json()) as { content: string; path: string }
-          setSelectedContent(data.content)
-        }
-      } catch {
-        setSelectedContent('Failed to load file content.')
-      } finally {
-        setContentLoading(false)
-      }
-    },
-    [selectedPath],
-  )
-
-  if (loading)
-    return (
-      <div>
-        <h1 className="text-2xl font-extrabold mb-8">Outputs</h1>
-        <div className="h-32 rounded-lg bg-[var(--color-surface-raised)] animate-pulse" />
-      </div>
-    )
-
-  if (visibleCount === 0)
-    return (
-      <div>
-        <h1 className="text-2xl font-extrabold mb-8">Outputs</h1>
-        <EmptyState
-          icon={FileOutput}
-          title="No outputs yet"
-          description="Run workflows to generate output files."
-        />
-      </div>
-    )
-
-  return (
-    <div>
-      <h1 className="text-2xl font-extrabold mb-8">Outputs ({visibleCount})</h1>
-      <div className="space-y-2">
-        {Object.entries(grouped)
-          .sort(([a], [b]) => a.localeCompare(b))
-          .map(([folder, files]) => (
-            <FolderGroup
-              key={folder}
-              folder={folder}
-              files={files}
-              selectedPath={selectedPath}
-              onSelect={handleSelect}
-            />
-          ))}
-      </div>
-
-      <SlideOver
-        open={!!selectedPath}
-        title={selectedPath ?? ''}
-        onClose={() => setSelectedPath(null)}
-      >
-        {contentLoading ? (
-          <div className="h-64 rounded bg-[var(--color-surface-raised)] animate-pulse" />
-        ) : selectedPath?.endsWith('.csv') ? (
-          <CsvViewer content={selectedContent} />
-        ) : (
-          <div className="h-96 rounded-lg overflow-hidden border border-[var(--color-border-subtle)]">
-            <MarkdownEditor
-              content={selectedContent}
-              filePath={selectedPath ?? ''}
-              onChange={() => {}}
-              readOnly
-            />
-          </div>
-        )}
-      </SlideOver>
-    </div>
-  )
-}

package/packages/client/src/features/overview/OverviewPage.tsx

@@ -1,282 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
-import { GitBranch, Zap, Plug, Package, Rocket, Users } from 'lucide-react'
-
-import { EmptyState } from '../../shared/EmptyState.js'
-import { WorkflowTypeBadge } from '../workflows/WorkflowsPage.js'
-
-type OverviewData = {
-  detected: boolean
-  sections: {
-    teams?: {
-      teams: Array<{
-        id: string
-        name: string
-        icon: string
-        description: string
-        memberCount: number
-        module?: string
-      }>
-      count: number
-    }
-    team?: {
-      agents: Array<{
-        id: string
-        name: string
-        title: string
-        icon?: string
-        role: string
-        skillCount: number
-        module?: string
-      }>
-      count: number
-    }
-    process?: {
-      workflows: Array<{ id: string; name: string; stepCount: number; module?: string; type?: string }>
-      count: number
-    }
-    toolkit?: { skills: Array<{ id: string; name: string; module?: string }>; count: number }
-    packages?: { packages: Array<{ name: string; version: string }>; count: number }
-    ideConfigs?: { ides: string[]; count: number }
-  }
-}
-
-function SectionHeader({ title, count, to }: { title: string; count: number; to: string }) {
-  return (
-    <div className="flex items-center justify-between mb-4">
-      <h2 className="text-xs font-bold uppercase tracking-wider text-[var(--color-muted)]">{title}</h2>
-      <Link
-        to={to}
-        className="text-sm font-bold text-[var(--color-accent)] hover:text-[var(--color-accent-hover)] transition-colors"
-      >
-        View all ({count}) &rarr;
-      </Link>
-    </div>
-  )
-}
-
-const MAX_OVERVIEW_ITEMS = 5
-const MAX_OVERVIEW_AGENTS = 8
-
-export function OverviewPage() {
-  const navigate = useNavigate()
-  const [data, setData] = useState<OverviewData | null>(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    fetch('/api/overview')
-      .then((r) => r.json())
-      .then((d) => {
-        setData(d as OverviewData)
-        setLoading(false)
-      })
-      .catch(() => setLoading(false))
-  }, [])
-
-  if (loading) {
-    return (
-      <div className="space-y-8">
-        {[1, 2, 3].map((i) => (
-          <div key={i} className="h-32 rounded-lg bg-[var(--color-surface-raised)] animate-pulse" />
-        ))}
-      </div>
-    )
-  }
-
-  if (!data?.detected) {
-    return (
-      <EmptyState
-        icon={Rocket}
-        title="Welcome to BMAD Studio"
-        description="No BMAD project detected. Start by creating a BMAD project or point Studio to an existing one with --dir."
-      />
-    )
-  }
-
-  const { sections } = data
-
-  return (
-    <div>
-      <h1 className="text-3xl font-extrabold mb-10">Overview</h1>
-
-      <div className="space-y-0">
-        {/* Agents — first section, renamed from "The Team" */}
-        {sections.team && sections.team.count > 0 && (
-          <section className="border-b border-[var(--color-border-subtle)] pb-10 mb-10">
-            <SectionHeader title="Agents" count={sections.team.count} to="/agents" />
-            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-              {sections.team.agents.filter((a) => a.name || a.title).slice(0, MAX_OVERVIEW_AGENTS).map((agent) => {
-                const displayTitle = agent.title || agent.name
-                return (
-                  <button
-                    key={agent.id}
-                    onClick={() => navigate(`/agents/${agent.id}`)}
-                    className="p-4 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] text-left hover:border-[var(--color-accent)] hover:-translate-y-0.5 hover:shadow-md transition-all cursor-pointer"
-                  >
-                    <div className="flex items-center gap-2 mb-2">
-                      {agent.icon ? (
-                        <span className="text-lg leading-none" role="img">{agent.icon}</span>
-                      ) : (
-                        <span className="w-5 h-5 rounded bg-[var(--color-accent)] text-white text-[10px] font-bold flex items-center justify-center shrink-0">
-                          {agent.name.charAt(0).toUpperCase()}
-                        </span>
-                      )}
-                      <span className="font-bold text-sm truncate">{displayTitle}</span>
-                    </div>
-                    {agent.title && (
-                      <p className="text-xs text-[var(--color-muted)] truncate">({agent.name})</p>
-                    )}
-                    <p className="text-xs text-[var(--color-muted)] mt-1">{agent.skillCount} skills</p>
-                  </button>
-                )
-              })}
-            </div>
-            {sections.team.count > MAX_OVERVIEW_AGENTS && (
-              <Link
-                to="/agents"
-                className="block text-center text-sm text-[var(--color-accent)] hover:text-[var(--color-accent-hover)] py-2 mt-2"
-              >
-                + {sections.team.count - MAX_OVERVIEW_AGENTS} more agents
-              </Link>
-            )}
-          </section>
-        )}
-
-        {/* Teams — below Agents */}
-        {sections.teams && sections.teams.count > 0 && (
-          <section className="border-b border-[var(--color-border-subtle)] pb-10 mb-10">
-            <SectionHeader title="Teams" count={sections.teams.count} to="/teams" />
-            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-              {sections.teams.teams.map((t) => (
-                <button
-                  key={t.id}
-                  onClick={() => navigate('/teams')}
-                  className="p-4 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] text-left hover:border-[var(--color-accent)] hover:-translate-y-0.5 hover:shadow-md transition-all cursor-pointer"
-                >
-                  <div className="flex items-center gap-2 mb-2">
-                    {t.icon ? (
-                      <span className="text-lg leading-none" role="img">{t.icon}</span>
-                    ) : (
-                      <Users size={18} className="text-[var(--color-accent)]" />
-                    )}
-                    <span className="font-bold text-sm truncate">{t.name}</span>
-                  </div>
-                  {t.description && (
-                    <p className="text-xs text-[var(--color-muted)] line-clamp-2 mb-1">{t.description}</p>
-                  )}
-                  <p className="text-xs text-[var(--color-muted)]">{t.memberCount} members</p>
-                </button>
-              ))}
-            </div>
-          </section>
-        )}
-
-        {/* Workflows — top 5 */}
-        {sections.process && sections.process.count > 0 && (
-          <section className="border-b border-[var(--color-border-subtle)] pb-10 mb-10">
-            <SectionHeader title="Workflows" count={sections.process.count} to="/workflows" />
-            <div className="space-y-2">
-              {sections.process.workflows.slice(0, MAX_OVERVIEW_ITEMS).map((wf) => (
-                <button
-                  key={wf.id}
-                  onClick={() => navigate('/workflows')}
-                  className="w-full flex items-center justify-between p-3 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] hover:border-[var(--color-accent)] transition-colors cursor-pointer"
-                >
-                  <div className="flex items-center gap-3">
-                    <GitBranch size={16} className="text-[var(--color-muted)]" />
-                    <span className="text-sm font-bold">{wf.name}</span>
-                  </div>
-                  <div className="flex items-center gap-3">
-                    <WorkflowTypeBadge type={wf.type as 'step-based' | 'agent-based' | 'composite' | undefined} />
-                    <span className="text-xs text-[var(--color-muted)]">{wf.stepCount} steps</span>
-                    {wf.module && (
-                      <span className="text-xs px-2 py-0.5 rounded-full bg-[var(--color-bg)] border border-[var(--color-border-subtle)] text-[var(--color-muted)]">
-                        {wf.module}
-                      </span>
-                    )}
-                  </div>
-                </button>
-              ))}
-              {sections.process.count > MAX_OVERVIEW_ITEMS && (
-                <Link
-                  to="/workflows"
-                  className="block text-center text-sm text-[var(--color-accent)] hover:text-[var(--color-accent-hover)] py-2"
-                >
-                  + {sections.process.count - MAX_OVERVIEW_ITEMS} more workflows
-                </Link>
-              )}
-            </div>
-          </section>
-        )}
-
-        {/* Skills — card-style, top items */}
-        {sections.toolkit && sections.toolkit.count > 0 && (
-          <section className="border-b border-[var(--color-border-subtle)] pb-10 mb-10">
-            <SectionHeader title="Skills" count={sections.toolkit.count} to="/skills" />
-            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
-              {sections.toolkit.skills.slice(0, 8).map((skill) => (
-                <button
-                  key={skill.id}
-                  onClick={() => navigate('/skills')}
-                  className="flex items-center gap-2 p-3 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] text-left hover:border-[var(--color-accent)] transition-colors cursor-pointer"
-                >
-                  <Zap size={14} className="text-[var(--color-accent)] shrink-0" />
-                  <span className="text-sm truncate">{skill.name}</span>
-                </button>
-              ))}
-            </div>
-            {sections.toolkit.count > 8 && (
-              <Link
-                to="/skills"
-                className="block text-center text-sm text-[var(--color-accent)] hover:text-[var(--color-accent-hover)] py-2 mt-2"
-              >
-                + {sections.toolkit.count - 8} more skills
-              </Link>
-            )}
-          </section>
-        )}
-
-        {/* Connections */}
-        {sections.ideConfigs && sections.ideConfigs.count > 0 && (
-          <section className="border-b border-[var(--color-border-subtle)] pb-10 mb-10">
-            <SectionHeader title="Data Sources" count={sections.ideConfigs.count} to="/connections" />
-            <div className="flex gap-3 flex-wrap">
-              {sections.ideConfigs.ides.map((ide) => (
-                <button
-                  key={ide}
-                  onClick={() => navigate('/connections')}
-                  className="flex items-center gap-2 px-4 py-3 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] hover:border-[var(--color-accent)] hover:-translate-y-0.5 hover:shadow-md transition-all cursor-pointer"
-                >
-                  <Plug size={16} className="text-[var(--color-success)]" />
-                  <span className="text-sm">{ide}</span>
-                </button>
-              ))}
-            </div>
-          </section>
-        )}
-
-        {/* Modules */}
-        {sections.packages && sections.packages.count > 0 && (
-          <section>
-            <SectionHeader title="Modules" count={sections.packages.count} to="/modules" />
-            <div className="flex gap-4 flex-wrap">
-              {sections.packages.packages.map((pkg) => (
-                <button
-                  key={pkg.name}
-                  onClick={() => navigate('/modules')}
-                  className="p-4 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] text-left hover:border-[var(--color-accent)] hover:-translate-y-0.5 hover:shadow-md transition-all cursor-pointer"
-                >
-                  <div className="flex items-center gap-2">
-                    <Package size={16} className="text-[var(--color-muted)]" />
-                    <span className="font-bold text-sm">{pkg.name}</span>
-                  </div>
-                  <p className="text-xs text-[var(--color-muted)] mt-1">v{pkg.version}</p>
-                </button>
-              ))}
-            </div>
-          </section>
-        )}
-      </div>
-    </div>
-  )
-}