Agent 前端：工具调用与状态机

type AgentEvent =
  | { type: "delta"; text: string }                       // 最终回答的流式片段（第 45 篇）
  | { type: "tool_call"; id: string; name: string; args: unknown }      // 模型要调工具了
  | { type: "tool_result"; id: string; ok: boolean; summary: string } // 后端执行完毕
  | { type: "done"; totalTokens: number }
  | { type: "error"; message: string };

interface ToolStep {
  id: string;
  name: string;                    // 工具名，如 queryOrder
  status: "running" | "ok" | "fail";
  summary?: string;                // 结果一句话摘要，折叠时展示
}

interface AgentState {
  phase: "idle" | "thinking" | "tool_running" | "streaming" | "done" | "error";
  steps: ToolStep[];               // 时间线卡片的数据源
  answer: string;                  // 最终回答，流式追加
}

type AgentAction =
  | { type: "SUBMIT" }
  | { type: "TOOL_CALL"; id: string; name: string }
  | { type: "TOOL_RESULT"; id: string; ok: boolean; summary: string }
  | { type: "DELTA"; text: string }
  | { type: "DONE" }
  | { type: "ERROR" };

function reducer(state: AgentState, action: AgentAction): AgentState {
  switch (action.type) {
    case "SUBMIT":
      return { phase: "thinking", steps: [], answer: "" }; // 全量重置，进入思考

    case "TOOL_CALL":
      return {
        ...state,
        phase: "tool_running",
        steps: [...state.steps, { id: action.id, name: action.name, status: "running" }],
      };

    case "TOOL_RESULT": {
      const status: ToolStep["status"] = action.ok ? "ok" : "fail";
      const steps = state.steps.map((s) =>
        s.id === action.id ? { ...s, status, summary: action.summary } : s
      );
      return { ...state, phase: "thinking", steps }; // 一步结束，回 thinking 等模型下一步
    }

    case "DELTA":
      return { ...state, phase: "streaming", answer: state.answer + action.text };

    case "DONE":
      return { ...state, phase: "done" };

    case "ERROR":
      return { ...state, phase: "error" };
  }
}

eventSource.onmessage = (e) => {
  const event: AgentEvent = JSON.parse(e.data);
  switch (event.type) {
    case "delta":       return dispatch({ type: "DELTA", text: event.text });
    case "tool_call":   return dispatch({ type: "TOOL_CALL", id: event.id, name: event.name });
    case "tool_result": return dispatch({ type: "TOOL_RESULT", id: event.id, ok: event.ok, summary: event.summary });
    case "done":        return dispatch({ type: "DONE" });
    case "error":       return dispatch({ type: "ERROR" });
  }
};

const STEP_LABEL: Record<string, string> = {
  queryOrder: "正在查询订单",
  checkStock: "正在比对库存",
  createRefund: "正在创建退款单",
};

function StepCard({ step, onRetry }: { step: ToolStep; onRetry: (id: string) => void }) {
  const [open, setOpen] = useState(false); // 默认折叠，只留一行摘要

  return (
    <div className="step-card" data-status={step.status}>
      <button onClick={() => setOpen(!open)}>
        <StatusIcon status={step.status} />
        {/* running 转圈 / ok 打勾 / fail 叉号 */}
        <span>{STEP_LABEL[step.name] ?? step.name}</span>
        {step.status === "fail" && (
          <span onClick={(e) => { e.stopPropagation(); onRetry(step.id); }}>重试</span>
        )}
      </button>
      {open && <pre className="step-detail">{step.summary}</pre>}
    </div>
  );
}

// AgentAction 的 TOOL_CALL 扩展：{ type: "TOOL_CALL"; id; name; needsConfirm: boolean }
// AgentState 的 phase 扩展："awaiting_confirmation"
// ToolStep 的 status 扩展："waiting_confirm"

case "TOOL_CALL": {
  const step: ToolStep = {
    id: action.id,
    name: action.name,
    status: action.needsConfirm ? "waiting_confirm" : "running",
  };
  return {
    ...state,
    phase: action.needsConfirm ? "awaiting_confirmation" : "tool_running",
    steps: [...state.steps, step],
  };
}