Your first hour

One hour, one small page built and published, with every button named as it appears on screen. Nothing here needs an account. On a laptop without a GPU the first answer can take a few minutes — the page tells you when that is coming, so make a coffee then and not in the middle of the review.

0:00 — Open oioxo.com

Chrome or Edge gives you everything (folders on disk, GPU models). Firefox runs the CPU models. Safari has no on-device models yet; it can use your own key. The page that loads is the IDE — there is no marketing homepage to get past.

0:02 — The hearth

The first screen is the hearth. Under the line The code editor that runs on your device. you get:

• Continue where you left off — only once you have a project and a chat; the project name and the last chat title are links.
• Six doors: [ new project ], [ open a folder ], [ import ], [ clone ], [ projects ], [ start from a template ].
• The three steps in words: pick a model · describe what you want · review the change.
• Three example chips — build me a coffee-shop landing page, a pomodoro timer I can use, a portfolio page with my name on it. A chip puts the words in the chat box; you press send.
• The model line: no coder yet — set one up (runs offline after), or, once one is chosen, … · ready on this device — change.
• A device line — your cores and GPU vendor, then · runs on this device — followed by the best models for this machine with a speed and a size on each row.
• The plan line: Free — open models, your keys, and a free window of OIOXO models. Pro removes the limits →.

For this hour, press [ start from a template ]. It seeds index.html, style.css and app.js into a project called my-project that lives inside this browser, and shows it rendered in Preview. That is the safest folder to learn in; you will open a real one at 0:40.

0:05 — Pick a model

Click set one up (or the model chip above the chat box). The model sheet opens with three mode chips — On device · Auto · Your key — and a sentence that is the whole policy: Everything here runs on your device unless it says your key. Pick one; it downloads once and stays.

Two sections matter today:

• Recommended for this device — the one row the fit predictor picked for your hardware.
• Runs on this device — every other model this machine can run.

What the GPU row means. A model name ending in · GPU runs through WebGPU on your graphics card; one ending in · CPU runs on the processor. A browser with a real WebGPU adapter is offered a GPU coder first, because it is several times faster and it is the difference between a first answer in seconds and one in minutes. The row shows size · context (· price for keys) and its state: on device, your key, desktop app or too big here. Nothing downloads until you press [ download & use ] (or [ download now ] on the recommended row); a CPU model asks once more in words — … runs on your CPU — a 540 MB download that stays in this browser. Download it now? — with Download it and Choose another model.

0:10 — The first ask

Beside the model chip is the Ask · Agent switch. Hover the two words and they explain themselves: Ask — answer in words. No files are changed. and Agent — may edit files, with your consent before every write. The default is Agent; leave it there and type:

make the button turn the heading gold when clicked

If you skipped the template, the first send asks where to work: [ open a folder ] or [ just try it out ], with the trust presets underneath — ask before every change or edit files freely — shell & deletes still ask. Pick ask before every change for this hour so you see each consent.

The strip above the chat reports what the model is doing (reading your request · ~78s, then writing…). Each write asks first: allow once, for the session, or always. Then the chat shows a receipt — which files were written, and whether the page parsed clean, not run or was checked by running it.

Press Ctrl+3 for Preview. Click the button. If the heading did not turn gold, open the console drawer at the bottom of Preview (it shows a count when there are errors), then in the composer press + and choose preview console to attach those errors to your next message: fix this.

0:20 — The Changes seat

Press Ctrl+4. The Changes seat (caption: Pending edits, agent runs, your repository) is three lists, top to bottom:

• Pending — every file the agent wrote since you last decided, with keep all and undo all at the top.
• Runs — one row per agent run. A file shows + when it was created and ⇄ when it was changed; click the name to see the diff. Each file also carries a confidence mark: ✓, · or ⚠ with a label.
• Repository — commit, push, pull, history, branch, publish (below).

Open app.js in the editor while the edit is pending and you will see the change inline as hunks, each with a keep / undo lens. Alt+] and Alt+[ walk between hunks, Alt+Enter keeps one and Alt+Backspace puts it back.

0:25 — Undo, three sizes

1. One region. On a file row press parts…, tick the regions you do not want, then undo selected. Every other change in the file stays.
2. One run. On the run row press undo run. If later runs touched the same files it reads undo 2 runs and asks first: This puts every file back the way it was before this run. with Keep them as the way out.
3. Everything pending. undo all at the top. If a file could not be put back, the seat says which and leaves it listed — try it on its own.

Try it: undo run, watch the heading lose its click handler in Preview, then ask again. Checkpoints survive a reload and live with the project on this device.

Deleting is undoable too. Right-click a file in Files (Ctrl+2) and delete it: a Deleted app.js toast appears with Undo. The file waits in the project’s trash for a while, then is pruned.

0:35 — Git

The bottom of Changes is the repository. In a fresh browser project the first press of commit all… turns the folder into one. The controls, in the order they appear:

• commit all… — a message, then every dirty file.
• commit some… — pick which files go in.
• push · pull · history · branch.

Push and pull need a remote and a token you paste once; it is encrypted on this device and forwarded to GitHub (or GitLab, Bitbucket, Codeberg) through oioxo.com/api/git, never stored on our side. If the push is rejected because the remote moved on, the message offers Pull first. Git refuses to commit, push or pull while an agent is writing — wait for the run to end or press Stop. In Files, modified and new files are coloured by git status and ignored files are dimmed.

0:40 — A real folder

Back on the hearth (a new chat shows it), press [ open a folder ] and pick a project on your disk. Chrome asks you to allow access; the folder is opened in place, nothing is copied or uploaded, and edits you make outside the browser are noticed. The trust presets appear again — edit files freely — shell & deletes still ask is the everyday setting once you trust the loop. On a phone or in Firefox, [ import ] copies a folder or a .zip into the browser instead, and [ projects ] can export it back as a .zip any time.

0:50 — Publish

The last control in Changes is publish to GitHub Pages…. It asks for a repository name and a fine-grained GitHub token with Contents read/write on that one repository, pushes the folder to a gh-pages branch (creating the repository if needed) and hands you the live URL. Publish again after every change you want to share.

0:55 — Where things are, for next time

• History (Ctrl+5) lists chats per folder — rename, delete, export.
• Settings (Ctrl+6) → Models & keys shows what is downloaded (2 models on this device) with remove on each, and is where your own key goes.
• ? on the strip opens Help: Docs · Keyboard · What’s new · Report a problem · Privacy · About. Ctrl+/ opens the shortcuts overlay; F1 lists every command.
• The Ask side of the switch is for questions about the code: it answers in words and changes no file, remembered per chat.

Next: Changes and checkpoints for the whole review story, Models for every row in the sheet, and Keyboard shortcuts for the keys used above.