Preview & Problems Panel
Relevant source files
The following files were used as context for generating this wiki page:
- apps/client/src/prompts/system_prompt.ts
- apps/client/src/components/preview_panel/PreviewIframe.tsx (Derived from apps/client/src/prompts/system_prompt.ts:47-49)
- apps/client/src/components/preview_panel/Problems.tsx (Derived from packages/shared/support-prompt.ts:5-8)
- apps/client/src/components/preview_panel/Console.tsx (Derived from apps/client/src/prompts/system_prompt.ts:16-19)
- packages/shared/support-prompt.ts
- specs/main/plan.md
- tests/e2e/snapshots/security_review.spec.ts_security-review---multi-select-and-fix-issues-1.aria.yml
The Preview & Problems Panel is a critical component of the bl1nk editor interface, providing real-time feedback and iterative development capabilities. It allows users to view a live rendering of their web application in an iframe while simultaneously monitoring code health through a diagnostic "Problems" view and a technical "Console." This panel is the primary destination for the AI editor to verify changes and for users to interact with their running application.
Sources: apps/client/src/prompts/system_prompt.ts:46-49, specs/main/plan.md:19-21
Architectural Overview
The panel is structured to provide a split view between the visual application output and the underlying technical health of the codebase. The architecture relies on an iframe-based preview system and a diagnostic diagnostic diagnostic system that tracks linting, type-checking, and runtime errors.
Component Structure
The panel consists of three primary modules:
- PreviewIframe: The visual container for the rendered application.
- Problems: A listing of static analysis issues (linting, type errors).
- Console: A logger for runtime messages and debugging.
The Preview & Problems Panel serves as the feedback loop between code modifications and functional verification.
Sources: apps/client/src/prompts/system_prompt.tsx:47-49, packages/shared/support-prompt.ts:5-8
Preview Management
The preview system uses an iframe to host the live application. Users and the AI assistant can interact with the preview through specific UI commands.
Preview Control Commands
The system prompt defines specific commands used to manage the state of the preview panel:
| Command | Action | Description |
|---|---|---|
rebuild | Delete & Re-install | Deletes node_modules, re-installs packages, and restarts the server. |
restart | Server Restart | Restarts the current application server. |
refresh | Page Reload | Refreshes the application preview page within the iframe. |
Sources: apps/client/src/prompts/system_prompt.ts:51-57
AI Awareness of Preview
The AI model (bl1nk) is instructed to operate under the assumption that the user has a live view on the right side of the screen. It is prohibited from asking users to run shell commands, directing them instead to use the built-in UI buttons for rebuilding or refreshing.
Sources: apps/client/src/prompts/system_prompt.ts:47-52
Problems & Diagnostics
The "Problems" section of the panel displays diagnostic information derived from the codebase. These diagnostics are used both for user awareness and as context for the AI when performing automated fixes.
Diagnostic Data Structure
Diagnostics are typically objects containing source, message, and optional error codes.
Diagram shows the relationship between individual diagnostics and the aggregate text generator used in the Problems panel.
Sources: packages/shared/support-prompt.ts:5-12
Security Review Integration
The Problems panel also surfaces security-specific issues. These are categorized by severity (e.g., critical) and include potential solutions such as:
- SQL Injection: Detection of unvalidated user input flowing into queries.
- Hardcoded Credentials: Identification of AWS access keys or secrets in the source.
AI Feedback Loop & Fixes
When issues appear in the Problems panel, the system utilizes specific prompt templates to allow the AI to "Fix" the code. The diagnostic text is injected directly into the AI's context to provide the necessary information for the correction.
Fixing Flow
- Detection: Problems are detected in
src/api/users.tsorsrc/config/aws.ts. - Context Injection: The
FIXtemplate generates a prompt containing thediagnosticTextand theselectedTextfrom the file. - Correction: The AI provides the corrected code and explains the fix.
Sequence of events when the AI assistant uses diagnostic data to fix issues displayed in the panel.
Sources: packages/shared/support-prompt.ts:117-130, tests/e2e/snapshots/security_review.spec.ts_security-review---multi-select-and-fix-issues-1.aria.yml:18-20
Summary
The Preview & Problems Panel acts as the real-time "Health & View" hub of the bl1nk platform. By combining a live PreviewIframe with a structured Problems diagnostic view, it enables a tight development loop where the AI can identify errors (via diagnosticText) and the user can instantly verify fixes visually.
Sources: apps/client/src/prompts/system_prompt.ts:47-50, packages/shared/support-prompt.ts:5-10