weektoken

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (disabled || e.props.hasSurvey) return next(e)
    if (((await read($, bandA)) ?? 'open') === 'hidden') return next(e)
    await useLang($)
    const show = (await read($, confirmHideA)) ? 'confirm' : await read($, bandShowA)
    if (!show) return next(e)
    const ours = show === 'confirm' ? drawConfirmHide($, e) : drawBand($, e, show, !!(await read($, paneOpenA)))
    const below = await next(e)
    const { Box } = $.ui.resolve(e)
    return <Box flexDirection="column">{ours}{isBlank(below) ? null : below}</Box>
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const samples = (await read($, samplesA)) ?? []
    const view = (await read($, viewA)) ?? DEFAULT_VIEW
    const note = await read($, noteA)
    const band = (await read($, bandA)) ?? 'open'
    await useLang($)
    const now = await $.clock.now()
    const activity = (await read($, activityA)) ?? { byModel: {} }
    const bandKey = (await read($, bandKeyA)) ?? null
    paneVersion = (await read($, versionA)) ?? ''
    return drawPane($, e, samples, activity, view, note, band, buildModel(samples, view, now, bandKey), now)
  })

function drawPane($: any, e: any, samples: readonly Sample[], activity: Activity, view: PaneView, note: Note, band: BandMode, m: Model, now: number) {
  const { Box, Text, Button } = $.ui.resolve(e)
  // At least as tall as the pane body (row count from the host; Box sizes are in rows on every surface); the spacer before the credit pushes it to the bottom
  const fill = e.props?.scroll?.bodyRows ? Math.max(1, e.props.scroll.bodyRows) : '100%'
  paneActions.clear()
  paneSurface = e.surface
  paneFocusedAtRender = !!e.props?.isFocused
  const term = e.surface === 'terminal'
  const sel = m.selected
  const row = sel ? m.rows[sel] : undefined
  const nl = noteLine(row, samples, activity, now)
  const busy = isBusy(note, now)
  const footer = (
    <Box flexDirection="row" alignItems="center" gap={1}>
      {nl ? <Text dimColor wrap="truncate-end">{nl}</Text> : null}
      <Box flexGrow={1} />
      <Button key="band-toggle" label={band === 'hidden' ? L('⊕ 显示横条', '⊕ Show band') : L('⊖ 隐藏横条', '⊖ Hide band')} onPress={paneAct('band-toggle', () => toggleBandHidden($))} />
      <Button key="refresh" label={busy ? L('↻ 刷新中…', '↻ Refreshing…') : L('↻ 刷新', '↻ Refresh')} {...(term ? { hotkey: 'r' } : {})} onPress={paneAct('refresh', () => refreshAll($, true))} />
    </Box>
  )
  if (!row) {
    return (
      <Box flexDirection="column" gap={term ? 1 : 2} paddingX={1} minHeight={fill}>
        {drawEmpty($, e)}
        {footer}
        <Box flexGrow={1} />
        {credit($, e)}
      </Box>
    )
  }
  // Desktop: quota-switch arrows flank the title, as on the band; the name cell is sized to the longest quota name so arrows don't move on switch.
  // (Arrows used to sit at both ends of the ring row; once readings moved into the image it grew 50% wider and squeezed the arrows against the ring)
  // The terminal pace tab has its own named buttons (h / l), so no title arrows
  const headArrows = !term && m.keys.length > 1
  const headArrow = (offset: -1 | 1) => {
    const name = offset < 0 ? 'prev' : 'next'
    return (
      <Box key={`sw-${name}`} flexShrink={0}>
        <Button
          key={name}
          label={offset < 0 ? '❮' : '❯'}
          plain
          hover={{ color: identityText(P.neighbor(row.key, m.keys, offset) as string), bold: true }}
          onPress={paneAct(name, () => stepKey($, m.keys, row.key, offset))}
        />
      </Box>
    )
  }
  const title = <Text color={identityText(row.key)} bold wrap="truncate-end">{row.full}</Text>
  const header = headArrows ? (
    <Box flexDirection="row" alignItems="center">
      {headArrow(-1)}
      <Box flexShrink={0} width={Math.max(...m.keys.map(k => cells(m.rows[k].full)))} justifyContent="center">{title}</Box>
      {headArrow(1)}
    </Box>
  ) : (
    <Box flexDirection="row" alignItems="center" gap={1}>{title}</Box>
  )
  const tabs = (
    <Box flexDirection="row" gap={1}>
      <Button key="tab-pace" label={L('配速', 'Pace')} {...(term ? { hotkey: '1' } : {})} variant={view.tab === 'pace' ? 'primary' : 'secondary'} onPress={paneAct('tab-pace', () => setView($, v => ({ ...v, tab: 'pace', explore: false })))} />
      <Button key="tab-burnup" label={L('用量轨迹', 'Burn-up')} {...(term ? { hotkey: '2' } : {})} variant={view.tab === 'burnup' ? 'primary' : 'secondary'} onPress={paneAct('tab-burnup', () => setView($, v => ({ ...v, tab: 'burnup', explore: false })))} />
    </Box>
  )
  return (
    <Box flexDirection="column" gap={term ? 1 : 2} paddingX={1} minHeight={fill}>
      {header}
      {tabs}
      {view.tab === 'burnup' ? drawBurnUpTab($, e, samples, m, row, view, now) : drawPaceTab($, e, samples, m, row)}
      {footer}
      <Box flexGrow={1} />
      {credit($, e)}
    </Box>
  )
}

function drawEmpty($: any, e: any) {
  const { Box, Text } = $.ui.resolve(e)
  return (
    <Box flexDirection="column" alignItems="center" paddingY={1}>
      <Text bold>{L('还没有数据', 'No data yet')}</Text>
      <Text dimColor wrap="wrap">{L('等这个会话收到第一条回复，或点「刷新」', "Waiting for this session's first reply, or press Refresh")}</Text>
    </Box>
  )
}

function credit($: any, e: any) {
  const { Box, Text } = $.ui.resolve(e)
  const handle = `@${AUTHOR.x}${paneVersion ? ` · v${paneVersion}` : ''}`
  return (
    <Box flexDirection="row" justifyContent="flex-end">
      {e.surface === 'terminal' ? <Text dimColor>{handle}</Text> : pic($, e, creditSvg(handle), handle)}
    </Box>
  )
}

function pic($: any, e: any, source: string, alt: string, opts: { isInteractive?: boolean; fluid?: boolean; fillHeight?: number } = {}) {
  const { Svg } = $.ui.resolve(e)
  if (opts.fluid) return <Svg source={source} alt={alt} />
  // Plain image with height only: the SVG declares no width (width="100%") and uses percentage geometry, so width follows the cell up to the image default 300px,
  // stretching without distortion. No interactive frame: the host reloads it, flickering, whenever the same plugin redraws elsewhere (the pane) (confirmed on device)
  if (opts.fillHeight) return <Svg source={source} alt={alt} height={opts.fillHeight} />
  const m = /^<svg[^>]*?\swidth="([\d.]+)"\s+height="([\d.]+)"/.exec(source)
  const size = m ? { width: Number(m[1]), height: Number(m[2]) } : {}
  return opts.isInteractive
    ? <Svg source={source} alt={alt} {...size} isInteractive />
    : <Svg source={source} alt={alt} {...size} />
}