script-build-and-framework-tmp/visualization/frontend/components/decision/AgentDecisionCard.tsx

import { ArrowRight, FileText } from "lucide-react";
import { Handle, Position, type NodeProps } from "@xyflow/react";
import type { CanvasNodeData } from "@/lib/layout";
import type { AgentDecisionProjection, CanvasItem } from "@/lib/types";
import { CardFields } from "@/components/flow/CardFields";
import { SourceComparisonButton } from "@/components/flow/SourceComparisonButton";

export function AgentDecisionCard({ data }: NodeProps) {
  const node = data as unknown as CanvasNodeData;
  const item = node.item;
  if (!item) return null;
  const decision = decisionFor(item);
  if (!decision) return null;
  return <article
    className={`flowCard agentDecisionCard decision-${decision.decisionType}`}
    data-focus-return={`${decision.id}:card`}
    tabIndex={0}
    aria-label={`${decision.actor.label}：${item.title}`}
    onKeyDown={(event) => {
      if (event.target !== event.currentTarget) return;
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        node.onOpen(item, "business");
      }
    }}
  >
    <Handle type="target" position={Position.Left} className="flowHandle" />
    <Handle type="source" position={Position.Right} className="flowHandle" />
    <header className="cardHeader">
      <div className="cardIdentity">
        <span className={`actorBadge actor-${actorTone(decision)}`}>{decision.actor.label}</span>
        <span className="storyRole">{decisionTypeLabel(decision.decisionType)}</span>
      </div>
      <span className={`authorityBadge authority-${decision.authority}`}>{authorityLabel(decision.authority)}</span>
    </header>
    <h3>{item.title}</h3>
    <CardFields card={decision.card} />
    <footer className="cardFooter">
      <button type="button" className="nodeAction nodrag nopan" onClick={(event) => { event.stopPropagation(); node.onOpen(item, "business"); }}>{item.itemType === "story" && item.role === "objective" ? "查看详情" : "查看决策"}<ArrowRight size={14} /></button>
      <SourceComparisonButton item={item} onOpen={node.onOpen} />
      {item.itemType === "story" && item.artifactRef ? <button type="button" className="nodeAction nodrag nopan artifactAction" data-focus-return={`${item.id}:artifact`} onClick={(event) => { event.stopPropagation(); node.onOpen(item, "artifact"); }}><FileText size={14} />查看完整候选脚本</button> : null}
    </footer>
  </article>;
}

export function decisionFor(item: CanvasItem): AgentDecisionProjection | undefined {
  if (item.itemType === "story") return item.decision;
  if (item.itemType === "multipath-review") return item.review.decisionProjection;
  if (item.itemType === "multipath-decision") return item.decision.decisionProjection;
  return undefined;
}

function actorTone(decision: AgentDecisionProjection) {
  if (decision.actor.role === "main") return "main";
  if (decision.actor.role === "implementer") return "implementer";
  return "evaluator";
}

export const authorityLabel = (authority: AgentDecisionProjection["authority"]) => ({ final: "最终决定", recommendation: "评审建议", "implementation-scope": "本方案内有效" } as const)[authority];
export const decisionTypeLabel = (type: AgentDecisionProjection["decisionType"]) => ({ direction: "方向决定", tradeoff: "取舍决定", evaluation: "评审判断", creative: "创作处理" } as const)[type];