vibespot 0.6.0 → 0.7.1

package/ui/settings.js

@@ -810,6 +810,11 @@ async function authCLI(cli, btn, apiKey) {
 // ---------------------------------------------------------------------------
 
 function getModelsForEngine(engine) {
+  // Use server-provided model catalog if available
+  if (settingsData && settingsData.models && settingsData.models[engine]) {
+    return settingsData.models[engine];
+  }
+  // Fallback to hardcoded defaults
   switch (engine) {
     case "claude-code":
       return [
@@ -819,10 +824,9 @@ function getModelsForEngine(engine) {
       ];
     case "anthropic-api":
       return [
-        { id: "claude-sonnet-4-20250514", label: "Claude Sonnet 4 (default)" },
-        { id: "claude-opus-4-20250514", label: "Claude Opus 4" },
+        { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6" },
+        { id: "claude-opus-4-6", label: "Claude Opus 4.6" },
         { id: "claude-haiku-4-5-20251001", label: "Claude Haiku 4.5" },
-        { id: "claude-sonnet-4-5-20250929", label: "Claude Sonnet 4.5" },
       ];
     case "openai-api":
       return [
@@ -834,9 +838,9 @@ function getModelsForEngine(engine) {
     case "gemini-cli":
     case "gemini-api":
       return [
-        { id: "gemini-2.0-flash", label: "Gemini 2.0 Flash (default)" },
+        { id: "gemini-2.5-flash", label: "Gemini 2.5 Flash (default)" },
         { id: "gemini-2.5-pro", label: "Gemini 2.5 Pro" },
-        { id: "gemini-2.5-flash", label: "Gemini 2.5 Flash" },
+        { id: "gemini-2.0-flash", label: "Gemini 2.0 Flash" },
       ];
     case "codex-cli":
       return [
@@ -852,7 +856,7 @@ function getModelsForEngine(engine) {
 function getCurrentModel(engine, config) {
   switch (engine) {
     case "claude-code": return config.claudeCodeModel || "sonnet";
-    case "anthropic-api": return config.anthropicApiModel || "claude-sonnet-4-20250514";
+    case "anthropic-api": return config.anthropicApiModel || "claude-sonnet-4-6";
     case "openai-api": return config.openaiApiModel || "gpt-4o";
     default: return null;
   }
@@ -910,7 +914,6 @@ function escSettings(str) {
 // Event listeners
 // ---------------------------------------------------------------------------
 
-document.getElementById("btn-settings").addEventListener("click", openSettings);
 document.getElementById("settings-close").addEventListener("click", closeSettings);
 document.getElementById("settings-overlay").addEventListener("click", (e) => {
   if (e.target.id === "settings-overlay") closeSettings();

package/ui/setup.js

@@ -225,6 +225,15 @@ function populateProjectRail(info) {
       <span class="project-rail__item-meta">${meta}</span>`;
     item.appendChild(infoEl);
 
+    // Double-click on name to rename
+    const nameSpan = infoEl.querySelector(".project-rail__item-name");
+    if (nameSpan) {
+      nameSpan.addEventListener("dblclick", (e) => {
+        e.stopPropagation();
+        startInlineRename(nameSpan, p);
+      });
+    }
+
     // Delete button (visible when expanded + hover)
     const delBtn = document.createElement("button");
     delBtn.className = "project-rail__item-delete";
@@ -263,8 +272,12 @@ function populateProjectRail(info) {
       railTooltip.classList.remove("project-rail__tooltip--visible");
     });
 
-    // Click to open
+    // Click to open (blocked while AI is generating)
     item.addEventListener("click", () => {
+      if (typeof isStreaming !== "undefined" && isStreaming) {
+        showError("Cannot switch projects while AI is generating.");
+        return;
+      }
       if (p.sessionId) resumeSession(p.sessionId);
       else openTheme(p.name);
     });
@@ -287,6 +300,84 @@ document.getElementById("project-rail-add")?.addEventListener("click", () => {
   showSetup();
 });
 
+// ---------------------------------------------------------------------------
+// Inline rename
+// ---------------------------------------------------------------------------
+
+function startInlineRename(nameSpan, project) {
+  if (nameSpan.contentEditable === "true") return; // already editing
+
+  const oldName = project.name;
+  nameSpan.contentEditable = "true";
+  nameSpan.classList.add("project-rail__item-name--editing");
+  nameSpan.focus();
+
+  // Select all text
+  const range = document.createRange();
+  range.selectNodeContents(nameSpan);
+  const sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+
+  function commit() {
+    nameSpan.contentEditable = "false";
+    nameSpan.classList.remove("project-rail__item-name--editing");
+
+    const newName = nameSpan.textContent.trim();
+    if (!newName || newName === oldName) {
+      nameSpan.textContent = oldName;
+      return;
+    }
+
+    fetch("/api/themes/rename", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ sessionId: project.sessionId, newName }),
+    })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.ok) {
+          // Update the in-memory project name + UI
+          project.name = data.newName;
+          nameSpan.textContent = data.newName;
+          const item = nameSpan.closest(".project-rail__item");
+          if (item) {
+            item.dataset.name = data.newName;
+            const bubble = item.querySelector(".project-rail__item-bubble");
+            if (bubble) bubble.textContent = data.newName.charAt(0).toUpperCase();
+          }
+          // Update topbar if this is the active project
+          if (currentAppTheme === oldName) {
+            currentAppTheme = data.newName;
+            const themeNameEl = document.getElementById("theme-name");
+            if (themeNameEl) themeNameEl.textContent = data.newName;
+            window.location.hash = "#/app/" + encodeURIComponent(data.newName);
+          }
+          updateRailActive();
+        } else {
+          nameSpan.textContent = oldName;
+          showError(data.error || "Rename failed");
+        }
+      })
+      .catch(() => {
+        nameSpan.textContent = oldName;
+        showError("Rename failed");
+      });
+  }
+
+  nameSpan.addEventListener("blur", commit, { once: true });
+  nameSpan.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      nameSpan.blur();
+    }
+    if (e.key === "Escape") {
+      nameSpan.textContent = oldName;
+      nameSpan.blur();
+    }
+  });
+}
+
 // ---------------------------------------------------------------------------
 // Delete project confirmation
 // ---------------------------------------------------------------------------
@@ -714,20 +805,19 @@ function showSetup() {
   initSetup();
 }
 
-// Logo click → go back to dashboard (from chat) or setup (from dashboard)
+// App back button → go back to dashboard from chat
+document.getElementById("app-back")?.addEventListener("click", () => {
+  if (currentAppTheme && typeof showDashboard === "function") {
+    appScreen.classList.add("hidden");
+    showDashboard(currentAppTheme);
+  }
+});
+
+// Logo click → go back to setup (from dashboard)
 document.querySelectorAll(".topbar__brand").forEach((el) => {
   el.style.cursor = "pointer";
   el.addEventListener("click", () => {
     const dashEl = document.getElementById("dashboard-screen");
-    // From chat → go to dashboard
-    if (!appScreen.classList.contains("hidden") && currentAppTheme) {
-      if (typeof showDashboard === "function") {
-        appScreen.classList.add("hidden");
-        showDashboard(currentAppTheme);
-        return;
-      }
-    }
-    // From dashboard → go to setup
     if (dashEl && !dashEl.classList.contains("hidden")) {
       showSetup();
       return;

package/ui/styles.css

@@ -353,6 +353,67 @@ body { display: flex; }
   margin: 0 auto;
 }
 
+.dashboard__theme-heading {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text);
+  margin: 0 0 24px 0;
+  letter-spacing: -0.5px;
+  cursor: default;
+}
+
+.dashboard__theme-heading--editing {
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+  padding: 2px 8px;
+  outline: none;
+  cursor: text;
+}
+
+.dashboard__theme-path {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: -16px 0 24px 0;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-family: "SF Mono", "Fira Code", "Fira Mono", monospace;
+}
+
+.dashboard__theme-path-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: all;
+  cursor: text;
+}
+
+.dashboard__download-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+  padding: 4px 10px;
+  background: var(--surface-2);
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.dashboard__download-btn:hover {
+  color: var(--text);
+  border-color: var(--text-muted);
+}
+
+.dashboard__download-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 .dashboard__section {
   margin-bottom: 36px;
 }
@@ -475,6 +536,17 @@ body { display: flex; }
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  cursor: default;
+}
+
+.dashboard__template-label--editing {
+  background: var(--bg);
+  border: 1px solid var(--accent);
+  border-radius: 3px;
+  padding: 0 4px;
+  outline: none;
+  overflow: visible;
+  cursor: text;
 }
 
 .dashboard__template-meta {
@@ -702,10 +774,6 @@ body { display: flex; }
   background: var(--accent-gradient);
   border-radius: 8px;
   color: var(--text-on-accent);
-  font-family: var(--font-display);
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 1;
 }
 
 .topbar__brand-name {
@@ -726,6 +794,15 @@ body { display: flex; }
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 180px;
+  cursor: default;
+}
+
+.topbar__project-pill--editing {
+  border-color: var(--accent);
+  color: var(--text);
+  outline: none;
+  overflow: visible;
+  cursor: text;
 }
 
 .topbar__center {
@@ -1532,22 +1609,6 @@ body { display: flex; }
   word-wrap: break-word;
 }
 
-/* Streaming cursor */
-.chat-msg--streaming .chat-msg__bubble::after {
-  content: "";
-  display: inline-block;
-  width: 6px;
-  height: 14px;
-  background: var(--accent);
-  border-radius: 1px;
-  margin-left: 2px;
-  vertical-align: text-bottom;
-  animation: cursorBlink 0.8s ease infinite;
-}
-@keyframes cursorBlink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.2; }
-}
 
 .chat-msg__bubble p { margin-bottom: 8px; }
 .chat-msg__bubble p:last-child { margin-bottom: 0; }
@@ -2481,6 +2542,20 @@ body { display: flex; }
   padding: 8px;
 }
 
+.history__toggle {
+  text-align: center;
+  padding: 8px 16px 4px;
+}
+
+.history__toggle-btn {
+  background: none;
+  border: none;
+  color: var(--accent);
+  font-size: 12px;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 .history__loading,
 .history__empty {
   color: var(--text-dim);
@@ -2802,17 +2877,18 @@ body { display: flex; }
 }
 
 .project-rail__footer {
-  display: none;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   margin-top: auto;
   border-top: 1px solid var(--border);
   padding: 8px;
   flex-shrink: 0;
+  align-items: center;
 }
 
 .project-rail--expanded .project-rail__footer {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+  align-items: stretch;
 }
 
 .project-rail__settings-btn {
@@ -2948,6 +3024,17 @@ body { display: flex; }
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--text);
+  cursor: default;
+}
+
+.project-rail__item-name--editing {
+  background: var(--bg);
+  border: 1px solid var(--accent);
+  border-radius: 3px;
+  padding: 0 4px;
+  outline: none;
+  overflow: visible;
+  cursor: text;
 }
 
 .project-rail__item-meta {

package/ui/upload-panel.js

@@ -354,11 +354,23 @@ function setUploadState(state, data) {
   }
 }
 
+let _logBuffer = "";
+let _logFlushScheduled = false;
+
 function appendUploadLog(text) {
-  const log = document.getElementById("upload-log");
-  if (!log) return;
-  log.textContent += text;
-  log.scrollTop = log.scrollHeight;
+  _logBuffer += text;
+  if (!_logFlushScheduled) {
+    _logFlushScheduled = true;
+    requestAnimationFrame(() => {
+      _logFlushScheduled = false;
+      const log = document.getElementById("upload-log");
+      if (log) {
+        log.textContent += _logBuffer;
+        log.scrollTop = log.scrollHeight;
+      }
+      _logBuffer = "";
+    });
+  }
 }
 
 function fixUploadWithAI() {