codex-panel

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Input, Select } = $.ui.resolve(e)
    const props = (e as any).props ?? {}
    const cols = Math.max(20, Number(props.bodyColumns) || WIDTH)
    const height = Math.max(12, Number(props.scroll?.bodyRows) || 40)
    const linesOf = (t: string, pad = 0) => t.split('\n').reduce((n, l) => n + Math.max(1, Math.ceil((l.length + pad) / cols)), 0)
    const now = await $.clock.now()
    const spin = SPIN[Math.floor(now / 120) % SPIN.length]
    const full = cwd || root
    const where = full.split('/').pop() || 'this folder'
    const yolo = sandbox === 'danger-full-access'
    const cap = (s: string) => s.charAt(0).toUpperCase() + s.slice(1)
    const summary = `${cap(model)} · ${cap(effort)} · ${cap(SANDBOXES.find(s => s.value === sandbox)?.label ?? sandbox)}`
    const top: any[] = []
    const bottom: any[] = []
    let used = 0

    // header: name and state, the folder (press for the full path), the week
    const state =
      setup === 'checking' ? { dot: spin, label: 'checking', color: 'gray' }
      : setup === 'missing' ? { dot: '○', label: 'not installed', color: 'yellow' }
      : setup === 'signed-out' ? { dot: '○', label: 'signed out', color: 'yellow' }
      : busy ? { dot: spin, label: 'working', color: 'cyan' }
      : { dot: '●', label: 'ready', color: 'green' }
    top.push(
      <Box flexDirection="row" justifyContent="space-between">
        <Text bold>{'◆ Codex'}</Text>
        <Text color={state.color}>{`${state.dot} ${state.label}`}</Text>
      </Box>,
      <Button key="folder" plain dimColor label={`${showPath ? '▾' : '▸'} in ${where}`} onPress={() => { showPath = !showPath; $.ui.invalidate('ui.render') }} />,
    )
    used += 2
    if (showPath) {
      top.push(<Text dimColor wrap="wrap">{full}</Text>)
      used += linesOf(full)
    }
    if (limit) {
      const left = Math.max(0, Math.round(100 - limit.pct))
      const reset = new Date(limit.resetsAt)
      const cells = Math.round((left / 100) * 12)
      top.push(
        <Text wrap="truncate-end">
          <Text dimColor>{'week '}</Text>
          <Text color={left < 20 ? 'red' : left < 40 ? 'yellow' : 'green'}>{'━'.repeat(cells)}</Text>
          <Text dimColor>{'━'.repeat(12 - cells)}</Text>
          <Text dimColor>{` ${left}% left · resets ${MONTHS[reset.getMonth()]} ${reset.getDate()}`}</Text>
        </Text>,
      )
      used += 1
    }
    if (yolo) {
      top.push(
        <Box marginTop={1} paddingX={1} backgroundColor="red">
          <Text bold color="white" wrap="wrap">{'⚠ YOLO: Codex runs with no sandbox'}</Text>
        </Box>,
      )
      used += 2
    }

    // setup: what is missing and how to fix it
    if (setup === 'missing' || setup === 'signed-out') {
      top.push(
        <Box flexDirection="column" marginTop={1} paddingX={1} borderStyle="round" borderColor="yellow">
          {setup === 'missing' ? (
            <Box flexDirection="column">
              <Text bold color="yellow">{'⚠ Codex CLI not found'}</Text>
              <Text wrap="wrap">{'Install it, then press Check again:'}</Text>
              <Text color="cyan">{'npm i -g @openai/codex'}</Text>
              <Text dimColor wrap="wrap">{'or the Codex app from openai.com/codex'}</Text>
            </Box>
          ) : (
            <Box flexDirection="column">
              <Text bold color="yellow">{'⚠ Codex is not signed in'}</Text>
              <Text wrap="wrap">{'Sign in opens the browser for your ChatGPT account. For an API key, run in a terminal:'}</Text>
              <Text color="cyan" wrap="wrap">{'printenv OPENAI_API_KEY | codex login --with-api-key'}</Text>
            </Box>
          )}
          {signInNote ? <Text color={signingIn ? 'cyan' : 'yellow'} wrap="wrap">{signingIn ? `${spin} ${signInNote}` : signInNote}</Text> : null}
          <Box flexDirection="row" gap={1} marginTop={1}>
            {setup === 'signed-out' ? <Button key="sign-in" variant="primary" label={signingIn ? 'Signing in…' : '→ Sign in'} onPress={() => void signIn($)} /> : null}
            <Button key="recheck" label="↻ Check again" onPress={() => void checkSetup($)} />
          </Box>
        </Box>,
      )
      used += 11
    }

    // bottom: working line, the queue, the composer, actions, settings
    if (busy) {
      bottom.push(<Text color="cyan">{`  ${spin} Codex is thinking…`}</Text>)
      used += 1
    }
    queue.forEach((q, i) => {
      const label = `◷ Queued${q.from === 'claude' ? ' from Claude' : ''} · ${q.text}`
      bottom.push(
        <Box flexDirection="row" columnGap={1}>
          <Box flexShrink={1}>
            <Text dimColor wrap="truncate-end">{label}</Text>
          </Box>
          <Button key={`unqueue:${i}`} plain label="✕" onPress={() => unqueue($, q)} />
        </Box>,
      )
      used += 1
    })
    const lastCodex = [...log].reverse().find(r => r.who === 'codex')
    const long = draft.length > cols - 6
    if (long) {
      bottom.push(
        <Box marginTop={1} paddingX={1}>
          <Text wrap="wrap" dimColor>{draft}</Text>
        </Box>,
      )
      used += 1 + linesOf(draft, 2)
    }
    bottom.push(
      <Box marginTop={long ? 0 : 1} paddingX={1} borderStyle="round" borderColor={busy ? 'gray' : 'cyan'}>
        <Input
          key="input"
          autoFocus
          value={draft}
          placeholder={busy ? 'Codex is working… Enter queues' : 'Message Codex'}
          submitLabel={busy ? 'queue' : 'send'}
          onInput={(v: string) => {
            draft = v
            $.ui.invalidate('ui.render')
          }}
          onSubmit={(v: string) => {
            draft = ''
            void send($, v)
          }}
        />
      </Box>,
      <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
        {busy && draft.trim() ? <Button key="interrupt" variant="primary" label="⚡ Interrupt & send" onPress={() => interrupt($, draft)} /> : null}
        {busy ? <Button key="stop" label="■ Stop" onPress={() => stop($)} /> : null}
        {lastCodex && !busy ? <Button key="to-claude" label="✻ Send to Claude" onPress={() => toClaude($, lastCodex.text)} /> : null}
        <Button key="new" label="＋ New chat" onPress={() => fresh($)} />
        <Button key="close" label="✕" onPress={() => void $.ui.close({ id: PANE })} />
      </Box>,
      <Button key="settings" plain dimColor label={`${showSettings ? '▾' : '▸'} ⚙ ${summary}`} onPress={() => { showSettings = !showSettings; $.ui.invalidate('ui.render') }} />,
    )
    used += 6
    if (showSettings) {
      bottom.push(
        <Box flexDirection="column" paddingLeft={2}>
          <Select key="model" label="Model   " options={models.map(m => ({ value: m }))} value={model} onSelect={pick($, 'model', v => (model = v))} />
          <Select key="effort" label="Effort  " options={EFFORTS.map(v => ({ value: v }))} value={effort} onSelect={pick($, 'effort', v => (effort = v))} />
          <Select key="sandbox" label="Access  " options={SANDBOXES} value={sandbox} onSelect={pick($, 'sandbox', v => (sandbox = v))} />
          {thread ? <Text dimColor wrap="truncate-end">{`thread ${thread}`}</Text> : null}
        </Box>,
      )
      used += thread ? 4 : 3
    }

    // the conversation: newest first until the rows run out
    const chat: any[] = []
    if (!log.length && setup === 'ready')
      chat.push(
        <Box flexDirection="column" marginTop={1}>
          <Text dimColor wrap="wrap">{`Ask Codex anything. It works in ${where} and sees what Claude does.`}</Text>