bmad-studio 0.1.0

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

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

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

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

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

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

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

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

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

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

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