bmad-studio 0.1.0

package/packages/client/src/features/overview/OverviewPage.tsx

@@ -0,0 +1,282 @@
+import { useEffect, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { GitBranch, Zap, Plug, Package, Rocket, Users } from 'lucide-react'
+
+import { EmptyState } from '../../shared/EmptyState.js'
+import { WorkflowTypeBadge } from '../workflows/WorkflowsPage.js'
+
+type OverviewData = {
+  detected: boolean
+  sections: {
+    teams?: {
+      teams: Array<{
+        id: string
+        name: string
+        icon: string
+        description: string
+        memberCount: number
+        module?: string
+      }>
+      count: number
+    }
+    team?: {
+      agents: Array<{
+        id: string
+        name: string
+        title: string
+        icon?: string
+        role: string
+        skillCount: number
+        module?: string
+      }>
+      count: number
+    }
+    process?: {
+      workflows: Array<{ id: string; name: string; stepCount: number; module?: string; type?: string }>
+      count: number
+    }
+    toolkit?: { skills: Array<{ id: string; name: string; module?: string }>; count: number }
+    packages?: { packages: Array<{ name: string; version: string }>; count: number }
+    ideConfigs?: { ides: string[]; count: number }
+  }
+}
+
+function SectionHeader({ title, count, to }: { title: string; count: number; to: string }) {
+  return (
+    <div className="flex items-center justify-between mb-4">
+      <h2 className="text-xs font-bold uppercase tracking-wider text-[var(--color-muted)]">{title}</h2>
+      <Link
+        to={to}
+        className="text-sm font-bold text-[var(--color-accent)] hover:text-[var(--color-accent-hover)] transition-colors"
+      >
+        View all ({count}) &rarr;
+      </Link>
+    </div>
+  )
+}
+
+const MAX_OVERVIEW_ITEMS = 5
+const MAX_OVERVIEW_AGENTS = 8
+
+export function OverviewPage() {
+  const navigate = useNavigate()
+  const [data, setData] = useState<OverviewData | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch('/api/overview')
+      .then((r) => r.json())
+      .then((d) => {
+        setData(d as OverviewData)
+        setLoading(false)
+      })
+      .catch(() => setLoading(false))
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="space-y-8">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="h-32 rounded-lg bg-[var(--color-surface-raised)] animate-pulse" />
+        ))}
+      </div>
+    )
+  }
+
+  if (!data?.detected) {
+    return (
+      <EmptyState
+        icon={Rocket}
+        title="Welcome to BMAD Studio"
+        description="No BMAD project detected. Start by creating a BMAD project or point Studio to an existing one with --dir."
+      />
+    )
+  }
+
+  const { sections } = data
+
+  return (
+    <div>
+      <h1 className="text-3xl font-extrabold mb-10">Overview</h1>
+
+      <div className="space-y-0">
+        {/* Agents — first section, renamed from "The Team" */}
+        {sections.team && sections.team.count > 0 && (
+          <section className="border-b border-[var(--color-border-subtle)] pb-10 mb-10">
+            <SectionHeader title="Agents" count={sections.team.count} to="/agents" />
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+              {sections.team.agents.filter((a) => a.name || a.title).slice(0, MAX_OVERVIEW_AGENTS).map((agent) => {
+                const displayTitle = agent.title || agent.name
+                return (
+                  <button
+                    key={agent.id}
+                    onClick={() => navigate(`/agents/${agent.id}`)}
+                    className="p-4 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] text-left hover:border-[var(--color-accent)] hover:-translate-y-0.5 hover:shadow-md transition-all cursor-pointer"
+                  >
+                    <div className="flex items-center gap-2 mb-2">
+                      {agent.icon ? (
+                        <span className="text-lg leading-none" role="img">{agent.icon}</span>
+                      ) : (
+                        <span className="w-5 h-5 rounded bg-[var(--color-accent)] text-white text-[10px] font-bold flex items-center justify-center shrink-0">
+                          {agent.name.charAt(0).toUpperCase()}
+                        </span>
+                      )}
+                      <span className="font-bold text-sm truncate">{displayTitle}</span>
+                    </div>
+                    {agent.title && (
+                      <p className="text-xs text-[var(--color-muted)] truncate">({agent.name})</p>
+                    )}
+                    <p className="text-xs text-[var(--color-muted)] mt-1">{agent.skillCount} skills</p>
+                  </button>
+                )
+              })}
+            </div>
+            {sections.team.count > MAX_OVERVIEW_AGENTS && (
+              <Link
+                to="/agents"
+                className="block text-center text-sm text-[var(--color-accent)] hover:text-[var(--color-accent-hover)] py-2 mt-2"
+              >
+                + {sections.team.count - MAX_OVERVIEW_AGENTS} more agents
+              </Link>
+            )}
+          </section>
+        )}
+
+        {/* Teams — below Agents */}
+        {sections.teams && sections.teams.count > 0 && (
+          <section className="border-b border-[var(--color-border-subtle)] pb-10 mb-10">
+            <SectionHeader title="Teams" count={sections.teams.count} to="/teams" />
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+              {sections.teams.teams.map((t) => (
+                <button
+                  key={t.id}
+                  onClick={() => navigate('/teams')}
+                  className="p-4 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] text-left hover:border-[var(--color-accent)] hover:-translate-y-0.5 hover:shadow-md transition-all cursor-pointer"
+                >
+                  <div className="flex items-center gap-2 mb-2">
+                    {t.icon ? (
+                      <span className="text-lg leading-none" role="img">{t.icon}</span>
+                    ) : (
+                      <Users size={18} className="text-[var(--color-accent)]" />
+                    )}
+                    <span className="font-bold text-sm truncate">{t.name}</span>
+                  </div>
+                  {t.description && (
+                    <p className="text-xs text-[var(--color-muted)] line-clamp-2 mb-1">{t.description}</p>
+                  )}
+                  <p className="text-xs text-[var(--color-muted)]">{t.memberCount} members</p>
+                </button>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* Workflows — top 5 */}
+        {sections.process && sections.process.count > 0 && (
+          <section className="border-b border-[var(--color-border-subtle)] pb-10 mb-10">
+            <SectionHeader title="Workflows" count={sections.process.count} to="/workflows" />
+            <div className="space-y-2">
+              {sections.process.workflows.slice(0, MAX_OVERVIEW_ITEMS).map((wf) => (
+                <button
+                  key={wf.id}
+                  onClick={() => navigate('/workflows')}
+                  className="w-full flex items-center justify-between p-3 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] hover:border-[var(--color-accent)] transition-colors cursor-pointer"
+                >
+                  <div className="flex items-center gap-3">
+                    <GitBranch size={16} className="text-[var(--color-muted)]" />
+                    <span className="text-sm font-bold">{wf.name}</span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <WorkflowTypeBadge type={wf.type as 'step-based' | 'agent-based' | 'composite' | undefined} />
+                    <span className="text-xs text-[var(--color-muted)]">{wf.stepCount} steps</span>
+                    {wf.module && (
+                      <span className="text-xs px-2 py-0.5 rounded-full bg-[var(--color-bg)] border border-[var(--color-border-subtle)] text-[var(--color-muted)]">
+                        {wf.module}
+                      </span>
+                    )}
+                  </div>
+                </button>
+              ))}
+              {sections.process.count > MAX_OVERVIEW_ITEMS && (
+                <Link
+                  to="/workflows"
+                  className="block text-center text-sm text-[var(--color-accent)] hover:text-[var(--color-accent-hover)] py-2"
+                >
+                  + {sections.process.count - MAX_OVERVIEW_ITEMS} more workflows
+                </Link>
+              )}
+            </div>
+          </section>
+        )}
+
+        {/* Skills — card-style, top items */}
+        {sections.toolkit && sections.toolkit.count > 0 && (
+          <section className="border-b border-[var(--color-border-subtle)] pb-10 mb-10">
+            <SectionHeader title="Skills" count={sections.toolkit.count} to="/skills" />
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+              {sections.toolkit.skills.slice(0, 8).map((skill) => (
+                <button
+                  key={skill.id}
+                  onClick={() => navigate('/skills')}
+                  className="flex items-center gap-2 p-3 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] text-left hover:border-[var(--color-accent)] transition-colors cursor-pointer"
+                >
+                  <Zap size={14} className="text-[var(--color-accent)] shrink-0" />
+                  <span className="text-sm truncate">{skill.name}</span>
+                </button>
+              ))}
+            </div>
+            {sections.toolkit.count > 8 && (
+              <Link
+                to="/skills"
+                className="block text-center text-sm text-[var(--color-accent)] hover:text-[var(--color-accent-hover)] py-2 mt-2"
+              >
+                + {sections.toolkit.count - 8} more skills
+              </Link>
+            )}
+          </section>
+        )}
+
+        {/* Connections */}
+        {sections.ideConfigs && sections.ideConfigs.count > 0 && (
+          <section className="border-b border-[var(--color-border-subtle)] pb-10 mb-10">
+            <SectionHeader title="Data Sources" count={sections.ideConfigs.count} to="/connections" />
+            <div className="flex gap-3 flex-wrap">
+              {sections.ideConfigs.ides.map((ide) => (
+                <button
+                  key={ide}
+                  onClick={() => navigate('/connections')}
+                  className="flex items-center gap-2 px-4 py-3 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] hover:border-[var(--color-accent)] hover:-translate-y-0.5 hover:shadow-md transition-all cursor-pointer"
+                >
+                  <Plug size={16} className="text-[var(--color-success)]" />
+                  <span className="text-sm">{ide}</span>
+                </button>
+              ))}
+            </div>
+          </section>
+        )}
+
+        {/* Modules */}
+        {sections.packages && sections.packages.count > 0 && (
+          <section>
+            <SectionHeader title="Modules" count={sections.packages.count} to="/modules" />
+            <div className="flex gap-4 flex-wrap">
+              {sections.packages.packages.map((pkg) => (
+                <button
+                  key={pkg.name}
+                  onClick={() => navigate('/modules')}
+                  className="p-4 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] text-left hover:border-[var(--color-accent)] hover:-translate-y-0.5 hover:shadow-md transition-all cursor-pointer"
+                >
+                  <div className="flex items-center gap-2">
+                    <Package size={16} className="text-[var(--color-muted)]" />
+                    <span className="font-bold text-sm">{pkg.name}</span>
+                  </div>
+                  <p className="text-xs text-[var(--color-muted)] mt-1">v{pkg.version}</p>
+                </button>
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
+    </div>
+  )
+}

package/packages/client/src/features/packages/EditModuleDialog.tsx

@@ -0,0 +1,118 @@
+import { useState } from 'react'
+import { X, Save } from 'lucide-react'
+
+type EditModuleDialogProps = {
+  moduleName: string
+  currentVersion: string
+  currentDescription?: string
+  onClose: () => void
+  onSaved: () => void
+}
+
+export function EditModuleDialog({
+  moduleName,
+  currentVersion,
+  currentDescription,
+  onClose,
+  onSaved,
+}: EditModuleDialogProps) {
+  const [version, setVersion] = useState(currentVersion || '1.0.0')
+  const [description, setDescription] = useState(currentDescription || '')
+  const [error, setError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  const handleSave = async () => {
+    setSubmitting(true)
+    setError(null)
+    try {
+      const resp = await fetch(`/api/modules/${encodeURIComponent(moduleName)}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          version: version.trim(),
+          description: description.trim(),
+        }),
+      })
+      if (!resp.ok) {
+        const data = (await resp.json()) as { error?: { message?: string } }
+        throw new Error(data.error?.message ?? 'Failed to update module')
+      }
+      onSaved()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update module')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+      <div className="relative bg-[var(--color-bg)] border border-[var(--color-border-subtle)] rounded-lg shadow-xl w-full max-w-md p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-bold">Edit Module: {moduleName}</h2>
+          <button
+            onClick={onClose}
+            className="text-[var(--color-muted)] hover:text-[var(--color-text)]"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-bold mb-1">Name</label>
+            <input
+              type="text"
+              value={moduleName}
+              disabled
+              className="w-full px-3 py-2 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] opacity-50 cursor-not-allowed"
+            />
+            <p className="text-xs text-[var(--color-muted)] mt-1">Module name cannot be changed</p>
+          </div>
+
+          <div>
+            <label className="block text-sm font-bold mb-1">Version</label>
+            <input
+              type="text"
+              value={version}
+              onChange={(e) => setVersion(e.target.value)}
+              placeholder="e.g. 1.0.0"
+              className="w-full px-3 py-2 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-bold mb-1">Description (optional)</label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={3}
+              placeholder="What does this module provide?"
+              className="w-full px-3 py-2 text-sm rounded-md bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] focus:border-[var(--color-accent)] focus:outline-none resize-none"
+            />
+          </div>
+
+          {error && <p className="text-sm text-[var(--color-error)]">{error}</p>}
+        </div>
+
+        <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-[var(--color-border-subtle)]">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm rounded-md border border-[var(--color-border-subtle)] hover:bg-[var(--color-surface-raised)] transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={submitting}
+            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 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+          >
+            <Save size={14} />
+            {submitting ? 'Saving...' : 'Save Changes'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}