--- a/mrjunejune/test/snapshots/jrpg.snapshot	Thu Aug 06 11:31:30 2026 -0700
+++ b/mrjunejune/test/snapshots/jrpg.snapshot	Fri Aug 07 07:34:12 2026 -0700
@@ -32,7 +32,8 @@
 
 <script src="/public/pwa-register.js" defer></script>
 
-    <link rel="preload" href="/public/jrpg/background-frame-2.webp" as="image">
+    <link rel="preload" href="/public/jrpg/background-frame-2.webp" as="image" media="not ((max-width: 52rem) and (orientation: portrait))">
+    <link rel="preload" href="/public/jrpg/background-frame-mobile.webp" as="image" media="(max-width: 52rem) and (orientation: portrait)">
     <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image">
     <link rel="stylesheet" href="/jrpg/jrpg.css">
     <script type="module" src="/jrpg/jrpg.js"></script>
@@ -75,9 +76,20 @@
               </a>
             </zen-button>
           </nav>
+          <zen-button class="jrpg-mobile-menu-btn" appearance="plain" size="xs">
+            <button
+              type="button"
+              data-mobile-menu-toggle
+              aria-label="Toggle destination menu"
+              aria-expanded="true"
+              aria-controls="jrpg-destination-menu"
+            >
+              <zen-icon name="menu"></zen-icon>
+            </button>
+          </zen-button>
           <footer class="jrpg-frame-telemetry" aria-label="System telemetry">
             <span aria-label="Temperature unavailable">N/A</span>
-            <span aria-label="User June">JUNE</span>
+            <span data-frame-account aria-live="polite"><a href="/login?next=/jrpg">LOGIN</a></span>
             <span data-frame-network aria-label="Status online">ONLINE</span>
             <time data-frame-uptime aria-label="Uptime">00:00:00</time>
           </footer>
@@ -132,11 +144,12 @@
           <section class="jrpg-utility" aria-label="Selected destination">
             <mjj-jrpg-preview data-selection="resume">
               <article class="jrpg-preview-panel" aria-live="polite">
-                <p class="jrpg-preview-kicker" data-preview-kicker>CHARACTER RECORD</p>
                 <zen-heading size="xl">
                   <h2 data-preview-title>Resume</h2>
                 </zen-heading>
-                <p data-preview-copy>Experience, projects, and the systems I have helped build.</p>
+                <p data-preview-copy>
+                  Member of Technical Staff and engineering leader with 10+ years building AI agent platforms and production systems.
+                </p>
                 <ul class="jrpg-work-showcase" data-work-showcase>
                   <li>
                     <a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/">
@@ -222,6 +235,77 @@
                 </zen-dialog>
               </article>
             </mjj-jrpg-preview>
+
+            <mjj-conversation-archive hidden aria-label="Conversations">
+              <div class="jrpg-archive-heading">
+                <h2>Archive</h2>
+                <zen-button appearance="plain" size="xs">
+                  <button type="button" data-archive-close aria-label="Close conversations">
+                    <zen-icon name="close"></zen-icon>
+                  </button>
+                </zen-button>
+              </div>
+              <div class="jrpg-archive-actions">
+                <zen-button appearance="plain" size="sm">
+                  <button type="button" data-archive-new>
+                    <zen-icon name="plus"></zen-icon>
+                    New
+                  </button>
+                </zen-button>
+              </div>
+              <ol class="jrpg-archive-list" data-archive-list aria-label="Conversations">
+              </ol>
+              <zen-button appearance="plain" size="sm" data-archive-load-more-owner hidden>
+                <button type="button" data-archive-load-more>Load more</button>
+              </zen-button>
+              <p class="jrpg-archive-status" data-archive-status aria-live="polite">Loading conversations...</p>
+              <dialog
+                class="jrpg-archive-dialog"
+                data-archive-delete-dialog
+                aria-labelledby="archive-delete-title"
+                aria-modal="true"
+              >
+                <p id="archive-delete-title" class="jrpg-archive-dialog-title">Delete this conversation?</p>
+                <p data-archive-delete-name class="jrpg-archive-dialog-subtitle"></p>
+                <div class="jrpg-archive-dialog-actions">
+                  <zen-button appearance="plain" size="md">
+                    <button type="button" data-archive-delete-cancel>Cancel</button>
+                  </zen-button>
+                  <zen-button appearance="plain" size="md">
+                    <button type="button" data-archive-delete-confirm>Delete</button>
+                  </zen-button>
+                </div>
+              </dialog>
+              <dialog
+                class="jrpg-archive-dialog"
+                data-archive-rename-dialog
+                aria-labelledby="archive-rename-title"
+                aria-modal="true"
+              >
+                <p id="archive-rename-title" class="jrpg-archive-dialog-title">Rename conversation</p>
+                <form data-archive-rename-form novalidate>
+                  <zen-field appearance="plain" size="md">
+                    <label for="archive-rename-input">New title</label>
+                    <input
+                      id="archive-rename-input"
+                      data-archive-rename-input
+                      type="text"
+                      maxlength="200"
+                      required
+                      autocomplete="off"
+                    >
+                  </zen-field>
+                  <div class="jrpg-archive-dialog-actions">
+                    <zen-button appearance="plain" size="md">
+                      <button type="button" data-archive-rename-cancel>Cancel</button>
+                    </zen-button>
+                    <zen-button appearance="plain" size="md">
+                      <button type="submit">Save</button>
+                    </zen-button>
+                  </div>
+                </form>
+              </dialog>
+            </mjj-conversation-archive>
           </section>
 
           <mjj-jrpg-composer>
@@ -251,11 +335,12 @@
                   </button>
                 </zen-button>
               </div>
+              <p class="jrpg-composer-quota" data-quota aria-live="polite" hidden></p>
               <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p>
             </form>
           </mjj-jrpg-composer>
 
-          <mjj-jrpg-menu>
+          <mjj-jrpg-menu id="jrpg-destination-menu">
             <nav aria-label="Shiba Quest destinations">
               <p class="jrpg-menu-label">Menu</p>
               <ul>
@@ -283,9 +368,74 @@
                     </button>
                   </zen-button>
                 </li>
+                <li>
+                  <zen-button appearance="plain" size="sm">
+                    <button type="button" data-preview="conversations" aria-pressed="false">
+                      <zen-icon name="chevron-right"></zen-icon>
+                      Conversations
+                    </button>
+                  </zen-button>
+                </li>
               </ul>
             </nav>
           </mjj-jrpg-menu>
+
+          <zen-dialog class="jrpg-login-dialog-owner" data-login-dialog-owner>
+            <zen-button appearance="plain" size="md" hidden>
+              <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
+            </zen-button>
+            <dialog
+              class="jrpg-login-dialog"
+              data-login-dialog
+              aria-labelledby="jrpg-login-title"
+              aria-modal="true"
+            >
+              <div class="jrpg-login-dialog-header">
+                <h2 id="jrpg-login-title">SIGN IN</h2>
+                <zen-button appearance="plain" size="md">
+                  <button type="button" data-zen-close aria-label="Close sign-in dialog">
+                    <zen-icon name="close"></zen-icon>
+                  </button>
+                </zen-button>
+              </div>
+              <div role="alert" data-login-error aria-live="assertive" hidden></div>
+              <form data-login-form novalidate>
+                <zen-field appearance="plain" size="md">
+                  <label for="jrpg-login-username">Username</label>
+                  <input
+                    id="jrpg-login-username"
+                    name="username"
+                    type="text"
+                    autocomplete="username"
+                    autocapitalize="none"
+                    spellcheck="false"
+                    required
+                    maxlength="32"
+                  >
+                </zen-field>
+                <zen-field appearance="plain" size="md">
+                  <label for="jrpg-login-password">Password</label>
+                  <input
+                    id="jrpg-login-password"
+                    name="password"
+                    type="password"
+                    autocomplete="current-password"
+                    required
+                    minlength="12"
+                    maxlength="1024"
+                  >
+                </zen-field>
+                <div class="jrpg-login-dialog-actions">
+                  <zen-button appearance="plain" size="md">
+                    <button type="button" data-login-cancel data-zen-close>Cancel</button>
+                  </zen-button>
+                  <zen-button appearance="plain" size="md">
+                    <button type="submit" data-login-submit>Sign in</button>
+                  </zen-button>
+                </div>
+              </form>
+            </dialog>
+          </zen-dialog>
         </div>
       </mjj-jrpg-shell>
     </main>