human-tasks

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text, Button, Code, Markdown } = ui
    // Not every surface can draw a text input; those fall back to buttons only
    const Input = 'Input' in ui ? ui.Input : undefined
    const { tasks } = await read($, board)
    const replying = await read($, replyingId)
    const currentMode = await read($, mode)
    const currentTab = await read($, tab)
    const expanded = await read($, expandedIds)
    const open = tasks.filter((t) => t.status === 'open')
    // Newest first
    const finished = tasks.filter(isFinished).reverse()
    const ruleWidth = Math.max(10, e.props.bodyColumns)
    // A run of box-drawing characters renders as two lines on the desktop, so it draws a markdown rule
    const rule = (key: string) =>
      e.surface === 'terminal' ? (
        <Text key={key} dimColor>
          {'─'.repeat(ruleWidth)}
        </Text>
      ) : (
        <Markdown key={key} text="---" dimColor />
      )

    const tabButton = (id: Tab, name: string, count: number) => (
      <Button
        key={`tab-${id}`}
        label={`${currentTab === id ? '●' : '○'} ${name} (${count})`}
        onPress={() => update($, tab, () => id)}
      />
    )

    const modeButton =
      currentMode !== 'unset' ? (
        <Button
          key="mode-toggle"
          label={currentMode === 'auto' ? 'Auto: on' : 'Auto: off'}
          onPress={() => setMode($, currentMode === 'auto' ? 'manual' : 'auto')}
        />
      ) : null

    const tabs = (
      <Box key="tabs" flexDirection="column">
        <Box flexDirection="row" justifyContent="space-between">
          <Box flexDirection="row" columnGap={1}>
            {tabButton('open', 'Open', open.length)}
            {tabButton('completed', 'Completed', finished.length)}
          </Box>
          {modeButton}
        </Box>
        {rule('tabs-rule')}
      </Box>
    )

    const onboarding = currentMode === 'unset' && (
      <Box key="onboarding" flexDirection="column" marginBottom={1}>
        <Text bold>Let Claude use this pane on its own?</Text>
        <Text wrap="wrap" dimColor>
          Claude would post anything only you can do here, and check tasks off when you confirm them in chat.
        </Text>
        <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
          <Button key="mode-auto" label="Yes, automatically" onPress={() => setMode($, 'auto')} />
          <Button key="mode-manual" label="Only when I ask" onPress={() => setMode($, 'manual')} />
        </Box>
      </Box>
    )

    if (currentTab === 'completed') {
      return (
        <Box flexDirection="column">
          {tabs}
          {finished.length === 0 && <Text dimColor>Nothing completed yet.</Text>}
          {finished.map((t, idx) => {
            const isOpen = expanded.includes(t.id)
            return (
              <Box key={`fin-${t.id}`} flexDirection="column">
                {idx > 0 && rule(`fin-rule-${t.id}`)}
                <Box flexDirection="row">
                  <Button
                    key={`toggle-${t.id}`}
                    label={`${isOpen ? '▾' : '▸'} ✓ #${t.id}  ${t.title}`}
                    onPress={() =>
                      update($, expandedIds, (ids) => (ids.includes(t.id) ? ids.filter((i) => i !== t.id) : [...ids, t.id]))
                    }
                  />
                </Box>
                {isOpen && (
                  <Box flexDirection="column" paddingLeft={2}>
                    {t.steps.map((st, i) => (
                      <Box key={`fstep-${t.id}-${i}`} flexDirection="column">
                        {st.text && <Text dimColor wrap="wrap">{`${i + 1}. ${st.text}`}</Text>}
                        {st.command && <Code source={st.command} language="sh" />}
                      </Box>
                    ))}
                    {t.expect && <Text dimColor wrap="wrap">{`Expect: ${t.expect}`}</Text>}
                    <Text wrap="wrap">{t.answer ? `${t.status}: ${t.answer}` : t.status}</Text>
                  </Box>
                )}
              </Box>
            )
          })}
          {finished.length > 0 && (
            <Box key="clear" marginTop={1}>
              <Button label={`Clear completed (${finished.length})`} onPress={() => clearCompleted($)} />
            </Box>
          )}
        </Box>
      )
    }

    return (
      <Box flexDirection="column">
        {tabs}
        {onboarding}
        {open.length === 0 && <Text dimColor>Nothing for you to do right now.</Text>}
        {open.map((t, idx) => (
          <Box key={`task-${t.id}`} flexDirection="column">
            {idx > 0 && rule(`rule-${t.id}`)}
            <Text bold>{`#${t.id}  ${t.title}`}</Text>
            {t.steps.map((s, i) => (
              <Box key={`step-${i}`} flexDirection="column">
                {s.text && <Text wrap="wrap">{`${i + 1}. ${s.text}`}</Text>}
                {s.command && e.surface === 'terminal' && (
                  <Button
                    key={`copy-${t.id}-${i}`}
                    label="Copy"
                    onPress={async (press) => {
                      // Selecting wrapped text copies the soft wraps as newlines; this copies the raw command
                      const { isCopied } = await $.ui.copy({ text: s.command, surface: press.surface })
                      $.ui.toast(isCopied ? 'Command copied' : 'Could not copy the command')
                    }}
                  />
                )}
                {s.command && <Code source={s.command} language="sh" />}
              </Box>
            ))}
            {t.expect && (
              <Text dimColor wrap="wrap">
                {`Expect: ${t.expect}`}
              </Text>
            )}
            <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
              <Button
                label="Done"
                onPress={() =>
                  resolveTask($, t.id, 'done', '', (r) => `The user ticked off task ${label(r)} as done.`)
                }
              />
              {t.options.map((opt, j) => (
                <Button
                  key={`opt-${j}`}
                  label={opt}
                  onPress={() =>
                    resolveTask($, t.id, 'chosen', opt, (r) => `For task ${label(r)} the user chose: "${opt}".`)
                  }
                />
              ))}
              {Input && (
                <Button
                  label={replying === t.id ? 'Cancel reply' : 'Reply'}