De website wordt geladen en de App Viewer werkt normaal, geef het even de tijd. Als het langer dan 2 minuten duurt, klik dan op het pictogram Vernieuwen of controleer het Console-paneel op fouten.

Agents kunnen tijdens de build tegen problemen aanlopen, wat af en toe webpaginafouten veroorzaakt. Klik op Resolve en de agents herstellen het voor je; zodra het is opgelost, keert de preview terug naar normaal. Rode meldingen zijn een signaal, geen crisis.

Voor het verwijderen van badges is Pro of hoger vereist. Klik op je avatar in de rechterbovenhoek, selecteer Instellingen, ga vervolgens naar Plannen & Facturering en kies het Pro- of Max-abonnement. Na de upgrade wordt de Atoms-badge automatisch van je gepubliceerde pagina's verwijderd.

1. Open Design Mode en selecteer het exacte element dat verkeerd is uitgelijnd of onjuist is gestyled.
2. Vermeld de pagina en breakpoint, het huidige probleem, het gewenste resultaat en wat niet mag veranderen.
3. Gebruik meetbare instructies zoals padding, uitlijning, breedte, kleur of wrapgedrag. Voeg een referentieafbeelding toe wanneer visuele overeenkomst belangrijk is.
4. Pas één wijziging toe en controleer daarna desktop- en mobiele lay-outs plus belangrijke statussen zoals laden, leeg, hover en fout.
5. Als het resultaat een ander gebied kapotmaakt, keer dan terug naar de laatst werkende versie en probeer het opnieuw met een nauwer doel.

1. Bevestig of het probleem alleen App Viewer, de Preview URL of ook de gepubliceerde site beïnvloedt.
2. Vernieuw één keer, open de Preview in een nieuw tabblad en test een Incognito-venster.
3. Controleer of de huidige taak of build nog actief is. Wacht tot deze is voltooid voordat je het opnieuw probeert.
4. Als een expliciet bericht zegt dat het Cloud & AI-saldo onvoldoende is of dat de app is opgeschort, open dan Instellingen → Cloud & AI en controleer dat saldo. Waardeer niet op alleen op basis van een leeg scherm.
5. Leg eventuele Console- of Network-fouten vast zonder cookies, tokens of geheime waarden te delen.

Als het scherm leeg blijft, neem dan contact op met Support met de Chat Link, volledige Viewer URL, tijd en tijdzone, getroffen omgevingen, screenshot en opgeschoonde foutdetails.

1. Controleer of alleen App Viewer, de Preview URL of de gepubliceerde site is getroffen.
2. Vernieuw één keer, open de Preview in een nieuw tabblad en test een Incognito-venster.
3. Controleer of de huidige taak of build nog actief is en wacht tot deze is voltooid.
4. Test de laatst bekende werkende versie. Als die werkt, vergelijk dan de recente wijziging die het lege scherm heeft veroorzaakt.
5. Open Instellingen → Cloud & AI alleen wanneer het product expliciet meldt dat er onvoldoende saldo is of dat de app is opgeschort.

Als het probleem aanhoudt, neem dan contact op met Support met de Chat Link, volledige Viewer URL, versie, tijd en tijdzone, getroffen omgevingen, screenshot en opgeschoonde Console- of Network-fout.

Preview en de gepubliceerde site zijn onafhankelijke kanalen. Opslaan of previewen zet wijzigingen niet door naar productie.

1. Klik op Update in het paneel Publiceren — Open het paneel Publiceren en klik op Update. Wacht tot de status Up to date toont.
2. Forceer een vernieuwing van de live site — Druk op Cmd+Shift+R (Mac) of Ctrl+F5 (Windows), of open de URL in een Incognito-venster om browsercache uit te sluiten.
3. Controleer het versienummer van de gepubliceerde versie — Bevestig in het paneel Publiceren dat de versie overeenkomt met wat je in Preview ziet. Als ze verschillen, publiceer dan opnieuw.
4. Test het platform-Prod-subdomein — Als je een aangepast domein gebruikt, open dan ook apart de standaard Prod-URL. Als het Prod-subdomein is bijgewerkt maar het aangepaste domein niet, dan is het probleem DNS- of CDN-caching.

Als het probleem aanhoudt, geef dan de Preview URL, Prod URL, screenshots van een vergelijking naast elkaar en het tijdstip waarop je op Publiceren of Update hebt geklikt.

Wanneer de agent de lay-out of styling wijzigt, kan dit onbedoeld het responsieve gedrag op kleinere schermen verstoren.

1. Bekijk eerst op mobiele breedte — Gebruik de apparaatwissel in de App Viewer-werkbalk om naar mobiele weergave te schakelen en controleer het resultaat vóór publicatie.
2. Gebruik Design Mode in mobiele weergave — Schakel over naar Design Mode terwijl de apparaatwissel op mobiel staat. Klik op het kapotte element zodat de agent alleen dat component op die schermgrootte target.
3. Geef expliciete responsieve beperkingen — Vertel de agent precies hoe de mobiele lay-out eruit moet zien. Voorbeeld: "Op schermen smaller dan 768px, stapel de kaarten in één kolom en stel padding in op 16px."
4. Vraag de agent om bestaande media queries te behouden — Voeg bij verzoeken voor desktopwijzigingen toe: "Wijzig geen bestaande responsieve of mobiele stijlen."

Als het probleem aanhoudt, geef dan de Chat Link, een screenshot van de kapotte mobiele lay-out en een referentieafbeelding van de verwachte lay-out.

Als afbeeldingen kapot lijken, plaatsaanduidingspictogrammen tonen of niet laden:

1. Controleer bestandspaden van afbeeldingen — Open de sectie Bestanden en controleer of de afbeeldingsbestanden bestaan op de paden waarnaar in je code wordt verwezen. De agent kan bestanden tijdens bewerkingen hebben verplaatst of hernoemd.
2. Controleer bestandsgrootte en indeling — Zeer grote afbeeldingen of niet-ondersteunde indelingen laden mogelijk niet. Comprimeer afbeeldingen of converteer naar PNG, JPG of WebP.
3. Controleer Cloud-opslag — Ga naar Instellingen > Cloud & AI om te bevestigen dat je beschikbare opslagruimte hebt.
4. Forceer vernieuwen — Druk op Cmd+Shift+R (Mac) of Ctrl+F5 (Windows) om gecachte afbeeldingsverwijzingen te wissen.

Als het probleem aanhoudt, geef dan de Chat Link, de URL van de ontbrekende afbeelding en een screenshot van de kapotte status.

Wanneer de agent niet-gerelateerde elementen wijzigt of regressies in andere delen van de pagina introduceert:

1. Ga terug — Ga naar Geschiedenis en Remix vanaf de laatste stabiele versie. Dit reset de chatcontext terwijl je code behouden blijft.
2. Gebruik Design Mode om te isoleren — Schakel over naar Design Mode en klik direct op het specifieke element. Dit verankert het bewerkingsbereik van de agent aan dat component.
3. Voeg expliciete beperkingen toe — Geef duidelijk aan wat NIET mag veranderen. Voorbeeld: "Verander alleen de achtergrondkleur van de header naar #1A365D. Wijzig de navigatiebalk, footer of enig ander component niet."
4. Eén wijziging per prompt — Voer één wijziging uit, controleer het resultaat en ga dan verder met de volgende.

Als de agent herhaaldelijk regressies in andere elementen veroorzaakt, voer dan een Remix uit vanaf een stabiele versie en probeer het opnieuw met een strak afgebakende instructie.

Als het Preview-paneel een buildfout, een rode foutbanner of een bericht over ontbrekende pakketten toont:

1. Gebruik de knop Resolve — Als er een melding Probleemrapport verschijnt in de App Viewer, klik dan op Resolve en de AI analyseert en herstelt automatisch alle geïdentificeerde fouten. Als er geen knop Resolve verschijnt, kopieer dan de exacte foutmelding uit het Console-paneel en plak die naar de agent met: "Fix this build error: [error message]."
2. Controleer recente wijzigingen — Als de fout na een specifieke bewerking verscheen, ga dan naar Geschiedenis en vergelijk met de laatst werkende versie om vast te stellen welke wijziging de breuk veroorzaakte.
3. Remix vanaf de laatst werkende versie — Als de fout moeilijk op te lossen is, voer dan een Remix uit vanaf je laatste succesvolle controlepunt en pas wijzigingen stapsgewijs opnieuw toe.
4. Controleer pakketcompatibiliteit — Als de fout naar een specifiek pakket verwijst, vraag de agent dan: "Check whether [package name] is compatible with the current project setup and fix any version conflicts."

Opmerking: Als de foutmelding verwijst naar platformcomponenten (App Viewer, opstartscript, Publiceren, deployrecord) of interne bestanden van pakketten van derden (bijv. @vue/compiler-core, vite), kan dit een platformprobleem zijn in plaats van een agentprobleem. Neem contact op met Support met de volledige foutmelding.

Als het probleem aanhoudt, geef dan de volledige foutmelding, de Chat Link en een screenshot van de fout.

Als de agent bevestigt dat de wijziging is uitgevoerd, maar het visuele resultaat niet is veranderd:

1. Forceer vernieuwen — Druk op Cmd+Shift+R (Mac) of Ctrl+F5 (Windows). CSS-wijzigingen worden vaak door de browser gecachet.
2. Controleer op CSS-specificiteitsconflicten — De agent kan stijlen hebben toegevoegd die door bestaande regels worden overschreven. Vraag de agent: "Check whether the style I requested is being overridden by another CSS rule, and fix the specificity if needed."
3. Gebruik Design Mode om te inspecteren — Schakel over naar Design Mode en klik op het element. De visuele editor links toont de momenteel toegepaste kleuren, afstanden, typografie en lay-outeigenschappen, zodat je kunt zien of je gevraagde wijziging is toegepast.
4. Controleer het juiste bestand — Bij projecten met zowel globale stylesheets als stijlen op componentniveau kan de agent het verkeerde bestand hebben bewerkt. Vraag: "Where did you apply the change? Show me the file path and line."

Als het probleem aanhoudt, geef dan de Chat Link, een screenshot van het ongewijzigde element en de exacte stijlwaarden die je hebt gevraagd.

Design Mode gebruikt de visuele lay-out om te bepalen op welk component je mikt. Geneste of overlappende elementen kunnen een onjuiste selectie veroorzaken.

1. Zoom in — Zoom in op het gebied voordat je klikt. Dit helpt om dicht geneste componenten van elkaar te onderscheiden.
2. Gebruik tekstbeschrijving als back-up — Als herhaald klikken steeds het verkeerde element selecteert, beschrijf het dan in plaats daarvan in de chat. Voorbeeld: "Select the second button inside the pricing card in the right column."
3. Verwijs via bestandspad — Als je weet welk bestand het component bevat, vertel het de agent dan direct: "Edit the element in src/components/PricingCard.tsx, line 42."

Als selectieproblemen aanhouden, geef dan een screenshot waarop het gewenste element is gemarkeerd en de Chat Link.