Overview
The React components and session blocks the web console uses
The screens of the Werft web console are built from two packages. The same packages let you put a session list and a session screen into another React app.
| Package | What it contains |
|---|---|
@werft-ai/ui | Design tokens (tokens.css), the Tailwind connection (theme.css), primitives (Button, Card, Dialog, Tabs, Skeleton, and others), and status displays (ErrorState, EmptyState) |
@werft-ai/react | Hooks that read and write server state (useSessions, useSession, useSessionEvents, useSendMessage, useAnswer, and others) and WerftProvider. @werft-ai/react/components has the pieces that take API types and render them (StatusLabel, Timeline, Composer, ApprovalCard, QuestionCard, and others), and @werft-ai/react/blocks has the session blocks that also read the data and render it: SessionList, RecentSessions, WaitingSessions, SessionDetail, ApprovalInbox |
@werft-ai/ui only renders the state it is given. It does not call the API or decide permissions. API calls are handled by the hooks and blocks of @werft-ai/react.
Neither package is published to a registry (private, version 0.0.0). Apps inside this repository import them as workspace packages; there the packages export TypeScript source, so you need a bundler that compiles TypeScript, such as Vite. An app outside the repository can install only @werft-ai/ui, as a tarball of built JavaScript (Install in an app outside the repository). @werft-ai/react cannot be installed outside the repository.
Order of this section
- Install: create a Vite app inside the repository and import the packages
- Apply the theme: import three CSS files and turn on the dark theme
- Add session blocks: render the local stack's session list and session screen
- Install in an app outside the repository: pack
@werft-ai/uiinto a tarball and install it in another React app