Code Canvas Database

Open a Code Canvas project, switch to the Data tab, and click Enable Database. Provisioning takes a few seconds and drops a green indicator next to the project name.

Behind the scenes we create a new Neon project, wire a restrictedapp_reader role for the public share proxy, and store the connection strings encrypted in Appwrite.

The preview iframe exposes window.__db. Generated code reads and writes like any other Postgres client:

const { rows } = await window.__db.query('SELECT * FROM todos ORDER BY created_at DESC');

await window.__db.query(
  'INSERT INTO todos (title, completed) VALUES ($1, $2)',
  [title, false]
);

• Always parameterized — never string-concatenate user input.
• Always awaited.
• Wrap in try/catch — Theo reads Postgres errors via the Try-to-fix button (see below).

Click Auth → Enabledin the Data tab, or ask Theo "add signup and login". Your app then uses:

await window.__auth.signup(email, password, displayName?);
await window.__auth.login(email, password);
const user = await window.__auth.currentUser();
window.__auth.onAuthChange((user) => { /* react to state */ });

Ask Theo to call scope_table_to_userto add a user_id UUID column + index (and optional Postgres RLS policy) so each user only sees their own rows.

Every Code Canvas preview now has a Bolt/Replit-style toolbar across the top. The address bar accepts any in-project route (“/about”, “/dashboard?tab=stats”) — hit Enter and Theo routes the iframe to that page. If a sibling HTML file matches (“about.html”) the preview swaps instantly; otherwise SPA routers (React Router, Vue Router) pick up the new path via the same pushState +popstate dance the in-preview link clicks use.

Back, Home, and Reload sit next to the address bar. Reload re-mounts the iframe (or re-runs Sandpack) without losing your code state — useful after a manual edit you want to apply in isolation.

The device viewport selector on the right of the toolbar constrains the preview to a fixed width × height — Desktop (fluid), iPhone 16 / 16 Pro / 16 Pro Max, Pixel 10, Galaxy S25, iPad, iPad Pro 13, or Custom dimensions you type yourself. Zoom + / − keeps iPad presets readable on small laptop screens. Selections persist per project, so refreshing the page leaves you in the same frame.

Every Code Canvas chat message runs through a single agent loop: one streaming AI call, one set of tools, one heartbeat, one budget. The model picksupdate_code,patch_code,generate_code, or a DB tool, and the loop short-circuits the moment real code lands so changes ship immediately.

Theo opens every turn with a Project Stateblock: a compact summary of your project's framework, entry file, whether the database is live, every table + auth provider, and whether auth is enabled. That single authoritative snapshot replaces the older stack of competing context blocks so the model never has to guess what's wired and what isn't.

The tier picker above the composer (Theo Code Fast / Theo Code / Theo Code Max) controls which model handles the loop and how long it can run before the heartbeat trips. The picker also exposes a Plan mode for multi-step requests — see the section below.

After a substantial build (3 or more files in a single ad-hoc turn) Theo finishes the chat reply with two extra sections — Key features and Design highlights — enumerating the user-visible deliverables and the visual choices he made. The bubble picks up a subtle accented background so the recap reads like a delivery report. Small CSS / single-file edits and plan-mode turns skip the recap so iterative changes stay terse.

A credits pill sits at the top of the editor, just left of the Visual Edit toggle. It shows the running total of AI credits this project has spent. Every time you send a prompt and Theo ships changes, the number ticks up the moment the turn finishes — so you always know roughly what a given build is costing you.

Click the pill to open an itemized breakdown of where your credits went. Each turn is listed newest-first with what it did (a code change, a database step, a design tweak, an auto-fix, a plan step, or an upscale), which tier ran it (Theo Code Fast / Theo Code / Theo Code Max), how many files it touched, and how long ago it happened. The breakdown updates automatically the instant a turn completes.

The breakdown also surfaces a smart suggestion when it spots a cheaper path — for example, if most of your recent spend is going to Theo Code Max, it nudges you toward Theo Code, which handles the majority of changes for a fraction of the credits. Switch tiers any time from the model picker in the composer.

The total is per-project and persists across reloads. Instant CSS tweaks that Theo applies without an AI round-trip don't add to it, and your overall monthly balance still lives in Settings → Billing.

When the preview throws a runtime error (including Postgres errors from window.__db), a red Try to fix chip appears above the composer. Clicking it sends the recent errors to Theo and routes the fix through a fastpatch_code repair.

We pair Postgres error codes with one-line hints so Theo knows, for example, that42P01means "table doesn't exist — create it before querying". Throttled to 3 attempts per project per minute.

When Theo stalls or finishes a turn without writing any code (for example, a DB-only call to enable_auth with no UI follow-up, or an upstream timeout) the assistant message ends with a small orange Keep going card. Clicking it re-sends a typed resume message so Theo finishes the work without you re-typing anything. The card surfaces a specific reason (timeout, no tool call, provider error, etc.) so you always know whether to wait or try a different tier.

Theo now passes realistic seed_rows with everydb_create_table call, and can calldb_seed_tablelater with a hint like "three fitness customers" or "urgent support tickets". Internal_auth_* tables are never seeded.

Open any table in the Data tab. Use Export to download up to 10,000 rows as a CSV, or Import to upload a CSV whose headers match existing columns. Rows insert one-by-one with parameterized SQL and per-row error reporting.

Flip the mode pill above the chat composer from Agent to Plan and send your request. Theo drafts a structured plan first — phases, tasks, tech stack, components — and surfaces it in a side panel anchored to the top-right corner of the preview. Nothing in your code changes until you approve.

Each task starts as queued. You can edit the wording, drop tasks you don't want, or dismiss the plan entirely. When you're ready, hit Execute Plan and Theo runs each task in order — flipping rows to active →done in real time. A task that stops without shipping code surfaces a recovery card on that row so you can keep going manually.

The plan panel can be minimized into a slim pill (e.g. Plan · 3/7 tasks) so it never fights the preview for screen space. Click the pill any time to expand the full task list. Once a plan completes, the mode picker automatically returns to Agent so the next ad-hoc message ships directly.

• Engine tier sticks. Plan creation runs on a fast planner; execution runs on the tier you picked (Theo Code Fast / Code / Max).
• Persistence is local-only. Plans rehydrate from your browser for 24h. The server never stores them; the next page reload picks up where you left off in review mode.
• Per-task recovery. Every task reuses Code Canvas's standard heartbeat, retry, and salvage contract — if Theo stalls on task 5, the rest of the plan stays untouched.

The History sub-view lists every schema-changing SQL statement Theo or you applied — with source, tool, and timestamp. Each row shows a best-effort revert button; clicking it runs a compensating DDL (e.g.DROP TABLE,DROP COLUMN) and marks the entry as reverted. Destructive reverts prompt for confirmation.