kya-validator 0.2.3

Rust core KYA (Know Your Agent) validator with Python bindings, TEE support, and blockchain integration
Documentation
/**
 * Agent Thinking - Visualizes agent reasoning and decision process.
 */
import { useDemoStore } from '../../store/demoStore';

export default function AgentThinking() {
  const { thinkingHistory } = useDemoStore();

  const getThinkingIcon = (confidence: number) => {
    if (confidence >= 0.8) {
      return (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      );
    } else if (confidence >= 0.5) {
      return (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      );
    } else {
      return (
        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      );
    }
  };

  if (thinkingHistory.length === 0) {
    return (
      <div className="p-4 bg-gray-900 rounded-lg border border-gray-700">
        <h3 className="text-sm font-semibold text-gray-300 mb-2">Agent Thinking</h3>
        <p className="text-xs text-gray-500">No thinking history available yet.</p>
      </div>
    );
  }

  return (
    <div className="p-4 bg-gray-900 rounded-lg border border-gray-700">
      <h3 className="text-sm font-semibold text-gray-300 mb-3">Agent Thinking</h3>
      <div className="space-y-3">
        {thinkingHistory.map((entry, index) => (
          <div key={index} className="flex items-start gap-2 p-2 bg-gray-800 rounded">
            <div className="mt-0.5 text-gray-400">
              {getThinkingIcon(entry.confidence)}
            </div>
            <div className="flex-1">
              <div className="flex items-center justify-between">
                <span className="text-xs font-medium text-gray-300">{entry.agent_id}</span>
                <span className="text-xs text-gray-500">{entry.timestamp}</span>
              </div>
              <p className="text-xs text-gray-400 mt-1">{entry.reasoning}</p>
              {entry.next_actions && entry.next_actions.length > 0 && (
                <div className="mt-2">
                  <span className="text-xs text-gray-500">Next actions:</span>
                  <ul className="list-disc list-inside text-xs text-gray-400 ml-1">
                    {entry.next_actions.map((action, i) => (
                      <li key={i}>{action}</li>
                    ))}
                  </ul>
                </div>
              )}
              <div className="mt-1">
                <div className="w-full bg-gray-700 rounded-full h-1.5">
                  <div
                    className="h-1.5 rounded-full"
                    style={{
                      width: `${entry.confidence * 100}%`,
                      backgroundColor: entry.confidence >= 0.8 ? '#10b981' : entry.confidence >= 0.5 ? '#f59e0b' : '#ef4444'
                    }}
                  />
                </div>
                <span className="text-xs text-gray-500">{(entry.confidence * 100).toFixed(0)}% confidence</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}