bmad-studio 0.1.0

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

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

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

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

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