Mercurial

comparison mrjunejune/src/jrpg/index.html @ 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
1 <!doctype html> 1 <!doctype html>
2 <html lang="en" data-zen-theme="cyberpunk"> 2 <html lang="en" data-zen-theme="cyberpunk">
3 <head> 3 <head>
4 <title>Shiba Quest | MrJuneJune</title> 4 <title>Shiba Quest | MrJuneJune</title>
5 {{/parts/base_head.html}} 5 {{/parts/base_head.html}}
6 <link rel="preload" href="/public/jrpg/background-frame-2.webp" as="image"> 6 <link rel="preload" href="/public/jrpg/background-frame-2.webp" as="image" media="not ((max-width: 52rem) and (orientation: portrait))">
7 <link rel="preload" href="/public/jrpg/background-frame-mobile.webp" as="image" media="(max-width: 52rem) and (orientation: portrait)">
7 <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image"> 8 <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image">
8 <link rel="stylesheet" href="/jrpg/jrpg.css"> 9 <link rel="stylesheet" href="/jrpg/jrpg.css">
9 <script type="module" src="/jrpg/jrpg.js"></script> 10 <script type="module" src="/jrpg/jrpg.js"></script>
10 </head> 11 </head>
11 <body class="jrpg-page"> 12 <body class="jrpg-page">
44 <a href="/" aria-label="Close interface and return home"> 45 <a href="/" aria-label="Close interface and return home">
45 <zen-icon name="close"></zen-icon> 46 <zen-icon name="close"></zen-icon>
46 </a> 47 </a>
47 </zen-button> 48 </zen-button>
48 </nav> 49 </nav>
50 <zen-button class="jrpg-mobile-menu-btn" appearance="plain" size="xs">
51 <button
52 type="button"
53 data-mobile-menu-toggle
54 aria-label="Toggle destination menu"
55 aria-expanded="true"
56 aria-controls="jrpg-destination-menu"
57 >
58 <zen-icon name="menu"></zen-icon>
59 </button>
60 </zen-button>
49 <footer class="jrpg-frame-telemetry" aria-label="System telemetry"> 61 <footer class="jrpg-frame-telemetry" aria-label="System telemetry">
50 <span aria-label="Temperature unavailable">N/A</span> 62 <span aria-label="Temperature unavailable">N/A</span>
51 <span aria-label="User June">JUNE</span> 63 <span data-frame-account aria-live="polite"><a href="/login?next=/jrpg">LOGIN</a></span>
52 <span data-frame-network aria-label="Status online">ONLINE</span> 64 <span data-frame-network aria-label="Status online">ONLINE</span>
53 <time data-frame-uptime aria-label="Uptime">00:00:00</time> 65 <time data-frame-uptime aria-label="Uptime">00:00:00</time>
54 </footer> 66 </footer>
55 67
56 <section class="jrpg-scene" aria-label="Shiba Quest conversation"> 68 <section class="jrpg-scene" aria-label="Shiba Quest conversation">
101 </section> 113 </section>
102 114
103 <section class="jrpg-utility" aria-label="Selected destination"> 115 <section class="jrpg-utility" aria-label="Selected destination">
104 <mjj-jrpg-preview data-selection="resume"> 116 <mjj-jrpg-preview data-selection="resume">
105 <article class="jrpg-preview-panel" aria-live="polite"> 117 <article class="jrpg-preview-panel" aria-live="polite">
106 <p class="jrpg-preview-kicker" data-preview-kicker>CHARACTER RECORD</p>
107 <zen-heading size="xl"> 118 <zen-heading size="xl">
108 <h2 data-preview-title>Resume</h2> 119 <h2 data-preview-title>Resume</h2>
109 </zen-heading> 120 </zen-heading>
110 <p data-preview-copy>Experience, projects, and the systems I have helped build.</p> 121 <p data-preview-copy>
122 Member of Technical Staff and engineering leader with 10+ years building AI agent platforms and production systems.
123 </p>
111 <ul class="jrpg-work-showcase" data-work-showcase> 124 <ul class="jrpg-work-showcase" data-work-showcase>
112 <li> 125 <li>
113 <a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/"> 126 <a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/">
114 <span>Copilot Tasks</span> 127 <span>Copilot Tasks</span>
115 <small>Agentic execution</small> 128 <small>Agentic execution</small>
191 </div> 204 </div>
192 </dialog> 205 </dialog>
193 </zen-dialog> 206 </zen-dialog>
194 </article> 207 </article>
195 </mjj-jrpg-preview> 208 </mjj-jrpg-preview>
209
210 <mjj-conversation-archive hidden aria-label="Conversations">
211 <div class="jrpg-archive-heading">
212 <h2>Archive</h2>
213 <zen-button appearance="plain" size="xs">
214 <button type="button" data-archive-close aria-label="Close conversations">
215 <zen-icon name="close"></zen-icon>
216 </button>
217 </zen-button>
218 </div>
219 <div class="jrpg-archive-actions">
220 <zen-button appearance="plain" size="sm">
221 <button type="button" data-archive-new>
222 <zen-icon name="plus"></zen-icon>
223 New
224 </button>
225 </zen-button>
226 </div>
227 <ol class="jrpg-archive-list" data-archive-list aria-label="Conversations">
228 </ol>
229 <zen-button appearance="plain" size="sm" data-archive-load-more-owner hidden>
230 <button type="button" data-archive-load-more>Load more</button>
231 </zen-button>
232 <p class="jrpg-archive-status" data-archive-status aria-live="polite">Loading conversations...</p>
233 <dialog
234 class="jrpg-archive-dialog"
235 data-archive-delete-dialog
236 aria-labelledby="archive-delete-title"
237 aria-modal="true"
238 >
239 <p id="archive-delete-title" class="jrpg-archive-dialog-title">Delete this conversation?</p>
240 <p data-archive-delete-name class="jrpg-archive-dialog-subtitle"></p>
241 <div class="jrpg-archive-dialog-actions">
242 <zen-button appearance="plain" size="md">
243 <button type="button" data-archive-delete-cancel>Cancel</button>
244 </zen-button>
245 <zen-button appearance="plain" size="md">
246 <button type="button" data-archive-delete-confirm>Delete</button>
247 </zen-button>
248 </div>
249 </dialog>
250 <dialog
251 class="jrpg-archive-dialog"
252 data-archive-rename-dialog
253 aria-labelledby="archive-rename-title"
254 aria-modal="true"
255 >
256 <p id="archive-rename-title" class="jrpg-archive-dialog-title">Rename conversation</p>
257 <form data-archive-rename-form novalidate>
258 <zen-field appearance="plain" size="md">
259 <label for="archive-rename-input">New title</label>
260 <input
261 id="archive-rename-input"
262 data-archive-rename-input
263 type="text"
264 maxlength="200"
265 required
266 autocomplete="off"
267 >
268 </zen-field>
269 <div class="jrpg-archive-dialog-actions">
270 <zen-button appearance="plain" size="md">
271 <button type="button" data-archive-rename-cancel>Cancel</button>
272 </zen-button>
273 <zen-button appearance="plain" size="md">
274 <button type="submit">Save</button>
275 </zen-button>
276 </div>
277 </form>
278 </dialog>
279 </mjj-conversation-archive>
196 </section> 280 </section>
197 281
198 <mjj-jrpg-composer> 282 <mjj-jrpg-composer>
199 <form class="jrpg-composer" data-composer> 283 <form class="jrpg-composer" data-composer>
200 <zen-field appearance="plain" size="lg"> 284 <zen-field appearance="plain" size="lg">
220 Cancel 304 Cancel
221 <zen-icon name="close"></zen-icon> 305 <zen-icon name="close"></zen-icon>
222 </button> 306 </button>
223 </zen-button> 307 </zen-button>
224 </div> 308 </div>
309 <p class="jrpg-composer-quota" data-quota aria-live="polite" hidden></p>
225 <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p> 310 <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p>
226 </form> 311 </form>
227 </mjj-jrpg-composer> 312 </mjj-jrpg-composer>
228 313
229 <mjj-jrpg-menu> 314 <mjj-jrpg-menu id="jrpg-destination-menu">
230 <nav aria-label="Shiba Quest destinations"> 315 <nav aria-label="Shiba Quest destinations">
231 <p class="jrpg-menu-label">Menu</p> 316 <p class="jrpg-menu-label">Menu</p>
232 <ul> 317 <ul>
233 <li> 318 <li>
234 <zen-button appearance="plain" size="sm"> 319 <zen-button appearance="plain" size="sm">
252 <zen-icon name="chevron-right"></zen-icon> 337 <zen-icon name="chevron-right"></zen-icon>
253 Blogs 338 Blogs
254 </button> 339 </button>
255 </zen-button> 340 </zen-button>
256 </li> 341 </li>
342 <li>
343 <zen-button appearance="plain" size="sm">
344 <button type="button" data-preview="conversations" aria-pressed="false">
345 <zen-icon name="chevron-right"></zen-icon>
346 Conversations
347 </button>
348 </zen-button>
349 </li>
257 </ul> 350 </ul>
258 </nav> 351 </nav>
259 </mjj-jrpg-menu> 352 </mjj-jrpg-menu>
353
354 <zen-dialog class="jrpg-login-dialog-owner" data-login-dialog-owner>
355 <zen-button appearance="plain" size="md" hidden>
356 <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
357 </zen-button>
358 <dialog
359 class="jrpg-login-dialog"
360 data-login-dialog
361 aria-labelledby="jrpg-login-title"
362 aria-modal="true"
363 >
364 <div class="jrpg-login-dialog-header">
365 <h2 id="jrpg-login-title">SIGN IN</h2>
366 <zen-button appearance="plain" size="md">
367 <button type="button" data-zen-close aria-label="Close sign-in dialog">
368 <zen-icon name="close"></zen-icon>
369 </button>
370 </zen-button>
371 </div>
372 <div role="alert" data-login-error aria-live="assertive" hidden></div>
373 <form data-login-form novalidate>
374 <zen-field appearance="plain" size="md">
375 <label for="jrpg-login-username">Username</label>
376 <input
377 id="jrpg-login-username"
378 name="username"
379 type="text"
380 autocomplete="username"
381 autocapitalize="none"
382 spellcheck="false"
383 required
384 maxlength="32"
385 >
386 </zen-field>
387 <zen-field appearance="plain" size="md">
388 <label for="jrpg-login-password">Password</label>
389 <input
390 id="jrpg-login-password"
391 name="password"
392 type="password"
393 autocomplete="current-password"
394 required
395 minlength="12"
396 maxlength="1024"
397 >
398 </zen-field>
399 <div class="jrpg-login-dialog-actions">
400 <zen-button appearance="plain" size="md">
401 <button type="button" data-login-cancel data-zen-close>Cancel</button>
402 </zen-button>
403 <zen-button appearance="plain" size="md">
404 <button type="submit" data-login-submit>Sign in</button>
405 </zen-button>
406 </div>
407 </form>
408 </dialog>
409 </zen-dialog>
260 </div> 410 </div>
261 </mjj-jrpg-shell> 411 </mjj-jrpg-shell>
262 </main> 412 </main>
263 </body> 413 </body>
264 </html> 414 </html>