skill-dock

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // Other mods' sections come first; this one follows, nearer the prompt.
    const above = await next(e)
    if (e.props.hasSurvey || !runsOn(showIn, e.surface)) return above

    const [pinned, used, list, inline, at] = await Promise.all([
      read($, pins),
      read($, uses),
      read($, skills),
      read($, isInline),
      $.clock.now(),
    ])
    const t = $.ui.resolve(e)
    const { Box, Text, Button } = t
    const isText = e.surface === 'terminal'
    const isStacked = !isText || e.props.bodyColumns < NARROW_COLUMNS
    // The terminal takes no clicks outside fullscreen: say how to reach the buttons.
    const hasHint = isText && e.viewport?.isFullscreen !== true && !hasKey(above, HINT_KEY)

    const allLabel = inline ? 'Close' : `All skills (${list.length}) ›`
    const candidates = [
      ...pinned.map(name => ({ name, label: `★ ${short(name)}`, isPinned: true })),
      ...frequent(list, pinned, used, at, DOCK_FREQUENT).map(s => ({
        name: s.name,
        label: short(s.name),
        isPinned: false,
      })),
    ]
    // The desktop app wraps the chips, so every pin shows. The terminal keeps one row of the
    // chips that fit; the rest are a click away in All skills.
    const room =
      e.props.bodyColumns - (isStacked ? 0 : LABEL_WIDTH + LABEL_GAP + allLabel.length) - ROW_SLACK
    const chips = isText ? fitChips(candidates, room, CHIP_PADDING_TEXT) : candidates
    const allButton = (
      <Button
        key="dock-all"
        plain
        dimColor
        label={allLabel}
        onPress={() => (inline ? update($, isInline, () => false) : openAll($))}
      />
    )

    return (
      <Box flexDirection="column">
        {above}
        <Box flexDirection="column" marginTop={hasContent(above) ? sectionGap(e.surface) : 0}>
          {section(
            t,
            'Skills',
            <Box flexDirection="column">
              <Box
                flexDirection="row"
                flexWrap={isText ? 'nowrap' : 'wrap'}
                gap={isText ? 2 : 1}
                alignItems="center"
                overflow="hidden"
              >
                {chips.length === 0 && (
                  <Text dimColor>Pin or use a skill and it shows up here</Text>
                )}
                {chipRow($, t, chips, isText)}
              </Box>
              {inline && (
                <Box flexDirection="column" marginTop={1}>
                  {skillList($, t, { list, pinned, used, at })}
                </Box>
              )}
            </Box>,
            { isStacked, aside: allButton, hasHint, isCentred: !inline },
          )}
        </Box>
      </Box>
    )
  })

function section(
  t: ElementTable,
  label: string,
  content: JSX.Element,
  layout: { isStacked: boolean; aside?: JSX.Element; hasHint?: boolean; isCentred?: boolean },
) {
  const { Box, Text } = t
  const { isStacked, aside, hasHint = false, isCentred = false } = layout
  const hint = hasHint && (
    <Box key={HINT_KEY}>
      <Text dimColor italic>
        {HINT_TEXT}
      </Text>
    </Box>
  )

  if (isStacked) {
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" justifyContent="space-between" alignItems="center" gap={2}>
          <Box flexDirection="row" gap={2} flexShrink={0}>
            <Text dimColor>{label}</Text>
            {hint}
          </Box>
          {aside}
        </Box>
        {content}
      </Box>
    )
  }

  return (
    <Box flexDirection="row" gap={2} alignItems={isCentred && !hasHint ? 'center' : 'flex-start'}>
      <Box flexDirection="column" flexShrink={0} width={LABEL_WIDTH}>
        <Text dimColor>{label}</Text>
        {hint}
      </Box>
      <Box flexDirection="column" flexGrow={1} flexShrink={1} minWidth={0}>
        {content}
      </Box>
      {aside && <Box flexShrink={0}>{aside}</Box>}
    </Box>
  )
}

function chipRow($: EngineInterface, t: ElementTable, chips: Chip[], isText: boolean) {
  const { Text, Button } = t
  const row: JSX.Element[] = []

  chips.forEach((chip, index) => {
    // On the desktop the stars mark the pins; a bar there could wrap to the start of a row.
    if (isText && !chip.isPinned && chips[index - 1]?.isPinned) row.push(<Text dimColor>│</Text>)
    row.push(
      <Button
        key={`dock-${chip.isPinned ? 'pin' : 'freq'}-${chip.name}`}
        // In the terminal, chips are plain text spaced apart; brackets around each read as noise.
        plain={isText || undefined}
        dimColor={!chip.isPinned}
        label={chip.label}
        onPress={() => insertSkill($, chip.name)}
      />,
    )
  })

  return row
}

function skillList(
  $: EngineInterface,
  t: ElementTable,
  state: { list: SkillEntry[]; pinned: string[]; used: Uses; at: number },
) {
  const { Box, Text } = t
  const { list, pinned, used, at } = state
  const byName = new Map(list.map(s => [s.name, s]))
  const entry = (name: string): SkillEntry =>
    byName.get(name) ?? { name, description: '', group: 'Built-in' }
  const mostUsed = frequent(list, [], used, at, PANE_FREQUENT)
  const available = [...list].sort((a, b) => short(a.name).localeCompare(short(b.name)))
  const row = (listName: string, s: SkillEntry, meta?: string) =>
    skillRow($, t, listName, s, pinned.includes(s.name), meta)

  const heading = (name: string, detail: string, isFirst = false) => (
    <Box flexDirection="row" justifyContent="space-between" marginTop={isFirst ? 0 : 1}>
      <Text dimColor bold>
        {name.toUpperCase()}
      </Text>
      <Text dimColor>{detail}</Text>
    </Box>
  )
  const empty = (text: string) => (
    <Text dimColor italic>
      {text}
    </Text>
  )

  return (
    <Box flexDirection="column">
      {heading('Pinned', pinned.length ? `${pinned.length}` : '', true)}
      {pinned.length === 0 && empty('Click ☆ next to a skill to pin it.')}
      {pinned.map(name => row('pinned', entry(name)))}
      {heading('Most used', `last ${WINDOW_DAYS} days`)}
      {mostUsed.length === 0 && empty('Skills you use will show up here.')}
      {mostUsed.map(s => row('used', s, `${recentCount(used[s.name], at)}×`))}
      {heading('Available here', `${available.length}`)}
      {available.map(s => row('all', s))}
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e, next) => {
    if (!runsOn(showIn, e.surface)) return next(e)

    const [pinned, used, list, at] = await Promise.all([
      read($, pins),
      read($, uses),
      read($, skills),
      $.clock.now(),
    ])

    return skillList($, $.ui.resolve(e), { list, pinned, used, at })
  })