UI

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

This page

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
ChartingPanes, multi-chart, replay, compare, drawings, badges
EditorCM6, diagnostics, ruler, git bar, stats, dock/popout
DebuggingScriptlogs, Profiler, Debug chips, Pins, Problems
UI shellTopbar groups, docks side-by-side, palette, shortcuts, mobile shell, alerts
ScriptsRun pipeline, Scripts panel, overlay/sub-pane routing
Results & strategyEvent normalize, trades, equity, export
StoreSolid store, persistence, active plugins

Conceptual model

Diagram

Rendering…

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

Interface surface (visual map)

┌─ Topbar (grouped: market · data · compute · layout · panels · system) ─┐
├─ left docks ─┬─ ChartHost (1–4 slots) + drawings ─┬─ right docks ─────┤
│  watchlist   │  multi-pane + badges + replay       │  indicators|editor │
│  layers …    │                                    │  (side-by-side)    │
├─ Results / scriptlogs (bottom) ───────────────────────────────────────┤
├─ System logs ─────────────────────────────────────────────────────────┤
└─ StatusBar (connection HUD) ──────────────────────────────────────────┘
   + Studio (Runtime · Wire · Settings) · Command palette (⌘K)

Implemented in src/app.tsx (repo root product UI).

AXIS UI: watchlist, multi-pane chart, and editor

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

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