salle-d-attente

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const working = await read($, isWorking)
    if (e.props.hasSurvey || !working || (await read($, isOff))) return next(e)
    const { Box, Button, Text } = $.ui.resolve(e)
    const g = await read($, game)
    return (
      <Box gap={1}>
        <Text dimColor>Claude bosse, une partie en attendant ?</Text>
        <Button
          key="play"
          label={g.status === 'on' ? '🎮 Reprendre la partie' : '🎮 Modern Claudefare'}
          onPress={() => void startGame($)}
        />
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Client, Image, Text } = $.ui.resolve(e) as any
    const g = await read($, game)
    const azerty = await read($, isAzerty)
    const header = (
      <Box gap={1}>
        <Button key="quit" label="Quitter" onPress={() => void stopGame($)} />
        <Button key="layout" label={azerty ? 'AZERTY' : 'QWERTY'} onPress={() => update($, isAzerty, v => !v)} />
        {g.invite && (
          <Button
            key="invite"
            label="Copier l’invitation"
            onPress={() => {
              void $.ui.copy({ text: g.invite, surface: e.surface })
              $.ui.toast('Lien d’invitation copié : ton pote le colle après /jouer')
            }}
          />
        )}
        <Text dimColor wrap="truncate">clic = jouer · Échap = clavier</Text>
      </Box>
    )

    if (g.status === 'error') {
      return (
        <Box flexDirection="column" gap={1}>
          {header}
          <Text color="red">{g.error}</Text>
          <Button key="retry" label="Relancer" onPress={() => void startGame($)} />
        </Box>
      )
    }
    if (g.status !== 'on' || !frameFile) {
      return (
        <Box flexDirection="column" gap={1}>
          {header}
          <Text>Lancement de Modern Claudefare…</Text>
          {g.status === 'off' && <Button key="start" label="Lancer" onPress={() => void startGame($)} />}
        </Box>
      )
    }

    // Tout le corps du panneau, moins la ligne des boutons.
    const cols = Math.max(10, e.props.bodyColumns ?? 72)
    const rows = Math.max(4, (e.props.scroll?.bodyRows ?? 24) - 1)
    box = { cols, rows }

    return (
      <Box flexDirection="column">
        {header}
        <Box width={cols} height={rows}>
          <Image
            key="view"
            source={{ file: frameFile, format: 'png', generation: frameN }}
            columns={cols}
            rows={rows}
            alt="Modern Claudefare"
          />
          <Box position="absolute" top={0} left={0} width={cols} height={rows}>
            <Client key="pad" module="./controls.tsx" width={cols} height={rows} />
          </Box>
        </Box>
      </Box>
    )
  })