bmad-studio 0.1.0

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

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

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

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

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

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

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

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