Skip to content

Add artifact diagnostics and Fix action #196

@IgorWarzocha

Description

@IgorWarzocha

Goal

Add lightweight artifact diagnostics and a Fix action for HTML/React artifact views so runtime/typecheck/console issues can be surfaced to the agent and repaired automatically with minimal UI and performance overhead.

Scope

  • Add a Fix action for artifact HTML/React views when diagnostics are available.
  • Capture useful artifact issues such as typecheck/build errors, runtime errors, and relevant console output.
  • Keep diagnostics lightweight and low-overhead; avoid continuously expensive checks in the renderer/UI path.
  • Prefer running analysis on the agent/runtime side rather than adding heavy preview-side polling or UI work.
  • Feed captured issues back to the agent as a system-ish/internal context message so the agent can fix broken artifacts automatically.
  • Make the flow safe and bounded so noisy logs or repeated failures do not spam the agent context.

Acceptance criteria

  • HTML and React artifact views can surface actionable diagnostics when an artifact fails to build, typecheck, run, or logs relevant errors.
  • A user-visible Fix button is available when there are actionable diagnostics for the current artifact.
  • Triggering Fix sends a concise diagnostic summary to the agent in a way that clearly instructs it to repair the artifact.
  • Diagnostics collection has little idle overhead and does not noticeably slow normal artifact preview rendering.
  • Console/log capture is bounded, filtered, or summarized so large/noisy output cannot flood the session.
  • The design preserves current artifact preview behavior when no diagnostics are present.

Notes

  • This should be treated as a feature, not a bug fix.
  • Syntax highlighting for artifact code can remain a separate/later task.
  • The exact implementation should prefer agent-end/runtime-side checks where possible for performance and reliability.

Original request

We gotta add a "fix" button and some sort of a typecheck/console log to artifact html/react views. But it's gotta be performant and little overhead. Probably only running on agent-end and automatically feeding any issues to the agent as system-ish message so the agent fixes things automatically.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:composerComposer UI and controlsarea:runtimeLive runtime and session lifecyclepriority:p1Important, next-tier prioritytype:featureUser-facing feature work

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions