Mercurial

diff mrjunejune/src/jrpg/index.html @ 272:41a49c29a28f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
line wrap: on
line diff
--- a/mrjunejune/src/jrpg/index.html	Fri Aug 07 13:24:05 2026 -0700
+++ b/mrjunejune/src/jrpg/index.html	Fri Aug 07 16:05:29 2026 -0700
@@ -6,7 +6,9 @@
     <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="/public/mjj-composer.css">
     <link rel="stylesheet" href="/jrpg/jrpg.css">
+    <script type="module" src="/public/mjj-composer.js"></script>
     <script type="module" src="/jrpg/jrpg.js"></script>
   </head>
   <body class="jrpg-page">
@@ -47,17 +49,61 @@
               </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-dialog
+            class="jrpg-mobile-destination-owner"
+            data-mobile-destination-owner
+          >
+            <zen-button class="jrpg-mobile-menu-btn" appearance="plain" size="xs">
+              <button
+                type="button"
+                data-zen-trigger
+                data-mobile-menu-toggle
+                aria-label="Open destination menu"
+              >
+                <zen-icon name="menu"></zen-icon>
+              </button>
+            </zen-button>
+            <dialog
+              class="jrpg-mobile-destination-dialog"
+              data-mobile-destination-dialog
+              aria-labelledby="jrpg-mobile-destination-title"
             >
-              <zen-icon name="menu"></zen-icon>
-            </button>
-          </zen-button>
+              <header class="jrpg-mobile-destination-header">
+                <zen-button
+                  appearance="plain"
+                  size="sm"
+                  data-mobile-destination-back-owner
+                  hidden
+                >
+                  <button
+                    type="button"
+                    data-mobile-destination-back
+                    aria-label="Back to destination menu"
+                  >
+                    <zen-icon name="chevron-left"></zen-icon>
+                    Menu
+                  </button>
+                </zen-button>
+                <h2
+                  id="jrpg-mobile-destination-title"
+                  data-mobile-destination-title
+                >Menu</h2>
+                <zen-button appearance="plain" size="sm">
+                  <button
+                    type="button"
+                    data-zen-close
+                    aria-label="Close destination menu"
+                  >
+                    <zen-icon name="close"></zen-icon>
+                  </button>
+                </zen-button>
+              </header>
+              <div
+                class="jrpg-mobile-destination-content"
+                data-mobile-destination-content
+              ></div>
+            </dialog>
+          </zen-dialog>
           <footer class="jrpg-frame-telemetry" aria-label="System telemetry">
             <span aria-label="Temperature unavailable">N/A</span>
             <span data-frame-account aria-live="polite"><a href="/login?next=/jrpg">LOGIN</a></span>
@@ -70,10 +116,7 @@
               <img data-character alt="">
             </mjj-jrpg-character>
 
-            <mjj-jrpg-chat aria-labelledby="conversation-title">
-              <div class="jrpg-panel-heading">
-                <h1 id="conversation-title">Conversations</h1>
-              </div>
+            <mjj-jrpg-chat aria-label="Conversation">
               <zen-message-scroller>
                 <div
                   class="jrpg-message-viewport"
@@ -106,99 +149,98 @@
           <section class="jrpg-utility" aria-label="Selected destination">
             <mjj-jrpg-preview data-selection="resume">
               <article class="jrpg-preview-panel" aria-live="polite">
-                <zen-heading size="xl">
-                  <h2 data-preview-title>Resume</h2>
-                </zen-heading>
-                <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/">
-                      <span>Copilot Tasks</span>
-                      <small>Agentic execution</small>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="https://www.cio.com/article/3977098/microsoft-doubles-down-on-multi-model-ai-as-it-builds-a-copilot-super-app.html">
-                      <span>Copilot SuperApp</span>
-                      <small>AI platform</small>
-                    </a>
-                  </li>
-                </ul>
-                <zen-dialog class="jrpg-preview-dialog">
-                  <zen-button appearance="plain" size="xs" data-dialog-trigger-owner hidden>
-                    <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
-                  </zen-button>
-                  <dialog class="jrpg-detail-dialog" aria-labelledby="jrpg-dialog-title">
-                    <div class="jrpg-dialog-heading">
-                      <p>DESTINATION DATA</p>
-                      <div class="jrpg-dialog-heading-actions">
-                        <zen-button appearance="plain" size="md">
-                          <a href="/resume" data-preview-link>
-                            Open page
-                            <zen-icon name="external"></zen-icon>
+                <div class="jrpg-preview-content" data-preview-content>
+                  <zen-heading size="xl">
+                    <h2 data-preview-title>Resume</h2>
+                  </zen-heading>
+                  <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/">
+                        <span>Copilot Tasks</span>
+                        <small>Agentic execution</small>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="https://www.cio.com/article/3977098/microsoft-doubles-down-on-multi-model-ai-as-it-builds-a-copilot-super-app.html">
+                        <span>Copilot SuperApp</span>
+                        <small>AI platform</small>
+                      </a>
+                    </li>
+                  </ul>
+                  <zen-dialog class="jrpg-preview-dialog">
+                    <zen-button appearance="plain" size="xs" data-dialog-trigger-owner hidden>
+                      <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
+                    </zen-button>
+                    <dialog class="jrpg-detail-dialog" aria-labelledby="jrpg-dialog-title">
+                      <div class="jrpg-dialog-heading">
+                        <p>DESTINATION DATA</p>
+                        <div class="jrpg-dialog-heading-actions">
+                          <zen-button appearance="plain" size="md">
+                            <a href="/resume" data-preview-link>
+                              Open page
+                              <zen-icon name="external"></zen-icon>
+                            </a>
+                          </zen-button>
+                          <zen-button appearance="plain" size="md">
+                            <button type="button" data-zen-close aria-label="Close destination details">
+                              <zen-icon name="close"></zen-icon>
+                            </button>
+                          </zen-button>
+                        </div>
+                      </div>
+                      <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2>
+                      <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p>
+                      <section
+                        class="jrpg-resume-dossier"
+                        data-resume-dossier
+                        aria-label="Resume dossier"
+                      >
+                        <p data-resume-status>Loading resume dossier...</p>
+                        <div data-resume-content></div>
+                      </section>
+                      <section
+                        class="jrpg-blog-browser"
+                        data-blog-browser
+                        aria-label="Blog archive"
+                        hidden
+                      >
+                        <aside>
+                          <h3>All blogs</h3>
+                          <ol data-blog-list>
+                            <li>Loading blog archive...</li>
+                          </ol>
+                        </aside>
+                        <article>
+                          <p data-blog-status>Select a blog to inspect.</p>
+                          <div data-blog-content></div>
+                        </article>
+                      </section>
+                      <section
+                        class="jrpg-tool-browser"
+                        data-tool-browser
+                        aria-label="Tool workspace"
+                        hidden
+                      >
+                        <article>
+                          <p data-tool-status>Select a tool to inspect.</p>
+                          <div data-tool-content></div>
+                        </article>
+                      </section>
+                      <div class="jrpg-dialog-actions" data-dialog-actions>
+                        <zen-button appearance="plain" size="lg" data-resume-download>
+                          <a href="/public/resume.pdf">
+                            Download PDF
+                            <zen-icon name="download"></zen-icon>
                           </a>
                         </zen-button>
-                        <zen-button appearance="plain" size="md">
-                          <button type="button" data-zen-close aria-label="Close destination details">
-                            <zen-icon name="close"></zen-icon>
-                          </button>
-                        </zen-button>
                       </div>
-                    </div>
-                    <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2>
-                    <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p>
-                    <section
-                      class="jrpg-resume-dossier"
-                      data-resume-dossier
-                      aria-label="Resume dossier"
-                    >
-                      <p data-resume-status>Loading resume dossier...</p>
-                      <div data-resume-content></div>
-                    </section>
-                    <section
-                      class="jrpg-blog-browser"
-                      data-blog-browser
-                      aria-label="Blog archive"
-                      hidden
-                    >
-                      <aside>
-                        <h3>All blogs</h3>
-                        <ol data-blog-list>
-                          <li>Loading blog archive...</li>
-                        </ol>
-                      </aside>
-                      <article>
-                        <p data-blog-status>Select a blog to inspect.</p>
-                        <div data-blog-content></div>
-                      </article>
-                    </section>
-                    <section
-                      class="jrpg-tool-browser"
-                      data-tool-browser
-                      aria-label="Tool workspace"
-                      hidden
-                    >
-                      <article>
-                        <p data-tool-status>Select a tool to inspect.</p>
-                        <div data-tool-content></div>
-                      </article>
-                    </section>
-                    <div class="jrpg-dialog-actions" data-dialog-actions>
-                      <zen-button appearance="plain" size="lg" data-resume-download>
-                        <a href="/public/resume.pdf">
-                          Download PDF
-                          <zen-icon name="download"></zen-icon>
-                        </a>
-                      </zen-button>
-                    </div>
-                  </dialog>
-                </zen-dialog>
-              </article>
-            </mjj-jrpg-preview>
-
-            <mjj-conversation-archive hidden aria-label="Conversations">
+                    </dialog>
+                  </zen-dialog>
+                </div>
+                <mjj-conversation-archive hidden aria-label="Conversations">
               <div class="jrpg-archive-heading">
                 <h2>Archive</h2>
                 <zen-button appearance="plain" size="xs">
@@ -267,40 +309,62 @@
                   </div>
                 </form>
               </dialog>
-            </mjj-conversation-archive>
+                </mjj-conversation-archive>
+              </article>
+            </mjj-jrpg-preview>
           </section>
 
-          <mjj-jrpg-composer>
+          <mjj-composer compact>
             <form class="jrpg-composer" data-composer>
-              <zen-field appearance="plain" size="lg">
-                <label for="jrpg-message">Message</label>
-                <textarea
-                  id="jrpg-message"
-                  name="message"
-                  rows="3"
-                  maxlength="500"
-                  placeholder="Ask Epi about this site..."
-                  required
-                ></textarea>
-              </zen-field>
-              <div class="jrpg-composer-actions">
-                <zen-button appearance="plain" size="sm">
-                  <button type="submit">
-                    Send
-                    <zen-icon name="arrow-right"></zen-icon>
-                  </button>
-                </zen-button>
-                <zen-button appearance="plain" size="sm" data-cancel-control hidden>
-                  <button type="button" data-cancel>
-                    Cancel
-                    <zen-icon name="close"></zen-icon>
-                  </button>
-                </zen-button>
+              <div data-composer-control>
+                <zen-field size="lg">
+                  <label for="jrpg-message" data-composer-label>Message</label>
+                  <textarea
+                    id="jrpg-message"
+                    name="message"
+                    rows="3"
+                    maxlength="500"
+                    placeholder="Ask Epi about this site..."
+                    required
+                  ></textarea>
+                </zen-field>
+                <div class="jrpg-composer-actions" data-composer-actions>
+                  <zen-button size="sm">
+                    <button type="submit" aria-label="Send message">
+                      <span data-composer-action-label>Send</span>
+                      <zen-icon name="arrow-right"></zen-icon>
+                    </button>
+                  </zen-button>
+                  <zen-button
+                    size="sm"
+                    variant="danger"
+                    data-composer-cancel-owner
+                    hidden
+                  >
+                    <button
+                      type="button"
+                      data-composer-cancel
+                      aria-label="Cancel response"
+                    >
+                      <span data-composer-action-label>Cancel</span>
+                      <zen-icon name="close"></zen-icon>
+                    </button>
+                  </zen-button>
+                </div>
               </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>
+              <p
+                class="jrpg-composer-quota"
+                data-composer-meta
+                data-quota
+                aria-live="polite"
+                hidden
+              ></p>
+              <p
+                class="jrpg-composer-hint"
+                data-composer-meta
+              >Enter to send / Shift + Enter for a new line</p>
             </form>
-          </mjj-jrpg-composer>
+          </mjj-composer>
 
           <mjj-jrpg-menu id="jrpg-destination-menu">
             <nav aria-label="Shiba Quest destinations">