#Codex

import '@volcengine/chatkit/styles.css';

import { Chatkit, SessionList, type SessionListProps, useChatSessions } from '@volcengine/chatkit';

import { adapter, connection } from './codex-connection';
import { interactionRenderers } from './codex-interaction';

// 会话就是 Codex 的 thread：由应用创建，id 存进自己的会话目录
export async function createSession(cwd: string): Promise<string> {
  const { thread } = await connection.request<{ thread: { id: string } }>('thread/start', {
    cwd,
    approvalPolicy: 'on-request',
    sandbox: 'workspace-write',
  });
  return thread.id;
}

export function App({
  sessions: items,
  activeSessionId,
  onSelect,
}: Pick<SessionListProps, 'sessions' | 'activeSessionId' | 'onSelect'>) {
  const sessions = useChatSessions({ activeSessionId, adapter });
  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <SessionList sessions={items} activeSessionId={activeSessionId} onSelect={onSelect} style={{ width: 260 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <Chatkit sessions={sessions} renderers={interactionRenderers} />
      </div>
    </div>
  );
}

import { type ChatkitProps, type ChatkitToolViewProps, useCurrentSession } from '@volcengine/chatkit';
import {
  type CodexInteraction,
  type CodexRespondRequest,
  getCodexInteraction,
} from '@volcengine/chatkit/adapters/codex';

import { connection } from './codex-connection';

const DECISION_LABELS: Record<string, string> = {
  accept: '允许一次',
  acceptForSession: '本会话内都允许',
  decline: '拒绝',
  cancel: '拒绝并停止',
};

/** 默认的工具行照常显示；工具上挂着等待回答的审批或追问时，在下面加一张卡片。 */
function ToolWithInteraction({ metadata, defaultNode }: ChatkitToolViewProps) {
  const interaction = getCodexInteraction({ metadata });
  return (
    <>
      {defaultNode}
      {interaction && <InteractionCard interaction={interaction} />}
    </>
  );
}

function InteractionCard({ interaction }: { interaction: CodexInteraction }) {
  const sessionId = useCurrentSession().session?.id;
  // 只有 pending 时能回答（此时一定有 requestId）；answering 是已经点了、等后端确认
  const { requestId } = interaction;
  const disabled = interaction.status !== 'pending' || !sessionId || !requestId;
  const answer = (response: CodexRespondRequest['response']) => {
    if (!sessionId || !requestId) return;
    void connection
      .respond({ sessionId, requestId, response })
      // 没送达时状态会退回 pending，可以再点一次
      .catch(error => console.error(error));
  };

  if (interaction.kind === 'approval')
    return (
      <div className="approval-card">
        <p>{interaction.reason ?? interaction.command ?? `允许执行 ${interaction.toolName}？`}</p>
        {interaction.status === 'answered' ? (
          <p>已回答：{interaction.decision}</p>
        ) : (
          // 可选回答由后端给出，按 decisions 画按钮
          interaction.decisions.map(decision => (
            <button key={decision} disabled={disabled} onClick={() => answer(decision)}>
              {DECISION_LABELS[decision] ?? decision}
            </button>
          ))
        )}
      </div>
    );

  return (
    <div className="question-card">
      {interaction.questions.map(question => (
        <div key={question.id}>
          <p>{question.question}</p>
          {question.options?.map(option => (
            <button
              key={option.label}
              disabled={disabled}
              onClick={() => answer({ answers: [{ id: question.id, selected: [option.label] }] })}
            >
              {option.label}
            </button>
          ))}
        </div>
      ))}
    </div>
  );
}

// 审批挂在被审批的那个工具上（shell、apply_patch），追问挂在合成的 request_user_input 上：用 match 接住全部工具
export const interactionRenderers: ChatkitProps['renderers'] = {
  tools: { interactions: { match: () => true, render: ToolWithInteraction } },
};

import { useEffect, useState } from 'react';

import { connection } from './codex-connection';

/** 会话标题：先 thread/read，之后跟着 thread/name/updated 通知更新；断线重连后再读一次，补上断线期间的变化。 */
export function useCodexThreadName(sessionId: string | undefined) {
  const [name, setName] = useState<string>();
  const [online, setOnline] = useState(true);
  useEffect(() => {
    if (!sessionId) return;
    let active = true;
    const refetch = () =>
      connection
        .request<{ thread: { name?: string | null } }>('thread/read', { threadId: sessionId })
        .then(result => active && setName(result.thread.name ?? undefined))
        .catch(() => undefined);
    void refetch();
    const off = connection.listen(sessionId, item => {
      if (item.kind === 'connection') {
        setOnline(item.status === 'reconnected');
        if (item.status === 'reconnected') void refetch();
        return;
      }
      if (item.kind === 'notification' && item.method === 'thread/name/updated')
        setName((item.params as { threadName?: string | null }).threadName ?? undefined);
    });
    return () => {
      active = false;
      off();
    };
  }, [sessionId]);
  return { name, online };
}