at-work

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const list = await read($, running)
    const n = await read($, steps)
    const started = await read($, turnStart)
    const w = await read($, word)
    const done = await read($, last)
    const fl = await read($, flash)
    const lg = await read($, linger)
    const act = list.length > 0 ? list[list.length - 1] : null
    // an outcome holds the band for its while, then until the next call starts
    const out = fl !== null && (fl.until > Date.now() || act === null) ? fl : null
    // a call that just ended keeps its scene a moment, so back-to-back calls do not blink through thinking
    const kept = lg !== null && lg.until > Date.now() ? lg : null
    // a /compact typed between turns runs while the session is not working: the press shows all the same
    const busy = e.props.isWorking || act?.kind === 'compact' || kept?.kind === 'compact'
    const idle = rest(done, new Date().getHours())
    const kind = !busy ? idle.kind : out ? out.kind : act ? act.kind : kept ? kept.kind : thinker(w)
    const label = !busy
      ? idle.label
      : out ? out.label
        : act ? `${act.isSubagent ? say('🤖 小助手 · ', '🤖 helper · ') : ''}${act.label}`
          : kept ? kept.label : `💭 ${joke(w)}…`
    const more = list.length > 1 ? ` (+${list.length - 1})` : ''
    const forced = await read($, holiday)
    const hol = forced !== '' ? forced : festival(new Date())
    season = hol

    if (e.surface === 'desktop') {
      // the scene animates by itself, so this drawing reads no frame counter; the label row follows every change,
      // the picture only a change of scene or width, through the hidden frame (see slots)
      const { Box, Text, Svg } = $.ui.resolve(e)
      const crates = await read($, history)
      await read($, swap)
      const m = await read($, mode)
      const lay = layout(e.props.bodyColumns, e.props.maxRows, !busy)
      const key = `${kind}|${lay.W}|${hol ?? ''}`
      const make = (): Slot => ({ key, svg: picture(kind, lay, crates, list.slice(0, -1).map(a => a.kind)), alt: label })
      const shown = slots[front]
      if (m === 'image') {
        // an image keeps showing the old picture until the new one is in: one image, no buffering
        if (shown === null || shown === undefined || shown.key !== key) slots[front] = make()
        pending = null
      } else if (shown === null || shown === undefined) slots[front] = make()
      else if (shown.key !== key) {
        if (slots[1 - front]?.key !== key) slots[1 - front] = make()
        if (pending !== key) {
          pending = key
          flip($, key)
        }
      } else pending = null
      const picShown = slots[front]
      return (
        <Box flexDirection="column">
          {m === 'image'
            ? picShown ? <Svg key="image" source={picShown.svg} alt={picShown.alt} /> : null
            : [0, 1].map(i => {
              const slot = slots[i]
              return (
                <Box key={`frame${i}`} flexDirection="column" overflow="hidden" {...(i === front ? {} : { height: 0 })}>
                  {slot ? <Svg source={slot.svg} alt={slot.alt} isInteractive /> : null}
                </Box>
              )
            })}
          <Box flexDirection="row" gap={1}>
            <Box flexShrink={1}>
              <Text bold wrap="wrap">
                {label}
                {more}
              </Text>
            </Box>
            {e.props.isWorking && started ? (
              <Box flexShrink={0}>
                <Text dimColor>
                  {say(`· 第 ${n} 步 · ${hhmm(started)} 开始`, `· step ${n} · since ${hhmm(started)}`)}
                </Text>
              </Box>
            ) : null}
          </Box>
        </Box>
      )
    }

    const { Box, Text } = $.ui.resolve(e)
    if (!busy) {
      if (done === null) return next(e)
      return (
        <Box flexDirection="row" gap={1}>
          <Text>
            {kind === 'rain' ? '🌧 (•︵•)' : kind === 'sleep' ? '💤 (－_－)' : '☕ (ᵔᴥᵔ)'}
            {hol ? ` ${HOLIDAYS[hol].emoji}` : ''}
          </Text>
          <Text dimColor wrap="wrap">{label}</Text>
        </Box>
      )
    }
    const f = await read($, frame)
    const elapsed = started ? mmss((Date.now() - started) / 1000) : ''
    return (
      <Box flexDirection="row" gap={1}>
        <Text color="cyan">
          {hol ? `${HOLIDAYS[hol].emoji} ` : ''}
          {scene(kind, f)}
        </Text>
        <Box flexShrink={1}>
          <Text wrap="wrap">
            {label}
            {more}
          </Text>
        </Box>
        <Box flexShrink={0}>
          <Text dimColor>
            {say(`· 第 ${n} 步 · ${elapsed}`, `· step ${n} · ${elapsed}`)}
          </Text>
        </Box>
      </Box>
    )
  })