UI & live updates

Platform apps can use the shared React UI kit, a plain HTML page, or a static multi-page site. The choice should fit the product rather than force every app into the same frontend architecture.

Shared React kit

The scaffold uses React, TypeScript, Vite, Tailwind, and @at/ui.

Export	Purpose
`Page`	Page shell with title, subtitle, actions, and width
`Button`	Primary, secondary, ghost, and danger actions; loading state
`Input`, `Textarea`	Consistent form controls
`Card`, `Badge`, `Spinner`	Layout and status primitives
`api<T>(path, options)`	App-relative requests and structured errors
`track(name, props)`	App event reporting
`cn(...)`	Compose utility classes

import { api, Button, Card, Page } from "@at/ui";

function Notes({ notes }: { notes: { id: string; text: string }[] }) {
  return <Page title="Notes" subtitle="Your workspace">
    {notes.map(note => <Card key={note.id}>{note.text}</Card>)}
  </Page>;
}

Shared theme tokens include background, panel, foreground, muted text, borders, accent, and danger colors. Apps can override their theme variables without duplicating all components.

Frontend routing

Use the configured app base URL. An app-relative API request should keep working if its manifest path changes.

Single-page apps serve their index for frontend routes. Static multi-page apps use spa = false so unknown pages return 404. Backend API routes should not be treated as frontend fallbacks.

Documentation is server-rendered, so page links, headings, and the main navigation work without JavaScript. JavaScript adds search and code-copy controls.

Streaming and live state

For model streaming, use kit.ai.stream and an application endpoint that forwards the supported events. For application state, choose polling, server-sent events, or WebSockets according to update frequency and interaction needs.

A live connection does not remove the need for authorization. Scope observations to the viewer, handle disconnect/reconnect, and keep durable state in the database or event log. In-memory subscribers and tasks do not automatically span processes.

Arena has its own frontend and realtime routing. Its game views and controls are maintained independently from @at/ui.

Current component-system status

The platform currently uses its existing @at/ui kit, and Arena uses its own React components. A shadcn/ui refresh has been discussed but is not installed as a shared standard. Do not assume new apps already inherit it.

Regardless of the component system, provide keyboard access, visible focus, clear labels, loading and error states, mobile layouts, and honest progress for long-running work.