bmad-studio 0.1.0

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

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

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

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

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

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

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

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