Mercurial

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