apercu

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    surface = e.surface
    const { Box, Text, Button } = $.ui.resolve(e)
    rasterCols = Math.max(20, Math.min(160, e.props.bodyColumns - 1))

    const tabs = cibles.length > 1
      ? <Box flexWrap="wrap">{cibles.map(c => (
          <Button key={`c-${c.nom}`} label={`${c.status === 'prête' ? '' : c.status === 'en panne' ? '✗ ' : '⏳ '}${c.nom}`}
            variant={c.nom === active ? 'primary' : undefined} onPress={() => choose($, c.nom)} />
        ))}</Box>
      : null

    if (!frame) {
      const down = cibles.find(c => c.nom === active && c.status !== 'prête')
      return (
        <Box flexDirection="column">
          {tabs}
          <Text dimColor>{failure ? `✗ ${failure}` : starting ? '⏳ Démarrage du hub…' : down ? `${down.status === 'en panne' ? '✗' : '⏳'} ${down.nom} : ${down.error || down.status}` : cibles.length ? 'En attente d\'une image…' : 'Aucune cible. Demande à Claude de brancher l\'aperçu sur ce projet.'}</Text>
          {failure && <Button key="retry" label="Réessayer" variant="primary" onPress={() => ensureDaemon($).then(() => tick($, true))} />}
        </Box>
      )
    }
    const f = frame
    const last = f.last && f.last.by === 'claude' ? `🤖 Claude : ${f.last.text}` : f.last ? `👆 ${f.last.text}` : ''
    const errors = f.console.filter(c => c.kind !== 'warning' && c.kind !== 'info').slice(-3)
    const can = (x: string) => !f.actions || f.actions.includes(x)

    let view = <Text dimColor>⏳ capture…</Text>
    if (e.surface === 'terminal' && cells) {
      const { Raster } = $.ui.resolve(e)
      view = <Raster key="view" columns={cells.columns} rows={cells.rows} cells={cells.cells} />
    } else if (e.surface !== 'terminal' && jpeg) {
      const { Svg } = $.ui.resolve(e)
      view = <Svg source={toSvg(f)} alt={`Aperçu de ${f.url}`} isInteractive />
    }

    const controls = [
      can('back') && <Button key="back" label="◀" hotkey="b" onPress={() => act($, { type: 'back' })} />,
      can('home') && <Button key="home" label="⌂" hotkey="o" onPress={() => act($, { type: 'home' })} />,
      can('reload') && <Button key="reload" label="↻" hotkey="r" onPress={() => act($, { type: 'reload' })} />,
      <Button key="up" label="⬆" hotkey="u" onPress={() => act($, { type: 'scroll', dy: -500 })} />,
      <Button key="down" label="⬇" hotkey="d" onPress={() => act($, { type: 'scroll', dy: 500 })} />,
      <Button key="enter" label="⏎" hotkey="e" onPress={() => act($, { type: 'key', key: 'Enter' })} />,
      can('device') && f.pilote === 'web' && f.device !== 'cdp' && <Button key="device" label={f.device === 'desktop' ? '📱 mobile' : '🖥 desktop'} hotkey="m" onPress={() => act($, { type: 'device', name: f.device === 'desktop' ? 'mobile' : 'desktop' })} />,
      f.hints.length > 0 && <Button key="hints" label={showHints ? 'repères ✓' : 'repères'} hotkey="h" onPress={() => { showHints = !showHints; $.ui.invalidate('ui.render') }} />,
      f.hints.length > 0 && <Button key="grid" label={showGrid ? 'grille ✓' : 'grille'} hotkey="g" onPress={() => { showGrid = !showGrid; $.ui.invalidate('ui.render') }} />,
      <Button key="attach" label={attachPath ? '📎 jointe' : '📎 joindre'} hotkey="j" variant="primary" onPress={() => attach($)} />,
    ].filter(Boolean)
    const gridOn = showGrid || f.hints.length === 0

    return (
      <Box flexDirection="column">
        {tabs}
        <Text><Text bold>{f.url}</Text><Text dimColor>  {f.pilote} {f.vw}×{f.vh}</Text></Text>
        {last ? <Text color={f.last?.by === 'claude' ? 'magenta' : 'gray'}>{last}</Text> : null}
        {view}
        {e.surface === 'terminal' && f.hints.length > 0 && (
          <Text dimColor wrap="wrap">{f.hints.map(h => `${h.n} ${h.label}`).join(' · ')}</Text>
        )}
        {e.surface === 'terminal' && gridOn && (
          <Text dimColor>grille {GRID_COLS}×{gridRows(f)} : A1 en haut à gauche, {String.fromCharCode(64 + GRID_COLS)}{gridRows(f)} en bas à droite</Text>
        )}
        {errors.map((c, i) => <Text key={`err-${i}`} color="red" wrap="truncate-end">! {c.kind} : {c.text}</Text>)}
        <Box flexWrap="wrap">{controls}</Box>
        {e.surface === 'mobile'
          ? <Box flexWrap="wrap">{f.hints.slice(0, 16).map(h => <Button key={`h-${h.n}`} label={`${h.n} ${h.label.slice(0, 16)}`} onPress={() => act($, { type: 'hint', n: h.n })} />)}</Box>
          : (() => {
              const { Input } = $.ui.resolve(e)
              const help = f.hints.length ? 'n° pour toucher · n° + texte pour remplir' : 'case (C4) pour toucher'
              return <Input key="cmd" placeholder={`${help} · ${f.pilote === 'web' ? 'une URL · ' : ''}du texte à taper`} submitLabel="OK" onSubmit={v => void submit($, v)} />
            })()}
      </Box>
    )
  })