Skip to content
komp.ac Docs

Web UI setup and overview

The komp.ac web UI is a server-rendered browser frontend for the komp.ac gRPC backend. It is a member of the komp_ac workspace under the web crate and is served by the same server binary that exposes the gRPC API — there is no separate web service to start.

It is an Axum + Askama application that renders HTML on the server, uses htmx for partial page swaps, Alpine.js for small client-side state (such as the mobile menu), and ECharts for the analytics charts. The browser never speaks gRPC directly: Axum authenticates the request from an HTTP-only session cookie and proxies typed Tonic requests to the backend.

Documented version: web v0.8.38.

Where it runs

Section titled “Where it runs”

The web UI listens on 127.0.0.1:3000 by default. Start the server as usual:

Terminal window
cargo run --package server -- server

Then open http://127.0.0.1:3000 in a browser. The startup log prints the address it is serving on.

The listener address is controlled by LISTEN_ADDRESS, and the gRPC endpoint the web layer proxies to is controlled by ANALYTICS_GRPC_ENDPOINT (default http://[::1]:50051). Both are ordinary environment variables:

Terminal window
LISTEN_ADDRESS=0.0.0.0:3000 ANALYTICS_GRPC_ENDPOINT=http://127.0.0.1:50051 \
  cargo run --package server -- server

The gRPC channel is connected lazily, so the web UI itself starts even if the backend endpoint is not reachable yet; requests that need the backend will fail until it is.

How a request travels

Section titled “How a request travels”
  1. The browser sends a request to Axum, carrying the session cookie.
  2. Axum extracts the cookie, converts it into a Bearer authorization header, and signs the matching Tonic request.
  3. The response is rendered with Askama templates and returned as HTML.

This keeps the browser entirely out of the gRPC protocol. Every page reads and writes only through the same seven gRPC services the server exposes: Auth, TableDefinition, TableStructure, TableScript, TableValidation, TablesData, Analytics, and Ecb.

The interface at a glance

Section titled “The interface at a glance”

The web UI is divided into a few areas, each documented in its own chapter:

  • Analytics (/) — a read-only SQL view of one profile with ECharts charts.
  • Admin (/admin) — a three-pane browser for profiles, tables, and columns, which links out to the table-definition actions.
  • Table definitions — create tables, add and rename columns, delete tables, copy profiles, generate invoice-template tables, and read the rename history.
  • Steel — add computed-column scripts.
  • Validation — field validations, reusable rules, and validation sets.
  • Import and export — CSV bulk import and CSV export.
  • Exchange rates — the health of the ECB reference-rate pipeline.
  • Permissions — roles, users, and grants.

Start with Authentication and accounts to understand the session, or The web interface for the shared shell.

Technology

Section titled “Technology”
Layer Technology
HTTP server Axum
Templating Askama
Interactivity htmx, Alpine.js
Charts ECharts
Styling Tailwind CSS and Penguin UI (vendored beside the app templates)
Backend transport Tonic (gRPC) over a lazy channel

The penguinui-components directory is the Penguin UI library checked in unchanged; the app’s templates include it by path, so there are no vendored copies to re-sync when the library is updated.