public/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Support Desk</title>
  <link rel="stylesheet" href="/styles.css">
  <script type="module" src="/app.js"></script>
</head>
<body>
  <header class="topbar">
    <h1>Support Desk</h1>
    <div id="whoami" hidden>
      <span id="user-name"></span>
      <button id="logout" type="button" class="link">Sign out</button>
    </div>
  </header>

  <main id="login-view" hidden>
    <form id="login-form" class="card login" novalidate>
      <h2>Sign in</h2>
      <label>Email <input name="email" type="email" autocomplete="username" required></label>
      <label>Password <input name="password" type="password" autocomplete="current-password" required></label>
      <p id="login-error" class="error" role="alert"></p>
      <button type="submit">Sign in</button>
      <p class="hint">Demo: alice@example.com / correct-horse-1</p>
    </form>
  </main>

  <main id="app-view" class="layout" hidden>
    <aside class="card">
      <h2>Your orders</h2>
      <ul id="orders" aria-label="Your orders"></ul>
    </aside>
    <section class="card chat" aria-labelledby="chat-title">
      <h2 id="chat-title">Assistant</h2>
      <div id="chat-log" role="log" aria-live="polite" aria-label="Conversation"></div>
      <p id="chat-error" class="error" role="alert" hidden>
        <span></span> <button id="retry" type="button" class="link">Retry</button>
      </p>
      <form id="chat-form">
        <label class="sr-only" for="message">Message</label>
        <textarea id="message" name="message" rows="2" maxlength="2000"
                  placeholder="Ask about an order, e.g. where is A-1002?" required></textarea>
        <button id="send" type="submit">Send</button>
        <button id="stop" type="button" hidden>Stop</button>
      </form>
    </section>
  </main>

  <dialog id="session-dialog" aria-labelledby="session-title">
    <h2 id="session-title">Your session is about to expire</h2>
    <p>You've been inactive for a while. Stay signed in?</p>
    <button id="stay" type="button">Stay signed in</button>
  </dialog>
</body>
</html>