Web UI

Use this page to check the browser routes, authentication, screens, and responsive behaviour.

afe serve --ui serves a web UI on the API's own host and port. It is a static bundle that lives in the afe-web Python package: no Node.js runs at serving time and nothing else is deployed.

export AFE_API_TOKEN=$(openssl rand -hex 32)
afe serve -c config/ --ui          # open http://127.0.0.1:8765/
afe worker -c config/              # in another terminal: the UI shows the tickets it runs

Sign in

The UI asks for the engine's API token once. POST /auth/login sets an HttpOnly, SameSite=Strict session cookie (signed with a key derived from the token, and Secure behind HTTPS), so the JavaScript never holds the token. A session lasts 8 hours by default (--session-hours). GET /auth/session tells the page whether it is signed in; a lost connection that comes back 401 sends the user back to the login. The /rpc WebSocket accepts that cookie only when the request's Origin is the server's own; the CLI keeps using the bearer token.

Screens

Route	Page	What it does
/	Dashboard	tickets by state, filters by state and flow, a search on ticket id, uid and project, the live list with cost, sortable by any column; a row opens the ticket
/tickets/:id	Ticket	header and totals with cached and fresh tokens, the pending request, the flow's BPMN with the current node, the live timeline, the artifacts; pause, cancel, resume and rerun
/approvals	Approvals	every ticket waiting for a person, answered in place
/flows, /flows/:name	Flows	the flows of the current revision, each with its BPMN and a start button
/flows/:name/start	Start a ticket	a form generated from the flow's input Schema; ?rerun=<id> fills it from a ticket
/revisions/:id	Revision	a revision and its manifests, read-only YAML
/workers	Workers	the live workers and the queue, refreshed at 2, 5 or 10 s, or paused

A human node may name the actions whose answer needs a comment:

approve:
  type: human
  actions: [approve, reject]
  requireComment: [reject]

On the Ticket and Approvals pages such an action opens a confirmation whose comment is required; the engine refuses the answer without one, from the UI, the CLI or the API (INVALID_INPUT).

Every screen updates live from one events.subscribe on /rpc, shows a loading, empty and error state, and reconnects with a banner when the WebSocket drops. The UI speaks English and Italian from one message file per language; the choice is remembered in the browser, and dates, numbers and costs follow the locale. The BPMN is laid out automatically (bpmn-auto-layout) and shown read-only with zoom and pan (bpmn-js); the bpmn.io watermark stays, as its licence asks. In a ticket, a red dot marks the current node; a click on a node, gateway or pause event shows its id, type and last events, and borders it in blue. The pause events (the dashed circles on the agent tasks: the agent may stop for its budget or the loop guard and wait for a person) sit on their task's top-right corner. The diagram opens centred in a box as tall as the diagram, between 160 px and 60 % of the window's height; "Fit" fits it and centres it again.

On a phone and a tablet

The UI works from 360 px up and never scrolls sideways: long ids, JSON and YAML wrap or scroll inside their own box. It follows Material UI's breakpoints:

Width	Layout
below 600 px (phone)	the layout below
600–899 px (tablet)	the desktop pages, stacked in one column; tables keep every column
from 900 px (desktop)	side by side, as described above

On a phone:

• App bar: the menu, afe and the waiting bell. The language and "Log out" sit at the bottom of the navigation drawer.
• Touch: every button, link row and card is at least 40 px tall, and nothing needs hover.
• Dashboard: the counts by state are one row of chips, every state with its number. The search comes first, the state and flow filters share the line below. Each ticket is a card (id, state, flow, round, cost, and project when set) that opens the ticket. A "Sort by" menu and an arrow button replace the column headers.
• Ticket: the id, the state under it, then the actions. The details and totals are one per line. The request panel's comment and buttons take the full width. The diagram, its node panel, the events and the artifacts follow in that order.
• BPMN: the diagram opens at 100 %, centred on the ticket's current node (or START) when it is wider than the screen. Drag with one finger to pan and pinch to zoom; over the diagram the page does not scroll. Tapping a node opens its panel and scrolls to it.
• Approvals, Flows, Start, Workers: cards, fields and buttons take the full width. The workers are cards (worker, host, pid, tickets over concurrency, last seen). The flow's revision chip shows the first 12 characters of the id.

What it does not do

• It does not edit flows or manifests, and it does not draw flows.
• It has one token, no users or roles.
• It has no dark theme.
• It is not an installable app (PWA): no offline use and no push notifications.

See also

• CLI for starting the server and worker.
• API for the WebSocket protocol.
• Ticket states for lifecycle values shown by the UI.