/home/mrjunejune/zenbu: mrjunejune/src/jrpg/jrpg.js comparison

comparison mrjunejune/src/jrpg/jrpg.js @ 272:41a49c29a28f

polish JRPG conversation experience Integrate desktop conversations into the utility panel, simplify the mobile frame, add modal destinations and a reusable Zenbu composer lab, and preserve explicit conversation resume behavior. Co-authored-by: Copilot <[email protected]>

author	MrJuneJune <me@mrjunejune.com>
date	Fri, 07 Aug 2026 16:05:29 -0700
parents	056790c4fb0d
children	e02e2036ef84

comparison

equal deleted inserted replaced

-:13d61401c57d
+:41a49c29a28f
 });
 SCRIPT_LOADS.set(source, loading);
 return loading;
 }
-function greetingForSession(sessionData) {
+function greetingForSession(sessionData, hasConversations = false) {
-if (sessionData?.kind !== "user") return ROLE_GREETINGS.guest;
+const greeting = sessionData?.kind !== "user"
-return sessionData.role === "admin"
+? ROLE_GREETINGS.guest
-? ROLE_GREETINGS.admin
+: sessionData.role === "admin"
-: ROLE_GREETINGS.invited;
+? ROLE_GREETINGS.admin
+: ROLE_GREETINGS.invited;
+return hasConversations
+? `${greeting} We’ve talked before. Open Conversations if you’d like to continue one.`
+: greeting;
 }
 class StreamingTextAnimator {
 constructor(render) {
 this._render = render;
 }
 _createMessage(speaker, text, group, select) {
 if (!this._messages) return;
 const item = document.createElement("li");
+const speakerCell = document.createElement("span");
 const name = document.createElement("strong");
 const copy = document.createElement("p");
 item.className = "jrpg-message";
 item.dataset.speaker = speaker;
 item.dataset.turnGroup = group;
+speakerCell.className = "jrpg-message-speaker";
+if (speaker === "Epi") {
+const avatar = document.createElement("img");
+avatar.className = "jrpg-message-avatar";
+avatar.src = "/public/jrpg/shiba-default.webp";
+avatar.alt = "";
+avatar.setAttribute("aria-hidden", "true");
+speakerCell.append(avatar);
+}
 name.textContent = speaker;
 copy.textContent = text;
-item.append(name, copy);
+speakerCell.append(name);
+item.append(speakerCell, copy);
 this._messages.append(item);
 this._refreshTurnGroups(select ? group : this._currentGroup);
 return item;
 }
 requestAnimationFrame(() => {
 if (this._viewport) {
 this._viewport.scrollTop = this._viewport.scrollHeight;
 }
 });
-}
-}
-class MjjJrpgComposer extends HTMLElement {
-connectedCallback() {
-this._form = this.querySelector("[data-composer]");
-this._textarea = this.querySelector("textarea");
-this._button = this.querySelector('button[type="submit"]');
-this._cancel = this.querySelector("[data-cancel]");
-this._cancelControl = this.querySelector("[data-cancel-control]");
-this._onSubmit = event => {
-event.preventDefault();
-const message = this._textarea?.value.trim();
-if (!message || this._button?.disabled) return;
-this.dispatchEvent(new CustomEvent("mjj-jrpg-submit", {
-bubbles: true,
-detail: { message },
-}));
-this._form.reset();
-};
-this._onKeydown = event => {
-if (event.key !== "Enter" || event.shiftKey || event.isComposing) return;
-event.preventDefault();
-this._form?.requestSubmit();
-};
-this._form?.addEventListener("submit", this._onSubmit);
-this._textarea?.addEventListener("keydown", this._onKeydown);
-this._onCancel = () => {
-this.dispatchEvent(new CustomEvent("mjj-jrpg-cancel", {
-bubbles: true,
-}));
-};
-this._cancel?.addEventListener("click", this._onCancel);
-}
-disconnectedCallback() {
-this._form?.removeEventListener("submit", this._onSubmit);
-this._textarea?.removeEventListener("keydown", this._onKeydown);
-this._cancel?.removeEventListener("click", this._onCancel);
-}
-setBusy(busy) {
-if (this._textarea) this._textarea.disabled = busy;
-if (this._button) {
-this._button.disabled = busy;
-this._button.setAttribute("aria-busy", String(busy));
-}
-if (this._cancelControl) this._cancelControl.hidden = !busy;
-}
-setCancellable(cancellable) {
-if (this._cancelControl) this._cancelControl.hidden = !cancellable;
-}
-setDisabled(disabled) {
-if (this._textarea) this._textarea.disabled = disabled;
-if (this._button) this._button.disabled = disabled;
 }
 }
 class MjjJrpgMenu extends HTMLElement {
 connectedCallback() {
 class MjjJrpgShell extends HTMLElement {
 connectedCallback() {
 this._mobileMenuQuery = window.matchMedia(
 "(max-width: 52rem) and (orientation: portrait)",
 );
-this._syncMobileMenu = expanded => {
+this._mobileDestinationOwner = this.querySelector(
-const button = this.querySelector("[data-mobile-menu-toggle]");
+"[data-mobile-destination-owner]",
-const menu = this.querySelector("mjj-jrpg-menu");
+);
-if (!button || !menu) return;
+this._mobileDestinationDialog = this.querySelector(
-if (!this._mobileMenuQuery.matches) {
+"[data-mobile-destination-dialog]",
-button.setAttribute("aria-expanded", "true");
+);
-menu.removeAttribute("data-mobile-menu-collapsed");
+this._mobileDestinationContent = this.querySelector(
+"[data-mobile-destination-content]",
+);
+this._mobileDestinationTitle = this.querySelector(
+"[data-mobile-destination-title]",
+);
+this._mobileDestinationBackOwner = this.querySelector(
+"[data-mobile-destination-back-owner]",
+);
+this._mobileDestinationBack = this.querySelector(
+"[data-mobile-destination-back]",
+);
+this._utility = this.querySelector(".jrpg-utility");
+this._menu = this.querySelector("mjj-jrpg-menu");
+this._utilityPlaceholder = document.createComment("jrpg-utility");
+this._menuPlaceholder = document.createComment("jrpg-menu");
+this._utility?.before(this._utilityPlaceholder);
+this._menu?.before(this._menuPlaceholder);
+this._syncMobileLayout = () => {
+if (!this._utility || !this._menu || !this._mobileDestinationContent) {
 return;
 }
-button.setAttribute("aria-expanded", String(expanded));
+if (this._mobileMenuQuery.matches) {
-menu.toggleAttribute("data-mobile-menu-collapsed", !expanded);
+this._mobileDestinationContent.append(this._menu, this._utility);
+this.showMobileMenu();
+return;
+}
+this._mobileDestinationOwner?.close();
+this._utilityPlaceholder.after(this._utility);
+this._menuPlaceholder.after(this._menu);
+this._utility.hidden = false;
+this._menu.hidden = false;
 };
-this._onMenuToggle = event => {
+this._onMobileMenuMediaChange = () => this._syncMobileLayout();
-const button = event.target.closest("[data-mobile-menu-toggle]");
+this._onMobileDestinationBack = () => this.showMobileMenu();
-if (!button || !this.contains(button)) return;
+this._onMobileDestinationClose = () => this.showMobileMenu();
-const expanded = button.getAttribute("aria-expanded") === "true";
+this._mobileDestinationBack?.addEventListener(
-this._syncMobileMenu(!expanded);
+"click",
-if (!expanded) {
+this._onMobileDestinationBack,
-const firstItem = this.querySelector(
+);
-"mjj-jrpg-menu button[data-preview]",
+this._mobileDestinationDialog?.addEventListener(
-);
+"close",
-if (firstItem) firstItem.focus();
+this._onMobileDestinationClose,
-}
+);
-};
-this._onMobileMenuMediaChange = () => this._syncMobileMenu(true);
-this.addEventListener("click", this._onMenuToggle);
 this._mobileMenuQuery.addEventListener(
 "change",
 this._onMobileMenuMediaChange,
 );
-this._syncMobileMenu(true);
+this._syncMobileLayout();
+}
+isMobileDestinationModal() {
+return Boolean(this._mobileMenuQuery?.matches);
+}
+isMobileDestinationOpen() {
+return this.isMobileDestinationModal() &&
+Boolean(this._mobileDestinationDialog?.open);
+}
+showMobileMenu() {
+if (!this.isMobileDestinationModal() || !this._menu || !this._utility) {
+return;
+}
+this._menu.hidden = false;
+this._utility.hidden = true;
+if (this._mobileDestinationTitle) {
+this._mobileDestinationTitle.textContent = "Menu";
+}
+if (this._mobileDestinationBackOwner) {
+this._mobileDestinationBackOwner.hidden = true;
+}
+}
+showMobileDestination(selection) {
+if (!this.isMobileDestinationModal() || !this._menu || !this._utility) {
+return;
+}
+const labels = {
+blog: "Blogs",
+conversations: "Conversations",
+resume: "Resume",
+tools: "Tools",
+};
+this._menu.hidden = true;
+this._utility.hidden = false;
+if (this._mobileDestinationTitle) {
+this._mobileDestinationTitle.textContent = labels[selection] || "Destination";
+}
+if (this._mobileDestinationBackOwner) {
+this._mobileDestinationBackOwner.hidden = false;
+}
+}
+closeMobileDestinations() {
+if (this.isMobileDestinationModal()) {
+this._mobileDestinationOwner?.close();
+}
 }
 disconnectedCallback() {
-this.removeEventListener("click", this._onMenuToggle);
+this._mobileDestinationBack?.removeEventListener(
+"click",
+this._onMobileDestinationBack,
+);
+this._mobileDestinationDialog?.removeEventListener(
+"close",
+this._onMobileDestinationClose,
+);
 this._mobileMenuQuery?.removeEventListener(
 "change",
 this._onMobileMenuMediaChange,
 );
 }
 for (const [name, constructor] of Object.entries({
 "mjj-conversation-archive": MjjConversationArchive,
 "mjj-jrpg-character": MjjJrpgCharacter,
 "mjj-jrpg-chat": MjjJrpgChat,
-"mjj-jrpg-composer": MjjJrpgComposer,
 "mjj-jrpg-menu": MjjJrpgMenu,
 "mjj-jrpg-preview": MjjJrpgPreview,
 "mjj-jrpg-shell": MjjJrpgShell,
 })) {
 if (!customElements.get(name)) customElements.define(name, constructor);
 _csrfToken = await _fetchSession();
 const shell = document.querySelector("mjj-jrpg-shell");
 const character = shell?.querySelector("mjj-jrpg-character");
 const chat = shell?.querySelector("mjj-jrpg-chat");
-const composer = shell?.querySelector("mjj-jrpg-composer");
+const composer = shell?.querySelector("mjj-composer");
 const preview = shell?.querySelector("mjj-jrpg-preview");
 const archive = shell?.querySelector("mjj-conversation-archive");
 const accountSlot = shell?.querySelector("[data-frame-account]");
 const quotaEl = shell?.querySelector("[data-quota]");
 const frameNetwork = shell?.querySelector("[data-frame-network]");
 history.replaceState({ panel, conversation: convId || null }, "", _buildStateUrl(panel, convId));
 };
 /* ---- Panel selection: shows archive or preview in utility ---- */
 const utilityEl = shell?.querySelector(".jrpg-utility");
+const previewContent = preview?.querySelector("[data-preview-content]");
 const selectPanel = (panel, pushHistory = true) => {
 const validPanel = VALID_PANELS.includes(panel) ? panel : "resume";
 currentPanel = validPanel;
 for (const btn of (shell?.querySelectorAll("button[data-preview]") || [])) {
 btn.setAttribute("aria-pressed", String(btn.dataset.preview === validPanel));
 }
 if (validPanel === "conversations") {
 if (archive) archive.hidden = false;
-if (preview) preview.hidden = true;
+if (previewContent) previewContent.hidden = true;
 if (utilityEl) utilityEl.setAttribute("aria-label", "Conversations");
 } else {
 if (archive) archive.hidden = true;
-if (preview) preview.hidden = false;
+if (previewContent) previewContent.hidden = false;
 preview?.show(validPanel);
 if (utilityEl) utilityEl.setAttribute("aria-label", "Selected destination");
 }
 if (pushHistory) _pushUrlState(validPanel, currentConversationId);
 };
 /* ---- Archive close button: navigate back to resume panel ---- */
 shell?.addEventListener("mjj-archive-toggle", () => {
+if (shell?.isMobileDestinationModal()) {
+shell.showMobileMenu();
+return;
+}
 selectPanel("resume");
 });
 shell?.addEventListener("mjj-archive-new", () => {
 if (activeController) return;
 currentConversationId = null;
 sessionStorage.removeItem(CONVERSATION_STORAGE_KEY);
 _pushUrlState(currentPanel, null);
 chat?.setGreeting(greetingForSession(_sessionData), true);
 archive?.setCurrentId(null);
+shell?.closeMobileDestinations();
 composer?.querySelector("textarea")?.focus();
 });
 /* ---- Popstate: re-apply panel and conversation on back/forward ---- */
 /* _applyPopState always increments openSeq so any pending archive-open
 const _applyPopState = async (seq, popPanel, popConvId) => {
 const localSeq = ++openSeq;
 const epoch = principalEpoch;
 selectPanel(popPanel, false);
+if (shell?.isMobileDestinationOpen()) {
+shell.showMobileDestination(popPanel);
+}
 if (popConvId && popConvId !== currentConversationId) {
 try {
 const conversation = await requestJson(`/api/conversations/${encodeURIComponent(popConvId)}`);
 if (seq !== popSeq || localSeq !== openSeq ||
 currentConversationId = id;
 sessionStorage.setItem(CONVERSATION_STORAGE_KEY, id);
 _pushUrlState(currentPanel, id);
 chat?.replaceMessages(conversation.turns);
 archive?.setCurrentId(id);
+shell?.closeMobileDestinations();
 } catch (error) {
 if (seq !== openSeq || epoch !== principalEpoch) return;
 archive?.setError(`Unable to open: ${error.message}`);
 }
 });
 );
 }
 currentPanel = validPanel || "resume";
 }
-/* ---- Load archive and restore conversation from URL or sessionStorage ---- */
+/* ---- Load archive; only an explicit URL restores a conversation ---- */
 const startupEpoch = principalEpoch;
 const ensureStartupPrincipal = () => {
 if (startupEpoch !== principalEpoch) {
 const error = new Error("Principal changed during startup");
 error.name = "StalePrincipalError";
 archiveCursor = data.cursor || null;
 const conversations = data.conversations || [];
 conversations.forEach(c => _renderedIds.add(c.id));
 archive?.setConversations(conversations, archiveCursor);
-/* Determine target conversation: URL param is canonical; migrate sessionStorage once */
+/* A conversation opens only through an explicit URL or a user archive action. */
 const initParams2 = new URLSearchParams(window.location.search);
 const urlConvId = initParams2.get("conversation");
 const urlConvValid = urlConvId && UUID_REGEX.test(urlConvId) ? urlConvId : null;
+const storedConvId = !_convParamWasExplicit
-let resolvedConvId = urlConvValid;
+? sessionStorage.getItem(CONVERSATION_STORAGE_KEY)
-let migratedFromStorage = false;
+: null;
-if (!resolvedConvId && !_convParamWasExplicit) {
-const stored = sessionStorage.getItem(CONVERSATION_STORAGE_KEY);
+if (urlConvValid) {
-if (stored && UUID_REGEX.test(stored)) {
+const inArchive = conversations.find(c => c.id === urlConvValid);
-resolvedConvId = stored;
-migratedFromStorage = true;
-}
-}
-if (resolvedConvId) {
-const inArchive = conversations.find(c => c.id === resolvedConvId);
 if (inArchive) {
 try {
 const conversation = await requestJson(
-`/api/conversations/${encodeURIComponent(resolvedConvId)}`,
+`/api/conversations/${encodeURIComponent(urlConvValid)}`,
 );
 ensureStartupPrincipal();
-currentConversationId = resolvedConvId;
+currentConversationId = urlConvValid;
-sessionStorage.setItem(CONVERSATION_STORAGE_KEY, resolvedConvId);
+sessionStorage.setItem(CONVERSATION_STORAGE_KEY, urlConvValid);
 chat?.replaceMessages(conversation.turns);
-archive?.setCurrentId(resolvedConvId);
+archive?.setCurrentId(urlConvValid);
 } catch (error) {
 if (error.name === "StalePrincipalError" ||
 startupEpoch !== principalEpoch) throw error;
 currentConversationId = null;
 sessionStorage.removeItem(CONVERSATION_STORAGE_KEY);
 } else {
 /* Not on first page — fetch directly to verify ownership */
 let ownedConversation = null;
 try {
 ownedConversation = await requestJson(
-`/api/conversations/${encodeURIComponent(resolvedConvId)}`,
+`/api/conversations/${encodeURIComponent(urlConvValid)}`,
 );
 ensureStartupPrincipal();
 } catch (error) {
 if (error.name === "StalePrincipalError" ||
 startupEpoch !== principalEpoch) throw error;
 ownedConversation = null;
 }
 if (ownedConversation) {
-currentConversationId = resolvedConvId;
+currentConversationId = urlConvValid;
-sessionStorage.setItem(CONVERSATION_STORAGE_KEY, resolvedConvId);
+sessionStorage.setItem(CONVERSATION_STORAGE_KEY, urlConvValid);
 chat?.replaceMessages(ownedConversation.turns);
-if (!_renderedIds.has(resolvedConvId)) {
+if (!_renderedIds.has(urlConvValid)) {
-_renderedIds.add(resolvedConvId);
+_renderedIds.add(urlConvValid);
 archive?.addConversation({
-id: resolvedConvId,
+id: urlConvValid,
 title: ownedConversation.title || "Conversation",
 turn_count: ownedConversation.turns?.length || 0,
 });
 }
-archive?.setCurrentId(resolvedConvId);
+archive?.setCurrentId(urlConvValid);
-} else if (_sessionData?.kind === "user") {
-/* Authenticated and 404 — offer legacy claim for sessionStorage migrations */
-if (migratedFromStorage) {
-sessionStorage.setItem(CONVERSATION_LEGACY_KEY, resolvedConvId);
-legacyClaimId = resolvedConvId;
-sessionStorage.removeItem(CONVERSATION_STORAGE_KEY);
-archive?.showLegacyClaim();
-if (conversations.length > 0) {
-currentConversationId = conversations[0].id;
-sessionStorage.setItem(CONVERSATION_STORAGE_KEY, currentConversationId);
-try {
-const conv = await requestJson(
-`/api/conversations/${encodeURIComponent(currentConversationId)}`,
-);
-ensureStartupPrincipal();
-chat?.replaceMessages(conv.turns);
-archive?.setCurrentId(currentConversationId);
-} catch (error) {
-if (error.name === "StalePrincipalError" ||
-startupEpoch !== principalEpoch) throw error;
-currentConversationId = null;
-}
-}
-} else {
-/* URL-specified conv returned 404 — clear it */
-currentConversationId = null;
-sessionStorage.removeItem(CONVERSATION_STORAGE_KEY);
-}
 } else {
-/* Guest — not owned, clear stale ID */
 currentConversationId = null;
-if (migratedFromStorage) sessionStorage.removeItem(CONVERSATION_STORAGE_KEY);
+sessionStorage.removeItem(CONVERSATION_STORAGE_KEY);
 }
 }
-} else if (conversations.length > 0) {
+} else {
-/* No target conversation — open the most recent */
+currentConversationId = null;
-const most_recent = conversations[0];
+archive?.setCurrentId(null);
-try {
+if (conversations.length > 0) {
-const conversation = await requestJson(
+chat?.setGreeting(greetingForSession(_sessionData, true), true);
-`/api/conversations/${encodeURIComponent(most_recent.id)}`,
+}
+if (storedConvId && UUID_REGEX.test(storedConvId)) {
+const storedConversationIsOwned = conversations.some(
+conversation => conversation.id === storedConvId,
 );
-ensureStartupPrincipal();
+if (_sessionData?.kind === "user" && !storedConversationIsOwned) {
-currentConversationId = most_recent.id;
+sessionStorage.setItem(CONVERSATION_LEGACY_KEY, storedConvId);
-sessionStorage.setItem(CONVERSATION_STORAGE_KEY, currentConversationId);
+legacyClaimId = storedConvId;
-chat?.replaceMessages(conversation.turns);
+archive?.showLegacyClaim();
-archive?.setCurrentId(most_recent.id);
+}
-} catch (error) {
+sessionStorage.removeItem(CONVERSATION_STORAGE_KEY);
-if (error.name === "StalePrincipalError" ||
-startupEpoch !== principalEpoch) throw error;
-currentConversationId = null;
 }
 }
 } catch (error) {
 if (error.name !== "StalePrincipalError" &&
 startupEpoch === principalEpoch) {
 archive?.setError(`Archive error: ${error.message}`);
 }
-/* Fall back to direct fetch of URL/stored ID */
+/* Fall back only for an explicit deep-linked conversation. */
 const initParams3 = new URLSearchParams(window.location.search);
-const fallbackId = (
+const fallbackId = initParams3.get("conversation");
-initParams3.get("conversation") ||
-(!_convParamWasExplicit
-? sessionStorage.getItem(CONVERSATION_STORAGE_KEY)
-: null)
-) || null;
 if (startupEpoch === principalEpoch &&
 fallbackId && UUID_REGEX.test(fallbackId)) {
 try {
 const conversation = await requestJson(
 `/api/conversations/${encodeURIComponent(fallbackId)}`,
 _replaceUrlState(currentPanel, currentConversationId);
 }
 shell?.addEventListener("mjj-jrpg-preview-change", event => {
 selectPanel(event.detail.selection);
+shell?.showMobileDestination(event.detail.selection);
 character?.setAttribute("state", "thinking");
 window.clearTimeout(characterTimer);
 characterTimer = window.setTimeout(() => {
 character?.setAttribute("state", "default");
 }, 650);
 });
-shell?.addEventListener("mjj-jrpg-cancel", () => {
+shell?.addEventListener("mjj-composer-cancel", () => {
 activeController?.abort();
 });
-shell?.addEventListener("mjj-jrpg-submit", async event => {
+shell?.addEventListener("mjj-composer-submit", async event => {
 if (activeController) return;
 /* Block sends when password change is required */
 if (_sessionData?.kind === "user" && _sessionData?.mustChangePassword) {
 return;
 }