Redesign UI to match web_template (LotusGuild Terminal Design System) #2

New Issue

2026-09-05T11:43:24-04:00

jared commented

2026-09-05 11:43:24 -04:00

Summary

Pulse's UI predates the shared LotusGuild design system and should be migrated to match it, like the other internal apps (e.g. Gandalf).

Current state

public/base.js is already a verbatim copy of web_template/base.js (2952 lines, byte-identical) — so the window.lt JS utilities are already vendored in, just unused by the markup.
public/index.html is a single hand-rolled static page with its own inline <style> block: a bespoke "terminal green" theme (--terminal-green: #00ff41, CRT flicker animation, custom glow vars) that doesn't share tokens, components, or markup structure with web_template/base.css.
The page is served via plain express.static('public') (server.js:18) — no view engine, no templating.

What to change

Adopt web_template/base.css for styling (drop the bespoke inline <style> block in index.html) and use the documented .lt-* component classes instead of custom CSS.
Adopt the ready-made Node/Express integration that already ships in the design system repo instead of hand-rolling further:
- web_template/node/middleware.js — requireAuth (Authelia SSO header parsing), cspNonce, injectLocals (exposes user, nonce, appName, etc. to templates)
- web_template/node/layout.ejs — base EJS layout (nav, boot sequence, theme handling) meant to be extended via res.render('page', {...})
- This means switching server.js from express.static for the dashboard route to app.set('view engine', 'ejs') + app.use(cspNonce, requireAuth, injectLocals) per the header comment in middleware.js.
Call lt.init({ bootName: 'PULSE' }) on load (already possible today since base.js is in place) instead of whatever custom init index.html currently does.
Keep Pulse-specific data (worker list, execution log, schedules) as page content inside the shared layout rather than reinventing chrome (nav, header, theme toggle, boot overlay) that layout.ejs/base.css already provide.

Reference

Design system: https://code.lotusguild.org/LotusGuild/web_template
web_template/README.md has the full component catalog, CSS variables, and JS API
See Gandalf's templates/base.html (Python/Jinja2 variant of the same layout) for a working example of another app that's already migrated

## Summary Pulse's UI predates the shared LotusGuild design system and should be migrated to match it, like the other internal apps (e.g. Gandalf). ## Current state - `public/base.js` is already a verbatim copy of `web_template/base.js` (2952 lines, byte-identical) — so the `window.lt` JS utilities are already vendored in, just unused by the markup. - `public/index.html` is a single hand-rolled static page with its own inline `<style>` block: a bespoke "terminal green" theme (`--terminal-green: #00ff41`, CRT flicker animation, custom glow vars) that doesn't share tokens, components, or markup structure with `web_template/base.css`. - The page is served via plain `express.static('public')` (`server.js:18`) — no view engine, no templating. ## What to change 1. Adopt `web_template/base.css` for styling (drop the bespoke inline `<style>` block in `index.html`) and use the documented `.lt-*` component classes instead of custom CSS. 2. Adopt the ready-made Node/Express integration that already ships in the design system repo instead of hand-rolling further: - `web_template/node/middleware.js` — `requireAuth` (Authelia SSO header parsing), `cspNonce`, `injectLocals` (exposes `user`, `nonce`, `appName`, etc. to templates) - `web_template/node/layout.ejs` — base EJS layout (nav, boot sequence, theme handling) meant to be extended via `res.render('page', {...})` - This means switching `server.js` from `express.static` for the dashboard route to `app.set('view engine', 'ejs')` + `app.use(cspNonce, requireAuth, injectLocals)` per the header comment in `middleware.js`. 3. Call `lt.init({ bootName: 'PULSE' })` on load (already possible today since `base.js` is in place) instead of whatever custom init `index.html` currently does. 4. Keep Pulse-specific data (worker list, execution log, schedules) as page content inside the shared layout rather than reinventing chrome (nav, header, theme toggle, boot overlay) that `layout.ejs`/`base.css` already provide. ## Reference - Design system: https://code.lotusguild.org/LotusGuild/web_template - `web_template/README.md` has the full component catalog, CSS variables, and JS API - See Gandalf's `templates/base.html` (Python/Jinja2 variant of the same layout) for a working example of another app that's already migrated

jared commented

2026-09-05 12:03:43 -04:00