jot

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const list = await read($, notes)
    const editId = await read($, editingId)
    const model: PaneModel = {
      list,
      focused: await read($, focusedId),
      editing: list.find(note => note.id === editId),
      gen: await read($, draftGen),
      listGen: await read($, listGen),
      ring: await read($, ringOn),
      cols: e.props.bodyColumns,
      bodyRows: e.props.scroll.bodyRows,
      isFocused: e.props.isFocused,
      showKeys: await read($, showKeys),
      now: await $.clock.now(),
      surface: e.surface,
    }
    const kit = $.ui.resolve(e)
    lastModel = model

    return drawPane(kit, model, {
      press: key => {
        void (async () => {
          // A key pressed from the key list does its job and closes the list.
          if (key !== 'keys') await update($, showKeys, () => false)
          const note = await target($)
          await apply($, await runAction($, key, { note, list: await read($, notes), surface: e.surface }))
        })()
      },
      submit: value => {
        void submitDraft($, value).then(outcome => apply($, outcome))
      },
      paste: note => {
        void paste($, note.text, 'insert').then(outcome => apply($, outcome))
      },
      order: (keys, start) => {
        reachable = keys
        const scrolled = windowStart !== null && start !== windowStart
        windowStart = start
        const selected = keys.find(key => idOfRowKey(key) === model.focused)
        if (scrolled && e.props.isFocused && selected !== undefined && model.ring?.startsWith('note-')) {
          $.clock.after(0, () => {
            void (async () => {
              await update($, ringOn, () => selected)
              await focusKey($, selected)
            })()
          })
        }
      },
    })
  })

export function drawPane(kit: Kit, model: PaneModel, on: PaneHandlers) {
  const { Box, Text, Button, Markdown, Input } = kit
  const { list, focused, editing, gen, ring, cols, isFocused } = model
  // With no notes the ring starts on the draft field, so treat that as typing too.
  const isTyping = ring === null ? list.length === 0 : ring.startsWith('draft-')
  const armed = isFocused && !isTyping && model.surface !== 'mobile'
  const hot = (key: string) => (armed ? key : undefined)
  const focusedNote = list.find(note => note.id === focused) ?? list[0]

  // The engine's ring keeps a place in the drawing, not a key, so everything it
  // can reach sits where a change of selection or focus never moves it: the
  // field, then the notes, then the key rows. Nothing focusable above the notes.
  const reachable: string[] = []
  const button = (spec: KeySpec) => (
    <Button
      key={spec.key}
      label={labelOf(spec, focusedNote)}
      plain
      dimColor
      hotkey={hot(spec.hotkey)}
      onPress={() => on.press(spec.key)}
    />
  )

  // Where the keys are, said first: the one thing v0.1 never showed.
  const status = isFocused ? (
    <Box key="status" flexDirection="row" justifyContent="space-between">
      <Text>
        <Text color="claude">●</Text> keys here
      </Text>
      <Text dimColor wrap="truncate">↑↓ move  ⏎ paste</Text>
    </Box>
  ) : (
    <Text key="status" dimColor wrap="truncate">
      ○ ctrl+x tab or /notes to use
    </Text>
  )

  // Mobile draws no Input: its pane lists and pastes, and /note adds.
  const draft =
    Input === undefined || !hasDraft(model) ? null : (
      <Input
        key={`draft-${gen}`}
        placeholder={editing ? 'Edit the note (empty cancels)' : 'New note… Enter saves'}
        value={editing?.text ?? ''}
        submitLabel={editing ? 'update' : 'save'}
        autoFocus={list.length === 0 ? true : undefined}
        onSubmit={(value: string) => on.submit(value)}
      />
    )
  if (draft !== null) reachable.push(`draft-${gen}`)

  const { keyRows, room } = frame(model)
  const keyRowsDrawn = keyRows.map((row, i) => (
    <Box key={`keys-${i}`} flexDirection="row" gap={2}>
      {row.map(button)}
    </Box>
  ))
  const keyRowKeys = keyRows.flat().map(spec => spec.key)

  if (model.showKeys || list.length === 0) {
    on.order([...reachable, ...keyRowKeys], 0)
    const lines = [
      ['↑ ↓', 'Move between notes'],
      ['Enter', 'Paste the note at the cursor'],
      ['1–9', 'Paste note 1 to 9'],
      ...KEYS.map(spec => [spec.hotkey, spec.help]),
    ]

    return (
      <Box flexDirection="column">
        {status}
        {draft}
        {list.length === 0 && !model.showKeys ? (
          <Text dimColor wrap="wrap">
            No notes yet. Type one above and press Enter, or run /note &lt;text&gt;.
          </Text>
        ) : (
          lines.slice(0, Math.max(0, room - 1)).map(([key, help]) => (
            <Text key={`help-${key}`} wrap="truncate">
              <Text color="claude">{(key ?? '').padEnd(6)}</Text>
              {help}
            </Text>
          ))
        )}
        {keyRowsDrawn}
      </Box>
    )
  }

  const layout = layoutRows(list, focusedNote?.id ?? null, room, previewBudget(model, focusedNote?.id ?? null))
  const window = windowTag(model, layout.start)
  const rows: RenderChildren[] = []
  if (layout.above > 0) rows.push(<Text key="above" dimColor>{'  '}↑ {layout.above} more</Text>)
  for (let i = layout.start; i < layout.end; i++) {
    const note = list[i]!
    const prev = i > layout.start ? list[i - 1] : undefined
    if (layout.rules && note.isPinned && prev?.isPinned !== true) rows.push(rule(Text, 'pinned', cols, 'rule-pinned'))
    if (layout.rules && !note.isPinned && prev?.isPinned === true) rows.push(rule(Text, '', cols, 'rule-rest'))

    const isSelected = note.id === focusedNote?.id
    const age = ageLabel(model.now, note.createdAt)
    const digit = i < 9 ? 3 : 0
    const key = rowKey(note.id, window)
    reachable.push(key)
    rows.push(
      <Box key={`row-${note.id}`} flexDirection="row">
        <Box width={GUTTER} flexShrink={0}>
          {isSelected ? <Text color={isFocused ? 'claude' : 'inactive'}>{isFocused ? '▌' : '▏'}</Text> : <Text> </Text>}
        </Box>
        <Box flexGrow={1}>
          <Button
            key={key}
            label={labelFor(note, cols - GUTTER - digit - age.length - 2)}
            plain
            hotkey={i < 9 ? hot(String(i + 1)) : undefined}
            autoFocus={isSelected ? true : undefined}
            onPress={() => on.paste(note)}
          />
        </Box>
        <Text color="subtle"> {age}</Text>
      </Box>,
    )

    // The lifted card: the rest of the note, clipped to its budget. Not
    // focusable, so it moves nothing the ring keeps a place on.
    const body = isSelected && isFocused ? previewText(note.text) : ''
    if (body !== '' && layout.preview > 0) {
      rows.push(
        <Box
          key="preview"
          height={layout.preview}
          overflow="hidden"
          marginLeft={GUTTER}
          borderStyle="quote"
          borderColor="claude"
          paddingLeft={1}
        >
          <Markdown text={body} />
        </Box>,
      )
    }
  }
  if (layout.below > 0) rows.push(<Text key="below" dimColor>{'  '}↓ {layout.below} more</Text>)
  on.order([...reachable, ...keyRowKeys], layout.start)

  return (
    <Box flexDirection="column">
      {status}
      {draft}
      {rows}
      {keyRowsDrawn}
    </Box>
  )
}