vibespot 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibespot",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "AI-powered HubSpot CMS landing page builder — vibe coding & React converter",
   "type": "module",
   "bin": {
@@ -19,11 +19,18 @@
     "build": "tsup",
     "test": "vitest run",
     "test:watch": "vitest",
+    "eval": "tsx test/eval/run-eval.ts",
+    "benchmark": "tsx test/eval/benchmark.ts",
+    "prompts:pull": "tsx scripts/sync-prompts.ts",
+    "prompts:seed": "tsx scripts/sync-prompts.ts --from-local",
     "prepublishOnly": "npm run build",
-    "contact-monitor": "tsx scripts/contact-monitor.ts"
+    "contact-monitor": "tsx scripts/contact-monitor.ts",
+    "docker:publish": "scripts/docker-publish.sh",
+    "docker:publish:multi": "scripts/docker-publish.sh --multi-arch",
+    "docker:smoke": "scripts/docker-publish.sh --smoke --dry-run"
   },
   "dependencies": {
-    "@anthropic-ai/sdk": "^0.92.0",
+    "@anthropic-ai/sdk": "^0.96.0",
     "@clack/prompts": "^1.3.0",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.11",

package/ui/chat.js

@@ -29,6 +29,10 @@ let changedModulesInRun = new Set();
 let highlightOnNextModulesUpdated = false;
 let changedListClearTimer = null;
 
+// VIB-1770 — the assistant bubble of the just-finished generation, so the
+// trailing `generation_cost` event can append its estimated cost line to it.
+let lastGenerationBubbleEl = null;
+
 const messagesEl = document.getElementById("chat-messages");
 const inputEl = document.getElementById("chat-input");
 const sendBtn = document.getElementById("chat-send");
@@ -605,6 +609,9 @@ function handleWsMessage(msg) {
       if (chatHeaderTitle) chatHeaderTitle.textContent = msg.themeName || "Chat";
       if (chatHeaderContext) chatHeaderContext.textContent = msg.engine || "";
 
+      // Hydrate the per-project generation cost chip (VIB-1770)
+      updateProjectCostChip(msg.costTotal);
+
       // Restore chat history from server
       if (msg.messages && msg.messages.length > 0) {
         for (const m of msg.messages) {
@@ -744,6 +751,9 @@ function handleWsMessage(msg) {
     case "pipeline_partial":
       handlePipelinePartial(msg);
       break;
+    case "generation_cost":
+      handleGenerationCost(msg);
+      break;
     case "agentic_prompt":
       handleAgenticPrompt();
       break;
@@ -1270,6 +1280,10 @@ function handlePipelineComplete(msg) {
   }
   bubble.appendChild(stats);
 
+  // Remember this bubble so the trailing `generation_cost` event (sent right
+  // after completion) can append its cost line to the same message (VIB-1770).
+  lastGenerationBubbleEl = bubble;
+
   resetPipelineState();
 }
 
@@ -1298,6 +1312,8 @@ function handlePipelinePartial(msg) {
   stats.textContent = `${msg.succeeded.length} modules succeeded, ${msg.failed.length} failed in ${duration}`;
   bubble.appendChild(stats);
 
+  lastGenerationBubbleEl = bubble;
+
   resetPipelineState();
 }
 
@@ -1312,6 +1328,89 @@ function resetPipelineState() {
   renderChatSuggestions();
 }
 
+// ---------------------------------------------------------------------------
+// Generation cost (VIB-1770) — per-page estimate + per-project running total
+// ---------------------------------------------------------------------------
+
+// Format an estimated USD amount. Sub-dollar costs show 4 decimals so a
+// fraction of a cent is still legible; larger amounts round to cents.
+function formatUsd(usd) {
+  const n = Number(usd) || 0;
+  if (n > 0 && n < 0.01) return "$" + n.toFixed(4);
+  if (n < 1) return "$" + n.toFixed(3);
+  return "$" + n.toFixed(2);
+}
+
+function formatTokenCount(tokens) {
+  const n = Number(tokens) || 0;
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M";
+  if (n >= 1_000) return (n / 1_000).toFixed(1).replace(/\.0$/, "") + "K";
+  return String(n);
+}
+
+// Build the per-page cost summary text from a PageCost object.
+// `costComplete === false` means some model wasn't in the price table, so the
+// dollar figure is a lower bound — prefix "≥" and explain it via the title.
+function buildCostText(cost) {
+  if (!cost || !cost.calls) return null;
+  const tokens = formatTokenCount(cost.totalTokens) + " tokens";
+  if (cost.costUsd > 0 || cost.costComplete) {
+    const prefix = cost.costComplete ? "" : "≥ ";
+    return "Est. " + prefix + formatUsd(cost.costUsd) + " · " + tokens;
+  }
+  // No priced calls at all — show tokens only.
+  return tokens;
+}
+
+// Append (or replace) the cost line on a finished generation's bubble.
+function renderCostLineOnBubble(bubble, cost) {
+  if (!bubble) return;
+  const text = buildCostText(cost);
+  if (!text) return;
+  let line = bubble.querySelector(".pipeline-cost");
+  if (!line) {
+    line = document.createElement("div");
+    line.className = "pipeline-cost";
+    bubble.appendChild(line);
+  }
+  line.textContent = text;
+  if (cost.costComplete === false) {
+    line.title = "Some model calls had no price data — this is a lower-bound estimate.";
+  } else {
+    line.title = "Estimated cost of this generation. Local estimate from public model prices; not a bill.";
+  }
+}
+
+// Live `generation_cost` event — arrives right after pipeline completion.
+function handleGenerationCost(msg) {
+  if (msg.cost) renderCostLineOnBubble(lastGenerationBubbleEl, msg.cost);
+  lastGenerationBubbleEl = null;
+  updateProjectCostChip(msg.projectTotal);
+}
+
+// Update the persistent per-project cost chip in the chat header. Hidden when
+// there's no cost yet (new project / CLI engine).
+function updateProjectCostChip(total) {
+  const chip = document.getElementById("chat-cost-total");
+  if (!chip) return;
+  if (!total || !total.generations) {
+    chip.classList.add("hidden");
+    chip.textContent = "";
+    return;
+  }
+  const prefix = total.costComplete === false ? "≥ " : "";
+  chip.textContent = "Σ " + prefix + formatUsd(total.costUsd);
+  chip.title =
+    "Estimated total for this project: " +
+    formatUsd(total.costUsd) +
+    " over " +
+    total.generations +
+    " generation" + (total.generations === 1 ? "" : "s") +
+    " · " + formatTokenCount(total.totalTokens) + " tokens" +
+    (total.costComplete === false ? " (lower bound)" : "");
+  chip.classList.remove("hidden");
+}
+
 // ---------------------------------------------------------------------------
 // Smart chat suggestions — contextual next-step chips after generation
 // ---------------------------------------------------------------------------
@@ -2110,6 +2209,12 @@ function appendRestoredAssistantMessage(text, timestamp, pipeline) {
     }
     const statsClass = pipeline.stats.modulesFailed > 0 ? "pipeline-stats pipeline-stats--partial" : "pipeline-stats";
 
+    // Per-page cost line, if this generation persisted one (VIB-1770)
+    const costText = buildCostText(pipeline.cost);
+    const costHtml = costText
+      ? `<div class="pipeline-cost">${escapeHtml(costText)}</div>`
+      : "";
+
     div.innerHTML = `
       <div class="chat-msg__avatar chat-msg__avatar--ai">AI</div>
       <div class="chat-msg__content">
@@ -2119,6 +2224,7 @@ function appendRestoredAssistantMessage(text, timestamp, pipeline) {
           ${decisionHtml}
           ${modulesHtml}
           <div class="${statsClass}">${statsText}</div>
+          ${costHtml}
         </div>
       </div>`;
   } else {

package/ui/docs/index.html

@@ -1300,20 +1300,60 @@ testimonial carousel, and a minimal footer with social links.</code></pre>
      ============================================================ -->
 <div class="doc-section" id="docker-deployment">
   <h2 id="docker-deployment-heading">Docker Deployment <a href="#docker-deployment" class="doc-anchor">#</a></h2>
-  <p>Run vibeSpot as a containerised service for your team. The Docker image bundles the server, UI, and all dependencies &mdash; just add an AI API key.</p>
+  <p>Run vibeSpot as a containerised service for your team. The Docker image bundles the server, UI, and all dependencies &mdash; just add an AI API key. The image is published to the GitHub Container Registry and is <strong>public</strong>, so no login or repository checkout is required to pull it.</p>
+
+  <pre><code>docker pull ghcr.io/borismichel/vibespot:latest</code></pre>
+  <p>Tags: <code>latest</code> (most recent release), <code>1.5.0</code> / <code>1.5</code> (specific version), <code>main</code> (latest commit, may be unstable). Pin a version for production.</p>
 
   <h3 id="docker-quick-start">Quick Start (LAN / VPN) <a href="#docker-quick-start" class="doc-anchor">#</a></h3>
-  <pre><code>cp .env.example .env
-# Edit .env &mdash; set at least one AI API key (e.g. ANTHROPIC_API_KEY)
-docker compose up -d</code></pre>
-  <p>Open <code>http://&lt;host-ip&gt;:4200</code> in a browser. All AI keys, engine selection, and HubSpot credentials are configured via the <code>.env</code> file &mdash; no interactive setup needed.</p>
+  <p>Run the public image directly &mdash; no repository or compose file needed:</p>
+  <pre><code>docker run -d --name vibespot \
+  -p 4200:4200 \
+  -e VIBESPOT_AI_ENGINE=anthropic-api \
+  -e VIBESPOT_AGENTIC_MODE=true \
+  -e ANTHROPIC_API_KEY=sk-ant-... \
+  -v vibespot-config:/home/vibespot/.vibespot \
+  -v vibespot-themes:/home/vibespot/vibespot-themes \
+  ghcr.io/borismichel/vibespot:latest</code></pre>
+  <p>Open <code>http://&lt;host-ip&gt;:4200</code> in a browser. Swap the engine and key for whichever provider you use. The two volumes keep config and generated themes across restarts.</p>
 
   <h3 id="docker-https">HTTPS with Caddy <a href="#docker-https" class="doc-anchor">#</a></h3>
-  <p>For public or semi-public deployments, activate the Caddy reverse proxy profile. Caddy auto-provisions a TLS certificate from Let&rsquo;s Encrypt.</p>
-  <pre><code>cp .env.example .env
-# Set VIBESPOT_DOMAIN=vibespot.example.com and your AI key
-docker compose --profile https up -d</code></pre>
-  <p>Caddy binds ports 80 and 443. Point your DNS A record at the host, and HTTPS works automatically.</p>
+  <p>For public or semi-public deployments, put a <a href="https://caddyserver.com/" target="_blank">Caddy</a> reverse proxy in front to auto-provision a Let&rsquo;s Encrypt TLS certificate. Save a <code>docker-compose.yml</code> and <code>Caddyfile</code> in a directory, then run <code>docker compose up -d</code>.</p>
+  <pre><code># docker-compose.yml
+services:
+  vibespot:
+    image: ghcr.io/borismichel/vibespot:latest
+    restart: unless-stopped
+    environment:
+      VIBESPOT_AI_ENGINE: anthropic-api
+      VIBESPOT_AGENTIC_MODE: "true"
+      ANTHROPIC_API_KEY: ${ANTHROPIC_API_KEY}
+    volumes:
+      - vibespot-config:/home/vibespot/.vibespot
+      - vibespot-themes:/home/vibespot/vibespot-themes
+    expose: ["4200"]
+  caddy:
+    image: caddy:2-alpine
+    restart: unless-stopped
+    ports: ["80:80", "443:443"]
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile:ro
+      - caddy-data:/data
+    depends_on: [vibespot]
+volumes:
+  vibespot-config:
+  vibespot-themes:
+  caddy-data:</code></pre>
+  <pre><code># Caddyfile (set your real domain)
+vibespot.example.com {
+  @websockets {
+    header Connection *Upgrade*
+    header Upgrade websocket
+  }
+  reverse_proxy @websockets vibespot:4200
+  reverse_proxy vibespot:4200
+}</code></pre>
+  <p>Caddy binds ports 80 and 443. Point your DNS A record at the host, and HTTPS works automatically. The <code>@websockets</code> rule is required &mdash; the chat and generation pipeline run over a persistent WebSocket.</p>
 
   <h3 id="docker-env-vars">Environment Variables <a href="#docker-env-vars" class="doc-anchor">#</a></h3>
   <p>The Docker image reads all configuration from environment variables. The <code>.env.example</code> file documents every option.</p>
@@ -1324,7 +1364,6 @@ docker compose --profile https up -d</code></pre>
     </thead>
     <tbody>
       <tr><td><code>VIBESPOT_PORT</code></td><td><code>4200</code></td><td>Port the server listens on inside the container</td></tr>
-      <tr><td><code>VIBESPOT_DOMAIN</code></td><td>&mdash;</td><td>Public domain for the Caddy HTTPS profile</td></tr>
       <tr><td><code>VIBESPOT_NO_OPEN</code></td><td><code>1</code></td><td>Suppress auto-open browser (set automatically in Docker)</td></tr>
       <tr><td><code>VIBESPOT_AI_ENGINE</code></td><td>&mdash;</td><td>Default engine: <code>anthropic-api</code>, <code>openai-api</code>, <code>gemini-api</code>, <code>langdock-api</code></td></tr>
       <tr><td><code>VIBESPOT_AGENTIC_MODE</code></td><td>&mdash;</td><td>Set <code>true</code> to enable the multi-stage agentic pipeline</td></tr>
@@ -1348,9 +1387,9 @@ docker compose --profile https up -d</code></pre>
       <tr><td><code>vibespot-themes</code></td><td><code>/home/vibespot/vibespot-themes</code></td><td>Generated HubSpot themes</td></tr>
     </tbody>
   </table>
-  <p>To back up:</p>
-  <pre><code>docker compose cp vibespot:/home/vibespot/.vibespot ./backup-config
-docker compose cp vibespot:/home/vibespot/vibespot-themes ./backup-themes</code></pre>
+  <p>Mount the themes volume at exactly <code>/home/vibespot/vibespot-themes</code> &mdash; that is where the app writes generated themes. Without it, themes are lost when the container is recreated. To back up:</p>
+  <pre><code>docker cp vibespot:/home/vibespot/.vibespot ./backup-config
+docker cp vibespot:/home/vibespot/vibespot-themes ./backup-themes</code></pre>
 
   <h3 id="docker-reverse-proxy">Reverse Proxy &amp; Kubernetes <a href="#docker-reverse-proxy" class="doc-anchor">#</a></h3>
   <p>If you already have a reverse proxy (nginx, Traefik, k8s Ingress), skip the Caddy profile and point your proxy at port 4200. Key requirements:</p>
@@ -1360,8 +1399,8 @@ docker compose cp vibespot:/home/vibespot/vibespot-themes ./backup-themes</code>
     <li><strong>No buffering</strong> &mdash; for streaming AI responses, disable proxy buffering.</li>
   </ul>
   <div class="doc-callout doc-callout--tip">
-    <div class="doc-callout__label">&#128214; Full guide</div>
-    <p>For nginx configs, Kubernetes manifests, security considerations, and troubleshooting, see the complete <a href="https://github.com/borismichel/vibespot/blob/main/docs/docker-deployment.md" target="_blank">Docker Deployment Guide</a>.</p>
+    <div class="doc-callout__label">&#9888;&#65039; Single instance &amp; auth</div>
+    <p>vibeSpot keeps active sessions in memory &mdash; run a single instance (no horizontal scaling without sticky sessions). It runs as a non-root user and has <strong>no built-in authentication</strong>. For internet-facing deployments, put an authenticating proxy (OAuth2 Proxy, Authelia, Cloudflare Access) in front. Persistence is filesystem-only on the named volumes &mdash; there is no database to run.</p>
   </div>
 </div>
 

package/ui/index.html

@@ -484,6 +484,7 @@
                 <div class="chat__header" id="chat-header">
                   <span class="chat__header-title" id="chat-header-title">Chat</span>
                   <span class="chat__header-context" id="chat-header-context"></span>
+                  <span class="chat__cost-total hidden" id="chat-cost-total" title="Estimated total generation cost for this project"></span>
                 </div>
                 <div class="chat__messages" id="chat-messages" role="log" aria-live="polite">
                   <div class="chat__welcome" id="chat-welcome">