bmad-studio 0.1.0 → 0.2.0

package/_bmad/tea/workflows/testarch/bmad-testarch-trace/validation-report-20260127-095021.md

@@ -1,73 +0,0 @@
----
-validationDate: 2026-01-27
-workflowName: testarch-trace
-workflowPath: {project-root}/src/workflows/testarch/bmad-testarch-trace
-validationStatus: COMPLETE
-completionDate: 2026-01-27 10:03:10
----
-
-# Validation Report: testarch-trace
-
-**Validation Started:** 2026-01-27 09:50:21
-**Validator:** BMAD Workflow Validation System (Codex)
-**Standards Version:** BMAD Workflow Standards
-
-## File Structure & Size
-
-- workflow.md present: YES
-- instructions.md present: YES
-- workflow.yaml present: YES
-- step files found: 8
-
-**Step File Sizes:**
-
-- steps-c/step-01-load-context.md: 73 lines [GOOD]
-- steps-c/step-02-discover-tests.md: 62 lines [GOOD]
-- steps-c/step-03-map-criteria.md: 58 lines [GOOD]
-- steps-c/step-04-analyze-gaps.md: 57 lines [GOOD]
-- steps-c/step-05-gate-decision.md: 66 lines [GOOD]
-- steps-e/step-01-assess.md: 51 lines [GOOD]
-- steps-e/step-02-apply-edit.md: 46 lines [GOOD]
-- steps-v/step-01-validate.md: 53 lines [GOOD]
-- workflow-plan.md present: YES
-
-## Frontmatter Validation
-
-- No frontmatter violations found
-
-## Critical Path Violations
-
-- No {project-root} hardcoded paths detected in body
-- No dead relative links detected
-
-## Menu Handling Validation
-
-- No menu structures detected (linear step flow) [N/A]
-
-## Step Type Validation
-
-- Last step steps-v/step-01-validate.md has no nextStepFile (final step OK)
-- Step type validation assumes linear sequence (no branching/menu). Workflow-plan.md present for reference. [INFO]
-
-## Output Format Validation
-
-- Templates present: trace-template.md
-- Steps with outputFile in frontmatter:
-  - steps-c/step-05-gate-decision.md
-  - steps-v/step-01-validate.md
-
-## Validation Design Check
-
-- checklist.md present: YES
-- Validation steps folder (steps-v) present: YES
-
-## Instruction Style Check
-
-- All steps include STEP GOAL, MANDATORY EXECUTION RULES, EXECUTION PROTOCOLS, CONTEXT BOUNDARIES, and SUCCESS/FAILURE metrics
-
-## Summary
-
-- Validation completed: 2026-01-27 10:03:10
-- Critical issues: 0
-- Warnings: 0 (informational notes only)
-- Readiness: READY (manual review optional)

package/_bmad/tea/workflows/testarch/bmad-testarch-trace/validation-report-20260127-102401.md

@@ -1,116 +0,0 @@
----
-validationDate: 2026-01-27
-workflowName: testarch-trace
-workflowPath: {project-root}/src/workflows/testarch/bmad-testarch-trace
-validationStatus: COMPLETE
-completionDate: 2026-01-27 10:24:01
----
-
-# Validation Report: testarch-trace
-
-**Validation Started:** 2026-01-27 10:24:01
-**Validator:** BMAD Workflow Validation System (Codex)
-**Standards Version:** BMAD Workflow Standards
-
-## File Structure & Size
-
-- workflow.md present: YES
-- instructions.md present: YES
-- workflow.yaml present: YES
-- step files found: 8
-
-**Step File Sizes:**
-
-- steps-c/step-01-load-context.md: 72 lines [GOOD]
-- steps-c/step-02-discover-tests.md: 61 lines [GOOD]
-- steps-c/step-03-map-criteria.md: 57 lines [GOOD]
-- steps-c/step-04-analyze-gaps.md: 56 lines [GOOD]
-- steps-c/step-05-gate-decision.md: 65 lines [GOOD]
-- steps-e/step-01-assess.md: 50 lines [GOOD]
-- steps-e/step-02-apply-edit.md: 45 lines [GOOD]
-- steps-v/step-01-validate.md: 52 lines [GOOD]
-- workflow-plan.md present: YES
-
-## Frontmatter Validation
-
-- No frontmatter violations found
-
-## Critical Path Violations
-
-### Config Variables (Exceptions)
-
-Standard BMAD config variables treated as valid exceptions: bmb_creations_output_folder, communication_language, document_output_language, output_folder, planning_artifacts, project-root, project_name, test_artifacts, user_name
-
-- No {project-root} hardcoded paths detected in body
-
-- No dead relative links detected
-
-- No module path assumptions detected
-
-**Status:** ✅ PASS - No critical violations
-
-## Menu Handling Validation
-
-- No menu structures detected (linear step flow) [N/A]
-
-## Step Type Validation
-
-- steps-c/step-01-load-context.md: Init [PASS]
-- steps-c/step-02-discover-tests.md: Middle [PASS]
-- steps-c/step-03-map-criteria.md: Middle [PASS]
-- steps-c/step-04-analyze-gaps.md: Middle [PASS]
-- steps-c/step-05-gate-decision.md: Final [PASS]
-- Step type validation assumes linear sequence (no branching/menu). Workflow-plan.md present for reference. [INFO]
-
-## Output Format Validation
-
-- Templates present: trace-template.md
-- Steps with outputFile in frontmatter:
-  - steps-c/step-05-gate-decision.md
-  - steps-v/step-01-validate.md
-- checklist.md present: YES
-
-## Validation Design Check
-
-- Validation steps folder (steps-v) present: YES
-- Validation step(s) present: step-01-validate.md
-- Validation steps reference checklist data and auto-proceed
-
-## Instruction Style Check
-
-- Instruction style: Prescriptive (appropriate for TEA quality/compliance workflows)
-- Steps emphasize mandatory sequence, explicit success/failure metrics, and risk-based guidance
-
-## Collaborative Experience Check
-
-- Overall facilitation quality: GOOD
-- Steps use progressive prompts and clear role reinforcement; no laundry-list interrogation detected
-- Flow progression is clear and aligned to workflow goals
-
-## Subagent Optimization Opportunities
-
-- No high-priority subagent optimizations identified; workflow already uses step-file architecture
-- Pattern 1 (grep/regex): N/A for most steps
-- Pattern 2 (per-file analysis): already aligned to validation structure
-- Pattern 3 (data ops): minimal data file loads
-- Pattern 4 (parallel): optional for validation only
-
-## Cohesive Review
-
-- Overall assessment: GOOD
-- Flow is linear, goals are clear, and outputs map to TEA artifacts
-- Voice and tone consistent with Test Architect persona
-- Recommendation: READY (minor refinements optional)
-
-## Plan Quality Validation
-
-- Plan file present: workflow-plan.md
-- Planned steps found: 8 (all implemented)
-- Plan implementation status: Fully Implemented
-
-## Summary
-
-- Validation completed: 2026-01-27 10:24:01
-- Critical issues: 0
-- Warnings: 0 (informational notes only)
-- Readiness: READY (manual review optional)

package/_bmad/tea/workflows/testarch/bmad-testarch-trace/workflow-plan.md

@@ -1,21 +0,0 @@
-    # Workflow Plan: testarch-trace
-
-    ## Create Mode (steps-c)
-    - step-01-load-context.md
-
-- step-02-discover-tests.md
-- step-03-map-criteria.md
-- step-04-analyze-gaps.md
-- step-05-gate-decision.md
-
-  ## Validate Mode (steps-v)
-  - step-01-validate.md
-
-  ## Edit Mode (steps-e)
-  - step-01-assess.md
-  - step-02-apply-edit.md
-
-  ## Outputs
-  - {test_artifacts}/traceability-matrix.md
-
-- Gate decision summary (if evidence available)

package/_bmad/tea/workflows/testarch/bmad-testarch-trace/workflow.md

@@ -1,41 +0,0 @@
----
-name: bmad-testarch-trace
-description: Generate traceability matrix and quality gate decision. Use when user says 'lets create traceability matrix' or 'I want to analyze test coverage'
-web_bundle: true
----
-
-# Requirements Traceability & Quality Gate
-
-**Goal:** Generate requirements-to-tests traceability matrix, analyze coverage, and make quality gate decision (PASS/CONCERNS/FAIL/WAIVED)
-
-**Role:** You are the Master Test Architect.
-
----
-
-## WORKFLOW ARCHITECTURE
-
-This workflow uses **tri-modal step-file architecture**:
-
-- **Create mode (steps-c/)**: primary execution flow
-- **Validate mode (steps-v/)**: validation against checklist
-- **Edit mode (steps-e/)**: revise existing outputs
-
----
-
-## INITIALIZATION SEQUENCE
-
-### 1. Mode Determination
-
-"Welcome to the workflow. What would you like to do?"
-
-- **[C] Create** — Run the workflow
-- **[R] Resume** — Resume an interrupted workflow
-- **[V] Validate** — Validate existing outputs
-- **[E] Edit** — Edit existing outputs
-
-### 2. Route to First Step
-
-- **If C:** Load `steps-c/step-01-load-context.md`
-- **If R:** Load `steps-c/step-01b-resume.md`
-- **If V:** Load `steps-v/step-01-validate.md`
-- **If E:** Load `steps-e/step-01-assess.md`

package/_bmad/tea/workflows/testarch/bmad-testarch-trace/workflow.yaml

@@ -1,56 +0,0 @@
-# Test Architect workflow: bmad-testarch-trace
-name: bmad-testarch-trace
-# prettier-ignore
-description: 'Generate traceability matrix and quality gate decision. Use when the user says "lets create traceability matrix" or "I want to analyze test coverage"'
-
-# Critical variables from config
-config_source: "{project-root}/_bmad/tea/config.yaml"
-output_folder: "{config_source}:output_folder"
-test_artifacts: "{config_source}:test_artifacts"
-user_name: "{config_source}:user_name"
-communication_language: "{config_source}:communication_language"
-document_output_language: "{config_source}:document_output_language"
-date: system-generated
-
-# Workflow components
-installed_path: "."
-instructions: "./instructions.md"
-validation: "./checklist.md"
-template: "./trace-template.md"
-
-# Variables and inputs
-variables:
-  # Directory paths
-  test_dir: "{project-root}/tests" # Root test directory
-  source_dir: "{project-root}" # Source code directory (customize if needed, e.g., {project-root}/src or {project-root}/lib)
-
-  # Workflow behavior
-  coverage_levels: "e2e,api,component,unit" # Which test levels to trace
-  gate_type: "story" # story | epic | release | hotfix - determines gate scope
-  decision_mode: "deterministic" # deterministic (rule-based) | manual (team decision)
-
-# Output configuration
-default_output_file: "{test_artifacts}/traceability-matrix.md"
-
-# Required tools
-required_tools:
-  - read_file # Read story, test files, BMad artifacts
-  - write_file # Create traceability matrix, gate YAML
-  - list_files # Discover test files
-  - search_repo # Find tests by test ID, describe blocks
-  - glob # Find test files matching patterns
-
-tags:
-  - qa
-  - traceability
-  - test-architect
-  - coverage
-  - requirements
-  - gate
-  - decision
-  - release
-
-execution_hints:
-  interactive: false # Minimize prompts
-  autonomous: true # Proceed without user input unless blocked
-  iterative: true

package/eslint.config.js

@@ -1,38 +0,0 @@
-import js from '@eslint/js'
-import tseslint from 'typescript-eslint'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-
-export default tseslint.config(
-  js.configs.recommended,
-  ...tseslint.configs.recommended,
-  {
-    languageOptions: {
-      parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-      },
-    },
-    rules: {
-      '@typescript-eslint/no-unused-vars': [
-        'error',
-        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
-      ],
-      '@typescript-eslint/consistent-type-imports': 'error',
-    },
-  },
-  {
-    files: ['packages/client/src/**/*.{ts,tsx}'],
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
-    },
-  },
-  {
-    ignores: ['**/dist/', '**/node_modules/', '.bmad-studio/'],
-  },
-)

package/packages/client/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>BMAD Studio</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/packages/client/package.json

@@ -1,46 +0,0 @@
-{
-  "name": "@bmad-studio/client",
-  "version": "0.1.0",
-  "description": "BMAD Studio client — React SPA",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@bmad-studio/shared": "*",
-    "@codemirror/commands": "^6.10.3",
-    "@codemirror/lang-html": "^6.4.11",
-    "@codemirror/lang-javascript": "^6.2.5",
-    "@codemirror/lang-markdown": "^6.5.0",
-    "@codemirror/lang-yaml": "^6.1.2",
-    "@codemirror/language": "^6.12.2",
-    "@codemirror/state": "^6.6.0",
-    "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.40.0",
-    "@dnd-kit/react": "^0.3.2",
-    "@fontsource/inter-tight": "^5.2.7",
-    "@tanstack/react-query": "^5.91.2",
-    "@xyflow/react": "^12.10.1",
-    "lucide-react": "^0.577.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-markdown": "^10.1.0",
-    "react-router-dom": "^7.13.1",
-    "zustand": "^5.0.12"
-  },
-  "devDependencies": {
-    "@tailwindcss/vite": "^4.1.4",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "@vitejs/plugin-react": "^4.4.1",
-    "tailwindcss": "^4.1.4",
-    "typescript": "~5.8.3",
-    "vite": "^6.3.2"
-  },
-  "license": "MIT"
-}

package/packages/client/src/app.tsx

@@ -1,57 +0,0 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-
-import { NotificationProvider } from './layout/NotificationProvider.js'
-import { AppShell } from './layout/AppShell.js'
-import { OverviewPage } from './features/overview/OverviewPage.js'
-import { AgentsPage } from './features/agents/AgentsPage.js'
-import { AgentDetailPage } from './features/agents/AgentDetail.js'
-import { AgentOverrideEditor } from './features/agents/AgentOverrideEditor.js'
-import { TeamsPage } from './features/teams/TeamsPage.js'
-import { SkillsPage } from './features/skills/SkillsPage.js'
-import { WorkflowsPage } from './features/workflows/WorkflowsPage.js'
-import { OutputsPage } from './features/outputs/OutputsPage.js'
-import { ConnectionsPage } from './features/connections/ConnectionsPage.js'
-import { WorkspacePage } from './features/workspace/WorkspacePage.js'
-import { ModulesPage } from './features/packages/PackagesPage.js'
-import { FilesPage } from './features/files/FilesPage.js'
-import { SettingsPage } from './features/settings/SettingsPage.js'
-import { AboutPage } from './features/about/AboutPage.js'
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 30_000,
-      retry: 1,
-    },
-  },
-})
-
-export function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <NotificationProvider>
-        <BrowserRouter>
-          <Routes>
-            <Route element={<AppShell />}>
-              <Route index element={<OverviewPage />} />
-              <Route path="agents" element={<AgentsPage />} />
-              <Route path="agents/:id" element={<AgentDetailPage />} />
-              <Route path="agents/:id/override" element={<AgentOverrideEditor />} />
-              <Route path="teams" element={<TeamsPage />} />
-              <Route path="skills" element={<SkillsPage />} />
-              <Route path="workflows" element={<WorkflowsPage />} />
-              <Route path="outputs" element={<OutputsPage />} />
-              <Route path="connections" element={<ConnectionsPage />} />
-              <Route path="workspace" element={<WorkspacePage />} />
-              <Route path="modules" element={<ModulesPage />} />
-              <Route path="files" element={<FilesPage />} />
-              <Route path="settings" element={<SettingsPage />} />
-              <Route path="about" element={<AboutPage />} />
-            </Route>
-          </Routes>
-        </BrowserRouter>
-      </NotificationProvider>
-    </QueryClientProvider>
-  )
-}

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

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

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