CodeNomad/packages/ui/README.md
Pascal André b768880958
refactor(chat): centralize transcript scroll writes and add opt-in tracing (#971)
Route every VirtualFollowList DOM and Virtua position write through one reason-labelled writeScroll chokepoint that owns programmatic marking, with no change to targets, scheduling, cancellation or recorded offsets. Add an opt-in persisted logger namespace (scroll) tracing writes, follow-mode transitions and unowned movements with no layout reads when disabled; expose data-follow-mode; label the remaining external writers with the closed reason type. Releases and no-op writes keep attribution accurate. Diagnosis: the escaped-reader and hold displacements are Virtua default-size re-estimation, browser clamping and compensation, fixed in #974. Gatekeeper rounds 1-3 resolved to zero findings.
2026-10-15 19:16:10 +02:00

2 KiB
Raw Permalink Blame History

CodeNomad UI

This package contains the frontend user interface for CodeNomad, built with SolidJS and Tailwind CSS.

Overview

The UI is designed to be a high-performance, low-latency cockpit for managing OpenCode sessions. It connects to the CodeNomad server (either running locally via CLI or embedded in the Electron app).

Features

  • SolidJS: Fine-grained reactivity for high performance.
  • Tailwind CSS: Utility-first styling for rapid development.
  • Vite: Fast build tool and dev server.

Development

To run the UI in standalone mode (connected to a running server):

npm run dev

This starts the Vite dev server at http://localhost:3000.

Building

To build the production assets:

npm run build

The output will be generated in the dist directory, which is then consumed by the Server or Electron app.

Debug Logging

The UI routes logging through a lightweight wrapper around debug. Its namespaces can be toggled at runtime:

  • sse – Server-sent event transport and handlers
  • api – HTTP/API calls and workspace lifecycle
  • session – Session/model state, prompt handling, tool calls
  • actions – User-driven interactions in UI components
  • foreground-refresh – Visible-state reconciliation
  • scroll – Transcript position writes, follow-mode transitions and unclaimed (unowned) scrolls; see dev-docs/SESSION_HISTORY_NAVIGATION.md

You can enable or disable namespaces from DevTools (in dev or production builds) via the global window.codenomadLogger helpers:

window.codenomadLogger?.listLoggerNamespaces() // => [{ name: "sse", enabled: false }, ...]
window.codenomadLogger?.enableLogger("sse") // turn on SSE logs
window.codenomadLogger?.disableLogger("sse") // turn them off again
window.codenomadLogger?.enableAllLoggers() // optional helper

Enabled namespaces are persisted in localStorage under opencode:logger:namespaces, so your preference survives reloads.