api/static/app/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>RosDiff by Orcanion</title>
  <meta name="description" content="Describe a robot world or a ROS 2 package; RosDiff builds it and tests it.">
  <link rel="icon" type="image/png" sizes="32x32" href="/static/app/brand/rosdiff-32.png">
  <link rel="apple-touch-icon" href="/static/app/brand/rosdiff-192.png">
  <meta name="theme-color" content="#050507">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/static/app/app.css">
</head>
<body>
  <!-- Startup animation (shortened for returning visitors; click or any key skips) -->
  <div id="splash" class="splash" aria-hidden="true">
    <div class="splash-inner">
      <img class="splash-logo" src="/static/app/brand/rosdiff-512.webp" alt="" width="200" height="200">
      <div class="splash-name">RosDiff</div>
      <div class="splash-by">by Orcanion</div>
    </div>
  </div>

  <!-- Sign in -->
  <div id="login" class="login" hidden>
    <form class="login-card" id="login-form" autocomplete="off">
      <img class="login-logo" src="/static/app/brand/rosdiff-192.png" alt="RosDiff logo" width="84" height="84">
      <div class="login-brand">RosDiff <span>by Orcanion</span></div>
      <h1>Tell RosDiff what you want to build</h1>
      <p class="muted">It picks the AI, the simulator and the compute, then builds and tests it for you.</p>
      <p class="muted small">Enter the key you were given.</p>
      <label class="sr-only" for="key-input">Tester key</label>
      <input id="key-input" class="input" type="password" placeholder="Your API key" spellcheck="false" required>
      <button class="btn btn-primary btn-block" type="submit">Sign in</button>
      <p id="login-error" class="error-text" role="alert" hidden></p>
      <p class="muted small">No key yet? Ask your Orcanion contact.</p>
    </form>
  </div>

  <!-- App -->
  <div id="app" class="app" hidden>
    <header class="topbar">
      <button class="icon-btn only-mobile" id="menu-btn" aria-label="Show history" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
      </button>
      <div class="brand"><img class="logo-img" src="/static/app/brand/rosdiff-64.png" alt="" width="28" height="28"><span>RosDiff</span><span class="by">by Orcanion</span><span class="tag">testing</span></div>
      <div class="topbar-right">
        <button class="budget" id="budget" type="button" title="Your AI budget. Click for details.">
          <span class="budget-label" id="budget-label">—</span>
          <span class="budget-bar"><span id="budget-fill"></span></span>
        </button>
        <div class="user">
          <button class="user-chip" id="user-btn" aria-haspopup="menu" aria-expanded="false">
            <span class="avatar" id="avatar" aria-hidden="true">?</span><span id="user-name">tester</span>
          </button>
          <div class="menu" id="user-menu" role="menu" hidden>
            <button role="menuitem" id="usage-btn">My usage</button>
            <button role="menuitem" id="help-btn">Take the tour</button>
            <button role="menuitem" id="logout-btn">Sign out</button>
          </div>
        </div>
      </div>
    </header>

    <aside class="sidebar" id="sidebar" aria-label="History">
      <nav class="sidebar-nav" aria-label="Workspace">
        <button class="s-nav-btn mtab active" data-pane="sim">
          <span class="s-icon sim-icon"><svg viewBox="0 0 24 24"><path d="M12 3 4 7.5v9L12 21l8-4.5v-9L12 3Zm0 0v18M4 7.5l8 4.5 8-4.5"/></svg></span>
          Simulation
        </button>
        <button class="s-nav-btn mtab" data-pane="code">
          <span class="s-icon code-icon"><svg viewBox="0 0 24 24"><path d="m8 7-5 5 5 5m8-10 5 5-5 5M14 4l-4 16"/></svg></span>
          Code
        </button>
      </nav>

      <div class="sidebar-tools">
        <span class="section-title">Available Tools</span>
        <div class="tools-list">
          <span class="tool-chip mujoco">MuJoCo</span>
          <span class="tool-chip isaac">Isaac Sim</span>
          <span class="tool-chip ros">ROS 2</span>
        </div>
      </div>

      <div class="sidebar-head">
        <span class="section-title">History</span>
        <button class="icon-btn" id="refresh-history" aria-label="Refresh history" title="Refresh">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 1 0-2.3 5.7M20 5v6h-6"/></svg>
        </button>
      </div>
      <div class="history" id="history" role="list"></div>
    </aside>
    <div class="scrim" id="scrim" hidden></div>

    <main class="workspace">
      <!-- Simulation pane -->
      <section class="pane active" id="pane-sim" aria-labelledby="sim-title">
        <div class="pane-head">
          <span class="pane-icon sim" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3 4 7.5v9L12 21l8-4.5v-9L12 3Zm0 0v18M4 7.5l8 4.5 8-4.5"/></svg></span>
          <div>
            <h2 id="sim-title">Simulation</h2>
            <p class="muted small">Describe a world. RosDiff picks the simulator, builds it and tests it.</p>
          </div>
          <button class="btn btn-ghost btn-sm" data-clear="sim" aria-label="Start a new simulation thread">New</button>
        </div>
        <div class="thread" id="thread-sim" aria-live="polite"></div>
        <form class="composer" id="composer-sim">
          <div class="chips" role="radiogroup" aria-label="Robot" id="robot-chips"></div>
          <div class="composer-box">
            <label class="sr-only" for="input-sim">Describe the scene</label>
            <textarea id="input-sim" rows="2" placeholder="e.g. The robot stands in front of three steps, 15 cm high, one metre ahead…"></textarea>
            <button class="send" type="submit" aria-label="Build scene" title="Build scene (Enter)">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </button>
          </div>
        </form>
      </section>

      <!-- Code pane -->
      <section class="pane" id="pane-code" aria-labelledby="code-title">
        <div class="pane-head">
          <span class="pane-icon code" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="m8 7-5 5 5 5m8-10 5 5-5 5M14 4l-4 16"/></svg></span>
          <div>
            <h2 id="code-title">ROS 2 code</h2>
            <p class="muted small">Describe a node. RosDiff writes it, then builds and runs it for real.</p>
          </div>
          <button class="btn btn-ghost btn-sm" data-clear="code" aria-label="Start a new code thread">New</button>
        </div>
        <div class="thread" id="thread-code" aria-live="polite"></div>
        <form class="composer" id="composer-code">
          <div class="chips">
            <div class="seg" role="radiogroup" aria-label="ROS 2 version">
              <button type="button" class="seg-btn active" data-distro="humble" role="radio" aria-checked="true">Humble</button>
              <button type="button" class="seg-btn" data-distro="jazzy" role="radio" aria-checked="false">Jazzy</button>
            </div>
            <div class="seg" role="radiogroup" aria-label="Language">
              <button type="button" class="seg-btn active" data-lang="python" role="radio" aria-checked="true">Python</button>
              <button type="button" class="seg-btn" data-lang="cpp" role="radio" aria-checked="false">C++</button>
            </div>
          </div>
          <div class="composer-box">
            <label class="sr-only" for="input-code">Describe the ROS 2 package</label>
            <textarea id="input-code" rows="2" placeholder="e.g. Stop the robot when the laser sees something closer than 0.5 m…"></textarea>
            <button class="send" type="submit" aria-label="Write package" title="Write package (Enter)">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </button>
          </div>
        </form>
      </section>
    </main>
  </div>

  <!-- Beginner tour -->
  <dialog id="tour" class="dialog tour" aria-labelledby="tour-title">
    <div class="tour-top">
      <img src="/static/app/brand/rosdiff-64.png" alt="" width="30" height="30">
      <span class="tour-count" id="tour-count">1 / 10</span>
      <button class="icon-btn" id="tour-close" aria-label="Close the tour">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7 7 17"/></svg>
      </button>
    </div>
    <div id="tour-slide" class="tour-slide" aria-live="polite"></div>
    <div class="tour-dots" id="tour-dots" aria-hidden="true"></div>
    <div class="tour-actions">
      <button class="btn btn-ghost" id="tour-back" type="button">Back</button>
      <button class="btn btn-primary" id="tour-next" type="button">Next</button>
    </div>
  </dialog>

  <!-- Usage -->
  <dialog id="usage" class="dialog" aria-labelledby="usage-title">
    <h2 id="usage-title">Your RosDiff usage</h2>
    <div id="usage-body"></div>
    <form method="dialog"><button class="btn btn-primary">Close</button></form>
  </dialog>

  <!-- Feedback note -->
  <dialog id="fb-dialog" class="dialog" aria-labelledby="fb-title">
    <form id="fb-form">
      <h2 id="fb-title">Tell us what went wrong or how to improve</h2>
      <p class="muted small">Optional, but it helps us a lot.</p>
      <label class="sr-only" for="fb-note">Your feedback</label>
      <textarea id="fb-note" class="textarea" rows="4" maxlength="4000" placeholder="e.g. The boxes were floating above the floor…"></textarea>
      <div class="dialog-actions">
        <button class="btn btn-ghost" type="button" id="fb-skip">Skip</button>
        <button class="btn btn-primary" type="submit">Send</button>
      </div>
    </form>
  </dialog>

  <div class="toast" id="toast" role="status" hidden></div>
  <script src="/static/app/app.js" type="module"></script>
</body>
</html>