handily-task-pane

  on('ui.render', { component: 'Pane', requestId: PANE_ID }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const Input = e.surface === 'mobile' ? undefined : $.ui.resolve(e).Input
    const { bodyColumns } = e.props
    const elements = { Box, Text, Button, Input, bodyColumns }
    const work = await workOf($)
    startRedraw($, redraw)
    return drawPane(elements, hostOf($), uiOf($), work)
  })

export async function drawPane(
  elements: PaneElements,
  host: TaskHost,
  ui: PaneUi,
  work: PaneWork,
): Promise<RenderElement> {
  const { Box, Text } = elements
  const act = actor(ui)
  const list = await readList(host)
  const hasList = list.tasks.length > 0
  const layout = rowLayout(host, await host.expanded(), act)
  const warning = drawPlanWarning(elements, ui, work, hasList, act)
  const body = hasList
    ? [...drawTasks(elements, host, list, work, act, layout), ...warning]
    : [
        ...drawNow(elements, work, layout),
        ...warning,
        ...drawTracker(elements, host, await trackerView(host), act, layout),
      ]
  const header = Box({
    flexDirection: 'row',
    children: [
      Text({ bold: true, children: 'Tasks' }),
      Text({ dimColor: true, children: `  ${summaryText(list, work)}` }),
    ],
  })
  return Box({
    flexDirection: 'column',
    children: [
      header,
      ...body,
      ...drawAgents(elements, work.agents, layout),
      Text({ children: ' ' }),
      drawFooter(elements, host, act),
    ],
  })
}

function drawAgents(
  elements: PaneElements,
  agents: readonly AgentRow[],
  layout: RowLayout,
): RenderElement[] {
  const { Box, Text } = elements
  if (agents.length === 0) return []
  const nameWidth = Math.min(
    column(agents.map((agent) => escaped(agent.name))),
    AGENT_NAME_COLUMNS_AT_MOST,
  )
  const planWidth = column(
    agents.map((agent) =>
      agent.plan === null ? '' : `${String(agent.plan.done)} of ${String(agent.plan.total)}`,
    ),
  )
  return [
    Box({
      key: 'agents-rule',
      children: [Text({ dimColor: true, children: '─'.repeat(elements.bodyColumns) })],
    }),
    Box({
      key: 'agents',
      flexDirection: 'row',
      children: [
        Text({ bold: true, children: 'Agents' }),
        Text({ dimColor: true, children: `  ${String(agents.length)} running` }),
      ],
    }),
    ...agents.map((agent) => drawRow(elements, agentRow(agent, nameWidth, planWidth), layout)),
  ]
}

function drawRow(elements: PaneElements, row: PaneRow, layout: RowLayout): RenderElement {
  const { Box, Text, Button } = elements
  const leadWidth = cellsWidth(row.cells)
  const room = Math.max(
    elements.bodyColumns - leadWidth - asideWidth(row.aside) - actionWidth(row.action),
    0,
  )
  const isCut = displayWidth(row.title) > room
  const shown = isCut ? cutToWidth(row.title, room - displayWidth(MORE_LABEL)) : row.title
  const line = Box({
    key: `row:${row.key}`,
    flexDirection: 'row',
    children: [
      ...row.cells.map((cell) =>
        Box({
          width: displayWidth(cell.text),
          flexShrink: 0,
          children: [Text({ ...cell.style, children: cell.text })],
        }),
      ),
      Box({
        flexDirection: 'row',
        flexGrow: 1,
        flexShrink: 1,
        children: drawTitle(elements, row, shown, isCut, layout),
      }),
      row.aside
        ? Box({
            flexShrink: 0,
            marginLeft: BUTTON_GAP,
            children: [Text({ ...row.aside.style, children: row.aside.text })],
          })
        : null,
      row.action
        ? Box({
            flexShrink: 0,
            marginLeft: BUTTON_GAP,
            children: [
              Button({
                key: row.action.key,
                label: row.action.label,
                onPress: row.action.onPress,
              }),
            ],
          })
        : null,
    ],
  })
  const opened = layout.expanded.has(row.key) ? drawOpened(elements, row, isCut, leadWidth) : null
  if (opened === null) return line
  return Box({ flexDirection: 'column', children: [line, opened] })
}

function drawTitle(
  elements: PaneElements,
  row: PaneRow,
  shown: string,
  isCut: boolean,
  layout: RowLayout,
): RenderElement[] {
  const { Text, Button } = elements
  const title = Text({ ...row.titleStyle, wrap: 'truncate-end', children: shown })
  const toggle = () => {
    layout.toggle(row.key)
  }
  switch (row.opening.kind) {
    case 'none':
      return [isCut ? Text({ ...row.titleStyle, children: `${shown}${MORE_LABEL}` }) : title]
    case 'cut':
      return isCut
        ? [
            title,
            Button({ key: `more:${row.key}`, label: MORE_LABEL, plain: true, onPress: toggle }),
          ]
        : [title]
    case 'details':
      return [
        Button({
          key: `open:${row.key}`,
          plain: true,
          onPress: toggle,
          children: [title, isCut ? Text({ ...row.titleStyle, children: MORE_LABEL }) : null],
        }),
      ]
  }
}

function drawFooter(elements: PaneElements, host: TaskHost, act: Act): RenderElement {
  const { Text, Input } = elements
  return Input
    ? Input({
        key: 'add',
        placeholder: 'Add a task',
        submitLabel: 'Add',
        onSubmit: (value) => {
          act(() => personAdd(host, value.trim()))
        },
      })
    : Text({ dimColor: true, children: 'Add tasks with /task add <text>.' })
}