Architecture

KLineChartQuant is a pnpm monorepo built around one headless engine. Framework packages mount it, the Agent drives it through the same methods as the UI, and every pixel comes out of one frame pipeline. This page is the map; the in-depth pages it links carry the detail.

Several in-depth pages are written in Chinese and shown in their original language.

Packages and boundaries

Three boundaries hold everything together:

• The core is framework-free. Bindings depend on the core through workspace:*; the core never imports Vue, React or Angular. Bindings only mount the container, forward input and bridge signals into their own reactivity.
• One controller surface. ChartController exposes readonly signals (viewport, data, indicators, theme, pane layout, interaction state and more) and command methods such as setData, setSymbols and addIndicator. Every binding talks to this surface.
• No Agent bridge. Core methods decorated with @Tool are the Agent's tools. The Agent runtime calls them directly, against the same state the user sees.

React takes the long way round on purpose: React → Web Component → controller. There is one UI implementation, not two.

From data to a frame

Provider ── SourceRouter ── MarketDataCache
                                 │
                       chart data buffer
                                 │
                 StateKernel (data signal updates)
                                 │
                    scheduleDraw(level)
                                 │
     FrameTransaction: capture → derive → seal → render → publish
                                 │
                  Scene / Layer (per pane, by role and z)
                                 │
              Renderer ── WebGPU · WebGL2 · Canvas2D

1. A binding calls setSymbols or passes inline data. ChartDataManager finds or creates the buffer for that series.
2. MarketDataCache fetches through SourceRouter, pages, retries and de-duplicates, then writes into the buffer. See Market data.
3. The buffer change updates the StateKernel data signal and calls scheduleDraw().
4. FrameTransaction merges every request that arrives before the next animation frame. It seals the input, derives the visible range and K-line geometry once, seals that geometry so hit-testing matches what is on screen, then paints.
5. Each pane paints its layers through one Renderer contract (drawInstances, drawLines). Input that arrives mid-frame goes to the next generation; the current frame never changes underneath itself.

Interaction takes a shorter path. Pointer, wheel and pinch events update interaction state and redraw the overlay layer only, so moving the crosshair never repaints the static main layer.

Rendering backends

Business layers never touch a GPU API. They submit primitives to Renderer, and RendererHost decides what runs them.

When the active backend is below the preference, the runtime status is degraded. Switching backends is a hot swap: the scene and its layers are kept, and the old renderer is disposed after the new one takes over. A lost WebGPU device falls back to WebGL, then Canvas. If a GPU batch cannot complete, the layer runs its full Canvas2D path. Pixels are drawn at physical resolution from logical inputs, with one source for the device pixel ratio.

Read further

Next