confidence-engine/components/investigation-summary-panel-v3.jsx

/**
 * InvestigationSummaryPanelV3 — Phase 4, Experiment 12
 * A user-facing facilitator view that translates the reasoning graph into
 * a concise, human-meaningful presentation.
 *
 * Design principles:
 *   - The panel shows up to four sections: what we know, still investigating,
 *     possible explanations, and a quiet summary.
 *   - All content is grounded in existing graph fields. No invented facts.
 *   - Epistemic labels are explicit (structural), not colour-dependent.
 *   - The same panel remains useful during early, active and terminal states.
 */

import { buildFacilitatorViewModel } from "@/lib/presentation/facilitator-view-adapter";
import React from "react";

/* ── Item rendering ─────────────────────────────────────────────── */

/**
 * Render a single item with its structural label where applicable.
 */
function renderItem(item, isExplanation) {
  if (isExplanation && typeof item === "object") {
    return (
      <li key={item.text} className="flex items-start gap-2">
        <span className="mt-[3px] h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400/50" />
        <span className="text-sm text-gray-700">{item.text}</span>
        <span className="ml-auto mt-[-2px] shrink-0 whitespace-nowrap text-[10px] font-medium tracking-wide text-gray-400">
          {item.label}
        </span>
      </li>
    );
  }

  return (
    <li key={item} className="flex items-start gap-2">
      <span className="mt-[3px] h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400/50" />
      <span className="text-sm text-gray-700">{item}</span>
    </li>
  );
}

/* ── Section components ──────────────────────────────────────────── */

function KnownSection({ title, items }) {
  if (!items || items.length === 0) return null;

  return (
    <div>
      <h3 className="mb-2 text-[11px] font-medium tracking-widest uppercase text-gray-500">
        {title}
      </h3>
      <ul className="space-y-1.5">
        {items.map((item, i) => (
          <li key={i} className="flex items-start gap-2">
            <span className="mt-[3px] h-1.5 w-1.5 shrink-0 rounded-full bg-gray-500" />
            <span className="text-sm text-gray-700">{item}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function InvestigatingSection({ title, items }) {
  if (!items || items.length === 0) return null;

  return (
    <div>
      <h3 className="mb-2 text-[11px] font-medium tracking-widest uppercase text-gray-500">
        {title}
      </h3>
      <ul className="space-y-1.5">
        {items.map((item, i) => (
          <li key={i} className="flex items-start gap-2">
            <span className="mt-[3px] h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400/60" />
            <span className="text-sm text-gray-700">{item}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function ExplanationSection({ items }) {
  if (!items || items.length === 0) return null;

  return (
    <div>
      <h3 className="mb-2 text-[11px] font-medium tracking-widest uppercase text-gray-500">
        Possible explanations
      </h3>
      <ul className="space-y-1.5">
        {items.map((item, i) => renderItem(item, true))}
      </ul>
    </div>
  );
}

function QuietSummary({ text }) {
  if (!text) return null;

  return (
    <div className="pt-2 border-t border-gray-200/40">
      <p className="text-[10px] font-semibold tracking-widest uppercase text-gray-500 mb-1.5">
        Investigation state
      </p>
      <p className="text-xs text-gray-500">{text}</p>
    </div>
  );
}

/* ── Empty-state fallback ──────────────────────────────────────── */

function EmptyState() {
  return (
    <div className="space-y-3">
      <KnownSection title="What we know" items={[]} />
      <InvestigatingSection title="Still investigating" items={[]} />
      {/* Intentionally no Possible explanations section when empty */}
      <QuietSummary text={null} />
      <div className="flex items-start gap-2">
        <span className="mt-[3px] h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400/50" />
        <p className="text-sm text-gray-500 italic">We are still establishing the basic facts.</p>
      </div>
    </div>
  );
}

/* ── Main component ────────────────────────────────────────────── */

function InvestigationSummaryPanelV3({ graph, selectedQuestion, result }) {
  // Build the view model from the adapter
  const resolvedIds = new Set(graph?.resolvedNodeIds || []);

  const viewModel = buildFacilitatorViewModel({
    nodes: graph?.nodes || [],
    resolvedIds,
    activeUnknownNodeId: graph?.activeUnknownNodeId || null,
    edges: graph?.edges || [],
    selectedQuestion,
  });

  // Early state fallback
  if (!viewModel.known.hasItems && !viewModel.investigating.hasItems) {
    return <EmptyState />;
  }

  return (
    <div className="rounded-lg border border-gray-200/60 bg-gray-50/40 p-5 space-y-4">
      {/* What we know */}
      <KnownSection title={viewModel.known.title} items={viewModel.known.items} />

      {/* Still investigating — or "Remaining cautions" in terminal state */}
      {!viewModel.investigating.shouldOmit && (
        <InvestigatingSection
          title={viewModel.investigating.title}
          items={viewModel.investigating.items}
        />
      )}

      {/* Possible explanations */}
      {viewModel.explanations.hasItems && (
        <ExplanationSection items={viewModel.explanations.items} />
      )}

      {/* Quiet reasoning summary */}
      <QuietSummary text={viewModel.summary.text} />
    </div>
  );
}

export default InvestigationSummaryPanelV3;