bmad-studio 0.1.0 → 0.2.0

package/packages/client/src/shared/EmptyState.tsx

@@ -1,20 +0,0 @@
-import type { ReactNode } from 'react'
-import type { LucideIcon } from 'lucide-react'
-
-type EmptyStateProps = {
-  icon: LucideIcon
-  title: string
-  description: string
-  actions?: ReactNode
-}
-
-export function EmptyState({ icon: Icon, title, description, actions }: EmptyStateProps) {
-  return (
-    <div className="flex flex-col items-center justify-center py-16 text-center">
-      <Icon size={48} className="text-[var(--color-muted)] mb-4" strokeWidth={1.5} />
-      <h2 className="text-lg font-bold text-[var(--color-text)] mb-2">{title}</h2>
-      <p className="text-sm text-[var(--color-muted)] max-w-md mb-6">{description}</p>
-      {actions && <div className="flex gap-3">{actions}</div>}
-    </div>
-  )
-}

package/packages/client/src/shared/EntityPageHeader.tsx

@@ -1,95 +0,0 @@
-import { Search } from 'lucide-react'
-
-type EntityPageHeaderProps = {
-  title: string
-  count: number
-  modules: string[]
-  moduleCounts?: Record<string, number>
-  activeModule: string
-  onModuleChange: (module: string) => void
-  search: string
-  onSearchChange: (value: string) => void
-  searchPlaceholder?: string
-  filteredCount?: number
-  actions?: React.ReactNode
-}
-
-export function EntityPageHeader({
-  title,
-  count,
-  modules,
-  moduleCounts,
-  activeModule,
-  onModuleChange,
-  search,
-  onSearchChange,
-  searchPlaceholder,
-  filteredCount,
-  actions,
-}: EntityPageHeaderProps) {
-  return (
-    <div className="mb-6">
-      {/* Main row: title, module tabs, search, actions */}
-      <div className="flex items-center gap-4 flex-wrap">
-        <h1 className="text-2xl font-extrabold shrink-0">
-          {title} ({count})
-        </h1>
-
-        {modules.length > 0 && (
-          <div className="flex gap-1 flex-wrap">
-            <button
-              onClick={() => onModuleChange('all')}
-              className={`px-3 py-1.5 text-sm rounded-md min-h-[36px] transition-colors ${
-                activeModule === 'all'
-                  ? 'bg-[var(--color-surface-raised)] text-[var(--color-text)] font-bold'
-                  : 'text-[var(--color-muted)] hover:text-[var(--color-text)]'
-              }`}
-            >
-              All
-            </button>
-            {modules.map((mod) => (
-              <button
-                key={mod}
-                onClick={() => onModuleChange(mod)}
-                className={`px-3 py-1.5 text-sm rounded-md min-h-[36px] transition-colors ${
-                  activeModule === mod
-                    ? 'bg-[var(--color-surface-raised)] text-[var(--color-text)] font-bold'
-                    : 'text-[var(--color-muted)] hover:text-[var(--color-text)]'
-                }`}
-              >
-                {mod}
-                {moduleCounts && moduleCounts[mod] !== undefined && (
-                  <span className="ml-1 text-xs opacity-60">({moduleCounts[mod]})</span>
-                )}
-              </button>
-            ))}
-          </div>
-        )}
-
-        <div className="flex items-center gap-3 ml-auto shrink-0">
-          <div className="relative">
-            <Search
-              size={14}
-              className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-muted)]"
-            />
-            <input
-              type="text"
-              placeholder={searchPlaceholder ?? `Search ${title.toLowerCase()}...`}
-              value={search}
-              onChange={(e) => onSearchChange(e.target.value)}
-              className="pl-9 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)] w-64"
-            />
-          </div>
-          {actions}
-        </div>
-      </div>
-
-      {/* Filtered results count */}
-      {filteredCount !== undefined && filteredCount !== count && (
-        <p className="text-xs text-[var(--color-muted)] mt-3">
-          Showing {filteredCount} of {count} {title.toLowerCase()}
-        </p>
-      )}
-    </div>
-  )
-}

package/packages/client/src/shared/FilepathLink.tsx

@@ -1,22 +0,0 @@
-import { Link } from 'react-router-dom'
-import { ExternalLink } from 'lucide-react'
-
-type FilepathLinkProps = {
-  path: string
-  className?: string
-  showIcon?: boolean
-}
-
-export function FilepathLink({ path, className, showIcon }: FilepathLinkProps) {
-  return (
-    <span className={`inline-flex items-center gap-2 text-xs ${className ?? ''}`}>
-      {showIcon && <ExternalLink size={12} className="text-[var(--color-muted)] shrink-0" />}
-      <Link
-        to={`/files?path=${encodeURIComponent(path)}`}
-        className="font-[var(--font-mono)] text-[var(--color-accent)] hover:underline break-all"
-      >
-        {path}
-      </Link>
-    </span>
-  )
-}

package/packages/client/src/shared/Skeleton.tsx

@@ -1,31 +0,0 @@
-type SkeletonProps = {
-  className?: string
-}
-
-export function Skeleton({ className = '' }: SkeletonProps) {
-  return (
-    <div
-      className={`rounded-lg bg-[var(--color-surface-raised)] animate-pulse ${className}`}
-    />
-  )
-}
-
-export function SkeletonList({ count = 3, height = 'h-16' }: { count?: number; height?: string }) {
-  return (
-    <div className="space-y-3">
-      {Array.from({ length: count }, (_, i) => (
-        <Skeleton key={i} className={height} />
-      ))}
-    </div>
-  )
-}
-
-export function SkeletonCard({ count = 3 }: { count?: number }) {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {Array.from({ length: count }, (_, i) => (
-        <Skeleton key={i} className="h-24" />
-      ))}
-    </div>
-  )
-}

package/packages/client/src/shared/SlideOver.tsx

@@ -1,63 +0,0 @@
-import { useEffect, useRef } from 'react'
-import { X } from 'lucide-react'
-
-type SlideOverProps = {
-  open: boolean
-  onClose: () => void
-  title: React.ReactNode
-  actions?: React.ReactNode
-  children: React.ReactNode
-  width?: string
-}
-
-export function SlideOver({ open, onClose, title, actions, children, width }: SlideOverProps) {
-  const panelRef = useRef<HTMLElement>(null)
-
-  useEffect(() => {
-    if (!open) return
-
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === 'Escape') onClose()
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [open, onClose])
-
-  // Focus the panel when it opens
-  useEffect(() => {
-    if (open && panelRef.current) {
-      panelRef.current.focus()
-    }
-  }, [open])
-
-  if (!open) return null
-
-  return (
-    <div className="slide-over-backdrop">
-      <div className="slide-over-bg" onClick={onClose} />
-      <aside
-        ref={panelRef}
-        tabIndex={-1}
-        className="slide-over-panel outline-none"
-        style={{ width: width ?? 'max(400px, 40vw)' }}
-      >
-        <div className="px-6 py-4 border-b border-[var(--color-border-subtle)] flex items-center justify-between shrink-0">
-          <h2 className="text-lg font-bold truncate">{title}</h2>
-          <div className="flex items-center gap-2 shrink-0">
-            {actions}
-            <button
-              onClick={onClose}
-              className="text-[var(--color-muted)] hover:text-[var(--color-text)] transition-colors"
-            >
-              <X size={18} />
-            </button>
-          </div>
-        </div>
-        <div className="p-6 space-y-6 overflow-y-auto" style={{ maxHeight: 'calc(100vh - 65px)' }}>
-          {children}
-        </div>
-      </aside>
-    </div>
-  )
-}

package/packages/client/src/shared/VocabularyHelper.tsx

@@ -1,48 +0,0 @@
-import { useState } from 'react'
-import { HelpCircle } from 'lucide-react'
-
-const vocabulary: Record<string, string> = {
-  agent:
-    'An AI agent is a persona with a specific role (like PM, Architect, or Developer). Each agent has skills, menu commands, and optional customizations.',
-  skill:
-    'A skill is a capability that can be assigned to agents. Skills are markdown files with instructions that agents follow.',
-  workflow:
-    'A workflow is a sequence of steps that agents perform. Each step has inputs, an assigned agent, and deliverables.',
-  module:
-    'A module is a versioned collection of agents, skills, and workflows. Built-in modules (core, bmm) come with BMAD; external modules can be installed.',
-  override:
-    'An override customizes a built-in agent for your project. It can change the name, add menu items, or modify behavior without editing the original.',
-  package:
-    'A portable bundle of BMAD entities exported from one project for import into another. Includes agents, skills, workflows, and templates.',
-  template:
-    'A starting point for deliverables. Referenced by skills and workflows to create consistent output documents.',
-}
-
-type VocabularyHelperProps = {
-  term: string
-}
-
-export function VocabularyHelper({ term }: VocabularyHelperProps) {
-  const [expanded, setExpanded] = useState(false)
-  const definition = vocabulary[term.toLowerCase()]
-
-  if (!definition) return null
-
-  return (
-    <span className="relative inline-flex items-center">
-      <button
-        onClick={() => setExpanded(!expanded)}
-        className="ml-1 text-[var(--color-muted)] hover:text-[var(--color-accent)] transition-colors"
-        aria-label={`What is ${term}?`}
-      >
-        <HelpCircle size={14} />
-      </button>
-      {expanded && (
-        <div className="absolute left-0 top-6 z-10 w-64 p-3 text-xs bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] rounded-lg shadow-lg">
-          <p className="font-bold mb-1 capitalize">{term}</p>
-          <p className="text-[var(--color-muted)]">{definition}</p>
-        </div>
-      )}
-    </span>
-  )
-}

package/packages/client/src/shared/diff-viewer/DiffViewer.tsx

@@ -1,93 +0,0 @@
-type DiffLine = {
-  type: 'added' | 'removed' | 'unchanged'
-  content: string
-  lineNumber: number | null
-}
-
-function computeDiff(original: string, modified: string): DiffLine[] {
-  const originalLines = original.split('\n')
-  const modifiedLines = modified.split('\n')
-  const lines: DiffLine[] = []
-
-  const maxLen = Math.max(originalLines.length, modifiedLines.length)
-  for (let i = 0; i < maxLen; i++) {
-    const orig = originalLines[i]
-    const mod = modifiedLines[i]
-
-    if (orig === mod) {
-      lines.push({ type: 'unchanged', content: orig ?? '', lineNumber: i + 1 })
-    } else {
-      if (orig !== undefined) {
-        lines.push({ type: 'removed', content: orig, lineNumber: i + 1 })
-      }
-      if (mod !== undefined) {
-        lines.push({ type: 'added', content: mod, lineNumber: i + 1 })
-      }
-    }
-  }
-
-  return lines
-}
-
-type DiffViewerProps = {
-  original: string
-  modified: string
-  onConfirm?: () => void
-  onCancel?: () => void
-}
-
-export function DiffViewer({ original, modified, onConfirm, onCancel }: DiffViewerProps) {
-  if (original === modified) {
-    return (
-      <div className="p-8 text-center text-[var(--color-muted)]">
-        <p className="text-sm">No changes to save</p>
-      </div>
-    )
-  }
-
-  const lines = computeDiff(original, modified)
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="flex-1 overflow-auto font-[var(--font-mono)] text-sm">
-        {lines.map((line, i) => (
-          <div
-            key={i}
-            className={`px-4 py-0.5 ${
-              line.type === 'added'
-                ? 'bg-green-950/30 text-green-400'
-                : line.type === 'removed'
-                  ? 'bg-red-950/30 text-red-400'
-                  : 'text-[var(--color-text)]'
-            }`}
-          >
-            <span className="inline-block w-6 text-right mr-3 text-[var(--color-muted)] select-none">
-              {line.type === 'added' ? '+' : line.type === 'removed' ? '-' : ' '}
-            </span>
-            {line.content}
-          </div>
-        ))}
-      </div>
-      {(onConfirm || onCancel) && (
-        <div className="flex justify-end gap-3 px-4 py-3 border-t border-[var(--color-border-subtle)]">
-          {onCancel && (
-            <button
-              onClick={onCancel}
-              className="px-4 py-2 text-sm rounded-md border border-[var(--color-border-subtle)] text-[var(--color-text)] hover:bg-[var(--color-surface-raised)] transition-colors"
-            >
-              Cancel
-            </button>
-          )}
-          {onConfirm && (
-            <button
-              onClick={onConfirm}
-              className="px-4 py-2 text-sm rounded-md bg-[var(--color-accent)] text-white font-bold hover:bg-[var(--color-accent-hover)] transition-colors"
-            >
-              Confirm Save
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

package/packages/client/src/shared/markdown-editor/CodeMirrorEditor.tsx

@@ -1,199 +0,0 @@
-import { useEffect, useRef, useCallback } from 'react'
-import { EditorView, keymap, placeholder as placeholderExt } from '@codemirror/view'
-import { EditorState, type Extension } from '@codemirror/state'
-import { markdown } from '@codemirror/lang-markdown'
-import { yaml } from '@codemirror/lang-yaml'
-import { html } from '@codemirror/lang-html'
-import { javascript } from '@codemirror/lang-javascript'
-import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
-import { oneDark } from '@codemirror/theme-one-dark'
-import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language'
-
-export type EditorLanguage = 'markdown' | 'yaml' | 'html' | 'javascript' | 'plaintext'
-
-type CodeMirrorEditorProps = {
-  content: string
-  onChange?: (value: string) => void
-  onSave?: (value: string) => void
-  readOnly?: boolean
-  dark?: boolean
-  placeholder?: string
-  language?: EditorLanguage
-}
-
-function getLanguageExtension(lang: EditorLanguage): Extension | null {
-  switch (lang) {
-    case 'markdown':
-      return markdown()
-    case 'yaml':
-      return yaml()
-    case 'html':
-      return html()
-    case 'javascript':
-      return javascript()
-    case 'plaintext':
-      return null
-  }
-}
-
-export function getLanguageForFile(filePath: string): EditorLanguage {
-  const ext = filePath.split('.').pop()?.toLowerCase() ?? ''
-  switch (ext) {
-    case 'md':
-    case 'markdown':
-      return 'markdown'
-    case 'yaml':
-    case 'yml':
-      return 'yaml'
-    case 'html':
-    case 'htm':
-      return 'html'
-    case 'js':
-    case 'jsx':
-    case 'ts':
-    case 'tsx':
-    case 'json':
-      return 'javascript'
-    default:
-      return 'plaintext'
-  }
-}
-
-const lightTheme = EditorView.theme({
-  '&': {
-    backgroundColor: 'var(--color-bg)',
-    color: 'var(--color-text)',
-    height: '100%',
-  },
-  '.cm-content': {
-    fontFamily: 'var(--font-mono)',
-    fontSize: '13px',
-    padding: '16px 0',
-  },
-  '.cm-gutters': {
-    backgroundColor: 'var(--color-bg)',
-    borderRight: '1px solid var(--color-border-subtle)',
-    color: 'var(--color-muted)',
-  },
-  '.cm-activeLineGutter': {
-    backgroundColor: 'var(--color-surface-raised)',
-  },
-  '.cm-activeLine': {
-    backgroundColor: 'var(--color-surface-raised)',
-  },
-  '.cm-cursor': {
-    borderLeftColor: 'var(--color-accent)',
-  },
-  '.cm-selectionBackground': {
-    backgroundColor: 'rgba(255, 74, 0, 0.15) !important',
-  },
-  '&.cm-focused .cm-selectionBackground': {
-    backgroundColor: 'rgba(255, 74, 0, 0.2) !important',
-  },
-  '.cm-scroller': {
-    overflow: 'auto',
-  },
-})
-
-export function CodeMirrorEditor({
-  content,
-  onChange,
-  onSave,
-  readOnly = false,
-  dark = false,
-  placeholder,
-  language = 'markdown',
-}: CodeMirrorEditorProps) {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const viewRef = useRef<EditorView | null>(null)
-  const onChangeRef = useRef(onChange)
-  const onSaveRef = useRef(onSave)
-
-  // Keep callback refs up to date
-  onChangeRef.current = onChange
-  onSaveRef.current = onSave
-
-  const createExtensions = useCallback(() => {
-    const exts: Extension[] = [
-      history(),
-      keymap.of([
-        ...defaultKeymap,
-        ...historyKeymap,
-        {
-          key: 'Mod-s',
-          run: (view) => {
-            onSaveRef.current?.(view.state.doc.toString())
-            return true
-          },
-        },
-      ]),
-      EditorView.updateListener.of((update) => {
-        if (update.docChanged) {
-          onChangeRef.current?.(update.state.doc.toString())
-        }
-      }),
-      EditorView.lineWrapping,
-    ]
-
-    const langExt = getLanguageExtension(language)
-    if (langExt) exts.push(langExt)
-
-    if (dark) {
-      exts.push(oneDark)
-    } else {
-      exts.push(lightTheme, syntaxHighlighting(defaultHighlightStyle))
-    }
-
-    if (readOnly) {
-      exts.push(EditorState.readOnly.of(true))
-    }
-
-    if (placeholder) {
-      exts.push(placeholderExt(placeholder))
-    }
-
-    return exts
-  }, [dark, readOnly, placeholder, language])
-
-  // Initialize editor
-  useEffect(() => {
-    if (!containerRef.current) return
-
-    const state = EditorState.create({
-      doc: content,
-      extensions: createExtensions(),
-    })
-
-    const view = new EditorView({
-      state,
-      parent: containerRef.current,
-    })
-
-    viewRef.current = view
-
-    return () => {
-      view.destroy()
-      viewRef.current = null
-    }
-    // Only run on mount and when extensions change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [createExtensions])
-
-  // Sync external content changes
-  useEffect(() => {
-    const view = viewRef.current
-    if (!view) return
-    const currentContent = view.state.doc.toString()
-    if (currentContent !== content) {
-      view.dispatch({
-        changes: {
-          from: 0,
-          to: currentContent.length,
-          insert: content,
-        },
-      })
-    }
-  }, [content])
-
-  return <div ref={containerRef} className="h-full overflow-hidden" />
-}

package/packages/client/src/shared/markdown-editor/MarkdownEditor.tsx

@@ -1,95 +0,0 @@
-import { useState, useCallback } from 'react'
-import Markdown from 'react-markdown'
-
-import { CodeMirrorEditor, getLanguageForFile, type EditorLanguage } from './CodeMirrorEditor.js'
-import { useThemeStore } from '../../stores/ui-store.js'
-
-type EditorMode = 'edit' | 'preview' | 'split'
-
-type MarkdownEditorProps = {
-  content: string
-  filePath: string
-  onChange: (content: string) => void
-  onSave?: (content: string) => void
-  readOnly?: boolean
-  defaultMode?: EditorMode
-}
-
-export function MarkdownEditor({
-  content,
-  filePath,
-  onChange,
-  onSave,
-  readOnly = false,
-  defaultMode,
-}: MarkdownEditorProps) {
-  const [mode, setMode] = useState<EditorMode>(defaultMode ?? 'edit')
-  const theme = useThemeStore((s) => s.theme)
-  const language: EditorLanguage = getLanguageForFile(filePath)
-  const isMarkdown = language === 'markdown'
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
-        e.preventDefault()
-        onSave?.(content)
-      }
-    },
-    [content, onSave],
-  )
-
-  return (
-    <div className="flex flex-col h-full" onKeyDown={handleKeyDown}>
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--color-border-subtle)] shrink-0">
-        <span className="text-xs font-[var(--font-mono)] text-[var(--color-muted)] truncate mr-4">
-          {filePath}
-        </span>
-        <div className="flex gap-0.5 shrink-0">
-          {(['edit', 'preview', 'split'] as const).map((m) => (
-            <button
-              key={m}
-              onClick={() => setMode(m)}
-              className={`px-2.5 py-1 text-xs rounded transition-colors ${
-                mode === m
-                  ? 'bg-[var(--color-surface-raised)] text-[var(--color-text)] font-bold'
-                  : 'text-[var(--color-muted)] hover:text-[var(--color-text)]'
-              }`}
-            >
-              {m.charAt(0).toUpperCase() + m.slice(1)}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Editor body */}
-      <div className="flex-1 flex overflow-hidden min-h-0">
-        {(mode === 'edit' || mode === 'split') && (
-          <div className={`${mode === 'split' ? 'w-1/2' : 'w-full'} overflow-hidden`}>
-            <CodeMirrorEditor
-              content={content}
-              onChange={onChange}
-              onSave={onSave}
-              readOnly={readOnly}
-              dark={theme === 'dark'}
-              language={language}
-            />
-          </div>
-        )}
-        {(mode === 'preview' || mode === 'split') && (
-          <div
-            className={`${mode === 'split' ? 'w-1/2 border-l border-[var(--color-border-subtle)]' : 'w-full'} overflow-auto p-6`}
-          >
-            {isMarkdown ? (
-              <div className="prose prose-sm max-w-none text-[var(--color-text)] prose-headings:text-[var(--color-text)] prose-headings:font-bold prose-h1:text-2xl prose-h1:border-b prose-h1:border-[var(--color-border-subtle)] prose-h1:pb-2 prose-h2:text-xl prose-h3:text-lg prose-h4:text-base prose-p:leading-relaxed prose-a:text-[var(--color-accent)] prose-strong:text-[var(--color-text)] prose-code:font-[var(--font-mono)] prose-code:text-xs prose-code:bg-[var(--color-surface-raised)] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-pre:bg-[var(--color-surface-raised)] prose-pre:font-[var(--font-mono)] prose-li:marker:text-[var(--color-muted)] prose-blockquote:border-[var(--color-accent)] prose-blockquote:text-[var(--color-muted)] prose-hr:border-[var(--color-border-subtle)]">
-                <Markdown>{content}</Markdown>
-              </div>
-            ) : (
-              <pre className="text-sm font-[var(--font-mono)] whitespace-pre-wrap">{content}</pre>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

package/packages/client/src/stores/ui-store.ts

@@ -1,13 +0,0 @@
-import { create } from 'zustand'
-
-type Theme = 'dark' | 'light'
-
-type UiState = {
-  theme: Theme
-  setTheme: (theme: Theme) => void
-}
-
-export const useThemeStore = create<UiState>((set) => ({
-  theme: document.documentElement.classList.contains('dark') ? 'dark' : 'light',
-  setTheme: (theme) => set({ theme }),
-}))