| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Forge</title> |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><rect width=%2224%22 height=%2224%22 rx=%225%22 fill=%22%231c1917%22/><path d=%22M6 17 L12 7 L18 17%22 stroke=%22%23c69a4e%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/></svg>" /> |
| <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=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" /> |
| <link rel="stylesheet" href="/styles.css" /> |
| </head> |
| <body> |
|
|
| <header class="topbar"> |
| <div class="brand"> |
| <svg class="brand__mark" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <rect x="1" y="1" width="30" height="30" rx="7" stroke="var(--brass)" stroke-width="1.4"/> |
| <path d="M9 22 L16 9 L23 22" stroke="var(--brass)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| <circle cx="16" cy="17" r="1.6" fill="var(--brass)"/> |
| </svg> |
| <div class="brand__text"> |
| <h1 id="agentName">Forge</h1> |
| <p class="brand__tagline">builds its own tools, with your say-so</p> |
| </div> |
| </div> |
| <div class="model-picker"> |
| <label for="modelSelect" class="model-picker__label">model</label> |
| <select id="modelSelect" class="model-picker__select"></select> |
| </div> |
| <div class="status" id="statusPill"> |
| <span class="status__dot" id="statusDot"></span> |
| <span id="statusLabel">online</span> |
| </div> |
| <button class="bench-toggle" id="benchToggle" aria-label="Toggle toolbench"> |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M14.7 6.3a3 3 0 0 1 4 4L9 20l-4 1 1-4Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> |
| </svg> |
| <span>tools</span> |
| </button> |
| </header> |
|
|
| <main class="layout"> |
| <section class="chat"> |
| <div class="chat__log" id="log"></div> |
|
|
| <div class="thinking" id="thinking" hidden> |
| <svg class="brand__mark brand__mark--sm" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <rect x="1" y="1" width="30" height="30" rx="7" stroke="var(--brass)" stroke-width="1.4"/> |
| <path d="M9 22 L16 9 L23 22" stroke="var(--brass)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| </svg> |
| <span id="thinkingLabel">thinking</span> |
| <span class="dots"><i></i><i></i><i></i></span> |
| </div> |
|
|
| <form class="composer" id="composer"> |
| <textarea id="composerInput" placeholder="Tell Forge what you need..." rows="1"></textarea> |
| <button type="submit" id="sendBtn" aria-label="Send"> |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M4 12 L20 4 L14 20 L11 13 L4 12Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/> |
| </svg> |
| </button> |
| </form> |
| </section> |
|
|
| <aside class="toolbench" id="toolbench"> |
| <h2>Toolbench</h2> |
| <p class="toolbench__hint">Everything Forge has built, is building, or you've turned down.</p> |
| <div class="toolbench__list" id="toolList"></div> |
| </aside> |
| </main> |
|
|
| <script src="/socket.io/socket.io.js"></script> |
| <script src="/app.js"></script> |
| </body> |
| </html> |
|
|
