desk-pet

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    // Each key is spelled out so a reader (and the directory's scanner) can
    // see the pane only ever writes Desk Pet's own settings.
    const keep = (field: string, value: string | boolean, write: () => Promise<ConfigSetResult>) =>
      void save($, field, value, write).then(
        deny => deny && $.ui.toast(`Desk Pet: ${deny}`),
        (error: unknown) => $.ui.toast(`Desk Pet: couldn't save that setting (${error instanceof Error ? error.message : String(error)})`),
      )
    const setPet = (value: PetId) => keep('pet', value, () => $.config.set({ key: 'desk-pet.pet', value: value }))
    const setPosition = (value: Position) => keep('position', value, () => $.config.set({ key: 'desk-pet.position', value: value }))
    const setSound = (value: boolean) => keep('sound', value, () => $.config.set({ key: 'desk-pet.sound', value: value }))
    const setReaction: Record<(typeof REACTIONS)[number]['field'], (value: boolean) => void> = {
      react_turn_start: value => keep('react_turn_start', value, () => $.config.set({ key: 'desk-pet.react_turn_start', value: value })),
      react_reading: value => keep('react_reading', value, () => $.config.set({ key: 'desk-pet.react_reading', value: value })),
      react_editing: value => keep('react_editing', value, () => $.config.set({ key: 'desk-pet.react_editing', value: value })),
      react_shell: value => keep('react_shell', value, () => $.config.set({ key: 'desk-pet.react_shell', value: value })),
      react_web_search: value => keep('react_web_search', value, () => $.config.set({ key: 'desk-pet.react_web_search', value: value })),
      react_tests_pass: value => keep('react_tests_pass', value, () => $.config.set({ key: 'desk-pet.react_tests_pass', value: value })),
      react_tests_fail: value => keep('react_tests_fail', value, () => $.config.set({ key: 'desk-pet.react_tests_fail', value: value })),
      react_long_run: value => keep('react_long_run', value, () => $.config.set({ key: 'desk-pet.react_long_run', value: value })),
      react_needs_input: value => keep('react_needs_input', value, () => $.config.set({ key: 'desk-pet.react_needs_input', value: value })),
      react_turn_finish: value => keep('react_turn_finish', value, () => $.config.set({ key: 'desk-pet.react_turn_finish', value: value })),
      react_compaction: value => keep('react_compaction', value, () => $.config.set({ key: 'desk-pet.react_compaction', value: value })),
      react_idle: value => keep('react_idle', value, () => $.config.set({ key: 'desk-pet.react_idle', value: value })),
    }

    return (
      <Box flexDirection="column">
        <Text bold>Pet</Text>
        <Box flexDirection="row" gap={1} marginBottom={1}>
          {PET_IDS.map(id => (
            <Button
              key={`pet-${id}`}
              label={PETS[id].name}
              variant={id === pet ? 'primary' : 'secondary'}
              onPress={() => setPet(id)}
            />
          ))}
        </Box>
        <Text bold>Position</Text>
        <Box flexDirection="row" gap={1}>
          {POSITIONS.map(one => (
            <Button
              key={`position-${one.id}`}
              label={one.title}
              variant={one.id === position ? 'primary' : 'secondary'}
              onPress={() => setPosition(one.id)}
            />
          ))}
        </Box>
        <Box flexDirection="row" gap={1} marginTop={1}>
          <Text bold>Sound</Text>
          <Button key="sound" label={isSoundOn ? 'On' : 'Off'} onPress={() => setSound(!isSoundOn)} />
          <Text dimColor>a soft chime for needs input and turn finishes</Text>
        </Box>
        <Box marginTop={1}>
          <Text bold>Reactions</Text>
        </Box>
        {REACTIONS.map(one => (
          <Box key={`row-${one.field}`} flexDirection="row" gap={1}>
            <Button
              key={one.field}
              label={`${isOn(one.kind) ? '●' : '○'} ${one.title}`}
              plain
              dimColor={!isOn(one.kind)}
              onPress={() => setReaction[one.field](!isOn(one.kind))}
            />
            {one.kind !== 'idle' && (
              <Button
                key={`preview-${one.kind}`}
                label="preview"
                plain
                dimColor
                onPress={() => void $.clock.now().then(now => preview(one.kind, now))}
              />
            )}
          </Box>
        ))}
        <Box marginTop={1}>
          <Text dimColor>/desk-pet demo plays every reaction · /desk-pet show reopens the panel</Text>
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const isCard = position === 'above' || (position === 'panel' && isPaneWaiting)
    if (!isCard || e.props.hasSurvey) return next(e)
    const show = await read($, shown)
    const caption = captionFor(show)

    if (e.surface === 'terminal') {
      const { Box, Raster, Text } = $.ui.resolve(e)
      const now = await $.clock.now()
      const index = frameAt(animFor(show), now - show.startedAt)
      site = { requestId: e.requestId, animKey: animKey(show), frame: index }
      const hasRoom = e.props.bodyColumns >= RASTER_COLUMNS + 24

      return (
        <Box flexDirection="row" alignItems="center" gap={2}>
          <Raster key={RASTER_KEY} columns={RASTER_COLUMNS} rows={RASTER_ROWS} cells={cellsFor(show, index)} />
          {hasRoom && (
            <Box flexDirection="column">
              <Text bold>{petName}</Text>
              <Text wrap="truncate-end">{caption}</Text>
            </Box>
          )}
        </Box>
      )
    }

    if (e.surface === 'desktop') {
      const { Box, Button, Svg, Text } = $.ui.resolve(e)
      const openSettings = () => void $.ui.open({ id: PANE, title: 'Desk Pet settings', focus: true, closeOnEscape: true })

      return (
        <Box flexDirection="row" alignItems="center" gap={2} width="100%" borderStyle="round" paddingX={1} paddingY={1}>
          <Svg source={svgFor(show)} alt={`${petName}: ${caption}`} width={W * 4} height={H * 4} isInteractive />
          <Box flexDirection="column" flexGrow={1} gap={1}>
            <Text bold>{petName}</Text>
            <Text>{caption}</Text>
          </Box>
          <Button key="settings" label="Settings" plain dimColor onPress={openSettings} />
        </Box>
      )
    }

    return next(e)
  })