Surfaces
Know the workspace surfaces
The generate page is split into a conversation side and a workspace side. Each area is useful for a different kind of check.
Chat panel
Send the next prompt, review agent output, inspect file operations, and keep the working history attached to the same project.
Preview surface
Website projects load browser preview routes in `Website`. Flutter mobile app projects use the device preview surface for phone layout, touch behavior, and app startup checks.
`Code` tab
Browse the generated file tree and inspect or edit specific files when you need implementation-level confirmation.
`Database` tab
Connect Supabase, link an existing project or create a new one, then inspect tables and auth users without depending on the preview runtime.
`Terminal` tab
Run commands inside the bound workspace runtime when you need a lower-level technical check.
`Analytics` tab
Review live traffic only after publish. This tab is for the published site, not for preview sessions.
Runtime state
Read workspace state before forcing actions
Not every workspace surface depends on the runtime in the same way.
Preview, `Code`, and `Terminal` depend on the active workspace runtime
If the workspace is still waking, these surfaces may need a short preparation step before they become useful.
The workspace status badge is a real signal, not decoration
Read it before assuming preview, files, or commands are immediately ready.
`Database` is more independent
Supabase setup and explorer flows can still be useful even when the preview runtime is not the current bottleneck.
Use the smallest wake-up action first
Starting preview or opening the relevant tab is usually better than abandoning the whole project.
Decision guide
Choose the right tab before doing more work
- 01
Open preview first when the question is about what users see
Use browser preview for website routes and device preview for mobile app behavior.
- 02
Open `Code` after preview or chat narrowed the surface
Read the exact file you need instead of treating the whole codebase as the next task.
- 03
Open `Database` for backend setup or inspection
This tab is for Supabase connection, project binding, tables, and auth users.
- 04
Open `Terminal` when runtime evidence matters
Use it for commands, directories, and lower-level debugging inside the active workspace.
- 05
Open `Analytics` only for live-site questions
This tab becomes meaningful only after publish.
- 06
Return to chat only after you know the next request
Tabs are for verification; chat is for the next change.
Responsive behavior
Understand the compact layout
The workspace behaves differently on smaller screens, and that changes how fast you can move between surfaces.
Two top-level surfaces
In compact mode you switch between `Chat` and `Workspace` instead of seeing both side by side.
A second switch inside `Code`
On smaller viewports, `Code` splits into separate `Files` and `Editor` views so the screen stays usable.
File links can move you directly into the editor
When chat output points to a file, Flutty can bring compact users straight into the code surface instead of leaving them in chat.
Tab intent stays the same across screen sizes
Preview, `Code`, `Database`, `Terminal`, and `Analytics` still own the same jobs even when the layout becomes more compact.