clawd-tales

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.surface === 'mobile' || e.props.hasSurvey) return next(e)
    const cur = await read($, hero)
    const crew = await read($, workers)
    const asking = await read($, alert)
    if ((cur.mode === 'idle' && crew.length === 0 && !asking) || !(await read($, isOn))) return next(e)
    const { Box, Text } = $.ui.resolve(e)
    cols = Math.max(HERO_W + 4, e.props.bodyColumns ?? 80)
    const rows = e.props.maxRows ?? 12
    const f = await read($, frame)
    const out = crew.filter(w => w.state === 'running').length || crew.length
    const running = crew.filter(w => w.state === 'running')
    let shown: Hero = cur
    // Turn over, or the main loop blocked on an Agent call: Claude idles while the helpers work.
    if (cur.mode === 'idle' || (cur.mode === 'working' && agentCalls > 0 && running.length > 0)) {
      shown = { ...cur, ...waitBeat(out, running[0]?.label ?? crew[0]?.label) }
    }
    if (asking) {
      const waited = alertAt !== null ? Math.floor(((await $.clock.now()) - alertAt) / 1000) : 0
      const nervous = waited * 1000 >= NERVOUS_MS
      shown = { ...shown, action: 'alert', caption: nervous ? `${asking} (waiting ${waited}s)` : asking, emote: nervous ? 'sweat' : shown.emote }
    }
    const fit = (s: string, room: number) => (s.length > room ? s.slice(0, Math.max(1, room - 1)) + '…' : s)
    const caption = asking ? (
      <Text color="#e5534b" bold>
        {fit(shown.caption, cols)}
      </Text>
    ) : (
      <Text dimColor>{fit(shown.caption, cols)}</Text>
    )
    const below = await next(e)

    // Degradation ladder: full stage, then stage without sky or roster, then stage without its
    // caption (a fullscreen split pane leaves ~5 rows), then one line, then nothing. A call for
    // the person keeps its caption and gives up stage instead.
    if (rows < 1) return below
    const captionRows = asking || rows >= 6 ? 1 : 0
    const room = rows - captionRows
    if (room < 4 || cols < 30) {
      return (
        <Box flexDirection="column">
          <Box flexDirection="row">
            <Text color={asking ? '#e5534b' : '#d77757'}>{`${glyph(shown.action, f)} `}</Text>
            {caption}
          </Box>
          {below}
        </Box>
      )
    }

    const task = await read($, todos)
    const now = await $.clock.now()
    const day = new Date(now)
    const holiday = holidayNow(day)
    const hour = day.getHours()
    const streak = await read($, combo)
    const holidayHat: Hat | null = holiday === 'halloween' ? 'witch' : holiday === 'christmas' ? 'santa' : holiday === 'newyear' ? 'party' : null
    const longHaul = cur.mode === 'working' && now - startedAt >= HARDHAT_MS
    const hat: Hat | null =
      streak >= CROWN_AT
        ? 'crown'
        : (wornHat ??
          (planMode ? 'wizard' : null) ??
          holidayHat ??
          (longHaul ? 'hardhat' : null) ??
          (isLate(hour) ? 'nightcap' : null) ??
          (demoGrowth === 'shell' ? 'shell' : demoGrowth ? FORM_HAT[demoGrowth] : null) ??
          (stats?.form ? FORM_HAT[stats.form] : stats ? 'shell' : null))
    const extras = {
      weather: weatherOf(await read($, context)),
      bugs: await read($, bugs),
      todos: task,
      now,
      sky: skyOf(hour),
      holiday,
      fireworks: holiday === 'newyear' && isMidnightNewYear(day),
      hat,
      shiny: (await read($, shiny)) === true,
      late: isLate(hour),
      fx: await read($, fx),
      // Earned the crown this turn: shades on, the cool kind.
      face: wornFace ?? (best >= CROWN_AT ? 'shades' : null),
      tie: running.length >= TIE_AT,
      scarf: scarfOn ? scarfKey : null,
    }
    const all = lines(stage(shown, crew, f, cols, extras))
    // Standing Claude reaches the second line; only the alert crop cuts into him.
    const stageLines = all.slice(rows >= 8 ? 0 : Math.min(2, Math.max(1, all.length - room)))
    const ctx = await read($, context)
    const gauges = [
      ...(ctx === null ? [] : [{ label: 'ctx', percent: Math.round(ctx) }]),
      ...(await read($, limits)).map(l => ({ label: l.kind, percent: l.percent })),
    ]
    const tone = (p: number) => (p >= 95 ? '#e5534b' : p >= 80 ? '#e0b84c' : undefined)
    const hasRoom = rows >= stageLines.length + captionRows + 1
    const roster =
      !hasRoom || (crew.length === 0 && !task && gauges.length === 0 && streak < COMBO_AT) ? null : (
        <Box flexDirection="row">
          {gauges.map((g, n) => (
            <Text color={tone(g.percent)} dimColor={!tone(g.percent)}>
              {`${n ? ' · ' : ''}${g.label} ${g.percent}%`}
            </Text>
          ))}
          {gauges.length > 0 && (task || crew.length > 0 || streak >= COMBO_AT) ? <Text dimColor>{'   '}</Text> : null}
          {streak >= COMBO_AT ? <Text color="#e0b84c" bold>{`×${streak} combo${streak >= CROWN_AT ? ' 👑' : ''}  `}</Text> : null}
          {task ? <Text color="#f5d76e">{`● ${task.done}/${task.total} tasks  `}</Text> : null}
          {crew.slice(0, 4).map(w => (
            <Text color={TIER_COLOR[w.state === 'failed' ? 'other' : w.tier]}>
              {`${w.state === 'running' ? '●' : w.state === 'failed' ? '✗' : '✓'} ${fit(w.label, Math.max(8, Math.floor(cols / 5) - 3))}  `}
            </Text>
          ))}
          {crew.length > 4 ? <Text dimColor>{`+${crew.length - 4}`}</Text> : null}
        </Box>
      )
    return (
      <Box flexDirection="column">
        {stageLines.map(line => (
          <Box flexDirection="row">
            {line.map(s => (
              <Text color={s.color} backgroundColor={s.backgroundColor}>
                {s.text}
              </Text>
            ))}
          </Box>
        ))}
        {captionRows ? caption : null}
        {roster}
        {below}
      </Box>
    )
  })