confidence-engine/components/graph-update-view.jsx

import React from "react";

function ListSection({ title, items, renderItem = (item) => item }) {
  if (!items?.length) return null;

  return (
    <section className="rounded-lg border border-gray-200 bg-white p-4">
      <h3 className="mb-2 text-sm font-semibold text-gray-800">{title}</h3>
      <ul className="space-y-1 text-sm text-gray-700">
        {items.map((item, index) => (
          <li key={`${title}-${index}`}>{renderItem(item)}</li>
        ))}
      </ul>
    </section>
  );
}

export default function GraphUpdateView({ updateResult }) {
  if (!updateResult?.proposal) return null;

  const {
    resolvedUnknownNodeIds,
    affectedNodeIds,
    previousActiveUnknownNodeId,
    newActiveUnknownNodeId,
    selectedQuestion,
    changesApplied,
    proposal,
    previousSituationGraph,
    updatedSituationGraph,
  } = updateResult;

  const newlySurfacedUnknownNodeIds = (proposal.addedNodes || [])
    .filter((node) => node.kind === "unknown")
    .map((node) => node.id);

  const previousNodesById = new Map(
    (previousSituationGraph?.nodes || []).map((node) => [node.id, node]),
  );
  const updatedNodesById = new Map(
    (updatedSituationGraph?.nodes || []).map((node) => [node.id, node]),
  );
  const proposalUpdatesByNodeId = new Map(
    (proposal.updatedNodes || []).map((update) => [update.nodeId, update]),
  );

  function resolveNodePresentation(nodeId) {
    const previousNode = previousNodesById.get(nodeId) || null;
    const updatedNode = updatedNodesById.get(nodeId) || null;
    const node = updatedNode || previousNode;
    const update = proposalUpdatesByNodeId.get(nodeId) || null;

    if (!node) {
      return (
        <div className="space-y-1">
          <div className="font-medium text-gray-900">Unknown node (ID: {nodeId})</div>
        </div>
      );
    }

    return (
      <div className="space-y-1">
        <div className="font-medium text-gray-900">{node.label}</div>
        <div className="text-xs text-gray-600">
          {node.kind} · {node.confidence}
        </div>
        {(update?.previousStatus || update?.newStatus || node.status) && (
          <div className="text-xs text-gray-700">
            {update?.previousStatus ? `Previous status: ${update.previousStatus}` : null}
            {update?.previousStatus && update?.newStatus ? " → " : null}
            {update?.newStatus
              ? `New status: ${update.newStatus}`
              : !update?.previousStatus
                ? `Status: ${node.status}`
                : null}
          </div>
        )}
        {update?.reason && <div className="text-xs text-gray-700">{update.reason}</div>}
      </div>
    );
  }

  function resolveActiveUnknown(nodeId) {
    if (!nodeId) return null;

    const node = updatedNodesById.get(nodeId) || previousNodesById.get(nodeId);
    if (!node) {
      return `Unknown node (ID: ${nodeId})`;
    }

    return `${node.label} · ${node.status} · ${node.confidence}`;
  }

  const changeItems = [
    changesApplied?.addedNodeCount
      ? `${changesApplied.addedNodeCount} node(s) added`
      : null,
    changesApplied?.updatedNodeCount
      ? `${changesApplied.updatedNodeCount} node(s) updated`
      : null,
    changesApplied?.addedEdgeCount
      ? `${changesApplied.addedEdgeCount} edge(s) added`
      : null,
    changesApplied?.removedEdgeCount
      ? `${changesApplied.removedEdgeCount} edge(s) removed`
      : null,
    changesApplied?.resolvedUnknownCount
      ? `${changesApplied.resolvedUnknownCount} unknown(s) resolved`
      : null,
  ].filter(Boolean);

  return (
    <div className="space-y-4">
      <section className="rounded-lg border border-blue-200 bg-blue-50 p-4">
        <h2 className="mb-2 text-base font-semibold text-blue-900">
          Graph update applied
        </h2>
        <div className="grid gap-2 text-sm text-blue-950 sm:grid-cols-2">
          {previousActiveUnknownNodeId && (
            <div>
              <span className="font-medium">Previous active unknown:</span>{" "}
              {resolveActiveUnknown(previousActiveUnknownNodeId)}
            </div>
          )}
          {newActiveUnknownNodeId && (
            <div>
              <span className="font-medium">New active unknown:</span>{" "}
              {resolveActiveUnknown(newActiveUnknownNodeId)}
            </div>
          )}
          {selectedQuestion?.question && (
            <div>
              <span className="font-medium">Next question:</span>{" "}
              {selectedQuestion.question}
            </div>
          )}
          {!selectedQuestion?.question && !newActiveUnknownNodeId && previousActiveUnknownNodeId && (
            <div>
              <span className="font-medium">Next question status:</span> No next question selected yet.
            </div>
          )}
        </div>
      </section>

      <ListSection
        title="Resolved unknowns"
        items={resolvedUnknownNodeIds}
        renderItem={resolveNodePresentation}
      />
      <ListSection
        title="Newly surfaced unknowns"
        items={newlySurfacedUnknownNodeIds}
        renderItem={resolveNodePresentation}
      />
      <ListSection
        title="Affected nodes"
        items={affectedNodeIds}
        renderItem={resolveNodePresentation}
      />
      <ListSection title="Applied changes" items={changeItems} />

      <details className="rounded-lg border border-gray-200 bg-gray-50 p-4">
        <summary className="cursor-pointer text-sm font-medium text-gray-700 underline">
          Proposal details
        </summary>
        <pre className="mt-3 overflow-auto rounded bg-gray-900 p-3 text-xs text-green-400">
          {JSON.stringify(proposal, null, 2)}
        </pre>
        <pre className="mt-3 overflow-auto rounded bg-gray-900 p-3 text-xs text-green-400">
          {JSON.stringify(
            {
              previousActiveUnknownNodeId,
              newActiveUnknownNodeId,
              resolvedUnknownNodeIds,
              affectedNodeIds,
            },
            null,
            2,
          )}
        </pre>
      </details>
    </div>
  );
}