Refactor persona creation UI: replace inline form with modal implementation and improve styling.

public/index.html

@@ -88,34 +88,6 @@
                     </div>
                     <p id="activePersonaStatus" class="status persona-status">No persona equipped.</p>
                     <div id="personaList" class="persona-list"></div>
-                    <form id="personaForm" class="persona-form hidden">
-                        <h3 id="personaFormTitle">Create persona</h3>
-                        <label class="field">
-                            <span>Name</span>
-                            <input id="personaName" placeholder="Persona name" required/>
-                        </label>
-                        <label class="field">
-                            <span>Pronouns</span>
-                            <input id="personaPronouns" placeholder="e.g. she/her, they/them"/>
-                        </label>
-                        <label class="field">
-                            <span>Appearance</span>
-                            <textarea id="personaAppearance" rows="2" placeholder="Describe their look"></textarea>
-                        </label>
-                        <label class="field">
-                            <span>Background</span>
-                            <textarea id="personaBackground" rows="2" placeholder="Backstory or origins"></textarea>
-                        </label>
-                        <label class="field">
-                            <span>Details</span>
-                            <textarea id="personaDetails" rows="3"
-                                      placeholder="Personality traits, voice, or quirks"></textarea>
-                        </label>
-                        <div class="persona-actions">
-                            <button id="personaSave" type="submit" class="primary-action">Save persona</button>
-                            <button id="personaCancel" type="button" class="secondary-action">Cancel</button>
-                        </div>
-                    </form>
                 </div>
             </aside>
             <section class="chat-main">
@@ -148,7 +120,7 @@
     <div class="modal-card">
         <div class="modal-header">
             <h3 id="personaFormTitle">Create persona</h3>
-            <button id="personaClose" type="button" class="icon-button">Close</button>
+            <button id="personaClose" type="button" class="icon-button">Cancel</button>
         </div>
         <form id="personaForm" class="persona-form">
             <label class="field">
@@ -172,16 +144,8 @@
                 <textarea id="personaDetails" rows="3"
                           placeholder="Personality traits, voice, or quirks"></textarea>
             </label>
-            <div class="custom-fields">
-                <div class="custom-fields-header">
-                    <span>Custom traits</span>
-                    <button id="addCustomField" type="button" class="secondary-action">Add</button>
-                </div>
-                <div id="customFieldsList" class="custom-fields-list"></div>
-            </div>
             <div class="persona-actions">
                 <button id="personaSave" type="submit" class="primary-action">Save persona</button>
-                <button id="personaCancel" type="button" class="secondary-action">Cancel</button>
             </div>
         </form>
     </div>

public/script.js

@@ -32,6 +32,8 @@ const newPersonaBtn = document.getElementById("newPersona");
 const clearPersonaBtn = document.getElementById("clearPersona");
 const personaCancelBtn = document.getElementById("personaCancel");
 const activePersonaStatus = document.getElementById("activePersonaStatus");
+const personaModal = document.getElementById("personaModal");
+const personaCloseBtn = document.getElementById("personaClose");
 
 let isProcessing = false;
 let chatSessions = [];
@@ -194,29 +196,30 @@ function setActivePersonaStatus() {
 }
 
 function openPersonaForm(persona = null) {
-    personaForm.classList.remove('hidden');
+    personaModal.classList.remove("hidden");
     if (persona) {
         editingPersonaId = persona.id;
-        personaFormTitle.textContent = 'Edit persona';
+        personaFormTitle.textContent = "Edit persona";
-        personaNameInput.value = persona.name || '';
+        personaNameInput.value = persona.name || "";
-        personaPronounsInput.value = persona.pronouns || '';
+        personaPronounsInput.value = persona.pronouns || "";
-        personaAppearanceInput.value = persona.appearance || '';
+        personaAppearanceInput.value = persona.appearance || "";
-        personaBackgroundInput.value = persona.background || '';
+        personaBackgroundInput.value = persona.background || "";
-        personaDetailsInput.value = persona.details || '';
+        personaDetailsInput.value = persona.details || "";
     } else {
         editingPersonaId = null;
-        personaFormTitle.textContent = 'Create persona';
+        personaFormTitle.textContent = "Create persona";
-        personaNameInput.value = '';
+        personaNameInput.value = "";
-        personaPronounsInput.value = '';
+        personaPronounsInput.value = "";
-        personaAppearanceInput.value = '';
+        personaAppearanceInput.value = "";
-        personaBackgroundInput.value = '';
+        personaBackgroundInput.value = "";
-        personaDetailsInput.value = '';
+        personaDetailsInput.value = "";
     }
+
     personaNameInput.focus();
 }
 
 function closePersonaForm() {
-    personaForm.classList.add('hidden');
+    personaModal.classList.add("hidden");
     editingPersonaId = null;
 }
 
@@ -588,8 +591,6 @@ msgInput.addEventListener('input', function () {
 
 newPersonaBtn.addEventListener('click', () => openPersonaForm());
 
-personaCancelBtn.addEventListener('click', () => closePersonaForm());
-
 clearPersonaBtn.addEventListener('click', () => clearPersona());
 
 personaForm.addEventListener('submit', (event) => {
@@ -597,6 +598,12 @@ personaForm.addEventListener('submit', (event) => {
     savePersona();
 });
 
+personaCloseBtn.addEventListener("click", closePersonaForm);
+
+personaModal.addEventListener("click", (e) => {
+    if (e.target === personaModal) closePersonaForm();
+});
+
 window.addEventListener('load', () => {
     checkSession();
     displayModels();

public/style.css

@@ -906,15 +906,12 @@ button:disabled {
     text-decoration: underline;
 }
 
-/* ===== Legal / Static Pages Fix ===== */
-
 html, body {
     width: 100%;
     max-width: 100%;
     overflow-x: hidden;
 }
 
-/* Force text to stay inside viewport */
 .content {
     width: 100%;
     max-width: 100%;
@@ -922,8 +919,37 @@ html, body {
     box-sizing: border-box;
 }
 
-/* Prevent long words / links from breaking layout */
 .content * {
     overflow-wrap: break-word;
     word-break: break-word;
 }
+
+.hidden { display: none !important; }
+
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.55);
+    backdrop-filter: blur(8px);
+    display: grid;
+    place-items: center;
+    z-index: 9999;
+    padding: 24px;
+}
+
+.modal-card {
+    width: min(520px, 95vw);
+    background: rgba(19, 19, 42, 0.96);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 20px;
+    box-shadow: 0 25px 60px -12px rgba(0,0,0,0.45);
+    padding: 16px;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 10px;
+}

server.js

@@ -389,7 +389,7 @@ const normalizePersonaField = (value) => {
 
 const buildPersonaPrompt = (persona) => {
     const lines = [
-        "You are roleplaying with the following persona. Stay in character, be engaging, and align with these details."
+        "You are roleplaying as the following persona. Stay in character, be engaging, and align with these details."
     ];
     if (persona.name) lines.push(`Name: ${persona.name}`);
     if (persona.pronouns) lines.push(`Pronouns: ${persona.pronouns}`);