index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Intent Demo</title>
    <style>
      body { font-family: system-ui, sans-serif; max-width: 600px; margin: 2rem auto; padding: 0 1rem; line-height: 1.5; }
      h1 { font-size: 1.25rem; margin-bottom: 0.5rem; }
      label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
      input { width: 100%; box-sizing: border-box; padding: 0.5rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; }
      .ask-group { margin-bottom: 1rem; }
      button { margin-right: 0.5rem; margin-bottom: 0.5rem; padding: 0.5rem 1rem; font-size: 1rem; cursor: pointer; border: 1px solid #aaa; border-radius: 4px; background: #fff; }
      button.primary { font-weight: 700; background: #1a73e8; color: #fff; border-color: #1a73e8; }
      button:disabled { opacity: 0.5; cursor: not-allowed; }
      output { display: block; margin-top: 0.5rem; font-style: italic; color: #555; }
      #team-info { margin-top: 1rem; padding: 0.75rem; background: #e8f0fe; border-radius: 4px; font-size: 0.9rem; }
      #diagnostics { margin-top: 2rem; padding: 0.75rem; background: #f5f5f5; border-radius: 4px; font-size: 0.8rem; font-family: monospace; white-space: pre-wrap; }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <div id="team-info"></div>
    <div id="diagnostics"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>