Mercurial

comparison mrjunejune/test/snapshots/jrpg.snapshot @ 264:04fee26ecce0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add authenticated JRPG conversation platform Add reusable auth/session storage, owned conversation recovery, guest quotas, admin workflows, URL-routed conversation UI, mobile frame support, and parallel browser acceptance. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Fri, 07 Aug 2026 07:34:12 -0700
parents ee04e4e69fed
children 056790c4fb0d
comparison
equal deleted inserted replaced
263:ee04e4e69fed 264:04fee26ecce0
30 src="/public/design-system/components/index.js" 30 src="/public/design-system/components/index.js"
31 ></script> 31 ></script>
32 32
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"> 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/bar-ink.webp" as="image"> 37 <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image">
37 <link rel="stylesheet" href="/jrpg/jrpg.css"> 38 <link rel="stylesheet" href="/jrpg/jrpg.css">
38 <script type="module" src="/jrpg/jrpg.js"></script> 39 <script type="module" src="/jrpg/jrpg.js"></script>
39 </head> 40 </head>
40 <body class="jrpg-page"> 41 <body class="jrpg-page">
73 <a href="/" aria-label="Close interface and return home"> 74 <a href="/" aria-label="Close interface and return home">
74 <zen-icon name="close"></zen-icon> 75 <zen-icon name="close"></zen-icon>
75 </a> 76 </a>
76 </zen-button> 77 </zen-button>
77 </nav> 78 </nav>
79 <zen-button class="jrpg-mobile-menu-btn" appearance="plain" size="xs">
80 <button
81 type="button"
82 data-mobile-menu-toggle
83 aria-label="Toggle destination menu"
84 aria-expanded="true"
85 aria-controls="jrpg-destination-menu"
86 >
87 <zen-icon name="menu"></zen-icon>
88 </button>
89 </zen-button>
78 <footer class="jrpg-frame-telemetry" aria-label="System telemetry"> 90 <footer class="jrpg-frame-telemetry" aria-label="System telemetry">
79 <span aria-label="Temperature unavailable">N/A</span> 91 <span aria-label="Temperature unavailable">N/A</span>
80 <span aria-label="User June">JUNE</span> 92 <span data-frame-account aria-live="polite"><a href="/login?next=/jrpg">LOGIN</a></span>
81 <span data-frame-network aria-label="Status online">ONLINE</span> 93 <span data-frame-network aria-label="Status online">ONLINE</span>
82 <time data-frame-uptime aria-label="Uptime">00:00:00</time> 94 <time data-frame-uptime aria-label="Uptime">00:00:00</time>
83 </footer> 95 </footer>
84 96
85 <section class="jrpg-scene" aria-label="Shiba Quest conversation"> 97 <section class="jrpg-scene" aria-label="Shiba Quest conversation">
130 </section> 142 </section>
131 143
132 <section class="jrpg-utility" aria-label="Selected destination"> 144 <section class="jrpg-utility" aria-label="Selected destination">
133 <mjj-jrpg-preview data-selection="resume"> 145 <mjj-jrpg-preview data-selection="resume">
134 <article class="jrpg-preview-panel" aria-live="polite"> 146 <article class="jrpg-preview-panel" aria-live="polite">
135 <p class="jrpg-preview-kicker" data-preview-kicker>CHARACTER RECORD</p>
136 <zen-heading size="xl"> 147 <zen-heading size="xl">
137 <h2 data-preview-title>Resume</h2> 148 <h2 data-preview-title>Resume</h2>
138 </zen-heading> 149 </zen-heading>
139 <p data-preview-copy>Experience, projects, and the systems I have helped build.</p> 150 <p data-preview-copy>
151 Member of Technical Staff and engineering leader with 10+ years building AI agent platforms and production systems.
152 </p>
140 <ul class="jrpg-work-showcase" data-work-showcase> 153 <ul class="jrpg-work-showcase" data-work-showcase>
141 <li> 154 <li>
142 <a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/"> 155 <a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/">
143 <span>Copilot Tasks</span> 156 <span>Copilot Tasks</span>
144 <small>Agentic execution</small> 157 <small>Agentic execution</small>
220 </div> 233 </div>
221 </dialog> 234 </dialog>
222 </zen-dialog> 235 </zen-dialog>
223 </article> 236 </article>
224 </mjj-jrpg-preview> 237 </mjj-jrpg-preview>
238
239 <mjj-conversation-archive hidden aria-label="Conversations">
240 <div class="jrpg-archive-heading">
241 <h2>Archive</h2>
242 <zen-button appearance="plain" size="xs">
243 <button type="button" data-archive-close aria-label="Close conversations">
244 <zen-icon name="close"></zen-icon>
245 </button>
246 </zen-button>
247 </div>
248 <div class="jrpg-archive-actions">
249 <zen-button appearance="plain" size="sm">
250 <button type="button" data-archive-new>
251 <zen-icon name="plus"></zen-icon>
252 New
253 </button>
254 </zen-button>
255 </div>
256 <ol class="jrpg-archive-list" data-archive-list aria-label="Conversations">
257 </ol>
258 <zen-button appearance="plain" size="sm" data-archive-load-more-owner hidden>
259 <button type="button" data-archive-load-more>Load more</button>
260 </zen-button>
261 <p class="jrpg-archive-status" data-archive-status aria-live="polite">Loading conversations...</p>
262 <dialog
263 class="jrpg-archive-dialog"
264 data-archive-delete-dialog
265 aria-labelledby="archive-delete-title"
266 aria-modal="true"
267 >
268 <p id="archive-delete-title" class="jrpg-archive-dialog-title">Delete this conversation?</p>
269 <p data-archive-delete-name class="jrpg-archive-dialog-subtitle"></p>
270 <div class="jrpg-archive-dialog-actions">
271 <zen-button appearance="plain" size="md">
272 <button type="button" data-archive-delete-cancel>Cancel</button>
273 </zen-button>
274 <zen-button appearance="plain" size="md">
275 <button type="button" data-archive-delete-confirm>Delete</button>
276 </zen-button>
277 </div>
278 </dialog>
279 <dialog
280 class="jrpg-archive-dialog"
281 data-archive-rename-dialog
282 aria-labelledby="archive-rename-title"
283 aria-modal="true"
284 >
285 <p id="archive-rename-title" class="jrpg-archive-dialog-title">Rename conversation</p>
286 <form data-archive-rename-form novalidate>
287 <zen-field appearance="plain" size="md">
288 <label for="archive-rename-input">New title</label>
289 <input
290 id="archive-rename-input"
291 data-archive-rename-input
292 type="text"
293 maxlength="200"
294 required
295 autocomplete="off"
296 >
297 </zen-field>
298 <div class="jrpg-archive-dialog-actions">
299 <zen-button appearance="plain" size="md">
300 <button type="button" data-archive-rename-cancel>Cancel</button>
301 </zen-button>
302 <zen-button appearance="plain" size="md">
303 <button type="submit">Save</button>
304 </zen-button>
305 </div>
306 </form>
307 </dialog>
308 </mjj-conversation-archive>
225 </section> 309 </section>
226 310
227 <mjj-jrpg-composer> 311 <mjj-jrpg-composer>
228 <form class="jrpg-composer" data-composer> 312 <form class="jrpg-composer" data-composer>
229 <zen-field appearance="plain" size="lg"> 313 <zen-field appearance="plain" size="lg">
249 Cancel 333 Cancel
250 <zen-icon name="close"></zen-icon> 334 <zen-icon name="close"></zen-icon>
251 </button> 335 </button>
252 </zen-button> 336 </zen-button>
253 </div> 337 </div>
338 <p class="jrpg-composer-quota" data-quota aria-live="polite" hidden></p>
254 <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p> 339 <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p>
255 </form> 340 </form>
256 </mjj-jrpg-composer> 341 </mjj-jrpg-composer>
257 342
258 <mjj-jrpg-menu> 343 <mjj-jrpg-menu id="jrpg-destination-menu">
259 <nav aria-label="Shiba Quest destinations"> 344 <nav aria-label="Shiba Quest destinations">
260 <p class="jrpg-menu-label">Menu</p> 345 <p class="jrpg-menu-label">Menu</p>
261 <ul> 346 <ul>
262 <li> 347 <li>
263 <zen-button appearance="plain" size="sm"> 348 <zen-button appearance="plain" size="sm">
281 <zen-icon name="chevron-right"></zen-icon> 366 <zen-icon name="chevron-right"></zen-icon>
282 Blogs 367 Blogs
283 </button> 368 </button>
284 </zen-button> 369 </zen-button>
285 </li> 370 </li>
371 <li>
372 <zen-button appearance="plain" size="sm">
373 <button type="button" data-preview="conversations" aria-pressed="false">
374 <zen-icon name="chevron-right"></zen-icon>
375 Conversations
376 </button>
377 </zen-button>
378 </li>
286 </ul> 379 </ul>
287 </nav> 380 </nav>
288 </mjj-jrpg-menu> 381 </mjj-jrpg-menu>
382
383 <zen-dialog class="jrpg-login-dialog-owner" data-login-dialog-owner>
384 <zen-button appearance="plain" size="md" hidden>
385 <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
386 </zen-button>
387 <dialog
388 class="jrpg-login-dialog"
389 data-login-dialog
390 aria-labelledby="jrpg-login-title"
391 aria-modal="true"
392 >
393 <div class="jrpg-login-dialog-header">
394 <h2 id="jrpg-login-title">SIGN IN</h2>
395 <zen-button appearance="plain" size="md">
396 <button type="button" data-zen-close aria-label="Close sign-in dialog">
397 <zen-icon name="close"></zen-icon>
398 </button>
399 </zen-button>
400 </div>
401 <div role="alert" data-login-error aria-live="assertive" hidden></div>
402 <form data-login-form novalidate>
403 <zen-field appearance="plain" size="md">
404 <label for="jrpg-login-username">Username</label>
405 <input
406 id="jrpg-login-username"
407 name="username"
408 type="text"
409 autocomplete="username"
410 autocapitalize="none"
411 spellcheck="false"
412 required
413 maxlength="32"
414 >
415 </zen-field>
416 <zen-field appearance="plain" size="md">
417 <label for="jrpg-login-password">Password</label>
418 <input
419 id="jrpg-login-password"
420 name="password"
421 type="password"
422 autocomplete="current-password"
423 required
424 minlength="12"
425 maxlength="1024"
426 >
427 </zen-field>
428 <div class="jrpg-login-dialog-actions">
429 <zen-button appearance="plain" size="md">
430 <button type="button" data-login-cancel data-zen-close>Cancel</button>
431 </zen-button>
432 <zen-button appearance="plain" size="md">
433 <button type="submit" data-login-submit>Sign in</button>
434 </zen-button>
435 </div>
436 </form>
437 </dialog>
438 </zen-dialog>
289 </div> 439 </div>
290 </mjj-jrpg-shell> 440 </mjj-jrpg-shell>
291 </main> 441 </main>
292 </body> 442 </body>
293 </html> 443 </html>