Mercurial

view mrjunejune/src/jrpg/index.html @ 260:1f9877b637e9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add Copilot-powered cyberpunk JRPG chat Integrate the production JRPG chat with Seobeo streaming, Deita persistence, and a Bazel-managed Copilot SDK and LiteLLM inference stack. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <mrjunejune@users.noreply.github.com>
date Wed, 05 Aug 2026 09:19:41 -0700
parents 667156fcd3e3
children b401627fc49e
line wrap: on
line source

<!doctype html>
<html lang="en" data-zen-theme="cyberpunk">
  <head>
    <title>Shiba Quest | MrJuneJune</title>
    {{/parts/base_head.html}}
    <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image">
    <link rel="stylesheet" href="/jrpg/jrpg.css">
    <script type="module" src="/jrpg/jrpg.js"></script>
  </head>
  <body class="jrpg-page">
    <main class="jrpg-main">
      <mjj-jrpg-shell class="jrpg-shell">
        <div class="jrpg-workspace">
          <section class="jrpg-scene" aria-label="Shiba Quest conversation">
            <mjj-jrpg-character state="default">
              <img data-character alt="">
            </mjj-jrpg-character>

            <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>
                <div
                  class="jrpg-message-viewport"
                  data-zen-viewport
                  role="log"
                  aria-live="polite"
                  aria-relevant="additions"
                >
                  <ol class="jrpg-messages" data-messages>
                    <li class="jrpg-message" data-speaker="Epi">
                      <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">
                      <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>
            </mjj-jrpg-chat>
          </section>

          <section class="jrpg-utility" aria-label="Selected destination">
            <div class="jrpg-brand">
              <header>
                <h1>
                  <a href="/" data-zen-link-effect="none">MrJuneJune</a>
                </h1>
              </header>
              <p>SHIBA QUEST TERMINAL</p>
            </div>

            <mjj-jrpg-preview data-selection="resume">
              <article class="jrpg-preview-panel" aria-live="polite">
                <p class="jrpg-preview-kicker" data-preview-kicker>CHARACTER RECORD</p>
                <zen-heading size="xl">
                  <h2 data-preview-title>Resume</h2>
                </zen-heading>
                <p data-preview-copy>Experience, projects, and the systems I have helped build.</p>
                <dl class="jrpg-preview-stats">
                  <div>
                    <dt>TYPE</dt>
                    <dd data-preview-type>Profile</dd>
                  </div>
                  <div>
                    <dt>STATUS</dt>
                    <dd>Available</dd>
                  </div>
                </dl>

                <zen-dialog class="jrpg-preview-dialog">
                  <zen-button appearance="plain" size="md">
                    <button type="button" data-zen-trigger>
                      Inspect
                      <zen-icon name="search"></zen-icon>
                    </button>
                  </zen-button>
                  <dialog aria-labelledby="jrpg-dialog-title">
                    <div class="jrpg-dialog-heading">
                      <p>DESTINATION DATA</p>
                      <zen-button appearance="plain" size="md">
                        <button type="button" data-zen-close aria-label="Close destination details">
                          <zen-icon name="close"></zen-icon>
                        </button>
                      </zen-button>
                    </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>
                  </dialog>
                </zen-dialog>
              </article>
            </mjj-jrpg-preview>
          </section>

          <mjj-jrpg-composer>
            <form class="jrpg-composer" data-composer>
              <zen-field appearance="plain" size="lg">
                <label for="jrpg-message">Message</label>
                <textarea
                  id="jrpg-message"
                  name="message"
                  rows="3"
                  maxlength="500"
                  placeholder="Ask Epi about this site..."
                  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>
              <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p>
            </form>
          </mjj-jrpg-composer>

          <mjj-jrpg-menu>
            <nav aria-label="Shiba Quest destinations">
              <p class="jrpg-menu-label">Menu</p>
              <ul>
                <li>
                  <zen-button appearance="plain" size="lg">
                    <button type="button" data-preview="resume" aria-pressed="true">
                      <zen-icon name="chevron-right"></zen-icon>
                      Resume
                    </button>
                  </zen-button>
                </li>
                <li>
                  <zen-button appearance="plain" size="lg">
                    <button type="button" data-preview="tools" aria-pressed="false">
                      <zen-icon name="chevron-right"></zen-icon>
                      Tools
                    </button>
                  </zen-button>
                </li>
                <li>
                  <zen-button appearance="plain" size="lg">
                    <button type="button" data-preview="blog" aria-pressed="false">
                      <zen-icon name="chevron-right"></zen-icon>
                      Blogs
                    </button>
                  </zen-button>
                </li>
              </ul>
            </nav>
          </mjj-jrpg-menu>
        </div>
      </mjj-jrpg-shell>
    </main>
  </body>
</html>