changed-files

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const table = $.ui.resolve(e)
    const { Box, Text, Button, Code } = table
    const Svg = e.surface !== 'terminal' && 'Svg' in table ? table.Svg : undefined
    const Client = 'Client' in table ? table.Client : undefined
    const list = [...(await read($, files))].reverse()
    const shown = await read($, selected)
    const toggle = (path: string) => () => void update($, selected, now => (now === path ? null : path))

    const rows = list.map(file => {
      const { name, dir } = split(file.path)
      const isOpen = shown === file.path
      const badge = badgeOf(file.isNew)

      // The desktop: a dark tile of its own, as the card's, lit under the pointer.
      if (Svg && Client) {
        return (
          <Box
            key={`tile-${keyOf(file.path)}`}
            flexDirection="column"
            gap={1}
            paddingX={2}
            paddingY={1}
            borderStyle="round"
            borderColor={isOpen ? '#0A84FF' : '#2C2C2E'}
            backgroundColor="#1C1C1E"
            hover={{ backgroundColor: '#242426', borderColor: isOpen ? '#0A84FF' : '#3A3A3C' }}
          >
            <Box flexDirection="row" alignItems="center" gap={2}>
              <Text bold color={badge.color}>
                {badge.letter}
              </Text>
              <Svg source={iconSvg(name)} alt="" width={36} height={36} />
              <Client
                key={keyOf(file.path)}
                module="./row.tsx"
                props={{ name, dir, isOpen }}
                flexGrow={1}
              />
              <Svg source={barSvg(file.added, file.removed)} alt="" width={53} height={9} />
            </Box>
            {isOpen ? <Code source={file.diff} format="diff" path={file.path} /> : null}
          </Box>
        )
      }

      return (
        <Box flexDirection="column" borderStyle="round" borderColor={isOpen ? '#0A84FF' : undefined} borderDimColor={!isOpen} paddingX={1}>
          <Box flexDirection="row" alignItems="center" gap={1}>
            <Text bold color={badge.color}>
              {badge.letter}
            </Text>
            <Box flexDirection="column" flexGrow={1} flexShrink={1}>
              <Text bold wrap="truncate-end">
                {name}
              </Text>
              <Text dimColor wrap="truncate-start">
                {dir}
              </Text>
            </Box>
            <Button key={keyOf(file.path)} variant={isOpen ? 'primary' : 'secondary'} onPress={toggle(file.path)}>
              {isOpen ? 'Masquer' : 'Diff'}
            </Button>
          </Box>
          {isOpen ? <Code source={file.diff} format="diff" path={file.path} /> : null}
        </Box>
      )
    })

    if (Svg) {
      return (
        <Box flexDirection="column" gap={1}>
          <Svg source={headerSvg(list)} alt={altOf(list)} />
          {rows}
        </Box>
      )
    }

    const added = list.reduce((sum, file) => sum + file.added, 0)
    const removed = list.reduce((sum, file) => sum + file.removed, 0)

    return (
      <Box flexDirection="column" paddingX={1} gap={1}>
        <Box flexDirection="column">
          <Text bold>Fichiers modifiés</Text>
          {list.length === 0 ? (
            <Text dimColor>Aucune modification. Les fichiers modifiés par Claude apparaîtront ici.</Text>
          ) : (
            <Box gap={1}>
              <Text dimColor>{altOf(list)}</Text>
              <Text color="#30D158">{`+${added}`}</Text>
              <Text color="#FF453A">{`−${removed}`}</Text>
            </Box>
          )}
        </Box>
        {rows}
      </Box>
    )
  })