todo-list

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Input } = $.ui.resolve(e)
    const list = await read($, tasks)
    const active = await read($, activeId)
    const isAuto = await read($, auto)
    const editing = await read($, editingId)
    const draftText = await read($, draft)

    const open = list.filter(t => !t.done)
    const done = list
      .filter(t => t.done)
      .sort((a, b) => (b.doneAt ?? 0) - (a.doneAt ?? 0))

    // Claude arbeitet an der Liste, wenn gerade eine Aufgabe aktiv ist.
    const busy = active !== null

    // Platz fuer Kopf, Knopfzeile, Eingabe, offene Aufgaben und Rand abziehen.
    const doneRoom = Math.max(1, (e.viewport?.rows ?? 24) - 12 - open.length)
    const hidden = done.length - doneRoom

    return (
      <Box flexDirection="column" gap={1} paddingX={1} paddingY={1}>
        <Box flexDirection="column">
          {busy ? (
            <Text dimColor>{'◆'} Claude arbeitet an der Liste</Text>
          ) : (
            <Text color={GREEN}>{'◆'} Claude ist frei</Text>
          )}
          <Text dimColor>
            {isAuto
              ? 'Automatik an: offene Aufgaben starten von allein.'
              : 'Automatik aus: nichts laeuft von selbst. Mit ▶ startest du eine.'}
          </Text>
        </Box>

        <Box gap={1}>
          <Button
            key="auto"
            label={isAuto ? 'Auto: an' : 'Auto: aus'}
            onPress={() => void toggleAuto($)}
          />
          <Button
            key="clear-done"
            label="Erledigte weg"
            onPress={() => void setTasks($, l => l.filter(t => !t.done))}
          />
        </Box>

        <Box flexDirection="column" gap={1}>
          <Text bold>Deine Warteschlange - {open.length} offen</Text>
          <Input
            key="add"
            placeholder="neue Aufgabe, Enter"
            submitLabel="einreihen"
            autoFocus
            value={draftText}
            onInput={value => void update($, draft, () => value)}
            onSubmit={value => {
              void addTask($, value)
              void update($, draft, () => '')
            }}
          />
          <Box flexDirection="column">
            {open.length === 0 && <Text dimColor>Noch leer.</Text>}
            {open.map(task => {
              const isActive = task.id === active

              if (task.id === editing) {
                return (
                  <Box key={'row-' + task.id} gap={1} alignItems="flex-start">
                    <Input
                      key={'edit-' + task.id}
                      value={task.text}
                      submitLabel="speichern"
                      autoFocus
                      onSubmit={value => void saveEdit($, task.id, value)}
                    />
                    <Button
                      key={'cancel-' + task.id}
                      label="Abbrechen"
                      onPress={() => void update($, editingId, () => null)}
                    />
                  </Box>
                )
              }

              return (
                <Box key={'row-' + task.id} gap={1} alignItems="flex-start">
                  <Button
                    key={'chk-' + task.id}
                    label={'☐'}
                    onPress={() => void toggleDone($, task.id)}
                  />
                  <Button
                    key={'go-' + task.id}
                    label={'▶'}
                    onPress={() => void startTask($, task)}
                  />
                  <Button
                    key={'edit-btn-' + task.id}
                    label={'✎'}
                    onPress={() => void update($, editingId, () => task.id)}
                  />
                  <Button
                    key={'del-' + task.id}
                    label={'\u{1F5D1}'}
                    onPress={() => {
                      void setTasks($, l => l.filter(t => t.id !== task.id))
                      if (active === task.id) void update($, activeId, () => null)
                      if (editing === task.id)
                        void update($, editingId, () => null)
                    }}
                  />
                  <Text bold={isActive} color={isActive ? GREEN : undefined}>
                    {task.text}
                  </Text>
                </Box>
              )
            })}
          </Box>
        </Box>

        {done.length > 0 && (
          <Box flexDirection="column" gap={1}>
            <Text bold>Erledigt - {done.length}</Text>
            <Box flexDirection="column">
              {done.slice(0, doneRoom).map(task => (
                <Box key={'done-' + task.id} gap={1} alignItems="flex-start">
                  <Button
                    key={'undone-' + task.id}
                    label={'☑'}
                    onPress={() => void toggleDone($, task.id)}
                  />
                  <Text dimColor strikethrough>
                    {task.text}
                  </Text>
                </Box>
              ))}
              {hidden > 0 && <Text dimColor>... und {hidden} weitere</Text>}
            </Box>
          </Box>
        )}
      </Box>
    )
  })