[UI]

AXIS UI subsystem: chart host, editor, UI shell, indicators, results, and Solid store—presentation without a closed engine.

UI

UI is the AXIS browser presentation layer: everything the operator sees and clicks that is not language evaluation. Engines are plugins; AXIS applies their outputs to panes, markers, and drawers.

Abstract

SubsystemResponsibility
Chartinglightweight-charts panes, drawings, crosshair
EditorCodeMirror 6 Pine surface, dock/popout
UI shellTopbar, watchlist, status, manager chrome
IndicatorsRun pipeline, overlay apply, indicator list
Results & strategyEvent normalize, trades, export
StoreSolid store, persistence, active plugins

Conceptual model

Invariant (AXIS ≠ engine): no Solid component imports PYNE directly; only engine modules talk to Python/HTTP runtimes.

Interface surface (visual map)

┌─ Topbar ──────────────────────────────────────────────┐
├─ Watchlist ─┬─ ChartHost + drawings ─┬─ Indicators ─┬─ Editor ─┤
├─ Results drawer ──────────────────────────────────────┤
├─ System logs ─────────────────────────────────────────┤
└─ StatusBar ───────────────────────────────────────────┘
   + Settings modal + Plugin Manager modal

Implemented in frontend/src/app.tsx.

Stack

ConcernChoice
FrameworkSolidJS 1.9
BundlerVite 6 + vite-plugin-solid
Chartslightweight-charts 5
EditorCodeMirror 6
Iconslucide-solid
StyleTailwind 4 + void tokens (data-theme)

Relation to other tracks

See also

  • frontend/LEGACY.md — what is not the AXIS product path
  • frontend/TESTING.md — unit/e2e around UI modules