sprout

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const list = await read($, agents)
    const start = await read($, waveStart)
    const at = await read($, now)
    const crew = list.filter(a => a.startedAt >= start || a.status === 'running')
    const running = crew.filter(a => a.status === 'running')
    if (crew.length === 0 || (running.length === 0 && at - lastEnd(crew) > BAND_LINGER_MS)) return next(e)

    const others = await next(e)
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    // Svg is the desktop's alone: narrowing the event narrows the element table.
    const Svg = e.surface === 'desktop' ? $.ui.resolve(e).Svg : null
    const isLive = running.length > 0
    const failed = crew.filter(a => a.status === 'failed').length
    const ratio = crew.reduce((s, a) => s + (progressOf(a) ?? 0), 0) / crew.length
    const cost = crew.reduce<number | null>((s, a) => addCost(s, a.costUsd), 0)
    const span = Math.max(...crew.map(a => a.endedAt ?? Math.max(at, a.startedAt))) - Math.min(...crew.map(a => a.startedAt))
    const head = isLive ? t.bandRunning(running.length) : t.bandDone(crew.length)
    const barColor = isLive ? BAR_LIVE : failed ? BAR_FAIL : BAR_DONE
    const [lit, unlit] = blockBar(ratio, 31)
    const bar =
      Svg ? (
        <Svg
          source={dotBarSvg(ratio, barColor, isLive, `wave-${start}`, BAND_COLS, BAND_ROWS, !isLive && failed ? BAR_FAIL : undefined)}
          alt={`${Math.round(ratio * 100)}%`}
          width={dotBarWidth(BAND_COLS)}
          height={dotBarHeight(BAND_ROWS)}
        />
      ) : (
        <Text>
          <Text color={isLive ? RUN : failed ? FAIL : DONE}>{lit}</Text>
          <Text dimColor>{unlit}</Text>
        </Text>
      )
    // Other mods' band content stays below ours.
    return (
      <Box flexDirection="column">
        <Box key="sprout-band" flexDirection="row" alignItems="center" gap={1}>
          {/* The mascot sums up the wave: walking while agents run, smiling once done, red if one failed. */}
          {Svg ? (
            <Svg source={botSvg(isLive ? 'running' : failed ? 'failed' : 'done')} alt={head} width={BOT_SIZE} height={BOT_SIZE} />
          ) : (
            <Text color={isLive ? RUN : failed ? FAIL : DONE}>{isLive ? '●' : failed ? '✗' : '✓'}</Text>
          )}
          <Text bold>{head}</Text>
          {/* Breathing room around the bar; the button sits at the far right. */}
          <Box marginX={1}>{bar}</Box>
          <Text dimColor>
            {[t.bandRatio(crew.length - running.length, crew.length), cost ? fmtCost(cost) : '', fmtTime(span)]
              .filter(Boolean)
              .join('  ·  ')}
          </Text>
          <Box flexGrow={1} />
          <Button key="sprout-open" label={t.openAgents} plain onPress={() => void openPane($)} />
        </Box>
        {others}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    // Svg is the desktop's alone: narrowing the event narrows the element table.
    const Svg = e.surface === 'desktop' ? $.ui.resolve(e).Svg : null
    // The text field exists on every surface but mobile.
    const Input = e.surface !== 'mobile' ? $.ui.resolve(e).Input : null
    const list = await read($, agents)
    const touched = await read($, files)
    const picked = await read($, filter)
    const chosen = await read($, selected)
    const search = await read($, query)
    const isSearching = await read($, searching)
    const marks = await read($, git)
    const at = await read($, now)

    if (list.length === 0) {
      return (
        <Box flexDirection="column" padding={1}>
          <Box borderStyle="round" borderDimColor paddingX={1} alignSelf="flex-start">
            <Text bold>Agents</Text>
          </Box>
          <Text dimColor>{t.empty}</Text>
        </Box>
      )
    }

    const running = list.filter(a => a.status === 'running').sort((a, b) => b.startedAt - a.startedAt)
    const finished = list.filter(a => a.status !== 'running').sort((a, b) => (b.endedAt ?? 0) - (a.endedAt ?? 0))
    const shown = [...running, ...finished].slice(0, MAX_CARDS)
    const hidden = list.length - shown.length
    const totalCost = list.reduce<number | null>((s, a) => addCost(s, a.costUsd), 0)
    const totalTokens = list.reduce((s, a) => s + a.tokens, 0)
    const totals = totalsPill(totalCost, totalTokens)

    const bar = (a: AgentRun): JSX.Element => {
      const progress = progressOf(a)
      const ctx = contextPct(a)
      const isLive = a.status === 'running'
      // Without reported steps a running bar shows the context fill, in grey.
      const ratio = progress ?? (ctx ?? 0) / 100
      const isFailed = a.status === 'failed'
      const color = !isLive ? (isFailed ? BAR_FAIL : BAR_DONE) : progress === null ? BAR_CTX : BAR_LIVE
      if (Svg) {
        return <Svg source={dotBarSvg(ratio, color, isLive, a.id, CARD_COLS, CARD_ROWS, isFailed ? BAR_FAIL : undefined)} alt={`${Math.round(ratio * 100)}%`} width={dotBarWidth(CARD_COLS)} height={dotBarHeight(CARD_ROWS)} />
      }
      const [lit, unlit] = blockBar(ratio, 14)
      return (
        <Text>
          <Text color={isLive ? RUN : isFailed ? FAIL : DONE}>{lit}</Text>
          <Text dimColor>{unlit}</Text>
        </Text>
      )
    }

    const card = (a: AgentRun): JSX.Element => {
      const isLive = a.status === 'running'
      const ctx = contextPct(a)
      const owner = a.id
      const fileCount = touched.filter(f => f.agents.includes(owner)).length
      const isPicked = picked === owner
      const detail = isLive
        ? a.stepNote || a.lastTool || t.starting
        : a.status === 'failed'
          ? t.failed
          : a.answer
            ? `→ ${a.answer}`
            : t.done
      const steps = a.stepTotal ? t.steps(a.stepDone ?? 0, a.stepTotal) : ''
      const facts = [
        ctx !== null ? `ctx ${ctx}%` : '',
        a.tokens ? `${fmtTokens(a.tokens)} tk` : '',
        fmtCost(a.costUsd),
        fmtTime(elapsed(a, at)),
      ].filter(Boolean)
      return (
        <Box key={`card-${a.id}`} flexDirection="column" marginTop={1}>
          <Box flexDirection="row" alignItems="center" gap={1}>
            {Svg ? (
              <Svg source={botSvg(a.status)} alt={isLive ? t.altRunning : a.status === 'failed' ? t.altFailed : t.altDone} width={BOT_SIZE} height={BOT_SIZE} />
            ) : (
              <Text color={isLive ? RUN : a.status === 'failed' ? FAIL : DONE}>{isLive ? '●' : a.status === 'failed' ? '✗' : '✓'}</Text>
            )}
            <Box flexShrink={1}>
              <Text bold={isLive} wrap="truncate-end">
                {a.description || a.type}
              </Text>
            </Box>
            <Box flexGrow={1} />
            <Text dimColor>
              {modelName(a.model)}
              {a.effort ? ` · ${a.effort}` : ''}
            </Text>
          </Box>
          <Box flexDirection="row" alignItems="center" gap={1} marginLeft={2}>
            {/* The bar keeps its width in a narrow pane; the facts are cut instead. */}
            <Box flexShrink={0} marginRight={1}>
              {bar(a)}
            </Box>
            {/* Steps right after the bar; context, tokens, cost and time at the far right. */}
            {steps && <Text dimColor>{steps}</Text>}
            <Box flexGrow={1} />
            <Text dimColor wrap="truncate-start">
              {facts.join('  ·  ')}
            </Text>
          </Box>
          <Box flexDirection="row" gap={1} marginLeft={2}>
            <Box flexShrink={1}>
              <Text dimColor italic={!isLive} wrap="truncate-end">
                {clip(detail, DETAIL_MAX)}
              </Text>
            </Box>
            <Box flexGrow={1} />
            {/* Only when filtering would narrow the list, or to undo a filter. */}
            {fileCount > 0 && (fileCount < touched.length || isPicked) && (
              <Button
                key={`filter-${a.id}`}
                plain
                dimColor={!isPicked}
                label={t.filesButton(fileCount, isPicked)}
                onPress={() => void update($, filter, f => (f === owner ? null : owner))}
              />
            )}
          </Box>
        </Box>
      )
    }

    // Read / written marks: on the desktop two SVG dots of the same 8px size (ring, disc); glyphs on the terminal.
    const mark = (isWrite: boolean): JSX.Element =>
      Svg ? (
        <Svg source={isWrite ? MARK_WRITE : MARK_READ} alt={isWrite ? t.written : t.read} width={8} height={8} />
      ) : (
        <Text color={isWrite ? WRITE : READ}>{isWrite ? '●' : '○'}</Text>
      )

    const pickedRun = picked ? list.find(a => a.id === picked) : undefined
    const needle = isSearching ? search.trim().toLowerCase() : ''
    const rootKey = root.toLowerCase() + '/'
    const shownFiles = (pickedRun && picked ? touched.filter(f => f.agents.includes(picked)) : touched).filter(f => {
      const path = f.path.toLowerCase()
      return !needle || (path.startsWith(rootKey) ? path.slice(rootKey.length) : path).includes(needle)
    })
    const rows = treeRows(shownFiles, root)
    const visibleRows = rows.slice(0, MAX_FILE_ROWS)

    return (
      <Box flexDirection="column" paddingX={1}>
        <Box flexDirection="row" gap={1} alignItems="center">
          <Box borderStyle="round" borderDimColor paddingX={1}>
            <Text bold>Agents</Text>
          </Box>
          <Box flexShrink={1}>
            <Text dimColor wrap="truncate-end">
              {running.length ? t.runningOf(running.length, list.length) : t.inTotal(list.length)}
            </Text>
          </Box>
          <Box flexGrow={1} />
          {/* Session totals stand out in a faded orange pill (desktop); plain text on the terminal. */}
          {Svg ? (