live-status

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    const list = await read($, runs)
    const p: Panel = await read($, panel)
    const nowMs = await $.clock.now()
    await read($, slow) // the panel redraws on this slow clock, not every second
    const at = nowMs
    const running = list.filter(r => r.status === 'running').reverse()
    const finished = list.filter(r => r.status !== 'running').reverse()
    const everySession = await read($, sessions)
    const own = taskView(await read($, task), await read($, crew))
    const sessionList = everySession
      .filter(s => isShown(s, nowMs))
      .map(s => (s.isSelf && own ? { ...s, task: { title: own.title, done: own.done, total: own.total, current: own.current, isFinished: own.isFinished } } : s))
    const sessionsHidden = everySession.length - sessionList.length
    const sessionsWorking = sessionList.filter(s => s.status === 'busy').length
    const sessionsNeed = sessionList.filter(s => needsYou(s, nowMs)).length

    const toggleCompact = (
      <Button
        key="compact"
        label={p.isCompact ? 'Expand' : 'Collapse'}
        plain
        onPress={() => update($, panel, prev => ({ ...prev, isCompact: !prev.isCompact }))}
      />
    )
    const toggleDone = (
      <Button
        key="done"
        label={`${p.isDoneCollapsed ? '▸' : '▾'} Finished · ${finished.length}`}
        plain
        onPress={() => update($, panel, prev => ({ ...prev, isDoneCollapsed: !prev.isDoneCollapsed }))}
      />
    )

    if ('Svg' in ui) {
      const { Svg } = ui
      const W = Math.max(240, Math.min(900, (e.props.bodyColumns || 40) * 8 - 8))
      const card = (r: Run) => (
        <Svg
          key={r.id}
          source={agentSvg(W, r, at, nowMs)}
          alt={`${r.description || r.type}: ${r.status}, ${modelName(r.model)}, context ${runContext(r)}%`}
          width={W}
          height={100}
        />
      )
      return (
        <Box flexDirection="column" gap={1}>
          <Svg
            source={statsSvg(W, list, at)}
            alt={`${running.length} of ${list.length} agents running, ${fmtTokens(list.reduce((s, r) => s + r.tokens, 0))} tokens`}
            width={W}
            height={46}
          />
          {toggleCompact}
          {!p.isCompact && (
            <Svg
              source={sectionSvg(W, 'SESSIONS', `${sessionsWorking} working${sessionsNeed ? ` · ${sessionsNeed} need you` : ''}${sessionsHidden ? ` · ${sessionsHidden} idle hidden` : ''}`, sessionList.length ? (sessionsWorking / sessionList.length) * 100 : null)}
              alt={`Sessions: ${sessionsWorking} of ${sessionList.length} working, ${sessionsNeed} need you, ${sessionsHidden} idle hidden`}
              width={W}
              height={38}
            />
          )}
          {!p.isCompact && sessionList.length === 0 && <Text dimColor>No sessions found yet.</Text>}
          {!p.isCompact &&
            sessionList.map(s => (
              <Svg
                key={s.id}
                source={sessionSvg(W, s, nowMs, nowMs)}
                alt={`${s.name}${s.isSelf ? ' (this session)' : ''}: ${s.status === 'busy' ? 'working' : 'idle'}, ${s.project}, updated ${ago(nowMs - s.updatedAt)}`}
                width={W}
                height={96}
              />
            ))}
          {!p.isCompact && (
            <Svg
              source={sectionSvg(W, 'SUBAGENTS', list.length ? `${finished.length} / ${list.length} finished` : 'none yet', list.length ? (finished.length / list.length) * 100 : null, list.length > 0 && running.length === 0)}
              alt={`Subagents: ${finished.length} of ${list.length} finished`}
              width={W}
              height={38}
            />
          )}
          {list.length === 0 && <Text dimColor>No subagents yet. They show up here the moment one starts.</Text>}
          {!p.isCompact && running.length > 0 && <Text dimColor>Working · {running.length}</Text>}
          {!p.isCompact && running.map(card)}
          {!p.isCompact && finished.length > 0 && toggleDone}
          {!p.isCompact && !p.isDoneCollapsed && finished.slice(0, 8).map(card)}
        </Box>
      )
    }

    // Terminal: the same rows in text.
    const cols = Math.max(24, e.props.bodyColumns || 40)
    const w = Math.max(6, Math.min(20, cols - 30))
    const row = (r: Run) => {
      const ctx = runContext(r)
      return (
        <Box key={r.id} flexDirection="column" marginBottom={1}>
          <Text bold wrap="truncate-end">
            <Text color={r.status === 'failed' ? RED : r.status === 'done' ? GREEN : BLUE}>
              {r.status === 'running' ? '●' : r.status === 'done' ? '✓' : '✗'}{' '}
            </Text>
            {r.description || r.type}
          </Text>
          <Text dimColor wrap="truncate-end">
            {'  '}
            {r.type.replace(/^[^:]*:/, '')} · {modelName(r.model)}
            {r.effort ? ` · ${r.effort}` : ''} · {fmtTime(runElapsed(r, at))} · {fmtTokens(r.tokens)} tok
          </Text>
          <Text wrap="truncate-end">
            {'  '}
            <Text color={tone(ctx)}>{bar(ctx, w)}</Text>
            <Text dimColor>
              {' '}
              ctx {ctx}% · {fmtTokens(r.contextTokens)}
            </Text>
          </Text>
        </Box>
      )
    }
    return (
      <Box flexDirection="column">
        <Text dimColor>
          {running.length}/{list.length} running · {fmtTokens(list.reduce((s, r) => s + r.tokens, 0))} tokens
        </Text>
        {toggleCompact}
        {!p.isCompact && sessionList.length > 0 && (
          <Text dimColor>
            sessions · {sessionsWorking}/{sessionList.length} working{sessionsNeed ? ` · ${sessionsNeed} need you` : ''}{sessionsHidden ? ` · ${sessionsHidden} hidden` : ''}{' '}
            {bar(sessionList.length ? (sessionsWorking / sessionList.length) * 100 : 0, 10)}
          </Text>
        )}
        {!p.isCompact &&
          sessionList.map(s => (
            <Text key={s.id} wrap="truncate-end">
              <Text color={s.status === 'busy' ? BLUE : needsYou(s, nowMs) ? AMBER : GREEN}>{s.status === 'busy' ? '●' : needsYou(s, nowMs) ? '!' : '○'} </Text>
              {s.name}
              <Text dimColor>
                {' '}
                {s.isSelf ? '(this) ' : ''}· {s.project} · {ago(nowMs - s.updatedAt)}
              </Text>
            </Text>
          ))}
        {!p.isCompact && list.length > 0 && (
          <Text dimColor>
            subagents · {finished.length}/{list.length} finished {bar((finished.length / list.length) * 100, 10)}
          </Text>
        )}
        {list.length === 0 && <Text dimColor>No subagents yet.</Text>}
        {!p.isCompact && running.map(row)}
        {!p.isCompact && finished.length > 0 && toggleDone}
        {!p.isCompact && !p.isDoneCollapsed && finished.slice(0, 8).map(row)}
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || (await read($, isHidden))) return next(e)

    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    const u = await read($, usage)
    const t = await read($, turn)
    const at = (await read($, now)) || (await $.clock.now())
    const m = await read($, model)
    const fx = await read($, effort)
    const tv = taskView(await read($, task), await read($, crew))
    const runList = await read($, runs)
    const shownAt = await $.clock.now()
    const allSessions = (await read($, sessions)).filter(s => isShown(s, shownAt))
    const sessionSummary = {
      total: allSessions.length,
      working: allSessions.filter(s => s.status === 'busy').length,
      attention: allSessions.filter(s => needsYou(s, shownAt)).length,
    }
    const crewCount = runList.length

    // Agents go inline when the panel has no room (narrow window) or is not open.
    let paneOpen = false
    try {
      paneOpen = (await $.ui.panes()).some(p => p.id === PANE)
    } catch {
      // Treat as closed: the inline rows are the safe fallback.
    }
    const needInline = runList.length > 0 && (!paneOpen || (e.props.bodyColumns || 100) < 144)
    const maxRows = (e.props.bodyColumns || 100) < 70 ? 2 : 3
    const ordered = [...runList.filter(r => r.status === 'running').reverse(), ...runList.filter(r => r.status !== 'running').reverse()]
    const inline = {
      rows: needInline
        ? ordered.slice(0, maxRows).map((r): AgentRow => ({ name: r.description || r.type, status: r.status, ctx: runContext(r) }))
        : [],
      working: runList.filter(r => r.status === 'running').length,
      more: needInline ? Math.max(0, ordered.length - maxRows) : 0,
    }
    const cols = e.props.bodyColumns || 100
    const ctx = u.ctxPercent

    const elapsed = t.isRunning ? fmtTime(at - t.startedAt) : t.lastSeconds ? fmtTime(t.lastSeconds * 1000) : ''
    const plural = (n: number, w: string): string => `${n} ${w}${n === 1 ? '' : 's'}`
    const state = t.isRunning ? 'Working' : 'Idle'
    const detail = t.isRunning
      ? `${elapsed} · ${plural(t.steps, 'step')} · ${plural(t.tools, 'tool')}${t.agents ? ` · ${plural(t.agents, 'agent')}` : ''}`
      : t.lastSeconds
        ? `last turn ${elapsed} · ${plural(t.steps, 'step')}`
        : 'waiting for a prompt'
    const status = `${state} · ${detail}`

    const dismiss = <Button key="hide" label="✕" plain role="dismiss" onPress={() => update($, isHidden, () => true)} />

    if ('Svg' in ui) {
      const { Svg } = ui
      const W = Math.max(300, Math.min(1100, cols * 8 - 56))
      const gauges: Gauge[] = [
        {
          label: 'CONTEXT',
          pct: ctx,
          caption: u.ctxTokens !== null && u.ctxWindow ? `${fmtTokens(u.ctxTokens)} of ${fmtTokens(u.ctxWindow)}` : 'no reading',
          sheen: true,
        },
        ...u.limits.map(
          (l): Gauge => ({
            label: LIMIT_LABEL[l.kind] ?? l.kind.toUpperCase(),
            pct: l.pct,
            caption: l.resetsAt ? `resets in ${fmtReset(l.resetsAt, at)}` : 'resets unknown',
            sheen: false,
          }),
        ),
      ]
      const { svg, H } = cardSvg({
        W,
        stack: W < 520,
        name: m ? modelName(m) : 'Claude',
        fx,
        cost: u.costUsd !== null ? fmtCost(u.costUsd) : '',
        state,
        detail,
        isRunning: t.isRunning,
        gauges,
        task: tv,
        agents: inline,
        sessions: sessionSummary,
        nowMs: await $.clock.now(),
      })
      const alt =
        `${m ? modelName(m) : 'Claude'}${fx ? `, effort ${fx}` : ''}; ${status}; ` +
        (tv ? `task ${tv.title} ${tv.done} of ${tv.total}, ${Math.round((tv.done / Math.max(1, tv.total)) * 100)}%; ` : '') +
        gauges.map(g => `${g.label} ${g.pct === null ? 'no reading' : Math.round(g.pct) + '%'}`).join(', ')
      return (
        <Box flexDirection="row" alignItems="center" gap={1}>
          <Svg source={svg} alt={alt} width={W} height={H} />
          {crewCount > 0 ? <Button key="agents" label={`agents ×${crewCount}`} plain onPress={() => void togglePane($)} /> : null}
          {dismiss}
        </Box>
      )
    }

    // Terminal: the same figures in text rows.
    const w = cols < 70 ? 6 : 10
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" gap={2}>
          <Text bold color={BLUE}>
            {t.isRunning ? '◉' : '○'} {m ? modelName(m) : '...'}
            {' · '}
            {fx || 'effort ?'}
          </Text>
          {ctx !== null ? (
            <Text>
              <Text dimColor>ctx </Text>
              <Text color={tone(ctx)}>{bar(ctx, w)}</Text>
              <Text bold> {ctx}%</Text>
              {u.ctxTokens !== null && u.ctxWindow ? (
                <Text dimColor>
                  {' '}
                  {fmtTokens(u.ctxTokens)}/{fmtTokens(u.ctxWindow)}
                </Text>
              ) : null}
            </Text>
          ) : (
            <Text dimColor>ctx --</Text>
          )}
          {u.costUsd !== null ? <Text dimColor>{fmtCost(u.costUsd)}</Text> : null}
          {dismiss}
        </Box>
        <Box flexDirection="row" gap={2}>
          {u.limits.length === 0 ? (
            <Text dimColor>limits: no reading yet</Text>
          ) : (
            u.limits.map(l => (
              <Text key={l.kind}>
                <Text dimColor>{(LIMIT_LABEL[l.kind] ?? l.kind).toLowerCase()} </Text>
                <Text color={tone(l.pct)}>{bar(l.pct, w)}</Text>
                <Text bold> {Math.round(l.pct)}%</Text>
                {l.resetsAt ? <Text dimColor> ↻{fmtReset(l.resetsAt, at)}</Text> : null}
              </Text>
            ))
          )}
          <Text color={t.isRunning ? AMBER : undefined} dimColor={!t.isRunning}>
            {status}
          </Text>
        </Box>
        {tv ? (
          <Box flexDirection="row" gap={2}>
            <Text dimColor wrap="truncate-end">
              task {tv.title}
              {tv.current && !tv.isFinished ? ` › ${tv.current}` : ''}
            </Text>
            <Text color={tv.isFinished ? GREEN : AMBER}>{bar((tv.done / Math.max(1, tv.total)) * 100, w * 2)}</Text>
            <Text bold>
              {tv.done}/{tv.total} · {Math.round((tv.done / Math.max(1, tv.total)) * 100)}%
            </Text>
          </Box>
        ) : null}
        {inline.rows.length > 0 ? (
          <Box flexDirection="column">
            <Text dimColor>