#Hermes Dashboard

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

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

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

// 会话由应用创建，返回的是 Hermes 的持久会话编号，存进自己的会话目录
export async function createSession(cwd: string): Promise<string> {
  const { sessionId } = await connection.createSession({ cwd });
  return sessionId;
}

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 {
  getHermesGatewayInteraction,
  type HermesGatewayInteraction,
} from '@volcengine/chatkit/adapters/hermes-gateway';
import { useState } from 'react';

import { connection } from './hermes-gateway-connection';

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

function InteractionCard({ interaction }: { interaction: HermesGatewayInteraction }) {
  const sessionId = useCurrentSession().session?.id;
  const [text, setText] = useState('');
  // 只有 pending 时能回答；answering 是已经点了、等后端确认
  const disabled = interaction.status !== 'pending' || !sessionId || !interaction.requestId;
  // 审批给 choices 里的一项，追问给答案文本
  const answer = (response: string) => {
    if (!sessionId || !interaction.requestId) return;
    void connection
      .respond({ sessionId, requestId: interaction.requestId, response })
      // 没送达时状态会退回 pending，可以再点一次
      .catch(error => console.error(error));
  };

  if (interaction.kind === 'approval')
    return (
      <div className="approval-card">
        <p>{interaction.description ?? '允许执行这条命令？'}</p>
        {interaction.command && <pre>{interaction.command}</pre>}
        {interaction.status === 'answered' ? (
          <p>已回答：{interaction.choice}</p>
        ) : (
          interaction.choices.map(choice => (
            <button key={choice} disabled={disabled} onClick={() => answer(choice)}>
              {choice}
            </button>
          ))
        )}
      </div>
    );

  return (
    <div className="question-card">
      <p>{interaction.question}</p>
      {interaction.status === 'answered' ? (
        <p>已回答：{interaction.answer}</p>
      ) : interaction.choices.length ? (
        interaction.choices.map(choice => (
          <button key={choice} disabled={disabled} onClick={() => answer(choice)}>
            {choice}
          </button>
        ))
      ) : (
        // choices 为空时是自由回答
        <form
          onSubmit={event => {
            event.preventDefault();
            answer(text);
          }}
        >
          <input value={text} disabled={disabled} onChange={event => setText(event.target.value)} />
          <button disabled={disabled || !text}>回答</button>
        </form>
      )}
    </div>
  );
}

// 审批挂在被拦下时正在执行的工具上（如 terminal），追问挂在 clarify 上：用 match 接住全部工具
export const interactionRenderers: ChatkitProps['renderers'] = {
  tools: { interactions: { match: () => true, render: ToolWithInteraction } },
};

import { useEffect, useState } from 'react';

import { connection } from './hermes-gateway-connection';

/**
 * 会话标题与信息：跟着 session.title、session.info 事件更新。
 * 断线期间的变化不补发：先取一次、重连后再取一次。不带 title 调 session.title 返回当前标题，并推一次 session.info。
 */
export function useHermesSessionInfo(sessionId: string | undefined) {
  const [title, setTitle] = useState<string>();
  const [info, setInfo] = useState<Record<string, unknown>>();
  const [online, setOnline] = useState(true);
  useEffect(() => {
    if (!sessionId) return;
    let active = true;
    const refetch = async () => {
      // 方法参数里的 session_id 是这条连接上的 live 编号
      const live = await connection.liveSessionId(sessionId);
      const result = await connection.request<{ title?: string }>('session.title', { session_id: live });
      if (active) setTitle(result.title || undefined);
    };
    void refetch().catch(() => undefined);
    const off = connection.listen(sessionId, item => {
      if (item.kind === 'connection') {
        setOnline(item.status === 'reconnected');
        if (item.status === 'reconnected') void refetch().catch(() => undefined);
        return;
      }
      if (item.kind !== 'event') return;
      const { type, payload } = item.event;
      if (type === 'session.title' && typeof payload?.title === 'string') setTitle(payload.title);
      if (type === 'session.info') setInfo(payload);
    });
    return () => {
      active = false;
      off();
    };
  }, [sessionId]);
  return { title, info, online };
}

/** sudo 密码这类阻塞请求适配器不处理：经 listen 拿到，用 connection.request 回答；不回答时工具等到超时。 */
export function useHermesSudoPrompt(sessionId: string | undefined) {
  useEffect(() => {
    if (!sessionId) return;
    return connection.listen(sessionId, item => {
      if (item.kind !== 'event' || item.event.type !== 'sudo.request') return;
      const password = window.prompt('sudo 密码') ?? '';
      void connection
        .request('sudo.respond', { request_id: item.event.payload?.request_id, password })
        .catch(error => console.error(error));
    });
  }, [sessionId]);
}