agent-bus

  on(
    'ui.render',
    { component: 'Pane', requestId: 'bus' },
    async ($, e, next) => {
      if (!host) return next(e)

      const { Box, Text, Button, Markdown, Input, Select } = (await $.ui.resolve(
        e,
      )) as Ui

      const isDocked = e.props.placement === 'dock'

      const [snapshot, selected, detail, armed, composer] = await Promise.all([
        read($, snapshotAtom),
        read($, selectedAtom),
        read($, detailAtom),
        read($, armedAtom),
        read($, composerAtom),
      ])

      return paneView(
        {
          ui: { Box, Text, Button, Markdown, Input, Select },
          actions: actionsOf(host),
          columns: Math.max(1, e.props.bodyColumns - (isDocked ? 1 : 0)),
          home,
          canCompose: e.surface !== 'mobile',
        },
        { snapshot, selected, detail, armed, composer, isDocked },
      )
    },
  )

export function paneView(kit: Kit, model: PaneModel): RenderElement {
  const { Box } = kit.ui
  const snapshot = model.snapshot

  const frame = (children: RenderElement[]): RenderElement => (
    <Box
      flexDirection="column"
      paddingTop={model.isDocked ? 1 : 0}
      paddingRight={model.isDocked ? 1 : 0}
    >
      {children}
    </Box>
  )

  if (!snapshot) {
    return frame([dimNote(kit, 'Reading the bus…')])
  }

  if (snapshot.error) {
    return frame([dimNote(kit, snapshot.error)])
  }

  const hosts = snapshot.hosts.map(host => host.name)
  const isTagged = hosts.length > 1
  const isComposing = model.isDocked && model.composer?.isOpen === true
  const isComposable = model.isDocked && kit.canCompose && !isComposing

  if (snapshot.tasks.length === 0) {
    return frame(
      present([
        headerView(kit, snapshot, isComposable),
        <Box height={1} />,
        isComposing && model.composer
          ? composerView(kit, model.composer, hosts)
          : dimNote(kit, 'No bus tasks yet.'),
      ]),
    )
  }

  const selected = selectedOf(snapshot, model.selected)
  const active = snapshot.tasks.filter(isActive)

  const recent = snapshot.tasks
    .filter(task => !isActive(task))
    .slice(0, model.isDocked ? RECENT_ROWS_DOCKED : RECENT_ROWS_INLINE)

  const rowsOf = (tasks: BusTask[]): RenderElement[] =>
    tasks.map(task =>
      taskRow(
        kit,
        task,
        snapshot.now,
        model.isDocked && task === selected,
        isTagged,
      ),
    )

  return frame(
    present([
      headerView(kit, snapshot, isComposable),
      <Box height={1} />,
      ...rowsOf(active),
      active.length > 0 && recent.length > 0 ? <Box height={1} /> : null,
      recent.length > 0 ? dimNote(kit, 'Recent') : null,
      ...rowsOf(recent),
      ...(isComposing && model.composer
        ? [
            <Box height={1} />,
            divider(kit),
            composerView(kit, model.composer, hosts),
          ]
        : model.isDocked && selected
          ? [
              <Box height={1} />,
              divider(kit),
              detailView(kit, model, selected),
            ]
          : []),
    ]),
  )
}

function headerView(
  kit: Kit,
  snapshot: BusSnapshot,
  isComposable: boolean,
): RenderElement {
  const { Box, Text, Button } = kit.ui
  const tasks = snapshot.tasks
  const running = tasks.filter(task => task.state === 'running').length
  const queued = tasks.filter(task => task.state === 'queued').length
  const last = tasks.find(task => !isActive(task))

  const [lead, aside] =
    running > 0
      ? [`${running} running`, queued > 0 ? ` · ${queued} queued` : '']
      : queued > 0
        ? [`${queued} queued`, '']
        : [
            'Idle',
            last?.finished_at
              ? ` · last finished ${spanOf(snapshot.now - last.finished_at)} ago`
              : '',
          ]

  const unreachable = snapshot.hosts.filter(host => host.error !== null)

  const line = (
    <Box flexDirection="row" height={1}>
      <Text wrap="truncate-end">
        <Text bold>{lead}</Text>
        <Text dimColor>{aside}</Text>
      </Text>
      <Box flexGrow={1} />
      {isComposable ? (
        <Button key="compose" plain dimColor hotkey="n" onPress={kit.actions.compose}>
          New task
        </Button>
      ) : null}
    </Box>
  )

  return unreachable.length === 0 ? (
    line
  ) : (
    <Box flexDirection="column">
      {line}
      {unreachable.map(host => (
        <Text color="warning" wrap="truncate-end">
          {`Couldn't reach ${host.name}`}
        </Text>
      ))}
    </Box>
  )
}

function composerView(
  kit: Kit,
  composer: BusComposer,
  hosts: string[],
): RenderElement {
  const { Box, Text, Button, Input, Select } = kit.ui
  const lane = LANES.find(one => one.value === composer.lane)

  const hint = composer.isSending
    ? 'Dispatching…'
    : `Enter dispatches to ${lane?.value ?? composer.lane}, ${composer.mode}` +
      (hosts.length > 1 || composer.host !== LOCAL ? `, on ${composer.host}` : '')

  return (
    <Box flexDirection="column">
      <Box flexDirection="row" height={1}>
        <Text bold>New task</Text>
        <Box flexGrow={1} />
        <Button key="discard" role="dismiss" onPress={kit.actions.discard}>
          Discard
        </Button>
      </Box>
      <Box height={1} />
      {hosts.length > 1 ? (
        <Select
          key="host"
          label="Machine "
          value={composer.host}
          options={hosts.map(host => ({
            value: host,
            label: host === LOCAL ? 'this machine' : host,
          }))}
          onSelect={kit.actions.setHost}
        />
      ) : null}
      <Select
        key="lane"
        label="Lane "
        value={composer.lane}
        options={LANES.map(({ value, label }) => ({ value, label }))}
        onSelect={kit.actions.setLane}
      />
      <Select
        key="mode"
        label="Mode "
        value={composer.mode}
        options={MODES.map(({ value, label }) => ({ value, label }))}
        onSelect={kit.actions.setMode}
      />
      <Input
        key="cwd"
        label="Folder "
        value={
          composer.host === LOCAL
            ? homeFolded(composer.cwd, kit.home)
            : composer.cwd
        }
        onInput={kit.actions.setCwd}
        onSubmit={kit.actions.setCwd}
      />
      <Box height={1} />
      <Input
        key="prompt"
        label="Prompt "
        placeholder="What should the worker do?"
        submitLabel="dispatch"
        value={composer.prompt}
        autoFocus
        onInput={kit.actions.setPrompt}
        onSubmit={kit.actions.dispatch}
      />
      <Box height={1} />
      {dimNote(kit, hint)}
    </Box>
  )
}

function dimNote(kit: Kit, text: string): RenderElement {
  const { Text } = kit.ui

  return (
    <Text dimColor wrap="truncate-end">
      {text}
    </Text>
  )
}

function divider(kit: Kit): RenderElement {
  const { Text } = kit.ui

  return (
    <Text dimColor wrap="truncate-end">
      {'─'.repeat(Math.max(1, kit.columns))}
    </Text>
  )
}