buildreel

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const session = await read($, sessionRef)
    if (!active || !session || session.moments.length === 0 || e.props.hasSurvey) return next(e)
    const t = UI[lang]
    const { Box, Text } = $.ui.resolve(e)
    const shots = session.moments.filter(m => m.kind === 'capture').length
    return (
      <Box>
        <Text color="red" bold>
          ● REC{' '}
        </Text>
        <Text dimColor>
          {formatDuration(activeTime([session.startedAt, ...session.moments.map(m => m.at)]), lang)} · {session.moments.length} {t.moments} · {t.shots(shots)} ·{' '}
        </Text>
        <Text>{t.toEdit}</Text>
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const t = UI[lang]
    const { Box, Text, Button } = $.ui.resolve(e)
    const Input = e.surface !== 'mobile' ? $.ui.resolve(e).Input : null
    const Image = e.surface === 'terminal' ? $.ui.resolve(e).Image : null
    const session = await read($, sessionRef)
    const edit = await read($, editRef)
    if (!active) return <Text dimColor>{t.notProject}</Text>
    if (!session) return <Text dimColor>{t.noSession}</Text>

    const cuts = await read($, cutsRef)
    const rendering = await read($, renderingRef)
    const scenes = buildScenes(session, edit.from, lang, edit.to, edit.picks)
    const kept = applyEdit(scenes, edit)
    const selected = scenes.find(s => s.id === edit.selected) ?? scenes[0]!
    const points = startPoints(session)
    const start = edit.from ?? session.startedAt
    const startMoment = session.moments.find(m => m.at === start)
    const set = (fn: (edit: Edit) => Edit) => update($, editRef, fn)

    const lastAt = session.moments.at(-1)?.at ?? session.startedAt
    const moveStart = (step: number) =>
      set(ed => {
        const allowed = points.filter(p => ed.to === null || p < ed.to)
        const i = Math.max(0, allowed.indexOf(ed.from ?? session.startedAt))
        const at = allowed[Math.min(allowed.length - 1, Math.max(0, i + step))] ?? session.startedAt
        return { ...ed, from: at === session.startedAt ? null : at }
      })
    // La fin se règle sur les mêmes repères ; tout au bout, c'est « fin de la session » (null).
    const moveEnd = (step: number) =>
      set(ed => {
        const begin = ed.from ?? session.startedAt
        const allowed = [...points.filter(p => p > begin), lastAt].filter((p, i, all) => all.indexOf(p) === i)
        const i = ed.to === null ? allowed.length - 1 : Math.max(0, allowed.indexOf(ed.to))
        const at = allowed[Math.min(allowed.length - 1, Math.max(0, i + step))] ?? lastAt
        return { ...ed, to: at === lastAt ? null : at }
      })
    const endMoment = edit.to === null ? null : session.moments.find(m => m.at === edit.to)

    let thumb: string | null = null
    if (selected.thumb && Image) {
      try {
        thumb = ((await $.fs.read(selected.thumb, { as: 'bytes' })) as { base64: string }).base64
      } catch {
        thumb = null
      }
    }

    const label = (scene: Scene, i: number) =>
      `${scene.id === selected.id ? '›' : ' '} ${i + 1}. ${t.kind[scene.kind]}${scene.chip ? ` ${scene.chip}` : ''} · ${
        edit.captions[scene.id] ?? scene.caption
      }`

    const startLabel =
      startMoment?.kind === 'commit'
        ? `· ${startMoment.label}`
        : start === session.startedAt
          ? `· ${t.sessionStart}`
          : `· ${t.capture}`

    return (
      <Box flexDirection="column">
        <Text bold>
          {session.project} · {t.plans(kept.length, Math.round(runtime(kept)))}
        </Text>
        <Text dimColor>{t.local(tilde(session.dir))}</Text>
        {edit.status && <Text color={rendering ? 'yellow' : edit.output ? 'green' : undefined}>{edit.status}</Text>}
        <Text> </Text>
        <Box>
          <Text>{t.cuts} </Text>
          {cuts.map(cut => (
            <Box key={`cutbox-${cut.id}`}>
              <Button
                key={`cut-${cut.id}`}
                variant={cut.id === edit.cutId ? 'primary' : 'secondary'}
                label={`${cut.name}${cut.output ? ' ✓' : ''}`}
                onPress={() => set(() => ({ ...cut, cutId: cut.id, status: cut.output ? t.ready(tilde(cut.output)) : null }))}
              />
              <Text> </Text>
            </Box>
          ))}
          <Button
            key="new-cut"
            label={t.newCut}
            onPress={async () => {
              await set(() => ({ ...emptyEdit }))
              void direct($)
            }}
          />
          <Text> </Text>
          <Button key="direct" label={t.direct} onPress={() => void direct($)} />
        </Box>
        {Input && (
          <Input
            key="cut-name"
            label={t.cutName}
            value={edit.name ?? t.untitled(cuts.length + (edit.cutId ? 0 : 1))}
            submitLabel={t.keep}
            onSubmit={(value: string) => set(ed => ({ ...ed, name: value.trim() || null }))}
          />
        )}
        <Text> </Text>
        <Box>
          <Text>{t.start} </Text>
          <Button key="from-prev" label="◀" onPress={() => moveStart(-1)} />
          <Text>
            {' '}
            {clockTime(start)} {startLabel}{' '}
          </Text>
          <Button key="from-next" label="▶" onPress={() => moveStart(1)} />
        </Box>
        <Box>
          <Text>{t.end} </Text>
          <Button key="to-prev" label="◀" onPress={() => moveEnd(-1)} />
          <Text>
            {' '}
            {clockTime(edit.to ?? lastAt)}{' '}
            {edit.to === null
              ? `· ${t.sessionEnd}`
              : endMoment?.kind === 'commit'
                ? `· ${endMoment.label}`
                : `· ${t.capture}`}{' '}
          </Text>
          <Button key="to-next" label="▶" onPress={() => moveEnd(1)} />
        </Box>
        <Text> </Text>
        {scenes.map((scene, i) => {
          const isKept = !edit.dropped.includes(scene.id)
          return (
            <Box key={`row-${scene.id}`}>
              <Button
                key={`keep-${scene.id}`}
                plain
                label={isKept ? '[x]' : '[ ]'}
                onPress={() =>
                  set(ed => ({
                    ...ed,
                    dropped: isKept ? [...ed.dropped, scene.id] : ed.dropped.filter(id => id !== scene.id),
                  }))
                }
              />
              <Button
                key={`sel-${scene.id}`}
                plain
                label={label(scene, i)}
                onPress={() => set(ed => ({ ...ed, selected: scene.id }))}
              />
            </Box>
          )
        })}
        <Text> </Text>
        {Input && (
          <Input
            key="caption"
            label={t.captionOf(scenes.indexOf(selected) + 1)}
            value={edit.captions[selected.id] ?? selected.caption}
            submitLabel={t.keep}
            onSubmit={(value: string) =>
              set(ed => ({ ...ed, captions: { ...ed.captions, [selected.id]: value.trim() } }))
            }