+
{/* Quick Actions */}
diff --git a/web/src/components/ProfileCreateModal.tsx b/web/src/components/ProfileCreateModal.tsx
new file mode 100644
index 000000000..3e20fb816
--- /dev/null
+++ b/web/src/components/ProfileCreateModal.tsx
@@ -0,0 +1,772 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { api, ApiError, TemplateSummary, ProfileValidationMessage, ProviderInfo } from '../api'
+import { ValidationFindings } from './ValidationFindings'
+import { CustomSelect, SelectOption } from './CustomSelect'
+import { AlertTriangle, ChevronDown, ChevronRight, Loader2, Package, X } from 'lucide-react'
+
+/** Debounce for the template live preview, matching the search box contract. */
+export const PREVIEW_DEBOUNCE_MS = 300
+
+/**
+ * Frontmatter fields shown directly in the from-scratch form. Everything else
+ * in the server schema renders inside the "Advanced" expander, in schema
+ * order. The list is a display-priority hint only — the set of fields and
+ * their types always come from `GET /agents/profiles/schema`.
+ */
+const PRIMARY_FIELDS = ['name', 'description', 'provider', 'model', 'tags', 'capabilities']
+
+/**
+ * Datalist suggestions for the `role` field: the built-in tool-bundle roles
+ * from constants.py ROLE_TOOL_DEFAULTS. Deliberately suggestions, not a
+ * closed select — settings.json custom roles are legal, and a datalist can
+ * never block a valid value if this list goes stale.
+ */
+const ROLE_SUGGESTIONS = ['supervisor', 'developer', 'reviewer']
+
+type JSONSchemaProp = {
+ type?: string
+ enum?: string[]
+ description?: string
+ default?: unknown
+ minimum?: number
+ pattern?: string
+}
+
+/**
+ * Serialize form values into YAML frontmatter. Values are emitted as JSON,
+ * which YAML accepts verbatim (flow style), so no YAML library is needed and
+ * object-valued fields round-trip exactly what the JSON editor validated.
+ */
+export function buildFrontmatter(values: Record): string {
+ const lines = Object.entries(values)
+ .filter(([, v]) => v !== undefined && v !== null && v !== '')
+ .map(([k, v]) => `${k}: ${JSON.stringify(v)}`)
+ return `---\n${lines.join('\n')}\n---\n`
+}
+
+/**
+ * Rewrite the frontmatter `name:` in a rendered template document so it
+ * matches the storage name the user chose. The backend rejects a create where
+ * the two disagree (`_validate_profile_for_write`), and templates ship a
+ * fixed example name. Only the first `name:` line inside the leading
+ * frontmatter block is touched; the markdown body is never modified.
+ */
+export function rewriteFrontmatterName(content: string, name: string): string {
+ const m = content.match(/^---\r?\n([\s\S]*?)\r?\n---/)
+ if (!m) return content
+ // Replacement FUNCTIONS, not strings: String.replace interprets $-patterns
+ // ($&, $', $1) in a replacement STRING, which corrupts a typed name
+ // containing them and — worse — mangles any document whose frontmatter
+ // legally contains such text (e.g. description: costs $& fees), because the
+ // whole updated block is itself passed through a replace. A function
+ // replacement is inserted verbatim. \r?\n keeps CRLF documents (e.g. a
+ // Windows-authored profile being cloned) from silently no-opping the
+ // rewrite and then failing the server's name-match check.
+ const updated = m[1].replace(/^name:.*$/m, () => `name: ${JSON.stringify(name)}`)
+ return content.replace(m[0], () => `---\n${updated}\n---`)
+}
+
+/** Extract the frontmatter `name:` value from a rendered document, if any. */
+export function extractFrontmatterName(content: string): string | null {
+ // Match the frontmatter block first and search name: within it -- an
+ // unbounded [\s\S]*? scan continues into the markdown body when the
+ // frontmatter has no name:, matching a body line like 'name: decoy'
+ // (same bounding rewriteFrontmatterName already uses).
+ const block = content.match(/^---\r?\n([\s\S]*?)\r?\n---/)
+ if (!block) return null
+ const m = block[1].match(/^name:\s*["']?([^"'\r\n]+)["']?\s*$/m)
+ return m ? m[1].trim() : null
+}
+
+function FieldLabel({ name, required, description }: { name: string; required?: boolean; description?: string }) {
+ return (
+
+ )
+}
+
+const inputClass =
+ 'w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-emerald-600'
+
+/**
+ * One schema-driven field. Strings with enums render as selects; booleans as
+ * checkboxes; integers as number inputs; arrays of strings as comma-separated
+ * inputs; object-valued fields as validated JSON editors (per #510, object
+ * fields get JSON editors, not bespoke widgets).
+ */
+function SchemaField({
+ name,
+ schema,
+ required,
+ value,
+ jsonErrors,
+ hasError,
+ selectOptions,
+ suggestions,
+ onChange,
+}: {
+ name: string
+ schema: JSONSchemaProp
+ required?: boolean
+ value: unknown
+ jsonErrors: Record
+ /** Server validation reported an error finding rooted at this field. */
+ hasError?: boolean
+ /**
+ * Field-specific widget overrides on top of the schema-driven renderer.
+ * selectOptions turns an open string field into a closed select (used for
+ * provider, whose value space is the live provider registry); suggestions
+ * attaches a datalist to a text input, keeping free entry (used for role).
+ */
+ selectOptions?: SelectOption[]
+ suggestions?: string[]
+ onChange: (name: string, value: unknown) => void
+}) {
+ const id = `field-${name}`
+ // A red boundary marks the control the validation error points at. The
+ // finding path is dotted with the frontmatter key first (e.g.
+ // 'mcpServers.docs.url'), so the whole field is outlined even when the
+ // error is nested inside it.
+ // border-2 + !important red + ring: visibly thick and immune to losing the
+ // border-color specificity contest against inputClass's border-gray-700.
+ const errClass = hasError ? ' border-2 !border-red-500 ring-2 ring-red-500/30' : ''
+ if (selectOptions) {
+ return (
+