improve usability

public/index.html

@@ -306,18 +306,18 @@
         <div class="modal-header">
             <div class="persona-modal-heading">
                 <p class="eyebrow">Start roleplay</p>
-                <h3>Choose your scene</h3>
+                <h3 id="roleplayStarterTitle">Choose your roleplay</h3>
             </div>
             <button id="roleplayStarterClose" type="button" class="icon-button">Close</button>
         </div>
         <div class="roleplay-starter-intro">
-            <p class="persona-helper">Pick a character, choose who you are in the scene, and generate an opening message in one step.</p>
+            <p id="roleplayStarterIntroCopy" class="persona-helper">Pick a character and choose who you are before moving on to the opening scene.</p>
         </div>
         <p id="roleplayStarterNotice" class="status hidden"></p>
         <div class="roleplay-starter-actions">
             <button id="roleplayNewPersona" class="secondary-action" type="button">Create AI Character</button>
         </div>
-        <div class="persona-form-grid">
+        <div id="roleplayStarterStepOne" class="persona-form-grid">
             <label class="field field-wide">
                 <span>1. Character</span>
                 <select id="roleplayCharacterSelect"></select>
@@ -326,15 +326,19 @@
                 <span>2. You in the scene</span>
                 <select id="roleplayUserPersonaSelect"></select>
             </label>
-            <label class="field field-wide">
-                <span>3. Optional opening direction</span>
-                <textarea id="roleplayScenarioInput" rows="3" placeholder="Optional. Describe the kind of opening scene you want, such as a setting, conflict, relationship dynamic, or mood."></textarea>
-            </label>
         </div>
+        <div id="roleplayStarterStepTwo" class="roleplay-starter-page hidden">
+            <label class="field field-wide">
+                <span>Optional opening direction</span>
+                <textarea id="roleplayScenarioInput" rows="4" placeholder="Describe the kind of opening scene you want, such as a setting, conflict, relationship dynamic, or mood. Leave it empty and the AI will invent its own scenario."></textarea>
+            </label>
+            <p class="subtitle">Leave this empty if you want the AI Character to invent the scenario on its own.</p>
             <div id="roleplayStarterSuggestions" class="quick-prompts" aria-label="Scenario suggestions"></div>
+        </div>
         <div class="popup-actions">
             <button id="roleplayStarterCancel" type="button" class="secondary-action">Cancel</button>
-            <button id="roleplayStarterConfirm" type="button">Create opening scene</button>
+            <button id="roleplayStarterBack" type="button" class="secondary-action hidden">Back</button>
+            <button id="roleplayStarterConfirm" type="button">Continue</button>
         </div>
     </div>
 </div>

public/market.html

@@ -75,6 +75,7 @@
             <div>
                 <p class="eyebrow">Persona preview</p>
                 <h3 id="marketPreviewName">Persona details</h3>
+                <p id="marketPreviewIntro" class="subtitle">Review this persona and choose how you want to use it.</p>
             </div>
             <button id="marketPreviewClose" type="button" class="icon-button">Close</button>
         </div>
@@ -104,14 +105,20 @@
             </div>
         </div>
         <div class="market-preview-actions">
+            <div id="marketPreviewStepOne" class="roleplay-starter-page hidden">
                 <label id="marketPreviewUserPersonaField" class="field market-preview-user-field hidden">
                     <span>You in this roleplay</span>
                     <select id="marketPreviewUserPersonaSelect"></select>
                 </label>
-            <label id="marketPreviewScenarioField" class="field market-preview-scenario-field hidden">
+            </div>
+            <div id="marketPreviewStepTwo" class="roleplay-starter-page hidden">
+                <label id="marketPreviewScenarioField" class="field market-preview-scenario-field">
                     <span>Scenario (optional)</span>
-                <textarea id="marketPreviewScenario" rows="3" maxlength="240" placeholder="Set the opening scene you want the AI character to start with."></textarea>
+                    <textarea id="marketPreviewScenario" rows="4" maxlength="240" placeholder="Describe the opening scene you want. Leave it empty and the AI Character will invent its own scenario."></textarea>
                 </label>
+                <p class="subtitle">Leave this empty if you want the AI Character to invent the scenario on its own.</p>
+            </div>
+            <button id="marketPreviewBack" type="button" class="secondary-action hidden">Back</button>
             <button id="marketPreviewConfirm" type="button" class="primary-action">Take persona</button>
         </div>
     </div>

public/market.js

@@ -16,10 +16,14 @@ const marketPreviewAppearance = $("marketPreviewAppearance");
 const marketPreviewBackground = $("marketPreviewBackground");
 const marketPreviewDetails = $("marketPreviewDetails");
 const marketPreviewExampleDialogues = $("marketPreviewExampleDialogues");
+const marketPreviewIntro = $("marketPreviewIntro");
 const marketPreviewUserPersonaField = $("marketPreviewUserPersonaField");
 const marketPreviewUserPersonaSelect = $("marketPreviewUserPersonaSelect");
 const marketPreviewScenarioField = $("marketPreviewScenarioField");
 const marketPreviewScenario = $("marketPreviewScenario");
+const marketPreviewStepOne = $("marketPreviewStepOne");
+const marketPreviewStepTwo = $("marketPreviewStepTwo");
+const marketPreviewBack = $("marketPreviewBack");
 const marketPreviewConfirm = $("marketPreviewConfirm");
 const marketPreviewClose = $("marketPreviewClose");
 const marketPersonaModal = $("marketPersonaModal");
@@ -56,6 +60,7 @@ let editingPersonaId = null;
 let activeUserPersonaId = null;
 let activeMarketView = "ai-characters";
 let marketActivityDepth = 0;
+let marketPreviewStep = 1;
 
 async function request(url, data, method = "POST") {
     try {
@@ -179,10 +184,32 @@ function setCollapsiblePreviewText(element, value, maxLength = 220) {
 function closeMarketPreview() {
     marketPreviewModal.classList.add("hidden");
     pendingMarketPersona = null;
+    marketPreviewStep = 1;
     marketPreviewUserPersonaSelect.innerHTML = "";
     marketPreviewScenario.value = "";
 }
 
+function renderMarketPreviewStep() {
+    const isScenarioStep = marketPreviewStep === 2;
+    if (marketPreviewStepOne) marketPreviewStepOne.classList.toggle("hidden", isScenarioStep || pendingMarketPersona?.persona_type !== "assistant");
+    if (marketPreviewStepTwo) marketPreviewStepTwo.classList.toggle("hidden", !isScenarioStep || pendingMarketPersona?.persona_type !== "assistant");
+    if (marketPreviewBack) marketPreviewBack.classList.toggle("hidden", !isScenarioStep || pendingMarketPersona?.persona_type !== "assistant");
+    if (marketPreviewIntro) {
+        marketPreviewIntro.textContent = pendingMarketPersona?.persona_type === "assistant"
+            ? (isScenarioStep
+                ? "Add an optional custom scenario. If left empty, the AI Character will invent its own opening scene."
+                : "Choose who you are in this roleplay before moving on to the opening scene.")
+            : "Review this persona and choose how you want to use it.";
+    }
+    if (marketPreviewConfirm) {
+        if (pendingMarketPersona?.persona_type !== "assistant") {
+            marketPreviewConfirm.textContent = "Collect persona";
+        } else {
+            marketPreviewConfirm.textContent = isScenarioStep ? "Start roleplay" : "Continue";
+        }
+    }
+}
+
 function populateUserPersonaChoices() {
     marketPreviewUserPersonaSelect.innerHTML = "";
 
@@ -214,6 +241,7 @@ function populateUserPersonaChoices() {
 
 function openMarketPreview(persona) {
     pendingMarketPersona = persona;
+    marketPreviewStep = 1;
     marketPreviewName.textContent = persona.name;
     marketPreviewMeta.textContent = buildPersonaMeta(persona);
     setCollapsiblePreviewText(marketPreviewPronouns, persona.pronouns, 80);
@@ -224,14 +252,13 @@ function openMarketPreview(persona) {
 
     const isAssistant = persona.persona_type === "assistant";
     marketPreviewUserPersonaField.classList.toggle("hidden", !isAssistant);
-    marketPreviewScenarioField.classList.toggle("hidden", !isAssistant);
-    marketPreviewConfirm.textContent = isAssistant ? "Start roleplay" : "Collect persona";
     if (isAssistant) {
         populateUserPersonaChoices();
         marketPreviewConfirm.classList.add("hidden");
     } else {
         marketPreviewConfirm.classList.remove("hidden");
     }
+    renderMarketPreviewStep();
     marketPreviewModal.classList.remove("hidden");
 }
 
@@ -460,6 +487,16 @@ marketPreviewConfirm.addEventListener("click", async () => {
     if (!pendingMarketPersona) return;
     const marketId = pendingMarketPersona.id;
     if (pendingMarketPersona.persona_type === "assistant") {
+        if (marketPreviewStep === 1) {
+            if (!marketPreviewUserPersonaSelect.value) {
+                setMarketStatus("Choose who you are before continuing.", "error");
+                return;
+            }
+            marketPreviewStep = 2;
+            renderMarketPreviewStep();
+            marketPreviewScenario.focus();
+            return;
+        }
         await startMarketPersonaChat(
             marketId,
             marketPreviewUserPersonaSelect.value || "self",
@@ -471,6 +508,13 @@ marketPreviewConfirm.addEventListener("click", async () => {
     closeMarketPreview();
     await collectMarketPersona(marketId);
 });
+if (marketPreviewBack) {
+    marketPreviewBack.addEventListener("click", () => {
+        marketPreviewStep = 1;
+        renderMarketPreviewStep();
+        marketPreviewUserPersonaSelect.focus();
+    });
+}
 marketPersonaClose.addEventListener("click", closePersonaForm);
 marketPersonaModal.addEventListener("click", (event) => {
     if (event.target === marketPersonaModal) closePersonaForm();

public/script.js

@@ -28,6 +28,8 @@ const activePersonaStatus = $("activePersonaStatus"), activeUserPersonaStatus =
 const personaModal = $("personaModal"), personaCloseBtn = $("personaClose"), personaMenuButton = $("personaMenuButton"), personaPopover = $("personaPopover");
 const roleplayStarterModal = $("roleplayStarterModal"), roleplayStarterClose = $("roleplayStarterClose"), roleplayStarterCancel = $("roleplayStarterCancel"), roleplayStarterConfirm = $("roleplayStarterConfirm");
 const roleplayStarterNotice = $("roleplayStarterNotice"), roleplayCharacterSelect = $("roleplayCharacterSelect"), roleplayUserPersonaSelect = $("roleplayUserPersonaSelect");
+const roleplayStarterTitle = $("roleplayStarterTitle"), roleplayStarterIntroCopy = $("roleplayStarterIntroCopy"), roleplayStarterBack = $("roleplayStarterBack");
+const roleplayStarterStepOne = $("roleplayStarterStepOne"), roleplayStarterStepTwo = $("roleplayStarterStepTwo");
 const roleplayScenarioInput = $("roleplayScenarioInput"), roleplayStarterSuggestions = $("roleplayStarterSuggestions");
 const popupModal = $("popupModal"), popupCloseBtn = $("popupClose"), popupCancelBtn = $("popupCancel"), popupConfirmBtn = $("popupConfirm");
 const popupTitle = $("popupTitle"), popupEyebrow = $("popupEyebrow"), popupDescription = $("popupDescription"), popupField = $("popupField");
@@ -45,6 +47,7 @@ let chatSessions = [], currentMessages = [], assistantPersonas = [], userPersona
 let activeUserPersonaId = null, currentSummary = null, publishedPersonaIds = new Set();
 let popupResolver = null, popupMode = null, popupLastFocus = null;
 let roleplayPresetCharacterId = null;
+let roleplayStarterStep = 1;
 let noticeTimer = null;
 let workspaceMode = localStorage.getItem("krishd-workspace-mode") || "basic";
 let onboardingStep = 1, onboardingIntent = "ask";
@@ -721,6 +724,27 @@ function setRoleplayStarterNotice(message = "", state = "") {
     roleplayStarterNotice.className = state ? `status ${state}` : "status";
 }
 
+function renderRoleplayStarterStep() {
+    const isSceneStep = roleplayStarterStep === 2;
+    if (roleplayStarterStepOne) roleplayStarterStepOne.classList.toggle("hidden", isSceneStep);
+    if (roleplayStarterStepTwo) roleplayStarterStepTwo.classList.toggle("hidden", !isSceneStep);
+    if (roleplayStarterBack) roleplayStarterBack.classList.toggle("hidden", !isSceneStep);
+    if (roleplayStarterTitle) {
+        roleplayStarterTitle.textContent = isSceneStep ? "Shape the opening scene" : "Choose your roleplay";
+    }
+    if (roleplayStarterIntroCopy) {
+        roleplayStarterIntroCopy.textContent = isSceneStep
+            ? "Add an optional custom scenario. If you leave it empty, the AI Character will invent its own opening scene."
+            : "Pick a character and choose who you are before moving on to the opening scene.";
+    }
+    if (roleplayStarterCancel) {
+        roleplayStarterCancel.textContent = isSceneStep ? "Close" : "Cancel";
+    }
+    if (roleplayStarterConfirm) {
+        roleplayStarterConfirm.textContent = isSceneStep ? "Start roleplay" : "Continue";
+    }
+}
+
 function updateChatParticipants() {
     const chat = getChatById(activeChatId);
     if (!chatModePill || !chatCharacterPill || !chatUserPersonaPill || !chatScenePill) return;
@@ -977,10 +1001,12 @@ function populateRoleplayStarter() {
         roleplayStarterConfirm.disabled = false;
     }
     updateRoleplaySuggestions();
+    renderRoleplayStarterStep();
 }
 function openRoleplayStarter(characterId = null) {
     closeAuxiliaryPopovers();
     roleplayPresetCharacterId = characterId;
+    roleplayStarterStep = 1;
     populateRoleplayStarter();
     if (roleplayScenarioInput) roleplayScenarioInput.value = "";
     setRoleplayStarterNotice("");
@@ -991,9 +1017,24 @@ function closeRoleplayStarter() {
     if (!roleplayStarterModal) return;
     roleplayStarterModal.classList.add("hidden");
     roleplayPresetCharacterId = null;
+    roleplayStarterStep = 1;
     roleplayStarterConfirm.disabled = false;
     if (roleplayScenarioInput) roleplayScenarioInput.value = "";
     setRoleplayStarterNotice("");
+    renderRoleplayStarterStep();
+}
+
+function goToRoleplayStarterSceneStep() {
+    if (!assistantPersonas.length) {
+        return setRoleplayStarterNotice("Create an AI Character first, then start roleplay.", "error");
+    }
+    if (!roleplayCharacterSelect.value) {
+        return setRoleplayStarterNotice("Choose a character to continue.", "error");
+    }
+    roleplayStarterStep = 2;
+    setRoleplayStarterNotice("");
+    renderRoleplayStarterStep();
+    if (roleplayScenarioInput) roleplayScenarioInput.focus();
 }
 function closeModelPopover() {
     if (!modelPopover || !modelMenuButton) return;
@@ -1255,6 +1296,10 @@ async function createNewChat() {
 }
 
 async function startRoleplay() {
+    if (roleplayStarterStep === 1) {
+        goToRoleplayStarterSceneStep();
+        return;
+    }
     setChatLoading(true, "Starting roleplay...");
     setChatActivity(true, {
         eyebrow: "Starting roleplay",
@@ -1378,9 +1423,14 @@ async function displayModels() {
         return setNotice("Models could not be loaded.", "error");
     }
     modelSelect.innerHTML = "";
+    const preferredModelId = "mistral:latest";
+    const preferredIndex = models.findIndex((model) => model.model === preferredModelId);
     models.forEach((model, index) => {
         const option = document.createElement("option");
-        option.value = model.model; option.textContent = model.name; option.selected = index === 0; modelSelect.appendChild(option);
+        option.value = model.model;
+        option.textContent = model.name;
+        option.selected = preferredIndex >= 0 ? index === preferredIndex : index === 0;
+        modelSelect.appendChild(option);
     });
     updateModelHelp();
     updateContextRail();
@@ -1531,6 +1581,14 @@ personaTypeSelect.addEventListener("change", () => {
 personaModal.addEventListener("click", (event) => { if (event.target === personaModal) closePersonaForm(); });
 roleplayStarterClose.addEventListener("click", closeRoleplayStarter);
 roleplayStarterCancel.addEventListener("click", closeRoleplayStarter);
+if (roleplayStarterBack) {
+    roleplayStarterBack.addEventListener("click", () => {
+        roleplayStarterStep = 1;
+        setRoleplayStarterNotice("");
+        renderRoleplayStarterStep();
+        roleplayCharacterSelect.focus();
+    });
+}
 roleplayStarterConfirm.addEventListener("click", () => { void startRoleplay(); });
 roleplayCharacterSelect.addEventListener("change", updateRoleplaySuggestions);
 roleplayUserPersonaSelect.addEventListener("change", updateRoleplaySuggestions);

public/style.css

@@ -1559,6 +1559,11 @@ select:focus {
     border: 1px solid rgba(24, 32, 31, 0.08);
 }
 
+.roleplay-starter-page {
+    display: grid;
+    gap: 14px;
+}
+
 .persona-status {
     text-align: left;
 }