cozy-clawd

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) {
      forgetPictures(e.requestId)
      return next(e)
    }

    const lang = langOn(e.surface, await langNow($))
    const t = TEXTS[lang]
    const drawnMode = await read($, mode)
    // A turn that ended without telling (an interruption) leaves no stale mode.
    const isIdle = !e.props.isWorking && drawnMode !== 'compacting' && drawnMode !== 'compacted'
    const now = await $.clock.now()
    const meters = metersOf(await statsNow($), now, drawnMode === 'compacting')
    // No Compact while a compaction runs.
    const isLow = drawnMode !== 'compacting' && meters.contextLeft !== null && meters.contextLeft <= COMPACT_AT
    await read($, redraws)
    const isAsking = await read($, isConfirming)
    const meterScene = meterSceneNamed(await read($, sceneName))
    const { scene, label, pick } = isIdle ? idleScene(meters, now) : sceneFor(drawnMode, await read($, tool), shownAt, now)
    const isOngoing = !isIdle && drawnMode !== 'compacted'

    // The terminal's band: Clawd and the meters as pictures of block
    // characters, Clawd's state beside it, in the size the person picked: the
    // small scenes (hooks/small.ts), or the large ones the desktop shows.
    // A scene of meters with no small drawing shows its large one. Where
    // both don't fit, Clawd with the meters in words; where Clawd doesn't
    // either, words alone.
    if (e.surface === 'terminal') {
      const { Box, Button, Raster, Text } = $.ui.resolve(e)
      const bg = await terminalBackground($)
      const said = `${label[lang]}${isOngoing ? '…' : ''}`
      const isSmall = (await read($, sizeName)) === 'small'
      const clawd = isSmall ? pictureOf(smallSvg(smallScene(pick)), 'quadrants') : pictureOf(svgFor(scene))
      const drawing = isSmall ? meterScene.small : undefined
      const metersPicture = pictureOf(drawing === undefined ? meterScene.svg(meters) : drawing.svg(meters))
      const numbers = drawing === undefined ? null : numbersPicture(meters, drawing.centers, metersPicture.columns)
      const controls = isAsking ? (
        <Box flexDirection="row" alignItems="center" gap={1}>
          <Text dimColor>{t.compactAsk}</Text>
          <Button key="compact-yes" label={t.yes} variant="primary" onPress={() => compactNow($, e.props.isWorking, lang)} />
          <Button key="compact-no" label={t.no} onPress={() => update($, isConfirming, () => false)} />
        </Box>
      ) : (
        // A Button alone keeps to the top of the band's row; in a Box it centers.
        isLow && (
          <Box>
            <Button key="compact" label={t.compact} onPress={() => update($, isConfirming, () => true)} />
          </Box>
        )
      )
      // A Button draws as `[ label ]` here.
      const controlsWidth = isAsking ? columnsOf(t.compactAsk) + columnsOf(t.yes) + columnsOf(t.no) + 10 : isLow ? columnsOf(t.compact) + 4 : 0
      const room = e.props.bodyColumns - MARK_COLUMNS
      const minLabel = MIN_LABEL_COLUMNS[lang]
      const labelRoom = room - clawd.columns - 1 - 2 - (controlsWidth > 0 ? controlsWidth + 1 : 0) - metersPicture.columns
      const fitsAll = labelRoom >= minLabel && e.props.maxRows >= metersPicture.rows + (numbers?.rows ?? 0)
      const fitsClawd = room - clawd.columns - 1 >= minLabel && e.props.maxRows >= clawd.rows
      forgetOtherSites(e.requestId)
      forgetPictures(e.requestId, fitsAll ? ['clawd', 'meters', ...(numbers === null ? [] : ['numbers'])] : fitsClawd ? ['clawd'] : [])

      if (fitsAll) {
        return (
          <Box flexDirection="row" alignItems="center" justifyContent="space-between" gap={2} paddingRight={MARK_COLUMNS}>
            <Box flexDirection="row" alignItems="center" gap={1}>
              <Raster key="clawd" columns={clawd.columns} rows={clawd.rows} cells={livePicture($, e.requestId, 'clawd', clawd, now, bg)} />
              <Box width={Math.min(columnsOf(said), labelRoom)}>
                <Text bold wrap="wrap">
                  {said}
                </Text>
              </Box>
            </Box>
            <Box flexDirection="row" alignItems="center" gap={1}>
              {controls}
              <Box flexDirection="column">
                <Raster key="meters" columns={metersPicture.columns} rows={metersPicture.rows} cells={livePicture($, e.requestId, 'meters', metersPicture, now, bg)} />
                {numbers && <Raster key="numbers" columns={numbers.columns} rows={numbers.rows} cells={livePicture($, e.requestId, 'numbers', numbers, now, bg)} />}
              </Box>
            </Box>
          </Box>
        )
      }
      const words = (
        <Box flexDirection="column" gap={1} width={fitsClawd ? room - clawd.columns - 1 : room}>
          <Text bold wrap="wrap">
            {fitsClawd ? said : `Clawd: ${said}`}
          </Text>
          <Text dimColor wrap="wrap">
            {metersAlt(meters, lang)}
          </Text>
          {controls}
        </Box>
      )
      return fitsClawd ? (
        <Box flexDirection="row" alignItems="center" gap={1} paddingRight={MARK_COLUMNS}>
          <Raster key="clawd" columns={clawd.columns} rows={clawd.rows} cells={livePicture($, e.requestId, 'clawd', clawd, now, bg)} />
          {words}
        </Box>
      ) : (
        <Box paddingRight={MARK_COLUMNS}>{words}</Box>
      )
    }

    const { Box, Button, Markdown, Svg, Text } = $.ui.resolve(e)
    return (
      <Box flexDirection="row" alignItems="center" justifyContent="space-between" gap={2}>
        <Box flexDirection="row" alignItems="center" gap={1}>
          <Svg source={svgFor(scene)} alt={`Clawd: ${label[lang]}`} width={VIEW_W * SCALE} height={VIEW_H * 2 * SCALE} />
          <Markdown text={`### ${label[lang]}${isOngoing ? '…' : ''}`} dimColor />
        </Box>
        <Box flexDirection="row" alignItems="center" gap={1}>
          {isAsking ? (
            <Box flexDirection="row" alignItems="center" gap={1}>
              <Text dimColor>{t.compactAsk}</Text>
              <Button key="compact-yes" label={t.yes} variant="primary" onPress={() => compactNow($, e.props.isWorking, lang)} />
              <Button key="compact-no" label={t.no} onPress={() => update($, isConfirming, () => false)} />
            </Box>
          ) : (
            isLow && <Button key="compact" label={t.compact} onPress={() => update($, isConfirming, () => true)} />
          )}
          <Svg
            source={meterScene.svg(meters)}
            alt={metersAlt(meters, lang)}
            width={meterScene.width * meterScene.scale}
            height={meterScene.height * meterScene.scale}
          />
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANEL }, async ($, e) => {
    isPanelFocused = e.props.isFocused
    await read($, redraws)
    const lang = langOn(e.surface, await langNow($))
    const t = TEXTS[lang]
    const choice = await read($, langChoice)
    const auto = langName(e.surface, await detectedLang($))
    const choiceName = (c: LangChoice) => (c === 'auto' ? t.auto(auto) : langName(e.surface, c))
    const shown = meterSceneNamed(await read($, sceneName)).name
    if (e.surface === 'terminal') {
      const { Box, Select, Text } = $.ui.resolve(e)
      const shownMode = await read($, mode)
      const now = await $.clock.now()
      const { label } =
        shownMode === 'idle' ? idleScene(metersOf(await statsNow($), now), now) : sceneFor(shownMode, await read($, tool), shownAt, now)
      const isOngoing = shownMode !== 'idle' && shownMode !== 'compacted'

      return (
        <Box flexDirection="column">
          <Text>{isOngoing ? `${label[lang]}…` : label[lang]}</Text>
          <Select
            key="scene"
            label={t.scene}
            options={METER_SCENES.map(s => ({ value: s.name, label: s.label[lang] }))}
            value={shown}
            onSelect={name => chooseMeterScene($, name)}
          />
          <Select
            key="language"
            label={t.language}
            options={LANG_CHOICES.map(c => ({ value: c, label: choiceName(c) }))}
            value={choice}
            onSelect={value => chooseLang($, LANG_CHOICES.find(c => c === value) ?? 'auto')}
          />
          <Select
            key="size"
            label={t.size}
            options={SIZES.map(s => ({ value: s, label: t.sizes[s] }))}
            value={await read($, sizeName)}
            onSelect={value => chooseSize($, SIZES.find(s => s === value) ?? 'small')}
          />
        </Box>
      )
    }

    const { Box, Button, Svg, Text } = $.ui.resolve(e)
    const meters = metersOf(await statsNow($), await $.clock.now())

    return (
      <Box flexDirection="column" gap={1} paddingY={1}>
        <Box flexDirection="row" flexWrap="wrap" alignItems="center" gap={1}>
          <Text dimColor>{t.language}:</Text>
          {LANG_CHOICES.map(c =>
            c === choice ? (
              <Text key={`language-${c}`} bold>
                {choiceName(c)}
              </Text>
            ) : (
              <Button key={`language-${c}`} label={choiceName(c)} onPress={() => chooseLang($, c)} />
            ),
          )}
        </Box>
        <Text dimColor>{t.pickScene}</Text>
        {METER_SCENES.map(s => {
          const isInUse = s.name === shown

          return (
            <Box
              key={`scene-${s.name}`}
              flexDirection="column"
              alignItems="center"
              gap={1}
              padding={1}
              borderStyle="round"
              borderColor={isInUse ? BODY : undefined}
              borderDimColor={!isInUse}
            >
              <Svg source={s.svg(meters)} alt={`${s.label[lang]}: ${metersAlt(meters, lang)}`} width={s.width * s.scale} height={s.height * s.scale} />
              <Box flexDirection="row" alignItems="center" gap={1}>
                <Text bold>{s.label[lang]}</Text>
                {isInUse ? (
                  <Text dimColor>{t.inUse}</Text>
                ) : (
                  <Button key={`use-${s.name}`} label={t.use} onPress={() => chooseMeterScene($, s.name)} />
                )}
              </Box>
            </Box>
          )
        })}
      </Box>
    )
  })