vibespot 1.6.5 → 1.8.0

package/ui/setup.js

@@ -136,19 +136,27 @@ async function initSetup() {
     // Show "Continue where you left off" cards above the create options
     populateRecentProjects(info);
 
-    // Auto-select engine if available but not yet chosen
+    // Auto-select engine if available but not yet chosen. Guarded on its own:
+    // a transient failure here just leaves the "no engine" alert visible —
+    // it must not abort the rest of setup rendering.
     if (info.availableEngines && info.availableEngines.length > 0 && !info.activeEngine) {
       const engine = info.availableEngines[0];
-      await fetch("/api/settings/engine", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ engine }),
-      });
-      info.activeEngine = engine;
-      info.aiAvailable = true;
-      // Update statusbar
-      const statusEngine = document.getElementById("status-engine");
-      if (statusEngine) statusEngine.textContent = ENGINE_DISPLAY_NAMES[engine] || engine;
+      try {
+        const engineRes = await fetch("/api/settings/engine", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ engine }),
+        });
+        if (engineRes.ok) {
+          info.activeEngine = engine;
+          info.aiAvailable = true;
+          // Update statusbar
+          const statusEngine = document.getElementById("status-engine");
+          if (statusEngine) statusEngine.textContent = ENGINE_DISPLAY_NAMES[engine] || engine;
+        }
+      } catch (err) {
+        console.warn("[setup] engine auto-select failed", err);
+      }
     }
 
     // Show environment alerts
@@ -1069,25 +1077,48 @@ async function handleCliAction(engineId, action, btn) {
     const data = await res.json();
     if (data.jobId) {
       // Poll until complete
-      await pollJob(data.jobId);
+      await pollJobUntilDone(data.jobId);
     }
     // Refresh walkthrough to show updated status
     showWalkthrough();
-  } catch {
+  } catch (err) {
     btn.disabled = false;
     btn.textContent = origText;
+    await vibeAlert((action === "install" ? "Install failed: " : "Sign-in failed: ") + (err.message || err), "Error");
   }
 }
 
-async function pollJob(jobId) {
-  for (let i = 0; i < 60; i++) {
-    await new Promise((r) => setTimeout(r, 2000));
+// Poll a background job until it finishes. Resolves with the job payload on
+// success; throws on failure, on a vanished job (404 — the server restarted
+// or GC'd it, so it will never complete), and on timeout — so callers can't
+// spin forever on a dead job. Also used by upload-panel.js.
+// NOT named pollJob: settings.js declares a legacy callback-style pollJob in
+// the same global scope and loads later, so that name gets shadowed (VIB-1931).
+async function pollJobUntilDone(jobId, { timeoutMs = 5 * 60 * 1000, intervalMs = 2000 } = {}) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    await new Promise((r) => setTimeout(r, intervalMs));
+    let res;
     try {
-      const res = await fetch("/api/settings/job/" + jobId);
-      const data = await res.json();
-      if (data.status === "completed" || data.status === "failed") return;
-    } catch { return; }
+      res = await fetch("/api/settings/job/" + jobId);
+    } catch {
+      continue; // transient network error — keep polling until the deadline
+    }
+    if (res.status === 404) {
+      throw new Error("The background job was lost (server restarted?). Please try again.");
+    }
+    let data;
+    try {
+      data = await res.json();
+    } catch {
+      continue;
+    }
+    if (data.status === "completed") return data;
+    if (data.status === "failed") {
+      throw new Error(data.output ? String(data.output).slice(-500) : "The background job failed.");
+    }
   }
+  throw new Error("Timed out waiting for the job to finish. Please try again.");
 }
 
 // ---------------------------------------------------------------------------
@@ -2123,6 +2154,17 @@ document.getElementById("figma-extract-btn")?.addEventListener("click", async ()
       body: JSON.stringify({ url }),
     });
 
+    // Non-streaming failure (auth gate, 4xx/5xx JSON error) — surface it
+    // instead of letting getReader() throw an opaque TypeError.
+    if (!res.ok || !res.body) {
+      let msg = "Extraction failed (" + res.status + ")";
+      try {
+        const errData = await res.json();
+        if (errData.error) msg = errData.error;
+      } catch { /* non-JSON error body */ }
+      throw new Error(msg);
+    }
+
     const reader = res.body.getReader();
     const decoder = new TextDecoder();
     let buffer = "";
@@ -2280,6 +2322,17 @@ async function startFigmaImport(extractionId, themeName, useAssets = true) {
       body: JSON.stringify({ extractionId, themeName, useAssets }),
     });
 
+    // Non-streaming failure (auth gate, 4xx/5xx JSON error) — surface it
+    // instead of letting getReader() throw an opaque TypeError.
+    if (!res.ok || !res.body) {
+      let msg = "Conversion failed (" + res.status + ")";
+      try {
+        const errData = await res.json();
+        if (errData.error) msg = errData.error;
+      } catch { /* non-JSON error body */ }
+      throw new Error(msg);
+    }
+
     const reader = res.body.getReader();
     const decoder = new TextDecoder();
     let buffer = "";

package/ui/styles.css

@@ -8216,3 +8216,427 @@ body { display: flex; }
     display: none;
   }
 }
+
+/* ---------------------------------------------------------------------------
+   Checkpoint gate card (VIB-1877) — design preview before the module build.
+   --------------------------------------------------------------------------- */
+.checkpoint {
+  border: 1px solid var(--border-hover);
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  max-width: 520px;
+}
+.checkpoint__head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.checkpoint__badge {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent);
+  background: var(--accent-dim);
+  border-radius: var(--radius-pill);
+  padding: 3px 9px;
+}
+.checkpoint__headline {
+  font-family: var(--font-display);
+  font-size: var(--text-md);
+  color: var(--text);
+}
+.checkpoint__hero {
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  background: #000;
+}
+.checkpoint__hero-frame {
+  display: block;
+  width: 100%;
+  height: 230px;
+  border: 0;
+}
+.checkpoint__tokens {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+  align-items: flex-start;
+}
+.checkpoint__palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  flex: 1 1 220px;
+}
+.checkpoint__swatch {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+}
+.checkpoint__swatch-chip {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid var(--border-hover);
+  display: inline-block;
+}
+.checkpoint__type {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.checkpoint__type-row {
+  font-size: var(--text-lg);
+  color: var(--text);
+  line-height: 1.2;
+}
+.checkpoint__type-row--body {
+  font-size: var(--text-base);
+  color: var(--text-dim);
+}
+.checkpoint__muted { color: var(--text-dim); font-size: var(--text-sm); }
+.checkpoint__meta { font-size: var(--text-sm); color: var(--text-dim); }
+.checkpoint__cost { color: var(--text-dim); }
+.checkpoint__steer-input {
+  width: 100%;
+  resize: vertical;
+  background: var(--bg-input);
+  border: 1px solid var(--border-hover);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: var(--text-base);
+  padding: var(--space-2);
+}
+.checkpoint__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+.checkpoint__btn { font-size: var(--text-base); }
+.checkpoint__btn:disabled { opacity: 0.5; cursor: default; }
+
+/* Structure checkpoint (VIB-1879) — editable module outline. */
+.checkpoint__narrative {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+.checkpoint__outline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.checkpoint__row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 6px 8px;
+}
+.checkpoint__row-move {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.checkpoint__row-btn {
+  border: 0;
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  line-height: 1;
+  font-size: 9px;
+  padding: 1px 2px;
+  border-radius: 3px;
+}
+.checkpoint__row-btn:hover { color: var(--text); background: var(--bg-elevated); }
+.checkpoint__row-main {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.checkpoint__row-name {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-family: var(--font-mono, monospace);
+  font-size: var(--text-base);
+  padding: 2px 4px;
+  width: 100%;
+}
+.checkpoint__row-name:hover { border-color: var(--border-hover); }
+.checkpoint__row-name:focus {
+  outline: none;
+  border-color: var(--accent);
+  background: var(--bg);
+}
+.checkpoint__row-desc {
+  font-size: var(--text-xs);
+  color: var(--text-dim);
+  padding: 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.checkpoint__row-remove {
+  border: 0;
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: var(--text-base);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  flex: 0 0 auto;
+}
+.checkpoint__row-remove:hover { color: var(--danger, #e5484d); background: var(--bg-elevated); }
+.checkpoint__add {
+  align-self: flex-start;
+  font-size: var(--text-sm);
+}
+
+/* One-shot send button — slightly dimmer than the primary send. */
+.chat__send--oneshot {
+  opacity: 0.7;
+}
+.chat__send--oneshot:hover:not(:disabled) {
+  opacity: 1;
+}
+
+/* Brand-intake gate (VIB-1878) — front-of-flow ask-back card. */
+.brand-intake__choices {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin: var(--space-3) 0;
+}
+.brand-intake__choice {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  text-align: left;
+  padding: var(--space-3);
+  height: auto;
+}
+.brand-intake__choice-title { font-weight: 600; }
+.brand-intake__choice-hint { font-size: var(--text-sm); opacity: 0.75; }
+.brand-intake__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin: var(--space-3) 0;
+}
+.brand-intake__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.brand-intake__label { font-size: var(--text-sm); font-weight: 600; }
+.brand-intake__input {
+  width: 100%;
+  font-family: inherit;
+  font-size: var(--text-base);
+  padding: var(--space-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text);
+  resize: vertical;
+}
+.brand-intake__form-actions {
+  display: flex;
+  gap: var(--space-2);
+  margin-top: var(--space-1);
+}
+.brand-intake__top-actions { margin-top: var(--space-2); }
+
+/* ===========================================================================
+   "What's new" release dialog (VIB-1886)
+   One-time post-upgrade modal. Reuses overlay/dialog tokens — no one-off values.
+   =========================================================================== */
+.whatsnew-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-bg);
+  z-index: var(--z-confirm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-5);
+  animation: fadeIn var(--duration-fast) var(--ease-default);
+}
+
+.whatsnew-dialog {
+  position: relative;
+  background: var(--bg-panel-solid);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  width: 460px;
+  max-width: 100%;
+  max-height: calc(100vh - var(--space-8));
+  overflow-y: auto;
+  box-shadow: var(--shadow-xl);
+  animation: whatsnewIn var(--duration-slow) var(--ease-spring);
+}
+
+@keyframes whatsnewIn {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to   { opacity: 1; transform: none; }
+}
+
+.whatsnew__close {
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--ease-default),
+              background var(--duration-fast) var(--ease-default);
+}
+.whatsnew__close:hover { color: var(--text); background: var(--bg-hover); }
+.whatsnew__close:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
+
+/* Brand lockup — accent star on its dark container (brand rule: container intact) */
+.whatsnew__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-5);
+}
+.whatsnew__logo {
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.whatsnew__wordmark {
+  font-family: var(--font-display);
+  font-size: var(--text-lg);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-tight);
+  color: var(--text);
+}
+.whatsnew__version {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-wide);
+  color: var(--accent);
+  background: var(--accent-tint);
+  border: 1px solid var(--accent-dim);
+  border-radius: var(--radius-pill);
+  padding: 2px var(--space-2);
+}
+
+.whatsnew__title {
+  font-family: var(--font-display);
+  font-size: var(--text-2xl);
+  font-weight: var(--weight-bold);
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+  color: var(--text);
+  margin: 0 0 var(--space-1);
+}
+.whatsnew__date {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  margin: 0 0 var(--space-5);
+}
+
+.whatsnew__list {
+  list-style: none;
+  margin: 0 0 var(--space-6);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.whatsnew__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+}
+.whatsnew__marker {
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-tint);
+  border-radius: var(--radius-sm);
+}
+.whatsnew__marker svg { width: 16px; height: 16px; }
+.whatsnew__item-text { display: flex; flex-direction: column; gap: 2px; }
+.whatsnew__item-title {
+  font-size: var(--text-md);
+  font-weight: var(--weight-semibold);
+  color: var(--text);
+  line-height: var(--leading-tight);
+}
+.whatsnew__item-body {
+  font-size: var(--text-base);
+  line-height: var(--leading-relaxed);
+  color: var(--text-dim);
+}
+
+.whatsnew__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-3);
+}
+.whatsnew__actions .btn { text-decoration: none; }
+
+/* Narrow widths — modal becomes a bottom-anchored sheet, actions stack full-width */
+@media (max-width: 520px) {
+  .whatsnew-overlay { align-items: flex-end; padding: 0; }
+  .whatsnew-dialog {
+    width: 100%;
+    max-width: 100%;
+    max-height: 90vh;
+    padding: var(--space-5);
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    border-bottom: none;
+    animation: whatsnewSheetIn var(--duration-slow) var(--ease-out);
+  }
+  .whatsnew__title { font-size: var(--text-xl); }
+  .whatsnew__actions { flex-direction: column-reverse; }
+  .whatsnew__actions .btn { width: 100%; }
+}
+
+@keyframes whatsnewSheetIn {
+  from { opacity: 0; transform: translateY(100%); }
+  to   { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .whatsnew-overlay,
+  .whatsnew-dialog { animation: none; }
+}

package/ui/upload-panel.js

@@ -116,16 +116,15 @@ function showHubSpotSetupDialog(mode) {
           });
           const data = await res.json();
           if (data.jobId) {
-            // Poll until done
-            for (let i = 0; i < 60; i++) {
-              await new Promise((r) => setTimeout(r, 2000));
-              const jr = await fetch("/api/settings/job/" + data.jobId).then((r) => r.json());
-              if (jr.status === "completed") { close(true); return; }
-              if (jr.status === "failed") { close(false); return; }
-            }
+            // pollJobUntilDone (setup.js) resolves on success and throws on
+            // failure / lost job (404) / timeout.
+            await pollJobUntilDone(data.jobId);
+            close(true);
+            return;
           }
           close(false);
-        } catch {
+        } catch (err) {
+          await vibeAlert("Install failed: " + (err.message || err), "Error");
           close(false);
         }
       });