terminal-gym

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const t = await read($, today)
    if (options.band === false || e.props.hasSurvey || t === null) return next(e)

    const { Box, Button, Text } = $.ui.resolve(e)

    // Lay the band out in rows that fit, widest first: one line, then the
    // header over the buttons, then every piece on its own line.
    const cols = e.props.bodyColumns
    const WORDMARK = MINI_BARBELL.small + MINI_BARBELL.plate + MINI_BARBELL.name + MINI_BARBELL.plateRight + MINI_BARBELL.small
    const TAGLINE = 'Your agent put in the reps. You next.'
    const BUTTONS_WIDTH = buttonsWidth(['Pick your training', 'House rules', 'Just train'])
    const HEADER_WIDTH = cells(WORDMARK) + 2 + cells(TAGLINE)

    if (!(await read($, isIntroduced))) {
      const buttons = (
        <Box key="buttons" flexDirection={cols >= BUTTONS_WIDTH ? 'row' : 'column'}>
          <Button key="setup" label="Pick your training" variant="primary" onPress={() => openOnboarding($)} />
          {cols >= BUTTONS_WIDTH && <Text> </Text>}
          <Button key="help" label="House rules" onPress={() => $.ui.open({ id: HELP_PANE, title: 'HOUSE RULES' })} />
          {cols >= BUTTONS_WIDTH && <Text> </Text>}
          <Button key="dismiss" label="Just train" onPress={() => markIntroduced($)} />
        </Box>
      )
      const header = (
        <Box key="header" flexDirection={cols >= HEADER_WIDTH ? 'row' : 'column'}>
          {cols >= cells(WORDMARK) ? (
            <Box>
              <Text dimColor>{MINI_BARBELL.small}</Text>
              <Text color="#d7af5f">{MINI_BARBELL.plate}</Text>
              <Text bold>{MINI_BARBELL.name}</Text>
              <Text color="#d7af5f">{MINI_BARBELL.plateRight}</Text>
              <Text dimColor>{MINI_BARBELL.small}</Text>
              {cols >= HEADER_WIDTH && <Text>  </Text>}
            </Box>
          ) : (
            <Text bold wrap="truncate-end">
              {MINI_BARBELL.name}
            </Text>
          )}
          <Text dimColor wrap="truncate-end">{TAGLINE}</Text>
        </Box>
      )
      const isOneLine = cols >= HEADER_WIDTH + 1 + BUTTONS_WIDTH
      return (
        <Box key="band" flexDirection={isOneLine ? 'row' : 'column'}>
          {header}
          {isOneLine && <Text> </Text>}
          {buttons}
        </Box>
      )
    }

    // A rest day is deliberate, not a miss: no rep buttons, just a way back.
    if (t.isRest) {
      const REST = `😴 Rest day · ${t.exercise} back tomorrow`
      const TRAIN = 'Train today'
      return (
        <Box key="rest" flexDirection={cols >= cells(REST) + 2 + buttonsWidth([TRAIN]) ? 'row' : 'column'}>
          <Text dimColor wrap="truncate-end">
            {REST}
            {'  '}
          </Text>
          <Button key="train" label={TRAIN} onPress={() => endRest($)} />
        </Box>
      )
    }

    const days = await read($, history)
    const color = progressColor(t.count, t.goal)
    const add = (n: number) => () => void logReps($, count => count + n)
    const progress = `${line(t)}${paceText(await read($, pace), isStrict)}`
    const run = fullStreak(days, await read($, olderStreak))
    const streakText = run > 0 ? `  🔥${run}d` : ''
    const LOG_LABEL = 'log reps: '
    const logWidth = cells(LOG_LABEL) + buttonsWidth(['+5', '+10', '+25']) + cells(streakText)

    return (
      <Box key="tracker" flexDirection={cols >= cells(progress) + 2 + logWidth ? 'row' : 'column'}>
        <Text color={color} dimColor={color === undefined} wrap="truncate-end">
          {progress}
          {'  '}
        </Text>
        <Box>
          <Text dimColor>{LOG_LABEL}</Text>
          <Button key="add5" label="+5" onPress={add(5)} />
          <Text> </Text>
          <Button key="add10" label="+10" onPress={add(10)} />
          <Text> </Text>
          <Button key="add25" label="+25" onPress={add(25)} />
          {streakText !== '' && <Text>{streakText}</Text>}
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: ONBOARD_PANE }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    const step = await read($, onboardStep)
    const p = await read($, onboardPick)
    const go = (to: number) => () => void update($, onboardStep, () => to)
    const choose = (patch: Partial<OnboardPick>) => () => void update($, onboardPick, now => ({ ...now, ...patch }))
    const dots = [0, 1, 2].map(i => (i === step ? '●' : '○')).join(' ')

    const header = (title: string) => (
      <Box flexDirection="column">
        <Text dimColor>
          Step {step + 1} of 3 {dots}
        </Text>
        <Text bold>{title}</Text>
        <Text> </Text>
      </Box>
    )

    const nav = (
      <Box>
        {step > 0 && <Button key="back" label="Back" onPress={go(step - 1)} />}
        {step > 0 && <Text> </Text>}
        {step < 2 ? (
          <Button key="next" label="Next" variant="primary" onPress={go(step + 1)} />
        ) : (
          <Button key="finish" label="Let's go" variant="primary" onPress={() => finishOnboarding($)} />
        )}
      </Box>
    )

    if (step === 0) {
      return (
        <Box flexDirection="column">
          {header('Your agent works the code. You work the reps.')}
          <Text>Every day has a rep goal.</Text>
          <Text>When Claude runs a long turn, that's your cue for a set.</Text>
          <Text> </Text>
          <Text>Log reps two ways:</Text>
          <Text dimColor>  type /fit 20</Text>
          <Text dimColor>  or press +5 +10 +25 above your prompt</Text>
          <Text> </Text>
          {nav}
        </Box>
      )
    }

    if (step === 1) {
      const programs = [...(p.hasRoutine ? [KEEP] : []), ...Object.keys(ROUTINES)]
      const routine = pickedRoutine(p)
      return (
        <Box flexDirection="column">
          {header('Pick your program')}
          {programs.map((name, i) => (
            <Button
              key={`program-${i}`}
              label={`${name === p.program ? '●' : '○'} ${name}`}
              plain
              onPress={choose({ program: name })}
            />
          ))}
          {routine !== undefined && (
            <Box flexDirection="column">
              <Text> </Text>
              <Text dimColor>Goal size</Text>
              <Box>
                {Object.keys(SIZES).map(size => (
                  <Box>
                    <Button
                      key={`size-${size}`}
                      label={`${size === p.size ? '●' : '○'} ${size}`}
                      plain
                      onPress={choose({ size })}
                    />
                    <Text>  </Text>
                  </Box>
                ))}
              </Box>
            </Box>
          )}
          <Text> </Text>
          <Text dimColor>{routine === undefined ? 'Your routine stays as it is.' : describeRoutine(routine)}</Text>
          <Text> </Text>
          {nav}
        </Box>
      )
    }

    const routine = pickedRoutine(p)
    const exercise = routine?.mon?.exercise ?? (await read($, today))?.exercise ?? 'pushups'
    const sample = withStreak(
      { date: '', exercise, goal: 100, unit: '', count: 60, isRest: false },
      // three finished days, today still in progress: 🔥3d
      [
        ...Array.from({ length: 3 }, (_, i) => ({ date: `d${i}`, count: 100, goal: 100, exercise, isSkipped: false })),
        { date: 'today', count: 60, goal: 100, exercise, isSkipped: false },
      ],
    )
    const preview =
      e.surface === 'terminal' ? (
        (() => {
          const { Raster } = $.ui.resolve(e)
          return <Raster key="sample-grid" {...heatCells(SAMPLE_DAYS)} />
        })()
      ) : (
        <Text dimColor>■ ■ ■ ■ ■ □ ■</Text>
      )

    return (
      <Box flexDirection="column">
        {header('Keep the streak alive')}
        <Text>Hit your goal and the streak grows.</Text>
        <Text>It sits at the end of your tracker:</Text>
        <Text color="#d7af5f">  {sample}</Text>
        <Text dimColor>Miss a day and it resets to zero.</Text>
        <Text> </Text>
        <Text>See every day as a grid:</Text>
        <Text dimColor>  type /fit score</Text>
        {preview}
        <Text> </Text>
        {nav}
      </Box>
    )
  })