Mercurial

comparison mrjunejune/test/snapshots/jrpg.snapshot @ 261:b401627fc49e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
260:1f9877b637e9 261:b401627fc49e
45 <img data-character alt=""> 45 <img data-character alt="">
46 </mjj-jrpg-character> 46 </mjj-jrpg-character>
47 47
48 <mjj-jrpg-chat aria-labelledby="conversation-title"> 48 <mjj-jrpg-chat aria-labelledby="conversation-title">
49 <div class="jrpg-panel-heading"> 49 <div class="jrpg-panel-heading">
50 <span aria-hidden="true">QUEST 01</span>
51 <h1 id="conversation-title">Conversations</h1> 50 <h1 id="conversation-title">Conversations</h1>
52 </div> 51 </div>
53 <zen-message-scroller> 52 <zen-message-scroller>
54 <div 53 <div
55 class="jrpg-message-viewport" 54 class="jrpg-message-viewport"
56 data-zen-viewport 55 data-zen-viewport
57 role="log" 56 role="log"
58 aria-live="polite" 57 aria-live="polite"
59 aria-relevant="additions" 58 aria-relevant="additions text"
60 > 59 >
61 <ol class="jrpg-messages" data-messages> 60 <ol class="jrpg-messages" data-messages>
62 <li class="jrpg-message" data-speaker="Epi"> 61 <li class="jrpg-message" data-speaker="Epi" data-turn-group="start">
63 <strong>Epi</strong> 62 <strong>Epi</strong>
64 <p>Welcome, traveler. Pick a destination or tell me what you are looking for.</p> 63 <p>Welcome, traveler. Pick a destination or tell me what you are looking for.</p>
65 </li> 64 </li>
66 <li class="jrpg-message" data-speaker="System"> 65 <li class="jrpg-message" data-speaker="System" data-turn-group="start">
67 <strong>System</strong> 66 <strong>System</strong>
68 <p>The Shiba terminal is ready.</p> 67 <p>The Shiba terminal is ready.</p>
69 </li> 68 </li>
70 </ol> 69 </ol>
71 </div> 70 </div>
72 </zen-message-scroller> 71 </zen-message-scroller>
73 <p class="jrpg-next" aria-hidden="true"> 72 <nav class="jrpg-turn-navigation" aria-label="Conversation turns">
74 NEXT <zen-icon name="chevron-right" size="0.9em"></zen-icon> 73 <zen-button appearance="plain" size="sm">
75 </p> 74 <button type="button" data-turn-previous aria-label="Previous turn" disabled>
75 <zen-icon name="chevron-left"></zen-icon>
76 Previous
77 </button>
78 </zen-button>
79 <span data-turn-position aria-live="polite">START</span>
80 <zen-button appearance="plain" size="sm">
81 <button type="button" data-turn-next aria-label="Next turn" disabled>
82 Next
83 <zen-icon name="chevron-right"></zen-icon>
84 </button>
85 </zen-button>
86 </nav>
76 </mjj-jrpg-chat> 87 </mjj-jrpg-chat>
77 </section> 88 </section>
78 89
79 <section class="jrpg-utility" aria-label="Selected destination"> 90 <section class="jrpg-utility" aria-label="Selected destination">
80 <div class="jrpg-brand"> 91 <div class="jrpg-brand">
91 <p class="jrpg-preview-kicker" data-preview-kicker>CHARACTER RECORD</p> 102 <p class="jrpg-preview-kicker" data-preview-kicker>CHARACTER RECORD</p>
92 <zen-heading size="xl"> 103 <zen-heading size="xl">
93 <h2 data-preview-title>Resume</h2> 104 <h2 data-preview-title>Resume</h2>
94 </zen-heading> 105 </zen-heading>
95 <p data-preview-copy>Experience, projects, and the systems I have helped build.</p> 106 <p data-preview-copy>Experience, projects, and the systems I have helped build.</p>
107 <ul class="jrpg-work-showcase" data-work-showcase>
108 <li>
109 <a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/">
110 <span>Copilot Tasks</span>
111 <small>Agentic execution</small>
112 </a>
113 </li>
114 <li>
115 <a href="https://www.cio.com/article/3977098/microsoft-doubles-down-on-multi-model-ai-as-it-builds-a-copilot-super-app.html">
116 <span>Copilot SuperApp</span>
117 <small>AI platform</small>
118 </a>
119 </li>
120 </ul>
96 <dl class="jrpg-preview-stats"> 121 <dl class="jrpg-preview-stats">
97 <div> 122 <div>
98 <dt>TYPE</dt> 123 <dt>TYPE</dt>
99 <dd data-preview-type>Profile</dd> 124 <dd data-preview-type>Profile</dd>
100 </div> 125 </div>
109 <button type="button" data-zen-trigger> 134 <button type="button" data-zen-trigger>
110 Inspect 135 Inspect
111 <zen-icon name="search"></zen-icon> 136 <zen-icon name="search"></zen-icon>
112 </button> 137 </button>
113 </zen-button> 138 </zen-button>
114 <dialog aria-labelledby="jrpg-dialog-title"> 139 <dialog class="jrpg-resume-dialog" aria-labelledby="jrpg-dialog-title">
115 <div class="jrpg-dialog-heading"> 140 <div class="jrpg-dialog-heading">
116 <p>DESTINATION DATA</p> 141 <p>DESTINATION DATA</p>
117 <zen-button appearance="plain" size="md"> 142 <zen-button appearance="plain" size="md">
118 <button type="button" data-zen-close aria-label="Close destination details"> 143 <button type="button" data-zen-close aria-label="Close destination details">
119 <zen-icon name="close"></zen-icon> 144 <zen-icon name="close"></zen-icon>
120 </button> 145 </button>
121 </zen-button> 146 </zen-button>
122 </div> 147 </div>
123 <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2> 148 <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2>
124 <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p> 149 <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p>
125 <zen-button appearance="plain" size="lg"> 150 <section
126 <a href="/resume" data-preview-link> 151 class="jrpg-resume-dossier"
127 Open destination 152 data-resume-dossier
128 <zen-icon name="arrow-right"></zen-icon> 153 aria-label="Resume dossier"
129 </a> 154 >
130 </zen-button> 155 <p data-resume-status>Loading resume dossier...</p>
156 <div data-resume-content></div>
157 </section>
158 <div class="jrpg-dialog-actions">
159 <zen-button appearance="plain" size="lg">
160 <a href="/resume" data-preview-link>
161 Open full page
162 <zen-icon name="arrow-right"></zen-icon>
163 </a>
164 </zen-button>
165 <zen-button appearance="plain" size="lg" data-resume-download>
166 <a href="/public/resume.pdf">
167 Download PDF
168 <zen-icon name="download"></zen-icon>
169 </a>
170 </zen-button>
171 </div>
131 </dialog> 172 </dialog>
132 </zen-dialog> 173 </zen-dialog>
133 </article> 174 </article>
134 </mjj-jrpg-preview> 175 </mjj-jrpg-preview>
135 </section> 176 </section>
145 maxlength="500" 186 maxlength="500"
146 placeholder="Ask Epi about this site..." 187 placeholder="Ask Epi about this site..."
147 required 188 required
148 ></textarea> 189 ></textarea>
149 </zen-field> 190 </zen-field>
150 <zen-button appearance="plain" size="lg"> 191 <div class="jrpg-composer-actions">
151 <button type="submit"> 192 <zen-button appearance="plain" size="lg">
152 Send 193 <button type="submit">
153 <zen-icon name="arrow-right"></zen-icon> 194 Send
154 </button> 195 <zen-icon name="arrow-right"></zen-icon>
155 </zen-button> 196 </button>
156 <zen-button appearance="plain" size="lg" data-cancel-control hidden> 197 </zen-button>
157 <button type="button" data-cancel> 198 <zen-button appearance="plain" size="lg" data-cancel-control hidden>
158 Cancel 199 <button type="button" data-cancel>
159 <zen-icon name="close"></zen-icon> 200 Cancel
160 </button> 201 <zen-icon name="close"></zen-icon>
161 </zen-button> 202 </button>
203 </zen-button>
204 </div>
162 <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p> 205 <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p>
163 </form> 206 </form>
164 </mjj-jrpg-composer> 207 </mjj-jrpg-composer>
165 208
166 <mjj-jrpg-menu> 209 <mjj-jrpg-menu>