HTML pages in chat

Sometimes Oda answers with an HTML page rather than a paragraph: a small dashboard, a chart or a tool it built for the conversation. The page opens in the side panel beside the chat, and you can use it there. Opening an HTML file from your workspace is a different view; see Preview images and HTML.

What a page looks like in the chat

• A page arrives in a reply as a block marked html artifact, with an optional title, for example html artifact title="Sales dashboard". In place of the source, the chat shows a compact chip: the page's title, its size and an Open action.
• While Oda is still writing the page, the chip reads Writing… with the size so far. Once the reply settles, the chip shows the page label and the final size.
• A page without a title reads HTML page.
• A plain html block stays an ordinary code block, so a code example is never turned into a page.
• Oda builds a page for an interactive view, a dashboard or a larger visual report. A single chart or one row of KPI cards comes as a chart or kpi block instead; see Charts and KPIs in chat.
• The side panel is often 400 to 800 px wide, so Oda lays pages out to wrap at narrow widths.
• A chip sits in the reply like any other card: commands, diffs and other output render around it. Reading Oda's answers covers the rest of the reply's format, and Command output, diffs and previews covers commands and diffs.

Open a page

1. When a turn builds its first page while its chat is open, the page opens on its own in the side panel.
2. Later pages wait for you: choose Open on the page's chip in the reply.
3. Until a page has any content, its chip cannot be used.
4. If you close a page, its chip is the way back: choose Open again. Oda keeps one tab per page, so opening a page that is already open brings its tab forward.

The side panel and the rest of the chat are covered in Chat with Oda.

While Oda is still writing

• The page fills in as the reply is written. It refreshes up to about three times a second and never blanks: the last complete version stays on screen until the next one is ready.
• While the page streams, its tab tracks the page's title as it is written, and a Writing… marker shows until the page settles.
• The page follows your light or dark scheme and your company's colours. A theme change reaches the open page without a reload, so nothing you were doing in it is lost.
• Every refresh rebuilds the page in a fresh frame, so a rebuilt page starts again from the top. Choosing Reload does the same.

The controls on a page

The page's tab carries four controls.

• Copy HTML puts the page's source on your clipboard, exactly as Oda wrote it. The button confirms with Copied.
• Save as .html file saves a copy of the page with your theme built in. In the desktop app your usual save dialog opens, with a name suggested from the page's title: letters, digits and ., _ and - stay, other runs of characters become a single space, the name is trimmed and capped at 80 characters, and .html is added. A page titled Sales dashboard suggests Sales dashboard.html, and a title with nothing usable falls back to page.
• Open in browser opens the page in your usual browser. Oda writes a temporary copy for it, so use Save as .html file when you want to keep the page. If the browser cannot be opened, the tab shows This page could not be opened in the browser.; choosing the action again clears it.
• Reload builds the page again.

How a page is isolated

• The page runs in its own frame, apart from Oda. It cannot read your files, your other chats or the app itself.
• It may load scripts, styles and fonts only from the page itself or from two public code sites, jsdelivr and cdnjs. Oda pins at least the major version of each library it loads from them.
• Everything else is closed: fetch, XMLHttpRequest, WebSocket and EventSource fail, so the page cannot call services, fetch data or hold a connection, and works with the data written into it.
• Images and media must be part of the page itself: data: addresses, inline SVG, or a picture drawn on a canvas. Remote images do not load.
• There is no storage: localStorage, sessionStorage, IndexedDB and cookies are blocked, so a page keeps nothing between visits.
• Form submissions, pop-ups, alert and confirm dialogs, nested frames and anything that would navigate the page away are blocked, so the page cannot leave its frame. Links inside the page do not open the web; in-page #anchor links work.
• The page cannot use Oda's fonts; it falls back to the fonts on your computer.
• One limit: a page can still encode information in the addresses it requests from those two sites.

In a shared chat

• When a shared chat contains a page, it opens in the same kind of isolated frame. The shared view offers Save as .html file, Open in browser and Close page, and no copy action.
• HTML pages in a shared chat covers that side of pages.

Questions, answered

How do I open a page Oda built?

When a turn builds its first page while its chat is open, the page opens on its own in the side panel. For later pages, choose Open on the chip in the reply, and use the same chip to reopen a page you closed.

I closed the page. How do I get it back?

Find the message that holds the page in the conversation and choose Open on its chip. Oda reuses the page's tab, so a page that is still open comes forward instead of opening twice. The page comes from the chat itself, so it is always opened from there; save a file if you want a copy of your own.

Why is the page tab empty?

A restored tab can show This page is not loaded yet. Find it in the conversation and choose Open. until the message that holds the page is on screen. Open the chat that built the page; the tab fills in.

Why does the page keep changing while Oda is writing?

The page is being written with the reply. It fills in as the text arrives, refreshing up to about three times a second, and it never blanks: the last complete version stays on screen until the next one is ready. It settles when the reply finishes.

Can I save or copy a page Oda built?

Yes. Copy HTML puts the page's source on your clipboard, and Save as .html file saves a copy with your theme built in. The file name is suggested from the page's title: letters, digits and ., _ and - stay, and other characters become single spaces.

Where does a page go when I open it in my browser?

Oda writes a temporary copy and opens it in your usual browser, so the page lives in a temporary folder; keep it with Save as .html file when you want it long term. If the browser cannot be opened, the tab shows This page could not be opened in the browser.; choosing Open in browser again clears it.

Why did the page jump back to the top?

Every rebuild starts a fresh copy of the page, so where you had scrolled to is not kept. This happens when you choose Reload, and while the page is still being written and refreshed.

Can a page Oda built read my files or other chats?

No. The page runs in its own frame, apart from Oda, with no way to read your files, your other chats or the app itself.

Which outside files can a page load?

Scripts, styles and fonts, and only from the page itself or from two public code sites: jsdelivr and cdnjs. Anything else stays closed: the page cannot call services or fetch data. One limit: a page can still encode information in the addresses it requests from those two sites.

Can the page save data, such as a setting, in my browser?

No. The page has no storage: localStorage, sessionStorage, IndexedDB and cookies are blocked, so a page keeps nothing between visits.

Why does a link in the page not open anything?

Links do not leave the page, so they do not navigate away or open the web. Links that jump to a section of the same page (#anchor) work.