bmad-studio 0.1.0 → 0.2.0

package/packages/client/src/features/workspace/WorkspacePage.tsx

@@ -1,304 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Briefcase, ChevronDown, ChevronRight, Settings } from 'lucide-react'
-import Markdown from 'react-markdown'
-
-import { EmptyState } from '../../shared/EmptyState.js'
-import { MarkdownEditor } from '../../shared/markdown-editor/MarkdownEditor.js'
-import { useNotifications } from '../../layout/NotificationProvider.js'
-import { Skeleton } from '../../shared/Skeleton.js'
-
-type ViewTab = 'structured' | 'raw' | 'preview' | 'config'
-
-type Section = {
-  title: string
-  content: string
-}
-
-function parseSections(content: string): Section[] {
-  const sections: Section[] = []
-  const lines = content.split('\n')
-  let currentTitle = ''
-  let currentLines: string[] = []
-
-  for (const line of lines) {
-    const headerMatch = line.match(/^#{1,3}\s+(.+)/)
-    if (headerMatch) {
-      if (currentTitle || currentLines.length > 0) {
-        sections.push({
-          title: currentTitle || 'Introduction',
-          content: currentLines.join('\n').trim(),
-        })
-      }
-      currentTitle = headerMatch[1]
-      currentLines = []
-    } else {
-      currentLines.push(line)
-    }
-  }
-
-  if (currentTitle || currentLines.length > 0) {
-    sections.push({
-      title: currentTitle || 'Content',
-      content: currentLines.join('\n').trim(),
-    })
-  }
-
-  return sections
-}
-
-function CollapsibleSection({ section }: { section: Section }) {
-  const [expanded, setExpanded] = useState(true)
-
-  return (
-    <div className="border border-[var(--color-border-subtle)] rounded-lg overflow-hidden">
-      <button
-        onClick={() => setExpanded(!expanded)}
-        className="w-full flex items-center gap-2 px-4 py-3 bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] text-left transition-colors"
-      >
-        {expanded ? (
-          <ChevronDown size={16} className="text-[var(--color-muted)]" />
-        ) : (
-          <ChevronRight size={16} className="text-[var(--color-muted)]" />
-        )}
-        <span className="font-bold text-sm">{section.title}</span>
-      </button>
-      {expanded && section.content && (
-        <div className="px-4 py-3 text-sm text-[var(--color-text)]">
-          <pre className="whitespace-pre-wrap font-[var(--font-mono)] text-xs">{section.content}</pre>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export function WorkspacePage() {
-  const [content, setContent] = useState<string | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [editContent, setEditContent] = useState('')
-  const [activeTab, setActiveTab] = useState<ViewTab>('structured')
-  const [editing, setEditing] = useState(false)
-  const [configContent, setConfigContent] = useState<string | null>(null)
-  const [configEditContent, setConfigEditContent] = useState('')
-  const { notify } = useNotifications()
-
-  useEffect(() => {
-    Promise.allSettled([
-      fetch('/api/files/project-context.md')
-        .then((r) => {
-          if (!r.ok) throw new Error('Not found')
-          return r.json()
-        })
-        .then((d) => {
-          const data = d as { content: string }
-          setContent(data.content)
-          setEditContent(data.content)
-        }),
-      fetch('/api/files/core/config.yaml')
-        .then((r) => {
-          if (!r.ok) return fetch('/api/files/config.yaml').then((r2) => { if (!r2.ok) throw new Error('Not found'); return r2.json() })
-          return r.json()
-        })
-        .then((d) => {
-          const data = d as { content: string }
-          setConfigContent(data.content)
-          setConfigEditContent(data.content)
-        })
-        .catch(() => {}),
-    ]).finally(() => setLoading(false))
-  }, [])
-
-  async function handleSave() {
-    try {
-      const resp = await fetch('/api/files/project-context.md', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ content: editContent }),
-      })
-      if (resp.ok) {
-        setContent(editContent)
-        setEditing(false)
-        notify('success', 'Workspace context saved')
-      } else {
-        notify('error', 'Failed to save workspace context')
-      }
-    } catch {
-      notify('error', 'Failed to save workspace context')
-    }
-  }
-
-  if (loading) {
-    return (
-      <div>
-        <h1 className="text-2xl font-extrabold mb-8">Workspace</h1>
-        <Skeleton className="h-64" />
-      </div>
-    )
-  }
-
-  if (content === null && !editing) {
-    return (
-      <div>
-        <h1 className="text-2xl font-extrabold mb-8">Workspace</h1>
-        <EmptyState
-          icon={Briefcase}
-          title="No workspace context found"
-          description="Create a project-context.md file in your _bmad/ directory to help agents understand your project."
-          actions={
-            <button
-              onClick={() => {
-                const template = `# Project Context\n\n## Overview\nDescribe your project here.\n\n## Tech Stack\nList your technologies.\n\n## Architecture\nDescribe your architecture.\n`
-                setContent('')
-                setEditContent(template)
-                setEditing(true)
-              }}
-              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"
-            >
-              Create Workspace Context
-            </button>
-          }
-        />
-      </div>
-    )
-  }
-
-  if (editing) {
-    return (
-      <div className="h-[calc(100vh-8rem)]">
-        <div className="flex items-center justify-between mb-4">
-          <h1 className="text-2xl font-extrabold">Edit Workspace Context</h1>
-          <div className="flex gap-2">
-            <button
-              onClick={() => {
-                setEditing(false)
-                setEditContent(content ?? '')
-              }}
-              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>
-            <button
-              onClick={handleSave}
-              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"
-            >
-              Save
-            </button>
-          </div>
-        </div>
-        <MarkdownEditor
-          content={editContent}
-          filePath="_bmad/project-context.md"
-          onChange={setEditContent}
-          onSave={handleSave}
-        />
-      </div>
-    )
-  }
-
-  const sections = parseSections(content ?? '')
-
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-8">
-        <h1 className="text-2xl font-extrabold">Workspace</h1>
-        <div className="flex items-center gap-3">
-          <div className="flex gap-1 bg-[var(--color-surface-raised)] rounded-md p-0.5">
-            {(['structured', 'raw', 'preview', 'config'] as const).map((tab) => (
-              <button
-                key={tab}
-                onClick={() => setActiveTab(tab)}
-                className={`px-3 py-1.5 text-sm rounded min-h-[36px] transition-colors ${
-                  activeTab === tab
-                    ? 'bg-[var(--color-bg)] text-[var(--color-text)] font-bold shadow-sm'
-                    : 'text-[var(--color-muted)] hover:text-[var(--color-text)]'
-                }`}
-              >
-                {tab.charAt(0).toUpperCase() + tab.slice(1)}
-              </button>
-            ))}
-          </div>
-          <button
-            onClick={() => setEditing(true)}
-            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"
-          >
-            Edit
-          </button>
-        </div>
-      </div>
-
-      {activeTab === 'structured' && (
-        <div className="space-y-3">
-          {sections.map((section, i) => (
-            <CollapsibleSection key={i} section={section} />
-          ))}
-          {sections.length === 0 && (
-            <p className="text-sm text-[var(--color-muted)]">No structured sections found in workspace context.</p>
-          )}
-        </div>
-      )}
-
-      {activeTab === 'raw' && (
-        <div className="rounded-lg border border-[var(--color-border-subtle)] overflow-hidden">
-          <pre className="p-4 text-sm font-[var(--font-mono)] overflow-x-auto whitespace-pre-wrap">
-            {content}
-          </pre>
-        </div>
-      )}
-
-      {activeTab === 'preview' && (
-        <div className="rounded-lg border border-[var(--color-border-subtle)] p-6">
-          <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-h2:text-xl prose-h3:text-lg prose-a:text-[var(--color-accent)] prose-strong:text-[var(--color-text)]">
-            <Markdown>{content ?? ''}</Markdown>
-          </div>
-        </div>
-      )}
-
-      {activeTab === 'config' && (
-        <div>
-          <div className="flex items-center gap-2 mb-4">
-            <Settings size={16} className="text-[var(--color-accent)]" />
-            <h2 className="text-sm font-bold">BMAD Configuration</h2>
-            <span className="text-xs text-[var(--color-muted)] font-[var(--font-mono)]">_bmad/config.yaml</span>
-          </div>
-          {configContent !== null ? (
-            <div className="rounded-lg border border-[var(--color-border-subtle)] overflow-hidden h-[500px]">
-              <MarkdownEditor
-                content={configEditContent}
-                filePath="_bmad/config.yaml"
-                onChange={setConfigEditContent}
-                onSave={async () => {
-                  try {
-                    // Try core/config.yaml first, then config.yaml
-                    let resp = await fetch('/api/files/core/config.yaml', {
-                      method: 'PUT',
-                      headers: { 'Content-Type': 'application/json' },
-                      body: JSON.stringify({ content: configEditContent }),
-                    })
-                    if (!resp.ok) {
-                      resp = await fetch('/api/files/config.yaml', {
-                        method: 'PUT',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ content: configEditContent }),
-                      })
-                    }
-                    if (resp.ok) {
-                      setConfigContent(configEditContent)
-                      notify('success', 'Configuration saved')
-                    } else {
-                      notify('error', 'Failed to save configuration')
-                    }
-                  } catch {
-                    notify('error', 'Failed to save configuration')
-                  }
-                }}
-              />
-            </div>
-          ) : (
-            <div className="p-4 rounded-lg bg-[var(--color-surface-raised)] text-sm text-[var(--color-muted)]">
-              No config.yaml found in the _bmad/ directory.
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

package/packages/client/src/globals.css

@@ -1,184 +0,0 @@
-@import 'tailwindcss';
-@import '@fontsource/inter-tight/400.css';
-@import '@fontsource/inter-tight/700.css';
-@import '@fontsource/inter-tight/800.css';
-
-/* Geist Mono loaded via CSS from node_modules — the geist package exports
-   are JS-only, so we reference the file through a resolved path.
-   Vite handles node_modules resolution for @import but not url().
-   Use system monospace as primary fallback. */
-
-/* Light mode (default) */
-:root {
-  --color-accent: #ff4a00;
-  --color-accent-hover: #e04300;
-  --color-yellow: #ccff00;
-  --color-bg: #ffffff;
-  --color-surface-raised: #f5f5f5;
-  --color-text: #000000;
-  --color-muted: #71717a;
-  --color-border-subtle: #e4e4e7;
-  --color-success: #22c55e;
-  --color-warning: #f59e0b;
-  --color-error: #ef4444;
-  --color-neutral: #a1a1aa;
-
-  --font-sans: 'Inter Tight', system-ui, sans-serif;
-  --font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;
-}
-
-/* Dark mode */
-.dark {
-  --color-bg: #000000;
-  --color-surface-raised: #1a1a1a;
-  --color-text: #ffffff;
-  --color-muted: #a1a1aa;
-  --color-border-subtle: #27272a;
-  --color-accent-hover: #ff6a33;
-}
-
-@theme {
-  --color-accent: var(--color-accent);
-  --color-accent-hover: var(--color-accent-hover);
-  --color-bg: var(--color-bg);
-  --color-surface: var(--color-surface-raised);
-  --color-text: var(--color-text);
-  --color-muted: var(--color-muted);
-  --color-border: var(--color-border-subtle);
-  --color-success: var(--color-success);
-  --color-warning: var(--color-warning);
-  --color-error: var(--color-error);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-}
-
-/* Spacing scale (8px grid) */
-:root {
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-7: 28px;
-  --space-8: 32px;
-  --space-9: 36px;
-  --space-10: 40px;
-  --space-11: 44px;
-  --space-12: 48px;
-}
-
-body {
-  font-family: var(--font-sans);
-  background-color: var(--color-bg);
-  color: var(--color-text);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Button utilities */
-.btn-primary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 16px;
-  font-size: 14px;
-  font-weight: 700;
-  border-radius: 6px;
-  background-color: var(--color-accent);
-  color: white;
-  transition: background-color 150ms;
-  min-height: 36px;
-  cursor: pointer;
-}
-.btn-primary:hover {
-  background-color: var(--color-accent-hover);
-}
-.btn-primary:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.btn-secondary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 16px;
-  font-size: 14px;
-  border-radius: 6px;
-  border: 1px solid var(--color-border-subtle);
-  color: var(--color-text);
-  transition: background-color 150ms;
-  min-height: 36px;
-  cursor: pointer;
-}
-.btn-secondary:hover {
-  background-color: var(--color-surface-raised);
-}
-
-.btn-ghost {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 12px;
-  font-size: 14px;
-  border-radius: 6px;
-  color: var(--color-muted);
-  transition: color 150ms, background-color 150ms;
-  min-height: 36px;
-  cursor: pointer;
-}
-.btn-ghost:hover {
-  color: var(--color-text);
-  background-color: var(--color-surface-raised);
-}
-
-/* Prose overrides for dark mode markdown rendering */
-.dark .prose {
-  --tw-prose-body: var(--color-text);
-  --tw-prose-headings: var(--color-text);
-  --tw-prose-links: var(--color-accent);
-  --tw-prose-bold: var(--color-text);
-  --tw-prose-counters: var(--color-muted);
-  --tw-prose-bullets: var(--color-muted);
-  --tw-prose-hr: var(--color-border-subtle);
-  --tw-prose-quotes: var(--color-muted);
-  --tw-prose-quote-borders: var(--color-accent);
-  --tw-prose-code: var(--color-text);
-  --tw-prose-pre-code: var(--color-text);
-  --tw-prose-pre-bg: var(--color-surface-raised);
-  --tw-prose-th-borders: var(--color-border-subtle);
-  --tw-prose-td-borders: var(--color-border-subtle);
-}
-
-/* Slide-over overlay panel */
-.slide-over-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 40;
-  display: flex;
-  justify-content: flex-end;
-}
-.slide-over-backdrop .slide-over-bg {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-}
-.slide-over-backdrop .slide-over-panel {
-  position: relative;
-  z-index: 1;
-  background: var(--color-bg);
-  border-left: 1px solid var(--color-border-subtle);
-  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
-  overflow-y: auto;
-  max-height: 100vh;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    transition-duration: 0ms !important;
-    animation-duration: 0ms !important;
-  }
-}

package/packages/client/src/hooks/use-detail-param.ts

@@ -1,31 +0,0 @@
-import { useSearchParams } from 'react-router-dom'
-import { useCallback } from 'react'
-
-/**
- * Syncs a URL search parameter with component state for deep-linkable slide-overs.
- * Setting a value pushes a new history entry so browser back closes the panel.
- */
-export function useDetailParam(key: string = 'detail'): [string | null, (id: string | null) => void] {
-  const [searchParams, setSearchParams] = useSearchParams()
-
-  const value = searchParams.get(key)
-
-  const setValue = useCallback(
-    (id: string | null) => {
-      setSearchParams(
-        (prev) => {
-          if (id) {
-            prev.set(key, id)
-          } else {
-            prev.delete(key)
-          }
-          return prev
-        },
-        { replace: false },
-      )
-    },
-    [key, setSearchParams],
-  )
-
-  return [value, setValue]
-}

package/packages/client/src/hooks/use-file-save.ts

@@ -1,22 +0,0 @@
-import { useMutation } from '@tanstack/react-query'
-
-type FileSaveOptions = {
-  basePath: 'files' | 'outputs'
-}
-
-export function useFileSave(options: FileSaveOptions = { basePath: 'files' }) {
-  return useMutation({
-    mutationFn: async ({ path, content }: { path: string; content: string }) => {
-      const resp = await fetch(`/api/${options.basePath}/${path}`, {
-        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()
-    },
-  })
-}

package/packages/client/src/hooks/use-websocket.ts

@@ -1,38 +0,0 @@
-import { useEffect, useRef, useState, useCallback } from 'react'
-
-import type { WebSocketEvent } from '@bmad-studio/shared'
-
-import { WebSocketClient } from '../lib/websocket-client.js'
-
-function getWsUrl() {
-  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-  return `${protocol}//${window.location.host}/ws`
-}
-
-export function useWebSocket(onEvent?: (event: WebSocketEvent) => void) {
-  const clientRef = useRef<WebSocketClient | null>(null)
-  const [connected, setConnected] = useState(false)
-
-  const handleEvent = useCallback(
-    (event: WebSocketEvent) => {
-      onEvent?.(event)
-    },
-    [onEvent],
-  )
-
-  useEffect(() => {
-    const client = new WebSocketClient(getWsUrl())
-    clientRef.current = client
-
-    client.onStatusChange(setConnected)
-    const unsubscribe = client.onMessage(handleEvent)
-    client.connect()
-
-    return () => {
-      unsubscribe()
-      client.close()
-    }
-  }, [handleEvent])
-
-  return { connected }
-}

package/packages/client/src/layout/AppShell.tsx

@@ -1,20 +0,0 @@
-import { Outlet } from 'react-router-dom'
-
-import { Sidebar } from './Sidebar.js'
-import { Breadcrumbs } from './Breadcrumbs.js'
-import { CommandPalette } from '../shared/CommandPalette.js'
-
-export function AppShell() {
-  return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar />
-      <main className="flex-1 overflow-y-auto">
-        <div className="px-8 py-6">
-          <Breadcrumbs />
-          <Outlet />
-        </div>
-      </main>
-      <CommandPalette />
-    </div>
-  )
-}

package/packages/client/src/layout/Breadcrumbs.tsx

@@ -1,52 +0,0 @@
-import { useLocation, Link } from 'react-router-dom'
-
-const routeLabels: Record<string, string> = {
-  agents: 'Agents',
-  teams: 'Teams',
-  skills: 'Skills',
-  workflows: 'Workflows',
-  outputs: 'Outputs',
-  connections: 'Connections',
-  workspace: 'Workspace',
-  modules: 'Modules',
-  packages: 'Packages',
-  files: 'Files',
-  settings: 'Settings',
-}
-
-export function Breadcrumbs() {
-  const location = useLocation()
-  const segments = location.pathname.split('/').filter(Boolean)
-
-  if (segments.length === 0) return null
-
-  return (
-    <nav aria-label="Breadcrumb" className="mb-4 text-sm text-[var(--color-muted)]">
-      <ol className="flex items-center gap-1">
-        <li>
-          <Link to="/" className="hover:text-[var(--color-text)] transition-colors">
-            Home
-          </Link>
-        </li>
-        {segments.map((segment, i) => {
-          const path = '/' + segments.slice(0, i + 1).join('/')
-          const label = routeLabels[segment] || segment
-          const isLast = i === segments.length - 1
-
-          return (
-            <li key={path} className="flex items-center gap-1">
-              <span className="text-[var(--color-border-subtle)]">/</span>
-              {isLast ? (
-                <span className="text-[var(--color-text)]">{label}</span>
-              ) : (
-                <Link to={path} className="hover:text-[var(--color-text)] transition-colors">
-                  {label}
-                </Link>
-              )}
-            </li>
-          )
-        })}
-      </ol>
-    </nav>
-  )
-}