bmad-studio 0.1.0

package/packages/client/src/features/about/AboutPage.tsx

@@ -0,0 +1,144 @@
+import { ExternalLink, Github, Heart, BookOpen, Scale } from 'lucide-react'
+
+const VERSION = '0.1.0'
+
+function LinkCard({ href, icon: Icon, title, description }: { href: string; icon: typeof Github; title: string; description: string }) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-start gap-3 p-4 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] hover:border-[var(--color-accent)] transition-colors"
+    >
+      <Icon size={18} className="text-[var(--color-accent)] shrink-0 mt-0.5" />
+      <div className="min-w-0">
+        <div className="flex items-center gap-1.5">
+          <span className="text-sm font-bold">{title}</span>
+          <ExternalLink size={10} className="text-[var(--color-muted)]" />
+        </div>
+        <p className="text-xs text-[var(--color-muted)] mt-0.5">{description}</p>
+      </div>
+    </a>
+  )
+}
+
+const faqs: Array<{ q: string; a: string }> = [
+  {
+    q: 'What is BMAD?',
+    a: 'BMAD (Build Manage Architect Deploy) is an agentic engineering framework that defines AI agents, skills, and workflows as structured markdown files. It provides a method for orchestrating AI agents in software delivery workflows.',
+  },
+  {
+    q: 'What does BMAD Studio do?',
+    a: 'Studio is the configuration and visibility layer for BMAD projects. It reads and writes the same markdown and YAML files that BMAD uses — no database, no hidden state. You can browse agents, visualize workflows, manage skills, and configure your project through a web interface.',
+  },
+  {
+    q: 'Does Studio execute agents or workflows?',
+    a: 'No. Studio configures and visualizes. Your IDE (Claude Code, Cursor, Windsurf, etc.) remains the execution environment. Studio helps you understand and manage the setup; the IDE runs the agents.',
+  },
+  {
+    q: 'What BMAD version is supported?',
+    a: 'Studio targets BMAD v6+. It reads the BMAD version from your project config and warns if the version is unsupported.',
+  },
+  {
+    q: 'How do I install Studio?',
+    a: 'Run `npx bmad-studio` from your BMAD project root. It starts a local server and opens in your browser. No global install required.',
+  },
+  {
+    q: 'Where does Studio store its data?',
+    a: 'Studio reads directly from your _bmad/ directory. Studio-only runtime data (drafts, sync config) lives in .bmad-studio/ which can be deleted at any time with zero impact on your project.',
+  },
+  {
+    q: 'Can I use Studio without a BMAD project?',
+    a: 'Studio will start in setup mode and guide you through initializing a BMAD structure. However, most features require an existing BMAD project to be useful.',
+  },
+  {
+    q: 'Is my data sent anywhere?',
+    a: 'No. Studio runs entirely locally. There are no analytics, no telemetry, and no external network requests. All data stays on your machine.',
+  },
+]
+
+export function AboutPage() {
+  return (
+    <div className="max-w-2xl">
+      <h1 className="text-2xl font-extrabold mb-2">About BMAD Studio</h1>
+      <p className="text-sm text-[var(--color-muted)] mb-8">
+        Version {VERSION}
+      </p>
+
+      {/* Description */}
+      <div className="mb-8">
+        <p className="text-sm leading-relaxed">
+          BMAD Studio is a browser-based admin interface for the BMAD agentic engineering framework.
+          It helps you visualize, configure, and manage your BMAD project — agents, skills, workflows,
+          teams, and modules — all through an intuitive web UI.
+        </p>
+        <p className="text-sm leading-relaxed mt-3 text-[var(--color-muted)]">
+          Studio is the configuration and visibility layer. It reads and writes BMAD's existing
+          markdown and YAML files directly, with no database and no hidden state. The IDE remains
+          the execution environment.
+        </p>
+      </div>
+
+      {/* Links */}
+      <div className="mb-8">
+        <h2 className="text-sm font-bold mb-3">Links</h2>
+        <div className="grid gap-3 sm:grid-cols-2">
+          <LinkCard
+            href="https://github.com/jwhiteside/bmad-studio"
+            icon={Github}
+            title="GitHub Repository"
+            description="Source code, issues, and releases"
+          />
+          <LinkCard
+            href="https://github.com/bmadcode/BMAD-METHOD"
+            icon={BookOpen}
+            title="BMAD Method"
+            description="The agentic engineering framework"
+          />
+          <LinkCard
+            href="https://github.com/jwhiteside/bmad-studio/blob/main/CONTRIBUTING.md"
+            icon={Heart}
+            title="Contributing"
+            description="How to report bugs and submit PRs"
+          />
+          <LinkCard
+            href="https://github.com/jwhiteside/bmad-studio/blob/main/LICENSE"
+            icon={Scale}
+            title="MIT License"
+            description="Free and open-source software"
+          />
+        </div>
+      </div>
+
+      {/* FAQ */}
+      <div className="mb-8">
+        <h2 className="text-sm font-bold mb-3">Frequently Asked Questions</h2>
+        <div className="space-y-4">
+          {faqs.map((faq, i) => (
+            <div key={i} className="p-4 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)]">
+              <p className="text-sm font-bold mb-1.5">{faq.q}</p>
+              <p className="text-xs text-[var(--color-muted)] leading-relaxed">{faq.a}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Tech stack */}
+      <div className="mb-8">
+        <h2 className="text-sm font-bold mb-3">Built With</h2>
+        <div className="flex flex-wrap gap-2">
+          {['React 19', 'Fastify 5', 'TypeScript', 'Tailwind CSS 4', 'Vite 6', 'CodeMirror 6', 'React Flow'].map((tech) => (
+            <span key={tech} className="text-xs px-2.5 py-1 rounded-full bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] text-[var(--color-muted)]">
+              {tech}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="text-xs text-[var(--color-muted)] border-t border-[var(--color-border-subtle)] pt-4">
+        <p>Made by <a href="https://github.com/jwhiteside" target="_blank" rel="noopener noreferrer" className="text-[var(--color-accent)] hover:underline">Jonathan Whiteside</a>. Licensed under the MIT License.</p>
+      </div>
+    </div>
+  )
+}

package/packages/client/src/features/agents/AgentCard.tsx

@@ -0,0 +1,52 @@
+import { useNavigate } from 'react-router-dom'
+
+import type { AgentListItem } from '@bmad-studio/shared'
+
+type AgentCardProps = {
+  agent: AgentListItem
+}
+
+export function AgentCard({ agent }: AgentCardProps) {
+  const navigate = useNavigate()
+
+  const displayTitle = agent.title || agent.role || agent.name
+  const displayName = agent.title ? agent.name : undefined
+
+  return (
+    <div
+      onClick={() => navigate(`/agents/${agent.id}`)}
+      onKeyDown={(e) => e.key === 'Enter' && navigate(`/agents/${agent.id}`)}
+      role="button"
+      tabIndex={0}
+      className="p-4 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] 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>
+        {agent.hasOverrides && (
+          <span
+            className="w-2 h-2 rounded-full bg-[var(--color-warning)] shrink-0"
+            title="Has overrides"
+          />
+        )}
+      </div>
+      {displayName && (
+        <p className="text-xs text-[var(--color-muted)] truncate mb-2">({displayName})</p>
+      )}
+      <div className="flex items-center justify-between text-xs text-[var(--color-muted)]">
+        <span>{agent.skillCount} skills</span>
+        {agent.module && (
+          <span className="px-2 py-0.5 rounded-full bg-[var(--color-bg)] border border-[var(--color-border-subtle)]">
+            {agent.module}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}

package/packages/client/src/features/agents/AgentDetail.tsx

@@ -0,0 +1,338 @@
+import { useParams, Link, useNavigate } from 'react-router-dom'
+import { ArrowLeft, ExternalLink, ChevronDown, ChevronRight, Pencil, Plus, GitBranch, Users } from 'lucide-react'
+import { useState } from 'react'
+
+import type { TeamListItem } from '@bmad-studio/shared'
+
+import { useAgentDetail } from './use-agent-detail.js'
+import { useWorkflows } from '../workflows/use-workflows.js'
+import { useTeams } from '../teams/use-teams.js'
+import { SkillAssignment } from './SkillAssignment.js'
+import { EditAgentDialog } from './EditAgentDialog.js'
+import { MarkdownEditor } from '../../shared/markdown-editor/MarkdownEditor.js'
+import { useNotifications } from '../../layout/NotificationProvider.js'
+
+export function AgentDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const { notify } = useNotifications()
+  const { data: agent, isLoading, error } = useAgentDetail(id ?? '')
+  const [sourceExpanded, setSourceExpanded] = useState(false)
+  const [sourceContent, setSourceContent] = useState<string | null>(null)
+  const [sourceLoading, setSourceLoading] = useState(false)
+  const [showSkillAssignment, setShowSkillAssignment] = useState(false)
+  const [showEdit, setShowEdit] = useState(false)
+  const { data: workflows } = useWorkflows()
+  const { data: allTeams } = useTeams()
+
+  // Find teams this agent belongs to
+  const agentTeams = (allTeams ?? []).filter((t: TeamListItem) =>
+    t.agentIds.includes(id ?? '') || t.agentIds.includes(agent?.name ?? ''),
+  )
+
+  function handleExpandSource() {
+    const willExpand = !sourceExpanded
+    setSourceExpanded(willExpand)
+    if (willExpand && agent && sourceContent === null) {
+      setSourceLoading(true)
+      const bmadIndex = agent.filePath.indexOf('_bmad/')
+      const relativePath = bmadIndex >= 0 ? agent.filePath.slice(bmadIndex + 6) : agent.filePath
+      fetch(`/api/files/${relativePath}`)
+        .then((r) => {
+          if (!r.ok) throw new Error('Not found')
+          return r.json()
+        })
+        .then((d) => {
+          setSourceContent((d as { content: string }).content)
+        })
+        .catch(() => setSourceContent('Failed to load source file.'))
+        .finally(() => setSourceLoading(false))
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-4">
+        <div className="h-8 w-48 rounded bg-[var(--color-surface-raised)] animate-pulse" />
+        <div className="h-40 rounded-lg bg-[var(--color-surface-raised)] animate-pulse" />
+      </div>
+    )
+  }
+
+  if (error || !agent) {
+    return (
+      <div>
+        <Link
+          to="/agents"
+          className="flex items-center gap-1 text-sm text-[var(--color-muted)] mb-4 hover:text-[var(--color-text)]"
+        >
+          <ArrowLeft size={16} /> Back to Agents
+        </Link>
+        <p className="text-[var(--color-error)]">
+          {error ? `Failed to load agent: ${error.message}` : 'Agent not found'}
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-3xl">
+      <Link
+        to="/agents"
+        className="flex items-center gap-1 text-sm text-[var(--color-muted)] mb-4 hover:text-[var(--color-text)]"
+      >
+        <ArrowLeft size={16} /> Back to Agents
+      </Link>
+
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center gap-3 mb-4">
+          {agent.icon ? (
+            <span className="text-3xl leading-none" role="img">{agent.icon}</span>
+          ) : (
+            <span className="w-10 h-10 rounded-lg bg-[var(--color-accent)] text-white text-lg font-bold flex items-center justify-center shrink-0">
+              {agent.name.charAt(0).toUpperCase()}
+            </span>
+          )}
+          <div className="min-w-0">
+            <h1 className="text-2xl font-extrabold truncate">
+              {agent.title || agent.name}
+            </h1>
+            {agent.title && (
+              <p className="text-sm text-[var(--color-muted)]">({agent.name})</p>
+            )}
+          </div>
+        </div>
+        <p className="text-[var(--color-muted)] text-sm mb-4">{agent.role}</p>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setShowEdit(true)}
+            className="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-bold rounded-md bg-[var(--color-accent)] text-white hover:bg-[var(--color-accent-hover)] transition-colors"
+          >
+            <Pencil size={14} />
+            Edit Agent
+          </button>
+          <button
+            onClick={() => navigate(`/agents/${id}/override`)}
+            className="inline-flex items-center gap-1.5 px-4 py-2 text-sm rounded-md border border-[var(--color-border-subtle)] hover:bg-[var(--color-surface-raised)] transition-colors"
+          >
+            <Pencil size={14} />
+            Edit Override
+          </button>
+          <a
+            href={`vscode://file${agent.filePath}`}
+            className="inline-flex items-center gap-1.5 text-sm text-[var(--color-accent)] hover:text-[var(--color-accent-hover)] transition-colors underline underline-offset-2"
+          >
+            <ExternalLink size={14} />
+            Open in IDE
+          </a>
+        </div>
+      </div>
+
+      {/* Metadata */}
+      <section className="mb-8">
+        <h2 className="text-lg font-bold mb-3">Details</h2>
+        <div className="grid grid-cols-2 gap-3 text-sm">
+          <div className="p-3 rounded-lg bg-[var(--color-surface-raised)]">
+            <span className="text-[var(--color-muted)]">Module</span>
+            <p className="font-bold">{agent.module ?? 'Unknown'}</p>
+          </div>
+          <div className="p-3 rounded-lg bg-[var(--color-surface-raised)]">
+            <span className="text-[var(--color-muted)]">Discussion Mode</span>
+            <p className="font-bold">{agent.discussion ? 'Enabled' : 'Disabled'}</p>
+          </div>
+        </div>
+      </section>
+
+      {/* Skills */}
+      <section className="mb-8">
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="text-lg font-bold">Skills ({agent.skills.length})</h2>
+          <button
+            onClick={() => setShowSkillAssignment(true)}
+            className="flex items-center gap-1 text-sm text-[var(--color-accent)] hover:text-[var(--color-accent-hover)] transition-colors"
+          >
+            <Plus size={14} />
+            Assign
+          </button>
+        </div>
+        {agent.skills.length > 0 ? (
+          <div className="flex flex-wrap gap-2">
+            {agent.skills.map((skill) => (
+              <button
+                key={skill}
+                onClick={() => navigate('/skills')}
+                className="px-3 py-1 text-xs rounded-full bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)] hover:border-[var(--color-accent)] hover:text-[var(--color-accent)] transition-colors cursor-pointer"
+              >
+                {skill}
+              </button>
+            ))}
+          </div>
+        ) : (
+          <p className="text-sm text-[var(--color-muted)]">No skills assigned</p>
+        )}
+      </section>
+
+      {/* Skill Assignment Panel */}
+      {showSkillAssignment && (
+        <div className="fixed inset-0 z-40 flex">
+          <div className="flex-1 bg-black/40" onClick={() => setShowSkillAssignment(false)} />
+          <div className="w-[700px] bg-[var(--color-bg)] border-l border-[var(--color-border-subtle)] shadow-xl">
+            <SkillAssignment
+              agentName={agent.name}
+              currentSkills={agent.skills}
+              onSave={async (skills) => {
+                try {
+                  const resp = await fetch(`/api/agents/${id}/skills`, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ skills }),
+                  })
+                  if (resp.ok) {
+                    notify('success', `Updated skills for ${agent.name}`)
+                    setShowSkillAssignment(false)
+                  } else {
+                    notify('error', 'Failed to update skills')
+                  }
+                } catch {
+                  notify('error', 'Failed to update skills')
+                }
+              }}
+              onClose={() => setShowSkillAssignment(false)}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Menu Items / Commands */}
+      {agent.menu.length > 0 && (
+        <section className="mb-8">
+          <h2 className="text-lg font-bold mb-3">Commands ({agent.menu.length})</h2>
+          <div className="space-y-2">
+            {agent.menu.map((item) => (
+              <div
+                key={item.trigger}
+                className="flex items-center justify-between p-3 rounded-lg bg-[var(--color-surface-raised)] border border-[var(--color-border-subtle)]"
+              >
+                <div>
+                  <span className="font-bold text-sm font-[var(--font-mono)]">{item.trigger}</span>
+                  <p className="text-xs text-[var(--color-muted)] mt-0.5">{item.input}</p>
+                </div>
+                {item.route && (
+                  <span className="text-xs text-[var(--color-muted)] font-[var(--font-mono)]">
+                    {item.route}
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Teams */}
+      <section className="mb-8">
+        <h2 className="text-lg font-bold mb-3">Teams ({agentTeams.length})</h2>
+        {agentTeams.length > 0 ? (
+          <div className="space-y-2">
+            {agentTeams.map((t) => (
+              <button
+                key={t.id}
+                onClick={() => navigate('/teams')}
+                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 text-left"
+              >
+                <div className="flex items-center gap-2">
+                  {t.icon ? (
+                    <span className="text-sm leading-none">{t.icon}</span>
+                  ) : (
+                    <Users size={14} className="text-[var(--color-accent)]" />
+                  )}
+                  <span className="text-sm font-bold">{t.name}</span>
+                </div>
+                <span className="text-xs text-[var(--color-muted)]">{t.memberCount} members</span>
+              </button>
+            ))}
+          </div>
+        ) : (
+          <p className="text-sm text-[var(--color-muted)]">This agent is not part of any team</p>
+        )}
+      </section>
+
+      {/* Workflow Context */}
+      {workflows && workflows.length > 0 && agent && (
+        <section className="mb-8">
+          <h2 className="text-lg font-bold mb-3">Workflow Participation</h2>
+          {(() => {
+            // Find workflows that reference this agent
+            const agentName = agent.name.toLowerCase()
+            const agentId = agent.id.toLowerCase()
+            const relatedWorkflows = workflows.filter((wf) => {
+              const nameMatch = wf.name.toLowerCase()
+              return nameMatch.includes(agentId) || nameMatch.includes(agentName)
+            })
+
+            if (relatedWorkflows.length === 0) {
+              return (
+                <p className="text-sm text-[var(--color-muted)]">
+                  This agent is not directly referenced in any workflow names. Agents may still be invoked via workflow steps.
+                </p>
+              )
+            }
+
+            return (
+              <div className="space-y-2">
+                {relatedWorkflows.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 text-left"
+                  >
+                    <div className="flex items-center gap-2">
+                      <GitBranch size={14} className="text-[var(--color-muted)]" />
+                      <span className="text-sm font-bold">{wf.name}</span>
+                    </div>
+                    <span className="text-xs text-[var(--color-muted)]">{wf.stepCount} steps</span>
+                  </button>
+                ))}
+              </div>
+            )
+          })()}
+        </section>
+      )}
+
+      {/* Source (collapsed by default) */}
+      <section>
+        <button
+          onClick={handleExpandSource}
+          className="flex items-center gap-2 text-lg font-bold mb-3 hover:text-[var(--color-accent)] transition-colors"
+        >
+          {sourceExpanded ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
+          Source
+        </button>
+        {sourceExpanded && (
+          <div className="rounded-lg border border-[var(--color-border-subtle)] overflow-hidden h-96">
+            {sourceLoading ? (
+              <div className="h-full bg-[var(--color-surface-raised)] animate-pulse" />
+            ) : (
+              <MarkdownEditor
+                content={sourceContent ?? ''}
+                filePath={agent.filePath}
+                onChange={() => {}}
+                readOnly
+              />
+            )}
+          </div>
+        )}
+      </section>
+
+      {showEdit && agent && (
+        <EditAgentDialog
+          agent={agent}
+          onClose={() => setShowEdit(false)}
+          onSaved={() => {
+            setShowEdit(false)
+          }}
+        />
+      )}
+    </div>
+  )
+}

package/packages/client/src/features/agents/AgentOverrideEditor.tsx

@@ -0,0 +1,127 @@
+import { useState, useEffect } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import { ArrowLeft } from 'lucide-react'
+
+import { MarkdownEditor } from '../../shared/markdown-editor/MarkdownEditor.js'
+import { DiffViewer } from '../../shared/diff-viewer/DiffViewer.js'
+import { useAgentDetail } from './use-agent-detail.js'
+import { useNotifications } from '../../layout/NotificationProvider.js'
+
+export function AgentOverrideEditor() {
+  const { id } = useParams<{ id: string }>()
+  const { data: agent } = useAgentDetail(id ?? '')
+  const { notify } = useNotifications()
+  const [content, setContent] = useState('')
+  const [originalContent, setOriginalContent] = useState('')
+  const [showDiff, setShowDiff] = useState(false)
+  const [loaded, setLoaded] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  // Pre-populate from existing override file
+  useEffect(() => {
+    if (agent && !loaded) {
+      const overridePath = `_config/agents/${agent.id}.customize.yaml`
+      fetch(`/api/files/${overridePath}`)
+        .then((r) => {
+          if (!r.ok) throw new Error('Not found')
+          return r.json()
+        })
+        .then((d) => {
+          const data = d as { content: string }
+          setContent(data.content)
+          setOriginalContent(data.content)
+        })
+        .catch(() => {
+          // No existing override — start empty with a template
+          const template = `# Override customizations for ${agent.name}\n# Add custom instructions, modify behavior, or extend capabilities\n\n`
+          setContent(template)
+          setOriginalContent('')
+        })
+        .finally(() => setLoaded(true))
+    }
+  }, [agent, loaded])
+
+  async function handleConfirmSave() {
+    if (!agent) return
+    setSaving(true)
+    try {
+      const overridePath = `_config/agents/${agent.id}.customize.yaml`
+      const resp = await fetch(`/api/files/${overridePath}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content }),
+      })
+      if (resp.ok) {
+        setOriginalContent(content)
+        setShowDiff(false)
+        notify('success', `Override saved for ${agent.name}`)
+      } else {
+        notify('error', 'Failed to save override')
+      }
+    } catch {
+      notify('error', 'Failed to save override')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!agent) {
+    return (
+      <div>
+        <Link
+          to={`/agents/${id}`}
+          className="flex items-center gap-1 text-sm text-[var(--color-muted)] mb-4 hover:text-[var(--color-text)]"
+        >
+          <ArrowLeft size={16} /> Back to Agent
+        </Link>
+        <p className="text-[var(--color-muted)]">Loading agent...</p>
+      </div>
+    )
+  }
+
+  if (showDiff) {
+    return (
+      <div className="h-[calc(100vh-8rem)]">
+        <h1 className="text-2xl font-extrabold mb-4">Override Changes: {agent.name}</h1>
+        {saving && (
+          <p className="text-sm text-[var(--color-muted)] mb-2">Saving...</p>
+        )}
+        <DiffViewer
+          original={originalContent}
+          modified={content}
+          onConfirm={handleConfirmSave}
+          onCancel={() => setShowDiff(false)}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-[calc(100vh-8rem)]">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <Link
+            to={`/agents/${id}`}
+            className="flex items-center gap-1 text-sm text-[var(--color-muted)] hover:text-[var(--color-text)]"
+          >
+            <ArrowLeft size={16} /> Back
+          </Link>
+          <h1 className="text-xl font-extrabold">Override: {agent.name}</h1>
+        </div>
+        <button
+          onClick={() => setShowDiff(true)}
+          disabled={content === originalContent}
+          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-40 disabled:cursor-not-allowed"
+        >
+          Review Changes
+        </button>
+      </div>
+      <MarkdownEditor
+        content={content}
+        filePath={`_bmad/_config/agents/${agent.id}.customize.yaml`}
+        onChange={setContent}
+        onSave={() => setShowDiff(true)}
+      />
+    </div>
+  )
+}