Keyboard-native navigation and region selection for the ideas board (depends on #156 the engine endpoint, and #157 the board scaffold). This is what turns "analyze the whole 1Y window" into "analyze a candle range I selected".
Model (vim)
Board level — h/j/k/l move the selection between elements (nodes); Enter (or zoom) focuses a chart node, switching into chart mode. Esc returns to board level.
Chart level (a focused chart) — a candle cursor:
h / l = move ±1 candlestick (left / right)
H / L = ±5 candlesticks
{count}{motion} = ±count, e.g. 10l = 10 right, 10h = 10 left (standard vim count motions)
Visual mode — v anchors at the cursor; h/l (and counts) extend the selection over a candle range, rendered as the "analysed window" (in-range candles bright + blue/orange rails, the rest dimmed to context). Enter / :analyze fires GET /api/backtest/optimal-entry/{symbol}?from=&to= for the selected window and pins a way-to-trade card wired to the region. Esc cancels.
Notes / approach
- Reuse the unified region vim-nav philosophy already in
vim-nav.js; here it runs inside the React Flow board (board level) + inside a focused chart (candle level).
- Use lightweight-charts coordinate APIs (logical range /
timeToCoordinate) to place the cursor + the range overlay; the selected range maps to the endpoint's from/to.
- The selection is keyboard-native marquee — same result as a mouse drag, but vim-first (mouse = failure).
Acceptance
- Cursor moves by 1 / 5 / count;
v selects a range with the analysed-window rendering; Enter analyses exactly that window and pins the card; Esc exits cleanly; no element is unreachable by keyboard.
Keyboard-native navigation and region selection for the ideas board (depends on #156 the engine endpoint, and #157 the board scaffold). This is what turns "analyze the whole 1Y window" into "analyze a candle range I selected".
Model (vim)
Board level —
h/j/k/lmove the selection between elements (nodes);Enter(or zoom) focuses a chart node, switching into chart mode.Escreturns to board level.Chart level (a focused chart) — a candle cursor:
h/l= move ±1 candlestick (left / right)H/L= ±5 candlesticks{count}{motion}= ±count, e.g.10l= 10 right,10h= 10 left (standard vim count motions)Visual mode —
vanchors at the cursor;h/l(and counts) extend the selection over a candle range, rendered as the "analysed window" (in-range candles bright + blue/orange rails, the rest dimmed to context).Enter/:analyzefiresGET /api/backtest/optimal-entry/{symbol}?from=&to=for the selected window and pins a way-to-trade card wired to the region.Esccancels.Notes / approach
vim-nav.js; here it runs inside the React Flow board (board level) + inside a focused chart (candle level).timeToCoordinate) to place the cursor + the range overlay; the selected range maps to the endpoint'sfrom/to.Acceptance
vselects a range with the analysed-window rendering;Enteranalyses exactly that window and pins the card;Escexits cleanly; no element is unreachable by keyboard.