side-chat

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Markdown } = $.ui.resolve(e)
    const model = await currentModel($)
    const exchanges = await read($, exchangesAtom)
    const attachments = await read($, attachmentsAtom)
    const offers = await read($, offersAtom)
    const total = await read($, spendAtom)
    const drafts = await read($, draftsAtom)
    const notice = await read($, noticeAtom)
    const width = Math.max(30, e.props.bodyColumns)
    const running = exchanges.some(x => x.status === 'running')

    const asked = exchanges.length
    const head = `Side chat · ${model} · ${plural(asked, 'question')} · ${fmtUsd(total.usd)} spent`

    // Older exchanges fold to one line each; the newest two show whole.
    const older = exchanges.slice(0, -2).slice(-4)
    const recent = exchanges.slice(-2)

    let questionField: JSX.Element | null = null
    let fileField: JSX.Element | null = null
    if (e.surface !== 'mobile') {
      const { Input } = $.ui.resolve(e)
      questionField = (
        <Input
          key="ask"
          label="Ask "
          placeholder={running ? 'answering…' : `a side question for ${model} (Enter)`}
          value={drafts.question}
          submitLabel="ask"
          autoFocus
          onInput={value => quietly(update($, draftsAtom, d => ({ ...d, question: value })))}
          onSubmit={value => quietly(ask($, value))}
        />
      )
      fileField = (
        <Input
          key="file"
          label="File "
          placeholder="path to attach (Enter)"
          value={drafts.file}
          submitLabel="attach"
          onInput={value => quietly(update($, draftsAtom, d => ({ ...d, file: value })))}
          onSubmit={value => quietly(attachFile($, value))}
        />
      )
    }

    return (
      <Box flexDirection="column">
        <Text bold wrap="wrap">
          {head}
        </Text>
        <Text dimColor wrap="wrap">
          Kept out of Claude's context. Nothing reaches Claude unless you send it.
        </Text>
        {older.map(x => (
          <Text dimColor wrap="truncate-end">
            {`Q: ${oneLine(x.question, Math.max(20, Math.floor(width / 2)))} → ${x.status === 'done' ? oneLine(x.answer, width) : x.status}`}
          </Text>
        ))}
        {recent.map(x => (
          <Box flexDirection="column" marginTop={1}>
            <Text wrap="wrap">
              <Text bold color="cyan">
                {'Q: '}
              </Text>
              {x.question}
            </Text>
            <Text dimColor wrap="wrap">
              {x.status === 'running'
                ? `${x.model} is answering…${x.attached.length > 0 ? ` (with ${x.attached.join(', ')})` : ''}`
                : `${x.model} · ${fmtTokens(x.input)} in / ${fmtTokens(x.output)} out · ${fmtUsd(x.usd)} · ${fmtSecs(x.ms)}${x.attached.length > 0 ? ` · with ${x.attached.join(', ')}` : ''}`}
            </Text>
            {x.status === 'done' && <Markdown text={x.answer.length > MARKDOWN_CHARS ? `${x.answer.slice(0, MARKDOWN_CHARS)}\n\n…` : x.answer} />}
            {x.status === 'failed' && <Text color="red" wrap="wrap">{`No answer: ${x.error}`}</Text>}
          </Box>
        ))}
        {asked === 0 && (
          <Text dimColor wrap="wrap">
            {e.surface === 'mobile'
              ? 'Ask with /side <question>. Attach context with the buttons below.'
              : 'Ask anything on the side: about the code, an idea, a doubt. Attach context with the buttons below.'}
          </Text>
        )}
        <Box marginTop={1} gap={1} flexWrap="wrap">
          <Text dimColor>Attach:</Text>
          {ATTACHABLE.map(kind => {
            const pinned = attachments.find(a => a.kind === kind)
            const offer = offers.find(o => o.kind === kind)
            const size = pinned !== undefined ? pinned.tokens : (offer?.tokens ?? null)
            const mark = pinned !== undefined ? '■' : '□'
            const label = `${mark} ${BUTTON_NAMES[kind]}${size === null ? (offer === undefined ? '' : ' (none)') : ` ≈${fmtTokens(size)}`}`
            return <Button key={`attach-${kind}`} hotkey={kind === 'answer' ? '1' : kind === 'diff' ? '2' : '3'} dimColor={size === null} label={label} onPress={() => quietly(toggle($, kind))} />
          })}
        </Box>
        {attachments
          .filter(a => a.kind === 'file')
          .map(a => (
            <Box gap={1}>
              <Text wrap="truncate-end">{`■ ${a.label} ≈${fmtTokens(a.tokens)}${a.isCut ? ' (cut)' : ''}`}</Text>
              <Button key={`unpin-${a.id}`} label="Remove" dimColor onPress={() => quietly(unpin($, a.id))} />
            </Box>
          ))}
        {attachments.length > 0 && (
          <Text dimColor wrap="wrap">
            {`Sent with each question: ≈${fmtTokens(attachments.reduce((n, a) => n + a.tokens, 0))} tokens`}
          </Text>
        )}
        {fileField}
        {questionField}
        {notice !== null && (
          <Text color="yellow" wrap="wrap">
            {notice}
          </Text>
        )}
        <Box marginTop={1} gap={1} flexWrap="wrap">
          <Button key="model" hotkey="m" label={`Model: ${model}`} onPress={() => quietly(switchModel($))} />
          <Button key="send" hotkey="s" variant="primary" label="Send to Claude" onPress={press => quietly(sendAnswer($, press.surface))} />
          <Button key="summary" hotkey="u" label="Send summary" onPress={press => quietly(sendSummary($, press.surface))} />
          <Button key="copy" hotkey="c" label="Copy" onPress={press => quietly(copyLast($, press.surface))} />
          <Button key="new" hotkey="n" label="New chat" onPress={() => quietly(startOver($))} />
          <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => quietly($.ui.close({ id: PANE }))} />
        </Box>
        {total.calls > 0 && (
          <Text dimColor wrap="wrap">{`This session: ${plural(total.calls, 'call')} · ${fmtTokens(total.input)} in / ${fmtTokens(total.output)} out · ${fmtUsd(total.usd)}`}</Text>
        )}
      </Box>
    )
  })