Skip to content

Refactor truth-yard Web UI to Web Components using fluent-html #8

Description

@shah

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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions