instantnotes

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Button, Markdown, Text } = elements
    const Field = 'Input' in elements ? elements.Input : undefined
    const width = Math.max(24, e.props.bodyColumns)
    const isNarrow = width < NARROW
    const rule = <Text dimColor>{'─'.repeat(width)}</Text>
    // Drawn from what this process kept after a /clear; the host gets it back off the render.
    if (!(await read($, seeded))) $.clock.after(0, () => void reseed($).catch(() => {}))
    const snap = await read($, snapshot)
    const { note: opened, problem: trouble, isBusy: busy, source: from } = snap
    const now = await $.clock.now()

    const status = busy ? (
      <Text color="yellow">{'◌ Asking InstantNotes…'}</Text>
    ) : trouble !== null ? (
      <Box flexDirection="column">
        <Text color="red" wrap="wrap">{trouble.message}</Text>
        {trouble.steps.map((step, index) => (
          <Text key={`step-${index}`} wrap="wrap">{`${index + 1}. ${step}`}</Text>
        ))}
      </Box>
    ) : null

    if (opened !== null) {
      const { text, cut } = clipBody(opened.body, MARKDOWN_MAX)
      const meta = [
        opened.spaces.length ? opened.spaces.join(', ') : '',
        opened.tags.length ? opened.tags.map(tag => `#${tag}`).join(' ') : '',
        ago(opened.updatedAt, now) ? `updated ${ago(opened.updatedAt, now)}` : '',
      ].filter(Boolean)

      return (
        <Box flexDirection="column">
          <Box gap={1} flexWrap="wrap">
            <Button key="back" plain hotkey="b" label="‹ notes" onPress={() => write($, 'note', () => null)} />
            <Button
              key="ask"
              plain
              hotkey="u"
              label={isNarrow ? 'mention' : 'mention in prompt'}
              onPress={() =>
                $.prompt.fill({
                  text: `InstantNotes note "${opened.title}" (id ${opened.id}, updated ${opened.updatedAt}): `,
                  mode: 'append',
                })
              }
            />
            <Button
              key="paste"
              plain
              hotkey="p"
              label={isNarrow ? 'paste' : 'paste into prompt'}
              onPress={() =>
                $.prompt.fill({
                  text: `Note "${opened.title}" from InstantNotes:\n\n${clipBody(opened.body, PASTE_MAX).text}\n\n`,
                  mode: 'append',
                })
              }
            />
            <Button
              key="copy"
              plain
              hotkey="c"
              label="copy"
              onPress={async press => {
                const copied = await $.ui.copy({ text: opened.body, surface: press.surface })
                $.ui.toast(copied.isCopied ? 'Copied the note.' : 'Could not copy here.')
              }}
            />
            <Button key="reload" plain hotkey="r" label="reload" onPress={() => openNote($, options, opened.id, true)} />
          </Box>
          <Text bold color="cyan" wrap="truncate-end">{opened.title}</Text>
          {meta.length > 0 && <Text dimColor wrap="truncate-end">{meta.join('  ·  ')}</Text>}
          {rule}
          {status}
          <Markdown key="body" text={text || '_Empty note._'} />
          {cut > 0 && <Text dimColor>{`… ${cut.toLocaleString()} more characters in InstantNotes`}</Text>}
        </Box>
      )
    }

    const { hits: list, query: ran, typed: typing, isComposing: composing } = snap
    const shown = typing !== ran ? filterHits(list, typing) : list
    const isFiltering = typing !== ran && typing.trim() !== ''

    let field = null
    if (Field) {
      field = (
        <Field
          key="query"
          label="⌕ "
          placeholder={isNarrow ? 'search notes' : 'words or a title · Enter searches · empty lists recent notes'}
          value={typing}
          autoFocus={composing ? undefined : true}
          submitLabel="search"
          onInput={value => void write($, 'typed', () => value)}
          onSubmit={value => void search($, options, value)}
        />
      )
    } else {
      field = <Text dimColor>{ran ? `Results for "${ran}"` : 'Recent notes'}</Text>
    }

    const heading = isFiltering
      ? `${shown.length} of ${list.length} match "${typing.trim()}"${Field ? ' · Enter searches the library' : ''}`
      : ran
        ? `${list.length}${list.length === LIST_LIMIT ? '+' : ''} result${list.length === 1 ? '' : 's'} for "${ran}"`
        : `Recent notes · ${list.length}`

    return (
      <Box flexDirection="column">
        <Box flexDirection="row" gap={1}>
          <Box flexShrink={0}>
            <Text bold color="cyan">✎ InstantNotes</Text>
          </Box>
          <Box flexGrow={1} flexShrink={1}>
            <Text dimColor wrap="truncate-start">{from === null ? '' : from.kind === 'mcp' ? 'via MCP server' : `via ${from.argv[0]}`}</Text>
          </Box>
          {Field && (
            <Button key="new" plain label={composing ? 'cancel' : isNarrow ? '+ new' : '+ new note'} onPress={() => write($, 'isComposing', was => !was)} />
          )}
          <Button key="recent" plain label="recent" onPress={() => search($, options, '', true)} />
        </Box>
        {field}
        {Field && composing && (
          <Field
            key="compose"
            label="✎ "
            placeholder={isNarrow ? 'New note' : 'New note: the first line becomes the title'}
            value=""
            autoFocus
            submitLabel="save"
            onSubmit={value => void compose($, options, value)}
          />
        )}
        <Text dimColor>{heading}</Text>
        {rule}
        {status}
        {trouble === null && !busy && shown.length === 0 && (
          <Text dimColor>{list.length === 0 ? (ran ? `Nothing in your notes matches "${ran}".` : 'No notes yet. Press + new note to write one.') : 'Nothing loaded matches; press Enter to search the library.'}</Text>
        )}
        {shown.map(hit => {
          const when = ago(hit.updatedAt, now)
          const tail = [hit.spaces[0] ?? '', when].filter(Boolean).join(' · ')
          const room = Math.max(8, width - 2 - (tail ? tail.length + 2 : 0))

          return (
            <Box key={`row-${hit.id}`} flexDirection="column" hover={{ backgroundColor: ROW_BG }}>
              <Box flexDirection="row">
                <Text color="cyan">{'▸ '}</Text>
                <Button key={`hit-${hit.id}`} plain label={clip(hit.title, room)} onPress={() => openNote($, options, hit.id)} />
                {tail !== '' && !isNarrow && <Text dimColor>{`  ${tail}`}</Text>}
              </Box>
              {hit.excerpt !== '' && (
                <Text dimColor wrap="truncate-end">{`  ${clip(hit.excerpt, width - 3)}`}</Text>
              )}
            </Box>
          )
        })}