oneliner

  on('ui.render', { component: 'Pane', requestId: LIMITS_PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const [l, at] = await Promise.all([read($, limit), read($, now)])
    const h = ((await $.store.get(HISTORY_KEY)) as History | undefined) ?? { resetsAt: null, points: [] }
    const width = Math.max(20, Math.min(72, ((e.props as { bodyColumns?: number }).bodyColumns ?? 60) - 8))
    const close = <Button key="limits-close" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: LIMITS_PANE })} />
    if (l.percent === null || !l.resetsAt) {
      return <Box flexDirection="column"><Text dimColor>No limit reading yet: it arrives with the next reply.</Text>{close}</Box>
    }
    const end = Date.parse(l.resetsAt)
    const start = end - WINDOW_MS
    const nowAt = at || Date.now()
    const fullAt = limitFullAt(l)
    const pace = (() => {
      const s = l.samples ?? []
      if (s.length < 2) return null
      const first = s[0]
      const last = s[s.length - 1]
      if (!first || !last) return null
      const span = last.at - first.at
      return span >= FORECAST_MIN_SPAN_MS ? ((last.pct - first.pct) / span) * 3_600_000 : null
    })()
    const points = h.resetsAt === l.resetsAt ? h.points : []
    // Each column is a slice of the 5h window: past → last reading; future → the forecast line.
    const past: (number | null)[] = []
    const future: (number | null)[] = []
    for (let i = 0; i < width; i++) {
      const t = start + ((i + 1) / width) * WINDOW_MS
      if (t <= nowAt) {
        const before = points.filter(p => p.at <= t)
        past.push(before[before.length - 1]?.pct ?? null)
        future.push(null)
      } else {
        past.push(null)
        future.push(pace !== null && pace > 0 ? Math.min(100, l.percent + (pace * (t - nowAt)) / 3_600_000) : null)
      }
    }
    const pastRows = barRows(past, 5)
    const futureRows = barRows(future, 5)
    const pct = Math.round(l.percent)
    const tone = pct >= LIMIT_RED_PCT ? 'error' : pct >= LIMIT_YELLOW_PCT ? 'warning' : 'success'
    const axis = ['100', '', ' 50', '', '  0']
    const nowCol = Math.max(0, Math.min(width - 1, Math.floor(((nowAt - start) / WINDOW_MS) * width)))
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" gap={1}>
          <Text color={tone} bold>5h {pct}%</Text>
          {pace !== null && <Text dimColor>· pace {pace >= 0 ? '+' : ''}{Math.round(pace)}%/h</Text>}
          {fullAt !== null
            ? <Text color="warning">· full ~{hhmmAt(fullAt)}</Text>
            : <Text dimColor>· won't fill before reset</Text>}
          <Text dimColor>· resets {hhmm(l.resetsAt)}</Text>
        </Box>
        {pastRows.map((row, r) => (
          <Box flexDirection="row">
            <Text dimColor>{(axis[r] ?? '').padStart(3)} │</Text>
            <Text color={tone}>{row.slice(0, nowCol + 1)}</Text>
            <Text dimColor>{(futureRows[r] ?? '').slice(nowCol + 1)}</Text>
          </Box>
        ))}
        <Text dimColor>{'    └' + '─'.repeat(width)}</Text>
        <Box flexDirection="row" width={width + 5} justifyContent="space-between">
          <Text dimColor>{'     ' + hhmmAt(start)}</Text>
          <Text dimColor>now {hhmmAt(nowAt)}</Text>
          <Text dimColor>{hhmmAt(end)}</Text>
        </Box>
        {l.weekPercent !== null && <Text dimColor>7-day window: {Math.round(l.weekPercent)}%{l.weekResetsAt ? ` · resets ${new Date(l.weekResetsAt).toLocaleDateString()}` : ''}</Text>}
        {points.length < 3 && <Text dimColor italic>The chart fills in as readings arrive (one per few minutes while you work).</Text>}
        {close}
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const [hiddenParts, isMenuOpen, writingHandoff, isOfferingUpdate] = await Promise.all([read($, hidden), read($, stripMenu), read($, isWritingHandoff), read($, autoUpdateOffer)])
    let [g, d, l, c, ctx, at, shipping, n] = await Promise.all([
      read($, git), read($, dev), read($, limit), read($, cache), read($, context), read($, now), read($, isShipping),
      read($, nextSteps),
    ])
    const demoLevel = (await read($, demo)) as DemoLevel | null
    const changesOpen = await read($, isChangesOpen)
    if (demoLevel) ({ g, d, l, c, ctx, n } = demoFixture(demoLevel, at || Date.now(), n))
    // Past its reset the window is empty, even before the next turn reports a new reading.
    if (l.resetsAt && (at || Date.now()) >= Date.parse(l.resetsAt)) l = { ...l, percent: 0, resetsAt: null, samples: [] }
    if (l.weekResetsAt && (at || Date.now()) >= Date.parse(l.weekResetsAt)) l = { ...l, weekPercent: 0, weekResetsAt: null }
    const cols = e.props.bodyColumns
    const isTight = cols < 60

    type Seg = {
      id: string; text: string; color?: string; dim?: boolean
      extras?: { text: string; color?: string; dim?: boolean; drop?: number }[] // more numbers, each with its own color; `drop`: lower goes first when narrow
      button?: { label: string; onPress: () => void }
      detail?: string // revealed after the text while the pointer is over the part (desktop)
      detailMode?: 'push' | 'over' // push the parts to its right aside, or cover them to the strip's end
      buttons?: { label: string; onPress: () => void }[] // more buttons after `button`
      detailButtons?: { label: string; onPress: () => void }[] // actions offered only on hover
      toggle?: { label: string; onPress: () => void } // a plain ▾ / ▴ right after the text (git's changes panel)
    }
    const segs: Seg[] = []
    const segTextLen = (s: Seg) => s.text.length + (s.extras ?? []).reduce((n, x) => n + x.text.length, 0)

    // The changes panel and next take turns: opening one closes the other.
    const toggleChanges = () => void (async () => {
      const isOpening = !(await read($, isChangesOpen))
      if (isOpening) {
        await update($, nextSteps, (s): NextState => ({ ...s, isOpen: false }))
        await update($, stripMenu, () => false)
        void refreshGit($)
      }
      await update($, isChangesOpen, () => isOpening)
    })()

    // git
    if (g.isRepo) {
      const dirty = g.changed > 0 || g.ahead > 0
      const isDiverged = g.ahead > 0 && g.behind > 0
      const isBroken = g.conflicts > 0 || g.operation !== null
      const parts = [g.branch]
      if (g.changed) parts.push(`${g.changed}Δ`)
      if (g.ahead) parts.push(`${g.ahead}↑`)
      if (g.behind) parts.push(`${g.behind}↓`)
      segs.push({
        id: 'git',
        text: shipping ? `${g.branch} shipping…`
          : isBroken ? `${g.branch} · ${g.operation ?? 'merge'}${g.conflicts ? ` ${g.conflicts}✗` : ''}`
          : isDiverged ? `${g.branch} · diverged ${g.ahead}↑${g.behind}↓`
          : dirty ? parts.join(isTight ? ' ' : ' · ') : `${g.branch} ✓`,
        color: isBroken || isDiverged ? 'error' : dirty || g.behind ? 'warning' : g.hasUpstream ? 'success' : undefined,
        dim: !isBroken && !isDiverged && !dirty && !g.behind && !g.hasUpstream,
        // Ship lives in the changes panel (▴), not on the strip.
        detail: [
          // One file: its name and line counts. More: how many, and the lines over all of them
          // (what's to push or pull is already on the strip).
          g.changed === 1 && g.stats?.[0] ? fileLine(g.stats[0])
            : g.changed > 1 ? `${g.changed} edits${g.added || g.removed ? ` +${g.added ?? 0} −${g.removed ?? 0}` : ''}` : '',
          !g.hasUpstream ? 'not on a remote yet' : '',
          // The last commit's files by name, and how long ago.
          g.lastFiles?.length
            ? `last: ${g.lastFiles.join(', ')}${g.lastFilesMore ? ` +${g.lastFilesMore} more` : ''}${g.lastAt ? ` · ${shortAge(at - g.lastAt * 1000)} ago` : ''}`
            : '',
        ].filter(Boolean).join(' · '),
        detailMode: 'push',
        toggle: { label: changesOpen ? '▾' : '▴', onPress: toggleChanges },
      })
    }

    // dev server
    if (d.port !== null) {
      const map = {
        up: { text: `:${d.port}`, color: 'success' },
        down: { text: isTight ? `:${d.port} ↓` : `:${d.port} down`, dim: true },
        starting: { text: `:${d.port} starting…`, dim: true },
        error: { text: isTight ? 'build ✗' : `build error`, color: 'error' },
        none: { text: '', dim: true },
      } as const
      const s = map[d.status]
      segs.push({
        id: 'dev', text: s.text, color: 'color' in s ? s.color : undefined, dim: 'dim' in s && s.dim,
        button: d.status === 'down' ? { label: 'Start', onPress: () => void startDev($, cwd) } : undefined,
        detail: d.status === 'error' ? (d.error ?? 'see the dev server output')
          : d.status === 'up' ? `http://localhost:${d.port}`
          : d.status === 'down' ? `localhost:${d.port} is not running` : '',
        detailMode: 'push',
      })
    }

    // limit
    if (l.percent !== null) {
      const pct = Math.round(l.percent)
      const tone = pct >= LIMIT_RED_PCT ? 'error' : pct >= LIMIT_YELLOW_PCT ? 'warning' : 'success'
      const hot = tone !== 'success'
      const minsLeft = l.resetsAt ? Math.max(0, Math.ceil((Date.parse(l.resetsAt) - at) / 60_000)) : null
      const fullAt = limitFullAt(l)
      const reset = fullAt !== null ? ` · full ~${hhmmAt(fullAt)}`
        : minsLeft !== null && minsLeft < 60 ? ` · ${minsLeft} min`
        : hot && l.resetsAt && !isTight ? ` · ${hhmm(l.resetsAt)}` : ''
      const week = l.weekPercent !== null && l.weekPercent >= WEEK_SHOW_PCT ? Math.round(l.weekPercent) : null
      segs.push({
        id: 'limit',
        text: `5h ${pct}%${reset}`,
        color: tone,
        extras: week !== null
          ? [{ text: ` · 7d ${week}%`, color: week >= LIMIT_RED_PCT ? 'error' : 'warning', drop: 3 }]
          : undefined,
        // Close to the wall: offer to write the handoff while there's still room to.
        button: (tone === 'error' || (fullAt !== null && fullAt - at < 60 * 60_000)) && !writingHandoff
          ? { label: 'Handoff', onPress: () => void writeHandoff($, cwd) }
          : undefined,
        detail: [
          l.resetsAt ? `resets ${hhmm(l.resetsAt)}` : '',
          fullAt !== null ? `full ~${hhmmAt(fullAt)}` : '',
          l.weekPercent !== null ? `7d ${Math.round(l.weekPercent)}%` : '',
          ctx.usd ? `$${ctx.usd.toFixed(2)}` : '',
        ].filter(Boolean).join(' · '),
      })
    }

    // context window
    const isContextRed = ctx.percent !== null && Math.round(ctx.percent) >= CONTEXT_RED_PCT
    if (ctx.percent !== null) {
      const pct = Math.round(ctx.percent)
      const k = ctx.tokens !== null && !isTight ? ` · ${tokensShort(ctx.tokens)}` : ''
      segs.push({
        id: 'context',
        text: `ctx ${pct}%${k}`,
        color: pct >= CONTEXT_RED_PCT ? 'error' : pct >= CONTEXT_YELLOW_PCT ? 'warning' : 'success',
        button: isContextRed && !writingHandoff ? { label: 'Handoff', onPress: () => void writeHandoff($, cwd) } : undefined,
        buttons: isContextRed ? [{ label: 'Compact', onPress: () => void compactNow($) }] : undefined,
        detail: [
          `${100 - pct}% free`,
          ctx.window ? `of ${tokensShort(ctx.window)}` : '',
        ].filter(Boolean).join(' '),
        // On hover at any fill: the same two, as icons (handoff, compact).
        detailButtons: isContextRed ? undefined : [
          ...(writingHandoff ? [] : [{ label: '📝', onPress: () => void writeHandoff($, cwd) }]),
          { label: '♻️', onPress: () => void compactNow($) },
        ],
        detailMode: 'push',
      })
    }

    // cache clock
    const ttl = cacheTtl(c, l)
    const isShort = ttl < CACHE_TTL_MIN
    const left = cacheMinutesLeft(c, ttl, at)
    if (left !== null) {
      const cold = left === 0 || c.resetReason != null
      const share = ((secsLeftExact(c, ttl, at) ?? 0) / 60) / ttl
      const timeTone = cold || share < CACHE_RED_SHARE ? 'error' : share < CACHE_GREEN_SHARE ? 'warning' : 'success'
      const readTone = c.readPercent === null ? undefined
        : c.readPercent >= READ_GREEN_PCT ? 'success' : c.readPercent >= READ_RED_PCT ? 'warning' : 'error'