prompt-history

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const q = await read($, query)
    const sc = await read($, scope)
    await read($, version)
    const now = await $.clock.now()
    const root = await $.session.root()
    let list: HistoryEntry[] = []
    try {
      list = await entries($)
    } catch (error) {
      debug($, `could not read the history: ${String(error)}`)
    }
    const terms = termsOf(q)
    const isMobile = e.surface === 'mobile'
    const found = search(list, terms, sc === 'project' ? root : null)
    const limit = isMobile ? 20 : 40
    const shown = found.slice(0, limit)
    const cols = Math.max(24, e.props.bodyColumns)
    const isNarrow = cols < 56
    const inProject = sc === 'project' ? search(list, [], root).length : list.length
    const here = projectName(root)

    const status =
      list.length === 0
        ? 'No prompts saved yet: every prompt you send from now on is kept here.'
        : found.length === 0
          ? terms.length > 0
            ? `Nothing matches "${q.trim()}"${sc === 'project' ? ` in ${here}` : ''}.`
            : `No prompts in ${here} yet; try All projects.`
          : `${found.length} ${found.length === 1 ? 'prompt' : 'prompts'}${terms.length > 0 ? ` matching "${q.trim()}"` : ''}${
              sc === 'project' ? ` in ${here}` : ' in all projects'
            }${found.length > shown.length ? `, newest ${shown.length} shown` : ''}`

    let controls
    if (e.surface === 'mobile') {
      controls = (
        <Box flexDirection="column">
          {q.trim() !== '' && <Text dimColor>{`Search: ${q.trim()} (from /history)`}</Text>}
          <Box>
            <Button
              key="scope"
              label={sc === 'project' ? 'Show all projects' : `Show ${here} only`}
              onPress={() => void toggleScope($)}
            />
          </Box>
        </Box>
      )
    } else {
      const { Input, Select } = $.ui.resolve(e)
      controls = (
        <Box flexDirection={isNarrow ? 'column' : 'row'} gap={isNarrow ? 0 : 2}>
          <Box flexGrow={1}>
            <Input
              key="q"
              label="Search "
              placeholder="words to find"
              value={q}
              autoFocus
              submitLabel="search"
              onInput={value => void setQuery($, value)}
              onSubmit={value => void setQuery($, value)}
            />
          </Box>
          <Select key="scope" label="In " options={SCOPES} value={sc} onSelect={value => void setScope($, value)} />
        </Box>
      )
    }

    const snippetWidth = cols - 2
    return (
      <Box flexDirection="column" gap={1}>
        {controls}
        <Text dimColor wrap="wrap">
          {status}
        </Text>
        <Box flexDirection="column" gap={isNarrow || isMobile ? 1 : 0}>
        {shown.map(entry => {
          const when = `${timeAgo(entry.t, now)}${sc === 'all' && normRoot(entry.root) !== normRoot(root) ? ` · ${projectName(entry.root)}` : ''}${
            entry.cut ? ' · cut' : ''
          }`
          // wide rows: `[ Use ] [ Copy ] <when> ` before the snippet, and a cell for its closing …
          const pieces = snippet(entry.text, terms, isNarrow || isMobile ? snippetWidth : cols - (7 + 8 + Math.max(6, when.length) + 4))
          const line = (
            <Text wrap="truncate-end">
              {pieces.map(p => (p.isHit ? <Text inverse>{p.text}</Text> : p.text))}
            </Text>
          )
          const use = <Button key={`use:${entry.id}`} label="Use" onPress={press => void usePrompt($, entry.text, press.surface)} />
          if (isMobile) {
            return (
              <Box key={entry.id} flexDirection="column">
                {line}
                <Box gap={1}>
                  {use}
                  <Text dimColor>{when}</Text>
                </Box>
              </Box>
            )
          }
          const copy = <Button key={`copy:${entry.id}`} label="Copy" dimColor onPress={press => void copyPrompt($, entry.text, press.surface)} />
          if (isNarrow) {
            return (
              <Box key={entry.id} flexDirection="column">
                {line}
                <Box gap={1}>
                  {use}
                  {copy}
                  <Text dimColor>{when}</Text>
                </Box>
              </Box>
            )
          }
          return (
            <Box key={entry.id} gap={1}>
              {use}
              {copy}
              <Text dimColor>{when.padEnd(6)}</Text>
              <Box flexGrow={1}>{line}</Box>
            </Box>
          )
        })}
        </Box>
        {list.length > 0 && sc === 'project' && inProject < list.length && found.length < limit && (
          <Text dimColor>{`${list.length - inProject} more in other projects.`}</Text>
        )}
        {/* the column's gap already leaves the blank line above */}
        <Box>
          <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
        </Box>
      </Box>
    )
  })