Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Codebase Oracle</title> | |
| <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=JetBrains+Mono:wght@300;400;500;700&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="static/style.css" /> | |
| </head> | |
| <body> | |
| <!-- ── Top Bar ─────────────────────────────────────────────────────────── --> | |
| <header class="topbar"> | |
| <div class="topbar__brand"> | |
| <span class="topbar__icon">⬡</span> | |
| <span class="topbar__title">Codebase Oracle</span> | |
| </div> | |
| <div class="topbar__index"> | |
| <input | |
| id="pathInput" | |
| class="path-input" | |
| type="text" | |
| placeholder="/absolute/path/to/your/codebase" | |
| autocomplete="off" | |
| spellcheck="false" | |
| /> | |
| <button id="indexBtn" class="btn btn--primary"> | |
| <span id="indexBtnText">Index</span> | |
| <span id="indexSpinner" class="spinner hidden"></span> | |
| </button> | |
| </div> | |
| <div class="topbar__zip"> | |
| <label class="btn btn--zip" for="zipInput" id="zipLabel"> | |
| <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg> | |
| <span id="zipLabelText">Upload ZIP</span> | |
| </label> | |
| <input id="zipInput" type="file" accept=".zip" style="display:none" /> | |
| <button id="zipIndexBtn" class="btn btn--primary"> | |
| <span id="zipIndexBtnText">Index ZIP</span> | |
| <span id="zipIndexSpinner" class="spinner hidden"></span> | |
| </button> | |
| </div> | |
| <div id="statusBadge" class="status-badge status-badge--idle"> | |
| <span class="status-badge__dot"></span> | |
| <span id="statusText">Not indexed</span> | |
| </div> | |
| </header> | |
| <!-- ── Main Layout ─────────────────────────────────────────────────────── --> | |
| <div class="workspace"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar"> | |
| <div class="sidebar__header"> | |
| <span class="sidebar__label">Explorer</span> | |
| <span id="chunkCount" class="sidebar__count"></span> | |
| </div> | |
| <div id="treeContainer" class="tree-container"> | |
| <div class="tree-placeholder"> | |
| <span class="tree-placeholder__icon">⬡</span> | |
| <p>Index a codebase to explore its structure</p> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Chat Area --> | |
| <main class="chat"> | |
| <!-- Query Type Selector --> | |
| <div class="query-controls"> | |
| <div class="query-type-group" id="queryTypeGroup"> | |
| <button class="query-type-btn active" data-type="micro">Micro</button> | |
| <button class="query-type-btn" data-type="macro">Macro</button> | |
| <button class="query-type-btn" data-type="cross_module">Cross-Module</button> | |
| </div> | |
| <!-- Macro subtype (shown only when macro selected) --> | |
| <div id="macroSubtypes" class="macro-subtypes hidden"> | |
| <button class="subtype-btn active" data-subtype="overall_architecture">Architecture</button> | |
| <button class="subtype-btn" data-subtype="module_responsibility">Module</button> | |
| <button class="subtype-btn" data-subtype="data_flow">Data Flow</button> | |
| </div> | |
| <!-- Contextual inputs --> | |
| <div id="contextInputs" class="context-inputs"> | |
| <input id="functionInput" class="context-field" type="text" placeholder="Function name" autocomplete="off" spellcheck="false" /> | |
| <input id="classInput" class="context-field" type="text" placeholder="Class name (optional)" autocomplete="off" spellcheck="false" /> | |
| <input id="moduleInput" class="context-field hidden" type="text" placeholder="Module name" autocomplete="off" spellcheck="false" /> | |
| </div> | |
| </div> | |
| <!-- Messages --> | |
| <div id="messages" class="messages"> | |
| <div class="message message--system"> | |
| <div class="message__content"> | |
| <p>Welcome to <strong>Codebase Oracle</strong>. Index a codebase using the path bar above, then ask anything about it.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Bar --> | |
| <div class="input-bar"> | |
| <textarea | |
| id="queryInput" | |
| class="query-textarea" | |
| placeholder="Ask anything about the codebase…" | |
| rows="1" | |
| spellcheck="false" | |
| ></textarea> | |
| <button id="sendBtn" class="btn btn--send" disabled> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <line x1="22" y1="2" x2="11" y2="13"></line> | |
| <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> | |
| </svg> | |
| </button> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> | |
| <script src="static/app.js"></script> | |
| </body> | |
| </html> |