Mercurial
diff mrjunejune/test/snapshots/jrpg.snapshot @ 261:b401627fc49e
Add JRPG mock flows and interactive previews
Add scripted mock SSE commands, custom event forwarding, animated chat turns, full-height message navigation, and a cyberpunk resume dossier.
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <mrjunejune@users.noreply.github.com> |
|---|---|
| date | Wed, 05 Aug 2026 20:38:32 -0700 |
| parents | 1f9877b637e9 |
| children | 0f45474c1b1a |
line wrap: on
line diff
--- a/mrjunejune/test/snapshots/jrpg.snapshot Wed Aug 05 09:19:41 2026 -0700 +++ b/mrjunejune/test/snapshots/jrpg.snapshot Wed Aug 05 20:38:32 2026 -0700 @@ -47,7 +47,6 @@ <mjj-jrpg-chat aria-labelledby="conversation-title"> <div class="jrpg-panel-heading"> - <span aria-hidden="true">QUEST 01</span> <h1 id="conversation-title">Conversations</h1> </div> <zen-message-scroller> @@ -56,23 +55,35 @@ data-zen-viewport role="log" aria-live="polite" - aria-relevant="additions" + aria-relevant="additions text" > <ol class="jrpg-messages" data-messages> - <li class="jrpg-message" data-speaker="Epi"> + <li class="jrpg-message" data-speaker="Epi" data-turn-group="start"> <strong>Epi</strong> <p>Welcome, traveler. Pick a destination or tell me what you are looking for.</p> </li> - <li class="jrpg-message" data-speaker="System"> + <li class="jrpg-message" data-speaker="System" data-turn-group="start"> <strong>System</strong> <p>The Shiba terminal is ready.</p> </li> </ol> </div> </zen-message-scroller> - <p class="jrpg-next" aria-hidden="true"> - NEXT <zen-icon name="chevron-right" size="0.9em"></zen-icon> - </p> + <nav class="jrpg-turn-navigation" aria-label="Conversation turns"> + <zen-button appearance="plain" size="sm"> + <button type="button" data-turn-previous aria-label="Previous turn" disabled> + <zen-icon name="chevron-left"></zen-icon> + Previous + </button> + </zen-button> + <span data-turn-position aria-live="polite">START</span> + <zen-button appearance="plain" size="sm"> + <button type="button" data-turn-next aria-label="Next turn" disabled> + Next + <zen-icon name="chevron-right"></zen-icon> + </button> + </zen-button> + </nav> </mjj-jrpg-chat> </section> @@ -93,6 +104,20 @@ <h2 data-preview-title>Resume</h2> </zen-heading> <p data-preview-copy>Experience, projects, and the systems I have helped build.</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> <dl class="jrpg-preview-stats"> <div> <dt>TYPE</dt> @@ -111,7 +136,7 @@ <zen-icon name="search"></zen-icon> </button> </zen-button> - <dialog aria-labelledby="jrpg-dialog-title"> + <dialog class="jrpg-resume-dialog" aria-labelledby="jrpg-dialog-title"> <div class="jrpg-dialog-heading"> <p>DESTINATION DATA</p> <zen-button appearance="plain" size="md"> @@ -122,12 +147,28 @@ </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> - <zen-button appearance="plain" size="lg"> - <a href="/resume" data-preview-link> - Open destination - <zen-icon name="arrow-right"></zen-icon> - </a> - </zen-button> + <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> + <div class="jrpg-dialog-actions"> + <zen-button appearance="plain" size="lg"> + <a href="/resume" data-preview-link> + Open full page + <zen-icon name="arrow-right"></zen-icon> + </a> + </zen-button> + <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> @@ -147,18 +188,20 @@ required ></textarea> </zen-field> - <zen-button appearance="plain" size="lg"> - <button type="submit"> - Send - <zen-icon name="arrow-right"></zen-icon> - </button> - </zen-button> - <zen-button appearance="plain" size="lg" data-cancel-control hidden> - <button type="button" data-cancel> - Cancel - <zen-icon name="close"></zen-icon> - </button> - </zen-button> + <div class="jrpg-composer-actions"> + <zen-button appearance="plain" size="lg"> + <button type="submit"> + Send + <zen-icon name="arrow-right"></zen-icon> + </button> + </zen-button> + <zen-button appearance="plain" size="lg" data-cancel-control hidden> + <button type="button" data-cancel> + Cancel + <zen-icon name="close"></zen-icon> + </button> + </zen-button> + </div> <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p> </form> </mjj-jrpg-composer>