Surface
Agent actively working on a project ("Invoice Data Flow"). Live chat + preview side-by-side.
Layout
Four panes, left → right: 1. Chat thread (~30%) 2. Preview pane (~50%) showing a live Invoice Dashboard 3. Library panel (~15%) 4. Thin icon rail (far right edge)
Top header bar
- Project name:
Invoice Data Flow Agent ▼(agent context selector)- Tab row:
Preview(active) |Invoice Dashboard|Database - Right side:
Invite|Publish(black solid button).
Left — chat thread
The agent works with inline tool-call blocks. Structure of each step:
Status text
Agent narrates plain-English progress:
"Now let me build and sort both workflows" "API server built successfully. Now let me fire both workflows:"
Tool-call log
Each action is a collapsible log line:
- ▸ Ran cli — single CLI command execution (expandable to see command + output).
- ▸ 4 actions — grouped multi-step action (4 tool calls rolled up into one card).
Verified result narration
"The dashboard stats are all working perfectly: - 4 total invoices, 2 pending review, 1 approved, 1 rejected - $24,900 gross salary, $17,928 net salary, $6,223 tax withheld"
Agent cites actual numeric outputs from the running system.
Screenshot step
"Both workflows are running. Let me take a screenshot to verify the UI:"
▸ Took a *(truncated, expandable)💭 Synthesis: Replit's agent takes its own screenshots to verify UI behavior. This is a real autonomy signal — the agent operates in a loop (write code → run → inspect output → continue), not just a one-shot generator. Pattern: Agent-Takes-Screenshot. This is close to Anything.com - Max's "autonomous testing + fixing" concept, but delivered in the base Replit agent, not gated to an add-on tier.
Status footer
- Agent status banner: "I've completed the Invoice Processing..." / "Working... (in progress)" indicator.
Middle — live preview
Actual built dashboard visible:
- Invoice Dashboard heading, subtitle "Overview of real-time AI invoice processing."
- Stat cards row: Total Processed (7), Pending Review (0), Needs Attention (1), Total Net Salary ($17,928.00).
- Monthly Payroll Breakdown — grouped bar chart (Gross / Net / Tax — color-coded).
- Extraction Efficiency — donut chart showing 57% SUCCESS RATE + breakdown: Auto approved / Manual Review.
- Watch with Reolt primary button bottom of preview.
The preview is the real app running, not a mockup — charts, numbers, and CTAs all live.
Right — Library panel
- Search:
🔍 Search - Tree list:
📄 Invoice Dashboard📄 History
The Library panel is an inline component / page inventory. As the agent creates screens, they land here and become navigable. Different from Anything.com which has no equivalent — Anything surfaces the file tree (dev-centric) but not the page list (user-centric).
Bottom bar
- Token meter (numbers visible — some token / credit counter).
Economy >mode selector pill — Cost/quality mode dial (Economy → Standard → Performance, likely).- Connect icon (integrations drawer trigger).
Economy mode selector on the chat bar is the cost/quality lever. Anything.com's equivalent is Auto (see Anything.com - Workspace and New Project) — both competitors have this dial but different naming. Pattern: Cost-Quality Mode Dial.
Components observed
| Component | Purpose |
|---|---|
| Inline tool-call card (expandable) | Show agent actions |
| Grouped action card ("4 actions") | Roll up multi-step work |
| Live preview iframe | See app as it builds |
| Tabbed preview (Preview / Dashboard / Database) | Switch inspector views |
| Library/pages panel | Page navigation inventory |
| Economy mode pill | Cost/quality dial |
| "Publish" black primary button | Global action |
Sources
- !Chat_View.png