Run & Preview

Die Schleife aus Code ändern → ausführen → Ergebnis prüfen endet in Blyck. Fehler kehren als Editor-Markierungen zurück, der Web-Bildschirm wird direkt ins Panel eingebettet, und die KI sieht den Bildschirm selbst und verifiziert.

Run & Observe — ausführen und beobachten

Drückst du den ▶ Ausführen-Button, fließt die Ausgabe nicht einfach vorbei. Der Problem Matcher parst Fehler in der Echtzeit-Ausgabe und strukturiert sie nach Datei · Zeile · Schweregrad und setzt an der betreffenden Stelle eine Editor-Markierung (rote Unterstreichung). Du musst der Fehlermeldung nicht mehr mit den Augen folgen, um die Datei zu finden.

Automatische Erkennung des Ausführungsbefehls

Anhand der Marker-Datei im Projektstamm wird automatisch ein Standard-Ausführungsbefehl vorgeschlagen.

Erkannte Datei	Vorgeschlagener Befehl
package.json	npm start (erkennt auch build- · test-Skripte)
go.mod	go run .
Cargo.toml	cargo run
*.csproj / .sln	dotnet run
pyproject.toml / setup.py	pytest
Makefile	make
einzelne .py / .js-Datei	python <Datei> / node <Datei>

Der Befehl ist frei anpassbar und wird pro Projekt gespeichert. Im Ausgabe-Panel fließen Befehl ($) · Standardausgabe (weiß) · Standardfehler (rot) in Echtzeit, mit bis zu 5.000 Zeilen. Während der Ausführung wechselt der Button auf ■ Stopp und bricht den Prozess bei Klick sofort ab.

Sprachspezifisches Fehler-Parsing (Problem Matcher)

Sprache / Tool	Parsing-Ziel
Python	Traceback (File "...", line N)
Go / Rust	Kompilierfehler (filename:line:col)
C / C++ (gcc · clang)	Warnungen·Fehler
C# (MSBuild · dotnet)	Build-Fehler
Node.js	Stacktrace
Benutzerdefiniert	Matcher per Regex selbst hinzufügen

Geparste Fehler werden im Ausgabe-Panel im Format Dateiname:Zeilennummer hervorgehoben; per Klick springt der Editor zur betreffenden Zeile.

Zusammen mit der KI nutzen

Auch der KI-Chat nutzt denselben Pfad. Die KI führt mit dem Tool run_observe Tests aus und korrigiert auf Basis der geparsten Fehlerstellen selbst den Code. Funktioniert im Act- (⚡ Ausführen+Prüfen) · Auto- (🚀 Auto) Modus; serverartige Prozesse sammeln das Ergebnis nach einem 30-Sekunden-Timeout.

Nur lokal gespeicherte Dateien

Der ▶ Ausführen-Button erscheint nur bei lokal gespeicherten Dateien. Bei Remote- (SFTP) Dateien oder ungespeicherten Untitled-Dateien wird er nicht angezeigt.

---

Live Preview — der Browser in der App

Nachdem du den Dev-Server gestartet hast, bettest du den Web-Bildschirm direkt ins Panel ein. Ohne einen separaten Browser zu öffnen und zwischen Fenstern zu wechseln, behältst du Code · Terminal · Bildschirm in einem Blickfeld.

Vorschau öffnen

1. Starte zunächst im Terminal den Dev-Server (npm run dev, python -m http.server usw.).
2. Neue-Registerkarte-Menü (+) → 🌐 Web-Vorschau… wählen.
3. Gib im URL-Eingabefeld die Serveradresse ein (z. B. http://localhost:3000).

Dev-Server erforderlich

Öffnest du die Vorschau, ohne dass der Dev-Server läuft, schlägt das Laden fehl. Starte unbedingt zuerst den Server und gib dann die URL ein.

Header-Steuerung

Button	Aktion
Aktualisieren	Aktuelle URL neu laden
Zoom 25%~500%	Skalierung anpassen. Klick auf die Zoomzahl kehrt sofort zu 100% zurück
URL-Leiste	Direkt zu einem anderen Pfad navigieren

Konsolen-Logs und fetch/XHR-Netzwerkantworten werden jeweils bis zu den letzten 200 automatisch gesammelt. Die KI nutzt diese Daten bei der Diagnose.

---

KI-Live-Preview-Tools

Im KI-Chat kannst du das Vorschau-Panel direkt steuern. Im Act- (⚡) oder Auto- (🚀) Modus des KI-Chats sind die folgenden Tools aktiviert.

Tool	Aktion
panel_screenshot	Aktuellen Bildschirm erfassen → KI prüft als Bild (Panel-Typ wird automatisch erkannt)
preview_navigate	Zur angegebenen URL navigieren
preview_click	Klick auf Koordinate oder Selektor
preview_type	Text eingeben
preview_eval	JavaScript in der Seite ausführen und Ergebnis zurückgeben
preview_wait	Auf Selektor oder N Sekunden warten (zum Warten auf abgeschlossenen Seitenladen)
preview_console_logs	Konsolenfehler·Warnungen abfragen
preview_network	Liste der Netzwerkanfragen abfragen

Lässt du paneId weg, wird es auf das aktuell aktive Vorschau-Panel angewendet.

Beispiel-Prompt:

Trage ins Login-Formular ein Testkonto (test@example.com / 1234) ein und sende es ab.
Wenn es Konsolenfehler gibt, finde die Ursache und behebe sie.

Die KI führt in der Reihenfolge preview_type → preview_click → preview_wait → panel_screenshot → preview_console_logs automatisch aus.

Seitenlade-Timing

Schlägt preview_eval sofort fehl, lädt die Seite noch. Führe zuerst preview_wait aus, um den abgeschlossenen Ladevorgang abzuwarten, und versuche es erneut.

---

KI-Vision-Regressionsprüfung

Statt zu sagen „behoben”, beweise es mit dem Bildschirm. Die Bildschirme vor und nach der Code-Änderung werden pixelweise verglichen, um unbeabsichtigte visuelle Veränderungen automatisch zu erkennen.

Ablauf der Vision-Regression

1. Baseline speichern — preview_baseline_set im gewünschten Zustand vor der Änderung ausführen
2. Code ändern — durch die KI oder direkte Bearbeitung
3. Vergleichen — preview_baseline_diff ausführen → liefert ein Bild mit der Änderungsrate (%) und den Änderungsbereichen, zusammengesetzt mit roten Boxen

Da die KI den Screenshot per Vision liest und die Konsolen-Logs gegenprüft, erkennt sie automatisch, ob nur die beabsichtigte Änderung eingetreten ist · ob nichts anderes kaputtgegangen ist (visuelle Regression).

Tool	Aktion
preview_baseline_set	Aktuellen Bildschirm als Baseline speichern
preview_baseline_diff	Aktuellen Bildschirm mit Baseline pixelweise vergleichen, Änderungsrate + Diff-Bild zurückgeben

Auch Desktop-Apps werden unterstützt

Nicht-Web-Desktop-Apps nutzen denselben Ablauf über den Desktop-Mirror. Neue-Registerkarte-Menü → 🖥️ Desktop-Aufnahme… → bei Auswahl eines App-Fensters Live-Streaming (nur Ansicht). Die KI erfasst das Fenster mit dem Tool panel_screenshot und findet es selbst nach einem App-Neustart über den Fenstertitel wieder.

---

Einschränkungen

• Die automatische Steuerung (Klicken · Eingeben) der Live Preview funktioniert nur innerhalb des eingebetteten Vorschau-Panels. Externe Browserfenster lassen sich nicht steuern.
• Der Vision-Regressionsvergleich basiert auf der Fenstergröße zum Zeitpunkt der Baseline-Speicherung. Ändert sich die Panel-Größe, speichere die Baseline erneut.
• Der ▶ Ausführen-Button erscheint nur bei lokal gespeicherten Dateien. Bei Remote-SFTP-Dateien ist er deaktiviert.
• Das Tool run_observe (autonome KI-Ausführung) funktioniert nur im ⚡ Ausführen+Prüfen- · 🚀 Auto-Modus. Im 💬 Chat- · 📋 Planungs-Modus ist es nicht nutzbar.
• Bei serverartigen Prozessen (npm run dev usw.) ist das run_observe-Timeout auf 30 Sekunden begrenzt.

---

FAQ

F. Der ▶ Ausführen-Button ist nicht sichtbar. → Es handelt sich um eine Remote- (SFTP) Datei oder eine noch nicht gespeicherte Datei. Speichere sie lokal und öffne sie erneut, dann wird er angezeigt.

F. Die Vorschau lädt nicht. → Prüfe, ob der Dev-Server läuft. Ohne Server funktioniert es nicht. Starte den Server zuerst im Terminal z. B. mit npm run dev. Details siehe die Seite Problembehebung.

F. Wie nutze ich die KI-Vorschau-Tools? → Wechsle im KI-Chat in den Modus ⚡ Ausführen+Prüfen (Ctrl+3) oder 🚀 Auto (Ctrl+4) und stelle deine Anfrage, während das Vorschau-Panel geöffnet ist.

F. preview_eval schlägt sofort fehl. → Die Seite lädt noch. Warte mit preview_wait den abgeschlossenen Ladevorgang ab und versuche es erneut.

F. Im Editor werden keine Fehlermarkierungen gesetzt. → Prüfe, ob es eine vom Problem Matcher unterstützte Sprache ist. Benutzerdefinierte Fehlerformate kannst du durch Hinzufügen eines Regex-Matchers registrieren.

F. Der Vision-Regressionsvergleich liefert seltsame Ergebnisse. → Möglicherweise hat sich die Panel-Größe seit der Baseline-Speicherung geändert. Speichere die Baseline mit preview_baseline_set erneut und vergleiche dann.

F. Wie lasse ich die KI automatisch Tests ausführen? → Stellst du im 🚀 Auto-Modus eine Anfrage wie „Führe die Tests aus und behebe die Fehler”, wiederholt die KI mit run_observe autonom die Schleife aus Ausführen → Fehler-Parsing → Code-Korrektur. Verwandtes siehe die Seite KI-Chat.