ruview-live

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PANE_ID) return next(e);
    // A reload (hot reload, or a resumed session) re-runs register with fresh
    // variables while the engine keeps the pane open: drawing it means it is
    // open, so resume polling instead of waiting for the first capture forever.
    if (host && !stopTimer) startPolling();
    size = {
      columns: e.props?.bodyColumns ?? e.viewport?.columns ?? 100,
      rows: e.props?.scroll?.bodyRows ?? e.viewport?.rows ?? 30,
    };
    const ui = await $.ui.resolve(e);
    const now = await $.clock.now();
    return viewOf(ui, shownModel(), {
      ...drawOpts(now), refreshMs: settings.refreshMs, liveRefreshMs: settings.liveRefreshMs, busy, now,
      focused: e.props?.isFocused !== false,
      udpPort: settings.udpPort, radarConfigured: Boolean(settings.radarHost),
      onRefresh: () => { void refresh(); },
      onClose: () => { void close(); },
      onMode: (m) => setMode(m),
      onNextNode: () => { nodeIndex += 1; host?.invalidate(); },
    });
  });

export function viewOf(ui, model, opts) {
  const { Box, Text, Button } = ui;
  const mode = opts.mode || 'overview';
  const live = mode !== 'overview';
  const interval = live ? (opts.liveRefreshMs ?? opts.refreshMs) : opts.refreshMs;
  const t = (children, props = {}) => Text({ wrap: 'truncate-end', ...props, children });
  const row = (children, props = {}) => Box({ flexDirection: 'row', gap: 1, ...props, children: children.filter(Boolean) });
  const pics = ui.Raster ? picturesOf(model, opts) : {};

  // Header: freshness badge and age, then the signal rule.
  const finiteAt = model && Number.isFinite(model.at);
  const age = finiteAt && Number.isFinite(opts.now) ? opts.now - model.at : NaN;
  const fresh = Number.isFinite(age) && age <= interval * 2 + 5000;
  const when = finiteAt ? new Date(model.at).toLocaleTimeString() : '—';
  const badge = !model ? t('○ STARTING', { dimColor: true, bold: true })
    : fresh ? t('● LIVE', { color: 'green', bold: true }) : t('○ STALE', { color: 'yellow', bold: true });
  const header = row([
    t('RuView', { color: 'cyan', bold: true }),
    badge,
    t(model ? `updated ${when}${ageOf(age) ? ` (${ageOf(age)})` : ''} · every ${Math.round(interval / 1000)}s` : `waiting for the first capture… · every ${Math.round(interval / 1000)}s`, { dimColor: true }),
    opts.busy ? t('⟳ refreshing', { color: 'cyan' }) : null,
  ]);
  const rule = pics.shimmer ? ui.Raster(pics.shimmer.grid.toRaster('shimmer')) : null;

  // Hotkeys reach a Pane only while it holds the keyboard; say how to give it.
  const tabs = opts.onMode ? row([
    ...TABS.map(([m, key, label]) => Button({
      key: `tab-${m}`, hotkey: key, label: `${m === mode ? '▸ ' : ''}${label} (${key})`, onPress: () => opts.onMode(m),
    })),
    opts.focused === false ? t('click the pane or press ctrl+x tab to use the keys', { dimColor: true, italic: true }) : null,
  ], { gap: 2 }) : null;

  const alerts = (model?.alerts || []).map((a) => Text({ color: a.level === 'bad' ? 'red' : 'yellow', wrap: 'wrap', children: `! ${a.text}` }));

  let body;
  if (mode === 'waterfall') body = waterfallView(ui, model, opts, pics, t, row);
  else if (mode === 'radar') body = radarView(ui, model, opts, pics, t, row);
  else body = overview(ui, model, opts, t, row);

  const footer = row([
    Button({ key: 'refresh', label: opts.busy ? 'Refreshing…' : 'Refresh (r)', hotkey: 'r', onPress: opts.onRefresh }),
    mode === 'waterfall' && opts.onNextNode && (model?.spectrum?.length ?? 0) > 1 ? Button({ key: 'next-node', label: 'Next node (n)', hotkey: 'n', onPress: opts.onNextNode }) : null,
    Button({ key: 'close', label: 'Close (c)', hotkey: 'c', onPress: opts.onClose }),
  ], { gap: 2 });

  return Box({ flexDirection: 'column', gap: 1, paddingX: 1, children: [Box({ flexDirection: 'column', children: [header, rule].filter(Boolean) }), tabs, ...alerts, body, footer].filter(Boolean) });
}