server and ui fixed

ui/index.html

@@ -27,14 +27,24 @@
         autocomplete="off"
         spellcheck="false"
       />
-      <label class="btn btn--secondary" for="zipInput" id="zipLabel">Upload ZIP</label>
-      <input id="zipInput" type="file" accept=".zip" style="display:none" />
       <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>

ui/static/app.js

@@ -1,6 +1,6 @@
 /* app.js — Codebase Oracle frontend logic */
 
-const API = 'http://localhost:8000';
+const API = window.location.origin;
 
 // ── State ─────────────────────────────────────────────────────────────────────
 const state = {
@@ -16,8 +16,11 @@ const $ = id => document.getElementById(id);
 
 const dom = {
   pathInput:     $('pathInput'),
+  zipLabel:      $('zipLabelText'),
   zipInput:      $('zipInput'),
-  zipLabel:      $('zipLabel'),
+  zipIndexBtn:   $('zipIndexBtn'),
+  zipIndexBtnText: $('zipIndexBtnText'),
+  zipIndexSpinner: $('zipIndexSpinner'),
   indexBtn:      $('indexBtn'),
   indexBtnText:  $('indexBtnText'),
   indexSpinner:  $('indexSpinner'),
@@ -63,16 +66,15 @@ function setStatus(type, text) {
 dom.zipInput.addEventListener('change', () => {
   if (dom.zipInput.files.length > 0) {
     dom.zipLabel.textContent = dom.zipInput.files[0].name;
+    document.getElementById('zipLabel').classList.add('has-file');
     dom.pathInput.value = '';
   }
 });
 
 dom.indexBtn.addEventListener('click', async () => {
-  const path    = dom.pathInput.value.trim();
-  const zipFile = dom.zipInput.files[0];
-
-  if (!path && !zipFile) {
-    appendMessage('error', null, '❌ Provide an absolute path or upload a ZIP file.');
+  const path = dom.pathInput.value.trim();
+  if (!path) {
+    appendMessage('error', null, '❌ Provide an absolute path to index.');
     return;
   }
 
@@ -82,32 +84,21 @@ dom.indexBtn.addEventListener('click', async () => {
   setStatus('indexing', 'Indexing…');
 
   try {
-    let res, data;
-
-    if (zipFile) {
-      const form = new FormData();
-      form.append('file', zipFile);
-      res  = await fetch(`${API}/upload-index`, { method: 'POST', body: form });
-      data = await res.json();
-    } else {
-      res  = await fetch(`${API}/index`, {
-        method:  'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body:    JSON.stringify({ root_path: path }),
-      });
-      data = await res.json();
-    }
-
+    const res  = await fetch(`${API}/index`, {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ root_path: path }),
+    });
+    const data = await res.json();
     if (!res.ok) throw new Error(data.detail || 'Indexing failed');
 
-    const label = zipFile ? zipFile.name : path;
     state.indexed = true;
     setStatus('ready', `Ready · ${data.total_chunks} chunks`);
     dom.chunkCount.textContent = `${data.total_chunks} chunks`;
     dom.sendBtn.disabled = false;
 
     appendMessage('system', null,
-      `✔ Indexed **${label}**\n\n` +
+      `✔ Indexed **${path}**\n\n` +
       `| Metric | Value |\n|--------|-------|\n` +
       `| Class chunks | ${data.class_chunks} |\n` +
       `| Function chunks | ${data.function_chunks} |\n` +
@@ -115,7 +106,6 @@ dom.indexBtn.addEventListener('click', async () => {
       `| Graph nodes | ${data.graph_nodes} |\n` +
       `| Graph edges | ${data.graph_edges} |`
     );
-
     loadTree();
 
   } catch (err) {
@@ -125,7 +115,53 @@ dom.indexBtn.addEventListener('click', async () => {
     dom.indexBtn.disabled = false;
     dom.indexBtnText.classList.remove('hidden');
     dom.indexSpinner.classList.add('hidden');
+  }
+});
+
+dom.zipIndexBtn.addEventListener('click', async () => {
+  const zipFile = dom.zipInput.files[0];
+  if (!zipFile) {
+    appendMessage('error', null, '❌ Please upload a ZIP file first.');
+    return;
+  }
+
+  dom.zipIndexBtn.disabled = true;
+  dom.zipIndexBtnText.classList.add('hidden');
+  dom.zipIndexSpinner.classList.remove('hidden');
+  setStatus('indexing', 'Indexing…');
+
+  try {
+    const form = new FormData();
+    form.append('file', zipFile);
+    const res  = await fetch(`${API}/upload-index`, { method: 'POST', body: form });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.detail || 'Indexing failed');
+
+    state.indexed = true;
+    setStatus('ready', `Ready · ${data.total_chunks} chunks`);
+    dom.chunkCount.textContent = `${data.total_chunks} chunks`;
+    dom.sendBtn.disabled = false;
+
+    appendMessage('system', null,
+      `✔ Indexed **${zipFile.name}**\n\n` +
+      `| Metric | Value |\n|--------|-------|\n` +
+      `| Class chunks | ${data.class_chunks} |\n` +
+      `| Function chunks | ${data.function_chunks} |\n` +
+      `| Total chunks | ${data.total_chunks} |\n` +
+      `| Graph nodes | ${data.graph_nodes} |\n` +
+      `| Graph edges | ${data.graph_edges} |`
+    );
+    loadTree();
+
+  } catch (err) {
+    setStatus('error', 'Error');
+    appendMessage('error', null, `❌ ${err.message}`);
+  } finally {
+    dom.zipIndexBtn.disabled = false;
+    dom.zipIndexBtnText.classList.remove('hidden');
+    dom.zipIndexSpinner.classList.add('hidden');
     dom.zipLabel.textContent = 'Upload ZIP';
+    document.getElementById('zipLabel').classList.remove('has-file');
     dom.zipInput.value = '';
   }
 });

ui/static/style.css

@@ -111,6 +111,31 @@ html, body {
 
 .path-input::placeholder { color: var(--text-muted); }
 
+.topbar__zip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 16px;
+  border-left: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.btn--zip {
+  height: 34px;
+  padding: 0 14px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  font-family: var(--font-ui);
+  font-weight: 600;
+  font-size: 13px;
+  gap: 6px;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.btn--zip:hover { border-color: var(--accent); color: var(--text-primary); }
+.btn--zip.has-file { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
+
 /* ── Buttons ───────────────────────────────────────────────────────────────── */
 .btn {
   display: inline-flex;