Mercurial

comparison mrjunejune/test/snapshots/jrpg.snapshot @ 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
comparison
equal deleted inserted replaced
271:13d61401c57d 272:41a49c29a28f
33 <script src="/public/pwa-register.js" defer></script> 33 <script src="/public/pwa-register.js" defer></script>
34 34
35 <link rel="preload" href="/public/jrpg/background-frame-2.webp" as="image" media="not ((max-width: 52rem) and (orientation: portrait))"> 35 <link rel="preload" href="/public/jrpg/background-frame-2.webp" as="image" media="not ((max-width: 52rem) and (orientation: portrait))">
36 <link rel="preload" href="/public/jrpg/background-frame-mobile.webp" as="image" media="(max-width: 52rem) and (orientation: portrait)"> 36 <link rel="preload" href="/public/jrpg/background-frame-mobile.webp" as="image" media="(max-width: 52rem) and (orientation: portrait)">
37 <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image"> 37 <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image">
38 <link rel="stylesheet" href="/public/mjj-composer.css">
38 <link rel="stylesheet" href="/jrpg/jrpg.css"> 39 <link rel="stylesheet" href="/jrpg/jrpg.css">
40 <script type="module" src="/public/mjj-composer.js"></script>
39 <script type="module" src="/jrpg/jrpg.js"></script> 41 <script type="module" src="/jrpg/jrpg.js"></script>
40 </head> 42 </head>
41 <body class="jrpg-page"> 43 <body class="jrpg-page">
42 <main class="jrpg-main"> 44 <main class="jrpg-main">
43 <mjj-jrpg-shell class="jrpg-shell"> 45 <mjj-jrpg-shell class="jrpg-shell">
74 <a href="/" aria-label="Close interface and return home"> 76 <a href="/" aria-label="Close interface and return home">
75 <zen-icon name="close"></zen-icon> 77 <zen-icon name="close"></zen-icon>
76 </a> 78 </a>
77 </zen-button> 79 </zen-button>
78 </nav> 80 </nav>
79 <zen-button class="jrpg-mobile-menu-btn" appearance="plain" size="xs"> 81 <zen-dialog
80 <button 82 class="jrpg-mobile-destination-owner"
81 type="button" 83 data-mobile-destination-owner
82 data-mobile-menu-toggle 84 >
83 aria-label="Toggle destination menu" 85 <zen-button class="jrpg-mobile-menu-btn" appearance="plain" size="xs">
84 aria-expanded="true" 86 <button
85 aria-controls="jrpg-destination-menu" 87 type="button"
88 data-zen-trigger
89 data-mobile-menu-toggle
90 aria-label="Open destination menu"
91 >
92 <zen-icon name="menu"></zen-icon>
93 </button>
94 </zen-button>
95 <dialog
96 class="jrpg-mobile-destination-dialog"
97 data-mobile-destination-dialog
98 aria-labelledby="jrpg-mobile-destination-title"
86 > 99 >
87 <zen-icon name="menu"></zen-icon> 100 <header class="jrpg-mobile-destination-header">
88 </button> 101 <zen-button
89 </zen-button> 102 appearance="plain"
103 size="sm"
104 data-mobile-destination-back-owner
105 hidden
106 >
107 <button
108 type="button"
109 data-mobile-destination-back
110 aria-label="Back to destination menu"
111 >
112 <zen-icon name="chevron-left"></zen-icon>
113 Menu
114 </button>
115 </zen-button>
116 <h2
117 id="jrpg-mobile-destination-title"
118 data-mobile-destination-title
119 >Menu</h2>
120 <zen-button appearance="plain" size="sm">
121 <button
122 type="button"
123 data-zen-close
124 aria-label="Close destination menu"
125 >
126 <zen-icon name="close"></zen-icon>
127 </button>
128 </zen-button>
129 </header>
130 <div
131 class="jrpg-mobile-destination-content"
132 data-mobile-destination-content
133 ></div>
134 </dialog>
135 </zen-dialog>
90 <footer class="jrpg-frame-telemetry" aria-label="System telemetry"> 136 <footer class="jrpg-frame-telemetry" aria-label="System telemetry">
91 <span aria-label="Temperature unavailable">N/A</span> 137 <span aria-label="Temperature unavailable">N/A</span>
92 <span data-frame-account aria-live="polite"><a href="/login?next=/jrpg">LOGIN</a></span> 138 <span data-frame-account aria-live="polite"><a href="/login?next=/jrpg">LOGIN</a></span>
93 <span data-frame-network aria-label="Status online">ONLINE</span> 139 <span data-frame-network aria-label="Status online">ONLINE</span>
94 <time data-frame-uptime aria-label="Uptime">00:00:00</time> 140 <time data-frame-uptime aria-label="Uptime">00:00:00</time>
97 <section class="jrpg-scene" aria-label="Shiba Quest conversation"> 143 <section class="jrpg-scene" aria-label="Shiba Quest conversation">
98 <mjj-jrpg-character state="default"> 144 <mjj-jrpg-character state="default">
99 <img data-character alt=""> 145 <img data-character alt="">
100 </mjj-jrpg-character> 146 </mjj-jrpg-character>
101 147
102 <mjj-jrpg-chat aria-labelledby="conversation-title"> 148 <mjj-jrpg-chat aria-label="Conversation">
103 <div class="jrpg-panel-heading">
104 <h1 id="conversation-title">Conversations</h1>
105 </div>
106 <zen-message-scroller> 149 <zen-message-scroller>
107 <div 150 <div
108 class="jrpg-message-viewport" 151 class="jrpg-message-viewport"
109 data-zen-viewport 152 data-zen-viewport
110 role="log" 153 role="log"
133 </section> 176 </section>
134 177
135 <section class="jrpg-utility" aria-label="Selected destination"> 178 <section class="jrpg-utility" aria-label="Selected destination">
136 <mjj-jrpg-preview data-selection="resume"> 179 <mjj-jrpg-preview data-selection="resume">
137 <article class="jrpg-preview-panel" aria-live="polite"> 180 <article class="jrpg-preview-panel" aria-live="polite">
138 <zen-heading size="xl"> 181 <div class="jrpg-preview-content" data-preview-content>
139 <h2 data-preview-title>Resume</h2> 182 <zen-heading size="xl">
140 </zen-heading> 183 <h2 data-preview-title>Resume</h2>
141 <p data-preview-copy> 184 </zen-heading>
142 Member of Technical Staff and engineering leader with 10+ years building AI agent platforms and production systems. 185 <p data-preview-copy>
143 </p> 186 Member of Technical Staff and engineering leader with 10+ years building AI agent platforms and production systems.
144 <ul class="jrpg-work-showcase" data-work-showcase> 187 </p>
145 <li> 188 <ul class="jrpg-work-showcase" data-work-showcase>
146 <a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/"> 189 <li>
147 <span>Copilot Tasks</span> 190 <a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/">
148 <small>Agentic execution</small> 191 <span>Copilot Tasks</span>
149 </a> 192 <small>Agentic execution</small>
150 </li> 193 </a>
151 <li> 194 </li>
152 <a href="https://www.cio.com/article/3977098/microsoft-doubles-down-on-multi-model-ai-as-it-builds-a-copilot-super-app.html"> 195 <li>
153 <span>Copilot SuperApp</span> 196 <a href="https://www.cio.com/article/3977098/microsoft-doubles-down-on-multi-model-ai-as-it-builds-a-copilot-super-app.html">
154 <small>AI platform</small> 197 <span>Copilot SuperApp</span>
155 </a> 198 <small>AI platform</small>
156 </li> 199 </a>
157 </ul> 200 </li>
158 <zen-dialog class="jrpg-preview-dialog"> 201 </ul>
159 <zen-button appearance="plain" size="xs" data-dialog-trigger-owner hidden> 202 <zen-dialog class="jrpg-preview-dialog">
160 <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button> 203 <zen-button appearance="plain" size="xs" data-dialog-trigger-owner hidden>
161 </zen-button> 204 <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
162 <dialog class="jrpg-detail-dialog" aria-labelledby="jrpg-dialog-title"> 205 </zen-button>
163 <div class="jrpg-dialog-heading"> 206 <dialog class="jrpg-detail-dialog" aria-labelledby="jrpg-dialog-title">
164 <p>DESTINATION DATA</p> 207 <div class="jrpg-dialog-heading">
165 <div class="jrpg-dialog-heading-actions"> 208 <p>DESTINATION DATA</p>
166 <zen-button appearance="plain" size="md"> 209 <div class="jrpg-dialog-heading-actions">
167 <a href="/resume" data-preview-link> 210 <zen-button appearance="plain" size="md">
168 Open page 211 <a href="/resume" data-preview-link>
169 <zen-icon name="external"></zen-icon> 212 Open page
213 <zen-icon name="external"></zen-icon>
214 </a>
215 </zen-button>
216 <zen-button appearance="plain" size="md">
217 <button type="button" data-zen-close aria-label="Close destination details">
218 <zen-icon name="close"></zen-icon>
219 </button>
220 </zen-button>
221 </div>
222 </div>
223 <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2>
224 <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p>
225 <section
226 class="jrpg-resume-dossier"
227 data-resume-dossier
228 aria-label="Resume dossier"
229 >
230 <p data-resume-status>Loading resume dossier...</p>
231 <div data-resume-content></div>
232 </section>
233 <section
234 class="jrpg-blog-browser"
235 data-blog-browser
236 aria-label="Blog archive"
237 hidden
238 >
239 <aside>
240 <h3>All blogs</h3>
241 <ol data-blog-list>
242 <li>Loading blog archive...</li>
243 </ol>
244 </aside>
245 <article>
246 <p data-blog-status>Select a blog to inspect.</p>
247 <div data-blog-content></div>
248 </article>
249 </section>
250 <section
251 class="jrpg-tool-browser"
252 data-tool-browser
253 aria-label="Tool workspace"
254 hidden
255 >
256 <article>
257 <p data-tool-status>Select a tool to inspect.</p>
258 <div data-tool-content></div>
259 </article>
260 </section>
261 <div class="jrpg-dialog-actions" data-dialog-actions>
262 <zen-button appearance="plain" size="lg" data-resume-download>
263 <a href="/public/resume.pdf">
264 Download PDF
265 <zen-icon name="download"></zen-icon>
170 </a> 266 </a>
171 </zen-button> 267 </zen-button>
172 <zen-button appearance="plain" size="md">
173 <button type="button" data-zen-close aria-label="Close destination details">
174 <zen-icon name="close"></zen-icon>
175 </button>
176 </zen-button>
177 </div> 268 </div>
178 </div> 269 </dialog>
179 <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2> 270 </zen-dialog>
180 <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p> 271 </div>
181 <section 272 <mjj-conversation-archive hidden aria-label="Conversations">
182 class="jrpg-resume-dossier"
183 data-resume-dossier
184 aria-label="Resume dossier"
185 >
186 <p data-resume-status>Loading resume dossier...</p>
187 <div data-resume-content></div>
188 </section>
189 <section
190 class="jrpg-blog-browser"
191 data-blog-browser
192 aria-label="Blog archive"
193 hidden
194 >
195 <aside>
196 <h3>All blogs</h3>
197 <ol data-blog-list>
198 <li>Loading blog archive...</li>
199 </ol>
200 </aside>
201 <article>
202 <p data-blog-status>Select a blog to inspect.</p>
203 <div data-blog-content></div>
204 </article>
205 </section>
206 <section
207 class="jrpg-tool-browser"
208 data-tool-browser
209 aria-label="Tool workspace"
210 hidden
211 >
212 <article>
213 <p data-tool-status>Select a tool to inspect.</p>
214 <div data-tool-content></div>
215 </article>
216 </section>
217 <div class="jrpg-dialog-actions" data-dialog-actions>
218 <zen-button appearance="plain" size="lg" data-resume-download>
219 <a href="/public/resume.pdf">
220 Download PDF
221 <zen-icon name="download"></zen-icon>
222 </a>
223 </zen-button>
224 </div>
225 </dialog>
226 </zen-dialog>
227 </article>
228 </mjj-jrpg-preview>
229
230 <mjj-conversation-archive hidden aria-label="Conversations">
231 <div class="jrpg-archive-heading"> 273 <div class="jrpg-archive-heading">
232 <h2>Archive</h2> 274 <h2>Archive</h2>
233 <zen-button appearance="plain" size="xs"> 275 <zen-button appearance="plain" size="xs">
234 <button type="button" data-archive-close aria-label="Close conversations"> 276 <button type="button" data-archive-close aria-label="Close conversations">
235 <zen-icon name="close"></zen-icon> 277 <zen-icon name="close"></zen-icon>
294 <button type="submit">Save</button> 336 <button type="submit">Save</button>
295 </zen-button> 337 </zen-button>
296 </div> 338 </div>
297 </form> 339 </form>
298 </dialog> 340 </dialog>
299 </mjj-conversation-archive> 341 </mjj-conversation-archive>
342 </article>
343 </mjj-jrpg-preview>
300 </section> 344 </section>
301 345
302 <mjj-jrpg-composer> 346 <mjj-composer compact>
303 <form class="jrpg-composer" data-composer> 347 <form class="jrpg-composer" data-composer>
304 <zen-field appearance="plain" size="lg"> 348 <div data-composer-control>
305 <label for="jrpg-message">Message</label> 349 <zen-field size="lg">
306 <textarea 350 <label for="jrpg-message" data-composer-label>Message</label>
307 id="jrpg-message" 351 <textarea
308 name="message" 352 id="jrpg-message"
309 rows="3" 353 name="message"
310 maxlength="500" 354 rows="3"
311 placeholder="Ask Epi about this site..." 355 maxlength="500"
312 required 356 placeholder="Ask Epi about this site..."
313 ></textarea> 357 required
314 </zen-field> 358 ></textarea>
315 <div class="jrpg-composer-actions"> 359 </zen-field>
316 <zen-button appearance="plain" size="sm"> 360 <div class="jrpg-composer-actions" data-composer-actions>
317 <button type="submit"> 361 <zen-button size="sm">
318 Send 362 <button type="submit" aria-label="Send message">
319 <zen-icon name="arrow-right"></zen-icon> 363 <span data-composer-action-label>Send</span>
320 </button> 364 <zen-icon name="arrow-right"></zen-icon>
321 </zen-button> 365 </button>
322 <zen-button appearance="plain" size="sm" data-cancel-control hidden> 366 </zen-button>
323 <button type="button" data-cancel> 367 <zen-button
324 Cancel 368 size="sm"
325 <zen-icon name="close"></zen-icon> 369 variant="danger"
326 </button> 370 data-composer-cancel-owner
327 </zen-button> 371 hidden
372 >
373 <button
374 type="button"
375 data-composer-cancel
376 aria-label="Cancel response"
377 >
378 <span data-composer-action-label>Cancel</span>
379 <zen-icon name="close"></zen-icon>
380 </button>
381 </zen-button>
382 </div>
328 </div> 383 </div>
329 <p class="jrpg-composer-quota" data-quota aria-live="polite" hidden></p> 384 <p
330 <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p> 385 class="jrpg-composer-quota"
386 data-composer-meta
387 data-quota
388 aria-live="polite"
389 hidden
390 ></p>
391 <p
392 class="jrpg-composer-hint"
393 data-composer-meta
394 >Enter to send / Shift + Enter for a new line</p>
331 </form> 395 </form>
332 </mjj-jrpg-composer> 396 </mjj-composer>
333 397
334 <mjj-jrpg-menu id="jrpg-destination-menu"> 398 <mjj-jrpg-menu id="jrpg-destination-menu">
335 <nav aria-label="Shiba Quest destinations"> 399 <nav aria-label="Shiba Quest destinations">
336 <p class="jrpg-menu-label">Menu</p> 400 <p class="jrpg-menu-label">Menu</p>
337 <ul> 401 <ul>