diff --git a/public/market.html b/public/market.html
index 111b729..6712529 100644
--- a/public/market.html
+++ b/public/market.html
@@ -74,12 +74,13 @@
-
+
@@ -118,8 +119,9 @@
Leave this empty if you want the AI Character to invent the scenario on its own.
-
-
+
diff --git a/public/market.js b/public/market.js
index 24a01fe..3afcc35 100644
--- a/public/market.js
+++ b/public/market.js
@@ -9,8 +9,10 @@ const marketPanels = document.querySelectorAll("[data-market-panel]");
const marketCreateAiCharacterBtn = $("marketCreateAiCharacter");
const marketCreateUserPersonaBtn = $("marketCreateUserPersona");
const marketPreviewModal = $("marketPreviewModal");
+const marketPreviewTitle = $("marketPreviewTitle");
const marketPreviewName = $("marketPreviewName");
const marketPreviewMeta = $("marketPreviewMeta");
+const marketPreviewBody = $("marketPreviewBody");
const marketPreviewPronouns = $("marketPreviewPronouns");
const marketPreviewAppearance = $("marketPreviewAppearance");
const marketPreviewBackground = $("marketPreviewBackground");
@@ -23,7 +25,6 @@ const marketPreviewScenarioField = $("marketPreviewScenarioField");
const marketPreviewScenario = $("marketPreviewScenario");
const marketPreviewStepOne = $("marketPreviewStepOne");
const marketPreviewStepTwo = $("marketPreviewStepTwo");
-const marketPreviewBack = $("marketPreviewBack");
const marketPreviewConfirm = $("marketPreviewConfirm");
const marketPreviewClose = $("marketPreviewClose");
const marketPersonaModal = $("marketPersonaModal");
@@ -191,9 +192,13 @@ function closeMarketPreview() {
function renderMarketPreviewStep() {
const isScenarioStep = marketPreviewStep === 2;
+ const isAssistant = pendingMarketPersona?.persona_type === "assistant";
+ if (marketPreviewBody) marketPreviewBody.classList.toggle("hidden", isScenarioStep && isAssistant);
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 (marketPreviewTitle) {
+ marketPreviewTitle.textContent = isAssistant && isScenarioStep ? "Set the opening scene" : "Persona details";
+ }
if (marketPreviewIntro) {
marketPreviewIntro.textContent = pendingMarketPersona?.persona_type === "assistant"
? (isScenarioStep
@@ -202,11 +207,7 @@ function renderMarketPreviewStep() {
: "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";
- }
+ marketPreviewConfirm.textContent = pendingMarketPersona?.persona_type !== "assistant" ? "Collect persona" : "Start roleplay";
}
}
@@ -508,13 +509,6 @@ 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();
diff --git a/public/style.css b/public/style.css
index 1f35c45..6b2c99b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -420,8 +420,13 @@ button,
}
button {
- padding: 12px 18px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 44px;
+ padding: 11px 16px;
font-weight: 700;
+ line-height: 1.2;
color: var(--button-text);
background: linear-gradient(145deg, var(--brand), var(--brand-strong));
box-shadow: none;
@@ -712,10 +717,7 @@ select:focus {
}
.secondary-action {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- padding: 11px 14px;
+ padding: 11px 16px;
min-height: 44px;
background: rgba(164, 85, 45, 0.1);
color: var(--text);
@@ -1597,10 +1599,6 @@ select:focus {
.persona-item-actions,
.persona-section-actions,
.market-header-actions,
-.market-preview-actions {
- flex-wrap: wrap;
-}
-
.market-preview-user-field {
width: 100%;
}
@@ -1609,8 +1607,38 @@ select:focus {
width: 100%;
}
+.market-preview-actions {
+ display: grid;
+ gap: 16px;
+ align-items: stretch;
+}
+
+.market-preview-footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+ flex-wrap: wrap;
+}
+
+.market-preview-footer button,
+.market-preview-footer .secondary-action {
+ flex: 1 1 160px;
+ min-width: 0;
+}
+
+.market-preview-name {
+ margin-top: 6px;
+}
+
+.market-preview-user-field select,
+.market-preview-scenario-field textarea {
+ width: 100%;
+}
+
.persona-item-actions button {
- padding: 8px 11px;
+ flex: 1 1 0;
+ min-width: 0;
+ padding: 10px 12px;
font-size: 0.84rem;
}
@@ -1682,7 +1710,8 @@ select:focus {
.popup-actions .secondary-action,
.popup-actions button {
- min-width: 132px;
+ flex: 1 1 140px;
+ min-width: 0;
}
.persona-modal-heading {
diff --git a/server.js b/server.js
index c5a0109..9922c9c 100644
--- a/server.js
+++ b/server.js
@@ -669,7 +669,7 @@ const listMarketPersonasStmt = db.prepare(`
creator_username,
name,
pronouns,
- appearance,
+ appearance,
background,
details,
example_dialogues,