bmad-studio 0.1.0 → 0.2.0

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

@@ -1,95 +0,0 @@
-import { createContext, useContext, useCallback, useState } from 'react'
-import type { ReactNode } from 'react'
-
-type NotificationType = 'success' | 'warning' | 'error' | 'info'
-
-type Notification = {
-  id: string
-  type: NotificationType
-  message: string
-  details?: string
-  persistent: boolean
-}
-
-type NotificationContextValue = {
-  notifications: Notification[]
-  notify: (type: NotificationType, message: string, details?: string) => void
-  dismiss: (id: string) => void
-}
-
-const NotificationContext = createContext<NotificationContextValue>({
-  notifications: [],
-  notify: () => {},
-  dismiss: () => {},
-})
-
-export function useNotifications() {
-  return useContext(NotificationContext)
-}
-
-let nextId = 0
-
-export function NotificationProvider({ children }: { children: ReactNode }) {
-  const [notifications, setNotifications] = useState<Notification[]>([])
-
-  const dismiss = useCallback((id: string) => {
-    setNotifications((prev) => prev.filter((n) => n.id !== id))
-  }, [])
-
-  const notify = useCallback(
-    (type: NotificationType, message: string, details?: string) => {
-      const id = String(++nextId)
-      const persistent = type === 'error' || type === 'warning'
-
-      setNotifications((prev) => [...prev.slice(-2), { id, type, message, details, persistent }])
-
-      if (!persistent) {
-        setTimeout(() => dismiss(id), type === 'success' ? 3000 : 5000)
-      }
-    },
-    [dismiss],
-  )
-
-  return (
-    <NotificationContext.Provider value={{ notifications, notify, dismiss }}>
-      {children}
-      <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
-        {notifications.map((n) => (
-          <div
-            key={n.id}
-            role="alert"
-            aria-live="polite"
-            className={`px-4 py-3 rounded-md shadow-lg border text-sm ${
-              n.type === 'success'
-                ? 'bg-[var(--color-surface-raised)] border-[var(--color-success)] text-[var(--color-success)]'
-                : n.type === 'warning'
-                  ? 'bg-[var(--color-surface-raised)] border-[var(--color-warning)] text-[var(--color-warning)]'
-                  : n.type === 'error'
-                    ? 'bg-[var(--color-surface-raised)] border-[var(--color-error)] text-[var(--color-error)]'
-                    : 'bg-[var(--color-surface-raised)] border-[var(--color-border-subtle)] text-[var(--color-text)]'
-            }`}
-          >
-            <div className="flex items-start justify-between gap-2">
-              <p>{n.message}</p>
-              {n.persistent && (
-                <button
-                  onClick={() => dismiss(n.id)}
-                  className="text-[var(--color-muted)] hover:text-[var(--color-text)] shrink-0"
-                  aria-label="Dismiss notification"
-                >
-                  x
-                </button>
-              )}
-            </div>
-            {n.details && (
-              <details className="mt-2 text-xs text-[var(--color-muted)]">
-                <summary className="cursor-pointer">Details</summary>
-                <pre className="mt-1 whitespace-pre-wrap font-[var(--font-mono)]">{n.details}</pre>
-              </details>
-            )}
-          </div>
-        ))}
-      </div>
-    </NotificationContext.Provider>
-  )
-}

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

@@ -1,176 +0,0 @@
-import { NavLink } from 'react-router-dom'
-import { useEffect, useState, useCallback, useRef } from 'react'
-import {
-  LayoutDashboard,
-  Users,
-  UsersRound,
-  Zap,
-  GitBranch,
-  FileOutput,
-  Plug,
-  Briefcase,
-  Package,
-  FolderTree,
-  Settings,
-  Moon,
-  Sun,
-  Info,
-} from 'lucide-react'
-
-import { toggleTheme } from '../lib/theme.js'
-import { useThemeStore } from '../stores/ui-store.js'
-import { useWebSocket } from '../hooks/use-websocket.js'
-
-const navItems: Array<{
-  to: string
-  label: string
-  icon: typeof Users
-  badgeKey?: string
-}> = [
-  { to: '/', label: 'Overview', icon: LayoutDashboard },
-  { to: '/agents', label: 'Agents', icon: Users, badgeKey: 'agents' },
-  { to: '/teams', label: 'Teams', icon: UsersRound, badgeKey: 'teams' },
-  { to: '/skills', label: 'Skills', icon: Zap, badgeKey: 'skills' },
-  { to: '/workflows', label: 'Workflows', icon: GitBranch, badgeKey: 'workflows' },
-  { to: '/connections', label: 'Data Sources', icon: Plug, badgeKey: 'connections' },
-  { to: '/workspace', label: 'Workspace', icon: Briefcase },
-  { to: '/modules', label: 'Modules', icon: Package, badgeKey: 'modules' },
-]
-
-const utilityItems: Array<{
-  to: string
-  label: string
-  icon: typeof Users
-  badgeKey?: string
-}> = [
-  { to: '/outputs', label: 'Outputs', icon: FileOutput },
-  // Packages route not yet implemented — add when /packages page exists
-  { to: '/settings', label: 'Settings', icon: Settings },
-  { to: '/files', label: 'Files', icon: FolderTree },
-]
-
-function NavItem({
-  to,
-  label,
-  icon: Icon,
-  badge,
-}: {
-  to: string
-  label: string
-  icon: typeof Users
-  badge?: number
-}) {
-  return (
-    <NavLink
-      to={to}
-      end={to === '/'}
-      className={({ isActive }) =>
-        `flex items-center gap-3 px-3 py-2 min-h-[44px] rounded-md text-sm transition-colors ${
-          isActive
-            ? 'text-[var(--color-accent)] font-bold bg-[var(--color-surface-raised)]'
-            : 'text-[var(--color-muted)] hover:text-[var(--color-text)] hover:bg-[var(--color-surface-raised)]'
-        }`
-      }
-    >
-      <Icon size={18} />
-      <span className="flex-1">{label}</span>
-      {badge !== undefined && badge > 0 && (
-        <span className="text-[10px] font-bold px-1.5 py-0.5 rounded-full bg-[var(--color-accent)]/10 text-[var(--color-accent)]">
-          {badge}
-        </span>
-      )}
-    </NavLink>
-  )
-}
-
-export function Sidebar() {
-  const theme = useThemeStore((s) => s.theme)
-  const setTheme = useThemeStore((s) => s.setTheme)
-  const [badgeCounts, setBadgeCounts] = useState<Record<string, number>>({})
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  const fetchBadgeCounts = useCallback(() => {
-    Promise.all([
-      fetch('/api/overview').then((r) => r.json()).catch(() => null),
-      fetch('/api/modules').then((r) => r.json()).catch(() => null),
-    ]).then(([overview, modules]) => {
-      const counts: Record<string, number> = {}
-      if (overview?.sections) {
-        counts.agents = overview.sections.team?.count ?? 0
-        counts.teams = overview.sections.teams?.count ?? 0
-        counts.skills = overview.sections.toolkit?.count ?? 0
-        counts.workflows = overview.sections.process?.count ?? 0
-        counts.connections = overview.sections.ideConfigs?.count ?? 0
-      }
-      if (Array.isArray(modules)) {
-        counts.modules = modules.length
-      }
-      setBadgeCounts(counts)
-    })
-  }, [])
-
-  useEffect(() => {
-    fetchBadgeCounts()
-  }, [fetchBadgeCounts])
-
-  useWebSocket(
-    useCallback(() => {
-      if (debounceRef.current) clearTimeout(debounceRef.current)
-      debounceRef.current = setTimeout(fetchBadgeCounts, 200)
-    }, [fetchBadgeCounts]),
-  )
-
-  function handleToggleTheme() {
-    const next = toggleTheme()
-    setTheme(next)
-  }
-
-  return (
-    <aside className="w-60 h-screen flex flex-col border-r border-[var(--color-border-subtle)] bg-[var(--color-bg)]">
-      <div className="px-4 py-5">
-        <h1 className="text-lg font-extrabold text-[var(--color-text)]">BMAD Studio</h1>
-      </div>
-
-      <nav className="flex-1 px-2 space-y-1">
-        {navItems.map((item) => (
-          <NavItem
-            key={item.to}
-            to={item.to}
-            label={item.label}
-            icon={item.icon}
-            badge={item.badgeKey ? badgeCounts[item.badgeKey] : undefined}
-          />
-        ))}
-
-        <div className="my-3 border-t border-[var(--color-border-subtle)]" />
-
-        {utilityItems.map((item) => (
-          <NavItem key={item.to} {...item} />
-        ))}
-      </nav>
-
-      <div className="px-3 py-3 border-t border-[var(--color-border-subtle)] space-y-1">
-        <NavLink
-          to="/about"
-          className={({ isActive }) =>
-            `flex items-center gap-2 px-3 py-2 min-h-[44px] w-full rounded-md text-sm transition-colors ${
-              isActive
-                ? 'text-[var(--color-accent)] font-bold bg-[var(--color-surface-raised)]'
-                : 'text-[var(--color-muted)] hover:text-[var(--color-text)] hover:bg-[var(--color-surface-raised)]'
-            }`
-          }
-        >
-          <Info size={18} />
-          <span>About</span>
-        </NavLink>
-        <button
-          onClick={handleToggleTheme}
-          className="flex items-center gap-2 px-3 py-2 min-h-[44px] w-full rounded-md text-sm text-[var(--color-muted)] hover:text-[var(--color-text)] hover:bg-[var(--color-surface-raised)] transition-colors"
-        >
-          {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
-          <span>{theme === 'dark' ? 'Light mode' : 'Dark mode'}</span>
-        </button>
-      </div>
-    </aside>
-  )
-}

package/packages/client/src/lib/theme.ts

@@ -1,30 +0,0 @@
-type Theme = 'dark' | 'light'
-
-const STORAGE_KEY = 'bmad-studio-theme'
-
-export function getInitialTheme(): Theme {
-  const stored = localStorage.getItem(STORAGE_KEY) as Theme | null
-  if (stored === 'dark' || stored === 'light') return stored
-
-  if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-    return 'light'
-  }
-
-  return 'dark'
-}
-
-export function applyTheme(theme: Theme) {
-  if (theme === 'dark') {
-    document.documentElement.classList.add('dark')
-  } else {
-    document.documentElement.classList.remove('dark')
-  }
-  localStorage.setItem(STORAGE_KEY, theme)
-}
-
-export function toggleTheme(): Theme {
-  const current = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
-  const next: Theme = current === 'dark' ? 'light' : 'dark'
-  applyTheme(next)
-  return next
-}

package/packages/client/src/lib/websocket-client.ts

@@ -1,97 +0,0 @@
-import type { WebSocketEvent } from '@bmad-studio/shared'
-
-const INITIAL_RETRY_MS = 1000
-const MAX_RETRY_MS = 30000
-
-type EventHandler = (event: WebSocketEvent) => void
-type StatusHandler = (connected: boolean) => void
-
-export class WebSocketClient {
-  private ws: WebSocket | null = null
-  private url: string
-  private retryMs = INITIAL_RETRY_MS
-  private retryTimer: ReturnType<typeof setTimeout> | null = null
-  private handlers: EventHandler[] = []
-  private statusHandlers: StatusHandler[] = []
-  private closed = false
-
-  constructor(url: string) {
-    this.url = url
-  }
-
-  connect() {
-    if (this.closed) return
-
-    try {
-      this.ws = new WebSocket(this.url)
-
-      this.ws.onopen = () => {
-        this.retryMs = INITIAL_RETRY_MS
-        this.notifyStatus(true)
-      }
-
-      this.ws.onmessage = (msg) => {
-        try {
-          const event = JSON.parse(msg.data as string) as WebSocketEvent
-          for (const handler of this.handlers) {
-            handler(event)
-          }
-        } catch {
-          // Ignore malformed messages
-        }
-      }
-
-      this.ws.onclose = () => {
-        this.notifyStatus(false)
-        this.scheduleReconnect()
-      }
-
-      this.ws.onerror = () => {
-        // onclose will fire after onerror
-      }
-    } catch {
-      this.scheduleReconnect()
-    }
-  }
-
-  private scheduleReconnect() {
-    if (this.closed) return
-
-    this.retryTimer = setTimeout(() => {
-      this.retryMs = Math.min(this.retryMs * 2, MAX_RETRY_MS)
-      this.connect()
-    }, this.retryMs)
-  }
-
-  private notifyStatus(connected: boolean) {
-    for (const handler of this.statusHandlers) {
-      handler(connected)
-    }
-  }
-
-  onMessage(handler: EventHandler) {
-    this.handlers.push(handler)
-    return () => {
-      this.handlers = this.handlers.filter((h) => h !== handler)
-    }
-  }
-
-  onStatusChange(handler: StatusHandler) {
-    this.statusHandlers.push(handler)
-    return () => {
-      this.statusHandlers = this.statusHandlers.filter((h) => h !== handler)
-    }
-  }
-
-  close() {
-    this.closed = true
-    if (this.retryTimer) {
-      clearTimeout(this.retryTimer)
-      this.retryTimer = null
-    }
-    if (this.ws) {
-      this.ws.close()
-      this.ws = null
-    }
-  }
-}

package/packages/client/src/main.tsx

@@ -1,14 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-
-import { App } from './app.js'
-import { getInitialTheme, applyTheme } from './lib/theme.js'
-import './globals.css'
-
-applyTheme(getInitialTheme())
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)

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

@@ -1,151 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Search } from 'lucide-react'
-
-type SearchResult = {
-  type: 'agent' | 'skill' | 'workflow'
-  id: string
-  name: string
-  description: string
-}
-
-export function CommandPalette() {
-  const [open, setOpen] = useState(false)
-  const [query, setQuery] = useState('')
-  const [results, setResults] = useState<SearchResult[]>([])
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const navigate = useNavigate()
-
-  const openPalette = useCallback(() => {
-    setQuery('')
-    setResults([])
-    setSelectedIndex(0)
-    setOpen(true)
-  }, [])
-
-  const closePalette = useCallback(() => {
-    setOpen(false)
-  }, [])
-
-  useEffect(() => {
-    function handleKeyDown(e: KeyboardEvent) {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault()
-        if (open) {
-          closePalette()
-        } else {
-          openPalette()
-        }
-      }
-      if (e.key === 'Escape' && open) {
-        closePalette()
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [open, openPalette, closePalette])
-
-  useEffect(() => {
-    if (open) {
-      inputRef.current?.focus()
-    }
-  }, [open])
-
-  useEffect(() => {
-    if (!query.trim()) return
-
-    const controller = new AbortController()
-    fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal: controller.signal })
-      .then((r) => r.json())
-      .then((data) => setResults(data as SearchResult[]))
-      .catch(() => {})
-
-    return () => controller.abort()
-  }, [query])
-
-  function navigateToResult(result: SearchResult) {
-    const routes: Record<string, string> = {
-      agent: '/agents',
-      skill: '/skills',
-      workflow: '/workflows',
-    }
-    navigate(`${routes[result.type]}/${result.id}`)
-    closePalette()
-  }
-
-  function handleResultKeyDown(e: React.KeyboardEvent) {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      setSelectedIndex((i) => Math.min(i + 1, results.length - 1))
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      setSelectedIndex((i) => Math.max(i - 1, 0))
-    } else if (e.key === 'Enter' && results[selectedIndex]) {
-      navigateToResult(results[selectedIndex])
-    }
-  }
-
-  if (!open) return null
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]"
-      onClick={closePalette}
-    >
-      <div
-        className="w-full max-w-lg bg-[var(--color-bg)] border border-[var(--color-border-subtle)] rounded-xl shadow-2xl overflow-hidden"
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={handleResultKeyDown}
-      >
-        <div className="flex items-center gap-3 px-4 py-3 border-b border-[var(--color-border-subtle)]">
-          <Search size={18} className="text-[var(--color-muted)]" />
-          <input
-            ref={inputRef}
-            type="text"
-            placeholder="Search agents, skills, workflows..."
-            value={query}
-            onChange={(e) => {
-              setQuery(e.target.value)
-              if (!e.target.value.trim()) setResults([])
-            }}
-            className="flex-1 bg-transparent text-sm text-[var(--color-text)] outline-none placeholder:text-[var(--color-muted)]"
-          />
-          <kbd className="text-xs text-[var(--color-muted)] px-1.5 py-0.5 rounded border border-[var(--color-border-subtle)]">
-            esc
-          </kbd>
-        </div>
-
-        {results.length > 0 && (
-          <div className="max-h-64 overflow-y-auto py-2">
-            {results.map((result, i) => (
-              <button
-                key={`${result.type}-${result.id}`}
-                onClick={() => navigateToResult(result)}
-                className={`w-full px-4 py-2 text-left flex items-center gap-3 text-sm ${
-                  i === selectedIndex
-                    ? 'bg-[var(--color-surface-raised)] text-[var(--color-text)]'
-                    : 'text-[var(--color-muted)] hover:bg-[var(--color-surface-raised)]'
-                }`}
-              >
-                <span className="text-xs px-1.5 py-0.5 rounded bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] uppercase">
-                  {result.type}
-                </span>
-                <div>
-                  <p className="font-bold">{result.name}</p>
-                  <p className="text-xs text-[var(--color-muted)] truncate">{result.description}</p>
-                </div>
-              </button>
-            ))}
-          </div>
-        )}
-
-        {query && results.length === 0 && (
-          <div className="px-4 py-6 text-center text-sm text-[var(--color-muted)]">
-            No results found
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,120 +0,0 @@
-import { useMemo, useState } from 'react'
-
-type CsvViewerProps = {
-  content: string
-  filePath?: string
-}
-
-function parseCsv(raw: string): { headers: string[]; rows: string[][] } {
-  const lines = raw.split('\n').filter((l) => l.trim())
-  if (lines.length === 0) return { headers: [], rows: [] }
-
-  const parse = (line: string): string[] => {
-    const cells: string[] = []
-    let current = ''
-    let inQuotes = false
-    for (let i = 0; i < line.length; i++) {
-      const ch = line[i]
-      if (ch === '"') {
-        if (inQuotes && line[i + 1] === '"') {
-          current += '"'
-          i++
-        } else {
-          inQuotes = !inQuotes
-        }
-      } else if (ch === ',' && !inQuotes) {
-        cells.push(current.trim())
-        current = ''
-      } else {
-        current += ch
-      }
-    }
-    cells.push(current.trim())
-    return cells
-  }
-
-  const headers = parse(lines[0])
-  const rows = lines.slice(1).map(parse)
-  return { headers, rows }
-}
-
-export function CsvViewer({ content }: CsvViewerProps) {
-  const [sortCol, setSortCol] = useState<number | null>(null)
-  const [sortAsc, setSortAsc] = useState(true)
-
-  const { headers, rows } = useMemo(() => parseCsv(content), [content])
-
-  const sorted = useMemo(() => {
-    if (sortCol === null) return rows
-    return [...rows].sort((a, b) => {
-      const av = a[sortCol] ?? ''
-      const bv = b[sortCol] ?? ''
-      return sortAsc ? av.localeCompare(bv) : bv.localeCompare(av)
-    })
-  }, [rows, sortCol, sortAsc])
-
-  const handleSort = (col: number) => {
-    if (sortCol === col) {
-      setSortAsc(!sortAsc)
-    } else {
-      setSortCol(col)
-      setSortAsc(true)
-    }
-  }
-
-  if (headers.length === 0) {
-    return (
-      <div className="p-4 text-sm text-[var(--color-muted)]">
-        Empty or unparseable CSV content.
-      </div>
-    )
-  }
-
-  return (
-    <div className="overflow-auto h-full">
-      <table className="w-full text-sm border-collapse">
-        <thead className="sticky top-0 z-10">
-          <tr className="bg-[var(--color-surface-raised)]">
-            {headers.map((h, i) => (
-              <th
-                key={i}
-                onClick={() => handleSort(i)}
-                className="px-3 py-2 text-left font-bold text-xs uppercase tracking-wider text-[var(--color-muted)] border-b border-[var(--color-border-subtle)] cursor-pointer hover:text-[var(--color-text)] select-none whitespace-nowrap"
-              >
-                {h}
-                {sortCol === i && (
-                  <span className="ml-1">{sortAsc ? '↑' : '↓'}</span>
-                )}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {sorted.map((row, ri) => (
-            <tr
-              key={ri}
-              className={
-                ri % 2 === 0
-                  ? 'bg-[var(--color-bg)]'
-                  : 'bg-[var(--color-surface-raised)]'
-              }
-            >
-              {headers.map((_, ci) => (
-                <td
-                  key={ci}
-                  className="px-3 py-2 border-b border-[var(--color-border-subtle)] whitespace-nowrap max-w-xs truncate"
-                  title={row[ci] ?? ''}
-                >
-                  {row[ci] ?? ''}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <div className="px-3 py-2 text-xs text-[var(--color-muted)] border-t border-[var(--color-border-subtle)]">
-        {rows.length} rows × {headers.length} columns
-      </div>
-    </div>
-  )
-}