{"schemaVersion":"1","contentVersion":"2026-10-18.1","slug":"controls-preview","title":"Preview, network, and console controls","summary":"Navigate your app as you build, check screen sizes, investigate requests and errors, and understand when a test sends a real request.","category":"Control reference","minutes":10,"prerequisites":["Open the named screen in Rumata. Available controls may depend on your account, permissions, and resource state."],"sections":[{"id":"navigation","title":"Preview navigation and layout","blocks":[{"type":"paragraph","text":"Preview shows your app as you build it. Interacting with the app can still call real backend services; preview is not a simulation of those services."},{"type":"table","headers":["Control","What it does"],"rows":[["Preview Mode / System Explorer","Switch between the app preview and the factory’s resources."],["Expand / restore window icon","Give the work area more space or restore the normal layout."],["Back / Forward","Navigate the preview’s browsing history. The buttons can remain enabled even without a previous or next entry."],["Refresh","Reload the preview page."],["Enter URL path / Enter","Type a route such as /settings and press Enter to navigate there in the preview."],["Split","Toggle a split layout so you can inspect the preview alongside its diagnostics."],["Preview / Network / Console icons","Show the page, its recorded requests, or its logs. The network activity dot indicates recent or pending requests."],["Device menu → Full / Mobile / Tablet / Desktop / Large Desktop","Choose the preview viewport. This helps check layout at different sizes; it does not replace testing on a physical device."],["Deploy / Deployed / Failed status button","Open the publishing flow, with a paid-AI review when needed. The final [Deploy](/guides/controls-frontend#deploy) action is in the deployment dialog."]]}]},{"id":"loading-conflicts","title":"Loading screens and project conflicts","blocks":[{"type":"paragraph","text":"The preview may be starting, temporarily reserved by an agent, or connected to a different project. Read the displayed state before restarting anything."},{"type":"table","headers":["Control","What it does"],"rows":[["Explore ideas / Click to explore / quill illustration","Show workspace suggestions while the preview loads. This does not send a prompt or change the loading process."],["Suggestion dots / suggestion title chips","Choose a suggestion card. Cards also rotate automatically."],["Back to loading","Return to the loading illustration."],["Ready to Switch Projects? → Start This Preview","Replace the other project’s active preview with this one. Finish work depending on the other preview before switching."],["Switch & Start VS Code","Confirm the project switch and start this project’s development editor."]]}]},{"id":"network","title":"Network requests","blocks":[{"type":"paragraph","text":"[Network](/guides/controls-preview#network) shows the requests your app sends and the responses it receives. Use it to investigate an empty or slow screen, or an error."},{"type":"table","headers":["Control","What it does"],"rows":[["all / success / error / pending","Filter the recorded request list by outcome."],["Trash icon","Clear the displayed network log. It does not undo requests already sent."],["Request row","Open its URL, method, status, time, duration, payload, headers, and available response body."],["Truncated URL hover","Reveal the full address when it does not fit in the row."],["Copy beside payload, headers, or response","Copy that section’s formatted content. Review credentials and personal data before sharing a copied log."],["Test Workflow","Open a test dialog for the workflow matching this request’s method and path. Opening it does not resend the request."]]}]},{"id":"replay","title":"Test a workflow from a captured request","blocks":[{"type":"paragraph","text":"The test form starts with captured request data. [Send](/guides/controls-preview#replay) is a real execution and can repeat writes, messages, or other effects."},{"type":"table","headers":["Control","What it does"],"rows":[["From Network Request / From Schema / Mixed Sources","Read where the form’s values came from. Editing a captured request changes its source indicator."],["Reset to Schema","Replace request values with the workflow schema’s defaults when a schema exists. This loses your pending test edits."],["HTTP method / URL","Set the action and destination for an edited request."],["Params → path values","Fill every route placeholder before sending. Missing path values disable [Send](/guides/controls-preview#replay)."],["Add Parameter / Add Header","Add a name/value row. Its checkbox includes or excludes it without deleting it; X removes the row."],["Body","Edit the request JSON. GET disables the [Body](/guides/controls-preview#replay) tab."],["Send","[Send](/guides/controls-preview#replay) the test. An unchanged captured request is replayed through the connected preview; an edited request is sent using the form values."],["Response Body / Headers","Inspect the returned content and headers, alongside its HTTP status and response time."],["Open in System Explorer","Close the test dialog and open the matching workflow editor."],["Close / corner X","Dismiss the test dialog."]]}]},{"id":"console","title":"Console and runtime errors","blocks":[{"type":"paragraph","text":"The console contains messages from your app as you build it. It is a log viewer; the code editor’s terminal is a separate tool for running commands."},{"type":"table","headers":["Control","What it does"],"rows":[["All / Errors / Warnings / Logs","Filter console messages by level."],["Filter…","Search the console text."],["Clear console","Remove currently displayed logs. It does not fix the underlying error."],["Runtime Error → X","Dismiss the error overlay so you can inspect the page."],["Copy Log","Copy the runtime error text."],["Check the console tab for more details","Open the console."],["Fix This Error","Send the error to Rumata’s build assistant to request a fix. This starts assistant work and can consume AI credits."]]}]}],"technical":[],"related":["development","controls-frontend","controls-workflow-runs"],"sources":["components/window/preview/PreviewModeHeader.tsx","components/window/preview/PreviewErrorOverlay.tsx","components/window/preview/network/NetworkPanel.tsx","components/window/preview/network/NetworkRequestDetails.tsx","components/window/preview/network/EnhancedWorkflowApi.tsx","components/window/preview/console/ConsolePanelHeader.tsx"],"updated":"2026-09-06","audience":"general","media":[{"src":"https://docs.rumata.dev/media/manual/test-lesson.jpg","width":1662,"height":789,"alt":"Sabai Talk Thai lesson in Preview beside the Rumata chat.","caption":"Reference capture from the separate Sabai Talk Thai application (September 8, 2026). Try a real customer task in [Preview](/guides/controls-preview#navigation). Here the learner listens and chooses an answer; no answer was submitted for this capture.","sectionId":"navigation"},{"src":"https://docs.rumata.dev/media/manual/device-menu.jpg","width":1662,"height":789,"alt":"Preview size menu with Full, Mobile, Tablet, Desktop, and Large Desktop.","caption":"Reference capture from the separate Sabai Talk Thai application (September 8, 2026). Open the size selector, then choose [Mobile](/guides/controls-preview#navigation) to check the narrow layout.","sectionId":"navigation"},{"src":"https://docs.rumata.dev/media/manual/mobile-preview.jpg","width":1662,"height":789,"alt":"Sabai Talk Thai lesson constrained to the Mobile preview width.","caption":"Reference capture from the separate Sabai Talk Thai application (September 8, 2026). Check that text and controls remain usable at the selected width. Return to [Full](/guides/controls-preview#navigation) when you finish.","sectionId":"navigation"},{"src":"https://docs.rumata.dev/media/manual/startup.jpg","width":1096,"height":733,"alt":"Rumata Preview panel displaying Preparing your canvas while the development workspace becomes available.","caption":"During startup, Rumata prepares the workspace before the preview becomes usable. Wait for the chat and preview to connect.","sectionId":"loading-conflicts"}],"video":null,"url":"https://docs.rumata.dev/guides/controls-preview"}