feat: migrate web UI from kotlinx.html to xemantic-kotlin-js by morisil · Pull Request #55 · xemantic/golem-xiv

morisil · 2026-02-18T21:10:34Z

Replace kotlinx.html dependency with xemantic-kotlin-js library in the golem-xiv-web module. All view code now uses the node { } DSL pattern from com.xemantic.kotlin.js.dom.html.* instead of kotlinx.html TagConsumer.

Closes #54

Generated with Claude Code

Replace kotlinx.html dependency with xemantic-kotlin-js library in the golem-xiv-web module. All view code now uses the `node { }` DSL pattern from com.xemantic.kotlin.js.dom.html.* instead of kotlinx.html TagConsumer. Changes: - Replace libs.kotlinx.html with libs.xemantic.kotlin.js in build.gradle.kts - Remove js/Dom.kt (GolemTagConsumer/inject pattern replaced by node { +el }) - Remove js/Accessibility.kt (ariaLabel now from com.xemantic.kotlin.js.dom) - Remove js/Storage.kt (setItems now from com.xemantic.kotlin.js.dom) - Rewrite HtmlMainView, HtmlHeaderView, HtmlNavigationRailView, HtmlNotFoundView, HtmlMemoryView, HtmlCognitionView, UiElements using xemantic-kotlin-js node { } DSL Closes #54 Co-authored-by: Kazik Pogoda <morisil@users.noreply.github.com>

claude · 2026-02-18T21:13:17Z

PR Review: Migrate web UI from kotlinx.html to xemantic-kotlin-js

Overall this is a clean and well-motivated migration. The node { } DSL from xemantic-kotlin-js is more idiomatic and removes the need for the custom GolemTagConsumer workaround that was required to inject pre-built DOM elements into kotlinx.html builders. Here is my detailed feedback:

Positive changes

Removal of GolemTagConsumer hack — The old Dom.kt contained a marker-div injection pattern that was fragile: it used querySelector("#golem-marker-N") to locate placeholder <div> elements and replace them post-finalization. The new node { } DSL supports direct child insertion via +element, eliminating this complexity entirely. This is a significant correctness improvement.

Cleaner element construction — The pattern node { div("foo") { +child } } is simpler and more readable than dom.div("foo") { inject(child) }.

HtmlMainView.kt — Removal of the large commented-out buildMainUi block is good housekeeping.

HtmlNavigationRailView.kt — Inlining window.resizes() as window.eventFlow<Event>("resize") and removing the resizes extension avoids having a separate utility file for a one-liner.

Issues and observations

1. Icon() function in UiElements.kt wraps content differently

Before: fun Icon(name: String): HTMLSpanElement = document.create.span { i { +name } }

After: fun Icon(name: String): HTMLSpanElement = node { span { +name } }

The new version renders name instead of name. This is a behavioral regression — the  element is required for Material Icons (icon font rendering). The top-level icon() DSL function from xemantic-kotlin-js is used correctly elsewhere (e.g., icon("menu"), icon("person")), but the Icon() factory function in UiElements.kt (used by Button, IconButton, Link) no longer wraps in . Verify whether Icon() should delegate to icon() or use span { i { +name } }.

2. Missing newline at end of file in UiElements.kt

The diff ends with \ No newline at end of file. This is worth fixing.

3. HtmlNavigationRailView.kt — it.setAttribute(...) vs DSL attributes

The old code used attributes["data-target"] = "..." (kotlinx.html style). The new code uses it.setAttribute("data-target", "..."). This is fine but inconsistent with it.ariaLabel = ... which uses a typed property extension. Consider it.dataset["target"] = "..." as the idiomatic Web API equivalent for data-* attributes.

4. HtmlCognitionView.kt — addExpression role class

Before: val role = if (expression.agent is EpistemicAgent.AI) "ai" else "human"

After: val role = expression.agent.cssClass()

Good simplification, but worth verifying: does EpistemicAgent.Computer.cssClass() produce a meaningful CSS class for the expression display?

5. Commented-out code removal in HtmlCognitionView.kt

The large block of commented-out addTextResponse / addToolUseRequest / addToolUseResponse methods has been removed. Fine if this dead code is no longer needed, but if those features are planned, a GitHub issue would be better than keeping them as comments.

6. Storage.kt deletion

js/Storage.kt (the Storage.setItems() extension) is deleted. Confirm nothing else in the codebase still depends on it before merging.

7. Accessibility.kt deletion

The ariaLabel extension on HTMLTag is replaced by ariaLabel from com.xemantic.kotlin.js.dom. Verify the new property extension has the same semantics (writes to element.setAttribute("aria-label", ...) for browser compatibility).

Minor nits

The println("adding expression: $expression") debug log in HtmlCognitionView.addExpression predates this PR but is worth removing in a future cleanup.
class HtmlMemoryView() and class HtmlNotFoundView() have empty primary constructor parens — minor style issue, consistent with the existing codebase.

Summary

The migration is sound and the resulting code is cleaner. The main item to verify before merging is issue #1 (the Icon() regression removing the  wrapper) and issue #6 (ensure Storage.setItems() is truly unused).

Generated with Claude Code

morisil

@claude can you address these comments?

morisil · 2026-02-18T21:10:58Z

-import com.xemantic.ai.golem.web.ui.Icon
 import com.xemantic.ai.golem.web.ui.IconButton
 import com.xemantic.ai.golem.web.view.HasRootHtmlElement
+import com.xemantic.kotlin.js.dom.html.article


you can use wildcard here

morisil · 2026-02-18T21:13:42Z


-    private val promptInput = dom.textArea {
-        placeholder = "Another question from the carbon side..."
+    private val promptInput: HTMLTextAreaElement = node {


I guess explicit type is not needed here?

morisil · 2026-02-18T21:14:47Z

 import com.xemantic.ai.golem.web.navigation.HtmlNavigationRailView
 import com.xemantic.ai.golem.web.cognition.HtmlCognitionView
 import com.xemantic.ai.golem.web.view.HasRootHtmlElement
+import com.xemantic.kotlin.js.dom.html.div


use wildcard import here

morisil · 2026-02-18T21:15:04Z

-import kotlinx.browser.document
-import kotlinx.html.dom.create
-import kotlinx.html.js.iframe
+import com.xemantic.kotlin.js.dom.html.iframe


wildcard import here

morisil · 2026-02-18T21:15:23Z

-import com.xemantic.ai.golem.web.js.dom
-import com.xemantic.ai.golem.web.js.inject
 import com.xemantic.ai.golem.web.view.HasRootHtmlElement
+import com.xemantic.kotlin.js.dom.ariaLabel


morisil · 2026-02-18T21:16:40Z

-        div { +"Initiate" }
+    private val initiateCognitionItem = node {
+        a {
+            it.setAttribute("data-target", "initiate-cognition")


it["data-target"] = "initiate-cognition"]

should be possible here

morisil · 2026-02-18T21:17:04Z

-        div { +"Memory" }
+    private val memoryItem = node {
+        a {
+            it.setAttribute("data-target", "memory")


see previous comment, apply everywhere if possible

morisil · 2026-02-18T21:18:31Z

-    i {
-        +name
-    }
+fun Icon(name: String): HTMLSpanElement = node {


we can remove this code since icon("foo") was added to the library, and is now the preferred way of using icons with beer css.

morisil · 2026-02-18T21:19:07Z

+): HTMLButtonElement = node {
+    button("round") {
+        if (icon != null) {
+            i { +icon }


you can also use icon(icon) from xemantic-kotlin-js

morisil · 2026-02-18T21:19:42Z

+): HTMLAnchorElement = node {
+    a("wave round") {
+        if (icon != null) {
+            i { +icon }


use icon(icon)

claude · 2026-02-18T21:20:25Z

- Use wildcard imports (com.xemantic.kotlin.js.dom.html.*) in all view files - Remove explicit type annotation on promptInput in HtmlCognitionView - Replace setAttribute("data-target", ...) with dataset["target"] = ... in HtmlNavigationRailView - Remove Icon() factory function (superseded by icon() DSL from xemantic-kotlin-js) - Use icon() DSL instead of i {} in Button, IconButton, and Link in UiElements Co-authored-by: Kazik Pogoda <morisil@users.noreply.github.com>

morisil commented Feb 18, 2026

View reviewed changes

morisil requested review from anakori, cddlee and kodehaven February 19, 2026 14:35

kodehaven approved these changes Feb 19, 2026

View reviewed changes

Uh oh!

Conversation

morisil commented Feb 18, 2026

Uh oh!

claude bot commented Feb 18, 2026

PR Review: Migrate web UI from kotlinx.html to xemantic-kotlin-js

Positive changes

Issues and observations

Minor nits

Summary

Uh oh!

morisil left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

claude bot commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Addressing Review Comments

Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

claude bot commented Feb 18, 2026 •

edited

Loading