Editor guide

Create a project

From the dashboard (/dashboard), the New project button opens a 6‑step wizard. You answer, the AI does the rest. You can close the window at any time: generation keeps running in the background and notifies you when it's done.

Step 1 · Your business

• Business name (required).
• Industry: restaurant, store, agency, consulting, health, education, technology, real estate, creative, nonprofit, or other. Choosing other reveals a field to describe the sector.
• Description (optional) and reference URL (optional).
• Monolingual or multi‑language. If multi, pick a primary language and at least one additional one among Spanish, English, Portuguese, French, German and Italian.
• Surprise me: shortcut that jumps straight to step 6 with sensible defaults.

Step 2 · Visual style

Six ready presets: modern, corporate, creative, elegant, tech, natural. Each ships with its palette and sample typography. Color mode can be auto (AI decides), preset (pick one of the six) or custom (paste your HEX values).

In custom you get a primary and accent color picker plus font selectors for headings and body among 16 sans‑serif, serif and display families (Inter, Poppins, Playfair Display, Space Grotesk and so on).

Step 3 · Structure

• Menu type: simple, mega or hamburger.
• Footer type: minimal, standard, complete or with newsletter.
• Home sections (draggable and reorderable): hero, services, about, testimonials, gallery, stats, CTA, blog, FAQ, contact. A Recommended button fills in a tested combination for your industry.

Step 4 · Content

Five communication tones: professional, casual, modern, elegant, personal. Each shows a real sample of copy so you know what to expect. Below you can add email, phone, address and links to Facebook, Instagram, Twitter/X, LinkedIn, YouTube and TikTok.

Step 5 · Images

Two paths:

• Placeholders (recommended): free stock images.
• Upload your own: up to 6 files, max 5 MB each. Accepted: image/jpeg, image/png, image/webp and image/svg+xml.

In both cases you can upload your logo separately.

Step 6 · Review and create

A summary with every choice grouped by section, Edit buttons to go back to any step, and a conceptual wireframe previewing the structure. Pressing Create my website starts the four‑stage build:

1. Visual system (color and typography tokens).
2. Home (sections with personalized copy).
3. Quality audit (accessibility and contrast checks).
4. Languages (if multi‑language is enabled).

Editor anatomy

When you open a project (/editor/:projectId) you see five zones:

1. Header (top): project/page breadcrumb, viewport selector, share, notifications bell, Git status and Publish button.
2. Toolbar (left rail on desktop, floating button on mobile): 14 tools + Queue and Report bug at the bottom.
3. Live preview (center): responsive iframe that auto‑refreshes (DOM morph) whenever the AI finishes a change.
4. Chat (bottom‑center): textarea with send options, attachments and modes bar.
5. Floating tool panel (right, when a tool is open): fixed 380 px width, closable with Esc.

The preview is an iframe served by the backend with an injected script (inspector.js) that intercepts clicks and hovers. When the AI edits files, the container receives a DOM morph (Idiomorph library) to update the page without losing scroll or focus.

Interaction modes

The modes bar sits next to the chat. Five buttons + one extra for the file tree. The active mode is persisted in localStorage (speaksite_editor_mode) and restored on return. All modes are disabled while the AI is processing.

Selection in the preview

When you click an element in Select or Edit, the script intercepts the event and sends the panel a payload with the CSS selector, tagName, classes, outerHTML, the element's rect and how many elements match that selector. You see a badge above the chat with a thumbnail of the element (captured with html2canvas) and the HTML tag.

The badge is green when the selector is unique and amber when more than one element matches (in that case a warning icon appears so you double‑check before sending the instruction).

Quick actions on an element

From the badge you can open a popover with four actions. Each one prefills the chat with a ready‑to‑send instruction:

• Delete — always available.
• Edit — only for tags with editable text (h1‑h6, p, span, a, li, button, label, img).
• Duplicate — always available.
• View code — expands the element's HTML inside the badge.

Direct edit

The Edit mode (Type icon in the modes bar) opens a floating panel when you click an element. The panel positions itself: prefers opening below, climbs above when there's no room, centers vertically if neither fits. After a successful save the element flashes green for 800 ms.

Edit text

• Rich editor with buttons for bold, italic, underline, link (prompt() for the URL) and clear formatting.
• Auto‑engages on tags that accept inline HTML (p, h1‑h6, li, td, th, span, div) when HTML tags are detected inside.
• You can toggle to plain text with the Rich/Plain switch.
• Shortcuts: Ctrl/Cmd + Enter saves; Escape cancels.

Edit images

• Side‑by‑side preview: current image + new.
• Upload via drag‑and‑drop or click. Formats: image/jpeg, image/png, image/gif, image/webp, image/svg+xml.
• Alt text field (for accessibility).
• Delete button: removes the reference from the code (the file stays in Media).

Edit links

• Fields: link text, URL (accepts internal paths like /contact or absolute ones https://…) and open in new tab (toggle).
• Save is enabled only when there are changes and both text and URL are set.

File tree

Next to the five modes, an extra button (FolderTree) opens the project's file tree over the preview. On desktop it's a 320 px sidebar; on mobile it fills the screen. Clicking a file shows its contents (read‑only, with syntax highlighting). Handy to see what the AI is touching or to locate a shared layout.

Writing a prompt

The chat textarea auto‑grows from 44‑48 px to a max of 120 px. From there it scrolls. Keys:

• Enter sends.
• Shift + Enter inserts a line break.

The placeholder shifts with context:

• No selection: “Describe the changes you want to make…”
• Single element selected: “Changes for <h1>…” (with the real tagName).
• Many elements: “Changes for N selected elements…”
• Drawn area: “Describe the changes for the marked area…”
• Replying to a previous query: “Describe the correction or tweak…” and a purple badge “Replying to: …” appears with the original message (closable with X).

Images and media

Three ways to attach images or videos:

1. Paperclip: opens the file picker.
2. Paste with Ctrl/Cmd + V when the clipboard has an image.
3. Drag into the chat area: an azure overlay reads “Drop the images here”.

The input accepts image/* + video/mp4, video/webm, video/ogg. The panel validates sizes: 4 MB per image, 25 MB per video (identical check when selecting from the Media library).

Attachments show as 48‑56 px thumbnails over the chat. Click to enlarge, red X on hover to remove. Library‑sourced files show with a blue border; newly uploaded (staged) ones with a gray border.

Attach from the library

In Media, toggle selection mode, check the files you want and press Attach to prompt. They travel to the chat without being duplicated on disk.

Voice notes

Voice notes are tied to Draw mode. While you draw a region, a microphone button lets you record and the audio is transcribed via the Web Speech API (default language es-ES). The text appears in a floating box next to the drawing and is sent with the message with a purple “Voice” badge.

Selecting in the preview

With Select mode on:

• Hover: highlights the element with a blue overlay.
• Click: pins it with a green overlay and pushes a badge to the chat.
• Alt or Shift + click: adds to a group (purple numbered overlay). Clicking one already picked removes it.
• Escape: clears the whole selection.

The CSS selector is built by priority: ID first, then data-* attributes, then unique attributes (name, type, role, href, src, alt), then a class path; :nth-child is a last resort. The panel tells you how many elements match.

Draw mode

Activating this mode overlays a canvas on the preview. You drag to draw yellow strokes (40 % opacity, 20 px wide). On release:

1. The bounding rect is computed.
2. A full‑page screenshot is taken with html2canvas.
3. Sample points inside the region query the iframe for the HTML elements underneath.
4. All of that (image, boundingBox, detectedElements, voiceTranscript) attaches to the next message.

You can draw multiple strokes before confirming. Buttons: Clear, Cancel and Confirm.

Send options

Below the chat there's a Send options button (SlidersHorizontal) that reveals four toggles. Each one only shows up when it makes sense for your project:

Apply to all languages

Languages icon. Shows up when the current page has linked translations. After applying the change to the active language, the AI translates the result to the rest. The preference is saved in localStorage under applyToAllLanguages.

Next to the toggle you'll see an estimate “+N translations, ~Nx tokens”. Once the query completes, the history shows how many translations landed with the pattern “N/M languages updated”.

Multi‑page

Layers icon. Visible when the project has more than one page. Off, the AI only reads and writes the current page and its controller. On, it can:

• Read any page as reference.
• Modify several at once if the instruction needs it.
• Touch shared layouts, components and global styles.
• Touch routes and project configuration.

The toggle doesn't persist across sessions (it resets to off every time you open the editor). The label under the toggle shows how many pages are in scope.

Embed form

ClipboardList icon. Shown when the project has at least one form created via the Forms tool. It's a select with the available forms. Picking one makes the backend receive embedFormId; the AI reads the form's fields and generates the HTML to insert it wherever you ask.

Web search

Globe icon. Always available. Lets the AI browse URLs and the web before answering. Handy for incorporating fresh data (opening hours, reference pricing, SEO trends). Consumes more credits.

Content search

First tool in the toolbar (TextSearch icon). It's a literal text search across every page and post of the project.

• Minimum: 2 characters. 300 ms debounce.
• Results grouped in two sections: Pages and Blog posts.
• Each result shows title, language (when applicable), a context snippet with the match highlighted in yellow, and the route.
• Clicking navigates to that page or post in the editor (and switches the preview language if needed).

Pages

Control center for the site. Three tabs: List, Pending and Redirects.

List

Paginated (10 per page). Filters by status (all, published, drafts, private) and, under multi‑language, by translation (all, complete, incomplete). Search by name/slug with a 300 ms debounce.

Each row shows:

• Title and route.
• Status badge (Published / Draft / Private). On monolingual projects, clicking the badge toggles between Published ↔ Draft.
• 404 badge when the controller doesn't exist.
• Language badge on multi‑language projects.
• Blue circles with the codes of the languages that do have a translation.
• Missing translation badge when languages are not complete.
• Translating badge with a pulsing icon when a translation query is in the queue.

Actions per row: View (loads that page in the preview), History (only with a linked Git repo), Translate (multi‑language only), Edit metadata and Delete (with confirmation). Under multi‑language, pages are shown as grouped cards by translation_group, and missing languages appear as buttons to kick off the translation.

Pending

Shows three things:

1. Orphan links: links in the menu/header/footer/content that point to non‑existing routes. For each: link text, URL, location (header, footer or content) with line number, and a + button that opens the page generator pre‑filled with the suggested title and slug.
2. 404 pages: config entries whose controller/view is missing. Each has a Delete button that removes them from config.json.
3. Planner plan: if you ran the page planner, the proposed items appear here with priority (high/medium/low). You can accept, dismiss or edit them before generating.

Redirects

Manages 301 (permanent, green badge) and 302 (temporary, yellow badge) redirects. Each rule has a source (slug or internal path) and a target (internal path or external URL). Create/edit/delete right from the panel. No auto‑detection: you add them manually.

Create a page

Two modes selectable with buttons at the top of the dialog.

Quick mode

• Title, slug and route (auto‑generated from the title, editable).
• Target languages (on multi‑language projects).
• Initial status: always Draft.

AI mode

On top of the fields above:

• Template: home, landing, content, contact, gallery, blog, portfolio, custom or error_404. Picking custom reveals a field to describe the type (“Privacy policy”, “FAQ”, “Pricing”). The error_404 template forces slug error-404 and route /error-404, and disables web search.
• Reference images: up to 5, drag‑and‑drop. The AI uses them as visual guidance.
• Logo (optional): if there's no global one, it's used in this page.
• Context: free textarea with content details.
• Web search: toggle + optional research topic field.
• Custom context: shows up when you have files uploaded in Settings › AI context.

On multi‑language projects, generating in several languages assigns a shared translation_group UUID and a slug suffix -<lang> for non‑default languages.

Edit metadata

Title, slug (auto‑normalizes to a‑z0‑9‑), route, status, and a SEO block with:

• SEO title (70‑char counter).
• Meta description (160‑char counter).
• Keywords.
• Robots (index follow, noindex follow, index nofollow, noindex nofollow).
• Canonical URL with an auto suggestion.
• OG Image with a Use detected button (finds the first image on the page when no OG image is set).

Page history

Available when the project has a Git repository. Three views: List of commits (date, author, message, SHA), Preview of the file at a specific commit, and Diff between that commit and HEAD. The Restore button creates an automatic backup before overwriting.

Translate a page

Translate with AI modal. Shows the page's current language, title and route, plus a selector with the available target languages (those that are neither the current one nor already translated). Submitting queues a task that you can follow in the Queue.

Blog

If the project doesn't have a blog yet, a banner lists the steps that will run: create the posts table, the index page, routes, RSS feed and per‑language categories. One click activates everything.

Posts

Listing filtered by status (published, draft, scheduled, private), category, and translation (multi‑language). Each post shows featured image, title, excerpt, category, reading time, date and tags.

Actions per post: view, translate (multi‑language), edit, delete.

Create a post

Two modes: AI and manual.

AI mode

• Topic (required): description of the content to generate.
• Tone: professional, casual, technical or creative.
• Length: short, medium or long.
• Category, featured image, target languages.
• Web search and custom context (same toggles as pages).

Manual mode

Fields: title, slug, excerpt, HTML content (textarea), featured image, status, category, tags, and a collapsible SEO block identical to the pages one (with counters for seo.title and meta description).

Categories

Create, edit, delete, translate. Shows how many posts each one holds.

Forms

Four tabs: Forms, Leads, SMTP and CRM.

Forms

Listing with name, slug, number of fields and submissions, plus status, CRM and auto‑detected badges. Per form: edit, view on page (for auto‑detected ones), preview, copy embed code, insert with AI, duplicate, activate/deactivate, delete.

Create a form

You can start from scratch, use AI (describe what fields you need) or auto‑detect if the HTML already has a <form>.

Each field has a type, label, name, required flag, placeholder, and some types take options. Supported types:

Form‑level settings: success message, redirect URL after submit, list of notification emails, submit button text, honeypot anti‑spam (on by default), and display type: inline or popup.

Popups

Four triggers: timer (delay in seconds, 0‑300), scroll (percentage 0‑100), exit_intent (cursor leaves the viewport) or button (CSS selector that opens the popup). Plus: overlay color, close on outside click, visible close button, max width, remember dismissed (and how many hours, 1‑720).

Leads

Submission inbox. Filter by form, unread indicator (purple dot), traffic source badge (UTMs), spam mark. Clicking a row opens the detail with all submitted fields, tracking, IP, user agent, referrer and UTMs. Export filtered forms to CSV/XLSX.

SMTP

Configure your own mail server for notifications. Fields: host, port (defaults to 587), user, password (stored encrypted), encryption (tls, ssl or none), from address and from name. A Test button sends a probe email.

CRM

Two levels:

• Global credentials: pick a provider (HubSpot, Pipedrive, custom connectors), fill in credentials and test the connection.
• Per form: enable sending to the CRM, pick provider, map form fields to CRM fields (AI suggests the mapping), decide whether to include UTMs and tracking. The test button sends a fake payload and shows three panels: test data, sent payload, and CRM response.

Languages

If multi‑language isn't on yet you see a placeholder with a Detect existing structure button that scans project folders (/es/, /en/, etc.) and the ?lang= parameter for auto‑configuration.

With multi‑language on, the tool groups five blocks:

URL strategy

• Prefix: /es/page, /en/page.
• Folder: same structure, different internals.
• Parameter: /page?lang=es.

Switching here updates every URL on the site.

Language list

Per language: flag, name, Primary badge, page counter (and progress if translations are pending). Hover actions: mark as primary (with a warning that 301 redirects will be created) and delete (with confirmation; removes every page in that language).

Translate with AI

Modal with target language selector and two buttons: Translate HOME and Translate ALL. The first one translates just the homepage; the second queues one task per page and you can follow progress in the Queue.

Language switcher on the site

Generate a header/footer switcher with AI (flags + dropdown). Pick style and position; the AI produces the HTML/JS.

Repair / Re‑detect

Two extra actions:

• Repair translation system: analyzes the project and rewrites config files and routes if something's inconsistent. Shows stages (queued → analyzing → starting → completed) and a list of created/modified files.
• Re‑detect translations (hreflang): re‑reads <link rel="alternate" hreflang="…"> tags and regroups pages by translation.

SEO

Five tabs: Metadata, Analysis, Links, Schema and Defaults.

Metadata (current page)

All fields auto‑save (1 s debounce). Color counters:

• Title: green ≤ 50, amber ≤ 60, red > 60. maxLength=70.
• Description: green ≤ 140, amber ≤ 160, red > 160. maxLength=200.
• Keywords, Robots (the four combinations), Twitter Card (inherit, summary, summary_large_image), OG Image (picker or external URL) and Canonical.

Buttons Generate SEO and, when the page has translations, Generate in all languages (queues one query per language). A Google SERP preview renders title, URL and description.

Analysis

Target keyword and 0‑100 score. The traffic‑light checklist covers 13 factors:

1. Title present and 30‑60 characters long.
2. Meta description present and 120‑160 characters long.
3. H1 present and unique.
4. Heading hierarchy (no skipped levels).
5. Alt text on every image.
6. Internal links present.
7. External links present.
8. Content length (≥ 300 words).
9. Target keyword in the title.
10. Target keyword in the description.
11. Target keyword in the H1.
12. Keyword density between 0.5 % and 2.5 %.
13. Open Graph image defined.

Below that, readability via Flesch Reading Ease: formula, average words per sentence and average syllables per word.

Links

Three views:

• Current page: incoming (from other pages or the shared layout) and outgoing links. Amber warning when the page has no incoming links and isn't the homepage.
• Global: totals (pages, links, average per page), orphan pages, pages without outgoing links, and the top linked pages.
• External: external URLs on the current page, from the shared layout, and (optional) from other pages.

Schema (JSON‑LD)

Detects schemas already injected on the current page and lets you edit them in a JSON‑validated textarea. You can add new schemas in two modes:

• AI: pick a type and describe what you need; the AI generates it.
• Manual: paste the JSON‑LD. Requires at least @context or @type.

Available types: FAQPage, Organization, LocalBusiness, BreadcrumbList, Product, Service, Article, WebSite.

Defaults

Project‑wide fallbacks used when a page has no metadata of its own:

• Title suffix (e.g. “ · My Site”).
• og:type (website, article, product, profile).
• og:site_name.
• twitter:card (summary, summary_large_image).

Media

Project's image and video library. Two views: grid and list. Sort by name (A‑Z / Z‑A), size, type or date (ascending/descending).

Accepted formats:

• Images: JPG, PNG, GIF, WebP, AVIF, SVG. Max 4 MB.
• Videos: MP4, WebM, Ogg. Max 25 MB.

Upload by drag‑and‑drop, clicking the zone or multi‑select. Per file: thumbnail, size, type, dimensions (when it applies), copy path /public/assets/<subdir>/<filename>, download or delete. There's a selection mode to pick multiple files and attach them to the chat.

Optimization (WebP conversion) runs automatically on publish.

Settings

Eight sections, in this order: General, Domain, SEO, Speed, Cookies, AI context, Environment variables, Dependencies. Most fields auto‑save with a 1 s debounce.

General

Favicon (.ico, .png, .svg with drag‑and‑drop), site title, description, site language (Spanish, English, French, German, Portuguese, Italian) and base URL.

Domain

See the full section in Domains. There's also an Apache/LiteSpeed toggle here that tweaks the generated .htaccess for compatibility.

SEO

• Global noindex: when on, the whole site serves robots: noindex. Useful during construction.
• XML sitemap: toggle + link to /sitemap.xml.
• robots.txt: editor with visual and advanced modes.

Speed

One toggle: Tailwind via CDN (faster to iterate, heavier runtime) or compiled (lighter in production).

Cookies

Three banner types:

• Informational: simple notice.
• Basic GDPR: accept / reject.
• GDPR with categories: analytics, marketing, strictly necessary.

Copy is generated by AI and adapted to the site language. A toggle then enables/disables the banner and a button regenerates the copy.

AI context

Upload .txt/.md files or paste notes with brand data: tone, legal claims, pricing, proper nouns. The AI reads it on every generation. A usage meter (characters vs. limit) turns amber over 70 % and red over 90 %. The ceiling is five files or the plan's character limit.

Environment variables

Editor for the project's .env. Two views: visual (list of keys with delete) and raw (textarea). Clicking + appends a NEW_VAR= line ready to fill. The .env never syncs with GitHub.

Dependencies (Composer)

Only appears when the project has composer.json. Shows three badges (composer.json, vendor/, composer.lock) and two buttons: Install (highlighted if vendor/ is missing) and Update. The last command output stays expandable.

Styles

Four tabs: AI, Colors, Typography, Preview.

AI

Describe your business or hit analyze‑current‑page. The AI returns a suggested palette, two typefaces (headings and body) and a paragraph explaining each choice. The Apply and generate styles button saves the decision and regenerates global tokens. Four quick examples (coffee shop, tech startup, yoga, creative agency) prefill the prompt.

Colors

Thirteen tokens grouped by role:

• Primary: primary, primary_light, primary_dark, secondary, accent.
• Backgrounds: background, background_alt.
• Text: foreground, foreground_muted.
• States: success, warning, error.

Each one has a HEX picker + color wheel. Changes are pushed to the iframe live (partial morph) so you can preview before publishing.

Typography

Heading font and body font (default weights 400‑700), base size (14‑18 px) and an option to upload your own typefaces. Fonts come from Google Fonts, the system or custom. Live sample under the selectors.

Preview

Renders the style applied to a mock viewport before you save.

Google Tag Manager

Five tabs: Status, Credentials, Resources, AI, Settings.

Status badge in the header: connected (green), error (red), unconfigured (gray), disconnected (yellow).

Credentials

Upload a Google service‑account JSON. It's validated for shape and type: "service_account". Then fill Account ID, Container ID, Workspace ID (defaults to 1) and optionally GA4 Measurement ID (G-XXXXXXXXXX). Six steps of help at the bottom.

Resources

Lists current variables, triggers and tags with search and mapped types (v = Data Layer, c = Constant, jsm = JavaScript, k = Cookie, aev = Auto Event; triggers like pageview, click, linkClick, customEvent, formSubmission, scrollDepth, gaawe, gaawc). Hover on each resource to delete it.

AI

Describe a goal (“track the buy click and send it to GA4”) and the AI proposes a resource structure. Six predefined examples prefill the prompt. The preview shows the reasoning and the detail of variables, triggers and tags. The Apply button only proposes the resources; the user confirms their creation, nothing is written straight to GTM without consent.

Settings

Three toggles (auto‑inject, inject into head, inject into body) and the head/body snippets ready to copy. Four manual install steps if you'd rather paste them yourself.

Google Ads

Connect your account via Customer ID (1234567890 or 123-456-7890) through OAuth. The 30‑day summary shows spend, conversions, clicks, impressions, CTR, CPC and active campaigns. There's a refresh button.

Campaigns listing (max 5 first with a “+ N more”): per campaign, pause/activate and two AI actions, Analyze (campaign analysis) and Optimize (concrete recommendations, priority‑sorted in red/amber/blue with estimated lift).

Available reports: Performance and Audit. Listing of recent reports with dates.

Create with AI: campaign description, site URL and daily budget (min 1 USD). The AI returns candidate names, ad groups (with keyword counts), impression/click estimates and expected CTR. Actual execution is up to you using the proposed structure.

Analytics

Three blocks (GA4, GTM quick mode, Microsoft Clarity). Each with an enable toggle, an ID field and format validation:

• GA4: Measurement ID, format G-[A-Z0-9]+.
• GTM: Container ID, format GTM-[A-Z0-9]+.
• Microsoft Clarity: Project ID, format [a-z0-9]+.

If the ID is empty while the toggle is on, Save is disabled and a format error shows. On save, the scripts are injected in every page on publish.

Content assistant

A chat separate from the main one, tuned for questions about the current page. Two modes toggled via the Pencil icon in the header:

• Analysis (default): answers without touching files. The Globe toggle enables web search.
• Edit: performs real changes and returns a summary card with the modified files (created in green, updated in blue, deleted in red) and the line count changed.

Five quick actions visible only on the first message: Analyze SEO, Check accessibility, Find issues, Suggest improvements, Review responsive.

Conversations persist in localStorage (cq-history-<projectId>, last 30 messages). In edit mode the chat passes the last exchanges as context so follow‑ups work (“now make it blue”, “revert that”).

The loading stages while editing are four, with growing delays: Reading files (0 s), Making changes (2 s), Applying edits (8 s), Validating code (20 s).

Agents

Two agents active in the UI:

• Page audit: sweeps links, images and buttons in a single pass.
• Design consistency: adjusts Tailwind classes across the site to match the home.

Results are grouped by target (page, layout, post). Each target can have issues at three severities: critical (red), warning (amber), info (blue). The UI also shows fixes applied and targets failed.

Concrete target selection is decided by the backend based on the agent type and the project. Results are cached in localStorage (agents-<projectId>-<agentId>) so you don't lose them on reload.

Queue

Button at the bottom of the toolbar (ListTodo). Three tabs: Processing, Pending, Completed (also includes error and cancelled). The button counter is processing.length + pending.length; from 10 it renders as 9+.

Each query shows:

• Original message (truncated to two lines, expandable past 50 chars).
• Context badges: Languages with N/M progress when translations were involved, Files when multi‑page, Globe when web search.
• Element(s) selected at the time.
• Thumbnails of attached images.
• Metadata: page, duration, user, timestamp, number of follow‑ups.
• Current stage while processing.
• Change summary on completion: files created/updated/deleted with line counts.

Actions by state:

Status polling runs every 3 seconds and stops only when no active queries are left. The Flag button opens a dialog to send the team a ticket with the exact prompt, the result and the context.

Report a bug

Button under the queue (Bug icon). Dialog with three fields:

• Title (required, max 255).
• Description (required, max 5000).
• Screenshot: drag‑and‑drop, click or paste with Ctrl/Cmd + V. Accepts JPEG/JPG/PNG/GIF/WEBP.

Under the fields there's a collapsible Automatic context section showing what's attached without you doing anything: current URL, user agent, viewport (width x height), project ID and slug, and an ISO timestamp.

Editor header

Left to right:

• Breadcrumb: project name + current page. Clicking the project takes you to the dashboard.
• Viewport selector: Mobile (375), Tablet (768), Desktop (1280), Maximize. Shows the current width in pixels next to the icon.
• Super Admin Badge: only visible for super admins; opens a dropdown with toggles to enable auto‑repair for panel code or for project code.
• Share: dialog to invite collaborators by email with editor or viewer role.
• Notifications bell: counter of pending invitations (9+ max). The popover lists each invitation with project, inviter and role, plus Accept/Decline.
• Git status: current branch, commits to push (orange) and to pull (amber). Refreshes every 30 s.
• Publish: see the next section.

On mobile part of the header collapses into a MoreVertical dropdown (MobileHeaderMenu) that contains share, Git status and a full‑screen Git panel.

Publish

The main button label changes with state:

• Publish (never published).
• Publish changes (edits pending).
• Republish (published and up‑to‑date).
• Published with a green check for 1‑2 s after a successful publish.

Two badges appear next to the button depending on project state:

• Under construction (orange) if you unpublished.
• Pending changes (orange) with unpublished edits.
• An external‑link icon to open the live site when published.

The dropdown contains:

1. Copy link (when published).
2. Publish changes / Republish.
3. Configure destination.
4. Unpublish (when published).

Destinations

• SpeakSite (default): hosting included.
• FTP: requires a paid plan. Fields: host, port, user, password (hidden with a show/hide toggle), destination path (default /) and SSL/TLS. Buttons: Save/Verify, Test connection, Delete. Credentials must be verified before publishing via FTP.

Publish flow

1. Automatic image optimization (WebP conversion).
2. Publish. FTP: progress bar with uploaded files, percentage, speed (MB/s, KB/s, B/s), bytes and current file name. Polling every 2 s.
3. On completion: green toast with summary of time and files.

Version history

History icon in the header. Lists saved versions with date, label (Snapshot pre‑publish vN or a manual label) and author. Per version you can Restore (with confirmation; another automatic snapshot is created beforehand) or Delete (permanent, with confirmation). Snapshots are created automatically before each publish and restore.

Domains

Two distinct contexts:

In Settings › Domain

Reserved for non‑free plans. You can add a custom domain and see status: pending verification (amber) or verified (green). While pending, the UI shows the DNS records to copy (type A or AAAA, name @ or www, IP value, TTL 3600). Each value has a copy button. Once propagation is detected, the SSL certificate (Let's Encrypt) is issued automatically. If anything goes wrong, a Generate SSL certificate button retries without recreating the domain.

Domains page (/domains)

Listing of domains you own with statuses (active, pending_payment, expired), expiration and linked project. Three flows:

• Search: domain + availability result. If available, shows price per year + Buy button.
• Buy: years selector (1‑5), WHOIS Privacy, contact form (first name, last name, email, phone, address, city, region, postal code, country) and checkout.
• Transfer: domain name, EPP/Auth code and contact.

GitHub

Optional repo link. With GitHub connected, the header surfaces the active branch, commits to push/pull and a Git panel with commit, push, pull and branch switching. Sensitive files, images and temporary files are never pushed to the repo.

Account · Profile

In /account, the first section shows avatar (initial on a gradient), name, email, a current‑plan badge and three main settings:

• Panel language: Spanish or English (persists on the fly via PUT /user/locale).
• Marketing emails: opt‑in toggle.
• Change password: dialog with current, new and confirmation passwords. Minimum 8 characters; both new fields must match.

Account · Plan and credits

Plan usage

Three progress bars:

• Monthly queries: includes bonus credits if you have active packs.
• Projects: used vs. plan limit.
• Storage: in MB or GB depending on usage.

When a downgrade is scheduled, an amber banner shows the effective date and a Cancel downgrade button. Main buttons: Manage Billing (opens the Stripe Customer Portal), Resume Subscription and Cancel Subscription.

Plans

Monthly/annual toggle. One card per plan, left to right, with price, features, a credit tier selector (Lovable‑style: adjust monthly allowance without changing plans) and an action button:

• Subscribe when you don't have a subscription.
• Change to N credits if it's your current plan and you moved the tier.
• Upgrade / Downgrade when moving to another plan.
• Pending change when the change is already scheduled.

Credit packs

Only visible when your plan has can_buy_credits = true. They add bonus credits that don't reset at month‑end.

Account · MCP token

Dedicated section in /account. The Generate button creates a token and returns a URL shaped like https://studio.speaksite.app/mcp/<TOKEN>. Paste it into Claude.ai under Settings › Connectors. From then on, Claude.ai can edit your projects from any conversation using the panel's MCP toolset. The token regenerates when you change your password. Buttons: Regenerate and Revoke.

Account · Referrals

A unique link to share. Three indicators:

• Total: how many people signed up with your link.
• Rewarded: how many subscribed to a plan (and earned you credit).
• Credits earned.

Below, a list of referrals with status rewarded (green) or pending (amber).

Mobile usage

The breakpoint is max-width: 767px. Main changes:

• The toolbar is replaced by a floating button (48 × 48 px) in the bottom‑right corner above the chat. A tap opens a bottom sheet with the 14 tools, Queue and Report bug in a 4‑column grid. Swipe down to close.
• The chat goes into two rows: compact modes bar on top, input and send below. Respects iPhone's safe area (pb-safe).
• Chat input forces 16 px to avoid automatic zoom on iOS.
• Part of the header collapses into a MoreVertical menu. ViewportSelector and Git live inside.
• Big panels (forms, SEO, etc.) render as near‑fullscreen dialogs (max-w-[95vw], max-h-[85vh]).
• The file tree flips to fullscreen overlay.

Keyboard shortcuts

Missing something? Open the queue and click the flag on any query to send the thread to the team, or use Report a bug from the panel.