Reporting a Replit Agent Preview Bug From One Tab

The Replit Agent just finished a change, the preview pane refreshed, and something looks off. A button sits half off the card. A form submits but the success message never shows. You could type a paragraph describing it and hope the agent pictures the same thing you see. Or you can capture the exact frame, say what is wrong, and paste back text the agent reads without guessing.

Here is the full loop, from broken preview to a fix request the Replit Agent can act on, without leaving your browser or installing anything.

Step 1: Open Cobalt Capture in a second tab

Keep your Replit workspace open. In a new tab, go to start a new review. Nothing to install, no extension, no signup. The page loads with a single button waiting for you.

Outcome: you have a capture surface ready next to your live preview.

Step 2: Capture the preview frame

Click Capture screen. The browser asks which window or screen to share. Pick the tab or window showing the Replit preview. The current frame is drawn to a canvas, a still image of exactly what the agent produced.

This is a still, not a recording. That matters. A video makes the agent (and you) scrub for the moment the bug appears. A frozen frame of the broken state is the thing you actually want to talk about. If you want the reasoning behind that, see screen capture versus recording as agent input.

Outcome: the broken preview is now an item you can mark up and comment on.

Step 3: Crop to the part that is wrong

Drag a rectangle around the broken element. If the whole layout is the problem, skip the crop and keep the full frame. Cropping the still is the only image edit here. You do not draw arrows or type labels on the picture.

Instead of scribbling on the image, you point with a numbered pin and explain in words. Drop a pin on the button that overflows its card. Drop a second pin where the success message should have appeared. Now the agent has coordinates tied to your comments. More on that in pinning the exact spot on a screenshot.

Outcome: the item shows the broken region with pins on the two specific spots you mean.

Step 4: Say what is broken and what you expect

Add a comment to the item. Type it, or in Chrome or Edge click the mic and dictate using the browser's built-in speech recognition. Dictation is faster when you are describing a layout out loud. On Firefox the mic is not available, so you type.

Write the comment the way you want it fixed. Name the element, state the current behavior, state the expected behavior:

Pin 1: the Submit button overflows the right edge of the card by about 20px on the mobile preview width. Expected: it should sit inside the card padding. Pin 2: after a successful submit the green confirmation banner never renders. The network call returns 200. Expected: show the banner for 3 seconds.

That is the difference between feedback the agent guesses at and feedback it can execute. Vague comments like "the button looks weird" send it hunting. Specifics like a pixel overflow and a 200 response tell it where to look. If you want the pattern spelled out, read what an agent-readable bug report actually contains.

Outcome: each pin has a comment naming the element, the bug, and the expected result.

Step 5: Add more items if there is more than one bug

If the same preview has two unrelated problems, capture a second frame or add a free-floating comment with no screenshot for something general like "none of the form fields have focus states." Each screenshot becomes its own item, so the agent gets a clean, ordered list rather than one tangled paragraph.

Outcome: one review holds every issue from this preview, each separated and pinned.

Step 6: Publish and grab the markdown

Click Publish. The review is saved and gets a short public URL like /r/your-slug. Anyone with the link can read it. You do not need an account to publish; an anonymous review is kept for 30 days, and you can sign in later to claim it permanently.

The same review is available as plain-text markdown at /r/your-slug/markdown. That is the format the Replit Agent reads. Your pins, comments, and the current-versus-expected notes come through as structured text, not an image the agent has to interpret.

Outcome: you have a public link for humans and a markdown URL for the agent.

Step 7: Hand it back to the Replit Agent

Switch to your Replit tab. Open the markdown, copy it, and paste it into the agent prompt. A short lead-in helps: "Fix the two issues in this review, then re-run the preview." The agent now has the exact element, the measured problem, and the expected state for each pin.

Because the feedback names elements and behaviors instead of pointing at a video, the agent can map each item to code without a back-and-forth. That tight capture-comment-return cycle is the whole point of a feedback loop that actually ships.

Outcome: the agent has everything it needs to fix the preview in one pass.

When the fix lands, close the loop

After the agent re-runs the preview, glance at it against your review. If a pin is resolved, mark that comment resolved on the review page. If a bug remains, you already have the item open, so add a follow-up comment and re-share. No bug tracker, no workflow states, just the same link updated.

The same output works for anyone downstream too. Send the public link to a teammate, export a PDF for a client, or keep the markdown for the agent. One capture, three receivers. If you work with other tools, the AI coding agents hub covers the same loop for each one.

Send us feedback

Stuck, or want to do something it won't let you? Tell us what you're trying to do and we'll reply by email as soon as we can. This isn't a live chat.

Powered by AcornReply