playground/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Trace2Env Playground</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <header class="topbar">
    <div class="brand">
      <span class="logo">T2E</span>
      <div>
        <div class="title" id="page-title">Playground - Trace2Env (Agentic Language World Model)</div>
        <div class="subtitle" id="page-tagline">loading the worldbook…</div>
      </div>
    </div>
    <div class="status">
      <span class="pill" id="model-pill">model: …</span>
      <span class="pill" id="step-pill">step 0</span>
      <span class="pill" id="budget-pill" hidden></span>
      <button id="reset-button" class="ghost" title="Start a fresh episode in a new session directory">New episode</button>
    </div>
  </header>

  <main class="layout">
    <!-- Left: act as the task agent -->
    <section class="column composer">
      <h2>You are the task agent</h2>
      <p class="hint" id="composer-hint">Type what you would type in the environment, or pick a suggested play below.
        The world-model agent answers as the environment would, from the worldbook and the episode's state.</p>

      <div class="command-box">
        <span class="prompt-sign" id="prompt-sign">$</span>
        <textarea id="command-input" rows="2" spellcheck="false" autofocus placeholder="rm report.txt"></textarea>
      </div>
      <p class="hint" id="input-hint"></p>
      <div class="actions">
        <button id="send-button" class="primary">Send <kbd>Enter</kbd></button>
      </div>
      <div id="composer-error" class="error" hidden></div>

      <section class="plays">
        <h3>Suggested plays</h3>
        <p class="hint">Each play starts a fresh episode with its own initial state and lists the commands to try in order.</p>
        <ul id="example-list" class="examples"></ul>
      </section>

    </section>

    <!-- Center: the transcript -->
    <section class="column transcript-column">
      <h2>Simulated environment</h2>
      <p class="hint" id="transcript-hint" hidden></p>
      <div id="transcript" class="transcript">
        <div class="empty" id="transcript-empty">No actions yet. The first observation appears here.</div>
      </div>
      <div id="pending" class="pending" hidden>
        <span class="spinner"></span> <span id="pending-text">the world-model agent is simulating the response…</span>
      </div>
    </section>

    <!-- Right: the state -->
    <section class="column state-column">
      <h2>Episode state</h2>
      <p class="hint" id="state-hint"></p>
      <div class="state-tabs">
        <button class="tab active" data-tab="state">Current state</button>
        <button class="tab" data-tab="diff">Last changes</button>
        <button class="tab" data-tab="settings">Settings</button>
      </div>
      <pre id="state-view" class="codeblock"></pre>
      <div id="diff-view" hidden></div>
      <dl id="settings-view" class="settings" hidden></dl>

      <section class="keybox" id="keybox">
        <h3>Use your own key</h3>
        <p class="hint" id="free-play-line"></p>
        <form id="credentials-form">
          <label class="field"><span>Model (OpenRouter id)</span><input id="cred-model" type="text" autocomplete="off" spellcheck="false"></label>
          <label class="field"><span>OpenRouter API key</span><input id="cred-key" type="password" autocomplete="off" placeholder="sk-or-v1-…"></label>
          <div class="actions">
            <button class="primary" type="submit" id="cred-use">Use my key</button>
            <button class="ghost" type="button" id="cred-forget" hidden>Forget my key</button>
          </div>
        </form>
        <p class="hint privacy">Your key stays in this server's memory for your visit only and is used solely to call OpenRouter on
          your behalf. It is never written to disk, logs or audit records, never shown again, and is forgotten when you click
          "Forget my key" or the server restarts.</p>
        <div id="cred-status" class="hint" hidden></div>
      </section>
    </section>
  </main>

  <template id="turn-template">
    <article class="turn">
      <div class="bubble action">
        <div class="who">task agent <span class="badges action-badges"></span></div>
        <pre class="payload"></pre>
      </div>
      <div class="bubble observation">
        <div class="who">environment <span class="badges"></span></div>
        <pre class="observation-text"></pre>
        <details class="details">
          <summary>How this observation was produced</summary>
          <div class="details-body"></div>
        </details>
      </div>
    </article>
  </template>

  <script src="/app.js"></script>
</body>
</html>