handily-board

  on('ui.render', { component: 'Pane', requestId: TASKS_PANE.id }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const Input = e.surface === 'mobile' ? undefined : $.ui.resolve(e).Input
    const { bodyColumns, placement } = e.props
    const elements = { Box, Text, Button, Input, bodyColumns, isInline: placement === 'inline' }
    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),
        work.agents.length === 0 ? Text({ dimColor: true, children: 'No agents yet.' }) : null,
      ]
  const header = Box({
    flexDirection: 'row',
    children: [
      Text({ bold: true, children: TASKS_TITLE }),
      Text({
        dimColor: true,
        children: fitted(
          `  ${summaryText(list, work)}`,
          elements.bodyColumns - displayWidth(TASKS_TITLE),
        ),
      }),
    ],
  })
  return Box({
    flexDirection: 'column',
    children: [
      header,
      ...body,
      ...drawAgents(elements, work.agents, layout, work.now, agentsOpener(ui)),
      Text({ children: ' ' }),
      drawFooter(elements, host, act),
    ],
  })
}

function drawTasks(
  elements: PaneElements,
  host: TaskHost,
  list: BoardList,
  work: PaneWork,
  act: Act,
  layout: RowLayout,
): RenderElement[] {
  const { Button } = elements
  const running = list.tasks.filter((task) => task.status === 'in_progress')
  const pending = list.tasks.filter((task) => task.status === 'pending')
  const done = list.tasks.filter((task) => task.status === 'completed')
  const isDoneShown = layout.expanded.has(DONE_GROUP)
  const numberWidth = column(list.tasks.map((task) => String(task.id)))
  const rowOf = (task: BoardTask, detail?: Cell) =>
    taskRow(host, task, numberWidth, work, act, detail)
  const draw = (task: BoardTask) => drawRow(elements, rowOf(task), layout)
  const first = running[0]
  const doneCountText = String(done.length)
  const drawFirst = (task: BoardTask) => {
    if (elements.isInline)
      return drawRow(elements, rowOf(task, inlineCallDetail(task, work)), layout)
    const indent = cellsWidth(taskCells(task, numberWidth))
    const lastCall = drawRow(elements, lastCallRow(task, indent, work), layout)
    return drawRow(elements, rowOf(task), layout, lastCall)
  }
  return [
    running.length === 0 ? nowRow(elements, work, layout) : null,
    ...running.map((task) => (task === first ? drawFirst(task) : draw(task))),
    ...pending.map(draw),
    done.length > 0
      ? Button({
          key: 'done',
          label: isDoneShown ? `hide ${doneCountText} done` : `+${doneCountText} done`,
          onPress: () => {
            layout.toggle(DONE_GROUP)
          },
        })
      : null,
    ...(isDoneShown ? done.map(draw) : []),
  ].filter((element) => element !== null)
}

function drawPlanWarning(
  elements: PaneElements,
  ui: PaneUi,
  work: PaneWork,
  hasList: boolean,
  act: Act,
): RenderElement[] {
  const { Box, Text, Button } = elements
  const lag = planLag(work.activity)
  if (lag === undefined) return []
  const ask = () => {
    act(async () => {
      const filled = await ui.fillPrompt(PLAN_REQUEST)
      if (filled.isFilled) return undefined
      const why = filled.refusal === undefined ? '' : ` (${filled.refusal})`
      return `The prompt box did not take the plan request${why}. Ask Claude for a plan in your next prompt.`
    })
  }
  return [
    Box({
      key: 'plan-warning',
      children: [
        Text({
          color: 'warning',
          children: fitted(warningText(lag, hasList), elements.bodyColumns),
        }),
      ],
    }),
    Button({ key: 'ask-plan', label: 'Ask Claude for a plan', onPress: ask }),
  ]
}

function drawNow(elements: PaneElements, work: PaneWork, layout: RowLayout): RenderElement[] {
  const { Box, Text } = elements
  const { activity } = work
  const now = nowRow(elements, work, layout)
  if (now === null) return []
  const counts = activity.perTool
    .map((count) => `${escaped(count.tool)} ${String(count.calls)}`)
    .join(' · ')
  const indent = displayWidth(`${SIGNALS.doing.mark} `)
  return [
    now,
    Box({
      key: 'tool-counts',
      paddingLeft: indent,
      children: [Text({ dimColor: true, children: fitted(counts, elements.bodyColumns - indent) })],
    }),
  ]
}

function drawTracker(
  elements: PaneElements,
  host: TaskHost,
  view: TrackerView,
  act: Act,
  layout: RowLayout,
): RenderElement[] {
  const { Box, Text, Button } = elements
  if (view.kind === 'lines') {
    return view.lines.map((line) =>
      Text({ color: lineColor(line.tone), dimColor: line.tone === 'dim', children: line.text }),
    )
  }
  if (view.items.length === 0) {
    return [Text({ dimColor: true, children: `Open in tracker: ${view.label} · no open items` })]
  }
  const addItems = (items: readonly WorkItem[]) => {
    act(async () => {
      const { added, existing, refusal, noteRefusal } = await addItemsAsTasks(host, items)
      const parts = [`Added ${String(added.length)} as tasks`]
      if (existing.length > 0) parts.push(`${String(existing.length)} already were`)
      if (refusal !== undefined) parts.push(`not added: ${withoutFinalPeriod(refusal)}`)
      if (noteRefusal !== undefined) {
        parts.push(`Claude was not told: ${withoutFinalPeriod(noteRefusal)}`)
      }
      return `${parts.join('; ')}.`
    })
  }
  const openCount = String(view.items.length)
  const isAllShown = layout.expanded.has(ITEMS_GROUP)
  const items = isAllShown ? view.items : view.items.slice(0, OPEN_ITEMS_SHOWN)
  const count = String(items.length)
  const priorityWidth = column(items.map(priorityText))
  const idWidth = column(items.map((item) => escaped(item.id)))
  const rows = items.map((item) =>
    drawRow(
      elements,
      {
        key: `item:${item.id}`,
        cells: [
          { text: padToWidth(priorityText(item), priorityWidth), style: { dimColor: true } },
          { text: padToWidth(escaped(item.id), idWidth), style: {} },
        ],
        title: escaped(item.title),
        titleStyle: {},
        action: {
          key: `add:${item.id}`,
          label: 'add',
          onPress: () => {
            addItems([item])
          },
        },
        opening: { kind: 'cut' },
      },
      layout,
    ),
  )
  const isFolding = view.items.length > OPEN_ITEMS_SHOWN
  const foldLabel = isAllShown ? `first ${String(OPEN_ITEMS_SHOWN)}` : `all ${openCount} open`
  const addLabel = items.length === 1 ? 'Add 1 as a task' : `Add ${count} as tasks`
  const labels = isFolding ? [foldLabel, addLabel] : [addLabel]
  const buttonsWidth =
    labels.reduce((sum, label) => sum + displayWidth(label) + BUTTON_CHROME, 0) +
    (labels.length - 1) * TRACKER_BUTTON_GAP
  const isOneRow = buttonsWidth <= elements.bodyColumns
  const buttons = [
    isFolding
      ? Button({
          key: 'all-items',
          label: foldLabel,
          onPress: () => {
            layout.toggle(ITEMS_GROUP)
          },
        })
      : null,
    Button({
      key: 'add-all',
      label: addLabel,
      onPress: () => {
        addItems(items)
      },
    }),
  ].filter((button) => button !== null)
  return [
    Text({ dimColor: true, children: `Open in tracker: ${view.label} · ${openCount} open` }),
    ...rows,
    Box({
      key: 'item-actions',
      flexDirection: isOneRow ? 'row' : 'column',
      children: buttons.map((button, index) =>
        Box({
          flexShrink: 0,
          marginLeft: isOneRow && index > 0 ? TRACKER_BUTTON_GAP : 0,
          children: [button],
        }),
      ),
    }),
  ]
}