vibespot 1.5.0 → 1.6.0

package/README.md

@@ -1,325 +1,137 @@
-# vibeSpot
+<p align="center">
+  <img src="assets/readme/00-hero-banner.svg" alt="vibeSpot — Build HubSpot landing pages with AI" width="100%">
+</p>
 
-AI-powered HubSpot CMS landing page builder — vibe coding & React converter.
+<p align="center">
+  <a href="https://www.npmjs.com/package/vibespot"><img src="https://img.shields.io/npm/v/vibespot?style=flat&color=e8613a&labelColor=1f2937" alt="npm version"></a>
+  <a href="./LICENSE"><img src="https://img.shields.io/badge/license-FSL--1.1--Apache--2.0-e8613a?style=flat&labelColor=1f2937" alt="License"></a>
+  <img src="https://img.shields.io/badge/node-%E2%89%A518-e8613a?style=flat&labelColor=1f2937" alt="Node 18+">
+  <a href="https://vibespot.letsplaywith.tech"><img src="https://img.shields.io/badge/site-vibespot.letsplaywith.tech-e8613a?style=flat&labelColor=1f2937" alt="Website"></a>
+</p>
 
-```
-  ≋ vibeSpot — Build HubSpot Landing Pages with AI
-```
-
-**Website:** [vibespot.letsplaywith.tech](https://vibespot.letsplaywith.tech)
-**LinkedIn:** [myvibespot](https://www.linkedin.com/company/myvibespot/)
-
-> **Requirements:** Node.js 18+. That's it — vibeSpot connects to HubSpot directly via API. No HubSpot CLI needed.
+<p align="center"><b>Build HubSpot landing pages with AI.</b></p>
 
-## What It Does
+<p align="center">
+  Describe what you want in plain English — or paste a Figma URL. vibeSpot generates a native HubSpot theme: editable modules, real fields, your design tokens. Local-first. Your keys, your portal, your code.
+</p>
 
-vibeSpot lets you build HubSpot landing pages by chatting with AI. Describe what you want, and it generates native HubSpot CMS modules — fully editable in the HubSpot page editor. No coding knowledge required.
+<p align="center">
+  <img src="assets/readme/01-vibe-coding-hero.png" alt="vibeSpot — chat on the left, live preview on the right" width="100%">
+</p>
 
-It also converts existing React landing pages (built with Lovable, v0, Bolt, or any React-based builder) into HubSpot-native modules.
-
-### Vibe Coding Mode (Default)
+## Quickstart
 
 ```bash
 npx vibespot
 ```
 
-Opens a browser with:
-- **Chat on the left** — describe your landing page in natural language
-- **Live preview on the right** — see your page render in real-time, with Split, Plan, and Code views
-- **Agentic pipeline** — multi-stage AI generation with real-time progress
-- **Multi-page sites** — create full HubSpot sites from a single prompt with shared header/footer, per-page layouts, and cross-page navigation validation
-- **Inline WYSIWYG editing** — click text, images, and links directly in the live preview to edit them inline
-- **Per-section visual controls** — hover any module for a floating toolbar with color pickers, spacing sliders, image swap, and font size controls
-- **Plan mode** — toggle on to deliberate before generating: the AI asks elicitation questions, builds a markdown plan in a resizable sidebar, and only generates after you approve. Pre-canned plan templates for common page types skip the cold-start phase.
-- **Onboarding walkthrough** — 3-step intro for first-time users covering what vibeSpot is, how it maps to HubSpot, and a guided first prompt
-- **Workspace tabs** — Pages, Brand, Library, Marketplace, Settings tabs organize the dashboard. Brand tab includes a live visual preview of your brand kit.
-- **Project sidebar** — create, open, resume, or delete projects; page tree shows all templates with type badges and module counts
-- **Module management** — reorder via drag-and-drop, edit fields, delete modules from module list or module library
-- **Starter templates** — SaaS, Portfolio, Restaurant, Event, Coming Soon, Blog — pre-built page bundles for instant preview with no AI wait
-- **Content types** — landing pages, email templates, and blog templates all supported from asset-type cards and the page type dropdown
-- **Email client preview** — renders your email in Gmail, Outlook Desktop, and Apple Mail with per-client rendering notes
-- **Split-pane view** — preview + code editor side by side in a 50/50 layout
-- **Project overview table** — sortable table with page, email, module, and brand asset counts per project, plus bulk duplicate/delete
-- **Brand kit enforcement** — colors, fonts, and logo are injected as constraints into AI generation; validator warns on off-brand values
-- **Interact mode** — unified mode that auto-detects whether you're editing content inline or referencing modules in chat
-- **Undo/redo** — Ctrl+Z / Ctrl+Y step through version history; a compact timeline strip shows every generation step
-- **Smart suggestions** — contextual suggestion chips appear after pipeline completion, filtered by existing modules
-- **From Figma** *(Beta)* — paste a Figma URL to extract design tokens, text, and assets, then generate a full page that translates the design verbatim
-- **From React** *(Beta)* — convert existing React/Lovable projects from a Git URL
-- **From HubSpot** — fetch an existing theme, then run inverse analysis to extract design tokens, module graph, and round-trip risks
-- **Field editor** — tweak text, colors, images directly
-- **File uploads** — attach images and documents via drag-and-drop or paperclip button
-- **Upload to HubSpot** — per-file progress, auto-fix, celebration popup with direct portal link
-- **Version history** — per-template git commits with rollback in a collapsible bottom panel
-- **Light/dark mode** — toggle or auto-detect system preference
-- **Tabbed settings** — AI engines (with extended-thinking toggle), HubSpot accounts, Figma, GitHub, vibeSpot config
-- **Mobile responsive** — tablet breakpoint collapses the rail; sub-768px shows a gate dialog
-- **ZIP download** — export your theme as a ZIP file
-
-### Agentic Pipeline
-
-When you send a message, vibeSpot runs a 4-stage pipeline:
-
-1. **Intent Analyzer** — classifies your request and plans which modules to create, modify, or keep unchanged. Uses conversation history to resolve back-references ("same section") and corrections ("I meant the hero").
-2. **Page Architect** — designs the visual system (CSS variables, shared styles) then plans module specs. Reports font limitations when web fonts are requested.
-3. **Module Developer** — generates all modules in parallel (up to 20 concurrent)
-4. **Quality Check** — auto-fixes common issues (unbalanced HubL tags, reserved field names, deprecated types, CDN imports). Verifies all modules are in the page order.
-
-Completed modules appear in the live preview immediately as each finishes, with themed skeleton placeholders for modules still generating.
-
-### Plan Mode
-
-Plan mode is a deliberation phase that runs *before* any code is generated. Toggle it from the prominent **Plan Mode** pill above the chat input. While active:
-
-- The AI asks elicitation questions to surface gaps in your brief: who's the audience, what's the primary CTA, what sections should the page have, what's the brand voice.
-- Each response builds up a markdown plan, persisted to `{theme}/.vibespot/plan.md` and rendered in a dedicated **Plan** tab in the right pane.
-- The AI may emit clickable answer chips for common questions (e.g. "What's your primary goal? [Lead capture] [Sign-ups] [Demo bookings]") to keep the conversation fast.
-- You can **edit the plan inline** (pencil icon → textarea → Save) — refinements without typing chat messages.
-- Generation is **hard-gated**: the agentic pipeline is refused while plan mode is on. The only way to generate is the explicit **Approve plan** button, which prepends the plan to the user message as a design brief and runs the pipeline against the approved spec.
-- **Discard & start over** clears the plan and exits plan mode.
-
-Plan mode is ideal when:
-- You're starting from a vague brief and want the AI to help you scope the page.
-- Multiple stakeholders need to review the plan before code is generated.
-- You're generating a high-stakes page and want to control content/structure decisions explicitly.
-
-When plan mode is off, vibeSpot generates immediately — the existing fast path. Mode state persists across sessions.
-
-### Figma Import (Beta)
-
-Translate a Figma design into a HubSpot CMS theme without re-implementing it. The pipeline preserves the design's exact colors, typography, copy, and section order — the AI is only used to translate each section to HubL, not to make creative decisions.
-
-**Setup:**
-1. Open **Settings → Figma** and paste a Figma Personal Access Token (generate one in your Figma account settings).
-2. Click **From Figma** on the setup screen and paste a Figma file URL or a specific frame URL.
-
-**What the importer extracts:**
-- **Design tokens** — colors (with usage counts), typography styles (family, size, weight per role), spacing scale, effects (shadows, border radii). These map mechanically to `:root` CSS variables — no AI guessing.
-- **Section structure** — top-level frames become modules, in their original Figma order.
-- **Per-section content** — exact headlines, body copy, and CTAs are extracted with role and font-size annotations, fed to the AI as field defaults.
-- **Image assets** — downloaded from Figma's image API as PNGs (2× resolution).
-
-**Two image modes (toggle on the import screen):**
-- **Import images as assets** *(default)* — images land in `{theme}/assets/` and are referenced via `get_asset_url()`. The page looks identical to Figma out of the box.
-- **Image fields with placeholders** — modules use HubSpot image fields with placehold.co defaults. Content editors swap in their own images via the HubSpot editor.
-
-**The conversion pipeline (streamlined):**
-1. **Generate shared CSS** — deterministic mapping of design tokens to CSS variables and utility classes. No AI.
-2. **Map sections to module specs** — each section's exact text and layout becomes a module specification.
-3. **AI translation** — for each module, the AI converts the Figma section into HubL. Parallel, concurrency-limited. The system prompt forbids inventing content; everything comes from Figma.
-4. **Quality check** — the same auto-fix layer used by the agentic pipeline.
-
-The result is a HubSpot theme where every color, word, and pixel of spacing matches the original design — fully editable in HubSpot's drag-and-drop editor.
-
-### Classic Wizard Mode
+A browser opens. Pick an AI engine, drop in an API key, describe your page. That's the whole product.
 
-```bash
-npx vibespot wizard
-```
+Requires Node.js 18+. No HubSpot CLI install needed — vibeSpot talks to HubSpot directly via API.
 
-Step-by-step CLI wizard for converting an existing React project to HubSpot modules.
+## The tour
 
-## Setup Guide
+### 1. Talk to it. Ship a HubSpot page.
 
-### 1. Check if Node.js is installed
+<img src="assets/readme/01-vibe-coding-hero.png" alt="Chat-driven page generation with live preview" width="100%">
 
-```bash
-node -v
-```
+Type what you want on the left. Watch real HubSpot modules render on the right — Split, Plan, and Code views, all live. A four-stage agentic pipeline (Intent → Architect → Module Developer → Quality Check) generates modules in parallel and auto-fixes common HubL issues before they reach you.
 
-If you see `v18.x.x` or higher, you're good. Otherwise install from [nodejs.org](https://nodejs.org).
+### 2. Deliberate before you generate — Plan mode
 
-### 2. Install an AI Engine
+<img src="assets/readme/02-plan-mode.png" alt="Plan mode: AI asks elicitation questions and builds a markdown plan" width="100%">
 
-vibeSpot needs an AI engine to generate code. Use **one** of these:
+Vague brief? Toggle Plan mode. vibeSpot asks the questions a senior designer would — audience, primary CTA, sections, voice — and builds a markdown plan in the right pane. Generation is hard-gated until you approve. Pre-canned templates skip the cold start for common page types.
 
-| Engine | Install | Notes |
-|--------|---------|-------|
-| Anthropic API | No install — just need an API key | Get one at [console.anthropic.com](https://console.anthropic.com) |
-| Claude OAuth | Run `claude setup-token` → paste token | Uses your Claude Pro/Max subscription |
-| OpenAI API | No install — just need an API key | Any OpenAI model |
-| Gemini API | No install — just need an API key | Google Gemini models |
-| [Langdock](https://langdock.com) | No install — just need a Langdock API key | EU-hosted gateway (Frankfurt), GDPR-compliant |
-| [Claude Code](https://claude.ai/code) | `npm install -g @anthropic-ai/claude-code` | Uses your Claude subscription |
-| [Gemini CLI](https://github.com/google-gemini/gemini-cli) | `npm install -g @google/gemini-cli` | Uses your Google AI account |
-| [OpenAI Codex](https://github.com/openai/codex) | `npm install -g @openai/codex` | Uses your OpenAI account |
+### 3. Translate Figma 1:1
 
-### 3. Run vibeSpot
+<img src="assets/readme/03-figma-import.png" alt="Figma import: paste a URL, extract design tokens and copy" width="100%">
 
-```bash
-npx vibespot
-```
+Paste a Figma URL. vibeSpot extracts the exact design tokens (colors, type, spacing, shadows), the literal copy, and the section structure — then translates each section to HubL. The AI translates; it doesn't invent. What ships matches the Figma file.
 
-The browser opens automatically. Enter your API key in the setup screen, create or open a theme, and start chatting.
+### 4. Build whole sites in one prompt
 
-### 4. Connect HubSpot
+<img src="assets/readme/04-multi-page-sites.png" alt="Multi-page site with shared header/footer and page tree" width="100%">
 
-Open **Settings → HubSpot** and add your account with a Personal Access Key (PAK). vibeSpot connects directly via the HubSpot API — no CLI installation needed. You can also switch to legacy CLI mode if you prefer.
+One prompt → multi-page HubSpot site. Shared header and footer, per-page layouts, cross-page navigation validation. The project sidebar shows the page tree with type badges and module counts. Drag to reorder, click to open.
 
-### Run with Docker
+### 5. Edit in the live preview
 
-Prefer not to install Node.js? Pull the published image instead:
+<img src="assets/readme/05-inline-wysiwyg.png" alt="Inline WYSIWYG editing with per-section hover toolbar" width="100%">
 
-```bash
-docker run --rm -p 4200:4200 \
-  -e ANTHROPIC_API_KEY=sk-ant-... \
-  ghcr.io/borismichel/vibespot:latest
-```
+Click text, images, and links directly in the live preview to edit them inline. Hover any module for a floating toolbar: color picker, spacing slider, image swap, font size. Undo/redo through every generation step.
 
-Or use the bundled `docker-compose.yml` (Caddy + Postgres + auth-gate slot) for production deployments. See [docs/docker.md](docs/docker.md) for the full guide.
+### 6. Upload straight to HubSpot
 
-## After Building Your Page
+<img src="assets/readme/06-hubspot-upload.png" alt="Celebration popup after a successful HubSpot upload, with a direct link to the portal" width="100%">
 
-Once your modules are ready:
+Click Upload. Per-file progress, auto-fix for common errors, celebration popup with a direct link to your HubSpot portal (EU and NA regions auto-detected). From there it's Content → Landing Pages → Create → drop your modules onto the page.
 
-1. Click **Upload to HubSpot** in the toolbar
-2. Watch per-file upload progress with auto-fix for common errors
-3. The celebration popup shows a direct link to your HubSpot portal (EU and NA regions auto-detected)
-4. In HubSpot: **Content** → **Landing Pages** → **Create**
-5. Choose your uploaded theme
-6. Drag your modules onto the page
-7. Edit text, images, and colors in the page editor
-8. Preview and publish!
+## Choose your AI engine
 
-## Docker Deployment
+vibeSpot runs the same pipeline across seven engines. Use whichever subscription you already pay for.
 
-Run vibeSpot as a containerised service for your team — LAN, VPN, or HTTPS.
+| Engine | Install | Notes |
+|--------|---------|-------|
+| Anthropic API | API key only | [console.anthropic.com](https://console.anthropic.com) |
+| Claude OAuth | `claude setup-token` | Uses your Claude Pro/Max subscription |
+| OpenAI API | API key only | Any OpenAI model |
+| Gemini API | API key only | Google Gemini models |
+| [Claude Code](https://claude.ai/code) | `npm i -g @anthropic-ai/claude-code` | Uses your Claude subscription |
+| [Gemini CLI](https://github.com/google-gemini/gemini-cli) | `npm i -g @google/gemini-cli` | Uses your Google AI account |
+| [OpenAI Codex](https://github.com/openai/codex) | `npm i -g @openai/codex` | Uses your OpenAI account |
 
-```bash
-cp .env.example .env        # set at least one AI API key
-docker compose up -d         # plain HTTP on port 4200
-```
+## How the models compare
 
-For public HTTPS with automatic TLS via Caddy:
+We ran the same two landing-page briefs through the pipeline on five models and kept every theme. The table shows accuracy (HubSpot/HubL validity + section coverage + an LLM judge), cost, and speed per page. The full themes, renders, and Langfuse trace ids live in [`test/eval/benchmark-results/`](test/eval/benchmark-results/).
 
-```bash
-# In .env, set VIBESPOT_DOMAIN=vibespot.example.com
-docker compose --profile https up -d
-```
+| Model | Accuracy | Cost/page | Speed/page |
+|-------|----------|-----------|------------|
+| Sonnet 4.6 | 99% | $1.39 | ~6 min |
+| Opus 4.7 | 98% | $7.76 | ~5 min |
+| GPT 5.4 | 97% | $0.83 | ~4.5 min |
+| GPT 5.5 | 96% | $3.91 | ~9 min |
+| Haiku 4.5 | 92% | $0.39 | ~2 min |
+
+Every model produced valid, complete pages — 100% validator pass and section coverage across the board. Sonnet 4.6 leads on quality at roughly a fifth of Opus's cost; GPT 5.4 is the value pick; Haiku 4.5 is fastest and cheapest if you plan to polish by hand. Two briefs scored by one judge — read it as a directional guide, and judge fidelity yourself from the saved themes. Reproduce it with `npm run benchmark` (see [`test/eval/BENCHMARK.md`](test/eval/BENCHMARK.md)).
 
-All AI keys, engine selection, and integrations are configurable via environment variables — see `.env.example` for the full list. Themes and config persist across container restarts via named Docker volumes.
+## Setup
 
-For reverse proxy configs (nginx, Traefik, k8s Ingress), Kubernetes manifests, backup/restore, and security guidance, see the full **[Docker Deployment Guide](docs/docker-deployment.md)**.
+1. **Node 18+** — `node -v` to check, [nodejs.org](https://nodejs.org) to install.
+2. **An AI engine key** — pick one from the table above.
+3. **Run it** — `npx vibespot`. The browser opens.
+4. **Connect HubSpot** — Settings → HubSpot → add a Personal Access Key. vibeSpot connects via the HubSpot API directly. No CLI install.
 
 ## Commands
 
+Most users only need `npx vibespot`. The web UI handles everything else.
+
 ```bash
 vibespot              # Vibe coding web UI (default)
-vibespot email        # Start in email template mode
-vibespot wizard       # Classic CLI wizard
-vibespot init         # Check and install required tools
+vibespot wizard       # Classic CLI wizard for React → HubSpot
 vibespot convert      # Convert a React project (no upload)
-vibespot upload       # Upload theme to HubSpot
-vibespot inverse [--path] [--json] [--apply-tokens]  # Analyze an imported theme (design tokens, module graph, risks)
-vibespot marketplace check [--fix] [--json]   # Audit theme for HubSpot Marketplace submission
-vibespot marketplace edit                     # Edit Marketplace listing metadata (marketplace.json)
+vibespot upload       # Upload a theme to HubSpot
+vibespot inverse      # Reverse-engineer an imported HubSpot theme
 vibespot doctor       # Diagnose environment issues
 ```
 
-Most users only need `npx vibespot` — the web UI handles everything.
-
-## Configuration
-
-Settings are managed in the **Settings** panel (tabbed: AI, HubSpot, Figma, GitHub, vibeSpot) and saved in `~/.vibespot/config.json`:
-
-- `aiEngine` — Your preferred AI engine (`anthropic-api`, `claude-oauth`, `openai-api`, `gemini-api`, `langdock-api`, `claude-code`, `gemini-cli`, `codex-cli`)
-- `anthropicApiKey`, `openaiApiKey`, `geminiApiKey`, `langdockApiKey` — API keys (stored locally, never sent except to the provider)
-- `langdockBaseUrl` — Override for self-hosted Langdock deployments (default: `https://api.langdock.com/anthropic`)
-- `hubspotAccounts` — Connected HubSpot accounts (PAK-based auth)
-- `hubspotUploadMode` — `api` (default, direct API) or `cli` (legacy, requires HubSpot CLI)
-- `agenticConcurrency` — Max parallel module generation calls (default: 20)
-- `figmaToken` — Figma Personal Access Token for design import
-- `enabledCLITools` — Which CLI tools to detect on settings load
-
-All settings can also be provided via environment variables for headless/Docker deployments — see [Docker Deployment](docs/docker-deployment.md) and `.env.example` for the full list.
-
-## What's New
-
-### Unreleased
-- **Docker deployment** — run vibeSpot as a containerised service with `docker compose up -d`. Includes Caddy auto-HTTPS, env var configuration for all AI keys/integrations, named volume persistence, health check endpoint, and deployment docs for nginx/k8s
-- **Langdock AI adapter** — EU-hosted AI engine via Langdock gateway
-
-### v1.3.1
-- **Project overview table** — sortable table view for all projects with page, email, module, and brand asset counts
-- **Bulk operations** — select multiple projects for bulk duplicate or delete
-- **Email client preview** — preview emails as they render in Gmail, Outlook Desktop, and Apple Mail
-- **Pipeline robustness** — auto-regenerate modules with broken fieldsJson; tightened similarity checks
-- **Email deploy fixes** — correct dnd_area naming, module references for drag-and-drop editor, deploy UX improvements
-- **Security hardening** — eliminated shell injection in git operations, path-traversal guards on theme routes
-
-### v1.3.0
-- **Email template generation** — full pipeline support for HubSpot email templates: email-specific prompts, table-based layout, MSO/VML compatibility, 3 email starters, 5 email plan templates, and email validator auto-fix
-- **Multi-page sites** — create full HubSpot sites from a single prompt with shared modules, page tree sidebar, and cross-page navigation validation
-- **Inline WYSIWYG editing** — click text, images, and links directly in the live preview to edit inline
-- **Per-section visual controls** — hover toolbar with color pickers, spacing sliders, image swap, and font size controls
-- **Blog template generation** — blog as a content type with HubSpot blog variable support and a Blog Content Hub starter template
-- **Split-pane view** — preview + code editor side by side
-- **Brand kit enforcement** — colors, fonts, and logo injected as AI constraints with off-brand warnings
-- **Workspace tab navigation** — Pages, Brand, Library, Marketplace, Settings tabs
-- **Guided entry with asset-type cards** — Landing Page, Email, Website, Blog Post, From Template, and Import
-- **First-visit onboarding** — 3-step walkthrough for new users
-- **Material Design SVG icons** — replaced UI emoji glyphs with crisp SVG icons
-- **Project assets browser** — Library tab shows project files (images, fonts, scripts) instead of starter templates
-
-### v1.2.0
-- **Inverse pipeline (HubSpot → vibeSpot)** — reverse-engineer imported HubSpot themes: design token extraction, module graph, field schema flags, and round-trip risk detection
-- **Simplified setup** — returning users land on a recent projects rail; new users see a chat-style prompt as the primary path
-- **Select mode** — click elements in the live preview to reference them in chat
-- **Undo/redo with visual timeline** — Ctrl+Z / Ctrl+Y step through version history with hover tooltips
-- **Smart chat suggestions** — contextual suggestion chips filtered by existing modules
-- **Plan-mode templates** — 7 pre-canned plan structures that skip cold-start elicitation
-- **Starter templates** — 5 bundled page templates for instant preview with no AI wait
-- **HubSpot Marketplace publication path** — rule-based audit, auto-fix, and listing metadata editor
-
-### v1.1.3
-- **Model selection persists for Codex CLI, Gemini CLI, and Gemini API** — picking a non-default model used to revert because the `/api/settings/engine` route had no cases for those engines, no config fields existed, and `getCurrentModel` returned `null` (so the dropdown reset to the first option). Added the config fields, route persistence, UI lookup, and runtime `--model`/`-m` flag plumbing into the CLI subprocess invocation.
-
-### v1.1.2
-- **Honest model dropdowns** — replaced generic `opus`/`sonnet`/`haiku` aliases in the Claude Code dropdown with specific version IDs (Opus 4.7, Sonnet 4.6, Haiku 4.5, etc.) so picking a version actually pins it. Codex CLI dropdown now lists GPT-5.5, GPT-5.5 Pro, GPT-5.3 Codex, GPT-5.2 Codex, GPT-5.1 Codex Max/Mini, GPT-5.4 Mini/Nano, Codex Mini — no more outdated `o4-mini` / `o3` / `gpt-4o` only.
-- **Live model catalog covers Codex CLI** — when an OpenAI API key is configured, both OpenAI API and Codex CLI dropdowns get populated from `/v1/models` (cached 10 min). New OpenAI releases show up automatically.
-- **Settings dialog opens to AI tab** — fixed a click-handler bug that left the dialog blank on open.
-
-### v1.1.0
-- **Plan mode** — deliberation phase before generation. Prominent toggle above chat input; AI asks elicitation questions, builds a markdown plan in a dedicated tab, only generates after Approve. Plan persists to `.vibespot/plan.md` across sessions.
-- **Streamlined Figma import** — replaces the old agentic-pipeline path with a translation pipeline that preserves Figma's exact design tokens, copy, and section order. Image assets copy into the theme automatically.
-- **Anthropic SDK upgrade** (0.39 → 0.91) — unlocks extended thinking, improved prompt caching, and tool/schema-level cache control.
-- **AI Capabilities settings panel** — toggle Extended Thinking (Anthropic API engines, with Low/Medium/High budget) and Web Search (Anthropic API + Claude Code CLI). Prompt Caching shows as auto-active; Citations is the remaining "coming soon" item. Claude Code engines see honest "Auto (CLI-managed)" badges where the CLI handles the feature internally.
-- **Cache control on tool definitions** — Module Developer's identical tool schema is now cached, saving schema-encoding tokens on every parallel call after the first.
-- **Claude Code stream-json output** — both single-call mode and the agentic CLI path now use `--output-format stream-json --include-partial-messages --verbose`. Tool calls (`Read`, `Edit`, `Bash`, `WebSearch`, `WebFetch`, `Grep`, `Glob`) flow into the pipeline status pane as concrete activity ("Searching: '…'", "Reading hero/module.html") instead of generic rotating placeholders.
-
-### v1.0.x
-- **Figma design import** (v1.0.10) — paste a Figma URL to extract design tokens, text, section structure, and image assets, then generate a full HubSpot page via the agentic pipeline
-- **Template & module deletion** (v1.0.4) — delete templates from disk, option to delete exclusive modules, delete module button in module library preview
-- **Brand assets redesign** (v1.0.2) — hover-expand cards with per-asset Upload/Extract, Extract All, brand voice extractor, cross-template product context sharing via rendered preview HTML
-- **Agentic pipeline** (v1.0.0) — 4-stage AI generation: Intent Analyzer → Page Architect (Design System + Module Planner) → Module Developer (parallel) → Quality Check (auto-fix)
-- **Incremental preview** (v1.0.0) — completed modules appear immediately with themed placeholders for pending ones
-- **Quality Check agent** (v1.0.0) — auto-fixes unbalanced HubL tags, reserved fields, deprecated types, CDN imports
-- **Security hardening** (v0.9.5) — shell injection prevention, CORS restriction, XSS prevention, security headers, API key file permissions
-- **Code editor** (v0.9.3) — CodeMirror 6 with syntax highlighting, file browser, Preview/Code toggle, dark/light theme
-- **Design extraction** (v0.9.3) — AI-powered styleguide generation from existing themes
-- **HubSpot API mode** (v0.9.0) — upload, download, and manage themes without the HubSpot CLI
-- **File uploads** (v0.8.0) — attach images and documents to chat (drag-and-drop or paperclip)
-- **Per-template version history** (v0.7.0) — scoped git commits, filtered history, safe rollback
-- **Light/dark mode** (v0.6.0) — system preference detection, persisted toggle
-
-See [CHANGELOG.md](CHANGELOG.md) for the full history.
-
-## Troubleshooting
-
-**"command not found: node"** — Install Node.js from [nodejs.org](https://nodejs.org) and restart your terminal.
-
-**"vibeSpot has not been built yet"** — Use `npx vibespot` instead, or run `npm run build` first.
-
-**HubSpot upload failing** — Open Settings → HubSpot and verify your account is connected. Run `vibespot doctor` for diagnostics.
-
-**Preview shows default template instead of modules** — Delete the boilerplate modules (button, card, menu, pricing-card, social-follow) using the × button on each module in the sidebar.
+## What's new in v1.3
+
+- **Email template generation** — full pipeline for HubSpot emails: table layouts, MSO/VML compatibility, email validator auto-fix, 3 email starters.
+- **Multi-page sites** — single prompt → full site with shared header/footer, page tree, navigation validation.
+- **Inline WYSIWYG editing** — edit text, images, and links directly in the live preview with per-section visual controls.
+
+Full history: [CHANGELOG.md](CHANGELOG.md).
 
 ## Links
 
-- **Website:** [vibespot.letsplaywith.tech](https://vibespot.letsplaywith.tech)
-- **LinkedIn:** [myvibespot](https://www.linkedin.com/company/myvibespot/)
-- **npm:** [vibespot](https://www.npmjs.com/package/vibespot)
+- **Website** — [vibespot.letsplaywith.tech](https://vibespot.letsplaywith.tech)
+- **LinkedIn** — [myvibespot](https://www.linkedin.com/company/myvibespot/)
+- **npm** — [vibespot](https://www.npmjs.com/package/vibespot)
+- **Contributing** — [CONTRIBUTING.md](CONTRIBUTING.md)
+- **Code of Conduct** — [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)
 
 ## License
 
 FSL-1.1-Apache-2.0 — see [LICENSE](LICENSE) for details.
+

package/assets/prompts.bundle.json

@@ -0,0 +1,53 @@
+{
+  "generatedAt": "2026-05-27T09:02:45.267Z",
+  "source": "local-seed",
+  "prompts": {
+    "intent-analyzer": {
+      "version": 1,
+      "label": "local",
+      "placeholders": [
+        "themeName",
+        "contextData"
+      ],
+      "template": "You are the Intent Analyzer for vibeSpot, a HubSpot CMS builder that generates pages, email templates, and blog templates.\n\nYour job: classify the user's request, determine the content type (page, email, or blog), and plan which modules need work. You do NOT generate module code — you only plan.\n\n## Theme: \"{{themeName}}\"\n\n{{contextData}}\n\n## Content Type Detection\n\nSet `contentType` based on the user's request:\n- **\"page\"** (default) — Landing pages, website pages, any page-type content\n- **\"email\"** — Email templates, newsletters, email campaigns, transactional emails\n- **\"blog\"** — Blog listing pages, blog post templates, content hubs, article layouts\n\nTrigger words for email: \"email\", \"email template\", \"newsletter\", \"email campaign\", \"welcome email\", \"announcement email\", \"drip\", \"email sequence\", \"email blast\", \"transactional email\".\n\nTrigger words for blog: \"blog\", \"blog post\", \"blog listing\", \"blog template\", \"article\", \"content hub\", \"blog page\", \"blog layout\", \"editorial\", \"publication\", \"magazine layout\", \"posts page\".\n\nIf ambiguous, default to \"page\". The content type affects downstream pipeline behavior (email uses table-based layout; blog uses HubSpot blog variables and reading-optimized design).\n\n## Classification Rules\n\n1. **create** — User wants a new single page/email/blog from scratch (e.g., \"build me a landing page for...\", \"create a welcome email\", \"build a blog for my company\")\n2. **create_site** — User wants a multi-page website (e.g., \"build a website with home, about, and contact pages\", \"create a 5-page site for...\"). Use when the user mentions multiple pages, a website (not just a page), or a site with navigation. Output `pages` array with each page's label, purpose, pageType, and slug, plus `sharedModules` listing shared module names (e.g., \"site-header\", \"site-footer\").\n3. **modify** — User wants to change existing modules (e.g., \"make the hero button red\", \"update the pricing\")\n4. **add** — User wants new modules added to the existing page/email (e.g., \"add a testimonials section\")\n5. **remove** — User wants modules removed (e.g., \"remove the footer\")\n6. **rearrange** — User wants to reorder modules (e.g., \"move pricing above features\")\n7. **style_change** — User wants design system changes that affect shared CSS/multiple modules (e.g., \"change the color scheme to blue\")\n8. **question** — User is asking a question, not requesting changes (e.g., \"what modules do I have?\"). Provide the answer directly.\n\n## Multi-Page Site Rules (create_site only)\n\nWhen classifying as `create_site`:\n- Populate the `pages` array with one entry per page. Each page needs: id (kebab-case), label (human-readable), pageType (\"landing_page\" or \"website_page\"), purpose (1-sentence), slug (URL path without leading /).\n- Populate `sharedModules` with names of modules shared across all pages (typically [\"site-header\", \"site-footer\"]).\n- Always include at least a header and footer in sharedModules.\n- Page IDs should be descriptive: \"wp-home\", \"wp-about\", \"wp-contact\", etc.\n- Set `designSystemChanges: true` (site creation always needs a design system)\n- If the user says \"website\" or \"site\" without specifying pages, infer reasonable pages (e.g., Home, About, Contact)\n- All guides are needed for site creation: design, content, conversion, hubspot_rules, humanify\n\n## Key Rules\n\n- For **modify**: list only the modules that actually need changes in `affectedModules`. Everything else goes in `unchangedModules`.\n- For **add**: new modules go in `newModules` with a descriptive name, brief description, and position index (0-based).\n- For **reuse**: if the user references a module from the library, put it in `reuseModules` with the source template name. Reused modules are copied as-is — their structure (fields, HTML, CSS) MUST NOT change.\n- For **style_change**: set `designSystemChanges: true`. All modules become affected since they need the updated design system.\n- For **question**: set `intent: \"question\"` and provide the answer in the `answer` field. The pipeline will short-circuit.\n- When the user references \"the rest of the page\", \"match the page style\", \"consistent with other sections\", or similar cross-module language, they want the target module to match the shared design system. Classify as **modify** (targeting the specific module), NOT style_change — unless they want the design system itself changed.\n- `guidesNeeded` determines which reference guides downstream stages receive. Only include what's actually needed:\n  - \"design\" — for new pages, layout changes, design system work\n  - \"content\" — for new pages, content-heavy changes\n  - \"conversion\" — for any module code generation\n  - \"hubspot_rules\" — for any module code generation\n  - \"humanify\" — when generating user-facing copy\n\n## Conversation Context\n\nYou receive recent chat history (up to 3 prior exchanges). Use it to resolve:\n- **Back-references**: \"same section\", \"that module\", \"the one above\" → look at which module was modified in the previous turn\n- **Corrections**: \"I meant the hero\", \"no, the stakes section\", \"I was referencing X\" → the user is correcting YOUR previous classification. Re-apply the PREVIOUS request to the correct module. This is NOT a question — it's a \"modify\" intent.\n- **Follow-ups**: \"now make it bigger\", \"also add a CTA\" → applies to the module(s) from the previous turn\n\nCRITICAL: When the user corrects a misclassification (e.g., \"I was referencing the stakes-section\"), this is ALWAYS a modify intent targeting the module they named. NEVER classify corrections as \"question\".\n\n## Compound Requests\n\nIf the user asks for multiple things (e.g., \"make hero taller AND add testimonials\"), capture ALL parts:\n- Affected existing modules in `affectedModules`\n- New modules in `newModules`\n- Set the broadest applicable intent (prefer \"modify\" + newModules over splitting)\n\n## Content Type Detection\n\nSet `contentType` to \"email\" when the user explicitly asks for an email template, newsletter, email campaign, welcome email, promotional email, or similar email content. Leave as \"page\" (default) for landing pages, websites, and web content."
+    },
+    "design-system": {
+      "version": 1,
+      "label": "local",
+      "placeholders": [
+        "themeName"
+      ],
+      "template": "You are the Design System Architect for vibeSpot, a HubSpot CMS page builder.\n\nYour job: create a complete, production-ready CSS design system for a landing page theme. You produce the :root custom properties, shared utility/component CSS, and optional shared JS (scroll animations). Downstream agents will use YOUR CSS classes and variables to build individual modules.\n\n## Theme: \"{{themeName}}\"\n\n## Output Requirements\n\n### cssVariables\nA flat object mapping CSS custom property names to values. Every variable your CSS references MUST be defined here. Include ALL of these categories:\n\n**Colors** (at minimum):\n- --{{themeName}}-color-bg: page background\n- --{{themeName}}-color-surface: card/section background\n- --{{themeName}}-color-dark: dark section background\n- --{{themeName}}-color-dark-surface: card bg inside dark sections\n- --{{themeName}}-color-text: primary text color\n- --{{themeName}}-color-text-inverse: text on dark backgrounds\n- --{{themeName}}-color-text-muted: secondary/muted text\n- --{{themeName}}-color-primary: primary brand color\n- --{{themeName}}-color-primary-dark: darker variant for hover states\n- --{{themeName}}-color-accent: accent/highlight color\n- --{{themeName}}-color-accent-light: light tint for pill/badge backgrounds\n- --{{themeName}}-color-border: default border color\n- --{{themeName}}-color-border-hover: border on hover\n\n**Typography**:\n- --{{themeName}}-font-display: display/heading font stack (system fonts only)\n- --{{themeName}}-font-body: body text font stack (system fonts only)\n- --{{themeName}}-size-h1 through --{{themeName}}-size-h3: heading sizes using clamp()\n- --{{themeName}}-size-body, --{{themeName}}-size-lg, --{{themeName}}-size-small, --{{themeName}}-size-label\n- --{{themeName}}-leading-tight, --{{themeName}}-leading-snug, --{{themeName}}-leading-body: line heights\n- --{{themeName}}-tracking-tight, --{{themeName}}-tracking-wide: letter spacing\n\n**Spacing**:\n- --{{themeName}}-space-xs through --{{themeName}}-space-xl, --{{themeName}}-space-section\n- --{{themeName}}-max-width: content max-width (1152-1280px)\n\n**Effects**:\n- --{{themeName}}-radius-sm, --{{themeName}}-radius-md, --{{themeName}}-radius-lg, --{{themeName}}-radius-full\n- --{{themeName}}-shadow-card-hover, --{{themeName}}-shadow-button\n- --{{themeName}}-transition-fast, --{{themeName}}-transition-base, --{{themeName}}-transition-slow\n\n### sharedCss\nComplete CSS file content. MUST include:\n1. A `:root {}` block with ALL variables from cssVariables\n2. Reset (box-sizing, margin, padding)\n3. Body styles referencing your variables\n4. Typography rules (h1-h6, p)\n5. Layout utilities (.{{themeName}}-container, .{{themeName}}-section, .{{themeName}}-section--dark)\n6. Grid system (.{{themeName}}-grid, .{{themeName}}-grid--2/3/4 with responsive breakpoints)\n7. Card component (.{{themeName}}-card with hover lift)\n8. Button component (.{{themeName}}-btn, .{{themeName}}-btn--primary, .{{themeName}}-btn--secondary)\n   CRITICAL: Re-declare color, text-decoration:none, and font-family on :hover/:focus — HubSpot overrides link hover styles\n9. Pill/badge (.{{themeName}}-pill)\n10. Decorative elements (at least one background treatment: grid pattern, noise, gradient orb)\n11. Scroll animation CSS ([data-animate], [data-animate-stagger]) with 3s CSS-only fallback\n12. Section label (.{{themeName}}-label) — uppercase, letter-spacing, accent color\n13. Stat number styling\n14. Responsive mobile styles (@media max-width: 767px)\n\n### sharedJs (optional)\nIntersectionObserver-based scroll animation JS. Wrap in IIFE.\n\n## CSS Rules — CRITICAL\n- All classes MUST use prefix \"{{themeName}}-\"\n- Use BEM naming: {{themeName}}-module__element--modifier\n- Use system font stacks ONLY (no Google Fonts @import, no external CDN)\n- Every var() reference in CSS must have a matching declaration in :root\n- No Tailwind, no Sass, no PostCSS\n- Use clamp() for fluid typography sizing\n\n## Font Strategy\nUse system font stacks that approximate the desired aesthetic. Pick TWO stacks:\n- Display: for headings\n- Body: for text\n\n**Choose the pairing that best fits the content's mood** — don't default to the same one every time:\n| Style | Display Stack | Body Stack | Best for |\n|-------|--------------|------------|----------|\n| Editorial | Georgia, Cambria, \"Times New Roman\", serif | system-ui, -apple-system, \"Segoe UI\", sans-serif | Media, luxury, culture |\n| Modern | system-ui, -apple-system, sans-serif | \"Segoe UI\", Roboto, sans-serif | SaaS, tech, startups |\n| Warm | Optima, Candara, \"Noto Sans\", sans-serif | \"Trebuchet MS\", system-ui, sans-serif | Local business, food, wellness |\n| Monospace/Tech | \"SF Mono\", \"Cascadia Code\", \"Fira Code\", monospace | system-ui, sans-serif | Developer tools, data, cyber |\n| Geometric | Futura, \"Century Gothic\", \"Trebuchet MS\", sans-serif | system-ui, sans-serif | Architecture, design, fashion |\n| Classic | \"Book Antiqua\", Palatino, \"Palatino Linotype\", serif | Georgia, \"Times New Roman\", serif | Law, finance, heritage |\n| Friendly | \"Comic Sans MS\", Chalkboard, cursive | \"Trebuchet MS\", system-ui, sans-serif | Kids, casual, fun brands |\n| Contrast pair | Georgia, serif (display) | system-ui, sans-serif (body) | When you want serif/sans tension |"
+    },
+    "module-planner": {
+      "version": 1,
+      "label": "local",
+      "placeholders": [
+        "themeName",
+        "cssSummary"
+      ],
+      "template": "You are the Module Planner for vibeSpot, a HubSpot CMS page builder.\n\nYour job: plan the modules for a landing page. You define what each module contains (content brief) and how it should be laid out. You do NOT write module code — downstream Module Developers handle that.\n\nThe Design System has already been created. Your module plans MUST reference the existing CSS classes and variables.\n\n## Theme: \"{{themeName}}\"\n\n## Available CSS Classes & Variables\nReference these in your layoutNotes:\n\n{{cssSummary}}\n\n## Output Rules\n\n### Module names — CRITICAL\n- **If the user message lists \"Existing Modules to Re-plan\", you MUST use those exact names verbatim** in `modules[].name` and in `moduleOrder`. Do not rename them. Do not retitle-case them. Do not \"improve\" them. The names are identifiers, not labels. Mismatched names create duplicate modules instead of regenerating existing ones.\n- **For genuinely new modules** (not in any existing-modules list): use kebab-case identifiers (e.g., `hero`, `pricing-cards`, `final-cta`). This matches the convention used by Plan Mode and Figma Import.\n- The `description` and `contentBrief` fields can be any text — they describe the module to humans, while `name` is the canonical identifier.\n\n### Content & layout\n- Content briefs: describe the actual copy/content each module needs (headlines, body text, CTAs, stats)\n- Layout notes: describe the visual layout using the available CSS classes above\n- Reference specific CSS classes from the shared CSS in your layout notes (e.g., \"Use {{themeName}}-grid--3 for card layout, {{themeName}}-section--dark for background\")\n\n### Module order\n- `moduleOrder`: list **all** modules' names in the order they should appear on the page, including:\n  - the ones you just planned (in `modules`)\n  - any \"Existing Modules to Keep\" the user listed (these are not in `modules`, but still belong in `moduleOrder`)"
+    },
+    "site-module-planner": {
+      "version": 1,
+      "label": "local",
+      "placeholders": [
+        "themeName",
+        "siteMap",
+        "sharedList",
+        "cssSummary",
+        "navHrefs",
+        "sharedModuleNamesCsv"
+      ],
+      "template": "You are the Site Module Planner for vibeSpot, a HubSpot CMS page builder.\n\nYour job: plan modules for a MULTI-PAGE website. You plan ALL pages in one pass to ensure cross-page coherence. You also plan shared modules (header, footer, navigation) that appear on every page identically.\n\n## Theme: \"{{themeName}}\"\n\n## Site Map\n{{siteMap}}\n\n## Shared Modules (appear on EVERY page)\n{{sharedList}}\n\nPlan these shared modules ONCE. They will be automatically added to every page's template.\n\n## Available CSS Classes & Variables\nReference these in your layoutNotes:\n\n{{cssSummary}}\n\n## Shared Module Rules\n\n### site-header (Navigation)\n- Logo on the left, nav links center or right, CTA button far right\n- Nav links: one for each page in the site map. Use relative hrefs matching slugs:\n{{navHrefs}}\n- Active page link uses CSS class \"{{themeName}}-nav__link--active\"\n- Sticky with backdrop-blur, transitions on scroll\n- Mobile: hamburger menu with slide-in nav\n\n### site-footer\n- Consistent across all pages\n- Brand name, link columns (include page links), contact info, social icons, copyright\n- Include navigation links matching the header\n\n## Per-Page Module Rules\nFor each page, plan modules specific to that page's purpose. Do NOT include shared modules ({{sharedModuleNamesCsv}}) in per-page module lists or per-page moduleOrder — they are automatically prepended/appended.\n\nEach page should have distinct content appropriate to its purpose. Aim for:\n- 4-8 unique modules per page (not counting shared modules)\n- Content appropriate to the page's purpose\n- Consistent use of design system classes across all pages\n\n## Module Naming\n- Use kebab-case identifiers (e.g., \"hero\", \"team-grid\", \"contact-form\")\n- Page-specific modules that might conflict across pages should be prefixed with a short page identifier (e.g., \"home-hero\", \"about-hero\") unless the content is genuinely different enough that the name alone distinguishes it\n- Shared modules use the exact names from the shared modules list above\n\n## Output Structure\nReturn a JSON object with:\n- `sharedModules`: array of shared module specs (planned once, used everywhere)\n- `pages`: array of per-page blueprints, each with:\n  - `pageId`: matching the page ID from the site map\n  - `modules`: array of module specs for that page only (excluding shared)\n  - `moduleOrder`: ordered list of per-page module names only (excluding shared)\n- `narrative`: brief description of the overall site story/flow"
+    },
+    "module-developer": {
+      "version": 1,
+      "label": "local",
+      "placeholders": [
+        "themeName"
+      ],
+      "template": "You are a Module Developer for vibeSpot, a HubSpot CMS page builder.\n\nYour job: generate ONE HubSpot CMS module. You receive a module specification and must produce the complete module code.\n\n## Theme: \"{{themeName}}\"\n\n## Output Rules — CRITICAL\nYou produce a single module with these fields:\n- **moduleName**: Exact module name (title-case, e.g., \"Hero Banner\")\n- **fieldsJson**: Valid JSON string — the module's fields.json content\n- **metaJson**: Valid JSON string — must include host_template_types: [\"PAGE\"], is_available_for_new_content: true\n- **moduleHtml**: HubL template ({{ module.field_name }} syntax)\n- **moduleCss**: Vanilla CSS (no Tailwind, no Sass, no CDN imports)\n- **moduleJs**: Optional vanilla JS wrapped in IIFE, or null\n\n## CSS Rules\n- All CSS classes must use prefix \"{{themeName}}-\"\n- Use BEM naming: {{themeName}}-moduleName__element--modifier\n- Reference the theme's CSS custom properties (shown below)\n- No CDN imports (@import url(), external <link> tags)\n- Use system font stacks — no Google Fonts\n\n## Field Rules\n- Use \"type\": \"text\" (NEVER \"textarea\" — it's deprecated)\n- NEVER use \"name\": \"name\" (reserved) — use \"item_name\" instead\n- NEVER use \"name\": \"label\" (reserved) — use \"section_label\" instead\n- NEVER put literal \\n in field defaults\n- Wrap style fields in a \"styles\" group with \"tab\": \"STYLE\"\n- Color fields: type \"color\", default { \"color\": \"#hex\", \"opacity\": 100 }\n- Link fields: type \"link\", default { \"url\": { \"href\": \"#\", \"type\": \"EXTERNAL\" }, \"open_in_new_tab\": false, \"no_follow\": false }\n- Image fields: type \"image\", default { \"src\": \"https://placehold.co/800x600/1a1a2e/ffffff?text=Replace+in+HubSpot\", \"alt\": \"Placeholder\", \"width\": 800, \"height\": 600 }\n- For repeater groups, use \"occurrence\": { \"min\": 0, \"max\": 100 }\n\n## Images & Assets\n- Use get_asset_url(\"{{themeName}}/assets/filename.ext\") for uploaded assets\n- For placeholder images, use image fields with placehold.co defaults\n- Size placeholders appropriately (hero: 1920x800, cards: 600x400, icons: 200x200)\n\n## Navigation & Anchors\n- Add id attribute on module root element: id=\"module-name-lowercased\"\n- For nav modules, use anchor links (#features, #pricing, etc.)\n- Include smooth scroll behavior in nav click handlers\n\n## metaJson Template\n{ \"host_template_types\": [\"PAGE\"], \"is_available_for_new_content\": true }"
+    }
+  }
+}

package/assets/readme/00-hero-banner.svg

@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 400" width="1600" height="400">
+  <defs>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400&amp;family=Space+Grotesk:wght@700&amp;display=swap');
+    </style>
+    <linearGradient id="star-grad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#e8613a"/>
+      <stop offset="100%" stop-color="#f2825f"/>
+    </linearGradient>
+    <linearGradient id="bar-grad" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#e8613a"/>
+      <stop offset="100%" stop-color="#f2825f"/>
+    </linearGradient>
+    <radialGradient id="glow1" cx="75%" cy="10%" r="45%">
+      <stop offset="0%" stop-color="#e8613a" stop-opacity="0.08"/>
+      <stop offset="40%" stop-color="#e8613a" stop-opacity="0.02"/>
+      <stop offset="65%" stop-color="#e8613a" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="glow2" cx="20%" cy="95%" r="35%">
+      <stop offset="0%" stop-color="#e8613a" stop-opacity="0.06"/>
+      <stop offset="40%" stop-color="#e8613a" stop-opacity="0.01"/>
+      <stop offset="65%" stop-color="#e8613a" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1600" height="400" fill="#faf9f7"/>
+  <rect width="1600" height="400" fill="url(#glow1)"/>
+  <rect width="1600" height="400" fill="url(#glow2)"/>
+
+  <!-- Decorative stars -->
+  <g opacity="0.10"><path d="M214 69 C214.6 78.6,221.4 85.4,231 86 C221.4 86.6,214.6 93.4,214 103 C213.4 93.4,206.6 86.6,197 86 C206.6 85.4,213.4 78.6,214 69Z" fill="#e8613a"/></g>
+  <g opacity="0.07"><path d="M149 295 C149.4 301.4,153.6 305.6,160 306 C153.6 306.4,149.4 310.6,149 317 C148.6 310.6,144.4 306.4,138 306 C144.4 305.6,148.6 301.4,149 295Z" fill="#e8613a"/></g>
+  <g opacity="0.09"><path d="M1372 88 C1372.6 97,1378.6 103,1388 103.6 C1378.6 104.2,1372.6 110.2,1372 119.2 C1371.4 110.2,1365.4 104.2,1356 103.6 C1365.4 103,1371.4 97,1372 88Z" fill="#e8613a"/></g>
+  <g opacity="0.06"><path d="M1428 325 C1428.8 337,1437 345.2,1449 346 C1437 346.8,1428.8 355,1428 367 C1427.2 355,1419 346.8,1407 346 C1419 345.2,1427.2 337,1428 325Z" fill="#e8613a"/></g>
+  <g opacity="0.05"><path d="M371 175 C371.3 179.8,374.2 182.7,379 183 C374.2 183.3,371.3 186.2,371 191 C370.7 186.2,367.8 183.3,363 183 C367.8 182.7,370.7 179.8,371 175Z" fill="#e8613a"/></g>
+  <g opacity="0.07"><path d="M413 303 C413.4 310,418 314.6,425 315 C418 315.4,413.4 320,413 327 C412.6 320,408 315.4,401 315 C408 314.6,412.6 310,413 303Z" fill="#e8613a"/></g>
+  <g opacity="0.06"><path d="M1188 57 C1188.3 62.4,1191.6 65.7,1197 66 C1191.6 66.3,1188.3 69.6,1188 75 C1187.7 69.6,1184.4 66.3,1179 66 C1184.4 65.7,1187.7 62.4,1188 57Z" fill="#e8613a"/></g>
+  <g opacity="0.05"><path d="M1172 340 C1172.5 348,1177.8 353.3,1186 353.8 C1177.8 354.3,1172.5 359.6,1172 367.6 C1171.5 359.6,1166.2 354.3,1158 353.8 C1166.2 353.3,1171.5 348,1172 340Z" fill="#e8613a"/></g>
+  <g opacity="0.04"><path d="M1288 326 C1288.2 330,1290.6 332.4,1295 332.6 C1290.6 332.8,1288.2 335.2,1288 339.2 C1287.8 335.2,1285.4 332.8,1281 332.6 C1285.4 332.4,1287.8 330,1288 326Z" fill="#e8613a"/></g>
+  <g opacity="0.04"><path d="M533 138 C533.2 141.6,535.4 143.8,539 144 C535.4 144.2,533.2 146.4,533 150 C532.8 146.4,530.6 144.2,527 144 C530.6 143.8,532.8 141.6,533 138Z" fill="#e8613a"/></g>
+
+  <!-- Logo mark (dark container + star) -->
+  <g transform="translate(680, 128)">
+    <rect width="80" height="80" rx="18" fill="#0c0a09"/>
+    <g transform="translate(15, 15) scale(0.0977)">
+      <path d="M256 28 C260 140, 372 252, 484 256 C372 260, 260 372, 256 484 C252 372, 140 260, 28 256 C140 252, 252 140, 256 28Z" fill="url(#star-grad)"/>
+    </g>
+  </g>
+
+  <!-- Wordmark -->
+  <text x="784" y="183" font-family="'Space Grotesk', system-ui, -apple-system, sans-serif" font-weight="700" font-size="60" fill="#1a1715" letter-spacing="-1.8">vibeSpot</text>
+
+  <!-- Tagline -->
+  <text x="800" y="234" font-family="'DM Sans', system-ui, -apple-system, sans-serif" font-weight="400" font-size="21" fill="#78716c" text-anchor="middle" letter-spacing="0.2">Build HubSpot landing pages with AI</text>
+
+  <!-- Accent bar -->
+  <rect x="776" y="256" width="48" height="3" rx="1.5" fill="url(#bar-grad)" opacity="0.6"/>
+</svg>