Surface
Active project showing code view with Publish panel open.
Layout
Four-pane split (left → right): 1. Chat recap pane (~30%) — previous agent message showing what was built. 2. File explorer (~15%) — tree of folders + files. 3. Code editor (~35%) — syntax-highlighted code. 4. Publish panel (~20%, right) — publish configuration.
Correction to prior wiki: Anything.com DOES have a full code editor with file tree. Earlier pages marked "code editor" as "not advertised." This is wrong — the editor is a first-class product surface; it just isn't promoted in marketing copy. See revised Anything.com - Code Editor.
Top header bar
Left → right:
- Project name: Calculator (with Anything logo).
- View toggles (icon buttons): 👁 preview | ` code | 💻 desktop viewport | 📱 mobile viewport | ⟳ refresh.
- **Page/search field:**🔍 Homepage— search or switch between pages in the app.
- **Edit** ✏️ icon.
- **External link** ↗ icon.
- **Invite** button (with people icon) — collaboration.
- **Publish`** — black primary button.
Left pane — chat recap
Condensed summary of the agent's completed work. Notable content:
"I've built you a professional, high-fidelity calculator following the Ghost Structure design system.
What I've implemented: - SaaS-Grade UI: The interface uses a 'Ghost Structure' with ultra-thin #E5E7EB feature cards, gentle white surfaces, and a subtle 2-point gap-Stop 3D canvas. - PR Taxonomy: I've used metadata pills for versioning, a health-indicator status pill for the 'Live' state, and soft-action blue pills for secondary triggers. - History Sidebar: A persistent log of your recent calculations that follows the 'strict hyphen-Set pattern'. You can even click 'Recall' on a history item to bring the result back to the main display. - Precision Math: Handles basic arithmetic with floating-point cleanup to ensure results like 0.1 + 0.2 look clean. - Technical Typography: Tight inter-headers and metadata hierarchy for a crisp, productive feel.
You can find the main code in
/apps/web/src/components/Calculator.jsxand it's currently live on your homepage."
This reveals Anything.com's agent has a distinctive internal vocabulary — "Ghost Structure", "PR Taxonomy", "Action Blue", "Precision Math", "Technical Typography", "SaaS-Grade UI", "strict hyphen-Set pattern". See Anything.com - Named Design Systems.
File explorer (middle pane)
Next.js-style project tree:
apps
modules/components
analytics
components
hooks
lib
app
layout.jsx
page.jsx
auth
components
utils
Folder chevrons for expand/collapse. No search field visible in this pane.
Code editor (middle-right pane)
- File open:
page.jsx - Syntax-highlighted JSX
- Monaco-style editor (judging by the look)
Publish panel (right pane)
Platform toggle
Two segmented tabs at top:
- Web and backend (active, solid black)
- Mobile app (inactive, outlined)
What you're publishing
- URL field showing:
https://calculator-xx.anything.app/...(auto-assigned subdomain) ✓ Get a custom domain— line with an "Upgrade to Pro" link inline.1 page— counter with chevron (expand to list pages).
Actions
Publish changes— primary button (solid dark).Learn more— text link.
Bottom bar
Consoledropdown (expandable log area).- Agent status indicator — mode selectors visible (
Auto >,Default >) — you can change mode mid-project. - Percentage counter (likely zoom / minimap state).
Components observed (UI component vocabulary)
| Component | Purpose |
|---|---|
| 4-pane split | Chat + files + code + publish |
| Segmented tab (2-option) | Web vs Mobile publish toggle |
| URL display field | Auto-assigned subdomain |
| Upsell-inline (custom domain → Upgrade to Pro) | Feature gate pattern |
| Primary action button (dark, full-width) | Publish changes |
| Collapsible console | Build logs |
| Viewport icon row | Desktop/mobile/preview/code quick-switch |
Sources
- !Code_Interface.png