specialists

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    // The mobile app draws no Input; it keeps /specialists status.
    if (e.requestId !== PANE_ID || e.surface === 'mobile') return next(e)

    const { Box, Text, Button, Input } = await $.ui.resolve(e)
    return (
      <Box flexDirection="column">
        <Text bold>{headerOf(s.fleet)}</Text>
        {s.error ? <Text color="yellow" wrap="truncate-end">status unavailable · {s.error}</Text> : null}
        {s.fleet.activations.length === 0 ? <Text dimColor>No live activations.</Text> : null}
        {fleetBody($, s, { Box, Text, Button, Input }, orderedOf(s.fleet), 'pane', DETAIL_PANE_LINES)}
        <Text dimColor>esc closes · select a row to read its result or feed, or to reply, steer, resume or stop</Text>
      </Box>
    )
  })

function fleetBody($: EngineInterface, s: State, ui: Kit, rows: Activation[], site: string, detailLines: number) {
  const { Box, Text, Button, Input } = ui
  const nowMs = Date.now()
  const selectedRow = rows.find(a => a.activation_id === s.selected)
  const selectedAsk = selectedRow && s.fleet.asks.find(a => a.activation_id === selectedRow.activation_id)

  return (
    <Box flexDirection="column">
      {rows.map(row => {
        const ask = s.fleet.asks.find(a => a.activation_id === row.activation_id)
        const purpose = purposeShort(row.purpose)
        const isSelected = row.activation_id === s.selected
        return (
          <Box key={`${site}:${row.activation_id}`} flexDirection="column">
            <Button
              plain
              key={`row:${row.activation_id}`}
              onPress={() => { s.selected = isSelected ? null : row.activation_id; s.flash = null; $.ui.invalidate('ui.render') }}
            >
              {`${isSelected ? '▾' : ' '} ${markerOf(row, ask, nowMs)} ${row.specialist ?? 'specialist'}:${shortId(row.activation_id)}  ${row.bead_id ?? '—'}${purpose ? `  ${purpose}` : ''}`}
            </Button>
            <Text dimColor wrap="truncate-end">
              {`      ${row.resolved_model ?? '?model'}${row.thinking_level ? ` · ${row.thinking_level}` : ''}  • ${metricsOf(row, ask, nowMs)}`}
            </Text>
          </Box>
        )
      })}

      {selectedRow ? (
        <Box flexDirection="column" paddingLeft={4}>
          <Text dimColor>{selectedRow.activation_id} · {selectedRow.state ?? 'unknown'}</Text>
          {selectedAsk ? (
            <>
              <Text color={ACCENT} wrap="wrap">{selectedAsk.kind ?? 'ask'}: {selectedAsk.body ?? ''}</Text>
              <Input
                key={`reply:${selectedAsk.message_id}`}
                label="reply "
                placeholder="answer the specialist"
                submitLabel="reply"
                autoFocus
                onSubmit={value => { if (value.trim()) void act($, s, 'specialist_reply', { message_id: selectedAsk.message_id, body: value.trim() }, `Answered ${selectedAsk.message_id}.`) }}
              />
            </>
          ) : isActive(selectedRow.state) ? (
            <Input
              key={`steer:${selectedRow.activation_id}`}
              label="steer "
              placeholder="redirect the running specialist"
              submitLabel="steer"
              onSubmit={value => { if (value.trim()) void act($, s, 'specialist_steer', { activation_id: selectedRow.activation_id, message: value.trim() }, `Steered ${selectedRow.activation_id}.`) }}
            />
          ) : (
            <Input
              key={`resume:${selectedRow.activation_id}`}
              label="resume "
              placeholder="next instruction, same session"
              submitLabel="resume"
              onSubmit={value => { if (value.trim()) void act($, s, 'specialist_resume', { activation_id: selectedRow.activation_id, prompt: value.trim() }, `Resumed ${selectedRow.activation_id}.`) }}
            />
          )}
          <Box>
            <Button key={`result:${selectedRow.activation_id}`} hotkey="r" onPress={() => toggleDetail($, s, 'result', selectedRow.activation_id)}>
              {s.detail?.kind === 'result' ? 'hide result' : 'result'}
            </Button>
            <Text> </Text>
            <Button key={`feed:${selectedRow.activation_id}`} hotkey="f" onPress={() => toggleDetail($, s, 'feed', selectedRow.activation_id)}>
              {s.detail?.kind === 'feed' ? 'hide feed' : 'feed'}
            </Button>
            <Text> </Text>
            <Button
              key={`stop:${selectedRow.activation_id}`}
              hotkey="x"
              onPress={() => void act($, s, 'specialist_stop_activation', { activation_id: selectedRow.activation_id, reason: 'operator request' }, `Stopped ${selectedRow.activation_id}.`)}
            >
              stop
            </Button>
          </Box>
          {s.detail && s.detail.id === selectedRow.activation_id ? (
            <Box flexDirection="column">
              {(s.detail.kind === 'feed' ? s.detail.lines.slice(-detailLines) : s.detail.lines.slice(0, detailLines)).map((line, i) => (
                <Text key={`${site}:detail:${i}`} dimColor={s.detail!.kind === 'feed'} wrap="truncate-end">{line}</Text>
              ))}
              {s.detail.lines.length > detailLines ? (
                <Text dimColor italic>{`… ${s.detail.lines.length - detailLines} more lines · /specialists ${s.detail.kind} ${shortId(selectedRow.activation_id)}`}</Text>
              ) : null}
            </Box>
          ) : null}
        </Box>
      ) : null}

      {s.flash ? <Text dimColor>    {s.flash}</Text> : null}
    </Box>
  )
}