attention-sounds

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    // The terminal's table has no Svg: the icons are for the other surfaces.
    const Svg = e.surface === 'terminal' ? undefined : $.ui.resolve(e).Svg
    const sounds = await library($)
    const picks = Object.fromEntries(await Promise.all(FIELDS.map(async field => [field, await pick($, options, field)] as const)))
    const current = picks[editing] ?? 'default'
    // An event on Default or Mute opens on the default sound's library.
    const heard = sounds.has(current) ? current : picks.sound ?? ''
    const home = [...groups].find(([, list]) => list.includes(heard))?.[0]
    const group = shown !== undefined && groups.has(shown) ? shown : home ?? [...groups.keys()][0] ?? ''
    const chips = (groups.get(group) ?? []).slice(0, ROOM)
    // Terminal only: hotkeys, and the focus ring starting on the current sound.
    const key = (hotkey: string | undefined) => (e.surface === 'terminal' && hotkey !== undefined ? { hotkey } : {})
    const tabs = [...groups.keys()].slice(0, ROOM)
    const at = tabs.indexOf(group)
    const start = chips.includes(current) ? current : chips[0]
    const assign = async (name: string) => {
      await $.store.set(editing, name)
      play(name === 'default' ? picks.sound ?? '' : name)
      $.ui.invalidate('ui.render')
    }
    const play = (name: string) => {
      const file = sounds.get(name)
      if (file !== undefined) void $.audio.play({ asset: `sounds/${file}` }).catch(() => undefined)
    }
    const described = (field: string) =>
      picks[field] === 'default' ? `Default · ${picks.sound}` : picks[field] === 'off' ? 'Muted' : picks[field]

    return (
      <Box flexDirection="column" gap={1} padding={1}>
        <Box flexDirection="row" gap={1} alignItems="center">
          {Svg && <Svg source={ICONS.bell ?? ''} alt="Bell" width={28} height={28} />}
          <Box flexDirection="column">
            <Text bold>Notification sounds</Text>
            <Text dimColor>Choose what plays when Claude needs you.</Text>
          </Box>
        </Box>

        <Box flexDirection="column" gap={1} paddingX={1} borderStyle="round" borderColor="subtle">
          {FIELDS.map(field => (
            <Box key={`row-${field}`} flexDirection="row" gap={1} alignItems="center">
              {Svg && <Svg source={ICONS[field] ?? ''} alt={LABELS[field] ?? field} width={20} height={20} />}
              <Box flexDirection="column" flexGrow={1}>
                <Text bold color={field === editing ? 'claude' : 'text'}>
                  {LABELS[field]}
                </Text>
                <Text dimColor>{HINTS[field]}</Text>
              </Box>
              <Button key={`play-${field}`} plain dimColor {...key(field === editing ? 't' : undefined)} onPress={async () => play((await resolve($, options, field)) ?? '')}>
                ▶
              </Button>
              <Button
                key={`edit-${field}`}
                {...key(String(FIELDS.indexOf(field) + 1))}
                variant={field === editing ? 'primary' : 'secondary'}
                onPress={() => {
                  editing = field
                  shown = undefined
                  $.ui.invalidate('ui.render')
                }}
              >
                {described(field)}
              </Button>
            </Box>
          ))}
        </Box>

        <Box flexDirection="column" gap={1} paddingX={1} borderStyle="round" borderColor="claude">
          <Box flexDirection="row" gap={1} alignItems="center">
            <Box flexGrow={1}>
              <Text bold>
                Sound for <Text color="claude">{LABELS[editing]}</Text>
              </Text>
            </Box>
            {editing !== 'sound' &&
              ['default', 'off'].map(name => (
                <Button key={`chip-${name}`} variant={name === current ? 'primary' : 'secondary'} {...key(name === 'default' ? 'd' : 'm')} onPress={() => assign(name)}>
                  {name === 'default' ? `Use default (${picks.sound})` : 'Mute'}
                </Button>
              ))}
          </Box>
          <Box flexDirection="row" flexWrap="wrap" gap={1}>
            {tabs.map((name, i) => (
              <Button
                key={`lib-${name}`}
                {...key(tabs.length < 2 ? undefined : i === (at + 1) % tabs.length ? 'n' : i === (at + tabs.length - 1) % tabs.length ? 'b' : undefined)}
                plain
                dimColor={name !== group}
                onPress={() => {
                  shown = name
                  $.ui.invalidate('ui.render')
                }}
              >
                {name === group ? `● ${name}` : name} <Text dimColor>{groups.get(name)?.length}</Text>
              </Button>
            ))}
          </Box>
          <Box flexDirection="row" flexWrap="wrap" gap={1}>
            {chips.map(name => (
              <Button key={`chip-${name}`} variant={name === current ? 'primary' : 'secondary'} {...(name === start ? { autoFocus: true as const } : {})} onPress={() => assign(name)}>
                {name}
              </Button>
            ))}
          </Box>
          <Text dimColor>
            {e.surface === 'terminal'
              ? 'arrows move · enter hears and uses · 1-5 event · n/b library · t test · d default · m mute · esc closes'
              : 'Click a sound to hear it and use it.'}{' '}
            Add your own: see /sound info.
          </Text>
        </Box>
      </Box>
    )
  })