flash-veille

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const active = await activeSources($, builtins)
    const all = visible(await read($, items), active).slice(0, TICKER_POOL)
    if (e.props.hasSurvey || all.length === 0 || (await read($, isBandHidden))) {
      return next(e)
    }

    const { Box, Text, Link } = $.ui.resolve(e)
    const now = await $.clock.now()
    const position = (await read($, index)) % all.length
    const item = all[position]!
    const source = sourceOf(item.source, active)!
    const href = safeHref(item.discussUrl ?? item.url)
    const age = ago(item.at, now)
    const counter = `${position + 1}/${all.length}`
    // Le titre est coupé ici, en colonnes réelles : la ligne ne passe jamais à la ligne.
    // ENGINE_CONTROL : le « [-] » que Claude Code dessine par-dessus le bout du bandeau ; on lui laisse sa place
    const fixed = columns(LABEL) + source.short.length + age.length + counter.length + 4 + ENGINE_CONTROL
    const title = revealFrame(fit(star(item) + item.title, e.props.bodyColumns - fixed), await read($, frame), FRAMES)

    return (
      <Box width={e.props.bodyColumns - ENGINE_CONTROL} height={1} overflow="hidden" columnGap={1}>
        <Text dimColor>{LABEL}</Text>
        <Text color={source.color} bold>
          {source.short}
        </Text>
        <Text dimColor>{age}</Text>
        <Box flexGrow={1} flexShrink={1}>
          <Text wrap="truncate-end">{href ? <Link href={href}>{title}</Link> : title}</Text>
        </Box>
        <Text dimColor>{counter}</Text>
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Link } = $.ui.resolve(e)
    const active = await activeSources($, builtins)
    const all = visible(await read($, items), active)
    const current: Filter = await read($, filter)
    const loading = await read($, isLoading)
    const failed = await read($, errors)
    const at = await read($, fetchedAt)
    const now = await $.clock.now()

    const shown = current === 'all' ? all : all.filter(it => it.source === current)
    const width = e.props.bodyColumns
    const tabs: { id: Filter; label: string }[] = [
      { id: 'all', label: 'Tout' },
      ...active.map(s => ({ id: s.id, label: s.short })),
    ]

    return (
      <Box flexDirection="column" width={width}>
        <Box flexWrap="wrap" columnGap={1}>
          {tabs.map(tab => (
            <Button
              key={`tab-${tab.id}`}
              label={tab.label}
              variant={tab.id === current ? 'primary' : undefined}
              onPress={() => update($, filter, () => tab.id)}
            />
          ))}
          <Button key="refresh" label={loading ? '…' : '↻'} hotkey="r" onPress={() => refresh($, active, true)} />
          <Button key="close" label="fermer" hotkey="x" role="dismiss" onPress={() => $.ui.close({ id: PANE })} />
        </Box>
        <Text dimColor wrap="truncate-end">
          {loading ? 'Mise à jour…' : at ? `Mis à jour il y a ${ago(at, now)}` : 'Chargement…'}
          {failed.length ? ` · injoignable : ${failed.join(', ')}` : ''}
        </Text>
        {shown.length === 0 && !loading && <Text dimColor>Rien pour l'instant.</Text>}
        {shown.slice(0, MAX_SHOWN).map(item => {
          const source = sourceOf(item.source, active)!
          const href = safeHref(item.discussUrl ?? item.url)
          const isFresh = item.at > 0 && now - item.at < FRESH_MS
          const title = star(item) + item.title
          return (
            <Box key={item.id} columnGap={1}>
              <Text color={source.color}>{source.short.padEnd(3)}</Text>
              <Text dimColor>{ago(item.at, now).padStart(4)}</Text>
              <Box flexShrink={1}>
                <Text wrap="truncate-end" dimColor={!isFresh} bold={isFresh}>
                  {href ? <Link href={href}>{title}</Link> : title}
                </Text>
              </Box>
            </Box>
          )
        })}
      </Box>
    )
  })