feat: Structured subagent configuration with frontmatter format

[sre-helmcode]

Summary

Restructure subagent configuration in the UI to use a structured form instead of dumping everything into a single description field. Align the subagent .md file format with Claude Code's official sub-agent specification using YAML frontmatter.

Current State

• Everything goes into sub_agent_description — a single text field that becomes unreadable for complex agents
• Preview in TeamBuilder shows raw YAML via generateSubAgentPreview() (TeamBuilderPage.tsx, lines 56-73):

  ---
  name: code-reviewer
  description: Reviews code for quality... [EVERYTHING HERE, UNREADABLE]
  model: sonnet
  background: true
  isolation: worktree
  ---

• Backend generation (workspace.go, lines 157-195) puts the full description in the YAML description field
• The official Claude Code sub-agent format separates metadata (frontmatter) from instructions (body):

  ---
  name: code-reviewer
  description: Reviews code for quality and best practices
  model: sonnet
  ---
  
  You are a code reviewer. Detailed instructions go here in the body...

Proposed Solution

1. Restructure the UI Form

Replace the single sub_agent_description textarea with structured fields:

┌─────────────────────────────────────────────────────┐
│ Subagent: code-reviewer                             │
├─────────────────────────────────────────────────────┤
│ Name:        [code-reviewer          ]              │
│ Description: [Short one-liner        ]  ← NEW      │
│ Model:       [sonnet ▼               ]              │
│                                                     │
│ Instructions:                                       │
│ ┌─────────────────────────────────────────────────┐ │
│ │ You are a code reviewer. As you review code,    │ │
│ │ update your agent memory with patterns,         │ │
│ │ conventions, and recurring issues you discover. │ │
│ │                                                 │ │
│ │ ## Guidelines                                   │ │
│ │ - Check for security vulnerabilities            │ │
│ │ - Verify test coverage                          │ │
│ └─────────────────────────────────────────────────┘ │
│                                                     │
│ Skills: [+ Add skill]                               │
│  • helmcode/agent_crew_skills:code-review           │
└─────────────────────────────────────────────────────┘

Fields:

• Name (existing) — Agent identifier
• Description (NEW, short) — One-line summary for the frontmatter description field
• Model (existing) — Dropdown selection
• Instructions (NEW, long) — Rich text / Markdown body with detailed agent instructions (uses the Markdown editor from the companion issue if available, otherwise textarea)
• Skills (existing) — Skill configuration list

2. Update Data Model

Frontend types (types/index.ts):

export interface CreateAgentInput {
  name: string;
  role?: 'leader' | 'worker';
  instructions_md?: string;
  sub_agent_description?: string;     // Short one-liner
  sub_agent_instructions?: string;    // NEW: Detailed body content
  sub_agent_skills?: SkillConfig[];
  sub_agent_model?: string;
}

Backend model — add SubAgentInstructions field to the Agent model.

3. Update .md File Generation

Current output:

---
name: code-reviewer
description: Reviews code for quality and best practices. You should check for security vulnerabilities, verify test coverage, ensure proper error handling... [WALL OF TEXT]
model: sonnet
background: true
isolation: worktree
permissionMode: bypassPermissions
---

New output:

---
name: code-reviewer
description: Reviews code for quality and best practices
model: sonnet
background: true
isolation: worktree
permissionMode: bypassPermissions
skills:
  - helmcode/agent_crew_skills:code-review
---

You are a code reviewer. As you review code, update your agent memory with patterns, conventions, and recurring issues you discover.

## Guidelines
- Check for security vulnerabilities
- Verify test coverage
- Ensure proper error handling

Affected Files

Frontend

• src/pages/TeamBuilderPage.tsx — Form fields in Step 2, preview in Step 3
• src/types/index.ts — Agent, CreateAgentInput interfaces
• src/services/api.ts — Agent API calls

Backend

• internal/models/models.go — Agent model (add SubAgentInstructions)
• internal/api/dto.go — DTOs
• internal/api/handlers_agents.go — Create/Update handlers
• internal/runtime/workspace.go — GenerateSubAgentContent() (lines 157-195)

Dependencies

• Companion markdown editor issue for the Instructions field (optional but recommended)

Acceptance Criteria

• Subagent form has separate Description (short) and Instructions (long) fields
• Description field is a single-line input for the frontmatter summary
• Instructions field supports Markdown for detailed agent instructions
• Generated .md files follow Claude Code's official frontmatter + body format
• Preview in Step 3 shows the rendered format clearly
• Backward compatible with existing agents (migrate sub_agent_description → split into description + instructions)
• Backend stores and generates the new format correctly

[sre-helmcode]

Implemented in v0.3.7. Separate Description (short one-liner in YAML frontmatter) and Instructions (detailed markdown body) fields for subagent configuration. Includes JSON preview fix, OpenCode support, 19 new tests, and 5 security hardening fixes.