http-lab

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const list = await read($, requests)
    const sel = await read($, selected)
    const hostMap = await read($, hosts)
    const width = Math.max(30, e.props.bodyColumns - 2)
    if (list.length === 0) {
      return (
        <Box flexDirection="column">
          <Text dimColor>No requests yet. Claude sends them with the request tool: localhost runs freely, any other host is asked about once a session.</Text>
          <Box marginTop={1}>
            <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
          </Box>
        </Box>
      )
    }
    const current = list.find(x => x.id === sel) ?? list.at(-1)
    const urlRoom = Math.max(16, width - 30)
    const declined = Object.keys(hostMap).filter(k => hostMap[k] === 'deny')
    const allowed = Object.keys(hostMap).filter(k => hostMap[k] === 'allow')
    return (
      <Box flexDirection="column">
        {[...list]
          .reverse()
          .slice(0, 30)
          .map(x => {
            const status = x.error !== null ? 'ERR' : String(x.status ?? '')
            const url = x.url.replace(/^https?:\/\//, '')
            return (
              <Box key={`row:${x.id}`} flexDirection="row" gap={1}>
                <Text color={statusColor(x)}>{current?.id === x.id ? '►' : '●'}</Text>
                <Button
                  key={`req:${x.id}`}
                  plain
                  dimColor={current?.id !== x.id}
                  label={`${status.padEnd(3)} ${x.method.padEnd(6)} ${url.length > urlRoom ? `${url.slice(0, urlRoom - 1)}…` : url}  ${x.ms === null ? '' : `${x.ms} ms`}${x.origin === 'person' ? ' (you)' : ''}`}
                  onPress={() => void update($, selected, () => x.id)}
                />
              </Box>
            )
          })}
        {current !== undefined && (
          <Box flexDirection="column" marginTop={1}>
            <Text bold wrap="wrap">
              {current.method} {current.url}
            </Text>
            <Text color={statusColor(current)} wrap="wrap">
              {current.error !== null
                ? `× ${current.error}`
                : `→ ${current.status} ${current.reason} · ${current.ms} ms · ${fmtSize(current.size ?? 0)} · ${hhmmss(current.at)}`}
            </Text>
            {current.timing !== null && (
              <Text dimColor>
                dns {current.timing.dns} ms · connect {current.timing.connect} ms{current.timing.tls > 0 ? ` · tls ${current.timing.tls} ms` : ''} · first byte {current.timing.ttfb} ms · total {current.timing.total} ms
              </Text>
            )}
            {current.reqHeaders.length > 0 && <Text dimColor>request headers</Text>}
            {current.reqHeaders.map(([k, v], i) => (
              <Text key={`rqh:${i}`} wrap="truncate-end">
                {`  ${k}: ${v}`}
              </Text>
            ))}
            {current.reqBody !== null && (
              <Text wrap="truncate-end" dimColor>
                {`  body: ${current.reqBody.slice(0, 300)}`}
              </Text>
            )}
            {current.resHeaders.length > 0 && <Text dimColor>response headers</Text>}
            {current.resHeaders.map(([k, v], i) => (
              <Text key={`rsh:${i}`} wrap="truncate-end">
                {`  ${k}: ${v}`}
              </Text>
            ))}
            {current.preview !== '' && <Text dimColor>body</Text>}
            {current.preview
              .split('\n')
              .slice(0, 24)
              .map((line, i) => (
                <Text key={`b:${i}`} wrap="truncate-end">
                  {`  ${line}`}
                </Text>
              ))}
            <Box marginTop={1} gap={1}>
              <Button key="replay" hotkey="r" label="Replay" onPress={() => void replay($, current.id)} />
              <Button key="curl" hotkey="c" label="Copy as curl" onPress={press => void copyCurl($, current.id, press.surface)} />
              <Button
                key="clear"
                hotkey="l"
                label="Clear"
                onPress={() => {
                  secrets.clear()
                  void update($, requests, () => [])
                }}
              />
              <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
            </Box>
          </Box>
        )}
        {(allowed.length > 0 || declined.length > 0) && (
          <Text dimColor wrap="wrap">
            {allowed.length > 0 ? `allowed: ${allowed.join(', ')}` : ''}
            {allowed.length > 0 && declined.length > 0 ? ' · ' : ''}
            {declined.length > 0 ? `declined: ${declined.join(', ')}` : ''}
          </Text>
        )}
      </Box>
    )
  })