Refactor the Truth Yard web UI to use native Web Components as the primary UI composition mechanism. The goal is to reduce duplication, improve structure, and keep the UI framework-free while remaining fast and transparent.
- We will replace monolithic DOM manipulation with custom elements under
bin/web-ui/asset/component/
- We will standardize on fluent-html.ts as the default and only HTML authoring mechanism
- We will avoid JSX, template strings, and virtual DOM libraries
Implementation Plan
-
Introduce fluent-html.ts as a shared utility for HTML generation
- HTML elements will be created via fluent function calls (e.g.
div(...), table(...))
- The library will emit real DOM nodes, not a virtual DOM
- The library will include a dev-time warning for invalid patterns (e.g. empty
{} attrs)
-
Convert the main UI into the following Web Components:
<yard-app> – state management, polling, and orchestration
<yard-process-table> – running services view
<yard-reconcile-table> – reconcile results view
<yard-header> / <yard-footer> – layout chrome and status display
<yard-docs> – usage and debugging documentation
-
Small, closely related components may be grouped into a single file where appropriate
-
Components will communicate via properties and events, not global state
-
All rendering inside components will be done using fluent-html helpers
Constraints / Non-Goals
- No framework dependencies (React, Vue, Lit, etc.)
- No build step or transpilation
- No JSX
- No server-side rendering
- Styling remains in existing CSS files
Acceptance Criteria
- All UI rendering is performed via fluent-html
- No remaining manual
innerHTML string concatenation
- No empty attribute objects passed to fluent-html tags
- UI behavior and functionality remains unchanged
- Code is readable, modular, and idiomatic modern JavaScript
Motivation
This refactor will make the web UI easier to extend, easier to reason about, and aligned with Operational Truth Yard’s philosophy of minimal abstractions, transparent behavior, and long-term maintainability.
Refactor the Truth Yard web UI to use native Web Components as the primary UI composition mechanism. The goal is to reduce duplication, improve structure, and keep the UI framework-free while remaining fast and transparent.
bin/web-ui/asset/component/Implementation Plan
Introduce
fluent-html.tsas a shared utility for HTML generationdiv(...),table(...)){}attrs)Convert the main UI into the following Web Components:
<yard-app>– state management, polling, and orchestration<yard-process-table>– running services view<yard-reconcile-table>– reconcile results view<yard-header>/<yard-footer>– layout chrome and status display<yard-docs>– usage and debugging documentationSmall, closely related components may be grouped into a single file where appropriate
Components will communicate via properties and events, not global state
All rendering inside components will be done using fluent-html helpers
Constraints / Non-Goals
Acceptance Criteria
innerHTMLstring concatenationMotivation
This refactor will make the web UI easier to extend, easier to reason about, and aligned with Operational Truth Yard’s philosophy of minimal abstractions, transparent behavior, and long-term maintainability.