conclaude

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Text, Button } = els
    const Input = 'Input' in els ? els.Input : undefined
    const width = Math.max(1, e.props.bodyColumns)
    const gap = e.props.placement === 'dock' ? 1 : 0
    const rule = <Text color="subtle">{'─'.repeat(width)}</Text>
    const toast = (text: string) => void $.ui.toast(text)
    const setView = (next: PaneView) => update($, view, () => next)
    const v = await read($, view)
    const list = await read($, asked)
    const now = await $.clock.now()
    const sessionId = await read($, session)
    const dir = await sessionsDir($)

    const header = (title: string, counter: string, pending = 0) => (
      <Box flexDirection="row" justifyContent="space-between">
        <Text bold color="claude">{title}</Text>
        <Text color="inactive" wrap="truncate-end">
          {counter}
          {pending > 0 && <Text color="suggestion" bold>{` · ${pending} pending`}</Text>}
        </Text>
      </Box>
    )

    const rows = (shown: Asked[], isButton: boolean, focusLast: boolean) => {
      const numW = String(Math.max(0, ...shown.map(one => one.id))).length
      const w = Math.max(4, width - numW - 1)
      return shown.map((one, at) => {
        const label = oneLine(one.text, w)
        const tldr = one.tldr ?? (one.turnId ? '…working' : 'queued')
        const meta = stamp(one, now)
        const tone = tldrColor(one.tldr)
        return (
          <Box key={`row-${one.id}`} flexDirection="column" marginBottom={gap}>
            <Box flexDirection="row">
              <Text color="suggestion">{`${String(one.id).padStart(numW)} `}</Text>
              {isButton
                ? <Button key={`jump-${one.id}`} plain label={label} hover={{ underline: true }} autoFocus={focusLast && at === shown.length - 1 ? true : undefined} onPress={() => jump(one)} />
                : <Text>{label}</Text>}
            </Box>
            <Text wrap="wrap">
              {' '.repeat(numW + 1)}
              <Text color={tone.glyph}>↳ </Text>
              <Text {...tone.text}>{oneLine(tldr, Math.max(Math.min(8, w), 2 * (w - 2) - 1 - (meta ? meta.length + 3 : 0)))}</Text>
              {meta && <Text color="inactive">{` · ${meta}`}</Text>}
            </Text>
          </Box>
        )
      })
    }

    const jump = async (one: Asked) => {
      const problem = await jumpTo($, one)
      if (problem) toast(problem)
    }

    const loadSaved = async () => {
      if (!dir || !(await $.fs.exists(dir))) return []
      const metas: SavedMeta[] = []
      for (const entry of await $.fs.list(dir)) {
        if (entry.kind !== 'file' || !entry.name.endsWith('.json')) continue
        const one = parseSaved(await $.fs.read(`${dir}/${entry.name}`).catch(() => DELETED))
        if (!one || one.sessionId === sessionId || one.asked.length === 0) continue
        metas.push({ sessionId: one.sessionId, cwd: one.cwd, savedAt: one.savedAt, count: one.asked.length, title: one.asked[0]!.text })
      }
      return metas.sort((a, b) => b.savedAt - a.savedAt)
    }

    const confirmBlock = (question: string, detail: string[], yes: string, onYes: () => Promise<unknown>) => (
      <Box flexDirection="column">
        <Text bold wrap="wrap">{question}</Text>
        {detail.map((line, at) => <Text key={`detail-${at}`} color="inactive" wrap="wrap">{line}</Text>)}
        <Text> </Text>
        <Box flexDirection="row" gap={2}>
          <Button key="yes" hotkey="y" label={yes} variant="primary" onPress={() => void onYes()} />
          <Button key="no" hotkey="n" label="Keep" autoFocus onPress={() => void setView({ ...v, confirm: undefined })} />
        </Box>
        {rule}
      </Box>
    )

    const close = <Button key="close" hotkey="q" plain label="Close" onPress={() => void $.ui.close({ id: PANE })} />

    if (v.mode === 'current' && v.confirm === 'clear') {
      const isLocked = (await read($, locked)) === sessionId
      return confirmBlock(`Clear all ${plural(list.length, 'prompt')} from this list?`, [isLocked ? "The saved copy couldn't be read, so it stays as it is." : 'The saved copy is deleted too.'], 'Clear', async () => {
        const count = list.length
        const isCleared = await serial(async () => {
          const id = await read($, session)
          if (id !== sessionId) return false
          await update($, jobs, list => list.filter(job => job.sessionId !== id))
          await edit($, () => [])
          await flush($)
          return true
        })
        await setView({ mode: 'current' })
        toast(isCleared ? `cleared ${plural(count, 'prompt')}` : 'the session changed; nothing was cleared')
      })
    }

    if (v.mode === 'detail' && v.detail && v.confirm === 'delete') {
      const d = v.detail
      return confirmBlock('Delete this saved session?', [`"${oneLine(d.asked[0]?.text ?? '', width - 2)}"`, `${plural(d.asked.length, 'prompt')} · ${dayLabel(d.savedAt, now)}. This cannot be undone.`], 'Delete', async () => {
        try {
          await serial(async () => {
            await $.fs.write(`${dir}/${d.sessionId}.json`, DELETED)
            await update($, unsaved, list => list.filter(one => one.sessionId !== d.sessionId))
          })
          const metas = await loadSaved()
          await update($, saved, () => metas)
          await setView({ mode: 'saved' })
          toast('deleted saved session')
        } catch (err) {
          toast(`couldn't delete: ${(err as Error).message}`)
        }
      })
    }

    if (v.mode === 'detail' && v.detail) {
      const d = v.detail
      const command = `claude --resume ${d.sessionId}`
      return (
        <Box flexDirection="column">
          <Text bold color="claude" wrap="truncate-end">{`‹ Saved · ${oneLine(d.asked[0]?.text ?? '', width)}`}</Text>
          <Box flexDirection="row" gap={2}>
            <Button key="back" hotkey="b" plain label="Back" autoFocus onPress={() => void setView({ mode: 'saved' })} />
            <Button key="copy" hotkey="c" plain label="Copy" onPress={async press => {
              const copied = await $.ui.copy({ text: command, surface: press.surface })
              toast(copied.isCopied ? `copied: ${oneLine(command, 30)}` : "couldn't copy - select the command in the pane")
            }} />
            <Button key="delete" hotkey="d" plain label="Delete" onPress={() => {
              void setView({ ...v, confirm: 'delete' })
              void $.ui.scroll({ in: PANE, to: 'start' }).catch(() => undefined)
            }} />
            {close}
          </Box>
          {rule}
          {rows(d.asked, false, false)}
          {rule}
          <Text color="suggestion" wrap="wrap">{command}</Text>
          <Text color="inactive" wrap="wrap">{`Read-only · ${dayLabel(d.savedAt, now)} · ${plural(d.asked.length, 'prompt')}`}</Text>
        </Box>
      )
    }

    if (v.mode === 'saved') {
      const metas = await read($, saved)
      const open = async (meta: SavedMeta) => {
        const one = parseSaved(await $.fs.read(`${dir}/${meta.sessionId}.json`).catch(err => `${(err as Error).message}`))
        if (!one) return toast("couldn't read that saved session (unreadable or deleted)")
        await setView({ mode: 'detail', detail: one })
      }
      return (
        <Box flexDirection="column">
          {header(TITLE, `Saved · ${plural(metas.length, 'session')}`)}
          <Box flexDirection="row" gap={2}>
            <Button key="view" hotkey="v" plain label="Current" onPress={() => void setView({ mode: 'current' })} />
            {close}
          </Box>