wardrobe

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    if (e.surface !== 'terminal' && e.surface !== 'desktop') return next(e)
    const last = await read($, switched)
    const theme = last === null ? undefined : themeById(last.theme)
    if (last === null || !theme || (await $.clock.now()) - last.at >= BAND_MS) return next(e)
    const below = await next(e)
    const { Box } = $.ui.resolve(e)
    const columns = e.props.bodyColumns
    const bolt = columns >= BAND_BOLT_MIN_COLUMNS ? dressedBolt($.ui.resolve(e), e.surface, theme, 'tiny', 'wardrobe-bolt') : null
    return (
      <Box flexDirection="column">
        {below}
        {switchBand($.ui.resolve(e), theme, columns, bolt, fills(theme, e.surface, (await read($, app)).tone))}
      </Box>
    )
  }).catch(($, e, next) => next(e))

export function switchBand(t: Table, theme: Theme, columns: number, bolt: RenderElement | null, fill = true): RenderElement {
  const { Box, Text } = t
  const { palette } = theme
  // Where the look may not paint (a light look on a dark app), the band keeps its words and icons on the app's own background.
  const bg = fill ? palette.bg : undefined
  const wordColor = fill ? palette.text : palette.accent
  const mark = ` ${theme.mark} `
  const words = `wearing ${theme.id}  `
  const icons = SAMPLE_KINDS.map(kind => `${theme.icons[kind]} `)
  const used = columnsOf(mark) + columnsOf(words) + icons.reduce((n, icon) => n + columnsOf(icon), 0)
  const room = columns - (bolt === null ? 0 : BOLT_COLUMNS.tiny + 1)
  const pad = ' '.repeat(Math.max(1, room - used))
  return (
    <Box key="wardrobe-band" flexDirection="row" gap={1} flexShrink={0}>
      <Text backgroundColor={bg}>
        <Text color={palette.accent} backgroundColor={bg} bold>
          {mark}
        </Text>
        <Text color={wordColor} backgroundColor={bg} bold>
          {words}
        </Text>
        {SAMPLE_KINDS.map((kind, i) => (
          <Text color={palette[KIND_ROLE[kind]]} backgroundColor={bg}>
            {icons[i]}
          </Text>
        ))}
        <Text backgroundColor={bg}>{pad}</Text>
      </Text>
      {bolt}
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const tone = (await read($, app)).tone
    const onWear = (choice: string) => {
      wear($, settings, choice)
        .then(async text => say($, text + autoNote(choice) + (await lightNoteNow($))))
        .catch(() => undefined)
        .finally(() => $.ui.invalidate('ui.render'))
    }
    return listTree($.ui.resolve(e), {
      surface: e.surface,
      look: await read($, look),
      settings,
      problems,
      columns: e.props.bodyColumns,
      now: await $.clock.now(),
      onWear,
      fills: (theme: Theme) => fills(theme, e.surface, tone),
      onMatch: (choice: string) => {
        wear($, settings, choice)
          .then(async text => say($, text + autoNote(choice) + ' ' + (await matchTheme($, settings)), 6000))
          .catch(() => undefined)
          .finally(() => $.ui.invalidate('ui.render'))
      },
    })
  }).catch(($, e, next) => next(e))

export function listTree(t: PaneTable, g: Gallery): RenderElement {
  const { Box, Text, Button } = t
  const columns = g.columns ?? 80
  const size = boltSizeFor(columns)
  const wearing = (choice: string) => (g.look.choice === choice ? <Text bold>(wearing)</Text> : null)
  const wearButton = (choice: string) => <Button key={`wear-${choice}`} label="wear" onPress={() => g.onWear(choice)} />
  const worn = <Text>{describeLook(g.look, g.settings)}</Text>
  const wornTheme = themeById(g.look.theme)
  const seasonTheme = seasonOf(g.now)

  /** A row that is not a theme: a name, what it does, the mark and the button. */
  const plainRow = (choice: string, what: string) => (
    <Box key={`theme-${choice}`} flexDirection="row" gap={1} marginBottom={1}>
      <Text bold>{choice}</Text>
      <Text>{what}</Text>
      {wearing(choice)}
      {wearButton(choice)}
    </Box>
  )

  // A card is a mini session in the look: the person's prompt, a reply, a tool row with its
  // diff chips, and the footer label, so the difference shows before choosing. Bolt is an
  // accent at the end of the head row, never the main surface.
  const card = (theme: Theme) => {
    const fill = g.fills(theme)
    return (
      <Box key={`theme-${theme.id}`} flexDirection="column" marginBottom={1}>
        <Box key="head" flexDirection="row" gap={1}>
          <Text bold>{theme.id}</Text>
          <Text dimColor>{theme.tone}</Text>
          {wearing(theme.id)}
          {wearButton(theme.id)}
          <Button key={`match-${theme.id}`} label="match theme" onPress={() => g.onMatch(theme.id)} />
          {size === null ? null : dressedBolt(t, g.surface, theme, 'tiny', `bolt-${theme.id}`)}
        </Box>
        <Text>{theme.blurb}</Text>
        {theme.tone === 'light' ? <Text dimColor>best on a light theme</Text> : null}
        {sampleRow(t, theme, `you-${theme.id}`, 'accent', `> ${SAMPLE_PROMPT}`, fill)}
        {sampleRow(t, theme, `reply-${theme.id}`, 'info', SAMPLE_REPLY, fill)}
        <Box key="sample" flexDirection="row" gap={1}>
          {toolRow(t, theme, SAMPLE_CALL, SAMPLE_TIMING, <Text>{SAMPLE_TEXT}</Text>, columns)}
          <Text color={theme.diff.addFg} backgroundColor={theme.diff.addBg}>
            {' + add '}
          </Text>
          <Text color={theme.diff.removeFg} backgroundColor={theme.diff.removeBg}>
            {' - del '}
          </Text>
        </Box>
        <Text key={`footer-${theme.id}`} color={theme.palette.muted}>
          {theme.mark} wearing {theme.id}
        </Text>
      </Box>
    )
  }

  return (
    <Box flexDirection="column">
      {size === null ? (
        worn
      ) : (
        <Box key="worn" flexDirection="row" gap={1} marginBottom={1}>
          {dressedBolt(t, g.surface, wornTheme, 'tiny', 'bolt')}
          <Box flexDirection="column" flexShrink={1}>
            {worn}
          </Box>
        </Box>
      )}
      {plainRow(DEFAULT, "Claude Code's own drawing")}
      {THEMES.map(card)}
      {plainRow(AUTO, `${g.settings.dayTheme} from ${clockText(g.settings.dayStarts)}, ${g.settings.nightTheme} from ${clockText(g.settings.nightStarts)}`)}
      {plainRow(SEASON, `by the calendar: ${seasonTheme} now (${seasonWindow(seasonTheme) ?? 'the rest of the year'})`)}
      {g.problems.map(problem => (
        <Text>Setting: {clean(problem)}</Text>
      ))}
      <Text>{HELP}</Text>
    </Box>
  )
}